diff --git a/.gitignore b/.gitignore index 9804dad5288..3898d1d9a05 100644 --- a/.gitignore +++ b/.gitignore @@ -6,6 +6,9 @@ /deploy /screenshots +# Example module file will be auto-generated. +/src/material-examples/example-module.ts + # dependencies node_modules /bower_components diff --git a/src/material-examples/example-data.ts b/src/material-examples/example-data.ts index 97275fb6fb7..74e58afe6cb 100644 --- a/src/material-examples/example-data.ts +++ b/src/material-examples/example-data.ts @@ -1,6 +1,7 @@ +// The example-module file will be auto-generated. As soon as the +// examples are being compiled, the module file will be generated. import {EXAMPLE_COMPONENTS} from './example-module'; - /** * Example data * with information about Component name, selector, files used in example, and path to examples diff --git a/src/material-examples/example-module.ts b/src/material-examples/example-module.ts deleted file mode 100644 index 3a8ac14a153..00000000000 --- a/src/material-examples/example-module.ts +++ /dev/null @@ -1,758 +0,0 @@ - -/* 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'; -import {AutocompleteDisplayExample} from './autocomplete-display/autocomplete-display-example'; -import {AutocompleteFilterExample} from './autocomplete-filter/autocomplete-filter-example'; -import {AutocompleteOverviewExample} from './autocomplete-overview/autocomplete-overview-example'; -import {AutocompleteSimpleExample} from './autocomplete-simple/autocomplete-simple-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 {CardFancyExample} from './card-fancy/card-fancy-example'; -import {CardOverviewExample} from './card-overview/card-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 {ChipsInputExample} from './chips-input/chips-input-example'; -import {ChipsOverviewExample} from './chips-overview/chips-overview-example'; -import {ChipsStackedExample} from './chips-stacked/chips-stacked-example'; -import {DatepickerApiExample} from './datepicker-api/datepicker-api-example'; -import {DatepickerCustomIconExample} from './datepicker-custom-icon/datepicker-custom-icon-example'; -import {DatepickerDisabledExample} from './datepicker-disabled/datepicker-disabled-example'; -import {DatepickerEventsExample} from './datepicker-events/datepicker-events-example'; -import {DatepickerFilterExample} from './datepicker-filter/datepicker-filter-example'; -import {DatepickerFormatsExample} from './datepicker-formats/datepicker-formats-example'; -import {DatepickerLocaleExample} from './datepicker-locale/datepicker-locale-example'; -import {DatepickerMinMaxExample} from './datepicker-min-max/datepicker-min-max-example'; -import {DatepickerMomentExample} from './datepicker-moment/datepicker-moment-example'; -import {DatepickerOverviewExample} from './datepicker-overview/datepicker-overview-example'; -import {DatepickerStartViewExample} from './datepicker-start-view/datepicker-start-view-example'; -import {DatepickerTouchExample} from './datepicker-touch/datepicker-touch-example'; -import {DatepickerValueExample} from './datepicker-value/datepicker-value-example'; -import {DialogContentExampleDialog,DialogContentExample} from './dialog-content/dialog-content-example'; -import {DialogDataExampleDialog,DialogDataExample} from './dialog-data/dialog-data-example'; -import {DialogElementsExampleDialog,DialogElementsExample} from './dialog-elements/dialog-elements-example'; -import {DialogOverviewExampleDialog,DialogOverviewExample} from './dialog-overview/dialog-overview-example'; -import {DividerOverviewExample} from './divider-overview/divider-overview-example'; -import {ElevationOverviewExample} from './elevation-overview/elevation-overview-example'; -import {ExpansionOverviewExample} from './expansion-overview/expansion-overview-example'; -import {ExpansionStepsExample} from './expansion-steps/expansion-steps-example'; -import {MyTelInput,FormFieldCustomControlExample} from './form-field-custom-control/form-field-custom-control-example'; -import {FormFieldErrorExample} from './form-field-error/form-field-error-example'; -import {FormFieldHintExample} from './form-field-hint/form-field-hint-example'; -import {FormFieldLabelExample} from './form-field-label/form-field-label-example'; -import {FormFieldOverviewExample} from './form-field-overview/form-field-overview-example'; -import {FormFieldPrefixSuffixExample} from './form-field-prefix-suffix/form-field-prefix-suffix-example'; -import {FormFieldThemingExample} from './form-field-theming/form-field-theming-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 {InputAutosizeTextareaExample} from './input-autosize-textarea/input-autosize-textarea-example'; -import {InputClearableExample} from './input-clearable/input-clearable-example'; -import {InputErrorStateMatcherExample} from './input-error-state-matcher/input-error-state-matcher-example'; -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 {ListSelectionExample} from './list-selection/list-selection-example'; -import {MenuIconsExample} from './menu-icons/menu-icons-example'; -import {MenuOverviewExample} from './menu-overview/menu-overview-example'; -import {NestedMenuExample} from './nested-menu/nested-menu-example'; -import {PaginatorConfigurableExample} from './paginator-configurable/paginator-configurable-example'; -import {PaginatorOverviewExample} from './paginator-overview/paginator-overview-example'; -import {ProgressBarBufferExample} from './progress-bar-buffer/progress-bar-buffer-example'; -import {ProgressBarConfigurableExample} from './progress-bar-configurable/progress-bar-configurable-example'; -import {ProgressBarDeterminateExample} from './progress-bar-determinate/progress-bar-determinate-example'; -import {ProgressBarIndeterminateExample} from './progress-bar-indeterminate/progress-bar-indeterminate-example'; -import {ProgressBarQueryExample} from './progress-bar-query/progress-bar-query-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 {SelectCustomTriggerExample} from './select-custom-trigger/select-custom-trigger-example'; -import {SelectDisabledExample} from './select-disabled/select-disabled-example'; -import {SelectErrorStateMatcherExample} from './select-error-state-matcher/select-error-state-matcher-example'; -import {SelectFormExample} from './select-form/select-form-example'; -import {SelectHintErrorExample} from './select-hint-error/select-hint-error-example'; -import {SelectMultipleExample} from './select-multiple/select-multiple-example'; -import {SelectNoRippleExample} from './select-no-ripple/select-no-ripple-example'; -import {SelectOptgroupExample} from './select-optgroup/select-optgroup-example'; -import {SelectOverviewExample} from './select-overview/select-overview-example'; -import {SelectPanelClassExample} from './select-panel-class/select-panel-class-example'; -import {SelectResetExample} from './select-reset/select-reset-example'; -import {SelectValueBindingExample} from './select-value-binding/select-value-binding-example'; -import {SidenavAutosizeExample} from './sidenav-autosize/sidenav-autosize-example'; -import {SidenavDisableCloseExample} from './sidenav-disable-close/sidenav-disable-close-example'; -import {SidenavDrawerOverviewExample} from './sidenav-drawer-overview/sidenav-drawer-overview-example'; -import {SidenavFixedExample} from './sidenav-fixed/sidenav-fixed-example'; -import {SidenavModeExample} from './sidenav-mode/sidenav-mode-example'; -import {SidenavOpenCloseExample} from './sidenav-open-close/sidenav-open-close-example'; -import {SidenavOverviewExample} from './sidenav-overview/sidenav-overview-example'; -import {SidenavPositionExample} from './sidenav-position/sidenav-position-example'; -import {SidenavResponsiveExample} from './sidenav-responsive/sidenav-responsive-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 {StepperOverviewExample} from './stepper-overview/stepper-overview-example'; -import {TableBasicExample} from './table-basic/table-basic-example'; -import {TableFilteringExample} from './table-filtering/table-filtering-example'; -import {TableHttpExample} from './table-http/table-http-example'; -import {TableOverviewExample} from './table-overview/table-overview-example'; -import {TablePaginationExample} from './table-pagination/table-pagination-example'; -import {TableSelectionExample} from './table-selection/table-selection-example'; -import {TableSortingExample} from './table-sorting/table-sorting-example'; -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 {TooltipDelayExample} from './tooltip-delay/tooltip-delay-example'; -import {TooltipPositionExample} from './tooltip-position/tooltip-position-example'; -import {TooltipManualExample} from './tooltip-manual/tooltip-manual-example'; -import {TooltipModifiedDefaultsExample} from './tooltip-modified-defaults/tooltip-modified-defaults-example'; - -export interface LiveExample { - title: string; - component: any; - additionalFiles?: string[]; - selectorName?: string; -} - -export const EXAMPLE_COMPONENTS: {[key: string]: LiveExample} = { - 'autocomplete-display': { - title: 'Display value autocomplete', - component: AutocompleteDisplayExample - }, - 'autocomplete-filter': { - title: 'Filter autocomplete', - component: AutocompleteFilterExample - }, - 'autocomplete-overview': { - title: 'Autocomplete overview', - component: AutocompleteOverviewExample - }, - 'autocomplete-simple': { - title: 'Simple autocomplete', - component: AutocompleteSimpleExample - }, - 'button-overview': { - title: 'Basic buttons', - component: ButtonOverviewExample - }, - 'button-toggle-exclusive': { - title: 'Exclusive selection', - component: ButtonToggleExclusiveExample - }, - 'button-toggle-overview': { - title: 'Basic button-toggles', - component: ButtonToggleOverviewExample - }, - 'button-types': { - title: 'Button varieties', - component: ButtonTypesExample - }, - 'card-fancy': { - title: 'Card with multiple sections', - component: CardFancyExample - }, - 'card-overview': { - title: 'Basic cards', - component: CardOverviewExample - }, - 'cdk-table-basic': { - title: 'Basic CDK data-table', - component: CdkTableBasicExample - }, - 'checkbox-configurable': { - title: 'Configurable checkbox', - component: CheckboxConfigurableExample - }, - 'checkbox-overview': { - title: 'Basic checkboxes', - component: CheckboxOverviewExample - }, - 'chips-input': { - title: 'Chips with input', - component: ChipsInputExample - }, - 'chips-overview': { - title: 'Basic chips', - component: ChipsOverviewExample - }, - 'chips-stacked': { - title: 'Stacked chips', - component: ChipsStackedExample - }, - 'datepicker-api': { - title: 'Datepicker open method', - component: DatepickerApiExample - }, - 'datepicker-custom-icon': { - title: 'Datepicker with custom icon', - component: DatepickerCustomIconExample - }, - 'datepicker-disabled': { - title: 'Disabled datepicker', - component: DatepickerDisabledExample - }, - 'datepicker-events': { - title: 'Datepicker input and change events', - component: DatepickerEventsExample - }, - 'datepicker-filter': { - title: 'Datepicker with filter validation', - component: DatepickerFilterExample - }, - 'datepicker-formats': { - title: 'Datepicker with custom formats', - component: DatepickerFormatsExample - }, - 'datepicker-locale': { - title: 'Datepicker with different locale', - component: DatepickerLocaleExample - }, - 'datepicker-min-max': { - title: 'Datepicker with min & max validation', - component: DatepickerMinMaxExample - }, - 'datepicker-moment': { - title: 'Datepicker that uses Moment.js dates', - component: DatepickerMomentExample - }, - 'datepicker-overview': { - title: 'Basic datepicker', - component: DatepickerOverviewExample - }, - 'datepicker-start-view': { - title: 'Datepicker start date', - component: DatepickerStartViewExample - }, - 'datepicker-touch': { - title: 'Datepicker touch UI', - component: DatepickerTouchExample - }, - 'datepicker-value': { - title: 'Datepicker selected value', - component: DatepickerValueExample - }, - 'dialog-content': { - title: 'Dialog with header, scrollable content and actions', - component: DialogContentExample, - additionalFiles: ["dialog-content-example-dialog.html"], - selectorName: 'DialogContentExample, DialogContentExampleDialog' - }, - 'dialog-data': { - title: 'Injecting data when opening a dialog', - component: DialogDataExample, - additionalFiles: ["dialog-data-example-dialog.html"], - selectorName: 'DialogDataExample, DialogDataExampleDialog' - }, - 'dialog-elements': { - title: 'Dialog elements', - component: DialogElementsExample, - additionalFiles: ["dialog-elements-example-dialog.html"], - selectorName: 'DialogElementsExample, DialogElementsExampleDialog' - }, - 'dialog-overview': { - title: 'Dialog Overview', - component: DialogOverviewExample, - additionalFiles: ["dialog-overview-example-dialog.html"], - selectorName: 'DialogOverviewExample, DialogOverviewExampleDialog' - }, - 'divider-overview': { - title: 'Basic divider', - component: DividerOverviewExample - }, - 'elevation-overview': { - title: 'Elevation CSS classes', - component: ElevationOverviewExample - }, - 'expansion-overview': { - title: 'Basic expansion panel', - component: ExpansionOverviewExample - }, - 'expansion-steps': { - title: 'Expansion panel as accordion', - component: ExpansionStepsExample - }, - 'form-field-custom-control': { - title: 'Form field with custom telephone number input control.', - component: FormFieldCustomControlExample, - additionalFiles: ["form-field-custom-control-example.html"], - selectorName: 'FormFieldCustomControlExample, MyTelInput' - }, - 'form-field-error': { - title: 'Form field with error messages', - component: FormFieldErrorExample - }, - 'form-field-hint': { - title: 'Form field with hints', - component: FormFieldHintExample - }, - 'form-field-label': { - title: 'Form field with label', - component: FormFieldLabelExample - }, - 'form-field-overview': { - title: 'Simple form field', - component: FormFieldOverviewExample - }, - 'form-field-prefix-suffix': { - title: 'Form field with prefix & suffix', - component: FormFieldPrefixSuffixExample - }, - 'form-field-theming': { - title: 'Form field theming', - component: FormFieldThemingExample - }, - '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-autosize-textarea': { - title: 'Auto-resizing textarea', - component: InputAutosizeTextareaExample - }, - 'input-clearable': { - title: 'Input with a clear button', - component: InputClearableExample - }, - 'input-error-state-matcher': { - title: 'Input with a custom ErrorStateMatcher', - component: InputErrorStateMatcherExample - }, - 'input-errors': { - title: 'Input with error messages', - component: InputErrorsExample - }, - 'input-form': { - title: 'Inputs in a form', - component: InputFormExample - }, - 'input-hint': { - title: 'Input with hints', - component: InputHintExample - }, - 'input-overview': { - title: 'Basic Inputs', - component: InputOverviewExample - }, - 'input-prefix-suffix': { - title: 'Inputs with prefixes and suffixes', - component: InputPrefixSuffixExample - }, - 'list-overview': { - title: 'Basic list', - component: ListOverviewExample - }, - 'list-sections': { - title: 'List with sections', - component: ListSectionsExample - }, - 'list-selection': { - title: 'List with selection', - component: ListSelectionExample - }, - 'menu-icons': { - title: 'Menu with icons', - component: MenuIconsExample - }, - 'menu-overview': { - title: 'Basic menu', - component: MenuOverviewExample - }, - 'nested-menu': { - title: 'Nested menu', - component: NestedMenuExample - }, - 'paginator-configurable': { - title: 'Configurable paginator', - component: PaginatorConfigurableExample - }, - 'paginator-overview': { - title: 'Paginator', - component: PaginatorOverviewExample - }, - 'progress-bar-buffer': { - title: 'Buffer progress-bar', - component: ProgressBarBufferExample - }, - 'progress-bar-configurable': { - title: 'Configurable progress-bar', - component: ProgressBarConfigurableExample - }, - 'progress-bar-determinate': { - title: 'Determinate progress-bar', - component: ProgressBarDeterminateExample - }, - 'progress-bar-indeterminate': { - title: 'Indeterminate progress-bar', - component: ProgressBarIndeterminateExample - }, - 'progress-bar-query': { - title: 'Query progress-bar', - component: ProgressBarQueryExample - }, - 'progress-spinner-configurable': { - title: 'Configurable progress spinner', - component: ProgressSpinnerConfigurableExample - }, - '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-custom-trigger': { - title: 'Select with custom trigger text', - component: SelectCustomTriggerExample - }, - 'select-disabled': { - title: 'Disabled select', - component: SelectDisabledExample - }, - 'select-error-state-matcher': { - title: 'Select with a custom ErrorStateMatcher', - component: SelectErrorStateMatcherExample - }, - 'select-form': { - title: 'Select in a form', - component: SelectFormExample - }, - 'select-hint-error': { - title: 'Select with form field features', - component: SelectHintErrorExample - }, - 'select-multiple': { - title: 'Select with multiple selection', - component: SelectMultipleExample - }, - 'select-no-ripple': { - title: 'Select with no option ripple', - component: SelectNoRippleExample - }, - 'select-optgroup': { - title: 'Select with option groups', - component: SelectOptgroupExample - }, - 'select-overview': { - title: 'Basic select', - component: SelectOverviewExample - }, - 'select-panel-class': { - title: 'Select with custom panel styling', - component: SelectPanelClassExample - }, - 'select-reset': { - title: 'Select with reset option', - component: SelectResetExample - }, - 'select-value-binding': { - title: 'Select with 2-way value binding', - component: SelectValueBindingExample - }, - 'sidenav-autosize': { - title: 'Autosize sidenav', - component: SidenavAutosizeExample - }, - 'sidenav-disable-close': { - title: 'Sidenav with custom escape and backdrop click behavior', - component: SidenavDisableCloseExample - }, - 'sidenav-drawer-overview': { - title: 'Basic drawer', - component: SidenavDrawerOverviewExample - }, - 'sidenav-fixed': { - title: 'Fixed sidenav', - component: SidenavFixedExample - }, - 'sidenav-mode': { - title: 'Sidenav with configurable mode', - component: SidenavModeExample - }, - 'sidenav-open-close': { - title: 'Sidenav open & close behavior', - component: SidenavOpenCloseExample - }, - 'sidenav-overview': { - title: 'Basic sidenav', - component: SidenavOverviewExample - }, - 'sidenav-position': { - title: 'Implicit main content with two sidenavs', - component: SidenavPositionExample - }, - 'sidenav-responsive': { - title: 'Responsive sidenav', - component: SidenavResponsiveExample - }, - 'slide-toggle-configurable': { - title: 'Configurable slide-toggle', - component: SlideToggleConfigurableExample - }, - 'slide-toggle-forms': { - title: 'Slide-toggle with forms', - component: SlideToggleFormsExample - }, - 'slide-toggle-overview': { - title: 'Basic slide-toggles', - component: SlideToggleOverviewExample - }, - 'slider-configurable': { - title: 'Configurable slider', - component: SliderConfigurableExample - }, - 'slider-overview': { - title: 'Basic slider', - component: SliderOverviewExample - }, - 'snack-bar-component': { - title: 'Snack-bar with a custom component', - component: SnackBarComponentExample, - additionalFiles: ["snack-bar-component-example-snack.html"], - selectorName: 'SnackBarComponentExample, PizzaPartyComponent' - }, - 'snack-bar-overview': { - title: 'Basic snack-bar', - component: SnackBarOverviewExample - }, - 'sort-overview': { - title: 'Sorting overview', - component: SortOverviewExample - }, - 'stepper-overview': { - title: 'Stepper overview', - component: StepperOverviewExample - }, - 'table-basic': { - title: 'Basic table', - component: TableBasicExample - }, - 'table-filtering': { - title: 'Table with filtering', - component: TableFilteringExample - }, - 'table-http': { - title: 'Table retrieving data through HTTP', - component: TableHttpExample - }, - 'table-overview': { - title: 'Data table with sorting, pagination, and filtering.', - component: TableOverviewExample - }, - 'table-pagination': { - title: 'Table with pagination', - component: TablePaginationExample - }, - 'table-selection': { - title: 'Table with selection', - component: TableSelectionExample - }, - 'table-sorting': { - title: 'Table with sorting', - component: TableSortingExample - }, - 'tabs-overview': { - title: 'Basic tabs', - component: TabsOverviewExample - }, - 'tabs-template-label': { - title: 'Complex Example', - 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-delay': { - title: 'Tooltips with delay', - component: TooltipDelayExample - }, - 'tooltip-manual': { - title: 'Tooltips with manual show button', - component: TooltipManualExample - }, - 'tooltip-modified-defaults': { - title: 'Tooltips with modified default values', - component: TooltipModifiedDefaultsExample - }, - 'tooltip-position': { - title: 'Tooltip with custom position', - component: TooltipPositionExample - }, -}; - -export const EXAMPLE_LIST = [ - AutocompleteDisplayExample, - AutocompleteFilterExample, - AutocompleteOverviewExample, - AutocompleteSimpleExample, - ButtonOverviewExample, - ButtonToggleExclusiveExample, - ButtonToggleOverviewExample, - ButtonTypesExample, - CardFancyExample, - CardOverviewExample, - CdkTableBasicExample, - CheckboxConfigurableExample, - CheckboxOverviewExample, - ChipsInputExample, - ChipsOverviewExample, - ChipsStackedExample, - DatepickerApiExample, - DatepickerCustomIconExample, - DatepickerDisabledExample, - DatepickerEventsExample, - DatepickerFilterExample, - DatepickerFormatsExample, - DatepickerLocaleExample, - DatepickerMinMaxExample, - DatepickerMomentExample, - DatepickerOverviewExample, - DatepickerStartViewExample, - DatepickerTouchExample, - DatepickerValueExample, - DialogContentExampleDialog,DialogContentExample, - DialogDataExampleDialog,DialogDataExample, - DialogElementsExampleDialog,DialogElementsExample, - DialogOverviewExampleDialog,DialogOverviewExample, - DividerOverviewExample, - ElevationOverviewExample, - ExpansionOverviewExample, - ExpansionStepsExample, - MyTelInput,FormFieldCustomControlExample, - FormFieldErrorExample, - FormFieldHintExample, - FormFieldLabelExample, - FormFieldOverviewExample, - FormFieldPrefixSuffixExample, - FormFieldThemingExample, - GridListDynamicExample, - GridListOverviewExample, - IconOverviewExample, - IconSvgExample, - InputAutosizeTextareaExample, - InputClearableExample, - InputErrorStateMatcherExample, - InputErrorsExample, - InputFormExample, - InputHintExample, - InputOverviewExample, - InputPrefixSuffixExample, - ListOverviewExample, - ListSectionsExample, - ListSelectionExample, - MenuIconsExample, - MenuOverviewExample, - NestedMenuExample, - PaginatorConfigurableExample, - PaginatorOverviewExample, - ProgressBarBufferExample, - ProgressBarConfigurableExample, - ProgressBarDeterminateExample, - ProgressBarIndeterminateExample, - ProgressBarQueryExample, - ProgressSpinnerConfigurableExample, - ProgressSpinnerOverviewExample, - RadioNgModelExample, - RadioOverviewExample, - SelectCustomTriggerExample, - SelectDisabledExample, - SelectErrorStateMatcherExample, - SelectFormExample, - SelectHintErrorExample, - SelectMultipleExample, - SelectNoRippleExample, - SelectOptgroupExample, - SelectOverviewExample, - SelectPanelClassExample, - SelectResetExample, - SelectValueBindingExample, - SidenavAutosizeExample, - SidenavDisableCloseExample, - SidenavDrawerOverviewExample, - SidenavFixedExample, - SidenavModeExample, - SidenavOpenCloseExample, - SidenavOverviewExample, - SidenavPositionExample, - SidenavResponsiveExample, - SlideToggleConfigurableExample, - SlideToggleFormsExample, - SlideToggleOverviewExample, - SliderConfigurableExample, - SliderOverviewExample, - PizzaPartyComponent,SnackBarComponentExample, - SnackBarOverviewExample, - SortOverviewExample, - StepperOverviewExample, - TableBasicExample, - TableFilteringExample, - TableHttpExample, - TableOverviewExample, - TablePaginationExample, - TableSelectionExample, - TableSortingExample, - TabsOverviewExample, - TabsTemplateLabelExample, - ToolbarMultirowExample, - ToolbarOverviewExample, - TooltipOverviewExample, - TooltipDelayExample, - TooltipManualExample, - TooltipModifiedDefaultsExample, - TooltipPositionExample, -]; - -@NgModule({ - declarations: EXAMPLE_LIST, - entryComponents: EXAMPLE_LIST, - imports: [ - ExampleMaterialModule, - FormsModule, - ReactiveFormsModule, - CommonModule - ] -}) -export class ExampleModule { } diff --git a/src/material-examples/public-api.ts b/src/material-examples/public-api.ts index 570355e84a8..e660e526d86 100644 --- a/src/material-examples/public-api.ts +++ b/src/material-examples/public-api.ts @@ -1,4 +1,7 @@ export * from './example-data'; + +// The example-module file will be auto-generated. As soon as the +// examples are being compiled, the module file will be generated. export * from './example-module'; export * from './list-overview/list-overview-example'; diff --git a/tools/gulp/gulpfile.ts b/tools/gulp/gulpfile.ts index 95fd1fe355f..75c5d071e97 100644 --- a/tools/gulp/gulpfile.ts +++ b/tools/gulp/gulpfile.ts @@ -12,7 +12,7 @@ createPackageBuildTasks(cdkPackage); createPackageBuildTasks(cdkExperimentalPackage); createPackageBuildTasks(materialPackage); createPackageBuildTasks(materialExperimentalPackage); -createPackageBuildTasks(examplesPackage); +createPackageBuildTasks(examplesPackage, ['build-examples-module']); createPackageBuildTasks(momentAdapterPackage); import './tasks/aot'; @@ -24,7 +24,7 @@ import './tasks/default'; import './tasks/development'; import './tasks/docs'; import './tasks/e2e'; -import './tasks/examples'; +import './tasks/example-module'; import './tasks/lint'; import './tasks/material-release'; import './tasks/payload'; diff --git a/tools/gulp/tasks/examples.ts b/tools/gulp/tasks/example-module.ts similarity index 99% rename from tools/gulp/tasks/examples.ts rename to tools/gulp/tasks/example-module.ts index a780e02bc67..32339ac953c 100644 --- a/tools/gulp/tasks/examples.ts +++ b/tools/gulp/tasks/example-module.ts @@ -1,9 +1,10 @@ import {task} from 'gulp'; import {sync as glob} from 'glob'; +import {buildConfig} from 'material2-build-tools'; 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 { diff --git a/tools/package-tools/gulp/build-tasks-gulp.ts b/tools/package-tools/gulp/build-tasks-gulp.ts index 8d715fa83d8..f0995746d07 100644 --- a/tools/package-tools/gulp/build-tasks-gulp.ts +++ b/tools/package-tools/gulp/build-tasks-gulp.ts @@ -18,8 +18,12 @@ const htmlMinifierOptions = { removeAttributeQuotes: false }; -/** Creates a set of gulp tasks that can build the specified package. */ -export function createPackageBuildTasks(buildPackage: BuildPackage) { +/** + * Creates a set of gulp tasks that can build the specified package. + * @param buildPackage Build package for which the gulp tasks will be generated + * @param preBuildTasks List of gulp tasks that should run before building the package. + */ +export function createPackageBuildTasks(buildPackage: BuildPackage, preBuildTasks: string[] = []) { // Name of the package build tasks for Gulp. const taskName = buildPackage.name; @@ -42,6 +46,8 @@ export function createPackageBuildTasks(buildPackage: BuildPackage) { task(`${taskName}:clean-build`, sequenceTask('clean', `${taskName}:build`)); task(`${taskName}:build`, sequenceTask( + // Run the pre build gulp tasks. + ...preBuildTasks, // Build all required packages before building. ...dependencyNames.map(pkgName => `${pkgName}:build`), // Build ESM and assets output.