chore: make the library ready for offline compile (#738)

src/components/checkbox/checkbox.ts

@@ -22,7 +22,7 @@ let nextId = 0;
  * Provider Expression that allows md-checkbox to register as a ControlValueAccessor. This allows it
  * to support [(ngModel)] and ngControl.
  */
-const MD_CHECKBOX_CONTROL_VALUE_ACCESSOR = new Provider(
+export const MD_CHECKBOX_CONTROL_VALUE_ACCESSOR = new Provider(
     NG_VALUE_ACCESSOR, {
       useExisting: forwardRef(() => MdCheckbox),
       multi: true

src/components/input/input.ts

@@ -18,7 +18,9 @@ import {
 } from '@angular/core';
 import {
   NG_VALUE_ACCESSOR,
-  ControlValueAccessor
+  ControlValueAccessor,
+  NgModel,
+  NgIf,
 } from '@angular/common';
 import {BooleanFieldValue} from '@angular2-material/core/annotations/field-value';
 import {MdError} from '@angular2-material/core/errors/error';
@@ -27,7 +29,7 @@ import {Observable} from 'rxjs/Observable';
 
 const noop = () => {};
 
-const MD_INPUT_CONTROL_VALUE_ACCESSOR = new Provider(NG_VALUE_ACCESSOR, {
+export const MD_INPUT_CONTROL_VALUE_ACCESSOR = new Provider(NG_VALUE_ACCESSOR, {
   useExisting: forwardRef(() => MdInput),
   multi: true
 });
@@ -97,6 +99,7 @@ export class MdHint {
   templateUrl: 'input.html',
   styleUrls: ['input.css'],
   providers: [MD_INPUT_CONTROL_VALUE_ACCESSOR],
+  directives: [NgIf, NgModel],
   host: {'(click)' : 'focus()'}
 })
 export class MdInput implements ControlValueAccessor, AfterContentInit, OnChanges {

src/components/progress-bar/progress-bar.ts

@@ -4,7 +4,7 @@ import {
     HostBinding,
     Input,
 } from '@angular/core';
-
+import {NgStyle} from '@angular/common';
 
 // TODO(josephperrott): Benchpress tests.
 // TODO(josephperrott): Add ARIA attributes for progressbar "for".
@@ -24,6 +24,7 @@ import {
   templateUrl: 'progress-bar.html',
   styleUrls: ['progress-bar.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  directives: [NgStyle],
 })
 export class MdProgressBar {
   /** Value of the progressbar. Defaults to zero. Mirrored to aria-valuenow. */

src/components/radio/radio.ts

@@ -34,7 +34,7 @@ export {
  * Provider Expression that allows md-radio-group to register as a ControlValueAccessor. This
  * allows it to support [(ngModel)] and ngControl.
  */
-const MD_RADIO_GROUP_CONTROL_VALUE_ACCESSOR = new Provider(
+export const MD_RADIO_GROUP_CONTROL_VALUE_ACCESSOR = new Provider(
     NG_VALUE_ACCESSOR, {
       useExisting: forwardRef(() => MdRadioGroup),
       multi: true

src/components/sidenav/sidenav.ts

@@ -12,6 +12,7 @@ import {
     EventEmitter,
     Renderer
 } from '@angular/core';
+import {NgStyle} from '@angular/common';
 import {Dir} from '@angular2-material/core/rtl/dir';
 import {PromiseCompleter} from '@angular2-material/core/async/promise-completer';
 import {MdError} from '@angular2-material/core/errors/error';
@@ -231,7 +232,7 @@ export class MdSidenav {
   // Do not use ChangeDetectionStrategy.OnPush. It does not work for this component because
   // technically it is a sibling of MdSidenav (on the content tree) and isn't updated when MdSidenav
   // changes its state.
-  directives: [MdSidenav],
+  directives: [MdSidenav, NgStyle],
   templateUrl: 'sidenav.html',
   styleUrls: [
     'sidenav.css',

src/components/tabs/tabs.ts

@@ -6,10 +6,11 @@ import {
     Output,
     ViewChildren,
     NgZone,
-    EventEmitter
+    EventEmitter,
+    QueryList,
+    ContentChildren
 } from '@angular/core';
-import {QueryList} from '@angular/core';
-import {ContentChildren} from '@angular/core';
+import {NgIf, NgFor} from '@angular/common';
 import {PortalHostDirective} from '@angular2-material/core/portal/portal-directives';
 import {MdTabLabel} from './tab-label';
 import {MdTabContent} from './tab-content';
@@ -45,7 +46,7 @@ export class MdTab {
   selector: 'md-tab-group',
   templateUrl: 'tab-group.html',
   styleUrls: ['tab-group.css'],
-  directives: [PortalHostDirective, MdTabLabelWrapper, MdInkBar],
+  directives: [PortalHostDirective, MdTabLabelWrapper, MdInkBar, NgIf, NgFor],
 })
 export class MdTabGroup {
   /** @internal */

src/core/a11y/live-announcer.ts

@@ -14,7 +14,11 @@ export class MdLiveAnnouncer {
 
   private _liveElement: Element;
 
-  constructor(@Optional() @Inject(LIVE_ANNOUNCER_ELEMENT_TOKEN) elementToken: Element) {
+  constructor(@Optional() @Inject(LIVE_ANNOUNCER_ELEMENT_TOKEN) elementToken: any) {
+
+    // We inject the live element as `any` because the constructor signature cannot reference
+    // browser globals (HTMLElement) on non-browser environments, since having a class decorator
+    // causes TypeScript to preserve the constructor signature types.
     this._liveElement = elementToken || this._createLiveElement();
   }
 

src/core/overlay/overlay.ts

@@ -32,10 +32,17 @@ let defaultState = new OverlayState();
  */
  @Injectable()
 export class Overlay {
+  private _overlayContainerElement: HTMLElement;
+
   constructor(
-      @Inject(OVERLAY_CONTAINER_TOKEN) private _overlayContainerElement: HTMLElement,
+      @Inject(OVERLAY_CONTAINER_TOKEN) overlayContainerElement: any,
       private _componentResolver: ComponentResolver,
       private _positionBuilder: OverlayPositionBuilder) {
+
+    // We inject the container as `any` because the constructor signature cannot reference
+    // browser globals (HTMLElement) on non-browser environments, since having a class decorator
+    // causes TypeScript to preserve the constructor signature types.
+    this._overlayContainerElement = overlayContainerElement;
   }
 
   /**

src/demo-app/checkbox/checkbox-demo.ts

@@ -1,8 +1,8 @@
 import {Component} from '@angular/core';
-import {FORM_DIRECTIVES} from '@angular/common';
+import {NgFor, FORM_DIRECTIVES} from '@angular/common';
 import {MdCheckbox} from '@angular2-material/checkbox/checkbox';
 
-interface Task {
+export interface Task {
   name: string;
   completed: boolean;
   subtasks?: Task[];
@@ -17,9 +17,9 @@ interface Task {
     }
   `],
   templateUrl: 'nested-checklist.html',
-  directives: [MdCheckbox]
+  directives: [MdCheckbox, NgFor]
 })
-class MdCheckboxDemoNestedChecklist {
+export class MdCheckboxDemoNestedChecklist {
   tasks: Task[] = [
     {
       name: 'Reminders',

src/demo-app/grid-list/grid-list-demo.ts

@@ -1,4 +1,5 @@
 import {Component} from '@angular/core';
+import {NgFor, FORM_DIRECTIVES} from '@angular/common';
 import {MD_GRID_LIST_DIRECTIVES} from '@angular2-material/grid-list/grid-list';
 import {MdButton} from '@angular2-material/button/button';
 import {MD_CARD_DIRECTIVES} from '@angular2-material/card/card';
@@ -9,7 +10,14 @@ import {MdIcon, MdIconRegistry} from '@angular2-material/icon/icon';
   selector: 'grid-list-demo',
   templateUrl: 'grid-list-demo.html',
   styleUrls: ['grid-list-demo.css'],
-  directives: [MD_GRID_LIST_DIRECTIVES, MdButton, MD_CARD_DIRECTIVES, MdIcon],
+  directives: [
+    MD_GRID_LIST_DIRECTIVES,
+    MdButton,
+    MD_CARD_DIRECTIVES,
+    MdIcon,
+    FORM_DIRECTIVES,
+    NgFor,
+  ],
   providers: [MdIconRegistry]
 })
 export class GridListDemo {

src/demo-app/input/input-demo.ts

@@ -1,4 +1,5 @@
 import {Component} from '@angular/core';
+import {FORM_DIRECTIVES, NgFor} from '@angular/common';
 import {MD_INPUT_DIRECTIVES} from '@angular2-material/input/input';
 import {MdButton} from '@angular2-material/button/button';
 import {MdCard} from '@angular2-material/card/card';
@@ -14,7 +15,16 @@ let max = 5;
   selector: 'input-demo',
   templateUrl: 'input-demo.html',
   styleUrls: ['input-demo.css'],
-  directives: [MdCard, MdCheckbox, MdButton, MdIcon, MdToolbar, MD_INPUT_DIRECTIVES]
+  directives: [
+    MdCard,
+    MdCheckbox,
+    MdButton,
+    MdIcon,
+    MdToolbar,
+    MD_INPUT_DIRECTIVES,
+    FORM_DIRECTIVES,
+    NgFor,
+  ]
 })
 export class InputDemo {
   dividerColor: boolean;

src/demo-app/list/list-demo.ts

@@ -1,4 +1,5 @@
 import {Component} from '@angular/core';
+import {NgIf, NgFor} from '@angular/common';
 import {MdButton} from '@angular2-material/button/button';
 import {MD_LIST_DIRECTIVES} from '@angular2-material/list/list';
 import {MdIcon} from '@angular2-material/icon/icon';
@@ -8,7 +9,7 @@ import {MdIcon} from '@angular2-material/icon/icon';
   selector: 'list-demo',
   templateUrl: 'list-demo.html',
   styleUrls: ['list-demo.css'],
-  directives: [MD_LIST_DIRECTIVES, MdButton, MdIcon]
+  directives: [MD_LIST_DIRECTIVES, MdButton, MdIcon, NgIf, NgFor]
 })
 export class ListDemo {
   items: string[] = [

src/demo-app/overlay/overlay-demo.ts

@@ -6,6 +6,7 @@ import {
     ViewChild,
     ViewContainerRef
 } from '@angular/core';
+import {NgIf} from '@angular/common';
 import {
     Overlay,
     OverlayState,
@@ -24,7 +25,7 @@ import {
   selector: 'overlay-demo',
   templateUrl: 'overlay-demo.html',
   styleUrls: ['overlay-demo.css'],
-  directives: [PORTAL_DIRECTIVES, OVERLAY_DIRECTIVES],
+  directives: [PORTAL_DIRECTIVES, OVERLAY_DIRECTIVES, NgIf],
   providers: [OVERLAY_PROVIDERS],
   encapsulation: ViewEncapsulation.None,
 })

src/demo-app/portal/portal-demo.ts

@@ -1,4 +1,5 @@
 import {Component, ViewChildren, QueryList} from '@angular/core';
+import {NgFor} from '@angular/common';
 import {
     Portal,
     ComponentPortal,
@@ -12,7 +13,7 @@ import {
   selector: 'portal-demo',
   templateUrl: 'portal-demo.html',
   styleUrls: ['portal-demo.css'],
-  directives: [TemplatePortalDirective, PortalHostDirective]
+  directives: [TemplatePortalDirective, PortalHostDirective, NgFor]
 })
 export class PortalDemo {
   @ViewChildren(TemplatePortalDirective) templatePortals: QueryList<Portal<any>>;

src/demo-app/radio/radio-demo.ts

@@ -1,6 +1,7 @@
 import {Component} from '@angular/core';
+import {FORM_DIRECTIVES, NgFor} from '@angular/common';
 import {MdCheckbox} from '@angular2-material/checkbox/checkbox';
-import {MdRadioButton, MdRadioGroup} from '@angular2-material/radio/radio';
+import {MD_RADIO_DIRECTIVES} from '@angular2-material/radio/radio';
 import {
   MdUniqueSelectionDispatcher
 } from '@angular2-material/core/coordination/unique-selection-dispatcher';
@@ -11,7 +12,7 @@ import {
   templateUrl: 'radio-demo.html',
   styleUrls: ['radio-demo.css'],
   providers: [MdUniqueSelectionDispatcher],
-  directives: [MdCheckbox, MdRadioButton, MdRadioGroup]
+  directives: [MdCheckbox, MD_RADIO_DIRECTIVES, FORM_DIRECTIVES, NgFor]
 })
 export class RadioDemo {
   isDisabled: boolean = false;

src/demo-app/slide-toggle/slide-toggle-demo.ts

@@ -1,4 +1,5 @@
 import {Component} from '@angular/core';
+import {FORM_DIRECTIVES} from '@angular/common';
 import {MdSlideToggle} from '@angular2-material/slide-toggle/slide-toggle';
 
 @Component({
@@ -6,6 +7,6 @@ import {MdSlideToggle} from '@angular2-material/slide-toggle/slide-toggle';
   selector: 'switch-demo',
   templateUrl: 'slide-toggle-demo.html',
   styleUrls: ['slide-toggle-demo.css'],
-  directives: [MdSlideToggle]
+  directives: [MdSlideToggle, FORM_DIRECTIVES]
 })
 export class SlideToggleDemo {}

src/demo-app/tabs/tab-group-demo.ts

@@ -1,4 +1,5 @@
 import {Component, ViewEncapsulation} from '@angular/core';
+import {FORM_DIRECTIVES, NgIf, NgFor, AsyncPipe} from '@angular/common';
 import {MD_TABS_DIRECTIVES} from '@angular2-material/tabs/tabs';
 import {MdToolbar} from '@angular2-material/toolbar/toolbar';
 import {MdInput} from '@angular2-material/input/input';
@@ -9,7 +10,8 @@ import {Observable} from 'rxjs/Observable';
   selector: 'tab-group-demo',
   templateUrl: 'tab-group-demo.html',
   styleUrls: ['tab-group-demo.css'],
-  directives: [MD_TABS_DIRECTIVES, MdToolbar, MdInput],
+  directives: [MD_TABS_DIRECTIVES, MdToolbar, MdInput, NgIf, FORM_DIRECTIVES, NgFor],
+  pipes: [AsyncPipe],
   encapsulation: ViewEncapsulation.None,
 })
 export class TabsDemo {

src/demo-app/tsconfig.json

@@ -26,6 +26,10 @@
       ]
     }
   },
+  "angularCompilerOptions": {
+    "genDir": "../../dist",
+    "debug": true
+  },
   "files": [
     "main.ts",
     "typings.d.ts"