diff --git a/src/demo-app/a11y/a11y-module.ts b/src/demo-app/a11y/a11y-module.ts new file mode 100644 index 000000000000..98fa3a729c97 --- /dev/null +++ b/src/demo-app/a11y/a11y-module.ts @@ -0,0 +1,33 @@ +import {NgModule} from '@angular/core'; +import {CommonModule} from '@angular/common'; +import {RouterModule} from '@angular/router'; +import {ACCESSIBILITY_DEMO_ROUTES} from './routes'; +import {DemoMaterialModule} from '../demo-material-module'; +import {AccessibilityHome, AccessibilityDemo} from './a11y'; +import {ButtonAccessibilityDemo} from './button/button-a11y'; +import {CheckboxAccessibilityDemo} from './checkbox/checkbox-a11y'; + +@NgModule({ + imports: [ + RouterModule.forChild(ACCESSIBILITY_DEMO_ROUTES) + ], + exports: [ + RouterModule + ] +}) +export class AccessibilityRoutingModule {} + +@NgModule({ + imports: [ + CommonModule, + AccessibilityRoutingModule, + DemoMaterialModule, + ], + declarations: [ + AccessibilityDemo, + AccessibilityHome, + ButtonAccessibilityDemo, + CheckboxAccessibilityDemo, + ] +}) +export class AccessibilityDemoModule {} diff --git a/src/demo-app/a11y/a11y.html b/src/demo-app/a11y/a11y.html new file mode 100644 index 000000000000..065ddcc8381a --- /dev/null +++ b/src/demo-app/a11y/a11y.html @@ -0,0 +1,9 @@ +

Accessibility Demo

