diff --git a/src/material-examples/autocomplete-overview/autocomplete-overview-example.ts b/src/material-examples/autocomplete-overview/autocomplete-overview-example.ts index b9616c8d9379..0031b0fa9523 100644 --- a/src/material-examples/autocomplete-overview/autocomplete-overview-example.ts +++ b/src/material-examples/autocomplete-overview/autocomplete-overview-example.ts @@ -4,6 +4,9 @@ import {FormControl} from '@angular/forms'; import 'rxjs/add/operator/startWith'; import 'rxjs/add/operator/map'; +/** + * @title Basic autocomplete + */ @Component({ selector: 'autocomplete-overview-example', templateUrl: 'autocomplete-overview-example.html', diff --git a/src/material-examples/button-overview/button-overview-example.ts b/src/material-examples/button-overview/button-overview-example.ts index d7839b7a7051..9dbde6873eba 100644 --- a/src/material-examples/button-overview/button-overview-example.ts +++ b/src/material-examples/button-overview/button-overview-example.ts @@ -1,6 +1,8 @@ import {Component} from '@angular/core'; - +/** + * @title Basic buttons + */ @Component({ selector: 'button-overview-example', templateUrl: 'button-overview-example.html', diff --git a/src/material-examples/button-toggle-exclusive/button-toggle-exclusive-example.ts b/src/material-examples/button-toggle-exclusive/button-toggle-exclusive-example.ts index 9a505de5c3ce..efe1c7ccc4a0 100644 --- a/src/material-examples/button-toggle-exclusive/button-toggle-exclusive-example.ts +++ b/src/material-examples/button-toggle-exclusive/button-toggle-exclusive-example.ts @@ -1,6 +1,8 @@ import {Component} from '@angular/core'; - +/** + * @title Exclusive selection + */ @Component({ selector: 'button-toggle-exclusive-example', templateUrl: 'button-toggle-exclusive-example.html', diff --git a/src/material-examples/button-toggle-overview/button-toggle-overview-example.ts b/src/material-examples/button-toggle-overview/button-toggle-overview-example.ts index 55fc47168564..c8afb4373a25 100644 --- a/src/material-examples/button-toggle-overview/button-toggle-overview-example.ts +++ b/src/material-examples/button-toggle-overview/button-toggle-overview-example.ts @@ -1,6 +1,8 @@ import {Component} from '@angular/core'; - +/** + * @title Basic button-toggles + */ @Component({ selector: 'button-toggle-overview-example', templateUrl: 'button-toggle-overview-example.html', diff --git a/src/material-examples/button-types/button-types-example.ts b/src/material-examples/button-types/button-types-example.ts index e0becac38f6c..525729b2cc08 100644 --- a/src/material-examples/button-types/button-types-example.ts +++ b/src/material-examples/button-types/button-types-example.ts @@ -1,6 +1,8 @@ import {Component} from '@angular/core'; - +/** + * @title Button varieties + */ @Component({ selector: 'button-types-example', templateUrl: 'button-types-example.html', diff --git a/src/material-examples/card-fancy/card-fancy-example.ts b/src/material-examples/card-fancy/card-fancy-example.ts index 0b0458c089c8..92826ad08569 100644 --- a/src/material-examples/card-fancy/card-fancy-example.ts +++ b/src/material-examples/card-fancy/card-fancy-example.ts @@ -1,6 +1,8 @@ import {Component} from '@angular/core'; - +/** + * @title Card with multiple sections + */ @Component({ selector: 'card-fancy-example', templateUrl: 'card-fancy-example.html', diff --git a/src/material-examples/card-overview/card-overview-example.ts b/src/material-examples/card-overview/card-overview-example.ts index 09ea32a3a50b..f87f9401fe72 100644 --- a/src/material-examples/card-overview/card-overview-example.ts +++ b/src/material-examples/card-overview/card-overview-example.ts @@ -1,6 +1,8 @@ import {Component} from '@angular/core'; - +/** + * @title Basic cards + */ @Component({ selector: 'card-overview-example', templateUrl: 'card-overview-example.html', diff --git a/src/material-examples/cdk-table-basic/cdk-table-basic-example.ts b/src/material-examples/cdk-table-basic/cdk-table-basic-example.ts index f9b183f9e348..26104dc1f951 100644 --- a/src/material-examples/cdk-table-basic/cdk-table-basic-example.ts +++ b/src/material-examples/cdk-table-basic/cdk-table-basic-example.ts @@ -6,6 +6,9 @@ import 'rxjs/add/operator/startWith'; import 'rxjs/add/observable/merge'; import 'rxjs/add/operator/map'; +/** + * @title Basic CDK data-table + */ @Component({ selector: 'cdk-table-basic-example', styleUrls: ['cdk-table-basic-example.css'], diff --git a/src/material-examples/checkbox-configurable/checkbox-configurable-example.ts b/src/material-examples/checkbox-configurable/checkbox-configurable-example.ts index eefb5db799e2..f4bdf570a31f 100644 --- a/src/material-examples/checkbox-configurable/checkbox-configurable-example.ts +++ b/src/material-examples/checkbox-configurable/checkbox-configurable-example.ts @@ -1,6 +1,8 @@ import {Component} from '@angular/core'; - +/** + * @title Configurable checkbox + */ @Component({ selector: 'checkbox-configurable-example', templateUrl: 'checkbox-configurable-example.html', diff --git a/src/material-examples/checkbox-overview/checkbox-overview-example.ts b/src/material-examples/checkbox-overview/checkbox-overview-example.ts index 6df17b220d42..2c8225824eba 100644 --- a/src/material-examples/checkbox-overview/checkbox-overview-example.ts +++ b/src/material-examples/checkbox-overview/checkbox-overview-example.ts @@ -1,6 +1,8 @@ import {Component} from '@angular/core'; - +/** + * @title Basic checkboxes + */ @Component({ selector: 'checkbox-overview-example', templateUrl: 'checkbox-overview-example.html', diff --git a/src/material-examples/chips-overview/chips-overview-example.ts b/src/material-examples/chips-overview/chips-overview-example.ts index 83e0fd4da4ce..5db3ceb1ed66 100644 --- a/src/material-examples/chips-overview/chips-overview-example.ts +++ b/src/material-examples/chips-overview/chips-overview-example.ts @@ -1,6 +1,8 @@ import {Component} from '@angular/core'; - +/** + * @title Basic chips + */ @Component({ selector: 'chips-overview-example', templateUrl: 'chips-overview-example.html', diff --git a/src/material-examples/chips-stacked/chips-stacked-example.ts b/src/material-examples/chips-stacked/chips-stacked-example.ts index 278332901591..816c226494b9 100644 --- a/src/material-examples/chips-stacked/chips-stacked-example.ts +++ b/src/material-examples/chips-stacked/chips-stacked-example.ts @@ -1,6 +1,8 @@ import {Component} from '@angular/core'; - +/** + * @title Stacked chips + */ @Component({ selector: 'chips-stacked-example', templateUrl: 'chips-stacked-example.html', diff --git a/src/material-examples/datepicker-api/datepicker-api-example.ts b/src/material-examples/datepicker-api/datepicker-api-example.ts index 6eeea21efb16..cf4ce8ad6778 100644 --- a/src/material-examples/datepicker-api/datepicker-api-example.ts +++ b/src/material-examples/datepicker-api/datepicker-api-example.ts @@ -1,5 +1,8 @@ import {Component} from '@angular/core'; +/** + * @title Datepicker API + */ @Component({ selector: 'datepicker-api-example', templateUrl: 'datepicker-api-example.html', diff --git a/src/material-examples/datepicker-filter/datepicker-filter-example.ts b/src/material-examples/datepicker-filter/datepicker-filter-example.ts index 94c72d000d8b..a2fe6d13f86b 100644 --- a/src/material-examples/datepicker-filter/datepicker-filter-example.ts +++ b/src/material-examples/datepicker-filter/datepicker-filter-example.ts @@ -1,5 +1,8 @@ import {Component} from '@angular/core'; +/** + * @title Datepicker Filter + */ @Component({ selector: 'datepicker-filter-example', templateUrl: 'datepicker-filter-example.html', diff --git a/src/material-examples/datepicker-min-max/datepicker-min-max-example.ts b/src/material-examples/datepicker-min-max/datepicker-min-max-example.ts index cee80389f85e..fea707bb1fcb 100644 --- a/src/material-examples/datepicker-min-max/datepicker-min-max-example.ts +++ b/src/material-examples/datepicker-min-max/datepicker-min-max-example.ts @@ -1,5 +1,8 @@ import {Component} from '@angular/core'; +/** + * @title Datepicker Min Max + */ @Component({ selector: 'datepicker-min-max-example', templateUrl: 'datepicker-min-max-example.html', diff --git a/src/material-examples/datepicker-overview/datepicker-overview-example.ts b/src/material-examples/datepicker-overview/datepicker-overview-example.ts index ffc7464af1d1..b9dde7ca1d3b 100644 --- a/src/material-examples/datepicker-overview/datepicker-overview-example.ts +++ b/src/material-examples/datepicker-overview/datepicker-overview-example.ts @@ -1,6 +1,8 @@ import {Component} from '@angular/core'; - +/** + * @title Basic datepicker + */ @Component({ selector: 'datepicker-overview-example', templateUrl: 'datepicker-overview-example.html', diff --git a/src/material-examples/datepicker-start-view/datepicker-start-view-example.ts b/src/material-examples/datepicker-start-view/datepicker-start-view-example.ts index 89054330b155..cb76dba2a7a2 100644 --- a/src/material-examples/datepicker-start-view/datepicker-start-view-example.ts +++ b/src/material-examples/datepicker-start-view/datepicker-start-view-example.ts @@ -1,5 +1,8 @@ import {Component} from '@angular/core'; +/** + * @title Datepicker start date + */ @Component({ selector: 'datepicker-start-view-example', templateUrl: 'datepicker-start-view-example.html', diff --git a/src/material-examples/datepicker-touch/datepicker-touch-example.ts b/src/material-examples/datepicker-touch/datepicker-touch-example.ts index 22d2206baee0..df5daa92f54e 100644 --- a/src/material-examples/datepicker-touch/datepicker-touch-example.ts +++ b/src/material-examples/datepicker-touch/datepicker-touch-example.ts @@ -1,5 +1,8 @@ import {Component} from '@angular/core'; +/** + * @title Datepicker Touch + */ @Component({ selector: 'datepicker-touch-example', templateUrl: 'datepicker-touch-example.html', diff --git a/src/material-examples/dialog-elements/dialog-elements-example.ts b/src/material-examples/dialog-elements/dialog-elements-example.ts index 733a56f07191..37f3703e3aa4 100644 --- a/src/material-examples/dialog-elements/dialog-elements-example.ts +++ b/src/material-examples/dialog-elements/dialog-elements-example.ts @@ -1,7 +1,9 @@ import {Component} from '@angular/core'; import {MdDialog} from '@angular/material'; - +/** + * @title Dialog elements + */ @Component({ selector: 'dialog-elements-example', templateUrl: 'dialog-elements-example.html', diff --git a/src/material-examples/dialog-overview/dialog-overview-example.ts b/src/material-examples/dialog-overview/dialog-overview-example.ts index 0613b400e7c6..6e88f61cf480 100644 --- a/src/material-examples/dialog-overview/dialog-overview-example.ts +++ b/src/material-examples/dialog-overview/dialog-overview-example.ts @@ -1,7 +1,9 @@ import {Component} from '@angular/core'; import {MdDialog} from '@angular/material'; - +/** + * @title Dialog Overview + */ @Component({ selector: 'dialog-overview-example', templateUrl: 'dialog-overview-example.html', diff --git a/src/material-examples/dialog-result/dialog-result-example.ts b/src/material-examples/dialog-result/dialog-result-example.ts index 19ac72220241..8f2cc8acac17 100644 --- a/src/material-examples/dialog-result/dialog-result-example.ts +++ b/src/material-examples/dialog-result/dialog-result-example.ts @@ -1,7 +1,9 @@ import {Component} from '@angular/core'; import {MdDialog, MdDialogRef} from '@angular/material'; - +/** + * @title Dialog with a result + */ @Component({ selector: 'dialog-result-example', templateUrl: 'dialog-result-example.html', diff --git a/src/material-examples/example-module.ts b/src/material-examples/example-module.ts index e7a2bcd178c2..9850814f55b6 100644 --- a/src/material-examples/example-module.ts +++ b/src/material-examples/example-module.ts @@ -1,263 +1,484 @@ + +/* tslint:disable */ +/** DO NOT MANUALLY EDIT THIS FILE, IT IS GENERATED VIA GULP 'build-examples-module' */ import {NgModule} from '@angular/core'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {CommonModule} from '@angular/common'; +import {ExampleMaterialModule} from './material-module'; + +export interface LiveExample { + title: string; + component: any; + additionalFiles?: string[]; + selectorName?: string; +} + import {AutocompleteOverviewExample} from './autocomplete-overview/autocomplete-overview-example'; import {ButtonOverviewExample} from './button-overview/button-overview-example'; +import {ButtonToggleExclusiveExample} from './button-toggle-exclusive/button-toggle-exclusive-example'; +import {ButtonToggleOverviewExample} from './button-toggle-overview/button-toggle-overview-example'; import {ButtonTypesExample} from './button-types/button-types-example'; -import {CheckboxOverviewExample} from './checkbox-overview/checkbox-overview-example'; -import {SliderConfigurableExample} from './slider-configurable/slider-configurable-example'; -import {TabsOverviewExample} from './tabs-overview/tabs-overview-example'; -import { - PizzaPartyComponent, - SnackBarComponentExample -} from './snack-bar-component/snack-bar-component-example'; -import { - ProgressBarConfigurableExample -} from './progress-bar-configurable/progress-bar-configurable-example'; -import { - DialogOverviewExample, - DialogOverviewExampleDialog -} from './dialog-overview/dialog-overview-example'; -import {RadioNgModelExample} from './radio-ng-model/radio-ng-model-example'; import {CardFancyExample} from './card-fancy/card-fancy-example'; -import {ToolbarOverviewExample} from './toolbar-overview/toolbar-overview-example'; -import {ToolbarMultirowExample} from './toolbar-multirow/toolbar-multirow-example'; -import {MenuIconsExample} from './menu-icons/menu-icons-example'; -import {GridListDynamicExample} from './grid-list-dynamic/grid-list-dynamic-example'; -import {IconOverviewExample} from './icon-overview/icon-overview-example'; -import {ProgressBarOverviewExample} from './progress-bar-overview/progress-bar-overview-example'; -import {SlideToggleOverviewExample} from './slide-toggle-overview/slide-toggle-overview-example'; -import {SlideToggleFormsExample} from './slide-toggle-forms/slide-toggle-forms-example'; -import {MenuOverviewExample} from './menu-overview/menu-overview-example'; -import {CheckboxConfigurableExample} from './checkbox-configurable/checkbox-configurable-example'; -import { - ButtonToggleExclusiveExample -} from './button-toggle-exclusive/button-toggle-exclusive-example'; -import {ListSectionsExample} from './list-sections/list-sections-example'; -import {SnackBarOverviewExample} from './snack-bar-overview/snack-bar-overview-example'; -import { - DialogResultExample, - DialogResultExampleDialog -} from './dialog-result/dialog-result-example'; -import { - DialogElementsExample, - DialogElementsExampleDialog -} from './dialog-elements/dialog-elements-example'; -import {TooltipOverviewExample} from './tooltip-overview/tooltip-overview-example'; -import {ButtonToggleOverviewExample} from './button-toggle-overview/button-toggle-overview-example'; -import {GridListOverviewExample} from './grid-list-overview/grid-list-overview-example'; -import {TooltipPositionExample} from './tooltip-position/tooltip-position-example'; -import { - ProgressSpinnerConfigurableExample -} from './progress-spinner-configurable/progress-spinner-configurable-example'; -import {ListOverviewExample} from './list-overview/list-overview-example'; -import {SliderOverviewExample} from './slider-overview/slider-overview-example'; -import { - SlideToggleConfigurableExample -} from './slide-toggle-configurable/slide-toggle-configurable-example'; -import {IconSvgExample} from './icon-svg-example/icon-svg-example'; -import {SidenavFabExample} from './sidenav-fab/sidenav-fab-example'; import {CardOverviewExample} from './card-overview/card-overview-example'; -import { - ProgressSpinnerOverviewExample -} from './progress-spinner-overview/progress-spinner-overview-example'; -import {TabsTemplateLabelExample} from './tabs-template-label/tabs-template-label-example'; -import {RadioOverviewExample} from './radio-overview/radio-overview-example'; -import {SidenavOverviewExample} from './sidenav-overview/sidenav-overview-example'; -import {SelectOverviewExample} from './select-overview/select-overview-example'; +import {CdkTableBasicExample} from './cdk-table-basic/cdk-table-basic-example'; +import {CheckboxConfigurableExample} from './checkbox-configurable/checkbox-configurable-example'; +import {CheckboxOverviewExample} from './checkbox-overview/checkbox-overview-example'; import {ChipsOverviewExample} from './chips-overview/chips-overview-example'; import {ChipsStackedExample} from './chips-stacked/chips-stacked-example'; -import {SelectFormExample} from './select-form/select-form-example'; -import {PaginatorOverviewExample} from './paginator-overview/paginator-overview-example'; +import {DatepickerApiExample} from './datepicker-api/datepicker-api-example'; +import {DatepickerFilterExample} from './datepicker-filter/datepicker-filter-example'; +import {DatepickerMinMaxExample} from './datepicker-min-max/datepicker-min-max-example'; import {DatepickerOverviewExample} from './datepicker-overview/datepicker-overview-example'; -import { - PaginatorConfigurableExample -} from './paginator-configurable/paginator-configurable-example'; -import {InputOverviewExample} from './input-overview/input-overview-example'; -import {InputErrorsExample} from './input-errors/input-errors-example'; -import {InputFormExample} from './input-form/input-form-example'; -import {InputPrefixSuffixExample} from './input-prefix-suffix/input-prefix-suffix-example'; -import {InputHintExample} from './input-hint/input-hint-example'; import {DatepickerStartViewExample} from './datepicker-start-view/datepicker-start-view-example'; -import {DatepickerMinMaxExample} from './datepicker-min-max/datepicker-min-max-example'; -import {DatepickerFilterExample} from './datepicker-filter/datepicker-filter-example'; import {DatepickerTouchExample} from './datepicker-touch/datepicker-touch-example'; -import {DatepickerApiExample} from './datepicker-api/datepicker-api-example'; +import {DialogElementsExampleDialog,DialogElementsExample} from './dialog-elements/dialog-elements-example'; +import {DialogOverviewExampleDialog,DialogOverviewExample} from './dialog-overview/dialog-overview-example'; +import {DialogResultExampleDialog,DialogResultExample} from './dialog-result/dialog-result-example'; +import {GridListDynamicExample} from './grid-list-dynamic/grid-list-dynamic-example'; +import {GridListOverviewExample} from './grid-list-overview/grid-list-overview-example'; +import {IconOverviewExample} from './icon-overview/icon-overview-example'; +import {IconSvgExample} from './icon-svg-example/icon-svg-example'; import {InputClearableExample} from './input-clearable/input-clearable-example'; -import { - MdAutocompleteModule, MdButtonModule, MdButtonToggleModule, MdCardModule, MdCheckboxModule, - MdChipsModule, MdDatepickerModule, MdDialogModule, MdGridListModule, MdIconModule, MdInputModule, - MdListModule, MdMenuModule, MdPaginatorModule, MdProgressBarModule, MdProgressSpinnerModule, - MdRadioModule, MdSelectModule, MdSidenavModule, MdSliderModule, MdSlideToggleModule, - MdSnackBarModule, MdSortModule, MdTableModule, MdTabsModule, MdToolbarModule, MdTooltipModule -} from '@angular/material'; -import {CdkTableModule} from '@angular/cdk'; +import {InputErrorsExample} from './input-errors/input-errors-example'; +import {InputFormExample} from './input-form/input-form-example'; +import {InputHintExample} from './input-hint/input-hint-example'; +import {InputOverviewExample} from './input-overview/input-overview-example'; +import {InputPrefixSuffixExample} from './input-prefix-suffix/input-prefix-suffix-example'; +import {ListOverviewExample} from './list-overview/list-overview-example'; +import {ListSectionsExample} from './list-sections/list-sections-example'; +import {MenuIconsExample} from './menu-icons/menu-icons-example'; +import {MenuOverviewExample} from './menu-overview/menu-overview-example'; +import {PaginatorConfigurableExample} from './paginator-configurable/paginator-configurable-example'; +import {PaginatorOverviewExample} from './paginator-overview/paginator-overview-example'; +import {ProgressBarConfigurableExample} from './progress-bar-configurable/progress-bar-configurable-example'; +import {ProgressBarOverviewExample} from './progress-bar-overview/progress-bar-overview-example'; +import {ProgressSpinnerConfigurableExample} from './progress-spinner-configurable/progress-spinner-configurable-example'; +import {ProgressSpinnerOverviewExample} from './progress-spinner-overview/progress-spinner-overview-example'; +import {RadioNgModelExample} from './radio-ng-model/radio-ng-model-example'; +import {RadioOverviewExample} from './radio-overview/radio-overview-example'; +import {SelectFormExample} from './select-form/select-form-example'; +import {SelectOverviewExample} from './select-overview/select-overview-example'; +import {SidenavFabExample} from './sidenav-fab/sidenav-fab-example'; +import {SidenavOverviewExample} from './sidenav-overview/sidenav-overview-example'; +import {SlideToggleConfigurableExample} from './slide-toggle-configurable/slide-toggle-configurable-example'; +import {SlideToggleFormsExample} from './slide-toggle-forms/slide-toggle-forms-example'; +import {SlideToggleOverviewExample} from './slide-toggle-overview/slide-toggle-overview-example'; +import {SliderConfigurableExample} from './slider-configurable/slider-configurable-example'; +import {SliderOverviewExample} from './slider-overview/slider-overview-example'; +import {PizzaPartyComponent,SnackBarComponentExample} from './snack-bar-component/snack-bar-component-example'; +import {SnackBarOverviewExample} from './snack-bar-overview/snack-bar-overview-example'; +import {SortOverviewExample} from './sort-overview/sort-overview-example'; +import {TableBasicExample} from './table-basic/table-basic-example'; +import {TableFilteringExample} from './table-filtering/table-filtering-example'; import {TableOverviewExample} from './table-overview/table-overview-example'; import {TablePaginationExample} from './table-pagination/table-pagination-example'; -import {TableBasicExample} from './table-basic/table-basic-example'; import {TableSortingExample} from './table-sorting/table-sorting-example'; -import {TableFilteringExample} from './table-filtering/table-filtering-example'; -import {CdkTableBasicExample} from './cdk-table-basic/cdk-table-basic-example'; -import {SortOverviewExample} from './sort-overview/sort-overview-example'; - -export interface LiveExample { - title: string; - component: any; - additionalFiles?: string[]; - selectorName?: string; -} +import {TabsOverviewExample} from './tabs-overview/tabs-overview-example'; +import {TabsTemplateLabelExample} from './tabs-template-label/tabs-template-label-example'; +import {ToolbarMultirowExample} from './toolbar-multirow/toolbar-multirow-example'; +import {ToolbarOverviewExample} from './toolbar-overview/toolbar-overview-example'; +import {TooltipOverviewExample} from './tooltip-overview/tooltip-overview-example'; +import {TooltipPositionExample} from './tooltip-position/tooltip-position-example'; -/** - * The list of example components. - * Key is the example name which will be used in `material-docs-example="key"`. - * Value is the component. - */ export const EXAMPLE_COMPONENTS = { - 'autocomplete-overview': {title: 'Basic autocomplete', component: AutocompleteOverviewExample}, - 'button-overview': {title: 'Basic buttons', component: ButtonOverviewExample}, - 'button-types': {title: 'Button varieties', component: ButtonTypesExample}, + 'autocomplete-overview': { + title: 'Basic autocomplete', + component: AutocompleteOverviewExample, + additionalFiles: null, + selectorName: null + }, + 'button-overview': { + title: 'Basic buttons', + component: ButtonOverviewExample, + additionalFiles: null, + selectorName: null + }, 'button-toggle-exclusive': { title: 'Exclusive selection', - component: ButtonToggleExclusiveExample - }, - 'button-toggle-overview': {title: 'Basic button-toggles', component: ButtonToggleOverviewExample}, - 'chips-overview': {title: 'Basic chips', component: ChipsOverviewExample}, - 'cdk-table-basic': {title: 'Basic CDK data-table', component: CdkTableBasicExample}, - 'chips-stacked': {title: 'Stacked chips', component: ChipsStackedExample}, - 'card-fancy': {title: 'Card with multiple sections', component: CardFancyExample}, - 'card-overview': {title: 'Basic cards', component: CardOverviewExample}, - 'checkbox-configurable': {title: 'Configurable checkbox', component: CheckboxConfigurableExample}, - 'checkbox-overview': {title: 'Basic checkboxes', component: CheckboxOverviewExample}, - 'datepicker-overview': {title: 'Basic datepicker', component: DatepickerOverviewExample}, - 'datepicker-start-view': {title: 'Start View', component: DatepickerStartViewExample}, - 'datepicker-min-max': {title: 'Min/Max Validation', component: DatepickerMinMaxExample}, - 'datepicker-filter': {title: 'Filter Validation', component: DatepickerFilterExample}, - 'datepicker-touch': {title: 'Touch', component: DatepickerTouchExample}, - 'datepicker-api': {title: 'API', component: DatepickerApiExample}, + component: ButtonToggleExclusiveExample, + additionalFiles: null, + selectorName: null + }, + 'button-toggle-overview': { + title: 'Basic button-toggles', + component: ButtonToggleOverviewExample, + additionalFiles: null, + selectorName: null + }, + 'button-types': { + title: 'Button varieties', + component: ButtonTypesExample, + additionalFiles: null, + selectorName: null + }, + 'card-fancy': { + title: 'Card with multiple sections', + component: CardFancyExample, + additionalFiles: null, + selectorName: null + }, + 'card-overview': { + title: 'Basic cards', + component: CardOverviewExample, + additionalFiles: null, + selectorName: null + }, + 'cdk-table-basic': { + title: 'Basic CDK data-table', + component: CdkTableBasicExample, + additionalFiles: null, + selectorName: null + }, + 'checkbox-configurable': { + title: 'Configurable checkbox', + component: CheckboxConfigurableExample, + additionalFiles: null, + selectorName: null + }, + 'checkbox-overview': { + title: 'Basic checkboxes', + component: CheckboxOverviewExample, + additionalFiles: null, + selectorName: null + }, + 'chips-overview': { + title: 'Basic chips', + component: ChipsOverviewExample, + additionalFiles: null, + selectorName: null + }, + 'chips-stacked': { + title: 'Stacked chips', + component: ChipsStackedExample, + additionalFiles: null, + selectorName: null + }, + 'datepicker-api': { + title: 'Datepicker API', + component: DatepickerApiExample, + additionalFiles: null, + selectorName: null + }, + 'datepicker-filter': { + title: 'Datepicker Filter', + component: DatepickerFilterExample, + additionalFiles: null, + selectorName: null + }, + 'datepicker-min-max': { + title: 'Datepicker Min Max', + component: DatepickerMinMaxExample, + additionalFiles: null, + selectorName: null + }, + 'datepicker-overview': { + title: 'Basic datepicker', + component: DatepickerOverviewExample, + additionalFiles: null, + selectorName: null + }, + 'datepicker-start-view': { + title: 'Datepicker start date', + component: DatepickerStartViewExample, + additionalFiles: null, + selectorName: null + }, + 'datepicker-touch': { + title: 'Datepicker Touch', + component: DatepickerTouchExample, + additionalFiles: null, + selectorName: null + }, + 'dialog-elements': { + title: 'Dialog elements', + component: DialogElementsExample, + additionalFiles: ["dialog-elements-example-dialog.html"], + selectorName: 'DialogElementsExample, DialogElementsExampleDialog' + }, 'dialog-overview': { - title: 'Basic dialog', + title: 'Dialog Overview', component: DialogOverviewExample, - additionalFiles: ['dialog-overview-example-dialog.html'], - selectorName: 'DialogOverviewExample, DialogOverviewExampleDialog', + additionalFiles: ["dialog-overview-example-dialog.html"], + selectorName: 'DialogOverviewExample, DialogOverviewExampleDialog' }, 'dialog-result': { title: 'Dialog with a result', component: DialogResultExample, - additionalFiles: ['dialog-result-example-dialog.html'], - selectorName: 'DialogResultExample, DialogResultExampleDialog', + additionalFiles: ["dialog-result-example-dialog.html"], + selectorName: 'DialogResultExample, DialogResultExampleDialog' + }, + 'grid-list-dynamic': { + title: 'Dynamic grid-list', + component: GridListDynamicExample, + additionalFiles: null, + selectorName: null + }, + 'grid-list-overview': { + title: 'Basic grid-list', + component: GridListOverviewExample, + additionalFiles: null, + selectorName: null + }, + 'icon-overview': { + title: 'Basic icons', + component: IconOverviewExample, + additionalFiles: null, + selectorName: null + }, + 'icon-svg': { + title: 'SVG icons', + component: IconSvgExample, + additionalFiles: null, + selectorName: null + }, + 'input-clearable': { + title: 'Input Clearable', + component: InputClearableExample, + additionalFiles: null, + selectorName: null + }, + 'input-errors': { + title: 'Input Errors', + component: InputErrorsExample, + additionalFiles: null, + selectorName: null + }, + 'input-form': { + title: 'Inputs in a form', + component: InputFormExample, + additionalFiles: null, + selectorName: null + }, + 'input-hint': { + title: 'Input hints', + component: InputHintExample, + additionalFiles: null, + selectorName: null + }, + 'input-overview': { + title: 'Basic Inputs', + component: InputOverviewExample, + additionalFiles: null, + selectorName: null + }, + 'input-prefix-suffix': { + title: 'Input Prefixes and Suffixes', + component: InputPrefixSuffixExample, + additionalFiles: null, + selectorName: null + }, + 'list-overview': { + title: 'Basic list', + component: ListOverviewExample, + additionalFiles: null, + selectorName: null + }, + 'list-sections': { + title: 'List with sections', + component: ListSectionsExample, + additionalFiles: null, + selectorName: null + }, + 'menu-icons': { + title: 'Menu with icons', + component: MenuIconsExample, + additionalFiles: null, + selectorName: null + }, + 'menu-overview': { + title: 'Basic menu', + component: MenuOverviewExample, + additionalFiles: null, + selectorName: null }, - 'dialog-elements': { - title: 'Dialog elements', - component: DialogElementsExample, - additionalFiles: ['dialog-elements-example-dialog.html'], - selectorName: 'DialogElementsExample, DialogElementsExampleDialog', - }, - 'grid-list-dynamic': {title: 'Dynamic grid-list', component: GridListDynamicExample}, - 'grid-list-overview': {title: 'Basic grid-list', component: GridListOverviewExample}, - 'icon-overview': {title: 'Basic icons', component: IconOverviewExample}, - 'icon-svg': {title: 'SVG icons', component: IconSvgExample}, - 'input-clearable': {title: 'Input with clear button', component: InputClearableExample}, - 'input-form': {title: 'Inputs in a form', component: InputFormExample}, - 'input-overview': {title: 'Basic inputs', component: InputOverviewExample}, - 'input-errors': {title: 'Input Errors', component: InputErrorsExample}, - 'input-prefix-suffix': {title: 'Input Prefixes/Suffixes', component: InputPrefixSuffixExample}, - 'input-hint': {title: 'Input Hint', component: InputHintExample}, - 'list-overview': {title: 'Basic list', component: ListOverviewExample}, - 'list-sections': {title: 'List with sections', component: ListSectionsExample}, - 'menu-icons': {title: 'Menu with icons', component: MenuIconsExample}, - 'menu-overview': {title: 'Basic menu', component: MenuOverviewExample}, - 'paginator-overview': {title: 'Paginator', component: PaginatorOverviewExample}, 'paginator-configurable': { title: 'Configurable paginator', - component: PaginatorConfigurableExample + component: PaginatorConfigurableExample, + additionalFiles: null, + selectorName: null + }, + 'paginator-overview': { + title: 'Paginator', + component: PaginatorOverviewExample, + additionalFiles: null, + selectorName: null }, 'progress-bar-configurable': { title: 'Configurable progress-bar', - component: ProgressBarConfigurableExample + component: ProgressBarConfigurableExample, + additionalFiles: null, + selectorName: null + }, + 'progress-bar-overview': { + title: 'Basic progress-bar', + component: ProgressBarOverviewExample, + additionalFiles: null, + selectorName: null }, - 'progress-bar-overview': {title: 'Basic progress-bar', component: ProgressBarOverviewExample}, 'progress-spinner-configurable': { - title: 'Configurable progress-bar', - component: ProgressSpinnerConfigurableExample + title: 'Configurable progress spinner', + component: ProgressSpinnerConfigurableExample, + additionalFiles: null, + selectorName: null }, 'progress-spinner-overview': { title: 'Basic progress-spinner', - component: ProgressSpinnerOverviewExample - }, - 'radio-ng-model': {title: 'Radios with ngModel', component: RadioNgModelExample}, - 'radio-overview': {title: 'Basic radios', component: RadioOverviewExample}, - 'select-overview': {title: 'Basic select', component: SelectOverviewExample}, - 'select-form': {title: 'Select in a form', component: SelectFormExample}, - 'sidenav-fab': {title: 'Sidenav with a FAB', component: SidenavFabExample}, - 'sidenav-overview': {title: 'Basic sidenav', component: SidenavOverviewExample}, - 'slider-configurable': {title: 'Configurable slider', component: SliderConfigurableExample}, - 'slider-overview': {title: 'Basic slider', component: SliderOverviewExample}, + component: ProgressSpinnerOverviewExample, + additionalFiles: null, + selectorName: null + }, + 'radio-ng-model': { + title: 'Radios with ngModel', + component: RadioNgModelExample, + additionalFiles: null, + selectorName: null + }, + 'radio-overview': { + title: 'Basic radios', + component: RadioOverviewExample, + additionalFiles: null, + selectorName: null + }, + 'select-form': { + title: 'Select in a form', + component: SelectFormExample, + additionalFiles: null, + selectorName: null + }, + 'select-overview': { + title: 'Basic select', + component: SelectOverviewExample, + additionalFiles: null, + selectorName: null + }, + 'sidenav-fab': { + title: 'Sidenav with a FAB', + component: SidenavFabExample, + additionalFiles: null, + selectorName: null + }, + 'sidenav-overview': { + title: 'Basic sidenav', + component: SidenavOverviewExample, + additionalFiles: null, + selectorName: null + }, 'slide-toggle-configurable': { title: 'Configurable slide-toggle', - component: SlideToggleConfigurableExample + component: SlideToggleConfigurableExample, + additionalFiles: null, + selectorName: null + }, + 'slide-toggle-forms': { + title: 'Slide-toggle with forms', + component: SlideToggleFormsExample, + additionalFiles: null, + selectorName: null + }, + 'slide-toggle-overview': { + title: 'Basic slide-toggles', + component: SlideToggleOverviewExample, + additionalFiles: null, + selectorName: null + }, + 'slider-configurable': { + title: 'Configurable slider', + component: SliderConfigurableExample, + additionalFiles: null, + selectorName: null + }, + 'slider-overview': { + title: 'Basic slider', + component: SliderOverviewExample, + additionalFiles: null, + selectorName: null }, - 'slide-toggle-forms': {title: 'Slide-toggle with forms', component: SlideToggleFormsExample}, - 'slide-toggle-overview': {title: 'Basic slide-toggles', component: SlideToggleOverviewExample}, - 'sort-overview': {title: 'Sorting overview', component: SortOverviewExample}, 'snack-bar-component': { title: 'Snack-bar with a custom component', - component: SnackBarComponentExample - }, - 'snack-bar-overview': {title: 'Basic snack-bar', component: SnackBarOverviewExample}, - 'table-overview': {title: 'Feature-rich data table', component: TableOverviewExample}, - 'table-pagination': {title: 'Table with pagination', component: TablePaginationExample}, - 'table-sorting': {title: 'Table with sorting', component: TableSortingExample}, - 'table-filtering': {title: 'Table with filtering', component: TableFilteringExample}, - 'table-basic': {title: 'Basic table', component: TableBasicExample}, - 'tabs-overview': {title: 'Basic tabs', component: TabsOverviewExample}, - 'tabs-template-label': {title: 'Coming soon!', component: TabsTemplateLabelExample}, - 'toolbar-multirow': {title: 'Multi-row toolbar', component: ToolbarMultirowExample}, - 'toolbar-overview': {title: 'basic toolbar', component: ToolbarOverviewExample}, - 'tooltip-overview': {title: 'Basic tooltip', component: TooltipOverviewExample}, - 'tooltip-position': {title: 'Tooltip with custom position', component: TooltipPositionExample}, + component: SnackBarComponentExample, + additionalFiles: ["snack-bar-component-example-snack.html"], + selectorName: 'SnackBarComponentExample, PizzaPartyComponent' + }, + 'snack-bar-overview': { + title: 'Basic snack-bar', + component: SnackBarOverviewExample, + additionalFiles: null, + selectorName: null + }, + 'sort-overview': { + title: 'Sorting overview', + component: SortOverviewExample, + additionalFiles: null, + selectorName: null + }, + 'table-basic': { + title: 'Basic table', + component: TableBasicExample, + additionalFiles: null, + selectorName: null + }, + 'table-filtering': { + title: 'Table with filtering', + component: TableFilteringExample, + additionalFiles: null, + selectorName: null + }, + 'table-overview': { + title: 'Feature-rich data table', + component: TableOverviewExample, + additionalFiles: null, + selectorName: null + }, + 'table-pagination': { + title: 'Table with pagination', + component: TablePaginationExample, + additionalFiles: null, + selectorName: null + }, + 'table-sorting': { + title: 'Table with sorting', + component: TableSortingExample, + additionalFiles: null, + selectorName: null + }, + 'tabs-overview': { + title: 'Basic tabs', + component: TabsOverviewExample, + additionalFiles: null, + selectorName: null + }, + 'tabs-template-label': { + title: 'Coming soon!', + component: TabsTemplateLabelExample, + additionalFiles: null, + selectorName: null + }, + 'toolbar-multirow': { + title: 'Multi-row toolbar', + component: ToolbarMultirowExample, + additionalFiles: null, + selectorName: null + }, + 'toolbar-overview': { + title: 'Basic toolbar', + component: ToolbarOverviewExample, + additionalFiles: null, + selectorName: null + }, + 'tooltip-overview': { + title: 'Basic tooltip', + component: TooltipOverviewExample, + additionalFiles: null, + selectorName: null + }, + 'tooltip-position': { + title: 'Tooltip with custom position', + component: TooltipPositionExample, + additionalFiles: null, + selectorName: null + }, }; -/** - * NgModule that includes all Material modules that are required to serve the examples. - */ -@NgModule({ - exports: [ - CdkTableModule, - MdAutocompleteModule, - MdButtonModule, - MdButtonToggleModule, - MdCardModule, - MdCheckboxModule, - MdChipsModule, - MdDatepickerModule, - MdDialogModule, - MdGridListModule, - MdIconModule, - MdInputModule, - MdListModule, - MdMenuModule, - MdPaginatorModule, - MdProgressBarModule, - MdProgressSpinnerModule, - MdRadioModule, - MdSortModule, - MdSelectModule, - MdSlideToggleModule, - MdSliderModule, - MdSidenavModule, - MdSnackBarModule, - MdTableModule, - MdTabsModule, - MdToolbarModule, - MdTooltipModule - ] -}) -export class ExampleMaterialModule {} - -/** - * The list of all example components. - * We need to put them in both `declarations` and `entryComponents` to make them work. - */ export const EXAMPLE_LIST = [ AutocompleteOverviewExample, ButtonOverviewExample, @@ -267,60 +488,56 @@ export const EXAMPLE_LIST = [ CardFancyExample, CardOverviewExample, CdkTableBasicExample, - ChipsOverviewExample, - ChipsStackedExample, CheckboxConfigurableExample, CheckboxOverviewExample, + ChipsOverviewExample, + ChipsStackedExample, + DatepickerApiExample, + DatepickerFilterExample, + DatepickerMinMaxExample, DatepickerOverviewExample, DatepickerStartViewExample, - DatepickerMinMaxExample, - DatepickerFilterExample, DatepickerTouchExample, - DatepickerApiExample, - DialogOverviewExample, - DialogOverviewExampleDialog, - DialogResultExample, - DialogResultExampleDialog, - DialogElementsExample, - DialogElementsExampleDialog, + DialogElementsExampleDialog,DialogElementsExample, + DialogOverviewExampleDialog,DialogOverviewExample, + DialogResultExampleDialog,DialogResultExample, GridListDynamicExample, GridListOverviewExample, IconOverviewExample, IconSvgExample, InputClearableExample, + InputErrorsExample, InputFormExample, + InputHintExample, InputOverviewExample, InputPrefixSuffixExample, - InputHintExample, - InputErrorsExample, ListOverviewExample, ListSectionsExample, MenuIconsExample, MenuOverviewExample, - PaginatorOverviewExample, PaginatorConfigurableExample, + PaginatorOverviewExample, ProgressBarConfigurableExample, ProgressBarOverviewExample, ProgressSpinnerConfigurableExample, ProgressSpinnerOverviewExample, RadioNgModelExample, RadioOverviewExample, - SidenavFabExample, - SelectOverviewExample, SelectFormExample, + SelectOverviewExample, + SidenavFabExample, SidenavOverviewExample, - SliderConfigurableExample, - SliderOverviewExample, SlideToggleConfigurableExample, - SlideToggleOverviewExample, SlideToggleFormsExample, - SortOverviewExample, - SnackBarComponentExample, - PizzaPartyComponent, + SlideToggleOverviewExample, + SliderConfigurableExample, + SliderOverviewExample, + PizzaPartyComponent,SnackBarComponentExample, SnackBarOverviewExample, + SortOverviewExample, TableBasicExample, - TableOverviewExample, TableFilteringExample, + TableOverviewExample, TablePaginationExample, TableSortingExample, TabsOverviewExample, @@ -338,7 +555,7 @@ export const EXAMPLE_LIST = [ ExampleMaterialModule, FormsModule, ReactiveFormsModule, - CommonModule, + CommonModule ] }) export class ExampleModule { } diff --git a/src/material-examples/grid-list-dynamic/grid-list-dynamic-example.ts b/src/material-examples/grid-list-dynamic/grid-list-dynamic-example.ts index d8fee3401527..21dc729aea31 100644 --- a/src/material-examples/grid-list-dynamic/grid-list-dynamic-example.ts +++ b/src/material-examples/grid-list-dynamic/grid-list-dynamic-example.ts @@ -1,6 +1,8 @@ import {Component} from '@angular/core'; - +/** + * @title Dynamic grid-list + */ @Component({ selector: 'grid-list-dynamic-example', templateUrl: 'grid-list-dynamic-example.html', diff --git a/src/material-examples/grid-list-overview/grid-list-overview-example.ts b/src/material-examples/grid-list-overview/grid-list-overview-example.ts index 29b60b3cc584..dd03daef557e 100644 --- a/src/material-examples/grid-list-overview/grid-list-overview-example.ts +++ b/src/material-examples/grid-list-overview/grid-list-overview-example.ts @@ -1,5 +1,8 @@ import {Component} from '@angular/core'; +/** + * @title Basic grid-list + */ @Component({ selector: 'grid-list-overview-example', styleUrls: ['grid-list-overview-example.css'], diff --git a/src/material-examples/icon-overview/icon-overview-example.ts b/src/material-examples/icon-overview/icon-overview-example.ts index 52ed35de3220..f81416f3331b 100644 --- a/src/material-examples/icon-overview/icon-overview-example.ts +++ b/src/material-examples/icon-overview/icon-overview-example.ts @@ -1,6 +1,8 @@ import {Component} from '@angular/core'; - +/** + * @title Basic icons + */ @Component({ selector: 'icon-overview-example', templateUrl: 'icon-overview-example.html', diff --git a/src/material-examples/icon-svg-example/icon-svg-example.ts b/src/material-examples/icon-svg-example/icon-svg-example.ts index 228edea1db0b..53775feb59fe 100644 --- a/src/material-examples/icon-svg-example/icon-svg-example.ts +++ b/src/material-examples/icon-svg-example/icon-svg-example.ts @@ -2,7 +2,9 @@ import {Component} from '@angular/core'; import {DomSanitizer} from '@angular/platform-browser'; import {MdIconRegistry} from '@angular/material'; - +/** + * @title SVG icons + */ @Component({ selector: 'icon-svg-example', templateUrl: 'icon-svg-example.html', diff --git a/src/material-examples/input-clearable/input-clearable-example.ts b/src/material-examples/input-clearable/input-clearable-example.ts index 01fba9c163f9..3b469528280b 100644 --- a/src/material-examples/input-clearable/input-clearable-example.ts +++ b/src/material-examples/input-clearable/input-clearable-example.ts @@ -1,6 +1,8 @@ import {Component} from '@angular/core'; - +/** + * @title Input Clearable + */ @Component({ selector: 'input-clearable-example', templateUrl: './input-clearable-example.html', diff --git a/src/material-examples/input-errors/input-errors-example.ts b/src/material-examples/input-errors/input-errors-example.ts index cee372af8979..8a2dbb861244 100644 --- a/src/material-examples/input-errors/input-errors-example.ts +++ b/src/material-examples/input-errors/input-errors-example.ts @@ -3,6 +3,9 @@ import {FormControl, Validators} from '@angular/forms'; const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; +/** + * @title Input Errors + */ @Component({ selector: 'input-errors-example', templateUrl: 'input-errors-example.html', diff --git a/src/material-examples/input-form/input-form-example.ts b/src/material-examples/input-form/input-form-example.ts index 760ed8571251..192f9cae87dc 100644 --- a/src/material-examples/input-form/input-form-example.ts +++ b/src/material-examples/input-form/input-form-example.ts @@ -1,6 +1,8 @@ import {Component} from '@angular/core'; - +/** + * @title Inputs in a form + */ @Component({ selector: 'input-form-example', templateUrl: 'input-form-example.html', diff --git a/src/material-examples/input-hint/input-hint-example.ts b/src/material-examples/input-hint/input-hint-example.ts index 202836b27432..3b3a5ebc7b66 100644 --- a/src/material-examples/input-hint/input-hint-example.ts +++ b/src/material-examples/input-hint/input-hint-example.ts @@ -1,5 +1,8 @@ import {Component} from '@angular/core'; +/** + * @title Input hints + */ @Component({ selector: 'input-hint-example', templateUrl: 'input-hint-example.html', diff --git a/src/material-examples/input-overview/input-overview-example.ts b/src/material-examples/input-overview/input-overview-example.ts index 4af520da8b6c..c43e8eacb905 100644 --- a/src/material-examples/input-overview/input-overview-example.ts +++ b/src/material-examples/input-overview/input-overview-example.ts @@ -1,6 +1,8 @@ import {Component} from '@angular/core'; - +/** + * @title Basic Inputs + */ @Component({ selector: 'input-overview-example', templateUrl: 'input-overview-example.html', diff --git a/src/material-examples/input-prefix-suffix/input-prefix-suffix-example.ts b/src/material-examples/input-prefix-suffix/input-prefix-suffix-example.ts index 5c1755172126..00ed164cd443 100644 --- a/src/material-examples/input-prefix-suffix/input-prefix-suffix-example.ts +++ b/src/material-examples/input-prefix-suffix/input-prefix-suffix-example.ts @@ -1,5 +1,8 @@ import {Component} from '@angular/core'; +/** + * @title Input Prefixes and Suffixes + */ @Component({ selector: 'input-prefix-suffix-example', templateUrl: 'input-prefix-suffix-example.html', diff --git a/src/material-examples/list-overview/list-overview-example.ts b/src/material-examples/list-overview/list-overview-example.ts index f999bbdebfbd..7912329c2ac5 100644 --- a/src/material-examples/list-overview/list-overview-example.ts +++ b/src/material-examples/list-overview/list-overview-example.ts @@ -1,6 +1,8 @@ import {Component} from '@angular/core'; - +/** + * @title Basic list + */ @Component({ selector: 'list-overview-example', templateUrl: 'list-overview-example.html', diff --git a/src/material-examples/list-sections/list-sections-example.ts b/src/material-examples/list-sections/list-sections-example.ts index 16f1ff7f07d1..63e7e4c6142c 100644 --- a/src/material-examples/list-sections/list-sections-example.ts +++ b/src/material-examples/list-sections/list-sections-example.ts @@ -1,6 +1,8 @@ import {Component} from '@angular/core'; - +/** + * @title List with sections + */ @Component({ selector: 'list-sections-example', styleUrls: ['list-sections-example.css'], diff --git a/src/material-examples/material-module.ts b/src/material-examples/material-module.ts new file mode 100644 index 000000000000..3d7b71a6010f --- /dev/null +++ b/src/material-examples/material-module.ts @@ -0,0 +1,42 @@ +import {NgModule} from '@angular/core'; + +import { + MdAutocompleteModule, MdButtonModule, MdButtonToggleModule, MdPaginatorModule, + MdCardModule, MdCheckboxModule, MdChipsModule, MdDatepickerModule, + MdDialogModule, MdGridListModule, MdIconModule, MdInputModule, + MdListModule, MdMenuModule, MdProgressBarModule, MdProgressSpinnerModule, + MdRadioModule, MdSelectModule, MdSidenavModule, MdSliderModule, MdSortModule, + MdSlideToggleModule, MdSnackBarModule, MdTabsModule, MdToolbarModule, MdTooltipModule +} from '@angular/material'; + +@NgModule({ + exports: [ + MdAutocompleteModule, + MdButtonModule, + MdButtonToggleModule, + MdCardModule, + MdCheckboxModule, + MdChipsModule, + MdDatepickerModule, + MdDialogModule, + MdGridListModule, + MdIconModule, + MdInputModule, + MdListModule, + MdMenuModule, + MdProgressBarModule, + MdProgressSpinnerModule, + MdRadioModule, + MdSelectModule, + MdSlideToggleModule, + MdSliderModule, + MdSidenavModule, + MdSnackBarModule, + MdTabsModule, + MdToolbarModule, + MdTooltipModule, + MdPaginatorModule, + MdSortModule + ] +}) +export class ExampleMaterialModule {} diff --git a/src/material-examples/menu-icons/menu-icons-example.ts b/src/material-examples/menu-icons/menu-icons-example.ts index f09a07e7d15a..bf9c15d30ab3 100644 --- a/src/material-examples/menu-icons/menu-icons-example.ts +++ b/src/material-examples/menu-icons/menu-icons-example.ts @@ -1,6 +1,8 @@ import {Component} from '@angular/core'; - +/** + * @title Menu with icons + */ @Component({ selector: 'menu-icons-example', templateUrl: 'menu-icons-example.html', diff --git a/src/material-examples/menu-overview/menu-overview-example.ts b/src/material-examples/menu-overview/menu-overview-example.ts index 8c25e07b69c9..83ee676b3179 100644 --- a/src/material-examples/menu-overview/menu-overview-example.ts +++ b/src/material-examples/menu-overview/menu-overview-example.ts @@ -1,6 +1,8 @@ import {Component} from '@angular/core'; - +/** + * @title Basic menu + */ @Component({ selector: 'menu-overview-example', templateUrl: 'menu-overview-example.html', diff --git a/src/material-examples/paginator-configurable/paginator-configurable-example.ts b/src/material-examples/paginator-configurable/paginator-configurable-example.ts index 0e432eb6c8eb..ba3df8db743f 100644 --- a/src/material-examples/paginator-configurable/paginator-configurable-example.ts +++ b/src/material-examples/paginator-configurable/paginator-configurable-example.ts @@ -1,6 +1,9 @@ import {Component} from '@angular/core'; import {PageEvent} from '@angular/material'; +/** + * @title Configurable paginator + */ @Component({ selector: 'paginator-configurable-example', templateUrl: 'paginator-configurable-example.html', diff --git a/src/material-examples/paginator-overview/paginator-overview-example.ts b/src/material-examples/paginator-overview/paginator-overview-example.ts index d563732d6233..b2d305e1646a 100644 --- a/src/material-examples/paginator-overview/paginator-overview-example.ts +++ b/src/material-examples/paginator-overview/paginator-overview-example.ts @@ -1,6 +1,8 @@ import {Component} from '@angular/core'; - +/** + * @title Paginator + */ @Component({ selector: 'paginator-overview-example', templateUrl: 'paginator-overview-example.html', diff --git a/src/material-examples/progress-bar-configurable/progress-bar-configurable-example.ts b/src/material-examples/progress-bar-configurable/progress-bar-configurable-example.ts index 6363a491301d..101408dcf8cb 100644 --- a/src/material-examples/progress-bar-configurable/progress-bar-configurable-example.ts +++ b/src/material-examples/progress-bar-configurable/progress-bar-configurable-example.ts @@ -1,6 +1,8 @@ import {Component} from '@angular/core'; - +/** + * @title Configurable progress-bar + */ @Component({ selector: 'progress-bar-configurable-example', templateUrl: 'progress-bar-configurable-example.html', diff --git a/src/material-examples/progress-bar-overview/progress-bar-overview-example.ts b/src/material-examples/progress-bar-overview/progress-bar-overview-example.ts index bf455f948425..67a6c94df90d 100644 --- a/src/material-examples/progress-bar-overview/progress-bar-overview-example.ts +++ b/src/material-examples/progress-bar-overview/progress-bar-overview-example.ts @@ -1,6 +1,8 @@ import {Component} from '@angular/core'; - +/** + * @title Basic progress-bar + */ @Component({ selector: 'progress-bar-overview-example', templateUrl: 'progress-bar-overview-example.html', diff --git a/src/material-examples/progress-spinner-configurable/progress-spinner-configurable-example.ts b/src/material-examples/progress-spinner-configurable/progress-spinner-configurable-example.ts index 705fda16d612..ed1ca870837a 100644 --- a/src/material-examples/progress-spinner-configurable/progress-spinner-configurable-example.ts +++ b/src/material-examples/progress-spinner-configurable/progress-spinner-configurable-example.ts @@ -1,6 +1,8 @@ import {Component} from '@angular/core'; - +/** + * @title Configurable progress spinner + */ @Component({ selector: 'progress-spinner-configurable-example', templateUrl: 'progress-spinner-configurable-example.html', diff --git a/src/material-examples/progress-spinner-overview/progress-spinner-overview-example.ts b/src/material-examples/progress-spinner-overview/progress-spinner-overview-example.ts index 55b9f833a8be..67ada8ad585c 100644 --- a/src/material-examples/progress-spinner-overview/progress-spinner-overview-example.ts +++ b/src/material-examples/progress-spinner-overview/progress-spinner-overview-example.ts @@ -1,6 +1,8 @@ import {Component} from '@angular/core'; - +/** + * @title Basic progress-spinner + */ @Component({ selector: 'progress-spinner-overview-example', templateUrl: 'progress-spinner-overview-example.html', diff --git a/src/material-examples/radio-ng-model/radio-ng-model-example.ts b/src/material-examples/radio-ng-model/radio-ng-model-example.ts index 1ce419b65cd7..52fc51572cf3 100644 --- a/src/material-examples/radio-ng-model/radio-ng-model-example.ts +++ b/src/material-examples/radio-ng-model/radio-ng-model-example.ts @@ -1,6 +1,8 @@ import {Component} from '@angular/core'; - +/** + * @title Radios with ngModel + */ @Component({ selector: 'radio-ng-model-example', templateUrl: 'radio-ng-model-example.html', diff --git a/src/material-examples/radio-overview/radio-overview-example.ts b/src/material-examples/radio-overview/radio-overview-example.ts index e3753efc7b12..916ce6632403 100644 --- a/src/material-examples/radio-overview/radio-overview-example.ts +++ b/src/material-examples/radio-overview/radio-overview-example.ts @@ -1,6 +1,8 @@ import {Component} from '@angular/core'; - +/** + * @title Basic radios + */ @Component({ selector: 'radio-overview-example', templateUrl: 'radio-overview-example.html', diff --git a/src/material-examples/select-form/select-form-example.ts b/src/material-examples/select-form/select-form-example.ts index ab0bc62cba53..0bb2c305b178 100644 --- a/src/material-examples/select-form/select-form-example.ts +++ b/src/material-examples/select-form/select-form-example.ts @@ -1,6 +1,8 @@ import {Component} from '@angular/core'; - +/** + * @title Select in a form + */ @Component({ selector: 'select-form-example', templateUrl: 'select-form-example.html', diff --git a/src/material-examples/select-overview/select-overview-example.ts b/src/material-examples/select-overview/select-overview-example.ts index e5e6cf4e668d..a6a2ff822eeb 100644 --- a/src/material-examples/select-overview/select-overview-example.ts +++ b/src/material-examples/select-overview/select-overview-example.ts @@ -1,6 +1,8 @@ import {Component} from '@angular/core'; - +/** + * @title Basic select + */ @Component({ selector: 'select-overview-example', templateUrl: 'select-overview-example.html', diff --git a/src/material-examples/sidenav-fab/sidenav-fab-example.ts b/src/material-examples/sidenav-fab/sidenav-fab-example.ts index 9270a564514d..cd228e86f61a 100644 --- a/src/material-examples/sidenav-fab/sidenav-fab-example.ts +++ b/src/material-examples/sidenav-fab/sidenav-fab-example.ts @@ -1,6 +1,8 @@ import {Component, ViewEncapsulation} from '@angular/core'; - +/** + * @title Sidenav with a FAB + */ @Component({ selector: 'sidenav-fab-example', templateUrl: 'sidenav-fab-example.html', diff --git a/src/material-examples/sidenav-overview/sidenav-overview-example.ts b/src/material-examples/sidenav-overview/sidenav-overview-example.ts index a71f112660b6..5496f3f45fee 100644 --- a/src/material-examples/sidenav-overview/sidenav-overview-example.ts +++ b/src/material-examples/sidenav-overview/sidenav-overview-example.ts @@ -1,6 +1,8 @@ import {Component} from '@angular/core'; - +/** + * @title Basic sidenav + */ @Component({ selector: 'sidenav-overview-example', templateUrl: 'sidenav-overview-example.html', diff --git a/src/material-examples/slide-toggle-configurable/slide-toggle-configurable-example.ts b/src/material-examples/slide-toggle-configurable/slide-toggle-configurable-example.ts index dd21d0e5ab3f..17835efbc23c 100644 --- a/src/material-examples/slide-toggle-configurable/slide-toggle-configurable-example.ts +++ b/src/material-examples/slide-toggle-configurable/slide-toggle-configurable-example.ts @@ -1,6 +1,8 @@ import {Component} from '@angular/core'; - +/** + * @title Configurable slide-toggle + */ @Component({ selector: 'slide-toggle-configurable-example', templateUrl: 'slide-toggle-configurable-example.html', diff --git a/src/material-examples/slide-toggle-forms/slide-toggle-forms-example.ts b/src/material-examples/slide-toggle-forms/slide-toggle-forms-example.ts index 9402e23e9c95..2636c474dd85 100644 --- a/src/material-examples/slide-toggle-forms/slide-toggle-forms-example.ts +++ b/src/material-examples/slide-toggle-forms/slide-toggle-forms-example.ts @@ -1,6 +1,9 @@ import {Component} from '@angular/core'; import {FormBuilder, FormGroup, Validators} from '@angular/forms'; +/** + * @title Slide-toggle with forms + */ @Component({ selector: 'slide-toggle-forms-example', templateUrl: './slide-toggle-forms-example.html', diff --git a/src/material-examples/slide-toggle-overview/slide-toggle-overview-example.ts b/src/material-examples/slide-toggle-overview/slide-toggle-overview-example.ts index 9bfb08616def..6ed08696a1cb 100644 --- a/src/material-examples/slide-toggle-overview/slide-toggle-overview-example.ts +++ b/src/material-examples/slide-toggle-overview/slide-toggle-overview-example.ts @@ -1,6 +1,8 @@ import {Component} from '@angular/core'; - +/** + * @title Basic slide-toggles + */ @Component({ selector: 'slide-toggle-overview-example', templateUrl: 'slide-toggle-overview-example.html', diff --git a/src/material-examples/slider-configurable/slider-configurable-example.ts b/src/material-examples/slider-configurable/slider-configurable-example.ts index 46ab2412839b..80f206709907 100644 --- a/src/material-examples/slider-configurable/slider-configurable-example.ts +++ b/src/material-examples/slider-configurable/slider-configurable-example.ts @@ -1,6 +1,8 @@ import {Component, ViewEncapsulation} from '@angular/core'; - +/** + * @title Configurable slider + */ @Component({ selector: 'slider-configurable-example', templateUrl: 'slider-configurable-example.html', diff --git a/src/material-examples/slider-overview/slider-overview-example.ts b/src/material-examples/slider-overview/slider-overview-example.ts index 8dfaa812bb25..3284b3ae4a0c 100644 --- a/src/material-examples/slider-overview/slider-overview-example.ts +++ b/src/material-examples/slider-overview/slider-overview-example.ts @@ -1,6 +1,8 @@ import {Component} from '@angular/core'; - +/** + * @title Basic slider + */ @Component({ selector: 'slider-overview-example', templateUrl: 'slider-overview-example.html', diff --git a/src/material-examples/snack-bar-component/snack-bar-component-example.ts b/src/material-examples/snack-bar-component/snack-bar-component-example.ts index d1e2d197f2c8..8aac00a13153 100644 --- a/src/material-examples/snack-bar-component/snack-bar-component-example.ts +++ b/src/material-examples/snack-bar-component/snack-bar-component-example.ts @@ -1,7 +1,9 @@ import {Component} from '@angular/core'; import {MdSnackBar} from '@angular/material'; - +/** + * @title Snack-bar with a custom component + */ @Component({ selector: 'snack-bar-component-example', templateUrl: 'snack-bar-component-example.html', diff --git a/src/material-examples/snack-bar-overview/snack-bar-overview-example.ts b/src/material-examples/snack-bar-overview/snack-bar-overview-example.ts index c4d5ecb0aea6..4d1980dc9d47 100644 --- a/src/material-examples/snack-bar-overview/snack-bar-overview-example.ts +++ b/src/material-examples/snack-bar-overview/snack-bar-overview-example.ts @@ -1,7 +1,9 @@ import {Component} from '@angular/core'; import {MdSnackBar} from '@angular/material'; - +/** + * @title Basic snack-bar + */ @Component({ selector: 'snack-bar-overview-example', templateUrl: 'snack-bar-overview-example.html', diff --git a/src/material-examples/sort-overview/sort-overview-example.ts b/src/material-examples/sort-overview/sort-overview-example.ts index 6670206444f6..58b19b393021 100644 --- a/src/material-examples/sort-overview/sort-overview-example.ts +++ b/src/material-examples/sort-overview/sort-overview-example.ts @@ -1,7 +1,9 @@ import {Component} from '@angular/core'; import {Sort} from '@angular/material'; - +/** + * @title Sorting overview + */ @Component({ selector: 'sort-overview-example', templateUrl: 'sort-overview-example.html', diff --git a/src/material-examples/table-basic/table-basic-example.ts b/src/material-examples/table-basic/table-basic-example.ts index 1e0d1f88e757..effa3ec33fc0 100644 --- a/src/material-examples/table-basic/table-basic-example.ts +++ b/src/material-examples/table-basic/table-basic-example.ts @@ -6,6 +6,9 @@ import 'rxjs/add/operator/startWith'; import 'rxjs/add/observable/merge'; import 'rxjs/add/operator/map'; +/** + * @title Basic table + */ @Component({ selector: 'table-basic-example', styleUrls: ['table-basic-example.css'], diff --git a/src/material-examples/table-filtering/table-filtering-example.ts b/src/material-examples/table-filtering/table-filtering-example.ts index b4def33bcbbc..4c7015e9244a 100644 --- a/src/material-examples/table-filtering/table-filtering-example.ts +++ b/src/material-examples/table-filtering/table-filtering-example.ts @@ -9,6 +9,9 @@ import 'rxjs/add/operator/debounceTime'; import 'rxjs/add/operator/distinctUntilChanged'; import 'rxjs/add/observable/fromEvent'; +/** + * @title Table with filtering + */ @Component({ selector: 'table-filtering-example', styleUrls: ['table-filtering-example.css'], diff --git a/src/material-examples/table-overview/table-overview-example.ts b/src/material-examples/table-overview/table-overview-example.ts index 568aebc5f255..937e68993ea8 100644 --- a/src/material-examples/table-overview/table-overview-example.ts +++ b/src/material-examples/table-overview/table-overview-example.ts @@ -10,6 +10,9 @@ import 'rxjs/add/operator/map'; import 'rxjs/add/operator/distinctUntilChanged'; import 'rxjs/add/operator/debounceTime'; +/** + * @title Feature-rich data table + */ @Component({ selector: 'table-overview-example', styleUrls: ['table-overview-example.css'], diff --git a/src/material-examples/table-pagination/table-pagination-example.ts b/src/material-examples/table-pagination/table-pagination-example.ts index 730b0437355d..5cc82408607f 100644 --- a/src/material-examples/table-pagination/table-pagination-example.ts +++ b/src/material-examples/table-pagination/table-pagination-example.ts @@ -7,6 +7,9 @@ import 'rxjs/add/operator/startWith'; import 'rxjs/add/observable/merge'; import 'rxjs/add/operator/map'; +/** + * @title Table with pagination + */ @Component({ selector: 'table-pagination-example', styleUrls: ['table-pagination-example.css'], diff --git a/src/material-examples/table-sorting/table-sorting-example.ts b/src/material-examples/table-sorting/table-sorting-example.ts index 9578c59b1172..bb1597fee09e 100644 --- a/src/material-examples/table-sorting/table-sorting-example.ts +++ b/src/material-examples/table-sorting/table-sorting-example.ts @@ -7,6 +7,9 @@ import 'rxjs/add/operator/startWith'; import 'rxjs/add/observable/merge'; import 'rxjs/add/operator/map'; +/** + * @title Table with sorting + */ @Component({ selector: 'table-sorting-example', styleUrls: ['table-sorting-example.css'], diff --git a/src/material-examples/tabs-overview/tabs-overview-example.ts b/src/material-examples/tabs-overview/tabs-overview-example.ts index 77ee5cb51922..96f70260ec78 100644 --- a/src/material-examples/tabs-overview/tabs-overview-example.ts +++ b/src/material-examples/tabs-overview/tabs-overview-example.ts @@ -1,6 +1,8 @@ import {Component} from '@angular/core'; - +/** + * @title Basic tabs + */ @Component({ selector: 'tabs-overview-example', templateUrl: 'tabs-overview-example.html', diff --git a/src/material-examples/tabs-template-label/tabs-template-label-example.ts b/src/material-examples/tabs-template-label/tabs-template-label-example.ts index 3b9f436e4b99..fe7d79d68874 100644 --- a/src/material-examples/tabs-template-label/tabs-template-label-example.ts +++ b/src/material-examples/tabs-template-label/tabs-template-label-example.ts @@ -1,6 +1,8 @@ import {Component} from '@angular/core'; - +/** + * @title Coming soon! + */ @Component({ selector: 'tabs-template-label-example', templateUrl: 'tabs-template-label-example.html', diff --git a/src/material-examples/toolbar-multirow/toolbar-multirow-example.ts b/src/material-examples/toolbar-multirow/toolbar-multirow-example.ts index 558bf8cebda8..3ad5317325d6 100644 --- a/src/material-examples/toolbar-multirow/toolbar-multirow-example.ts +++ b/src/material-examples/toolbar-multirow/toolbar-multirow-example.ts @@ -1,6 +1,8 @@ import {Component} from '@angular/core'; - +/** + * @title Multi-row toolbar + */ @Component({ selector: 'toolbar-multirow-example', templateUrl: 'toolbar-multirow-example.html', diff --git a/src/material-examples/toolbar-overview/toolbar-overview-example.ts b/src/material-examples/toolbar-overview/toolbar-overview-example.ts index 515d63252a22..5d543043abe4 100644 --- a/src/material-examples/toolbar-overview/toolbar-overview-example.ts +++ b/src/material-examples/toolbar-overview/toolbar-overview-example.ts @@ -1,6 +1,8 @@ import {Component} from '@angular/core'; - +/** + * @title Basic toolbar + */ @Component({ selector: 'toolbar-overview-example', templateUrl: 'toolbar-overview-example.html', diff --git a/src/material-examples/tooltip-overview/tooltip-overview-example.ts b/src/material-examples/tooltip-overview/tooltip-overview-example.ts index 97b72348178a..ffb53c02b102 100644 --- a/src/material-examples/tooltip-overview/tooltip-overview-example.ts +++ b/src/material-examples/tooltip-overview/tooltip-overview-example.ts @@ -1,6 +1,8 @@ import {Component} from '@angular/core'; - +/** + * @title Basic tooltip + */ @Component({ selector: 'tooltip-overview-example', templateUrl: 'tooltip-overview-example.html', diff --git a/src/material-examples/tooltip-position/tooltip-position-example.ts b/src/material-examples/tooltip-position/tooltip-position-example.ts index d505c8aee51f..12741b773e48 100644 --- a/src/material-examples/tooltip-position/tooltip-position-example.ts +++ b/src/material-examples/tooltip-position/tooltip-position-example.ts @@ -1,6 +1,8 @@ import {Component} from '@angular/core'; - +/** + * @title Tooltip with custom position + */ @Component({ selector: 'tooltip-position-example', templateUrl: 'tooltip-position-example.html', diff --git a/tools/gulp/gulpfile.ts b/tools/gulp/gulpfile.ts index 846869fa8465..6d671cf6f631 100644 --- a/tools/gulp/gulpfile.ts +++ b/tools/gulp/gulpfile.ts @@ -14,6 +14,7 @@ import './tasks/e2e'; import './tasks/lint'; import './tasks/publish'; import './tasks/screenshots'; +import './tasks/examples'; import './tasks/unit-test'; import './tasks/aot'; import './tasks/payload'; diff --git a/tools/gulp/tasks/examples.ts b/tools/gulp/tasks/examples.ts new file mode 100644 index 000000000000..2a2a592610b5 --- /dev/null +++ b/tools/gulp/tasks/examples.ts @@ -0,0 +1,235 @@ +import {task} from 'gulp'; +import {sync as glob} from 'glob'; +import * as fs from 'fs'; +import * as path from 'path'; +import * as ts from 'typescript'; +import {buildConfig} from 'material2-build-tools'; +const {packagesDir} = buildConfig; + +interface ExampleMetadata { + component: string; + sourcePath: string; + id: string; + title: string; + additionalComponents: string[]; + additionalFiles: string[]; + selectorName: string[]; +} + +interface ParsedMetadata { + primary: boolean; + component: string; + title: string; + templateUrl: string; +} + +interface ParsedMetadataResults { + primaryComponent: ParsedMetadata; + secondaryComponents: ParsedMetadata[]; +} + +/** Path to find the examples */ +const examplesPath = path.join(packagesDir, 'material-examples'); + +/** Output path of the module that is being created */ +const outputModuleFilename = path.join(examplesPath, 'example-module.ts'); + +/** Build ecmascript module import statements */ +function buildImportsTemplate(metadata: ExampleMetadata): string { + const components = metadata.additionalComponents.concat(metadata.component); + + // Create a relative path to the source file of the current example. + // The relative path will be used inside of a TypeScript import statement. + const relativeSrcPath = path + .relative('./src/material-examples', metadata.sourcePath) + .replace(/\\/g, '') + .replace('.ts', ''); + + return `import {${components.join(',')}} from './${relativeSrcPath}'; +`; +} + +/** + * Builds the examples metadata including title, component, etc. + */ +function buildExamplesTemplate(metadata: ExampleMetadata): string { + // if no additional files or selectors were provided, + // return null since we don't care about if these were not found + const additionalFiles = metadata.additionalFiles.length ? + JSON.stringify(metadata.additionalFiles) : 'null'; + + const selectorName = metadata.selectorName.length ? + `'${metadata.selectorName.join(', ')}'` : 'null'; + + return `'${metadata.id}': { + title: '${metadata.title}', + component: ${metadata.component}, + additionalFiles: ${additionalFiles}, + selectorName: ${selectorName} + }, + `; +} + +/** + * Build the list of components template + */ +function buildListTemplate(metadata: ExampleMetadata): string { + const components = metadata.additionalComponents.concat(metadata.component); + return `${components.join(',')}, + `; +} + +/** + * Builds the template for the examples module + */ +function generateExampleNgModule(extractedMetadata: ExampleMetadata[]): string { + return ` +/* tslint:disable */ +/** DO NOT MANUALLY EDIT THIS FILE, IT IS GENERATED VIA GULP 'build-examples-module' */ +import {NgModule} from '@angular/core'; +import {FormsModule, ReactiveFormsModule} from '@angular/forms'; +import {CommonModule} from '@angular/common'; +import {ExampleMaterialModule} from './material-module'; + +export interface LiveExample { + title: string; + component: any; + additionalFiles?: string[]; + selectorName?: string; +} + +${extractedMetadata.map(r => buildImportsTemplate(r)).join('').trim()} + +export const EXAMPLE_COMPONENTS = { + ${extractedMetadata.map(r => buildExamplesTemplate(r)).join('').trim()} +}; + +export const EXAMPLE_LIST = [ + ${extractedMetadata.map(r => buildListTemplate(r)).join('').trim()} +]; + +@NgModule({ + declarations: EXAMPLE_LIST, + entryComponents: EXAMPLE_LIST, + imports: [ + ExampleMaterialModule, + FormsModule, + ReactiveFormsModule, + CommonModule + ] +}) +export class ExampleModule { } +`; +} + +/** + * Given a string that is a camel or pascal case, + * this function will convert to dash case. + */ +function convertToDashCase(name: string): string { + name = name.replace(/[A-Z]/g, ' $&'); + name = name.toLowerCase().trim(); + return name.split(' ').join('-'); +} + +/** + * Parse the AST of a file and get metadata about it + */ +function parseExampleMetadata(fileName: string, sourceContent: string): ParsedMetadataResults { + const sourceFile = ts.createSourceFile( + fileName, sourceContent, ts.ScriptTarget.Latest, false, ts.ScriptKind.TS); + + const metas: any[] = []; + + const visit = (node: any): void => { + if (node.kind === ts.SyntaxKind.ClassDeclaration) { + const meta: any = { + component: node.name.text + }; + + if (node.jsDoc && node.jsDoc.length) { + for (const doc of node.jsDoc) { + if (doc.tags && doc.tags.length) { + for (const tag of doc.tags) { + const tagValue = tag.comment; + const tagName = tag.tagName.text; + if (tagName === 'title') { + meta.title = tagValue; + meta.primary = true; + } + } + } + } + } + + if (node.decorators && node.decorators.length) { + for (const decorator of node.decorators) { + if (decorator.expression.expression.text === 'Component') { + for (const arg of decorator.expression.arguments) { + for (const prop of arg.properties) { + const name = prop.name.text; + const value = prop.initializer.text; + meta[name] = value; + } + } + + metas.push(meta); + } + } + } + } + + ts.forEachChild(node, visit); + }; + + visit(sourceFile); + + return { + primaryComponent: metas.find(m => m.primary), + secondaryComponents: metas.filter(m => !m.primary) + }; +} + +/** + * Creates the examples module and metadata + */ +task('build-examples-module', () => { + const results: ExampleMetadata[] = []; + + const matchedFiles = glob(path.join(examplesPath, '**/*.ts')); + for (const sourcePath of matchedFiles) { + const sourceContent = fs.readFileSync(sourcePath, 'utf-8'); + const { primaryComponent, secondaryComponents } = + parseExampleMetadata(sourcePath, sourceContent); + + if (primaryComponent) { + // Generate a unique id for the component by converting the class name to dash-case. + const id = convertToDashCase(primaryComponent.component.replace('Example', '')); + + const example: ExampleMetadata = { + sourcePath, + id, + component: primaryComponent.component, + title: primaryComponent.title, + additionalComponents: [], + additionalFiles: [], + selectorName: [] + }; + + if (secondaryComponents.length) { + example.selectorName.push(example.component); + + for (const meta of secondaryComponents) { + example.additionalComponents.push(meta.component); + example.additionalFiles.push(meta.templateUrl); + example.selectorName.push(meta.component); + } + } + + results.push(example); + } + } + + const generatedModuleFile = generateExampleNgModule(results); + fs.writeFileSync(outputModuleFilename, generatedModuleFile); +});