From 9ff619669ae4e16409772b96e9f8d98f8477a3e0 Mon Sep 17 00:00:00 2001 From: Hans Date: Thu, 25 Aug 2016 15:18:27 -0700 Subject: [PATCH] feat(modules): add `forRoot` to material modules (#1122) --- src/demo-app/demo-app-module.ts | 4 +- src/demo-app/dialog/dialog-demo.ts | 2 - src/demo-app/overlay/overlay-demo.ts | 2 - src/e2e-app/e2e-app-module.ts | 2 +- src/lib/all/all.ts | 43 +++++++++++++++++-- src/lib/button-toggle/button-toggle.spec.ts | 2 +- src/lib/button-toggle/button-toggle.ts | 22 +++++----- src/lib/button/button.ts | 8 +--- src/lib/card/card.ts | 16 +++---- src/lib/checkbox/checkbox.ts | 7 +-- src/lib/core/core.ts | 28 ++++++------ .../core/overlay/overlay-directives.spec.ts | 2 +- src/lib/core/overlay/overlay-directives.ts | 19 +++++--- src/lib/core/overlay/overlay.spec.ts | 2 +- src/lib/core/overlay/overlay.ts | 2 - src/lib/core/portal/portal-directives.ts | 6 +-- src/lib/core/ripple/ripple.ts | 7 +-- src/lib/dialog/dialog.spec.ts | 2 +- src/lib/dialog/dialog.ts | 13 ++++-- src/lib/grid-list/README.md | 13 +++--- src/lib/grid-list/grid-list.ts | 8 +--- src/lib/icon/icon.spec.ts | 2 +- src/lib/icon/icon.ts | 18 +++++--- src/lib/input/input.ts | 7 +-- src/lib/list/README.md | 12 ++++-- src/lib/list/list.ts | 7 +-- src/lib/menu/menu-trigger.ts | 2 - src/lib/menu/menu.spec.ts | 2 +- src/lib/menu/menu.ts | 21 +++++---- src/lib/progress-bar/progress-bar.ts | 6 +-- src/lib/progress-circle/progress-circle.ts | 7 +-- src/lib/radio/radio.spec.ts | 2 +- src/lib/radio/radio.ts | 15 ++++--- src/lib/sidenav/sidenav.ts | 8 +--- src/lib/slide-toggle/slide-toggle.ts | 20 +++++---- src/lib/slider/slider.ts | 17 +++++--- src/lib/tabs/tabs.ts | 8 ++-- src/lib/toolbar/toolbar.ts | 7 +-- src/lib/tooltip/tooltip.spec.ts | 2 +- src/lib/tooltip/tooltip.ts | 18 +++++--- stylelint-config.json | 2 +- 41 files changed, 212 insertions(+), 181 deletions(-) diff --git a/src/demo-app/demo-app-module.ts b/src/demo-app/demo-app-module.ts index a772cbb95304..b7645cecc0e9 100644 --- a/src/demo-app/demo-app-module.ts +++ b/src/demo-app/demo-app-module.ts @@ -39,8 +39,8 @@ import {TabsDemo} from './tabs/tab-group-demo'; BrowserModule, FormsModule, HttpModule, - MaterialModule, - RouterModule.forRoot(DEMO_APP_ROUTES) + RouterModule.forRoot(DEMO_APP_ROUTES), + MaterialModule.forRoot(), ], declarations: [ BaselineDemo, diff --git a/src/demo-app/dialog/dialog-demo.ts b/src/demo-app/dialog/dialog-demo.ts index ac81c05091c5..24b58fa1d3e4 100644 --- a/src/demo-app/dialog/dialog-demo.ts +++ b/src/demo-app/dialog/dialog-demo.ts @@ -1,13 +1,11 @@ import {Component, ViewContainerRef} from '@angular/core'; import {MdDialog, MdDialogConfig, MdDialogRef} from '@angular2-material/dialog/dialog'; -import {OVERLAY_PROVIDERS} from '@angular2-material/core/overlay/overlay'; @Component({ moduleId: module.id, selector: 'dialog-demo', templateUrl: 'dialog-demo.html', styleUrls: ['dialog-demo.css'], - providers: [MdDialog, OVERLAY_PROVIDERS] }) export class DialogDemo { dialogRef: MdDialogRef; diff --git a/src/demo-app/overlay/overlay-demo.ts b/src/demo-app/overlay/overlay-demo.ts index a3e2476d9459..6931985cf76e 100644 --- a/src/demo-app/overlay/overlay-demo.ts +++ b/src/demo-app/overlay/overlay-demo.ts @@ -10,7 +10,6 @@ import { Overlay, OverlayState, OverlayOrigin, - OVERLAY_PROVIDERS, ComponentPortal, Portal, TemplatePortalDirective, @@ -22,7 +21,6 @@ import { selector: 'overlay-demo', templateUrl: 'overlay-demo.html', styleUrls: ['overlay-demo.css'], - providers: [OVERLAY_PROVIDERS], encapsulation: ViewEncapsulation.None, }) export class OverlayDemo { diff --git a/src/e2e-app/e2e-app-module.ts b/src/e2e-app/e2e-app-module.ts index f3d1ecd13dcd..a6ef00be8a01 100644 --- a/src/e2e-app/e2e-app-module.ts +++ b/src/e2e-app/e2e-app-module.ts @@ -13,8 +13,8 @@ import {E2E_APP_ROUTES} from './e2e-app/routes'; @NgModule({ imports: [ BrowserModule, - MaterialModule, RouterModule.forRoot(E2E_APP_ROUTES), + MaterialModule.forRoot(), ], declarations: [ E2EApp, diff --git a/src/lib/all/all.ts b/src/lib/all/all.ts index 41cf8a1c41da..076d885f23b0 100644 --- a/src/lib/all/all.ts +++ b/src/lib/all/all.ts @@ -1,4 +1,4 @@ -import {NgModule} from '@angular/core'; +import {NgModule, ModuleWithProviders} 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'; @@ -52,8 +52,45 @@ const MATERIAL_MODULES = [ ]; @NgModule({ - imports: MATERIAL_MODULES, + imports: [ + MdButtonModule, + MdCardModule, + MdCheckboxModule, + MdGridListModule, + MdInputModule, + MdListModule, + MdProgressBarModule, + MdProgressCircleModule, + MdRippleModule, + MdSidenavModule, + MdSliderModule, + MdSlideToggleModule, + MdTabsModule, + MdToolbarModule, + PortalModule, + RtlModule, + + // These modules include providers. + MdButtonToggleModule.forRoot(), + MdDialogModule.forRoot(), + MdIconModule.forRoot(), + MdMenuModule.forRoot(), + MdRadioModule.forRoot(), + MdTooltipModule.forRoot(), + OverlayModule.forRoot(), + ], exports: MATERIAL_MODULES, providers: [MdLiveAnnouncer] }) -export class MaterialModule { } +export class MaterialRootModule { } + + +@NgModule({ + imports: MATERIAL_MODULES, + exports: MATERIAL_MODULES, +}) +export class MaterialModule { + static forRoot(): ModuleWithProviders { + return {ngModule: MaterialRootModule}; + } +} diff --git a/src/lib/button-toggle/button-toggle.spec.ts b/src/lib/button-toggle/button-toggle.spec.ts index 218b8f2421c9..569745937955 100644 --- a/src/lib/button-toggle/button-toggle.spec.ts +++ b/src/lib/button-toggle/button-toggle.spec.ts @@ -20,7 +20,7 @@ describe('MdButtonToggle', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MdButtonToggleModule, FormsModule], + imports: [MdButtonToggleModule.forRoot(), FormsModule], declarations: [ ButtonTogglesInsideButtonToggleGroup, ButtonToggleGroupWithNgModel, diff --git a/src/lib/button-toggle/button-toggle.ts b/src/lib/button-toggle/button-toggle.ts index d717dec504da..ca6b2058ff13 100644 --- a/src/lib/button-toggle/button-toggle.ts +++ b/src/lib/button-toggle/button-toggle.ts @@ -1,5 +1,6 @@ import { NgModule, + ModuleWithProviders, Component, ContentChildren, Directive, @@ -385,18 +386,17 @@ export class MdButtonToggle implements OnInit { } } -/** @deprecated */ -export const MD_BUTTON_TOGGLE_DIRECTIVES = [ - MdButtonToggleGroup, - MdButtonToggleGroupMultiple, - MdButtonToggle -]; - @NgModule({ imports: [FormsModule], - exports: MD_BUTTON_TOGGLE_DIRECTIVES, - declarations: MD_BUTTON_TOGGLE_DIRECTIVES, - providers: [MdUniqueSelectionDispatcher], + exports: [MdButtonToggleGroup, MdButtonToggleGroupMultiple, MdButtonToggle], + declarations: [MdButtonToggleGroup, MdButtonToggleGroupMultiple, MdButtonToggle], }) -export class MdButtonToggleModule { } +export class MdButtonToggleModule { + static forRoot(): ModuleWithProviders { + return { + ngModule: MdButtonToggleModule, + providers: [MdUniqueSelectionDispatcher] + }; + } +} diff --git a/src/lib/button/button.ts b/src/lib/button/button.ts index a7c7fe64decb..9be2c13ec96f 100644 --- a/src/lib/button/button.ts +++ b/src/lib/button/button.ts @@ -156,13 +156,9 @@ export class MdAnchor extends MdButton { } -/** @deprecated */ -export const MD_BUTTON_DIRECTIVES: any[] = [MdButton, MdAnchor]; - - @NgModule({ imports: [CommonModule, MdRippleModule], - exports: MD_BUTTON_DIRECTIVES, - declarations: MD_BUTTON_DIRECTIVES, + exports: [MdButton, MdAnchor], + declarations: [MdButton, MdAnchor], }) export class MdButtonModule { } diff --git a/src/lib/card/card.ts b/src/lib/card/card.ts index aef5d4953c7a..cb470b117095 100644 --- a/src/lib/card/card.ts +++ b/src/lib/card/card.ts @@ -113,15 +113,15 @@ TODO(kara): update link to demo site when it exists }) export class MdCardTitleGroup {} -/** @deprecated */ -export const MD_CARD_DIRECTIVES: any[] = [ - MdCard, MdCardContent, MdCardHeader, MdCardTitleGroup, MdCardTitle, MdCardSubtitle, - MdCardActions -]; - @NgModule({ - exports: MD_CARD_DIRECTIVES, - declarations: MD_CARD_DIRECTIVES, + exports: [ + MdCard, MdCardHeader, MdCardTitleGroup, MdCardContent, MdCardTitle, MdCardSubtitle, + MdCardActions + ], + declarations: [ + MdCard, MdCardHeader, MdCardTitleGroup, MdCardContent, MdCardTitle, MdCardSubtitle, + MdCardActions + ], }) export class MdCardModule { } diff --git a/src/lib/checkbox/checkbox.ts b/src/lib/checkbox/checkbox.ts index 275f1dedeb4d..e90cb7359312 100644 --- a/src/lib/checkbox/checkbox.ts +++ b/src/lib/checkbox/checkbox.ts @@ -304,12 +304,9 @@ export class MdCheckbox implements ControlValueAccessor { } } -/** @deprecated */ -export const MD_CHECKBOX_DIRECTIVES = [MdCheckbox]; - @NgModule({ - exports: MD_CHECKBOX_DIRECTIVES, - declarations: MD_CHECKBOX_DIRECTIVES, + exports: [MdCheckbox], + declarations: [MdCheckbox], }) export class MdCheckboxModule { } diff --git a/src/lib/core/core.ts b/src/lib/core/core.ts index 3ba809ceb8e5..b8f66dc7d3f5 100644 --- a/src/lib/core/core.ts +++ b/src/lib/core/core.ts @@ -1,4 +1,4 @@ -import {NgModule} from '@angular/core'; +import {NgModule, ModuleWithProviders} from '@angular/core'; import {MdLineModule} from './line/line'; import {RtlModule} from './rtl/dir'; import {MdRippleModule} from './ripple/ripple'; @@ -20,7 +20,6 @@ export { export { PortalHostDirective, TemplatePortalDirective, - PORTAL_DIRECTIVES, PortalModule, } from './portal/portal-directives'; export {DomPortalHost} from './portal/dom-portal-host'; @@ -33,7 +32,6 @@ export {OverlayState} from './overlay/overlay-state'; export { ConnectedOverlayDirective, OverlayOrigin, - OVERLAY_DIRECTIVES, OverlayModule, } from './overlay/overlay-directives'; export { @@ -45,7 +43,7 @@ export { export {MdGestureConfig} from './gestures/MdGestureConfig'; // Ripple -export {MD_RIPPLE_DIRECTIVES, MdRipple, MdRippleModule} from './ripple/ripple'; +export {MdRipple, MdRippleModule} from './ripple/ripple'; // a11y export { @@ -62,17 +60,15 @@ export { export {MdLineModule, MdLine, MdLineSetter} from './line/line'; -const coreModules = [ - MdLineModule, - RtlModule, - MdRippleModule, - PortalModule, - OverlayModule, -]; - @NgModule({ - imports: coreModules, - exports: coreModules, - providers: [MdLiveAnnouncer], + imports: [MdLineModule, RtlModule, MdRippleModule, PortalModule, OverlayModule], + exports: [MdLineModule, RtlModule, MdRippleModule, PortalModule, OverlayModule], }) -export class MdCoreModule { } +export class MdCoreModule { + static forRoot(): ModuleWithProviders { + return { + ngModule: MdCoreModule, + providers: [MdLiveAnnouncer] + }; + } +} diff --git a/src/lib/core/overlay/overlay-directives.spec.ts b/src/lib/core/overlay/overlay-directives.spec.ts index bda8845416ee..963963d7764a 100644 --- a/src/lib/core/overlay/overlay-directives.spec.ts +++ b/src/lib/core/overlay/overlay-directives.spec.ts @@ -11,7 +11,7 @@ describe('Overlay directives', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [OverlayModule], + imports: [OverlayModule.forRoot()], declarations: [ConnectedOverlayDirectiveTest], providers: [ {provide: OverlayContainer, useFactory: () => { diff --git a/src/lib/core/overlay/overlay-directives.ts b/src/lib/core/overlay/overlay-directives.ts index b3926fc24533..53f082e27905 100644 --- a/src/lib/core/overlay/overlay-directives.ts +++ b/src/lib/core/overlay/overlay-directives.ts @@ -1,5 +1,6 @@ import { NgModule, + ModuleWithProviders, Directive, TemplateRef, ViewContainerRef, @@ -15,6 +16,7 @@ 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 = [ new ConnectionPositionPair( @@ -104,13 +106,16 @@ export class ConnectedOverlayDirective implements OnInit, OnDestroy { } -export const OVERLAY_DIRECTIVES = [ConnectedOverlayDirective, OverlayOrigin]; - - @NgModule({ imports: [PortalModule], - exports: OVERLAY_DIRECTIVES, - declarations: OVERLAY_DIRECTIVES, - providers: OVERLAY_PROVIDERS, + exports: [ConnectedOverlayDirective, OverlayOrigin], + declarations: [ConnectedOverlayDirective, OverlayOrigin], }) -export class OverlayModule { } +export class OverlayModule { + static forRoot(): ModuleWithProviders { + return { + ngModule: OverlayModule, + providers: OVERLAY_PROVIDERS, + }; + } +} diff --git a/src/lib/core/overlay/overlay.spec.ts b/src/lib/core/overlay/overlay.spec.ts index fc94b5b435f1..facbfac68f1f 100644 --- a/src/lib/core/overlay/overlay.spec.ts +++ b/src/lib/core/overlay/overlay.spec.ts @@ -17,7 +17,7 @@ describe('Overlay', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [OverlayModule, PortalModule, OverlayTestModule], + imports: [OverlayModule.forRoot(), PortalModule, OverlayTestModule], providers: [ {provide: OverlayContainer, useFactory: () => { overlayContainerElement = document.createElement('div'); diff --git a/src/lib/core/overlay/overlay.ts b/src/lib/core/overlay/overlay.ts index 0add059bd1da..236a5c258c88 100644 --- a/src/lib/core/overlay/overlay.ts +++ b/src/lib/core/overlay/overlay.ts @@ -82,7 +82,6 @@ export class Overlay { } } - /** Providers for Overlay and its related injectables. */ export const OVERLAY_PROVIDERS = [ ViewportRuler, @@ -90,4 +89,3 @@ export const OVERLAY_PROVIDERS = [ Overlay, OverlayContainer, ]; - diff --git a/src/lib/core/portal/portal-directives.ts b/src/lib/core/portal/portal-directives.ts index 9f2fc42df004..6ce961f6573f 100644 --- a/src/lib/core/portal/portal-directives.ts +++ b/src/lib/core/portal/portal-directives.ts @@ -102,11 +102,9 @@ export class PortalHostDirective extends BasePortalHost { } } -export const PORTAL_DIRECTIVES = [TemplatePortalDirective, PortalHostDirective]; - @NgModule({ - exports: PORTAL_DIRECTIVES, - declarations: PORTAL_DIRECTIVES, + exports: [TemplatePortalDirective, PortalHostDirective], + declarations: [TemplatePortalDirective, PortalHostDirective], }) export class PortalModule { } diff --git a/src/lib/core/ripple/ripple.ts b/src/lib/core/ripple/ripple.ts index 79a7bad9d4c3..137ad592cf3d 100644 --- a/src/lib/core/ripple/ripple.ts +++ b/src/lib/core/ripple/ripple.ts @@ -168,12 +168,9 @@ export class MdRipple implements OnInit, OnDestroy, OnChanges { // TODO: Reactivate the background div if the user drags out and back in. } -/** @deprecated */ -export const MD_RIPPLE_DIRECTIVES = [MdRipple]; - @NgModule({ - exports: MD_RIPPLE_DIRECTIVES, - declarations: MD_RIPPLE_DIRECTIVES, + exports: [MdRipple], + declarations: [MdRipple], }) export class MdRippleModule { } diff --git a/src/lib/dialog/dialog.spec.ts b/src/lib/dialog/dialog.spec.ts index 22f80ff2e67f..3513421636dc 100644 --- a/src/lib/dialog/dialog.spec.ts +++ b/src/lib/dialog/dialog.spec.ts @@ -15,7 +15,7 @@ describe('MdDialog', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MdDialogModule, DialogTestModule], + imports: [MdDialogModule.forRoot(), DialogTestModule], providers: [ {provide: OverlayContainer, useFactory: () => { overlayContainerElement = document.createElement('div'); diff --git a/src/lib/dialog/dialog.ts b/src/lib/dialog/dialog.ts index 18cbaad02409..775a7cdde2e5 100644 --- a/src/lib/dialog/dialog.ts +++ b/src/lib/dialog/dialog.ts @@ -1,4 +1,4 @@ -import {NgModule, Injector, ComponentRef, Injectable} from '@angular/core'; +import {NgModule, ModuleWithProviders, Injector, ComponentRef, Injectable} from '@angular/core'; import { Overlay, OverlayModule, @@ -6,6 +6,7 @@ import { OverlayRef, OverlayState, ComponentPortal, + OVERLAY_PROVIDERS, } from '@angular2-material/core/core'; import {ComponentType} from '@angular2-material/core/overlay/generic-component-type'; import {MdDialogConfig} from './dialog-config'; @@ -122,6 +123,12 @@ export class MdDialog { exports: [MdDialogContainer], declarations: [MdDialogContainer], entryComponents: [MdDialogContainer], - providers: [MdDialog], }) -export class MdDialogModule { } +export class MdDialogModule { + static forRoot(): ModuleWithProviders { + return { + ngModule: MdDialogModule, + providers: [MdDialog, OVERLAY_PROVIDERS], + }; + } +} diff --git a/src/lib/grid-list/README.md b/src/lib/grid-list/README.md index 4ab1548b9933..ec1e43177144 100644 --- a/src/lib/grid-list/README.md +++ b/src/lib/grid-list/README.md @@ -7,14 +7,17 @@ See Material Design spec [here](https://www.google.com/design/spec/components/gr ### Simple grid list -To use `md-grid-list`, first import the grid list directives and add them to your component's directives -array: +To use `md-grid-list`, import the MdGridList module into your application's NgModule: -```javascript -@Component({ +*my-app-module.ts* +```ts +import {MdGridListModule} from '@angular2-material/gridlist/gridlist'; + +@NgModule({ + imports: [MdGridListModule], ... - directives: [MD_GRID_LIST_DIRECTIVES] }) +export class MyAppModule {} ``` In your template, create an `md-grid-list` element and specify the number of columns you want for diff --git a/src/lib/grid-list/grid-list.ts b/src/lib/grid-list/grid-list.ts index dea75b865969..5bd544520916 100644 --- a/src/lib/grid-list/grid-list.ts +++ b/src/lib/grid-list/grid-list.ts @@ -152,13 +152,9 @@ export class MdGridList implements OnInit, AfterContentChecked { } -/** @deprecated */ -export const MD_GRID_LIST_DIRECTIVES: any[] = [MdGridList, MdGridTile, MdGridTileText]; - - @NgModule({ imports: [MdLineModule], - exports: [MD_GRID_LIST_DIRECTIVES, MdLineModule], - declarations: MD_GRID_LIST_DIRECTIVES, + exports: [MdGridList, MdGridTile, MdGridTileText, MdLineModule], + declarations: [MdGridList, MdGridTile, MdGridTileText], }) export class MdGridListModule { } diff --git a/src/lib/icon/icon.spec.ts b/src/lib/icon/icon.spec.ts index b4cbc611abf2..d855a8888008 100644 --- a/src/lib/icon/icon.spec.ts +++ b/src/lib/icon/icon.spec.ts @@ -39,7 +39,7 @@ describe('MdIcon', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MdIconModule], + imports: [MdIconModule.forRoot()], declarations: [ MdIconLigatureTestApp, MdIconLigatureWithAriaBindingTestApp, diff --git a/src/lib/icon/icon.ts b/src/lib/icon/icon.ts index 4978eb2f731a..9786ccd699de 100644 --- a/src/lib/icon/icon.ts +++ b/src/lib/icon/icon.ts @@ -1,5 +1,6 @@ import { NgModule, + ModuleWithProviders, ChangeDetectionStrategy, Component, ElementRef, @@ -225,14 +226,17 @@ export class MdIcon implements OnChanges, OnInit, AfterViewChecked { } } -/** @deprecated */ -export const MD_ICON_DIRECTIVES = [MdIcon]; - @NgModule({ imports: [HttpModule], - exports: MD_ICON_DIRECTIVES, - declarations: MD_ICON_DIRECTIVES, - providers: [MdIconRegistry], + exports: [MdIcon], + declarations: [MdIcon], }) -export class MdIconModule { } +export class MdIconModule { + static forRoot(): ModuleWithProviders { + return { + ngModule: MdIconModule, + providers: [MdIconRegistry], + }; + } +} diff --git a/src/lib/input/input.ts b/src/lib/input/input.ts index b13f67cb55a9..43a66f5e512b 100644 --- a/src/lib/input/input.ts +++ b/src/lib/input/input.ts @@ -307,13 +307,10 @@ export class MdInput implements ControlValueAccessor, AfterContentInit, OnChange } } -/** @deprecated */ -export const MD_INPUT_DIRECTIVES = [MdPlaceholder, MdInput, MdHint]; - @NgModule({ - declarations: MD_INPUT_DIRECTIVES, + declarations: [MdPlaceholder, MdInput, MdHint], imports: [CommonModule, FormsModule], - exports: MD_INPUT_DIRECTIVES, + exports: [MdPlaceholder, MdInput, MdHint], }) export class MdInputModule { } diff --git a/src/lib/list/README.md b/src/lib/list/README.md index ae7dc01adbed..4f08d8df2483 100644 --- a/src/lib/list/README.md +++ b/src/lib/list/README.md @@ -7,13 +7,17 @@ ### Simple list -To use `md-list`, first import the list directives and add them to your component's directives array: +To use `md-list`, import the MdList module into your application's NgModule: -```javascript -@Component({ +*my-app-module.ts* +```ts +import {MdLisTModule} from '@angular2-material/list/list'; + +@NgModule({ + imports: [MdListModule], ... - directives: [MD_LIST_DIRECTIVES] }) +export class MyAppModule {} ``` In your template, create an `md-list` element and wrap each of your items in an `md-list-item` tag. diff --git a/src/lib/list/list.ts b/src/lib/list/list.ts index ffbc9a1c1b9c..d28ec96cb35a 100644 --- a/src/lib/list/list.ts +++ b/src/lib/list/list.ts @@ -70,13 +70,10 @@ export class MdListItem implements AfterContentInit { } } -/** @deprecated */ -export const MD_LIST_DIRECTIVES = [MdList, MdListDivider, MdListItem, MdListAvatar]; - @NgModule({ imports: [MdLineModule], - exports: [MD_LIST_DIRECTIVES, MdLineModule], - declarations: MD_LIST_DIRECTIVES, + exports: [MdList, MdListItem, MdListDivider, MdListAvatar, MdLineModule], + declarations: [MdList, MdListItem, MdListDivider, MdListAvatar], }) export class MdListModule { } diff --git a/src/lib/menu/menu-trigger.ts b/src/lib/menu/menu-trigger.ts index 13cbc178496f..aec34ff0a2e3 100644 --- a/src/lib/menu/menu-trigger.ts +++ b/src/lib/menu/menu-trigger.ts @@ -15,7 +15,6 @@ import { Overlay, OverlayState, OverlayRef, - OVERLAY_PROVIDERS, TemplatePortal } from '@angular2-material/core/core'; import { @@ -33,7 +32,6 @@ import { @Directive({ selector: '[md-menu-trigger-for]', host: {'aria-haspopup': 'true'}, - providers: [OVERLAY_PROVIDERS], exportAs: 'mdMenuTrigger' }) export class MdMenuTrigger implements AfterViewInit, OnDestroy { diff --git a/src/lib/menu/menu.spec.ts b/src/lib/menu/menu.spec.ts index bb16f8a4728e..b54f2e6a555f 100644 --- a/src/lib/menu/menu.spec.ts +++ b/src/lib/menu/menu.spec.ts @@ -7,7 +7,7 @@ describe('MdMenu', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MdMenuModule], + imports: [MdMenuModule.forRoot()], declarations: [TestMenu], }); diff --git a/src/lib/menu/menu.ts b/src/lib/menu/menu.ts index da4811879acf..aa841de1cd64 100644 --- a/src/lib/menu/menu.ts +++ b/src/lib/menu/menu.ts @@ -1,21 +1,24 @@ -import {NgModule} from '@angular/core'; +import {NgModule, ModuleWithProviders} from '@angular/core'; import {CommonModule} from '@angular/common'; -import {OverlayModule} from '@angular2-material/core/core'; +import {OverlayModule, OVERLAY_PROVIDERS} 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'; -/** @deprecated */ -export const MD_MENU_DIRECTIVES = [MdMenu, MdMenuItem, MdMenuTrigger, MdMenuAnchor]; - @NgModule({ imports: [OverlayModule, CommonModule], - exports: MD_MENU_DIRECTIVES, - declarations: MD_MENU_DIRECTIVES, + exports: [MdMenu, MdMenuItem, MdMenuTrigger, MdMenuAnchor], + declarations: [MdMenu, MdMenuItem, MdMenuTrigger, MdMenuAnchor], }) -export class MdMenuModule { } +export class MdMenuModule { + static forRoot(): ModuleWithProviders { + return { + ngModule: MdMenuModule, + providers: OVERLAY_PROVIDERS, + }; + } +} diff --git a/src/lib/progress-bar/progress-bar.ts b/src/lib/progress-bar/progress-bar.ts index 5d450b0c8a93..f9e142009e6b 100644 --- a/src/lib/progress-bar/progress-bar.ts +++ b/src/lib/progress-bar/progress-bar.ts @@ -86,12 +86,10 @@ function clamp(v: number, min = 0, max = 100) { return Math.max(min, Math.min(max, v)); } -/** @deprecated */ -export const MD_PROGRESS_BAR_DIRECTIVES = [MdProgressBar]; @NgModule({ imports: [CommonModule], - exports: MD_PROGRESS_BAR_DIRECTIVES, - declarations: MD_PROGRESS_BAR_DIRECTIVES, + exports: [MdProgressBar], + declarations: [MdProgressBar], }) export class MdProgressBarModule { } diff --git a/src/lib/progress-circle/progress-circle.ts b/src/lib/progress-circle/progress-circle.ts index aa6a5f91311c..1a3c7a9a5cf4 100644 --- a/src/lib/progress-circle/progress-circle.ts +++ b/src/lib/progress-circle/progress-circle.ts @@ -313,12 +313,9 @@ function getSvgArc(currentValue: number, rotation: number) { return `M${start}A${pathRadius},${pathRadius} 0 ${largeArcFlag},${arcSweep} ${end}`; } -/** @deprecated */ -export const MD_PROGRESS_CIRCLE_DIRECTIVES = [MdProgressCircle, MdSpinner]; - @NgModule({ - exports: MD_PROGRESS_CIRCLE_DIRECTIVES, - declarations: MD_PROGRESS_CIRCLE_DIRECTIVES, + exports: [MdProgressCircle, MdSpinner], + declarations: [MdProgressCircle, MdSpinner], }) export class MdProgressCircleModule { } diff --git a/src/lib/radio/radio.spec.ts b/src/lib/radio/radio.spec.ts index 401a13df2c87..40cf1514445c 100644 --- a/src/lib/radio/radio.spec.ts +++ b/src/lib/radio/radio.spec.ts @@ -9,7 +9,7 @@ describe('MdRadio', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MdRadioModule, FormsModule], + imports: [MdRadioModule.forRoot(), FormsModule], declarations: [ RadiosInsideRadioGroup, RadioGroupWithNgModel, diff --git a/src/lib/radio/radio.ts b/src/lib/radio/radio.ts index 614dc06a9bba..2fece950f55c 100644 --- a/src/lib/radio/radio.ts +++ b/src/lib/radio/radio.ts @@ -13,6 +13,7 @@ import { ViewEncapsulation, forwardRef, NgModule, + ModuleWithProviders, } from '@angular/core'; import { NG_VALUE_ACCESSOR, @@ -420,14 +421,16 @@ export class MdRadioButton implements OnInit { } } -/** @deprecated */ -export const MD_RADIO_DIRECTIVES = [MdRadioGroup, MdRadioButton]; - @NgModule({ - exports: MD_RADIO_DIRECTIVES, - declarations: MD_RADIO_DIRECTIVES, - providers: [MdUniqueSelectionDispatcher] + exports: [MdRadioGroup, MdRadioButton], + declarations: [MdRadioGroup, MdRadioButton], }) export class MdRadioModule { + static forRoot(): ModuleWithProviders { + return { + ngModule: MdRadioModule, + providers: [MdUniqueSelectionDispatcher], + }; + } } diff --git a/src/lib/sidenav/sidenav.ts b/src/lib/sidenav/sidenav.ts index 8f6ade53603f..4e809c59b93b 100644 --- a/src/lib/sidenav/sidenav.ts +++ b/src/lib/sidenav/sidenav.ts @@ -387,13 +387,9 @@ export class MdSidenavLayout implements AfterContentInit { } -/** @deprecated */ -export const MD_SIDENAV_DIRECTIVES = [MdSidenavLayout, MdSidenav]; - - @NgModule({ imports: [CommonModule], - exports: MD_SIDENAV_DIRECTIVES, - declarations: MD_SIDENAV_DIRECTIVES, + exports: [MdSidenavLayout, MdSidenav], + declarations: [MdSidenavLayout, MdSidenav], }) export class MdSidenavModule { } diff --git a/src/lib/slide-toggle/slide-toggle.ts b/src/lib/slide-toggle/slide-toggle.ts index 648ab20df836..a2b695a7e02e 100644 --- a/src/lib/slide-toggle/slide-toggle.ts +++ b/src/lib/slide-toggle/slide-toggle.ts @@ -9,6 +9,7 @@ import { EventEmitter, AfterContentInit, NgModule, + ModuleWithProviders, } from '@angular/core'; import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser'; import { @@ -298,16 +299,17 @@ class SlideToggleRenderer { } -/** @deprecated */ -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}, - ], + exports: [MdSlideToggle], + declarations: [MdSlideToggle], }) -export class MdSlideToggleModule { } +export class MdSlideToggleModule { + static forRoot(): ModuleWithProviders { + return { + ngModule: MdSlideToggleModule, + providers: [{provide: HAMMER_GESTURE_CONFIG, useClass: MdGestureConfig}] + }; + } +} diff --git a/src/lib/slider/slider.ts b/src/lib/slider/slider.ts index 3da982bb3aaa..625cde9013fe 100644 --- a/src/lib/slider/slider.ts +++ b/src/lib/slider/slider.ts @@ -1,5 +1,6 @@ import { NgModule, + ModuleWithProviders, Component, ElementRef, HostBinding, @@ -449,16 +450,20 @@ export class SliderRenderer { } } -/** @deprecated */ -export const MD_SLIDER_DIRECTIVES = [MdSlider]; - @NgModule({ imports: [FormsModule], - exports: MD_SLIDER_DIRECTIVES, - declarations: MD_SLIDER_DIRECTIVES, + exports: [MdSlider], + declarations: [MdSlider], providers: [ {provide: HAMMER_GESTURE_CONFIG, useClass: MdGestureConfig}, ], }) -export class MdSliderModule { } +export class MdSliderModule { + static forRoot(): ModuleWithProviders { + return { + ngModule: MdSliderModule, + providers: [{provide: HAMMER_GESTURE_CONFIG, useClass: MdGestureConfig}] + }; + } +} diff --git a/src/lib/tabs/tabs.ts b/src/lib/tabs/tabs.ts index 6875066b7c29..95415d019aea 100644 --- a/src/lib/tabs/tabs.ts +++ b/src/lib/tabs/tabs.ts @@ -232,13 +232,11 @@ export class MdTabGroup { } } -/** @deprecated */ -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], + // Don't export MdInkBar or MdTabLabelWrapper, as they are internal implementatino details. + exports: [MdTabGroup, MdTabLabel, MdTabContent, MdTab], + declarations: [MdTabGroup, MdTabLabel, MdTabContent, MdTab, MdInkBar, MdTabLabelWrapper], }) export class MdTabsModule { } diff --git a/src/lib/toolbar/toolbar.ts b/src/lib/toolbar/toolbar.ts index d597bf2ef5fb..d1dcf74fc27b 100644 --- a/src/lib/toolbar/toolbar.ts +++ b/src/lib/toolbar/toolbar.ts @@ -51,12 +51,9 @@ export class MdToolbar { } -/** @deprecated */ -export const MD_TOOLBAR_DIRECTIVES = [MdToolbar, MdToolbarRow]; - @NgModule({ - exports: MD_TOOLBAR_DIRECTIVES, - declarations: MD_TOOLBAR_DIRECTIVES, + exports: [MdToolbar, MdToolbarRow], + declarations: [MdToolbar, MdToolbarRow], }) export class MdToolbarModule { } diff --git a/src/lib/tooltip/tooltip.spec.ts b/src/lib/tooltip/tooltip.spec.ts index e34e1a54626d..d67089932ac8 100644 --- a/src/lib/tooltip/tooltip.spec.ts +++ b/src/lib/tooltip/tooltip.spec.ts @@ -11,7 +11,7 @@ describe('MdTooltip', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MdTooltipModule], + imports: [MdTooltipModule.forRoot()], declarations: [BasicTooltipDemo], providers: [ {provide: OverlayContainer, useFactory: () => { diff --git a/src/lib/tooltip/tooltip.ts b/src/lib/tooltip/tooltip.ts index 72d7c8702131..1ede574846e3 100644 --- a/src/lib/tooltip/tooltip.ts +++ b/src/lib/tooltip/tooltip.ts @@ -1,5 +1,6 @@ import { NgModule, + ModuleWithProviders, Component, Directive, Input, @@ -15,6 +16,7 @@ import { ComponentPortal, OverlayConnectionPosition, OriginConnectionPosition, + OVERLAY_PROVIDERS, } from '@angular2-material/core/core'; export type TooltipPosition = 'before' | 'after' | 'above' | 'below'; @@ -188,14 +190,18 @@ export class TooltipComponent { message: string; } -/** @deprecated */ -export const MD_TOOLTIP_DIRECTIVES = [MdTooltip]; - @NgModule({ imports: [OverlayModule], - exports: [MD_TOOLTIP_DIRECTIVES, TooltipComponent], - declarations: [MD_TOOLTIP_DIRECTIVES, TooltipComponent], + exports: [MdTooltip, TooltipComponent], + declarations: [MdTooltip, TooltipComponent], entryComponents: [TooltipComponent], }) -export class MdTooltipModule { } +export class MdTooltipModule { + static forRoot(): ModuleWithProviders { + return { + ngModule: MdTooltipModule, + providers: OVERLAY_PROVIDERS, + }; + } +} diff --git a/stylelint-config.json b/stylelint-config.json index a73ebc083944..e05233c03219 100644 --- a/stylelint-config.json +++ b/stylelint-config.json @@ -12,7 +12,7 @@ "number-leading-zero": "always", "number-no-trailing-zeros": true, - "number-zero-length-no-unit": true, + "length-zero-no-unit": true, "string-no-newline": true, "string-quotes": "single",