+ + + + diff --git a/src/demo-app/a11y/a11y.scss b/src/demo-app/a11y/a11y.scss new file mode 100644 index 000000000000..e8bce402896b --- /dev/null +++ b/src/demo-app/a11y/a11y.scss @@ -0,0 +1,22 @@ +body { + font-family: Roboto, 'Helvetica Neue', sans-serif; + + // Helps fonts on OSX looks more consistent with other systems + // Isn't currently in button styles due to performance concerns + * { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + + h1 { + font-size: 20px; + } + + ul, li { + list-style: none; + } + + nav a { + margin: 2px; + } +} diff --git a/src/demo-app/a11y/a11y.ts b/src/demo-app/a11y/a11y.ts new file mode 100644 index 000000000000..501a1b0b8e88 --- /dev/null +++ b/src/demo-app/a11y/a11y.ts @@ -0,0 +1,23 @@ +import {Component, ViewEncapsulation} from '@angular/core'; + +@Component({ + moduleId: module.id, + selector: 'accessibility-home', + template: `

Welcome to the accessibility demos for Angular Material!

`, +}) +export class AccessibilityHome {} + +@Component({ + moduleId: module.id, + selector: 'accessibility-demo', + templateUrl: 'a11y.html', + styleUrls: ['a11y.css'], + encapsulation: ViewEncapsulation.None, +}) +export class AccessibilityDemo { + navItems = [ + {name: 'Home', route: '.'}, + {name: 'Button', route: 'button'}, + {name: 'Checkbox', route: 'checkbox'}, + ]; +} diff --git a/src/demo-app/a11y/button/button-a11y.html b/src/demo-app/a11y/button/button-a11y.html new file mode 100644 index 000000000000..2650b1c38ab1 --- /dev/null +++ b/src/demo-app/a11y/button/button-a11y.html @@ -0,0 +1,31 @@ +
+
+

Button elements

+ + + + + +
+ +
+

Anchor elements

+ Google search + Google search + + check + + + check + + + check + +
+
diff --git a/src/demo-app/a11y/button/button-a11y.scss b/src/demo-app/a11y/button/button-a11y.scss new file mode 100644 index 000000000000..2a39d15c12aa --- /dev/null +++ b/src/demo-app/a11y/button/button-a11y.scss @@ -0,0 +1,18 @@ + +.demo-button { + button, a { + margin: 8px; + text-transform: uppercase; + } + + section { + display: flex; + align-items: center; + margin: 8px; + } + + p { + padding: 5px 15px; + } +} + diff --git a/src/demo-app/a11y/button/button-a11y.ts b/src/demo-app/a11y/button/button-a11y.ts new file mode 100644 index 000000000000..d2ff4d484d9b --- /dev/null +++ b/src/demo-app/a11y/button/button-a11y.ts @@ -0,0 +1,12 @@ +import {Component} from '@angular/core'; + + +@Component({ + moduleId: module.id, + selector: 'button-a11y', + templateUrl: 'button-a11y.html', + styleUrls: ['button-a11y.css'], +}) +export class ButtonAccessibilityDemo { + // TODO(tinayuangao): Add use cases +} diff --git a/src/demo-app/a11y/checkbox/checkbox-a11y.html b/src/demo-app/a11y/checkbox/checkbox-a11y.html new file mode 100644 index 000000000000..d5b8931fa9b8 --- /dev/null +++ b/src/demo-app/a11y/checkbox/checkbox-a11y.html @@ -0,0 +1 @@ +Checkbox Placeholder \ No newline at end of file diff --git a/src/demo-app/a11y/checkbox/checkbox-a11y.scss b/src/demo-app/a11y/checkbox/checkbox-a11y.scss new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/src/demo-app/a11y/checkbox/checkbox-a11y.ts b/src/demo-app/a11y/checkbox/checkbox-a11y.ts new file mode 100644 index 000000000000..b860479e1cde --- /dev/null +++ b/src/demo-app/a11y/checkbox/checkbox-a11y.ts @@ -0,0 +1,12 @@ +import {Component} from '@angular/core'; + + +@Component({ + moduleId: module.id, + selector: 'checkbox-a11y', + templateUrl: 'checkbox-a11y.html', + styleUrls: ['checkbox-a11y.css'], +}) +export class CheckboxAccessibilityDemo { + // TODO(tinayuangao): Add use cases +} diff --git a/src/demo-app/a11y/routes.ts b/src/demo-app/a11y/routes.ts new file mode 100644 index 000000000000..a934103399be --- /dev/null +++ b/src/demo-app/a11y/routes.ts @@ -0,0 +1,10 @@ +import {Routes} from '@angular/router'; +import {ButtonAccessibilityDemo} from './button/button-a11y'; +import {CheckboxAccessibilityDemo} from './checkbox/checkbox-a11y'; +import {AccessibilityHome} from './a11y'; + +export const ACCESSIBILITY_DEMO_ROUTES: Routes = [ + {path: '', component: AccessibilityHome}, + {path: 'button', component: ButtonAccessibilityDemo}, + {path: 'checkbox', component: CheckboxAccessibilityDemo}, +]; diff --git a/src/demo-app/demo-app-module.ts b/src/demo-app/demo-app-module.ts index 13417071ff21..b0d3e33cf61b 100644 --- a/src/demo-app/demo-app-module.ts +++ b/src/demo-app/demo-app-module.ts @@ -1,208 +1,35 @@ import {ApplicationRef, NgModule} from '@angular/core'; import {BrowserModule} from '@angular/platform-browser'; import {HttpModule} from '@angular/http'; -import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {RouterModule} from '@angular/router'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; -import {DemoApp, DemoAppOnPush, Home} from './demo-app/demo-app'; -import {DEMO_APP_ROUTES} from './demo-app/routes'; -import {ProgressBarDemo} from './progress-bar/progress-bar-demo'; -import {ContentElementDialog, DialogDemo, IFrameDialog, JazzDialog} from './dialog/dialog-demo'; -import {RippleDemo} from './ripple/ripple-demo'; -import {IconDemo} from './icon/icon-demo'; -import {GesturesDemo} from './gestures/gestures-demo'; -import {CardDemo} from './card/card-demo'; -import {ChipsDemo} from './chips/chips-demo'; -import {RadioDemo} from './radio/radio-demo'; -import {ButtonToggleDemo} from './button-toggle/button-toggle-demo'; -import {ProgressSpinnerDemo} from './progress-spinner/progress-spinner-demo'; -import {TooltipDemo} from './tooltip/tooltip-demo'; -import {ListDemo} from './list/list-demo'; -import {BaselineDemo} from './baseline/baseline-demo'; -import {GridListDemo} from './grid-list/grid-list-demo'; -import {LiveAnnouncerDemo} from './live-announcer/live-announcer-demo'; -import {OverlayDemo, RotiniPanel, SpagettiPanel} from './overlay/overlay-demo'; -import {SlideToggleDemo} from './slide-toggle/slide-toggle-demo'; -import {ToolbarDemo} from './toolbar/toolbar-demo'; -import {ButtonDemo} from './button/button-demo'; -import {CheckboxDemo, MdCheckboxDemoNestedChecklist} from './checkbox/checkbox-demo'; -import {SelectDemo} from './select/select-demo'; -import {SliderDemo} from './slider/slider-demo'; -import {SidenavDemo} from './sidenav/sidenav-demo'; -import {SnackBarDemo} from './snack-bar/snack-bar-demo'; -import {PortalDemo, ScienceJoke} from './portal/portal-demo'; -import {MenuDemo} from './menu/menu-demo'; -import {FoggyTabContent, RainyTabContent, SunnyTabContent, TabsDemo} from './tabs/tabs-demo'; -import {PlatformDemo} from './platform/platform-demo'; -import {AutocompleteDemo} from './autocomplete/autocomplete-demo'; -import {InputDemo} from './input/input-demo'; -import {StyleDemo} from './style/style-demo'; -import {TableDemo} from './table/table-demo'; -import {PeopleDatabase} from './table/people-database'; -import {DatepickerDemo} from './datepicker/datepicker-demo'; -import {TypographyDemo} from './typography/typography-demo'; -import {ExpansionDemo} from './expansion/expansion-demo'; -import { - FullscreenOverlayContainer, - MdAutocompleteModule, - MdButtonModule, - MdButtonToggleModule, - MdCardModule, - MdCheckboxModule, - MdChipsModule, - MdCoreModule, - MdTableModule, - MdDatepickerModule, - MdDialogModule, - MdExpansionModule, - MdGridListModule, - MdIconModule, - MdInputModule, - MdListModule, - MdMenuModule, - MdNativeDateModule, - MdPaginatorModule, - MdProgressBarModule, - MdProgressSpinnerModule, - MdRadioModule, - MdRippleModule, - MdSelectModule, - MdSidenavModule, - MdSliderModule, - MdSlideToggleModule, - MdSnackBarModule, - MdSortModule, - MdTabsModule, - MdToolbarModule, - MdTooltipModule, - OverlayContainer, - StyleModule -} from '@angular/material'; -import {CdkTableModule} from '@angular/cdk/table'; -import {TableHeaderDemo} from './table/table-header-demo'; - -/** - * NgModule that includes all Material modules that are required to serve the demo-app. - */ -@NgModule({ - exports: [ - MdAutocompleteModule, - MdButtonModule, - MdButtonToggleModule, - MdCardModule, - MdCheckboxModule, - MdChipsModule, - MdTableModule, - MdDatepickerModule, - MdDialogModule, - MdExpansionModule, - MdGridListModule, - MdIconModule, - MdInputModule, - MdListModule, - MdMenuModule, - MdCoreModule, - MdPaginatorModule, - MdProgressBarModule, - MdProgressSpinnerModule, - MdRadioModule, - MdRippleModule, - MdSelectModule, - MdSidenavModule, - MdSlideToggleModule, - MdSliderModule, - MdSnackBarModule, - MdSortModule, - MdTabsModule, - MdToolbarModule, - MdTooltipModule, - MdNativeDateModule, - CdkTableModule, - StyleModule - ] -}) -export class DemoMaterialModule {} +import {ALL_ROUTES} from './demo-app/routes'; +import {EntryApp} from './demo-app/demo-app'; +import {DemoModule} from './demo-app/demo-module'; +import {AccessibilityDemoModule} from './a11y/a11y-module'; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, - FormsModule, HttpModule, - ReactiveFormsModule, - RouterModule.forRoot(DEMO_APP_ROUTES), - DemoMaterialModule, + DemoModule, + AccessibilityDemoModule, + RouterModule.forRoot(ALL_ROUTES), ], declarations: [ - AutocompleteDemo, - BaselineDemo, - ButtonDemo, - ButtonToggleDemo, - CardDemo, - ChipsDemo, - CheckboxDemo, - DatepickerDemo, - DemoApp, - DemoAppOnPush, - DialogDemo, - GesturesDemo, - GridListDemo, - Home, - IconDemo, - InputDemo, - JazzDialog, - ContentElementDialog, - IFrameDialog, - ListDemo, - LiveAnnouncerDemo, - MdCheckboxDemoNestedChecklist, - MenuDemo, - SnackBarDemo, - OverlayDemo, - PortalDemo, - ProgressBarDemo, - ProgressSpinnerDemo, - RadioDemo, - RippleDemo, - RotiniPanel, - ScienceJoke, - SelectDemo, - SidenavDemo, - SliderDemo, - SlideToggleDemo, - SpagettiPanel, - StyleDemo, - TableHeaderDemo, - ToolbarDemo, - TooltipDemo, - TableDemo, - TabsDemo, - SunnyTabContent, - RainyTabContent, - FoggyTabContent, - PlatformDemo, - TypographyDemo, - ExpansionDemo, - ], - providers: [ - {provide: OverlayContainer, useClass: FullscreenOverlayContainer}, - PeopleDatabase + EntryApp, ], entryComponents: [ - DemoApp, - JazzDialog, - ContentElementDialog, - IFrameDialog, - RotiniPanel, - ScienceJoke, - SpagettiPanel, + EntryApp, ], }) export class DemoAppModule { constructor(private _appRef: ApplicationRef) { } ngDoBootstrap() { - this._appRef.bootstrap(DemoApp); + this._appRef.bootstrap(EntryApp); } } + diff --git a/src/demo-app/demo-app/demo-app.html b/src/demo-app/demo-app/demo-app.html index 96d76215bd72..29fc635f80f7 100644 --- a/src/demo-app/demo-app/demo-app.html +++ b/src/demo-app/demo-app/demo-app.html @@ -12,7 +12,7 @@ + [routerLink]="['/baseline']"> Baseline diff --git a/src/demo-app/demo-app/demo-app.ts b/src/demo-app/demo-app/demo-app.ts index 3f422c3ccd5c..83c11335c806 100644 --- a/src/demo-app/demo-app/demo-app.ts +++ b/src/demo-app/demo-app/demo-app.ts @@ -2,6 +2,23 @@ import {Component, ViewEncapsulation, ElementRef, ChangeDetectionStrategy} from const changeDetectionKey = 'mdDemoChangeDetection'; +/** + * The entry app for demo site. Routes under `accessibility` will use AccessibilityDemo component, + * while other demos will use `DemoApp` component. Since DemoApp and AccessibilityDemo use + * different templates (DemoApp has toolbar and sidenav), we use this EntryApp in index.html + * as our entry point. + */ +@Component({ + moduleId: module.id, + selector: 'entry-app', + template: '', + encapsulation: ViewEncapsulation.None, +}) +export class EntryApp {} + +/** + * Home component for welcome message in DemoApp. + */ @Component({ selector: 'home', template: ` @@ -20,6 +37,9 @@ export class Home {} }) export class DemoAppOnPush {} +/** + * DemoApp with toolbar and sidenav. + */ @Component({ moduleId: module.id, selector: 'demo-app', @@ -34,40 +54,40 @@ export class DemoApp { dark = false; changeDetectionStrategy: string; navItems = [ - {name: 'Autocomplete', route: 'autocomplete'}, - {name: 'Button', route: 'button'}, - {name: 'Button Toggle', route: 'button-toggle'}, - {name: 'Card', route: 'card'}, - {name: 'Chips', route: 'chips'}, - {name: 'Checkbox', route: 'checkbox'}, - {name: 'Datepicker', route: 'datepicker'}, - {name: 'Dialog', route: 'dialog'}, - {name: 'Expansion Panel', route: 'expansion'}, - {name: 'Gestures', route: 'gestures'}, - {name: 'Grid List', route: 'grid-list'}, - {name: 'Icon', route: 'icon'}, - {name: 'Input', route: 'input'}, - {name: 'List', route: 'list'}, - {name: 'Menu', route: 'menu'}, - {name: 'Live Announcer', route: 'live-announcer'}, - {name: 'Overlay', route: 'overlay'}, - {name: 'Portal', route: 'portal'}, - {name: 'Progress Bar', route: 'progress-bar'}, - {name: 'Progress Spinner', route: 'progress-spinner'}, - {name: 'Radio', route: 'radio'}, - {name: 'Ripple', route: 'ripple'}, - {name: 'Select', route: 'select'}, - {name: 'Sidenav', route: 'sidenav'}, - {name: 'Slider', route: 'slider'}, - {name: 'Slide Toggle', route: 'slide-toggle'}, - {name: 'Snack Bar', route: 'snack-bar'}, - {name: 'Table', route: 'table'}, - {name: 'Tabs', route: 'tabs'}, - {name: 'Toolbar', route: 'toolbar'}, - {name: 'Tooltip', route: 'tooltip'}, - {name: 'Platform', route: 'platform'}, - {name: 'Style', route: 'style'}, - {name: 'Typography', route: 'typography'} + {name: 'Autocomplete', route: '/autocomplete'}, + {name: 'Button', route: '/button'}, + {name: 'Button Toggle', route: '/button-toggle'}, + {name: 'Card', route: '/card'}, + {name: 'Chips', route: '/chips'}, + {name: 'Checkbox', route: '/checkbox'}, + {name: 'Datepicker', route: '/datepicker'}, + {name: 'Dialog', route: '/dialog'}, + {name: 'Expansion Panel', route: '/expansion'}, + {name: 'Gestures', route: '/gestures'}, + {name: 'Grid List', route: '/grid-list'}, + {name: 'Icon', route: '/icon'}, + {name: 'Input', route: '/input'}, + {name: 'List', route: '/list'}, + {name: 'Menu', route: '/menu'}, + {name: 'Live Announcer', route: '/live-announcer'}, + {name: 'Overlay', route: '/overlay'}, + {name: 'Portal', route: '/portal'}, + {name: 'Progress Bar', route: '/progress-bar'}, + {name: 'Progress Spinner', route: '/progress-spinner'}, + {name: 'Radio', route: '/radio'}, + {name: 'Ripple', route: '/ripple'}, + {name: 'Select', route: '/select'}, + {name: 'Sidenav', route: '/sidenav'}, + {name: 'Slider', route: '/slider'}, + {name: 'Slide Toggle', route: '/slide-toggle'}, + {name: 'Snack Bar', route: '/snack-bar'}, + {name: 'Table', route: '/table'}, + {name: 'Tabs', route: '/tabs'}, + {name: 'Toolbar', route: '/toolbar'}, + {name: 'Tooltip', route: '/tooltip'}, + {name: 'Platform', route: '/platform'}, + {name: 'Style', route: '/style'}, + {name: 'Typography', route: '/typography'} ]; constructor(private _element: ElementRef) { diff --git a/src/demo-app/demo-app/demo-module.ts b/src/demo-app/demo-app/demo-module.ts new file mode 100644 index 000000000000..10ff909d15ab --- /dev/null +++ b/src/demo-app/demo-app/demo-module.ts @@ -0,0 +1,123 @@ +import {NgModule} from '@angular/core'; +import {CommonModule} from '@angular/common'; +import {FormsModule, ReactiveFormsModule} from '@angular/forms'; +import {RouterModule} from '@angular/router'; +import {DemoApp, DemoAppOnPush, Home} from './demo-app'; +import {DEMO_APP_ROUTES} from './routes'; +import {ProgressBarDemo} from '../progress-bar/progress-bar-demo'; +import {ContentElementDialog, DialogDemo, IFrameDialog, JazzDialog} from '../dialog/dialog-demo'; +import {RippleDemo} from '../ripple/ripple-demo'; +import {IconDemo} from '../icon/icon-demo'; +import {GesturesDemo} from '../gestures/gestures-demo'; +import {CardDemo} from '../card/card-demo'; +import {ChipsDemo} from '../chips/chips-demo'; +import {RadioDemo} from '../radio/radio-demo'; +import {ButtonToggleDemo} from '../button-toggle/button-toggle-demo'; +import {ProgressSpinnerDemo} from '../progress-spinner/progress-spinner-demo'; +import {TooltipDemo} from '../tooltip/tooltip-demo'; +import {ListDemo} from '../list/list-demo'; +import {BaselineDemo} from '../baseline/baseline-demo'; +import {GridListDemo} from '../grid-list/grid-list-demo'; +import {LiveAnnouncerDemo} from '../live-announcer/live-announcer-demo'; +import {OverlayDemo, RotiniPanel, SpagettiPanel} from '../overlay/overlay-demo'; +import {SlideToggleDemo} from '../slide-toggle/slide-toggle-demo'; +import {ToolbarDemo} from '../toolbar/toolbar-demo'; +import {ButtonDemo} from '../button/button-demo'; +import {CheckboxDemo, MdCheckboxDemoNestedChecklist} from '../checkbox/checkbox-demo'; +import {SelectDemo} from '../select/select-demo'; +import {SliderDemo} from '../slider/slider-demo'; +import {SidenavDemo} from '../sidenav/sidenav-demo'; +import {SnackBarDemo} from '../snack-bar/snack-bar-demo'; +import {PortalDemo, ScienceJoke} from '../portal/portal-demo'; +import {MenuDemo} from '../menu/menu-demo'; +import {FoggyTabContent, RainyTabContent, SunnyTabContent, TabsDemo} from '../tabs/tabs-demo'; +import {PlatformDemo} from '../platform/platform-demo'; +import {AutocompleteDemo} from '../autocomplete/autocomplete-demo'; +import {InputDemo} from '../input/input-demo'; +import {StyleDemo} from '../style/style-demo'; +import {TableDemo} from '../table/table-demo'; +import {PeopleDatabase} from '../table/people-database'; +import {DatepickerDemo} from '../datepicker/datepicker-demo'; +import {TypographyDemo} from '../typography/typography-demo'; +import {ExpansionDemo} from '../expansion/expansion-demo'; +import {DemoMaterialModule} from '../demo-material-module'; +import { + FullscreenOverlayContainer, + OverlayContainer, +} from '@angular/material'; +import {TableHeaderDemo} from '../table/table-header-demo'; + +@NgModule({ + imports: [ + CommonModule, + FormsModule, + ReactiveFormsModule, + RouterModule.forChild(DEMO_APP_ROUTES), + DemoMaterialModule, + ], + declarations: [ + AutocompleteDemo, + BaselineDemo, + ButtonDemo, + ButtonToggleDemo, + CardDemo, + ChipsDemo, + CheckboxDemo, + DatepickerDemo, + DemoApp, + DemoAppOnPush, + DialogDemo, + GesturesDemo, + GridListDemo, + Home, + IconDemo, + InputDemo, + JazzDialog, + ContentElementDialog, + IFrameDialog, + ListDemo, + LiveAnnouncerDemo, + MdCheckboxDemoNestedChecklist, + MenuDemo, + SnackBarDemo, + OverlayDemo, + PortalDemo, + ProgressBarDemo, + ProgressSpinnerDemo, + RadioDemo, + RippleDemo, + RotiniPanel, + ScienceJoke, + SelectDemo, + SidenavDemo, + SliderDemo, + SlideToggleDemo, + SpagettiPanel, + StyleDemo, + TableHeaderDemo, + ToolbarDemo, + TooltipDemo, + TableDemo, + TabsDemo, + SunnyTabContent, + RainyTabContent, + FoggyTabContent, + PlatformDemo, + TypographyDemo, + ExpansionDemo, + ], + providers: [ + {provide: OverlayContainer, useClass: FullscreenOverlayContainer}, + PeopleDatabase + ], + entryComponents: [ + DemoApp, + JazzDialog, + ContentElementDialog, + IFrameDialog, + RotiniPanel, + ScienceJoke, + SpagettiPanel, + ], +}) +export class DemoModule {} diff --git a/src/demo-app/demo-app/routes.ts b/src/demo-app/demo-app/routes.ts index 875dc907e604..ac5d752b0f5f 100644 --- a/src/demo-app/demo-app/routes.ts +++ b/src/demo-app/demo-app/routes.ts @@ -36,42 +36,52 @@ import {DatepickerDemo} from '../datepicker/datepicker-demo'; import {TableDemo} from '../table/table-demo'; import {TypographyDemo} from '../typography/typography-demo'; import {ExpansionDemo} from '../expansion/expansion-demo'; +import {DemoApp} from './demo-app'; +import {AccessibilityDemo} from '../a11y/a11y'; +import {ACCESSIBILITY_DEMO_ROUTES} from '../a11y/routes'; export const DEMO_APP_ROUTES: Routes = [ - {path: '', component: Home}, - {path: 'autocomplete', component: AutocompleteDemo}, - {path: 'button', component: ButtonDemo}, - {path: 'card', component: CardDemo}, - {path: 'chips', component: ChipsDemo}, - {path: 'table', component: TableDemo}, - {path: 'datepicker', component: DatepickerDemo}, - {path: 'radio', component: RadioDemo}, - {path: 'select', component: SelectDemo}, - {path: 'sidenav', component: SidenavDemo}, - {path: 'slide-toggle', component: SlideToggleDemo}, - {path: 'slider', component: SliderDemo}, - {path: 'progress-spinner', component: ProgressSpinnerDemo}, - {path: 'progress-bar', component: ProgressBarDemo}, - {path: 'portal', component: PortalDemo}, - {path: 'overlay', component: OverlayDemo}, - {path: 'checkbox', component: CheckboxDemo}, - {path: 'input', component: InputDemo}, - {path: 'toolbar', component: ToolbarDemo}, - {path: 'icon', component: IconDemo}, - {path: 'list', component: ListDemo}, - {path: 'menu', component: MenuDemo}, - {path: 'live-announcer', component: LiveAnnouncerDemo}, - {path: 'gestures', component: GesturesDemo}, - {path: 'grid-list', component: GridListDemo}, - {path: 'tabs', component: TabsDemo, children: TABS_DEMO_ROUTES}, - {path: 'button-toggle', component: ButtonToggleDemo}, - {path: 'baseline', component: BaselineDemo}, - {path: 'ripple', component: RippleDemo}, - {path: 'dialog', component: DialogDemo}, - {path: 'tooltip', component: TooltipDemo}, - {path: 'snack-bar', component: SnackBarDemo}, - {path: 'platform', component: PlatformDemo}, - {path: 'style', component: StyleDemo}, - {path: 'typography', component: TypographyDemo}, - {path: 'expansion', component: ExpansionDemo}, + {path: '', component: DemoApp, children: [ + {path: '', component: Home}, + {path: 'autocomplete', component: AutocompleteDemo}, + {path: 'button', component: ButtonDemo}, + {path: 'card', component: CardDemo}, + {path: 'chips', component: ChipsDemo}, + {path: 'table', component: TableDemo}, + {path: 'datepicker', component: DatepickerDemo}, + {path: 'radio', component: RadioDemo}, + {path: 'select', component: SelectDemo}, + {path: 'sidenav', component: SidenavDemo}, + {path: 'slide-toggle', component: SlideToggleDemo}, + {path: 'slider', component: SliderDemo}, + {path: 'progress-spinner', component: ProgressSpinnerDemo}, + {path: 'progress-bar', component: ProgressBarDemo}, + {path: 'portal', component: PortalDemo}, + {path: 'overlay', component: OverlayDemo}, + {path: 'checkbox', component: CheckboxDemo}, + {path: 'input', component: InputDemo}, + {path: 'toolbar', component: ToolbarDemo}, + {path: 'icon', component: IconDemo}, + {path: 'list', component: ListDemo}, + {path: 'menu', component: MenuDemo}, + {path: 'live-announcer', component: LiveAnnouncerDemo}, + {path: 'gestures', component: GesturesDemo}, + {path: 'grid-list', component: GridListDemo}, + {path: 'tabs', component: TabsDemo, children: TABS_DEMO_ROUTES}, + {path: 'button-toggle', component: ButtonToggleDemo}, + {path: 'baseline', component: BaselineDemo}, + {path: 'ripple', component: RippleDemo}, + {path: 'dialog', component: DialogDemo}, + {path: 'tooltip', component: TooltipDemo}, + {path: 'snack-bar', component: SnackBarDemo}, + {path: 'platform', component: PlatformDemo}, + {path: 'style', component: StyleDemo}, + {path: 'typography', component: TypographyDemo}, + {path: 'expansion', component: ExpansionDemo}, + ]} +]; + +export const ALL_ROUTES: Routes = [ + {path: '', component: DemoApp, children: DEMO_APP_ROUTES}, + {path: 'accessibility', component: AccessibilityDemo, children: ACCESSIBILITY_DEMO_ROUTES}, ]; diff --git a/src/demo-app/demo-material-module.ts b/src/demo-app/demo-material-module.ts new file mode 100644 index 000000000000..15f17c50c210 --- /dev/null +++ b/src/demo-app/demo-material-module.ts @@ -0,0 +1,78 @@ +import {NgModule} from '@angular/core'; +import { + MdAutocompleteModule, + MdButtonModule, + MdButtonToggleModule, + MdCardModule, + MdCheckboxModule, + MdChipsModule, + MdCoreModule, + MdTableModule, + MdDatepickerModule, + MdDialogModule, + MdExpansionModule, + MdGridListModule, + MdIconModule, + MdInputModule, + MdListModule, + MdMenuModule, + MdNativeDateModule, + MdPaginatorModule, + MdProgressBarModule, + MdProgressSpinnerModule, + MdRadioModule, + MdRippleModule, + MdSelectModule, + MdSidenavModule, + MdSliderModule, + MdSlideToggleModule, + MdSnackBarModule, + MdSortModule, + MdTabsModule, + MdToolbarModule, + MdTooltipModule, + StyleModule +} from '@angular/material'; +import {CdkTableModule} from '@angular/cdk/table'; + +/** + * NgModule that includes all Material modules that are required to serve the demo-app. + */ +@NgModule({ + exports: [ + MdAutocompleteModule, + MdButtonModule, + MdButtonToggleModule, + MdCardModule, + MdCheckboxModule, + MdChipsModule, + MdTableModule, + MdDatepickerModule, + MdDialogModule, + MdExpansionModule, + MdGridListModule, + MdIconModule, + MdInputModule, + MdListModule, + MdMenuModule, + MdCoreModule, + MdPaginatorModule, + MdProgressBarModule, + MdProgressSpinnerModule, + MdRadioModule, + MdRippleModule, + MdSelectModule, + MdSidenavModule, + MdSlideToggleModule, + MdSliderModule, + MdSnackBarModule, + MdSortModule, + MdTabsModule, + MdToolbarModule, + MdTooltipModule, + MdNativeDateModule, + CdkTableModule, + StyleModule + ] +}) +export class DemoMaterialModule {} diff --git a/src/demo-app/index.html b/src/demo-app/index.html index 6d48270d3ef0..706848123e5d 100644 --- a/src/demo-app/index.html +++ b/src/demo-app/index.html @@ -15,7 +15,7 @@ - Loading... + Loading... diff --git a/src/lib/table/cell.ts b/src/lib/table/cell.ts index 2ae636c97d50..3578ab6ccb7c 100644 --- a/src/lib/table/cell.ts +++ b/src/lib/table/cell.ts @@ -7,7 +7,13 @@ */ import {Directive, ElementRef, Input, Renderer2} from '@angular/core'; -import {CdkCell, CdkCellDef, CdkColumnDef, CdkHeaderCell, CdkHeaderCellDef} from '@angular/cdk/table'; +import { + CdkCell, + CdkCellDef, + CdkColumnDef, + CdkHeaderCell, + CdkHeaderCellDef +} from '@angular/cdk/table'; /** Workaround for https://github.com/angular/angular/issues/17849 */ export const _MdCellDef = CdkCellDef; diff --git a/src/lib/table/row.ts b/src/lib/table/row.ts index 9d9beff84fea..913a861a2eb6 100644 --- a/src/lib/table/row.ts +++ b/src/lib/table/row.ts @@ -7,7 +7,13 @@ */ import {ChangeDetectionStrategy, Component, Directive} from '@angular/core'; -import {CdkHeaderRow, CdkRow, CDK_ROW_TEMPLATE, CdkRowDef, CdkHeaderRowDef} from '@angular/cdk/table'; +import { + CdkHeaderRow, + CdkRow, + CDK_ROW_TEMPLATE, + CdkRowDef, + CdkHeaderRowDef +} from '@angular/cdk/table'; /** Workaround for https://github.com/angular/angular/issues/17849 */ export const _MdHeaderRowDef = CdkHeaderRowDef;