feat: add NgModules for material (#950)

Author: jelbourn

package.json

@@ -22,20 +22,20 @@
     "deploy": "firebase deploy",
     "webdriver-manager": "webdriver-manager"
   },
-  "version": "2.0.0-alpha.6-2",
+  "version": "2.0.0-alpha.6-3",
   "license": "MIT",
   "engines": {
     "node": ">= 4.2.1 < 5"
   },
   "dependencies": {
-    "@angular/common": "2.0.0-rc.4",
-    "@angular/compiler": "2.0.0-rc.4",
-    "@angular/core": "2.0.0-rc.4",
-    "@angular/http": "2.0.0-rc.4",
-    "@angular/platform-browser": "2.0.0-rc.4",
-    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
-    "@angular/router": "v3.0.0-alpha.8",
-    "@angular/forms": "^0.2.0",
+    "@angular/common": "github:angular/common-builds",
+    "@angular/compiler": "github:angular/compiler-builds",
+    "@angular/core": "github:angular/core-builds",
+    "@angular/http": "github:angular/http-builds",
+    "@angular/platform-browser": "github:angular/platform-browser-builds",
+    "@angular/platform-browser-dynamic": "github:angular/platform-browser-dynamic-builds",
+    "@angular/forms": "github:angular/forms-builds",
+    "@angular/router": "github:angular/router-builds",
     "core-js": "^2.4.0",
     "hammerjs": "^2.0.8",
     "rxjs": "5.0.0-beta.6",

scripts/release/stage-release.sh

@@ -18,6 +18,9 @@ mkdir deploy
 # Start off by building normally.
 ng build
 
+# `ng build` does not complete synchronously, so wait a moment for it.
+sleep 2
+
 # We need to remove moduleId for the ngc build. We do this by simply commenting out with a
 # distinguishing marker and then undoing those lines after we've generated the .metadata.json files.
 grep -lr "moduleId:" ./src/ | xargs sed -i 's|moduleId:|//MODULE moduleId:|g'
@@ -58,6 +61,9 @@ cp -R ./dist/components/* ./deploy/
 # Copy the core/ directory directly into ./deploy
 cp -R ./dist/core/ ./deploy/core/
 
+# Remove css files from src/
+find ./src -iname "*.css" | xargs rm
+
 # Remove test files from deploy/
 find ./deploy -iname "*.spec.d.ts" | xargs rm
 find ./deploy -iname "*.spec.js" | xargs rm

src/components/all/all.ts

@@ -0,0 +1,59 @@
+import {NgModule} from '@angular/core';
+import {MdButtonToggleModule} from '@angular2-material/button-toggle/button-toggle';
+import {MdButtonModule} from '@angular2-material/button/button';
+import {MdCheckboxModule} from '@angular2-material/checkbox/checkbox';
+import {MdRadioModule} from '@angular2-material/radio/radio';
+import {MdSlideToggleModule} from '@angular2-material/slide-toggle/slide-toggle';
+import {MdSliderModule} from '@angular2-material/slider/slider';
+import {MdSidenavModule} from '@angular2-material/sidenav/sidenav';
+import {MdListModule} from '@angular2-material/list/list';
+import {MdGridListModule} from '@angular2-material/grid-list/grid-list';
+import {MdCardModule} from '@angular2-material/card/card';
+import {MdIconModule} from '@angular2-material/icon/icon';
+import {MdProgressCircleModule} from '@angular2-material/progress-circle/progress-circle';
+import {MdProgressBarModule} from '@angular2-material/progress-bar/progress-bar';
+import {MdInputModule} from '@angular2-material/input/input';
+import {MdTabsModule} from '@angular2-material/tabs/tabs';
+import {MdToolbarModule} from '@angular2-material/toolbar/toolbar';
+import {MdTooltipModule} from '@angular2-material/tooltip/tooltip';
+import {MdRippleModule} from '@angular2-material/core/ripple/ripple';
+import {PortalModule} from '@angular2-material/core/portal/portal-directives';
+import {OverlayModule} from '@angular2-material/core/overlay/overlay-directives';
+import {MdMenuModule} from '@angular2-material/menu/menu';
+import {MdDialogModule} from '@angular2-material/dialog/dialog';
+import {RtlModule} from '@angular2-material/core/rtl/dir';
+import {MdLiveAnnouncer} from '@angular2-material/core/a11y/live-announcer';
+
+
+const MATERIAL_MODULES = [
+  MdButtonModule,
+  MdButtonToggleModule,
+  MdCardModule,
+  MdCheckboxModule,
+  MdDialogModule,
+  MdGridListModule,
+  MdIconModule,
+  MdInputModule,
+  MdListModule,
+  MdMenuModule,
+  MdProgressBarModule,
+  MdProgressCircleModule,
+  MdRadioModule,
+  MdRippleModule,
+  MdSidenavModule,
+  MdSliderModule,
+  MdSlideToggleModule,
+  MdTabsModule,
+  MdToolbarModule,
+  MdTooltipModule,
+  OverlayModule,
+  PortalModule,
+  RtlModule,
+];
+
+@NgModule({
+  imports: MATERIAL_MODULES,
+  exports: MATERIAL_MODULES,
+  providers: [MdLiveAnnouncer]
+})
+export class MaterialModule { }

src/components/button-toggle/button-toggle.spec.ts

@@ -1,40 +1,40 @@
 import {
-  addProviders,
   inject,
   async,
   fakeAsync,
   tick,
+  TestComponentBuilder,
+  ComponentFixture,
+  TestBed,
 } from '@angular/core/testing';
-import {NgControl, disableDeprecatedForms, provideForms} from '@angular/forms';
-import {TestComponentBuilder, ComponentFixture} from '@angular/compiler/testing';
+import {NgControl, FormsModule} from '@angular/forms';
 import {Component, DebugElement} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {
-  MD_BUTTON_TOGGLE_DIRECTIVES,
-  MdButtonToggleGroup,
-  MdButtonToggle,
-  MdButtonToggleGroupMultiple,
-  MdButtonToggleChange,
+    MdButtonToggleGroup,
+    MdButtonToggle,
+    MdButtonToggleGroupMultiple,
+    MdButtonToggleChange, MdButtonToggleModule,
 } from './button-toggle';
-import {
-  MdUniqueSelectionDispatcher
-} from '@angular2-material/core/coordination/unique-selection-dispatcher';
 
 
 describe('MdButtonToggle', () => {
   let builder: TestComponentBuilder;
-  let dispatcher: MdUniqueSelectionDispatcher;
-
-  beforeEach(() => {
-    addProviders([
-      disableDeprecatedForms(),
-      provideForms(),
-      {provide: MdUniqueSelectionDispatcher, useFactory: () => {
-        dispatcher = new MdUniqueSelectionDispatcher();
-        return dispatcher;
-      }}
-    ]);
-  });
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [MdButtonToggleModule, FormsModule],
+      declarations: [
+        ButtonTogglesInsideButtonToggleGroup,
+        ButtonToggleGroupWithNgModel,
+        ButtonTogglesInsideButtonToggleGroupMultiple,
+        StandaloneButtonToggle,
+      ],
+    });
+
+
+    TestBed.compileComponents();
+  }));
 
   beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
     builder = tcb;
@@ -439,7 +439,6 @@ describe('MdButtonToggle', () => {
 
 
 @Component({
-  directives: [MD_BUTTON_TOGGLE_DIRECTIVES],
   template: `
   <md-button-toggle-group [disabled]="isGroupDisabled" [value]="groupValue">
     <md-button-toggle value="test1">Test1</md-button-toggle>
@@ -454,7 +453,6 @@ class ButtonTogglesInsideButtonToggleGroup {
 }
 
 @Component({
-  directives: [MD_BUTTON_TOGGLE_DIRECTIVES],
   template: `
   <md-button-toggle-group [(ngModel)]="modelValue" (change)="lastEvent = $event">
     <md-button-toggle *ngFor="let option of options" [value]="option.value">
@@ -474,7 +472,6 @@ class ButtonToggleGroupWithNgModel {
 }
 
 @Component({
-  directives: [MD_BUTTON_TOGGLE_DIRECTIVES],
   template: `
   <md-button-toggle-group [disabled]="isGroupDisabled" multiple>
     <md-button-toggle value="eggs">Eggs</md-button-toggle>
@@ -488,7 +485,6 @@ class ButtonTogglesInsideButtonToggleGroupMultiple {
 }
 
 @Component({
-  directives: [MD_BUTTON_TOGGLE_DIRECTIVES],
   template: `
   <md-button-toggle>Yes</md-button-toggle>
   `

src/components/button-toggle/button-toggle.ts

@@ -1,4 +1,5 @@
 import {
+    NgModule,
     Component,
     ContentChildren,
     Directive,
@@ -15,6 +16,7 @@ import {
 import {
     NG_VALUE_ACCESSOR,
     ControlValueAccessor,
+    FormsModule,
 } from '@angular/forms';
 import {Observable} from 'rxjs/Observable';
 import {
@@ -374,3 +376,12 @@ export const MD_BUTTON_TOGGLE_DIRECTIVES = [
   MdButtonToggleGroupMultiple,
   MdButtonToggle
 ];
+
+
+@NgModule({
+  imports: [FormsModule],
+  exports: MD_BUTTON_TOGGLE_DIRECTIVES,
+  declarations: MD_BUTTON_TOGGLE_DIRECTIVES,
+  providers: [MdUniqueSelectionDispatcher],
+})
+export class MdButtonToggleModule { }

src/components/button/button.spec.ts

@@ -1,13 +1,26 @@
-import {inject} from '@angular/core/testing';
-import {TestComponentBuilder} from '@angular/compiler/testing';
+import {
+  inject,
+  TestComponentBuilder,
+  async,
+  TestBed,
+} from '@angular/core/testing';
 import {Component} from '@angular/core';
 import {By} from '@angular/platform-browser';
-import {MdButton, MdAnchor} from './button';
+import {MdButtonModule} from './button';
 
 
 describe('MdButton', () => {
   let builder: TestComponentBuilder;
 
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [MdButtonModule],
+      declarations: [TestApp],
+    });
+
+    TestBed.compileComponents();
+  }));
+
   beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
     builder = tcb;
   }));
@@ -141,8 +154,7 @@ describe('MdButton', () => {
       Go
     </button>
     <a href="http://www.google.com" md-button [disabled]="isDisabled" [color]="buttonColor">Link</a>
-  `,
-  directives: [MdButton, MdAnchor]
+  `
 })
 class TestApp {
   clickCount: number = 0;

src/components/button/button.ts

@@ -7,6 +7,7 @@ import {
   ElementRef,
   Renderer,
   Type,
+  NgModule,
 } from '@angular/core';
 
 // TODO(jelbourn): Ink ripples.
@@ -137,3 +138,10 @@ export class MdAnchor extends MdButton {
 
 
 export const MD_BUTTON_DIRECTIVES: Type[] = [MdButton, MdAnchor];
+
+
+@NgModule({
+  exports: MD_BUTTON_DIRECTIVES,
+  declarations: MD_BUTTON_DIRECTIVES,
+})
+export class MdButtonModule { }

src/components/button/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular2-material/button",
-  "version": "2.0.0-alpha.6-2",
+  "version": "2.0.0-alpha.6-3",
   "description": "Angular 2 Material button",
   "main": "./button.js",
   "typings": "./button.d.ts",
@@ -23,6 +23,6 @@
   },
   "homepage": "https://github.com/angular/material2#readme",
   "peerDependencies": {
-    "@angular2-material/core": "2.0.0-alpha.6-2"
+    "@angular2-material/core": "2.0.0-alpha.6-3"
   }
 }

src/components/card/card.ts

@@ -1,4 +1,4 @@
-import {Component, ViewEncapsulation, ChangeDetectionStrategy} from '@angular/core';
+import {NgModule, Component, ViewEncapsulation, ChangeDetectionStrategy} from '@angular/core';
 
 
 /*
@@ -75,3 +75,10 @@ TODO(kara): update link to demo site when it exists
 export class MdCardTitleGroup {}
 
 export const MD_CARD_DIRECTIVES: any[] = [MdCard, MdCardHeader, MdCardTitleGroup];
+
+
+@NgModule({
+  exports: MD_CARD_DIRECTIVES,
+  declarations: MD_CARD_DIRECTIVES,
+})
+export class MdCardModule { }

src/components/card/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular2-material/card",
-  "version": "2.0.0-alpha.6-2",
+  "version": "2.0.0-alpha.6-3",
   "description": "Angular 2 Material card",
   "main": "./card.js",
   "typings": "./card.d.ts",
@@ -21,6 +21,6 @@
   },
   "homepage": "https://github.com/angular/material2#readme",
   "peerDependencies": {
-    "@angular2-material/core": "2.0.0-alpha.6-2"
+    "@angular2-material/core": "2.0.0-alpha.6-3"
   }
 }