diff --git a/package.json b/package.json index 1d50ce46ca9f..23aa42936874 100644 --- a/package.json +++ b/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", diff --git a/scripts/release/stage-release.sh b/scripts/release/stage-release.sh index 8f260ba3eedf..e0a951e72efc 100755 --- a/scripts/release/stage-release.sh +++ b/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 diff --git a/src/components/all/all.ts b/src/components/all/all.ts new file mode 100644 index 000000000000..41cf8a1c41da --- /dev/null +++ b/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 { } diff --git a/src/components/button-toggle/button-toggle.spec.ts b/src/components/button-toggle/button-toggle.spec.ts index ed133252dfe1..16b5e1140045 100644 --- a/src/components/button-toggle/button-toggle.spec.ts +++ b/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: ` Test1 @@ -454,7 +453,6 @@ class ButtonTogglesInsideButtonToggleGroup { } @Component({ - directives: [MD_BUTTON_TOGGLE_DIRECTIVES], template: ` @@ -474,7 +472,6 @@ class ButtonToggleGroupWithNgModel { } @Component({ - directives: [MD_BUTTON_TOGGLE_DIRECTIVES], template: ` Eggs @@ -488,7 +485,6 @@ class ButtonTogglesInsideButtonToggleGroupMultiple { } @Component({ - directives: [MD_BUTTON_TOGGLE_DIRECTIVES], template: ` Yes ` diff --git a/src/components/button-toggle/button-toggle.ts b/src/components/button-toggle/button-toggle.ts index aeaf7e9795cd..ffe9da869d94 100644 --- a/src/components/button-toggle/button-toggle.ts +++ b/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 { } diff --git a/src/components/button/button.spec.ts b/src/components/button/button.spec.ts index 6c69dc744a84..ba495bf9e7b9 100644 --- a/src/components/button/button.spec.ts +++ b/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 Link - `, - directives: [MdButton, MdAnchor] + ` }) class TestApp { clickCount: number = 0; diff --git a/src/components/button/button.ts b/src/components/button/button.ts index 495d687758dc..5c519e047c63 100644 --- a/src/components/button/button.ts +++ b/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 { } diff --git a/src/components/button/package.json b/src/components/button/package.json index f10f63c23749..49b8ff7e3946 100644 --- a/src/components/button/package.json +++ b/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" } } diff --git a/src/components/card/card.ts b/src/components/card/card.ts index 2dc60f610b9f..a3dc9e0c54b7 100644 --- a/src/components/card/card.ts +++ b/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 { } diff --git a/src/components/card/package.json b/src/components/card/package.json index bff6f11c014a..ba280edd15d8 100644 --- a/src/components/card/package.json +++ b/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" } } diff --git a/src/components/checkbox/checkbox.spec.ts b/src/components/checkbox/checkbox.spec.ts index 3796203ad405..9e1d9fa7f8f6 100644 --- a/src/components/checkbox/checkbox.spec.ts +++ b/src/components/checkbox/checkbox.spec.ts @@ -1,22 +1,19 @@ import { - addProviders, inject, async, fakeAsync, - flushMicrotasks + flushMicrotasks, + TestComponentBuilder, + ComponentFixture, + TestBed, } from '@angular/core/testing'; import { - FORM_DIRECTIVES, - NgModel, NgControl, - disableDeprecatedForms, - provideForms + FormsModule, } from '@angular/forms'; -import {TestComponentBuilder, ComponentFixture} from '@angular/compiler/testing'; import {Component, DebugElement} from '@angular/core'; import {By} from '@angular/platform-browser'; -import {MdCheckbox, MdCheckboxChange} from './checkbox'; - +import {MdCheckbox, MdCheckboxChange, MdCheckboxModule} from './checkbox'; // TODO: Implement E2E tests for spacebar/click behavior for checking/unchecking @@ -25,12 +22,23 @@ describe('MdCheckbox', () => { let builder: TestComponentBuilder; let fixture: ComponentFixture; - beforeEach(() => { - addProviders([ - disableDeprecatedForms(), - provideForms(), - ]); - }); + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [MdCheckboxModule, FormsModule], + declarations: [ + SingleCheckbox, + CheckboxWithFormDirectives, + MultipleCheckboxes, + CheckboxWithTabIndex, + CheckboxWithAriaLabel, + CheckboxWithAriaLabelledby, + CheckboxWithNameAttribute, + CheckboxWithChangeEvent, + ], + }); + + TestBed.compileComponents(); + })); beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { builder = tcb; @@ -515,7 +523,6 @@ describe('MdCheckbox', () => { /** Simple component for testing a single checkbox. */ @Component({ - directives: [MdCheckbox], template: `
Be good @@ -560,7 +566,6 @@ class CheckboxWithFormDirectives { /** Simple test component with multiple checkboxes. */ @Component(({ - directives: [MdCheckbox], template: ` Option 1 Option 2 @@ -571,7 +576,6 @@ class MultipleCheckboxes { } /** Simple test component with tabIndex */ @Component({ - directives: [MdCheckbox], template: ` `, @@ -583,30 +587,27 @@ class CheckboxWithTabIndex { /** Simple test component with an aria-label set. */ @Component({ - directives: [MdCheckbox], template: `` }) class CheckboxWithAriaLabel { } /** Simple test component with an aria-label set. */ @Component({ - directives: [MdCheckbox], template: `` }) class CheckboxWithAriaLabelledby {} /** Simple test component with name attribute */ @Component({ - directives: [MdCheckbox], template: `` }) class CheckboxWithNameAttribute {} /** Simple test component with change event */ @Component({ - directives: [MdCheckbox], template: `` }) class CheckboxWithChangeEvent { lastEvent: MdCheckboxChange; } + diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts index 0a615e84c2b8..9a14b7c1cb80 100644 --- a/src/components/checkbox/checkbox.ts +++ b/src/components/checkbox/checkbox.ts @@ -7,7 +7,8 @@ import { Output, Renderer, ViewEncapsulation, - forwardRef + forwardRef, + NgModule, } from '@angular/core'; import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms'; @@ -304,3 +305,10 @@ export class MdCheckbox implements ControlValueAccessor { } export const MD_CHECKBOX_DIRECTIVES = [MdCheckbox]; + + +@NgModule({ + exports: MD_CHECKBOX_DIRECTIVES, + declarations: MD_CHECKBOX_DIRECTIVES, +}) +export class MdCheckboxModule { } diff --git a/src/components/checkbox/package.json b/src/components/checkbox/package.json index 8ba33d19900b..7225e682e764 100644 --- a/src/components/checkbox/package.json +++ b/src/components/checkbox/package.json @@ -1,6 +1,6 @@ { "name": "@angular2-material/checkbox", - "version": "2.0.0-alpha.6-2", + "version": "2.0.0-alpha.6-3", "description": "Angular 2 Material checkbox", "main": "./checkbox.js", "typings": "./checkbox.d.ts", @@ -21,7 +21,7 @@ }, "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", "@angular/forms": "^0.2.0" } } diff --git a/src/components/dialog/dialog-container.ts b/src/components/dialog/dialog-container.ts index 62c54764d2d0..27eb66f2eacf 100644 --- a/src/components/dialog/dialog-container.ts +++ b/src/components/dialog/dialog-container.ts @@ -18,7 +18,6 @@ import {MdDialogContentAlreadyAttachedError} from './dialog-errors'; selector: 'md-dialog-container', templateUrl: 'dialog-container.html', styleUrls: ['dialog-container.css'], - directives: [PortalHostDirective], host: { 'class': 'md-dialog-container', '[attr.role]': 'dialogConfig?.role' @@ -26,7 +25,7 @@ import {MdDialogContentAlreadyAttachedError} from './dialog-errors'; }) export class MdDialogContainer extends BasePortalHost implements AfterViewInit { /** The portal host inside of this container into which the dialog content will be loaded. */ - @ViewChild(PortalHostDirective) private _portalHost: PortalHostDirective; + @ViewChild(PortalHostDirective) _portalHost: PortalHostDirective; /** * Completer used to resolve the promise for cases when a portal is attempted to be attached, diff --git a/src/components/dialog/dialog.spec.ts b/src/components/dialog/dialog.spec.ts index e0898379d0fc..1b8257b60153 100644 --- a/src/components/dialog/dialog.spec.ts +++ b/src/components/dialog/dialog.spec.ts @@ -3,8 +3,10 @@ import { fakeAsync, async, addProviders, + TestComponentBuilder, + ComponentFixture, + TestBed, } from '@angular/core/testing'; -import {TestComponentBuilder, ComponentFixture} from '@angular/compiler/testing'; import { Component, Directive, @@ -12,8 +14,7 @@ import { ViewContainerRef, ChangeDetectorRef, } from '@angular/core'; -import {MdDialog} from './dialog'; -import {OVERLAY_PROVIDERS} from '@angular2-material/core/overlay/overlay'; +import {MdDialog, MdDialogModule} from './dialog'; import {OverlayContainer} from '@angular2-material/core/overlay/overlay-container'; import {MdDialogConfig} from './dialog-config'; import {MdDialogRef} from './dialog-ref'; @@ -28,20 +29,21 @@ describe('MdDialog', () => { let testViewContainerRef: ViewContainerRef; let viewContainerFixture: ComponentFixture; - beforeEach(() => { + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [MdDialogModule], + declarations: [PizzaMsg, ComponentWithChildViewContainer, DirectiveWithViewContainer], + }); + addProviders([ - OVERLAY_PROVIDERS, - MdDialog, {provide: OverlayContainer, useFactory: () => { - return { - getContainerElement: () => { - overlayContainerElement = document.createElement('div'); - return overlayContainerElement; - } - }; - }}, + overlayContainerElement = document.createElement('div'); + return {getContainerElement: () => overlayContainerElement}; + }} ]); - }); + + TestBed.compileComponents(); + })); let deps = [TestComponentBuilder, MdDialog]; beforeEach(inject(deps, fakeAsync((tcb: TestComponentBuilder, d: MdDialog) => { @@ -133,7 +135,6 @@ class DirectiveWithViewContainer { @Component({ selector: 'arbitrary-component', template: ``, - directives: [DirectiveWithViewContainer], }) class ComponentWithChildViewContainer { @ViewChild(DirectiveWithViewContainer) childWithViewContainer: DirectiveWithViewContainer; @@ -153,3 +154,4 @@ class ComponentWithChildViewContainer { class PizzaMsg { constructor(public dialogRef: MdDialogRef) { } } + diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog.ts index 53b462c66ef4..e27b6edeca86 100644 --- a/src/components/dialog/dialog.ts +++ b/src/components/dialog/dialog.ts @@ -1,15 +1,18 @@ -import {Injector, ComponentRef, Injectable} from '@angular/core'; -import {Overlay} from '@angular2-material/core/overlay/overlay'; -import {OverlayRef} from '@angular2-material/core/overlay/overlay-ref'; -import {OverlayState} from '@angular2-material/core/overlay/overlay-state'; -import {ComponentPortal} from '@angular2-material/core/portal/portal'; +import {NgModule, Injector, ComponentRef, Injectable} from '@angular/core'; +import { + Overlay, + OverlayModule, + PortalModule, + OverlayRef, + OverlayState, + ComponentPortal, +} from '@angular2-material/core/core'; import {ComponentType} from '@angular2-material/core/overlay/generic-component-type'; import {MdDialogConfig} from './dialog-config'; import {MdDialogRef} from './dialog-ref'; import {DialogInjector} from './dialog-injector'; import {MdDialogContainer} from './dialog-container'; - export {MdDialogConfig} from './dialog-config'; export {MdDialogRef} from './dialog-ref'; @@ -116,3 +119,13 @@ export class MdDialog { return state; } } + + +@NgModule({ + imports: [OverlayModule, PortalModule], + exports: [MdDialogContainer], + declarations: [MdDialogContainer], + entryComponents: [MdDialogContainer], + providers: [MdDialog], +}) +export class MdDialogModule { } diff --git a/src/components/grid-list/grid-list.spec.ts b/src/components/grid-list/grid-list.spec.ts index 450526ab8e97..4150d88a751d 100644 --- a/src/components/grid-list/grid-list.spec.ts +++ b/src/components/grid-list/grid-list.spec.ts @@ -1,14 +1,22 @@ -import {inject, async} from '@angular/core/testing'; -import {TestComponentBuilder} from '@angular/compiler/testing'; +import {inject, async, TestComponentBuilder, TestBed} from '@angular/core/testing'; import {Component, DebugElement} from '@angular/core'; import {By} from '@angular/platform-browser'; - -import {MD_GRID_LIST_DIRECTIVES, MdGridList} from './grid-list'; +import {MdGridList, MdGridListModule} from './grid-list'; import {MdGridTile, MdGridTileText} from './grid-tile'; + describe('MdGridList', () => { let builder: TestComponentBuilder; + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [MdGridListModule], + declarations: [TestGridList], + }); + + TestBed.compileComponents(); + })); + beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { builder = tcb; })); @@ -379,8 +387,7 @@ describe('MdGridList', () => { @Component({ selector: 'test-grid-list', - template: ``, - directives: [MD_GRID_LIST_DIRECTIVES] + template: `` }) class TestGridList { tiles: any[]; diff --git a/src/components/grid-list/grid-list.ts b/src/components/grid-list/grid-list.ts index f5683c457ece..d723f199504b 100644 --- a/src/components/grid-list/grid-list.ts +++ b/src/components/grid-list/grid-list.ts @@ -1,4 +1,5 @@ import { + NgModule, Component, ViewEncapsulation, AfterContentChecked, @@ -20,7 +21,7 @@ import { } from './tile-styler'; import {MdGridListColsError} from './grid-list-errors'; import {Dir} from '@angular2-material/core/rtl/dir'; -import {MdLine} from '@angular2-material/core/line/line'; +import {MdLineModule} from '@angular2-material/core/line/line'; import {coerceToString, coerceToNumber} from './grid-list-measure'; // TODO(kara): Conditional (responsive) column count / row size. @@ -151,4 +152,12 @@ export class MdGridList implements OnInit, AfterContentChecked { } -export const MD_GRID_LIST_DIRECTIVES: any[] = [MdGridList, MdGridTile, MdLine, MdGridTileText]; +export const MD_GRID_LIST_DIRECTIVES: any[] = [MdGridList, MdGridTile, MdGridTileText]; + + +@NgModule({ + imports: [MdLineModule], + exports: [MD_GRID_LIST_DIRECTIVES, MdLineModule], + declarations: MD_GRID_LIST_DIRECTIVES, +}) +export class MdGridListModule { } diff --git a/src/components/grid-list/package.json b/src/components/grid-list/package.json index 78eadffb7909..41f426371ed7 100644 --- a/src/components/grid-list/package.json +++ b/src/components/grid-list/package.json @@ -1,6 +1,6 @@ { "name": "@angular2-material/grid-list", - "version": "2.0.0-alpha.6-2", + "version": "2.0.0-alpha.6-3", "description": "Angular 2 Material grid list", "main": "./grid-list.js", "typings": "./grid-list.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" } } diff --git a/src/components/icon/icon.spec.ts b/src/components/icon/icon.spec.ts index ae549796b278..6c8c7b0638b2 100644 --- a/src/components/icon/icon.spec.ts +++ b/src/components/icon/icon.spec.ts @@ -1,14 +1,18 @@ -import {addProviders, inject, async} from '@angular/core/testing'; -import {TestComponentBuilder} from '@angular/compiler/testing'; -import {HTTP_PROVIDERS, XHRBackend} from '@angular/http'; +import { + addProviders, + inject, + async, + TestComponentBuilder, + TestBed, +} from '@angular/core/testing'; +import {XHRBackend} from '@angular/http'; import {MockBackend} from '@angular/http/testing'; import {Component} from '@angular/core'; -import {MdIcon} from './icon'; +import {MdIconModule} from './icon'; import {MdIconRegistry} from './icon-registry'; import {getFakeSvgHttpResponse} from './fake-svgs'; - /** Returns the CSS classes assigned to an element as a sorted array. */ const sortedClassNames = (elem: Element) => elem.className.split(' ').sort(); @@ -35,15 +39,25 @@ const verifyPathChildElement = (element: Element, attributeValue: string) => { describe('MdIcon', () => { - beforeEach(() => { + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [MdIconModule], + declarations: [ + MdIconLigatureTestApp, + MdIconLigatureWithAriaBindingTestApp, + MdIconCustomFontCssTestApp, + MdIconFromSvgUrlTestApp, + MdIconFromSvgNameTestApp, + ], + }); + addProviders([ - MdIconRegistry, - HTTP_PROVIDERS, MockBackend, {provide: XHRBackend, useExisting: MockBackend}, ]); - }); + TestBed.compileComponents(); + })); let builder: TestComponentBuilder; let mdIconRegistry: MdIconRegistry; @@ -394,7 +408,6 @@ describe('MdIcon', () => { @Component({ selector: 'test-app', template: `{{iconName}}`, - directives: [MdIcon], }) class MdIconLigatureTestApp { ariaLabel: string = null; @@ -404,7 +417,6 @@ class MdIconLigatureTestApp { @Component({ selector: 'test-app', template: `{{iconName}}`, - directives: [MdIcon], }) class MdIconLigatureWithAriaBindingTestApp { ariaLabel: string = null; @@ -416,7 +428,6 @@ class MdIconLigatureWithAriaBindingTestApp { template: ` `, - directives: [MdIcon], }) class MdIconCustomFontCssTestApp { ariaLabel: string = null; @@ -427,7 +438,6 @@ class MdIconCustomFontCssTestApp { @Component({ selector: 'test-app', template: ``, - directives: [MdIcon], }) class MdIconFromSvgUrlTestApp { ariaLabel: string = null; @@ -437,7 +447,6 @@ class MdIconFromSvgUrlTestApp { @Component({ selector: 'test-app', template: ``, - directives: [MdIcon], }) class MdIconFromSvgNameTestApp { ariaLabel: string = null; diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts index a21974a608b8..ca35da9817df 100644 --- a/src/components/icon/icon.ts +++ b/src/components/icon/icon.ts @@ -1,4 +1,5 @@ import { + NgModule, ChangeDetectionStrategy, Component, ElementRef, @@ -10,6 +11,7 @@ import { ViewEncapsulation, AfterViewChecked } from '@angular/core'; +import {HttpModule} from '@angular/http'; import {MdError} from '@angular2-material/core/errors/error'; import {MdIconRegistry} from './icon-registry'; export {MdIconRegistry} from './icon-registry'; @@ -224,3 +226,12 @@ export class MdIcon implements OnChanges, OnInit, AfterViewChecked { } export const MD_ICON_DIRECTIVES = [MdIcon]; + + +@NgModule({ + imports: [HttpModule], + exports: MD_ICON_DIRECTIVES, + declarations: MD_ICON_DIRECTIVES, + providers: [MdIconRegistry], +}) +export class MdIconModule { } diff --git a/src/components/icon/package.json b/src/components/icon/package.json index ec7fd216368b..a724e61e860a 100644 --- a/src/components/icon/package.json +++ b/src/components/icon/package.json @@ -1,6 +1,6 @@ { "name": "@angular2-material/icon", - "version": "2.0.0-alpha.6-2", + "version": "2.0.0-alpha.6-3", "description": "Angular 2 Material icon", "main": "./icon.js", "typings": "./icon.d.ts", @@ -22,6 +22,6 @@ "homepage": "https://github.com/angular/material2#readme", "peerDependencies": { "@angular/http": "2.0.0-rc.4", - "@angular2-material/core": "2.0.0-alpha.6-2" + "@angular2-material/core": "2.0.0-alpha.6-3" } } diff --git a/src/components/input/input.spec.ts b/src/components/input/input.spec.ts index 93b7586a37ac..cef7ee77cc4c 100644 --- a/src/components/input/input.spec.ts +++ b/src/components/input/input.spec.ts @@ -1,27 +1,42 @@ import { - addProviders, async, inject, + TestComponentBuilder, + TestBed, } from '@angular/core/testing'; -import {TestComponentBuilder} from '@angular/compiler/testing'; import {Component} from '@angular/core'; -import {disableDeprecatedForms, provideForms} from '@angular/forms'; +import {FormsModule} from '@angular/forms'; import {By} from '@angular/platform-browser'; -import { - MdInput, - MD_INPUT_DIRECTIVES, -} from './input'; +import {MdInput, MdInputModule} from './input'; describe('MdInput', function () { var builder: TestComponentBuilder; - beforeEach(() => { - addProviders([ - disableDeprecatedForms(), - provideForms(), - ]); - }); + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [MdInputModule, FormsModule], + declarations: [ + MdInputNumberTypeConservedTestComponent, + MdInputPlaceholderRequiredTestComponent, + MdInputPlaceholderElementTestComponent, + MdInputPlaceholderAttrTestComponent, + MdInputHintLabel2TestController, + MdInputHintLabelTestController, + MdInputInvalidTypeTestController, + MdInputInvalidPlaceholderTestController, + MdInputInvalidHint2TestController, + MdInputInvalidHintTestController, + MdInputBaseTestController, + MdInputAriaTestController, + MdInputWithBlurAndFocusEvents, + MdInputOptionalAttributeController, + MdInputWithNameTestController, + ], + }); + + TestBed.compileComponents(); + })); beforeEach(inject([TestComponentBuilder], function (tcb: TestComponentBuilder) { builder = tcb; @@ -653,8 +668,7 @@ describe('MdInput', function () { template: ` - `, - directives: [MD_INPUT_DIRECTIVES] + ` }) class MdInputNumberTypeConservedTestComponent { value: number = 0; @@ -665,8 +679,7 @@ class MdInputNumberTypeConservedTestComponent { template: ` - `, - directives: [MD_INPUT_DIRECTIVES] + ` }) class MdInputPlaceholderRequiredTestComponent { } @@ -677,8 +690,7 @@ class MdInputPlaceholderRequiredTestComponent { {{placeholder}} - `, - directives: [MD_INPUT_DIRECTIVES] + ` }) class MdInputPlaceholderElementTestComponent { placeholder: string = 'Default Placeholder'; @@ -689,8 +701,7 @@ class MdInputPlaceholderElementTestComponent { template: ` - `, - directives: [MD_INPUT_DIRECTIVES] + ` }) class MdInputPlaceholderAttrTestComponent { placeholder: string = ''; @@ -702,8 +713,7 @@ class MdInputPlaceholderAttrTestComponent { {{label}} - `, - directives: [MD_INPUT_DIRECTIVES] + ` }) class MdInputHintLabel2TestController { label: string = ''; @@ -714,8 +724,7 @@ class MdInputHintLabel2TestController { template: ` - `, - directives: [MD_INPUT_DIRECTIVES] + ` }) class MdInputHintLabelTestController { label: string = ''; @@ -726,8 +735,7 @@ class MdInputHintLabelTestController { template: ` - `, - directives: [MD_INPUT_DIRECTIVES] + ` }) class MdInputInvalidTypeTestController { } @@ -738,8 +746,7 @@ class MdInputInvalidTypeTestController { World - `, - directives: [MD_INPUT_DIRECTIVES] + ` }) class MdInputInvalidPlaceholderTestController { } @@ -750,8 +757,7 @@ class MdInputInvalidPlaceholderTestController { World - `, - directives: [MD_INPUT_DIRECTIVES] + ` }) class MdInputInvalidHint2TestController { } @@ -763,8 +769,7 @@ class MdInputInvalidHint2TestController { Hello World - `, - directives: [MD_INPUT_DIRECTIVES] + ` }) class MdInputInvalidHintTestController { } @@ -774,8 +779,7 @@ class MdInputInvalidHintTestController { template: ` - `, - directives: [MdInput] + ` }) class MdInputBaseTestController { model: any = ''; @@ -786,8 +790,7 @@ class MdInputBaseTestController { template: ` - `, - directives: [MdInput] + ` }) class MdInputAriaTestController { ariaLabel: string = 'label'; @@ -798,8 +801,7 @@ class MdInputAriaTestController { selector: 'test-input-controller', template: ` - `, - directives: [MdInput] + ` }) class MdInputWithBlurAndFocusEvents { onBlur(event: FocusEvent) {} @@ -810,16 +812,16 @@ class MdInputWithBlurAndFocusEvents { selector: 'test-input-controller', template: ` - `, - directives: [MdInput] + ` }) -class MdInputOptionalAttributeController {} +class MdInputOptionalAttributeController { + disabled: boolean = false; +} @Component({ selector: 'test-input-controller', template: ` - `, - directives: [MdInput] + ` }) class MdInputWithNameTestController {} diff --git a/src/components/input/input.ts b/src/components/input/input.ts index f8b6b91409ec..3e505dc811b4 100644 --- a/src/components/input/input.ts +++ b/src/components/input/input.ts @@ -14,14 +14,14 @@ import { OnChanges, EventEmitter, Output, + NgModule, } from '@angular/core'; import { NG_VALUE_ACCESSOR, ControlValueAccessor, - DefaultValueAccessor, - NgModel, + FormsModule, } from '@angular/forms'; -import {NgIf} from '@angular/common'; +import {CommonModule} from '@angular/common'; import {BooleanFieldValue} from '@angular2-material/core/annotations/field-value'; import {MdError} from '@angular2-material/core/errors/error'; import {Observable} from 'rxjs/Observable'; @@ -100,7 +100,6 @@ export class MdHint { templateUrl: 'input.html', styleUrls: ['input.css'], providers: [MD_INPUT_CONTROL_VALUE_ACCESSOR], - directives: [DefaultValueAccessor, NgIf, NgModel], host: {'(click)' : 'focus()'} }) export class MdInput implements ControlValueAccessor, AfterContentInit, OnChanges { @@ -309,3 +308,11 @@ export class MdInput implements ControlValueAccessor, AfterContentInit, OnChange } export const MD_INPUT_DIRECTIVES = [MdPlaceholder, MdInput, MdHint]; + + +@NgModule({ + declarations: MD_INPUT_DIRECTIVES, + imports: [CommonModule, FormsModule], + exports: MD_INPUT_DIRECTIVES, +}) +export class MdInputModule { } diff --git a/src/components/input/package.json b/src/components/input/package.json index a046d9ffeb1c..6a516a82b7de 100644 --- a/src/components/input/package.json +++ b/src/components/input/package.json @@ -1,6 +1,6 @@ { "name": "@angular2-material/input", - "version": "2.0.0-alpha.6-2", + "version": "2.0.0-alpha.6-3", "description": "Angular 2 Material input", "main": "./input.js", "typings": "./input.d.ts", @@ -23,7 +23,7 @@ }, "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", "@angular/forms": "^0.2.0" } } diff --git a/src/components/list/list.spec.ts b/src/components/list/list.spec.ts index 589a758392c2..b47cbdf6f36f 100644 --- a/src/components/list/list.spec.ts +++ b/src/components/list/list.spec.ts @@ -1,13 +1,25 @@ -import {inject, async} from '@angular/core/testing'; -import {TestComponentBuilder} from '@angular/compiler/testing'; +import { + inject, + async, + TestComponentBuilder, + TestBed, +} from '@angular/core/testing'; import {Component} from '@angular/core'; import {By} from '@angular/platform-browser'; - -import {MD_LIST_DIRECTIVES, MdListItem} from './list'; +import {MdListItem, MdListModule} from './list'; describe('MdList', () => { let builder: TestComponentBuilder; + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [MdListModule], + declarations: [TestList], + }); + + TestBed.compileComponents(); + })); + beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { builder = tcb; })); @@ -168,8 +180,7 @@ describe('MdList', () => { @Component({ selector: 'test-list', - template: ``, - directives: [MD_LIST_DIRECTIVES] + template: '', }) class TestList { items: any[] = [ diff --git a/src/components/list/list.ts b/src/components/list/list.ts index d021d0cf6014..2768e7a95bbf 100644 --- a/src/components/list/list.ts +++ b/src/components/list/list.ts @@ -8,8 +8,9 @@ import { ElementRef, Renderer, AfterContentInit, + NgModule, } from '@angular/core'; -import { MdLine, MdLineSetter } from '@angular2-material/core/line/line'; +import {MdLine, MdLineSetter, MdLineModule} from '@angular2-material/core/line/line'; @Component({ moduleId: module.id, @@ -64,4 +65,12 @@ export class MdListItem implements AfterContentInit { } } -export const MD_LIST_DIRECTIVES = [MdList, MdListItem, MdLine, MdListAvatar]; +export const MD_LIST_DIRECTIVES = [MdList, MdListItem, MdListAvatar]; + + +@NgModule({ + imports: [MdLineModule], + exports: [MD_LIST_DIRECTIVES, MdLineModule], + declarations: MD_LIST_DIRECTIVES, +}) +export class MdListModule { } diff --git a/src/components/list/package.json b/src/components/list/package.json index 5efc92fc2e1f..efda85807729 100644 --- a/src/components/list/package.json +++ b/src/components/list/package.json @@ -1,6 +1,6 @@ { "name": "@angular2-material/list", - "version": "2.0.0-alpha.6-2", + "version": "2.0.0-alpha.6-3", "description": "Angular 2 Material list", "main": "./list.js", "typings": "./list.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" } } diff --git a/src/components/menu/menu-directive.ts b/src/components/menu/menu-directive.ts index bac6f9181a1c..19f4ac721892 100644 --- a/src/components/menu/menu-directive.ts +++ b/src/components/menu/menu-directive.ts @@ -24,10 +24,10 @@ import {MdMenuInvalidPositionX, MdMenuInvalidPositionY} from './menu-errors'; exportAs: 'mdMenu' }) export class MdMenu { - private _showClickCatcher: boolean = false; + _showClickCatcher: boolean = false; // config object to be passed into the menu's ngClass - private _classList: Object; + _classList: Object; positionX: MenuPositionX = 'after'; positionY: MenuPositionY = 'below'; diff --git a/src/components/menu/menu.spec.ts b/src/components/menu/menu.spec.ts index f51c2e0723a3..179fde918976 100644 --- a/src/components/menu/menu.spec.ts +++ b/src/components/menu/menu.spec.ts @@ -1,29 +1,39 @@ -import {inject} from '@angular/core/testing'; -import {TestComponentBuilder} from '@angular/compiler/testing'; +import { + inject, + TestComponentBuilder, + TestBed, + async, +} from '@angular/core/testing'; import {Component} from '@angular/core'; - -import {MD_MENU_DIRECTIVES} from './menu'; +import {MdMenuModule} from './menu'; describe('MdMenu', () => { let builder: TestComponentBuilder; + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [MdMenuModule], + declarations: [TestList], + }); + + TestBed.compileComponents(); + })); + beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { builder = tcb; })); - it('should add and remove focus class on focus/blur', () => { + it('should add and remove focus class on focus/blur', async(() => { var template = ``; - return builder.overrideTemplate(TestList, template) - .createAsync(TestList).then((fixture) => { - expect(true).toBe(true); - }); - }); + builder.overrideTemplate(TestList, template).createAsync(TestList).then(fixture => { + expect(true).toBe(true); + }); + })); }); @Component({ selector: 'test-menu', - template: ``, - directives: [MD_MENU_DIRECTIVES] + template: `` }) class TestList {} diff --git a/src/components/menu/menu.ts b/src/components/menu/menu.ts index bdd37c428986..d01d26ad2cc5 100644 --- a/src/components/menu/menu.ts +++ b/src/components/menu/menu.ts @@ -1,9 +1,20 @@ -import { MdMenu } from './menu-directive'; -import { MdMenuItem, MdMenuAnchor } from './menu-item'; -import { MdMenuTrigger } from './menu-trigger'; +import {NgModule} from '@angular/core'; +import {CommonModule} from '@angular/common'; +import {OverlayModule} from '@angular2-material/core/core'; +import {MdMenu} from './menu-directive'; +import {MdMenuItem, MdMenuAnchor} from './menu-item'; +import {MdMenuTrigger} from './menu-trigger'; -export { MdMenu } from './menu-directive'; -export { MdMenuItem, MdMenuAnchor } from './menu-item'; -export { MdMenuTrigger } from './menu-trigger'; +export {MdMenu} from './menu-directive'; +export {MdMenuItem, MdMenuAnchor} from './menu-item'; +export {MdMenuTrigger} from './menu-trigger'; export const MD_MENU_DIRECTIVES = [MdMenu, MdMenuItem, MdMenuTrigger, MdMenuAnchor]; + + +@NgModule({ + imports: [OverlayModule, CommonModule], + exports: MD_MENU_DIRECTIVES, + declarations: MD_MENU_DIRECTIVES, +}) +export class MdMenuModule { } diff --git a/src/components/menu/package.json b/src/components/menu/package.json index 8425975e8f48..b0cbeb8cc024 100644 --- a/src/components/menu/package.json +++ b/src/components/menu/package.json @@ -1,6 +1,6 @@ { "name": "@angular2-material/menu", - "version": "2.0.0-alpha.6-2", + "version": "2.0.0-alpha.6-3", "description": "Angular 2 Material menu", "main": "./menu.js", "typings": "./menu.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" } } diff --git a/src/components/progress-bar/package.json b/src/components/progress-bar/package.json index cd9b6d6e6b08..dad63f4e6838 100644 --- a/src/components/progress-bar/package.json +++ b/src/components/progress-bar/package.json @@ -1,6 +1,6 @@ { "name": "@angular2-material/progress-bar", - "version": "2.0.0-alpha.6-2", + "version": "2.0.0-alpha.6-3", "description": "Angular 2 Material progress-bar", "main": "./progress-bar.js", "typings": "./progress-bar.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" } } diff --git a/src/components/progress-bar/progress-bar.spec.ts b/src/components/progress-bar/progress-bar.spec.ts index e8359d12f5e2..0c4642c1e151 100644 --- a/src/components/progress-bar/progress-bar.spec.ts +++ b/src/components/progress-bar/progress-bar.spec.ts @@ -1,13 +1,26 @@ -import {inject} from '@angular/core/testing'; -import {TestComponentBuilder} from '@angular/compiler/testing'; +import { + inject, + TestComponentBuilder, + TestBed, + async, +} from '@angular/core/testing'; import {Component} from '@angular/core'; import {By} from '@angular/platform-browser'; -import {MdProgressBar} from './progress-bar'; +import {MdProgressBarModule} from './progress-bar'; describe('MdProgressBar', () => { let builder: TestComponentBuilder; + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [MdProgressBarModule], + declarations: [TestApp], + }); + + TestBed.compileComponents(); + })); + beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { builder = tcb; })); @@ -117,8 +130,6 @@ describe('MdProgressBar', () => { /** Test component that contains an MdButton. */ @Component({ - directives: [MdProgressBar], template: '', }) -class TestApp { -} +class TestApp { } diff --git a/src/components/progress-bar/progress-bar.ts b/src/components/progress-bar/progress-bar.ts index c5fa27471155..e405d9e7c7b1 100644 --- a/src/components/progress-bar/progress-bar.ts +++ b/src/components/progress-bar/progress-bar.ts @@ -1,10 +1,11 @@ import { + NgModule, Component, ChangeDetectionStrategy, HostBinding, Input, } from '@angular/core'; -import {NgStyle} from '@angular/common'; +import {CommonModule} from '@angular/common'; // TODO(josephperrott): Benchpress tests. // TODO(josephperrott): Add ARIA attributes for progressbar "for". @@ -24,7 +25,6 @@ import {NgStyle} from '@angular/common'; 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. */ @@ -87,3 +87,10 @@ function clamp(v: number, min = 0, max = 100) { } export const MD_PROGRESS_BAR_DIRECTIVES = [MdProgressBar]; + +@NgModule({ + imports: [CommonModule], + exports: MD_PROGRESS_BAR_DIRECTIVES, + declarations: MD_PROGRESS_BAR_DIRECTIVES, +}) +export class MdProgressBarModule { } diff --git a/src/components/progress-circle/package.json b/src/components/progress-circle/package.json index ca53a0c40a92..9e4fa88dec49 100644 --- a/src/components/progress-circle/package.json +++ b/src/components/progress-circle/package.json @@ -1,6 +1,6 @@ { "name": "@angular2-material/progress-circle", - "version": "2.0.0-alpha.6-2", + "version": "2.0.0-alpha.6-3", "description": "Angular 2 Material progress-circle", "main": "./progress-circle.js", "typings": "./progress-circle.d.ts", @@ -22,6 +22,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" } } diff --git a/src/components/progress-circle/progress-circle.spec.ts b/src/components/progress-circle/progress-circle.spec.ts index 8c29945df165..63ccf546b817 100644 --- a/src/components/progress-circle/progress-circle.spec.ts +++ b/src/components/progress-circle/progress-circle.spec.ts @@ -1,13 +1,21 @@ -import {inject} from '@angular/core/testing'; -import {TestComponentBuilder} from '@angular/compiler/testing'; +import {inject, TestComponentBuilder, TestBed, async} from '@angular/core/testing'; import {Component, DebugElement} from '@angular/core'; import {By} from '@angular/platform-browser'; -import {MdProgressCircle} from './progress-circle'; +import {MdProgressCircleModule} from './progress-circle'; describe('MdProgressCircular', () => { let builder: TestComponentBuilder; + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [MdProgressCircleModule], + declarations: [TestApp], + }); + + TestBed.compileComponents(); + })); + beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { builder = tcb; })); @@ -118,7 +126,6 @@ function getChildDebugElement(parent: DebugElement, selector: string): DebugElem /** Test component that contains an MdButton. */ @Component({ - directives: [MdProgressCircle], template: '', }) class TestApp { diff --git a/src/components/progress-circle/progress-circle.ts b/src/components/progress-circle/progress-circle.ts index 5daa83ec4738..859dd6d9d489 100644 --- a/src/components/progress-circle/progress-circle.ts +++ b/src/components/progress-circle/progress-circle.ts @@ -1,4 +1,5 @@ import { + NgModule, Component, HostBinding, ChangeDetectorRef, @@ -313,3 +314,10 @@ function getSvgArc(currentValue: number, rotation: number) { } export const MD_PROGRESS_CIRCLE_DIRECTIVES = [MdProgressCircle, MdSpinner]; + + +@NgModule({ + exports: MD_PROGRESS_CIRCLE_DIRECTIVES, + declarations: MD_PROGRESS_CIRCLE_DIRECTIVES, +}) +export class MdProgressCircleModule { } diff --git a/src/components/radio/package.json b/src/components/radio/package.json index 60c1f7875d6d..55860b287be3 100644 --- a/src/components/radio/package.json +++ b/src/components/radio/package.json @@ -1,6 +1,6 @@ { "name": "@angular2-material/radio", - "version": "2.0.0-alpha.6-2", + "version": "2.0.0-alpha.6-3", "description": "Angular 2 Material radio", "main": "./radio.js", "typings": "./radio.d.ts", @@ -21,7 +21,7 @@ }, "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", "@angular/forms": "^0.2.0" } } diff --git a/src/components/radio/radio.spec.ts b/src/components/radio/radio.spec.ts index c3f5885d012f..b502d99d700a 100644 --- a/src/components/radio/radio.spec.ts +++ b/src/components/radio/radio.spec.ts @@ -1,15 +1,16 @@ import { - addProviders, - inject, - async, - fakeAsync, - tick + inject, + async, + fakeAsync, + tick, + TestComponentBuilder, + ComponentFixture, + TestBed, } from '@angular/core/testing'; -import {FORM_DIRECTIVES, 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_RADIO_DIRECTIVES, MdRadioGroup, MdRadioButton, MdRadioChange} from './radio'; +import {MdRadioGroup, MdRadioButton, MdRadioChange, MdRadioModule} from './radio'; import { MdUniqueSelectionDispatcher } from '@angular2-material/core/coordination/unique-selection-dispatcher'; @@ -19,19 +20,23 @@ describe('MdRadio', () => { let builder: TestComponentBuilder; let dispatcher: MdUniqueSelectionDispatcher; - beforeEach(() => { - addProviders([ - disableDeprecatedForms(), - provideForms(), - {provide: MdUniqueSelectionDispatcher, useFactory: () => { - dispatcher = new MdUniqueSelectionDispatcher(); - return dispatcher; - }}, - ]); - }); + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [MdRadioModule, FormsModule], + declarations: [ + RadiosInsideRadioGroup, + RadioGroupWithNgModel, + StandaloneRadioButtons, + ], + }); + + TestBed.compileComponents(); + })); - beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { + let injectDeps = [TestComponentBuilder, MdUniqueSelectionDispatcher]; + beforeEach(inject(injectDeps, (tcb: TestComponentBuilder, d: MdUniqueSelectionDispatcher) => { builder = tcb; + dispatcher = d; })); describe('inside of a group', () => { @@ -467,7 +472,6 @@ describe('MdRadio', () => { @Component({ - directives: [MD_RADIO_DIRECTIVES], template: ` Spring Summer @@ -507,7 +510,6 @@ class StandaloneRadioButtons { } @Component({ - directives: [MD_RADIO_DIRECTIVES, FORM_DIRECTIVES], template: ` diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts index 03544b24f7b3..eee7e82fc11f 100644 --- a/src/components/radio/radio.ts +++ b/src/components/radio/radio.ts @@ -12,6 +12,7 @@ import { QueryList, ViewEncapsulation, forwardRef, + NgModule, } from '@angular/core'; import { NG_VALUE_ACCESSOR, @@ -423,3 +424,12 @@ export class MdRadioButton implements OnInit { } export const MD_RADIO_DIRECTIVES = [MdRadioGroup, MdRadioButton]; + + +@NgModule({ + exports: MD_RADIO_DIRECTIVES, + declarations: MD_RADIO_DIRECTIVES, + providers: [MdUniqueSelectionDispatcher] +}) +export class MdRadioModule { +} diff --git a/src/components/sidenav/package.json b/src/components/sidenav/package.json index 46bcf52bdf13..9dc6e7e6b759 100644 --- a/src/components/sidenav/package.json +++ b/src/components/sidenav/package.json @@ -1,6 +1,6 @@ { "name": "@angular2-material/sidenav", - "version": "2.0.0-alpha.6-2", + "version": "2.0.0-alpha.6-3", "description": "Angular 2 Material sidenav", "main": "./sidenav.js", "typings": "./sidenav.d.ts", @@ -24,6 +24,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" } } diff --git a/src/components/sidenav/sidenav.spec.ts b/src/components/sidenav/sidenav.spec.ts index 6c2f52c38cdf..c0582530970b 100644 --- a/src/components/sidenav/sidenav.spec.ts +++ b/src/components/sidenav/sidenav.spec.ts @@ -1,18 +1,16 @@ import { - fakeAsync, - async, - inject, - tick + fakeAsync, + async, + inject, + tick, + TestComponentBuilder, + ComponentFixture, + TestBed, } from '@angular/core/testing'; -import {TestComponentBuilder, ComponentFixture} from '@angular/compiler/testing'; import {XHR} from '@angular/compiler'; -import { - Component, - ViewMetadata -} from '@angular/core'; - +import {Component, ViewMetadata} from '@angular/core'; import {By} from '@angular/platform-browser'; -import {MdSidenav, MdSidenavLayout, MD_SIDENAV_DIRECTIVES} from './sidenav'; +import {MdSidenav, MdSidenavLayout, MdSidenavModule} from './sidenav'; /** @@ -26,7 +24,6 @@ function createFixture(appType: any, builder: TestComponentBuilder, .overrideView(MdSidenavLayout, new ViewMetadata({ template: template, styles: [style || ''], - directives: [MdSidenav], })) .createAsync(appType).then((f: ComponentFixture) => { fixture = f; @@ -53,10 +50,23 @@ describe('MdSidenav', () => { let builder: TestComponentBuilder; let xhr: XHR; - beforeEach(inject([TestComponentBuilder, XHR], (tcb: TestComponentBuilder, x: XHR) => { + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [MdSidenavModule], + declarations: [ + BasicTestApp, + SidenavLayoutTwoSidenavTestApp, + SidenavLayoutNoSidenavTestApp, + ], + }); + + TestBed.compileComponents(); + })); + + beforeEach(fakeAsync(inject([TestComponentBuilder, XHR], (tcb: TestComponentBuilder, x: XHR) => { builder = tcb; xhr = x; - })); + }))); /** * We need to get the template and styles for the sidenav in an Async test. @@ -290,7 +300,6 @@ describe('MdSidenav', () => { /** Test component that contains an MdSidenavLayout but no MdSidenav. */ @Component({ selector: 'test-app', - directives: [MD_SIDENAV_DIRECTIVES], template: ` @@ -303,7 +312,6 @@ class SidenavLayoutNoSidenavTestApp { /** Test component that contains an MdSidenavLayout and 2 MdSidenav on the same side. */ @Component({ selector: 'test-app', - directives: [MD_SIDENAV_DIRECTIVES], template: ` @@ -318,7 +326,6 @@ class SidenavLayoutTwoSidenavTestApp { /** Test component that contains an MdSidenavLayout and one MdSidenav. */ @Component({ selector: 'test-app', - directives: [MD_SIDENAV_DIRECTIVES], template: ` { let builder: TestComponentBuilder; - beforeEach(() => { - addProviders([ - disableDeprecatedForms(), - provideForms(), - ]); - }); + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [MdSlideToggleModule, FormsModule], + declarations: [SlideToggleTestApp], + }); + + TestBed.compileComponents(); + })); beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { builder = tcb; @@ -412,13 +415,12 @@ function dispatchFocusChangeEvent(eventName: string, element: HTMLElement): void template: ` Test Slide Toggle `, - directives: [MdSlideToggle] }) class SlideToggleTestApp { isDisabled: boolean = false; diff --git a/src/components/slide-toggle/slide-toggle.ts b/src/components/slide-toggle/slide-toggle.ts index 999cc5f69ec0..d8f6e5cb5891 100644 --- a/src/components/slide-toggle/slide-toggle.ts +++ b/src/components/slide-toggle/slide-toggle.ts @@ -7,15 +7,20 @@ import { Input, Output, EventEmitter, - AfterContentInit + AfterContentInit, + NgModule, } from '@angular/core'; +import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser'; import { + FormsModule, ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import {BooleanFieldValue} from '@angular2-material/core/annotations/field-value'; import {Observable} from 'rxjs/Observable'; import {applyCssTransform} from '@angular2-material/core/style/apply-transform'; +import {MdGestureConfig} from '@angular2-material/core/core'; + export const MD_SLIDE_TOGGLE_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, @@ -56,7 +61,7 @@ export class MdSlideToggle implements AfterContentInit, ControlValueAccessor { private _uniqueId = `md-slide-toggle-${++nextId}`; private _checked: boolean = false; private _color: string; - private _hasFocus: boolean = false; + _hasFocus: boolean = false; private _isMousedown: boolean = false; private _slideRenderer: SlideToggleRenderer = null; @@ -94,11 +99,11 @@ export class MdSlideToggle implements AfterContentInit, ControlValueAccessor { // Once a drag is currently in progress, we do not want to toggle the slide-toggle on a click. if (!this.disabled && !this._slideRenderer.isDragging()) { this.toggle(); - - // Emit our custom change event if the native input emitted one. - // It is important to only emit it, if the native input triggered one, because - // we don't want to trigger a change event, when the `checked` variable changes for example. - this._emitChangeEvent(); + + // Emit our custom change event if the native input emitted one. + // It is important to only emit it, if the native input triggered one, because + // we don't want to trigger a change event, when the `checked` variable changes for example. + this._emitChangeEvent(); } } @@ -249,6 +254,7 @@ class SlideToggleRenderer { return !!this._thumbBarWidth; } + /** Initializes the drag of the slide-toggle. */ startThumbDrag(checked: boolean) { if (!this._thumbBarWidth) { @@ -293,3 +299,14 @@ class SlideToggleRenderer { } export const MD_SLIDE_TOGGLE_DIRECTIVES = [MdSlideToggle]; + + +@NgModule({ + imports: [FormsModule], + exports: MD_SLIDE_TOGGLE_DIRECTIVES, + declarations: MD_SLIDE_TOGGLE_DIRECTIVES, + providers: [ + {provide: HAMMER_GESTURE_CONFIG, useClass: MdGestureConfig}, + ], +}) +export class MdSlideToggleModule { } diff --git a/src/components/slider/slider.spec.ts b/src/components/slider/slider.spec.ts index 9f94ca5b5630..8185540f294d 100644 --- a/src/components/slider/slider.spec.ts +++ b/src/components/slider/slider.spec.ts @@ -2,11 +2,13 @@ import { addProviders, inject, async, + TestComponentBuilder, + ComponentFixture, + TestBed, } from '@angular/core/testing'; -import {TestComponentBuilder, ComponentFixture} from '@angular/compiler/testing'; import {Component, DebugElement, ViewEncapsulation} from '@angular/core'; import {By} from '@angular/platform-browser'; -import {MdSlider, MD_SLIDER_DIRECTIVES} from './slider'; +import {MdSlider, MdSliderModule} from './slider'; import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser'; import {TestGestureConfig} from './test-gesture-config'; @@ -14,14 +16,27 @@ describe('MdSlider', () => { let builder: TestComponentBuilder; let gestureConfig: TestGestureConfig; - beforeEach(() => { + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [MdSliderModule], + declarations: [ + StandardSlider, + DisabledSlider, + SliderWithMinAndMax, + SliderWithValue, + SliderWithStep, + ], + }); + addProviders([ {provide: HAMMER_GESTURE_CONFIG, useFactory: () => { gestureConfig = new TestGestureConfig(); return gestureConfig; }} ]); - }); + + TestBed.compileComponents(); + })); beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { builder = tcb; @@ -423,7 +438,6 @@ describe('MdSlider', () => { // The transition has to be removed in order to test the updated positions without setTimeout. @Component({ - directives: [MD_SLIDER_DIRECTIVES], template: ``, styles: [` .md-slider-track-fill, .md-slider-thumb-position { @@ -435,13 +449,11 @@ describe('MdSlider', () => { class StandardSlider { } @Component({ - directives: [MD_SLIDER_DIRECTIVES], template: `` }) class DisabledSlider { } @Component({ - directives: [MD_SLIDER_DIRECTIVES], template: ``, styles: [` .md-slider-track-fill, .md-slider-thumb-position { @@ -453,13 +465,11 @@ class DisabledSlider { } class SliderWithMinAndMax { } @Component({ - directives: [MD_SLIDER_DIRECTIVES], template: `` }) class SliderWithValue { } @Component({ - directives: [MD_SLIDER_DIRECTIVES], template: ``, styles: [` .md-slider-track-fill, .md-slider-thumb-position { diff --git a/src/components/slider/slider.ts b/src/components/slider/slider.ts index 8b2591fc6cc3..10ea4cc7469f 100644 --- a/src/components/slider/slider.ts +++ b/src/components/slider/slider.ts @@ -1,4 +1,5 @@ import { + NgModule, Component, ElementRef, HostBinding, @@ -6,8 +7,10 @@ import { ViewEncapsulation, AfterContentInit, } from '@angular/core'; +import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser'; import {BooleanFieldValue} from '@angular2-material/core/annotations/field-value'; import {applyCssTransform} from '@angular2-material/core/style/apply-transform'; +import {MdGestureConfig} from '@angular2-material/core/core'; @Component({ moduleId: module.id, @@ -267,3 +270,13 @@ export class SliderRenderer { } export const MD_SLIDER_DIRECTIVES = [MdSlider]; + + +@NgModule({ + exports: MD_SLIDER_DIRECTIVES, + declarations: MD_SLIDER_DIRECTIVES, + providers: [ + {provide: HAMMER_GESTURE_CONFIG, useClass: MdGestureConfig}, + ], +}) +export class MdSliderModule { } diff --git a/src/components/tabs/package.json b/src/components/tabs/package.json index 4d4b3c00b6bf..f7cd8655908e 100644 --- a/src/components/tabs/package.json +++ b/src/components/tabs/package.json @@ -1,6 +1,6 @@ { "name": "@angular2-material/tabs", - "version": "2.0.0-alpha.6-2", + "version": "2.0.0-alpha.6-3", "description": "Angular 2 Material Tabs", "main": "./tabs.js", "typings": "./tabs.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" } } diff --git a/src/components/tabs/tab-group.spec.ts b/src/components/tabs/tab-group.spec.ts index ad5963909b7c..dd352545fb87 100644 --- a/src/components/tabs/tab-group.spec.ts +++ b/src/components/tabs/tab-group.spec.ts @@ -2,17 +2,32 @@ import { inject, async, fakeAsync, - tick + tick, + TestComponentBuilder, + ComponentFixture, + TestBed, } from '@angular/core/testing'; -import {TestComponentBuilder, ComponentFixture} from '@angular/compiler/testing'; -import {MD_TABS_DIRECTIVES, MdTabGroup} from './tabs'; +import {MdTabGroup, MdTabsModule} from './tabs'; import {Component} from '@angular/core'; import {By} from '@angular/platform-browser'; import {Observable} from 'rxjs/Observable'; + describe('MdTabGroup', () => { let builder: TestComponentBuilder; + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [MdTabsModule], + declarations: [ + SimpleTabsTestApp, + AsyncTabsTestApp, + ], + }); + + TestBed.compileComponents(); + })); + beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { builder = tcb; })); @@ -26,11 +41,11 @@ describe('MdTabGroup', () => { }); })); - it('should default to the first tab', () => { + it('should default to the first tab', async(() => { checkSelectedIndex(1, fixture); - }); + })); - it('should change selected index on click', () => { + it('should change selected index on click', async(() => { let component = fixture.debugElement.componentInstance; component.selectedIndex = 0; checkSelectedIndex(0, fixture); @@ -44,7 +59,7 @@ describe('MdTabGroup', () => { tabLabel = fixture.debugElement.queryAll(By.css('.md-tab-label'))[2]; tabLabel.nativeElement.click(); checkSelectedIndex(2, fixture); - }); + })); it('should support two-way binding for selectedIndex', async(() => { let component = fixture.componentInstance; @@ -61,8 +76,7 @@ describe('MdTabGroup', () => { }); })); - it('should cycle through tab focus with focusNextTab/focusPreviousTab functions', - fakeAsync(() => { + it('should cycle tab focus with focusNextTab/focusPreviousTab functions', fakeAsync(() => { let testComponent = fixture.componentInstance; let tabComponent = fixture.debugElement.query(By.css('md-tab-group')).componentInstance; @@ -140,11 +154,9 @@ describe('MdTabGroup', () => { describe('async tabs', () => { let fixture: ComponentFixture; - beforeEach(async(() => { - builder.createAsync(AsyncTabsTestApp).then(f => fixture = f); - })); - it('should show tabs when they are available', async(() => { + fixture = TestBed.createComponent(AsyncTabsTestApp); + let labels = fixture.debugElement.queryAll(By.css('.md-tab-label')); expect(labels.length).toBe(0); @@ -200,8 +212,7 @@ describe('MdTabGroup', () => { - `, - directives: [MD_TABS_DIRECTIVES] + ` }) class SimpleTabsTestApp { selectedIndex: number = 1; @@ -224,8 +235,7 @@ class SimpleTabsTestApp { - `, - directives: [MD_TABS_DIRECTIVES] + ` }) class AsyncTabsTestApp { private _tabs = [ @@ -235,7 +245,8 @@ class AsyncTabsTestApp { tabs: Observable; - constructor() { + // Use ngOnInit because there is some issue with scheduling the async task in the constructor. + ngOnInit() { this.tabs = Observable.create((observer: any) => { requestAnimationFrame(() => observer.next(this._tabs)); }); diff --git a/src/components/tabs/tabs.ts b/src/components/tabs/tabs.ts index 7c7772107490..85db3f89480a 100644 --- a/src/components/tabs/tabs.ts +++ b/src/components/tabs/tabs.ts @@ -1,4 +1,5 @@ import { + NgModule, ContentChild, Directive, Component, @@ -10,8 +11,8 @@ import { QueryList, ContentChildren } from '@angular/core'; -import {NgIf, NgFor} from '@angular/common'; -import {PortalHostDirective} from '@angular2-material/core/portal/portal-directives'; +import {CommonModule} from '@angular/common'; +import {PortalModule} from '@angular2-material/core/portal/portal-directives'; import {MdTabLabel} from './tab-label'; import {MdTabContent} from './tab-content'; import {MdTabLabelWrapper} from './tab-label-wrapper'; @@ -54,7 +55,6 @@ export class MdTab { selector: 'md-tab-group', templateUrl: 'tab-group.html', styleUrls: ['tab-group.css'], - directives: [PortalHostDirective, MdTabLabelWrapper, MdInkBar, NgIf, NgFor], }) export class MdTabGroup { @ContentChildren(MdTab) _tabs: QueryList; @@ -197,3 +197,11 @@ export class MdTabGroup { } export const MD_TABS_DIRECTIVES = [MdTabGroup, MdTabLabel, MdTabContent, MdTab]; +export const TABS_INTERNAL_DIRECTIVES = [MdInkBar, MdTabLabelWrapper]; + +@NgModule({ + imports: [CommonModule, PortalModule], + exports: [MD_TABS_DIRECTIVES], + declarations: [MD_TABS_DIRECTIVES, TABS_INTERNAL_DIRECTIVES], +}) +export class MdTabsModule { } diff --git a/src/components/toolbar/package.json b/src/components/toolbar/package.json index ec3f248da879..a7847f5eaa51 100644 --- a/src/components/toolbar/package.json +++ b/src/components/toolbar/package.json @@ -1,6 +1,6 @@ { "name": "@angular2-material/toolbar", - "version": "2.0.0-alpha.6-2", + "version": "2.0.0-alpha.6-3", "description": "Angular 2 Material toolbar", "main": "./toolbar.js", "typings": "./toolbar.d.ts", @@ -22,6 +22,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" } } diff --git a/src/components/toolbar/toolbar.spec.ts b/src/components/toolbar/toolbar.spec.ts index dee312708060..3008bcaf6eac 100644 --- a/src/components/toolbar/toolbar.spec.ts +++ b/src/components/toolbar/toolbar.spec.ts @@ -1,12 +1,25 @@ import {Component} from '@angular/core'; -import {inject} from '@angular/core/testing'; -import {TestComponentBuilder} from '@angular/compiler/testing'; +import { + inject, + TestComponentBuilder, + TestBed, + async, +} from '@angular/core/testing'; import {By} from '@angular/platform-browser'; -import {MdToolbar} from './toolbar'; +import {MdToolbarModule} from './toolbar'; describe('MdToolbar', () => { let builder: TestComponentBuilder; + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [MdToolbarModule], + declarations: [TestApp], + }); + + TestBed.compileComponents(); + })); + beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { builder = tcb; })); @@ -44,9 +57,7 @@ describe('MdToolbar', () => { template: ` Test Toolbar - - `, - directives: [MdToolbar] + ` }) class TestApp { toolbarColor: string; diff --git a/src/components/toolbar/toolbar.ts b/src/components/toolbar/toolbar.ts index 35d710f6df60..52d0c605da08 100644 --- a/src/components/toolbar/toolbar.ts +++ b/src/components/toolbar/toolbar.ts @@ -1,4 +1,5 @@ import { + NgModule, Component, ChangeDetectionStrategy, Input, @@ -45,3 +46,10 @@ export class MdToolbar { } export const MD_TOOLBAR_DIRECTIVES = [MdToolbar]; + + +@NgModule({ + exports: MD_TOOLBAR_DIRECTIVES, + declarations: MD_TOOLBAR_DIRECTIVES, +}) +export class MdToolbarModule { } diff --git a/src/components/tooltip/tooltip.spec.ts b/src/components/tooltip/tooltip.spec.ts index d6cb38d1c0c5..9863f148880a 100644 --- a/src/components/tooltip/tooltip.spec.ts +++ b/src/components/tooltip/tooltip.spec.ts @@ -1,35 +1,37 @@ import { - it, - describe, - expect, - beforeEach, inject, async, - beforeEachProviders, + addProviders, + TestComponentBuilder, + ComponentFixture, + TestBed, } from '@angular/core/testing'; -import {TestComponentBuilder, ComponentFixture} from '@angular/compiler/testing'; import {Component, DebugElement} from '@angular/core'; import {By} from '@angular/platform-browser'; -import {MD_TOOLTIP_DIRECTIVES, TooltipPosition, MdTooltip} from - '@angular2-material/tooltip/tooltip'; -import {OVERLAY_PROVIDERS} from '@angular2-material/core/overlay/overlay'; +import {TooltipPosition, MdTooltip} from '@angular2-material/tooltip/tooltip'; import {OverlayContainer} from '@angular2-material/core/overlay/overlay-container'; +import {MdTooltipModule} from './tooltip'; + describe('MdTooltip', () => { let builder: TestComponentBuilder; let overlayContainerElement: HTMLElement; - beforeEachProviders(() => [ - OVERLAY_PROVIDERS, - {provide: OverlayContainer, useFactory: () => { - return { - getContainerElement: () => { - overlayContainerElement = document.createElement('div'); - return overlayContainerElement; - } - }; - }}, - ]); + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [MdTooltipModule], + declarations: [BasicTooltipDemo], + }); + + addProviders([ + {provide: OverlayContainer, useFactory: () => { + overlayContainerElement = document.createElement('div'); + return {getContainerElement: () => overlayContainerElement}; + }} + ]); + + TestBed.compileComponents(); + })); beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { builder = tcb; @@ -96,7 +98,6 @@ describe('MdTooltip', () => { @Component({ selector: 'app', - directives: [MD_TOOLTIP_DIRECTIVES], template: `` }) class BasicTooltipDemo { diff --git a/src/components/tooltip/tooltip.ts b/src/components/tooltip/tooltip.ts index 99d168dcf170..b1eb488a7afa 100644 --- a/src/components/tooltip/tooltip.ts +++ b/src/components/tooltip/tooltip.ts @@ -1,11 +1,22 @@ -import {Component, ComponentRef, Directive, Input, ElementRef, ViewContainerRef, - ChangeDetectorRef} from '@angular/core'; -import {Overlay} from '@angular2-material/core/overlay/overlay'; -import {OverlayState} from '@angular2-material/core/overlay/overlay-state'; -import {OverlayRef} from '@angular2-material/core/overlay/overlay-ref'; -import {ComponentPortal} from '@angular2-material/core/portal/portal'; -import {OverlayConnectionPosition, OriginConnectionPosition} from - '@angular2-material/core/overlay/position/connected-position'; +import { + NgModule, + Component, + ComponentRef, + Directive, + Input, + ElementRef, + ViewContainerRef, + ChangeDetectorRef +} from '@angular/core'; +import { + Overlay, + OverlayState, + OverlayModule, + OverlayRef, + ComponentPortal, + OverlayConnectionPosition, + OriginConnectionPosition, +} from '@angular2-material/core/core'; export type TooltipPosition = 'before' | 'after' | 'above' | 'below'; @@ -176,8 +187,17 @@ export class MdTooltip { template: `
{{message}}
`, styleUrls: ['tooltip.css'], }) -class TooltipComponent { +export class TooltipComponent { message: string; } export const MD_TOOLTIP_DIRECTIVES = [MdTooltip]; + + +@NgModule({ + imports: [OverlayModule], + exports: [MD_TOOLTIP_DIRECTIVES, TooltipComponent], + declarations: [MD_TOOLTIP_DIRECTIVES, TooltipComponent], + entryComponents: [TooltipComponent], +}) +export class MdTooltipModule { } diff --git a/src/core/a11y/live-announcer.spec.ts b/src/core/a11y/live-announcer.spec.ts index 6fa6f9a7738a..315a4a0e1adf 100644 --- a/src/core/a11y/live-announcer.spec.ts +++ b/src/core/a11y/live-announcer.spec.ts @@ -4,9 +4,10 @@ import { flushMicrotasks, tick, addProviders, - getTestInjector + TestComponentBuilder, + ComponentFixture, + TestBed, } from '@angular/core/testing'; -import {TestComponentBuilder, ComponentFixture} from '@angular/compiler/testing'; import {Component} from '@angular/core'; import {By} from '@angular/platform-browser'; import {MdLiveAnnouncer, LIVE_ANNOUNCER_ELEMENT_TOKEN} from './live-announcer'; @@ -16,108 +17,114 @@ describe('MdLiveAnnouncer', () => { let builder: TestComponentBuilder; let liveEl: Element; - beforeEach(() => { - addProviders([ - MdLiveAnnouncer, - ]); - }); - - beforeEach(inject([TestComponentBuilder, MdLiveAnnouncer], - (tcb: TestComponentBuilder, _live: MdLiveAnnouncer) => { - builder = tcb; - live = _live; - liveEl = getLiveElement(); + describe('with default element', () => { + beforeEach(() => TestBed.configureTestingModule({ + declarations: [TestApp], + providers: [MdLiveAnnouncer] })); - afterEach(() => { - // In our tests we always remove the current live element, because otherwise we would have - // multiple live elements due multiple service instantiations. - liveEl.parentNode.removeChild(liveEl); - }); + beforeEach(fakeAsync(inject([TestComponentBuilder, MdLiveAnnouncer], + (tcb: TestComponentBuilder, _live: MdLiveAnnouncer) => { + builder = tcb; + live = _live; + liveEl = getLiveElement(); + }))); + + afterEach(() => { + // In our tests we always remove the current live element, because otherwise we would have + // multiple live elements due multiple service instantiations. + liveEl.parentNode.removeChild(liveEl); + }); - it('should correctly update the announce text', fakeAsyncTest(() => { - let appFixture: ComponentFixture = null; + it('should correctly update the announce text', fakeAsync(() => { + let appFixture: ComponentFixture = null; - builder.createAsync(TestApp).then(fixture => { - appFixture = fixture; - }); + builder.createAsync(TestApp).then(fixture => { + appFixture = fixture; + }); + + flushMicrotasks(); - flushMicrotasks(); + let buttonElement = appFixture.debugElement + .query(By.css('button')).nativeElement; - let buttonElement = appFixture.debugElement - .query(By.css('button')).nativeElement; + buttonElement.click(); - buttonElement.click(); + // This flushes our 100ms timeout for the screenreaders. + tick(100); - // This flushes our 100ms timeout for the screenreaders. - tick(100); + expect(liveEl.textContent).toBe('Test'); + })); - expect(liveEl.textContent).toBe('Test'); - })); + it('should correctly update the politeness attribute', fakeAsync(() => { + let appFixture: ComponentFixture = null; - it('should correctly update the politeness attribute', fakeAsyncTest(() => { - let appFixture: ComponentFixture = null; + builder.createAsync(TestApp).then(fixture => { + appFixture = fixture; + }); - builder.createAsync(TestApp).then(fixture => { - appFixture = fixture; - }); + flushMicrotasks(); - flushMicrotasks(); + live.announce('Hey Google', 'assertive'); - live.announce('Hey Google', 'assertive'); + // This flushes our 100ms timeout for the screenreaders. + tick(100); - // This flushes our 100ms timeout for the screenreaders. - tick(100); + expect(liveEl.textContent).toBe('Hey Google'); + expect(liveEl.getAttribute('aria-live')).toBe('assertive'); + })); - expect(liveEl.textContent).toBe('Hey Google'); - expect(liveEl.getAttribute('aria-live')).toBe('assertive'); - })); + it('should apply the aria-live value polite by default', fakeAsync(() => { + let appFixture: ComponentFixture = null; - it('should apply the aria-live value polite by default', fakeAsyncTest(() => { - let appFixture: ComponentFixture = null; + builder.createAsync(TestApp).then(fixture => { + appFixture = fixture; + }); - builder.createAsync(TestApp).then(fixture => { - appFixture = fixture; - }); + flushMicrotasks(); - flushMicrotasks(); + live.announce('Hey Google'); - live.announce('Hey Google'); + // This flushes our 100ms timeout for the screenreaders. + tick(100); - // This flushes our 100ms timeout for the screenreaders. - tick(100); + expect(liveEl.textContent).toBe('Hey Google'); + expect(liveEl.getAttribute('aria-live')).toBe('polite'); + })); + }); - expect(liveEl.textContent).toBe('Hey Google'); - expect(liveEl.getAttribute('aria-live')).toBe('polite'); - })); + describe('with a custom element', () => { + let customLiveElement: HTMLElement; - it('should allow to use a custom live element', fakeAsyncTest(() => { - let customLiveEl = document.createElement('div'); + beforeEach(() => { + customLiveElement = document.createElement('div'); - // We need to reset our test injector here, because it is already instantiated above. - getTestInjector().reset(); + addProviders([ + {provide: LIVE_ANNOUNCER_ELEMENT_TOKEN, useValue: customLiveElement}, + MdLiveAnnouncer, + ]); + }); - getTestInjector().addProviders([ - {provide: LIVE_ANNOUNCER_ELEMENT_TOKEN, useValue: customLiveEl}, - MdLiveAnnouncer - ]); + beforeEach(inject([TestComponentBuilder, MdLiveAnnouncer], + (tcb: TestComponentBuilder, _live: MdLiveAnnouncer) => { + builder = tcb; + live = _live; + liveEl = getLiveElement(); + })); - let injector = getTestInjector().createInjector(); - let liveService: MdLiveAnnouncer = injector.get(MdLiveAnnouncer); - liveService.announce('Custom Element'); + it('should allow to use a custom live element', fakeAsync(() => { + live.announce('Custom Element'); - // This flushes our 100ms timeout for the screenreaders. - tick(100); + // This flushes our 100ms timeout for the screenreaders. + tick(100); - expect(customLiveEl.textContent).toBe('Custom Element'); - })); + expect(customLiveElement.textContent).toBe('Custom Element'); + })); + }); }); -function fakeAsyncTest(fn: () => void) { - return inject([], fakeAsync(fn)); -} function getLiveElement(): Element { return document.body.querySelector('.md-live-announcer'); @@ -129,8 +136,7 @@ function getLiveElement(): Element { }) class TestApp { - constructor(private live: MdLiveAnnouncer) { - }; + constructor(private live: MdLiveAnnouncer) { }; announceText(message: string) { this.live.announce(message); diff --git a/src/core/core.ts b/src/core/core.ts index 849f1cf16f46..3ba809ceb8e5 100644 --- a/src/core/core.ts +++ b/src/core/core.ts @@ -1,5 +1,13 @@ +import {NgModule} from '@angular/core'; +import {MdLineModule} from './line/line'; +import {RtlModule} from './rtl/dir'; +import {MdRippleModule} from './ripple/ripple'; +import {PortalModule} from './portal/portal-directives'; +import {OverlayModule} from './overlay/overlay-directives'; +import {MdLiveAnnouncer} from './a11y/live-announcer'; + // RTL -export {Dir, LayoutDirection} from './rtl/dir'; +export {Dir, LayoutDirection, RtlModule} from './rtl/dir'; // Portals export { @@ -12,7 +20,8 @@ export { export { PortalHostDirective, TemplatePortalDirective, - PORTAL_DIRECTIVES + PORTAL_DIRECTIVES, + PortalModule, } from './portal/portal-directives'; export {DomPortalHost} from './portal/dom-portal-host'; @@ -24,23 +33,46 @@ export {OverlayState} from './overlay/overlay-state'; export { ConnectedOverlayDirective, OverlayOrigin, - OVERLAY_DIRECTIVES + OVERLAY_DIRECTIVES, + OverlayModule, } from './overlay/overlay-directives'; +export { + OverlayConnectionPosition, + OriginConnectionPosition +} from './overlay/position/connected-position'; // Gestures export {MdGestureConfig} from './gestures/MdGestureConfig'; // Ripple -export {MD_RIPPLE_DIRECTIVES, MdRipple} from './ripple/ripple'; +export {MD_RIPPLE_DIRECTIVES, MdRipple, MdRippleModule} from './ripple/ripple'; // a11y export { AriaLivePoliteness, MdLiveAnnouncer, - LIVE_ANNOUNCER_ELEMENT_TOKEN + LIVE_ANNOUNCER_ELEMENT_TOKEN, } from './a11y/live-announcer'; export { MdUniqueSelectionDispatcher, MdUniqueSelectionDispatcherListener } from './coordination/unique-selection-dispatcher'; + +export {MdLineModule, MdLine, MdLineSetter} from './line/line'; + + +const coreModules = [ + MdLineModule, + RtlModule, + MdRippleModule, + PortalModule, + OverlayModule, +]; + +@NgModule({ + imports: coreModules, + exports: coreModules, + providers: [MdLiveAnnouncer], +}) +export class MdCoreModule { } diff --git a/src/core/line/line.ts b/src/core/line/line.ts index 90935c125cab..985814c9c4ed 100644 --- a/src/core/line/line.ts +++ b/src/core/line/line.ts @@ -1,4 +1,5 @@ import { + NgModule, Directive, Renderer, ElementRef, @@ -42,3 +43,9 @@ export class MdLineSetter { } } + +@NgModule({ + exports: [MdLine], + declarations: [MdLine], +}) +export class MdLineModule { } diff --git a/src/core/overlay/overlay-directives.spec.ts b/src/core/overlay/overlay-directives.spec.ts index 4ca27565f1d5..302701669862 100644 --- a/src/core/overlay/overlay-directives.spec.ts +++ b/src/core/overlay/overlay-directives.spec.ts @@ -4,36 +4,34 @@ import { fakeAsync, flushMicrotasks, addProviders, + TestComponentBuilder, + ComponentFixture, + TestBed, } from '@angular/core/testing'; -import {TestComponentBuilder, ComponentFixture} from '@angular/compiler/testing'; import {Component, ViewChild} from '@angular/core'; -import {ConnectedOverlayDirective, OverlayOrigin} from './overlay-directives'; -import {Overlay} from './overlay'; +import {ConnectedOverlayDirective, OverlayModule} from './overlay-directives'; import {OverlayContainer} from './overlay-container'; -import {ViewportRuler} from './position/viewport-ruler'; -import {OverlayPositionBuilder} from './position/overlay-position-builder'; import {ConnectedPositionStrategy} from './position/connected-position-strategy'; + describe('Overlay directives', () => { let builder: TestComponentBuilder; let overlayContainerElement: HTMLElement; let fixture: ComponentFixture; - beforeEach(() => { + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [OverlayModule], + declarations: [ConnectedOverlayDirectiveTest], + }); + addProviders([ - Overlay, - OverlayPositionBuilder, - ViewportRuler, {provide: OverlayContainer, useFactory: () => { - return { - getContainerElement: () => { - overlayContainerElement = document.createElement('div'); - return overlayContainerElement; - } - }; - }}, + overlayContainerElement = document.createElement('div'); + return {getContainerElement: () => overlayContainerElement}; + }} ]); - }); + })); beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { builder = tcb; @@ -78,7 +76,6 @@ describe('Overlay directives', () => { `, - directives: [ConnectedOverlayDirective, OverlayOrigin], }) class ConnectedOverlayDirectiveTest { @ViewChild(ConnectedOverlayDirective) connectedOverlayDirective: ConnectedOverlayDirective; diff --git a/src/core/overlay/overlay-directives.ts b/src/core/overlay/overlay-directives.ts index e31c9e8675d1..c2233a0e65f2 100644 --- a/src/core/overlay/overlay-directives.ts +++ b/src/core/overlay/overlay-directives.ts @@ -1,4 +1,5 @@ import { + NgModule, Directive, TemplateRef, ViewContainerRef, @@ -7,11 +8,12 @@ import { OnDestroy, ElementRef } from '@angular/core'; -import {Overlay} from './overlay'; +import {Overlay, OVERLAY_PROVIDERS} from './overlay'; import {OverlayRef} from './overlay-ref'; import {TemplatePortal} from '../portal/portal'; import {OverlayState} from './overlay-state'; import {ConnectionPositionPair} from './position/connected-position'; +import {PortalModule} from '../portal/portal-directives'; /** Default set of positions for the overlay. Follows the behavior of a dropdown. */ let defaultPositionList = [ @@ -105,3 +107,12 @@ export class ConnectedOverlayDirective implements OnInit, OnDestroy { export const OVERLAY_DIRECTIVES = [ConnectedOverlayDirective, OverlayOrigin]; + + +@NgModule({ + imports: [PortalModule], + exports: OVERLAY_DIRECTIVES, + declarations: OVERLAY_DIRECTIVES, + providers: OVERLAY_PROVIDERS, +}) +export class OverlayModule { } diff --git a/src/core/overlay/overlay.spec.ts b/src/core/overlay/overlay.spec.ts index ec04528aae20..852c0e441804 100644 --- a/src/core/overlay/overlay.spec.ts +++ b/src/core/overlay/overlay.spec.ts @@ -2,23 +2,19 @@ import { inject, fakeAsync, flushMicrotasks, - addProviders, + TestComponentBuilder, + TestBed, + async, } from '@angular/core/testing'; -import {TestComponentBuilder} from '@angular/compiler/testing'; -import { - Component, - ViewChild, - ViewContainerRef, -} from '@angular/core'; -import {TemplatePortalDirective} from '../portal/portal-directives'; +import {Component, ViewChild, ViewContainerRef} from '@angular/core'; +import {TemplatePortalDirective, PortalModule} from '../portal/portal-directives'; import {TemplatePortal, ComponentPortal} from '../portal/portal'; import {Overlay} from './overlay'; import {OverlayContainer} from './overlay-container'; import {OverlayRef} from './overlay-ref'; import {OverlayState} from './overlay-state'; import {PositionStrategy} from './position/position-strategy'; -import {OverlayPositionBuilder} from './position/overlay-position-builder'; -import {ViewportRuler} from './position/viewport-ruler'; +import {OverlayModule} from './overlay-directives'; describe('Overlay', () => { @@ -28,25 +24,22 @@ describe('Overlay', () => { let templatePortal: TemplatePortal; let overlayContainerElement: HTMLElement; - beforeEach(() => { - addProviders([ - Overlay, - OverlayPositionBuilder, - ViewportRuler, - {provide: OverlayContainer, useFactory: () => { - return { - getContainerElement: () => { - if (overlayContainerElement) { return overlayContainerElement; } - overlayContainerElement = document.createElement('div'); - return overlayContainerElement; - } - }; - }} - ]); - }); + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [OverlayModule, PortalModule], + declarations: [TestComponentWithTemplatePortals, PizzaMsg], + providers: [ + {provide: OverlayContainer, useFactory: () => { + overlayContainerElement = document.createElement('div'); + return {getContainerElement: () => overlayContainerElement}; + }} + ] + }); + })); + let deps = [TestComponentBuilder, Overlay]; - beforeEach(inject(deps, fakeAsync((tcb: TestComponentBuilder, o: Overlay) => { + beforeEach(fakeAsync(inject(deps, (tcb: TestComponentBuilder, o: Overlay) => { builder = tcb; overlay = o; @@ -59,7 +52,7 @@ describe('Overlay', () => { flushMicrotasks(); }))); - it('should load a component into an overlay', fakeAsyncTest(() => { + it('should load a component into an overlay', fakeAsync(() => { let overlayRef: OverlayRef; overlay.create().then(ref => { @@ -76,7 +69,7 @@ describe('Overlay', () => { expect(overlayContainerElement.textContent).toBe(''); })); - it('should load a template portal into an overlay', fakeAsyncTest(() => { + it('should load a template portal into an overlay', fakeAsync(() => { let overlayRef: OverlayRef; overlay.create().then(ref => { @@ -93,7 +86,7 @@ describe('Overlay', () => { expect(overlayContainerElement.textContent).toBe(''); })); - it('should open multiple overlays', fakeAsyncTest(() => { + it('should open multiple overlays', fakeAsync(() => { let pizzaOverlayRef: OverlayRef; let cakeOverlayRef: OverlayRef; @@ -131,7 +124,7 @@ describe('Overlay', () => { state = new OverlayState(); }); - it('should apply the positioning strategy', fakeAsyncTest(() => { + it('should apply the positioning strategy', fakeAsync(() => { state.positionStrategy = new FakePositionStrategy(); overlay.create(state).then(ref => { @@ -151,21 +144,18 @@ describe('Overlay', () => { selector: 'pizza-msg', template: '

Pizza

', }) -class PizzaMsg { -} +class PizzaMsg { } /** Test-bed component that contains a TempatePortal and an ElementRef. */ @Component({ selector: 'portal-test', template: ``, - directives: [TemplatePortalDirective], }) class TestComponentWithTemplatePortals { @ViewChild(TemplatePortalDirective) templatePortal: TemplatePortalDirective; - constructor(public viewContainerRef: ViewContainerRef) { - } + constructor(public viewContainerRef: ViewContainerRef) { } } class FakePositionStrategy implements PositionStrategy { @@ -176,6 +166,3 @@ class FakePositionStrategy implements PositionStrategy { } -function fakeAsyncTest(fn: () => void) { - return inject([], fakeAsync(fn)); -} diff --git a/src/core/overlay/overlay.ts b/src/core/overlay/overlay.ts index 934806eb83a0..b662a9317204 100644 --- a/src/core/overlay/overlay.ts +++ b/src/core/overlay/overlay.ts @@ -88,4 +88,6 @@ export const OVERLAY_PROVIDERS = [ ViewportRuler, OverlayPositionBuilder, Overlay, + OverlayContainer, ]; + diff --git a/src/core/package.json b/src/core/package.json index d9a056f384f2..525d30771797 100644 --- a/src/core/package.json +++ b/src/core/package.json @@ -1,6 +1,6 @@ { "name": "@angular2-material/core", - "version": "2.0.0-alpha.6-2", + "version": "2.0.0-alpha.6-3", "description": "Angular 2 Material core", "main": "./core.js", "typings": "./core.d.ts", diff --git a/src/core/portal/portal-directives.ts b/src/core/portal/portal-directives.ts index f5094f94f3fc..90fa13afa4e9 100644 --- a/src/core/portal/portal-directives.ts +++ b/src/core/portal/portal-directives.ts @@ -1,4 +1,5 @@ import { + NgModule, ComponentRef, Directive, TemplateRef, @@ -103,3 +104,10 @@ export class PortalHostDirective extends BasePortalHost { } export const PORTAL_DIRECTIVES = [TemplatePortalDirective, PortalHostDirective]; + + +@NgModule({ + exports: PORTAL_DIRECTIVES, + declarations: PORTAL_DIRECTIVES, +}) +export class PortalModule { } diff --git a/src/core/portal/portal.spec.ts b/src/core/portal/portal.spec.ts index 9a8c0fae012b..0409c8c527af 100644 --- a/src/core/portal/portal.spec.ts +++ b/src/core/portal/portal.spec.ts @@ -1,9 +1,12 @@ import { inject, fakeAsync, - flushMicrotasks + flushMicrotasks, + TestComponentBuilder, + ComponentFixture, + TestBed, + async, } from '@angular/core/testing'; -import {TestComponentBuilder, ComponentFixture} from '@angular/compiler/testing'; import { Component, ViewChildren, @@ -13,7 +16,7 @@ import { Optional, Injector, } from '@angular/core'; -import {TemplatePortalDirective, PortalHostDirective} from './portal-directives'; +import {TemplatePortalDirective, PortalModule} from './portal-directives'; import {Portal, ComponentPortal} from './portal'; import {DomPortalHost} from './dom-portal-host'; @@ -21,10 +24,17 @@ import {DomPortalHost} from './dom-portal-host'; describe('Portals', () => { let builder: TestComponentBuilder; - beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { - builder = tcb; + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [PortalModule], + declarations: [PortalTestApp, ArbitraryViewContainerRefComponent, PizzaMsg], + }); })); + beforeEach(fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { + builder = tcb; + }))); + describe('PortalHostDirective', () => { it('should load a component into the portal', fakeAsync(() => { let appFixture: ComponentFixture; @@ -413,9 +423,7 @@ class ArbitraryViewContainerRefComponent {
Pie
- - `, - directives: [PortalHostDirective, TemplatePortalDirective], + `, }) class PortalTestApp { @ViewChildren(TemplatePortalDirective) portals: QueryList; diff --git a/src/core/ripple/ripple.spec.ts b/src/core/ripple/ripple.spec.ts index c0c6b34e3a18..bd1c1d3b4fa4 100644 --- a/src/core/ripple/ripple.spec.ts +++ b/src/core/ripple/ripple.spec.ts @@ -1,15 +1,12 @@ import { - describe, - it, - beforeEach, - afterEach, + TestBed, inject, async, - expect, + TestComponentBuilder, + ComponentFixture, } from '@angular/core/testing'; -import {TestComponentBuilder, ComponentFixture} from '@angular/compiler/testing'; import {Component, ViewChild} from '@angular/core'; -import {MdRipple} from './ripple'; +import {MdRipple, MdRippleModule} from './ripple'; /** Creates a DOM event to indicate that a CSS transition for the given property ended. */ const createTransitionEndEvent = (propertyName: string) => { @@ -70,6 +67,13 @@ describe('MdRipple', () => { let rippleBackground: Element; let originalBodyMargin: string; + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [MdRippleModule], + declarations: [BasicRippleContainer, RippleContainerWithInputBindings], + }); + })); + beforeEach(() => { // Set body margin to 0 during tests so it doesn't mess up position calculations. originalBodyMargin = document.body.style.margin; @@ -306,7 +310,6 @@ describe('MdRipple', () => { }); @Component({ - directives: [MdRipple], template: `
@@ -317,7 +320,6 @@ class BasicRippleContainer { } @Component({ - directives: [MdRipple], template: `
Rotini {{value}}

' }) -class RotiniPanel { +export class RotiniPanel { value: number = 9000; } @@ -100,6 +96,6 @@ class RotiniPanel { selector: 'spagetti-panel', template: '
Spagetti {{value}}
' }) -class SpagettiPanel { +export class SpagettiPanel { value: string = 'Omega'; } diff --git a/src/demo-app/portal/portal-demo.ts b/src/demo-app/portal/portal-demo.ts index 6b274dce23c9..e212c1649ecd 100644 --- a/src/demo-app/portal/portal-demo.ts +++ b/src/demo-app/portal/portal-demo.ts @@ -1,10 +1,8 @@ import {Component, ViewChildren, QueryList} from '@angular/core'; -import {NgFor} from '@angular/common'; import { Portal, ComponentPortal, TemplatePortalDirective, - PortalHostDirective } from '@angular2-material/core/core'; @@ -13,7 +11,6 @@ import { selector: 'portal-demo', templateUrl: 'portal-demo.html', styleUrls: ['portal-demo.css'], - directives: [TemplatePortalDirective, PortalHostDirective, NgFor] }) export class PortalDemo { @ViewChildren(TemplatePortalDirective) templatePortals: QueryList>; diff --git a/src/demo-app/progress-bar/progress-bar-demo.ts b/src/demo-app/progress-bar/progress-bar-demo.ts index df6244402cc5..5e1501651309 100644 --- a/src/demo-app/progress-bar/progress-bar-demo.ts +++ b/src/demo-app/progress-bar/progress-bar-demo.ts @@ -1,6 +1,5 @@ import {Component} from '@angular/core'; -import {MdButton} from '@angular2-material/button/button'; -import {MdProgressBar} from '@angular2-material/progress-bar/progress-bar'; + // TODO(josephperrott): Add an automatically filling example progress bar. @@ -9,7 +8,6 @@ import {MdProgressBar} from '@angular2-material/progress-bar/progress-bar'; selector: 'progress-bar-demo', templateUrl: 'progress-bar-demo.html', styleUrls: ['progress-bar-demo.css'], - directives: [MdProgressBar, MdButton] }) export class ProgressBarDemo { determinateProgressValue: number = 30; diff --git a/src/demo-app/progress-circle/progress-circle-demo.ts b/src/demo-app/progress-circle/progress-circle-demo.ts index f19bf4cc8ab4..b520267b5da2 100644 --- a/src/demo-app/progress-circle/progress-circle-demo.ts +++ b/src/demo-app/progress-circle/progress-circle-demo.ts @@ -1,13 +1,11 @@ import {Component} from '@angular/core'; -import {MdButton} from '@angular2-material/button/button'; -import {MdProgressCircle, MdSpinner} from '@angular2-material/progress-circle/progress-circle'; + @Component({ moduleId: module.id, selector: 'progress-circle-demo', templateUrl: 'progress-circle-demo.html', styleUrls: ['progress-circle-demo.css'], - directives: [MdProgressCircle, MdSpinner, MdButton] }) export class ProgressCircleDemo { progressValue: number = 40; diff --git a/src/demo-app/radio/radio-demo.ts b/src/demo-app/radio/radio-demo.ts index b146828d208a..c967c1914eae 100644 --- a/src/demo-app/radio/radio-demo.ts +++ b/src/demo-app/radio/radio-demo.ts @@ -1,19 +1,11 @@ import {Component} from '@angular/core'; -import {NgFor} from '@angular/common'; -import {FORM_DIRECTIVES} from '@angular/forms'; -import {MdCheckbox} from '@angular2-material/checkbox/checkbox'; -import {MD_RADIO_DIRECTIVES} from '@angular2-material/radio/radio'; -import { - MdUniqueSelectionDispatcher -} from '@angular2-material/core/coordination/unique-selection-dispatcher'; + @Component({ moduleId: module.id, selector: 'radio-demo', templateUrl: 'radio-demo.html', styleUrls: ['radio-demo.css'], - providers: [MdUniqueSelectionDispatcher], - directives: [MdCheckbox, MD_RADIO_DIRECTIVES, FORM_DIRECTIVES, NgFor] }) export class RadioDemo { isDisabled: boolean = false; diff --git a/src/demo-app/ripple/ripple-demo.ts b/src/demo-app/ripple/ripple-demo.ts index e2be9f254852..4b9f89c11a9a 100644 --- a/src/demo-app/ripple/ripple-demo.ts +++ b/src/demo-app/ripple/ripple-demo.ts @@ -1,33 +1,12 @@ -import { - Component, - ViewChild, -} from '@angular/core'; -import {MD_BUTTON_DIRECTIVES} from '@angular2-material/button/button'; -import {MD_CARD_DIRECTIVES} from '@angular2-material/card/card'; -import {MD_CHECKBOX_DIRECTIVES} from '@angular2-material/checkbox/checkbox'; -import {MD_ICON_DIRECTIVES} from '@angular2-material/icon/icon'; -import {MD_INPUT_DIRECTIVES} from '@angular2-material/input/input'; -import {MD_RADIO_DIRECTIVES} from '@angular2-material/radio/radio'; -import { - MdUniqueSelectionDispatcher -} from '@angular2-material/core/coordination/unique-selection-dispatcher'; -import {MD_RIPPLE_DIRECTIVES, MdRipple} from '@angular2-material/core/core'; +import {Component, ViewChild} from '@angular/core'; +import {MdRipple} from '@angular2-material/core/core'; + @Component({ moduleId: module.id, selector: 'ripple-demo', templateUrl: 'ripple-demo.html', styleUrls: ['ripple-demo.css'], - providers: [MdUniqueSelectionDispatcher], - directives: [ - MD_BUTTON_DIRECTIVES, - MD_CARD_DIRECTIVES, - MD_CHECKBOX_DIRECTIVES, - MD_ICON_DIRECTIVES, - MD_INPUT_DIRECTIVES, - MD_RADIO_DIRECTIVES, - MD_RIPPLE_DIRECTIVES, - ], }) export class RippleDemo { @ViewChild(MdRipple) manualRipple: MdRipple; diff --git a/src/demo-app/sidenav/sidenav-demo.ts b/src/demo-app/sidenav/sidenav-demo.ts index 39920a021e5f..6a689378c86b 100644 --- a/src/demo-app/sidenav/sidenav-demo.ts +++ b/src/demo-app/sidenav/sidenav-demo.ts @@ -1,12 +1,10 @@ import {Component} from '@angular/core'; -import {MdButton} from '@angular2-material/button/button'; -import {MD_SIDENAV_DIRECTIVES} from '@angular2-material/sidenav/sidenav'; + @Component({ moduleId: module.id, selector: 'sidenav-demo', templateUrl: 'sidenav-demo.html', styleUrls: ['sidenav-demo.css'], - directives: [MD_SIDENAV_DIRECTIVES, MdButton] }) export class SidenavDemo {} diff --git a/src/demo-app/slide-toggle/slide-toggle-demo.ts b/src/demo-app/slide-toggle/slide-toggle-demo.ts index 422a85aa0c66..df1f749cd09a 100644 --- a/src/demo-app/slide-toggle/slide-toggle-demo.ts +++ b/src/demo-app/slide-toggle/slide-toggle-demo.ts @@ -1,12 +1,10 @@ import {Component} from '@angular/core'; -import {FORM_DIRECTIVES} from '@angular/forms'; -import {MdSlideToggle} from '@angular2-material/slide-toggle/slide-toggle'; + @Component({ moduleId: module.id, selector: 'switch-demo', templateUrl: 'slide-toggle-demo.html', styleUrls: ['slide-toggle-demo.css'], - directives: [MdSlideToggle, FORM_DIRECTIVES] }) export class SlideToggleDemo {} diff --git a/src/demo-app/slider/slider-demo.ts b/src/demo-app/slider/slider-demo.ts index ec77e356b61e..3e9930572e33 100644 --- a/src/demo-app/slider/slider-demo.ts +++ b/src/demo-app/slider/slider-demo.ts @@ -1,10 +1,9 @@ import {Component} from '@angular/core'; -import {MD_SLIDER_DIRECTIVES} from '@angular2-material/slider/slider'; + @Component({ moduleId: module.id, selector: 'slider-demo', templateUrl: 'slider-demo.html', - directives: [MD_SLIDER_DIRECTIVES], }) export class SliderDemo { } diff --git a/src/demo-app/system-config.ts b/src/demo-app/system-config.ts index ef20dee089dc..7d9158a0a18d 100644 --- a/src/demo-app/system-config.ts +++ b/src/demo-app/system-config.ts @@ -3,6 +3,7 @@ **********************************************************************************************/ const components = [ + 'all', 'button', 'card', 'checkbox', diff --git a/src/demo-app/tabs/tab-group-demo.ts b/src/demo-app/tabs/tab-group-demo.ts index 8f8ff51a3606..12765490200a 100644 --- a/src/demo-app/tabs/tab-group-demo.ts +++ b/src/demo-app/tabs/tab-group-demo.ts @@ -1,17 +1,13 @@ import {Component, ViewEncapsulation} from '@angular/core'; -import {NgIf, NgFor, AsyncPipe} from '@angular/common'; -import {FORM_DIRECTIVES} from '@angular/forms'; -import {MD_TABS_DIRECTIVES} from '@angular2-material/tabs/tabs'; -import {MdToolbar} from '@angular2-material/toolbar/toolbar'; -import {MdInput} from '@angular2-material/input/input'; +import {AsyncPipe} from '@angular/common'; import {Observable} from 'rxjs/Observable'; + @Component({ moduleId: module.id, selector: 'tab-group-demo', templateUrl: 'tab-group-demo.html', styleUrls: ['tab-group-demo.css'], - directives: [MD_TABS_DIRECTIVES, MdToolbar, MdInput, NgIf, FORM_DIRECTIVES, NgFor], pipes: [AsyncPipe], encapsulation: ViewEncapsulation.None, }) diff --git a/src/demo-app/toolbar/toolbar-demo.ts b/src/demo-app/toolbar/toolbar-demo.ts index dd5433f39ae7..31af9c1cbcbb 100644 --- a/src/demo-app/toolbar/toolbar-demo.ts +++ b/src/demo-app/toolbar/toolbar-demo.ts @@ -1,13 +1,11 @@ import {Component} from '@angular/core'; -import {MdIcon} from '@angular2-material/icon/icon'; -import {MdToolbar} from '@angular2-material/toolbar/toolbar'; + @Component({ moduleId: module.id, selector: 'toolbar-demo', templateUrl: 'toolbar-demo.html', styleUrls: ['toolbar-demo.css'], - directives: [MdToolbar, MdIcon] }) export class ToolbarDemo { diff --git a/src/demo-app/tooltip/tooltip-demo.ts b/src/demo-app/tooltip/tooltip-demo.ts index 9ce01008c41f..56dedc97c489 100644 --- a/src/demo-app/tooltip/tooltip-demo.ts +++ b/src/demo-app/tooltip/tooltip-demo.ts @@ -1,18 +1,12 @@ import {Component} from '@angular/core'; -import {MD_TOOLTIP_DIRECTIVES, TooltipPosition} from '@angular2-material/tooltip/tooltip'; -import {OVERLAY_PROVIDERS} from '@angular2-material/core/overlay/overlay'; -import {MD_RADIO_DIRECTIVES} from '@angular2-material/radio/radio'; -import {MdUniqueSelectionDispatcher} from - '@angular2-material/core/coordination/unique-selection-dispatcher'; -import {MD_BUTTON_DIRECTIVES} from '@angular2-material/button/button'; +import {TooltipPosition} from '@angular2-material/tooltip/tooltip'; + @Component({ moduleId: module.id, selector: 'tooltip-demo', templateUrl: 'tooltip-demo.html', styleUrls: ['tooltip-demo.css'], - directives: [MD_TOOLTIP_DIRECTIVES, MD_RADIO_DIRECTIVES, MD_BUTTON_DIRECTIVES], - providers: [OVERLAY_PROVIDERS, MdUniqueSelectionDispatcher], }) export class TooltipDemo { position: TooltipPosition = 'below'; diff --git a/src/e2e-app/button/button-e2e.ts b/src/e2e-app/button/button-e2e.ts index 4f9cf67d30cf..31d60593a114 100644 --- a/src/e2e-app/button/button-e2e.ts +++ b/src/e2e-app/button/button-e2e.ts @@ -1,12 +1,9 @@ import {Component} from '@angular/core'; -import {MdButton, MdAnchor} from '@angular2-material/button/button'; -import {MdIcon} from '@angular2-material/icon/icon'; @Component({ moduleId: module.id, selector: 'button-e2e', templateUrl: 'button-e2e.html', - directives: [MdButton, MdAnchor, MdIcon] }) export class ButtonE2E { isDisabled: boolean = false; diff --git a/src/e2e-app/e2e-app-module.ts b/src/e2e-app/e2e-app-module.ts new file mode 100644 index 000000000000..13a6ac2d83c7 --- /dev/null +++ b/src/e2e-app/e2e-app-module.ts @@ -0,0 +1,40 @@ +import {NgModule, ApplicationRef} from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; +import {RouterModule} from '@angular/router'; +import {E2EApp, Home} from './e2e-app/e2e-app'; +import {IconE2E} from './icon/icon-e2e'; +import {ButtonE2E} from './button/button-e2e'; +import {MenuE2E} from './menu/menu-e2e'; +import {BasicTabs} from './tabs/tabs-e2e'; +import {E2E_APP_ROUTE_PROVIDER} from './e2e-app/routes'; +import {MaterialModule} from '@angular2-material/all/all'; + + +@NgModule({ + imports: [ + BrowserModule, + MaterialModule, + RouterModule, + ], + providers: [ + E2E_APP_ROUTE_PROVIDER, + ], + declarations: [ + E2EApp, + IconE2E, + ButtonE2E, + MenuE2E, + BasicTabs, + Home, + ], + entryComponents: [ + E2EApp, + ], +}) +export class E2eAppModule { + constructor(private _appRef: ApplicationRef) { } + + ngDoBootstrap() { + this._appRef.bootstrap(E2EApp); + } +} diff --git a/src/e2e-app/e2e-app/e2e-app.ts b/src/e2e-app/e2e-app/e2e-app.ts index 0a48fb7a85d5..95f768e69dff 100644 --- a/src/e2e-app/e2e-app/e2e-app.ts +++ b/src/e2e-app/e2e-app/e2e-app.ts @@ -1,22 +1,15 @@ import {Component} from '@angular/core'; -import {ROUTER_DIRECTIVES} from '@angular/router'; + @Component({ selector: 'home', - template: ` -

e2e website!

- ` + template: `

e2e website!

` }) export class Home {} @Component({ moduleId: module.id, selector: 'e2e-app', - providers: [], templateUrl: 'e2e-app.html', - directives: [ - ROUTER_DIRECTIVES, - ], - pipes: [] }) export class E2EApp { } diff --git a/src/e2e-app/icon/icon-e2e.ts b/src/e2e-app/icon/icon-e2e.ts index 812937a1df65..437c2d82fa54 100644 --- a/src/e2e-app/icon/icon-e2e.ts +++ b/src/e2e-app/icon/icon-e2e.ts @@ -1,10 +1,9 @@ import {Component} from '@angular/core'; -import {MD_ICON_DIRECTIVES} from '@angular2-material/icon/icon'; + @Component({ moduleId: module.id, selector: 'icon-e2e', templateUrl: 'icon-e2e.html', - directives: [MD_ICON_DIRECTIVES] }) export class IconE2E {} diff --git a/src/e2e-app/main.ts b/src/e2e-app/main.ts index c0511c96fa61..fc7c39eb9f5a 100644 --- a/src/e2e-app/main.ts +++ b/src/e2e-app/main.ts @@ -1,23 +1,5 @@ -import {bootstrap} from '@angular/platform-browser-dynamic'; -import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser'; -import {HTTP_PROVIDERS} from '@angular/http'; -import {Renderer} from '@angular/core'; -import {disableDeprecatedForms, provideForms} from '@angular/forms'; -import {MdLiveAnnouncer} from '@angular2-material/core/a11y/live-announcer'; -import {MdGestureConfig} from '@angular2-material/core/gestures/MdGestureConfig'; -import {MdIconRegistry} from '@angular2-material/icon/icon-registry'; -import {OverlayContainer} from '@angular2-material/core/overlay/overlay-container'; -import {E2EApp} from './e2e-app/e2e-app'; -import {E2E_APP_ROUTE_PROVIDER} from './e2e-app/routes'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; +import {E2eAppModule} from './e2e-app-module'; -bootstrap(E2EApp, [ - E2E_APP_ROUTE_PROVIDER, - disableDeprecatedForms(), - provideForms(), - MdLiveAnnouncer, - OverlayContainer, - HTTP_PROVIDERS, - MdIconRegistry, - Renderer, - {provide: HAMMER_GESTURE_CONFIG, useClass: MdGestureConfig}, -]); + +platformBrowserDynamic().bootstrapModule(E2eAppModule); diff --git a/src/e2e-app/menu/menu-e2e.ts b/src/e2e-app/menu/menu-e2e.ts index 2e552c0f5d2d..f5d3e5b29261 100644 --- a/src/e2e-app/menu/menu-e2e.ts +++ b/src/e2e-app/menu/menu-e2e.ts @@ -1,11 +1,10 @@ import {Component} from '@angular/core'; -import {MD_MENU_DIRECTIVES} from '@angular2-material/menu/menu'; + @Component({ moduleId: module.id, selector: 'menu-e2e', templateUrl: 'menu-e2e.html', - directives: [MD_MENU_DIRECTIVES], styles: [` #before-t, #above-t, #combined-t { width: 60px; @@ -14,7 +13,7 @@ import {MD_MENU_DIRECTIVES} from '@angular2-material/menu/menu'; .bottom-row { position: absolute; - top: 100px; + top: 200px; } `] }) diff --git a/src/e2e-app/system-config.ts b/src/e2e-app/system-config.ts index 8fd9e804f4f5..6d27a9970ec7 100644 --- a/src/e2e-app/system-config.ts +++ b/src/e2e-app/system-config.ts @@ -6,9 +6,11 @@ System.defaultJSExtensions = true; const components = [ + 'all', 'button', 'card', 'checkbox', + 'dialog', 'grid-list', 'icon', 'input', @@ -18,7 +20,9 @@ const components = [ 'progress-circle', 'radio', 'sidenav', + 'slider', 'slide-toggle', + 'button-toggle', 'tabs', 'toolbar', 'tooltip', diff --git a/src/e2e-app/tabs/tabs-e2e.ts b/src/e2e-app/tabs/tabs-e2e.ts index 3fa0188dedc7..45e0d25594d3 100644 --- a/src/e2e-app/tabs/tabs-e2e.ts +++ b/src/e2e-app/tabs/tabs-e2e.ts @@ -1,10 +1,8 @@ import {Component} from '@angular/core'; -import {MD_TABS_DIRECTIVES} from '@angular2-material/tabs/tabs'; @Component({ moduleId: module.id, selector: 'tabs-e2e', templateUrl: 'tabs-e2e.html', - directives: [MD_TABS_DIRECTIVES] }) export class BasicTabs {} diff --git a/test/karma-test-shim.js b/test/karma-test-shim.js index ddd6557af953..99203d688ae0 100644 --- a/test/karma-test-shim.js +++ b/test/karma-test-shim.js @@ -37,8 +37,9 @@ System.import('system-config.js').then(function() { var testing = providers[0]; var testingBrowser = providers[1]; - testing.setBaseTestProviders(testingBrowser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, - testingBrowser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS); + testing.TestBed.initTestEnvironment( + testingBrowser.BrowserDynamicTestingModule, + testingBrowser.platformBrowserDynamicTesting()); }); }).then(function() { // Finally, load all spec files.