fuse-angular/src/app/main/content/components/angular-material/example-components.ts

import { AutocompleteAutoActiveFirstOptionExample } from 'assets/angular-material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example';
import { AutocompleteDisplayExample } from 'assets/angular-material-examples/autocomplete-display/autocomplete-display-example';
import { AutocompleteFilterExample } from 'assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example';
import { AutocompleteOverviewExample } from 'assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example';
import { AutocompleteSimpleExample } from 'assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example';
import { ButtonOverviewExample } from 'assets/angular-material-examples/button-overview/button-overview-example';
import { ButtonToggleExclusiveExample } from 'assets/angular-material-examples/button-toggle-exclusive/button-toggle-exclusive-example';
import { ButtonToggleOverviewExample } from 'assets/angular-material-examples/button-toggle-overview/button-toggle-overview-example';
import { ButtonTypesExample } from 'assets/angular-material-examples/button-types/button-types-example';
import { CardFancyExample } from 'assets/angular-material-examples/card-fancy/card-fancy-example';
import { CardOverviewExample } from 'assets/angular-material-examples/card-overview/card-overview-example';
import { CdkTableBasicExample } from 'assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example';
import { CheckboxConfigurableExample } from 'assets/angular-material-examples/checkbox-configurable/checkbox-configurable-example';
import { CheckboxOverviewExample } from 'assets/angular-material-examples/checkbox-overview/checkbox-overview-example';
import { ChipsInputExample } from 'assets/angular-material-examples/chips-input/chips-input-example';
import { ChipsOverviewExample } from 'assets/angular-material-examples/chips-overview/chips-overview-example';
import { ChipsStackedExample } from 'assets/angular-material-examples/chips-stacked/chips-stacked-example';
import { DatepickerApiExample } from 'assets/angular-material-examples/datepicker-api/datepicker-api-example';
import { DatepickerDisabledExample } from 'assets/angular-material-examples/datepicker-disabled/datepicker-disabled-example';
import { DatepickerEventsExample } from 'assets/angular-material-examples/datepicker-events/datepicker-events-example';
import { DatepickerFilterExample } from 'assets/angular-material-examples/datepicker-filter/datepicker-filter-example';
import { DatepickerFormatsExample } from 'assets/angular-material-examples/datepicker-formats/datepicker-formats-example';
import { DatepickerLocaleExample } from 'assets/angular-material-examples/datepicker-locale/datepicker-locale-example';
import { DatepickerMinMaxExample } from 'assets/angular-material-examples/datepicker-min-max/datepicker-min-max-example';
import { DatepickerMomentExample } from 'assets/angular-material-examples/datepicker-moment/datepicker-moment-example';
import { DatepickerOverviewExample } from 'assets/angular-material-examples/datepicker-overview/datepicker-overview-example';
import { DatepickerStartViewExample } from 'assets/angular-material-examples/datepicker-start-view/datepicker-start-view-example';
import { DatepickerTouchExample } from 'assets/angular-material-examples/datepicker-touch/datepicker-touch-example';
import { DatepickerValueExample } from 'assets/angular-material-examples/datepicker-value/datepicker-value-example';
import { DialogContentExampleDialog, DialogContentExample } from 'assets/angular-material-examples/dialog-content/dialog-content-example';
import { DialogDataExampleDialog, DialogDataExample } from 'assets/angular-material-examples/dialog-data/dialog-data-example';
import { DialogElementsExampleDialog, DialogElementsExample } from 'assets/angular-material-examples/dialog-elements/dialog-elements-example';
import { DialogOverviewExampleDialog, DialogOverviewExample } from 'assets/angular-material-examples/dialog-overview/dialog-overview-example';
import { ElevationOverviewExample } from 'assets/angular-material-examples/elevation-overview/elevation-overview-example';
import { ExpansionOverviewExample } from 'assets/angular-material-examples/expansion-overview/expansion-overview-example';
import { ExpansionStepsExample } from 'assets/angular-material-examples/expansion-steps/expansion-steps-example';
import { MyTelInput, FormFieldCustomControlExample } from 'assets/angular-material-examples/form-field-custom-control/form-field-custom-control-example';
import { FormFieldErrorExample } from 'assets/angular-material-examples/form-field-error/form-field-error-example';
import { FormFieldHintExample } from 'assets/angular-material-examples/form-field-hint/form-field-hint-example';
import { FormFieldOverviewExample } from 'assets/angular-material-examples/form-field-overview/form-field-overview-example';
import { FormFieldPrefixSuffixExample } from 'assets/angular-material-examples/form-field-prefix-suffix/form-field-prefix-suffix-example';
import { FormFieldThemingExample } from 'assets/angular-material-examples/form-field-theming/form-field-theming-example';
import { GridListDynamicExample } from 'assets/angular-material-examples/grid-list-dynamic/grid-list-dynamic-example';
import { GridListOverviewExample } from 'assets/angular-material-examples/grid-list-overview/grid-list-overview-example';
import { IconOverviewExample } from 'assets/angular-material-examples/icon-overview/icon-overview-example';
import { InputClearableExample } from 'assets/angular-material-examples/input-clearable/input-clearable-example';
import { InputErrorStateMatcherExample } from 'assets/angular-material-examples/input-error-state-matcher/input-error-state-matcher-example';
import { InputErrorsExample } from 'assets/angular-material-examples/input-errors/input-errors-example';
import { InputFormExample } from 'assets/angular-material-examples/input-form/input-form-example';
import { InputHintExample } from 'assets/angular-material-examples/input-hint/input-hint-example';
import { InputOverviewExample } from 'assets/angular-material-examples/input-overview/input-overview-example';
import { InputPrefixSuffixExample } from 'assets/angular-material-examples/input-prefix-suffix/input-prefix-suffix-example';
import { ListOverviewExample } from 'assets/angular-material-examples/list-overview/list-overview-example';
import { ListSectionsExample } from 'assets/angular-material-examples/list-sections/list-sections-example';
import { ListSelectionExample } from 'assets/angular-material-examples/list-selection/list-selection-example';
import { MenuIconsExample } from 'assets/angular-material-examples/menu-icons/menu-icons-example';
import { MenuOverviewExample } from 'assets/angular-material-examples/menu-overview/menu-overview-example';
import { NestedMenuExample } from 'assets/angular-material-examples/nested-menu/nested-menu-example';
import { PaginatorConfigurableExample } from 'assets/angular-material-examples/paginator-configurable/paginator-configurable-example';
import { PaginatorOverviewExample } from 'assets/angular-material-examples/paginator-overview/paginator-overview-example';
import { ProgressBarBufferExample } from 'assets/angular-material-examples/progress-bar-buffer/progress-bar-buffer-example';
import { ProgressBarConfigurableExample } from 'assets/angular-material-examples/progress-bar-configurable/progress-bar-configurable-example';
import { ProgressBarDeterminateExample } from 'assets/angular-material-examples/progress-bar-determinate/progress-bar-determinate-example';
import { ProgressBarIndeterminateExample } from 'assets/angular-material-examples/progress-bar-indeterminate/progress-bar-indeterminate-example';
import { ProgressBarQueryExample } from 'assets/angular-material-examples/progress-bar-query/progress-bar-query-example';
import { ProgressSpinnerConfigurableExample } from 'assets/angular-material-examples/progress-spinner-configurable/progress-spinner-configurable-example';
import { ProgressSpinnerOverviewExample } from 'assets/angular-material-examples/progress-spinner-overview/progress-spinner-overview-example';
import { RadioNgModelExample } from 'assets/angular-material-examples/radio-ng-model/radio-ng-model-example';
import { RadioOverviewExample } from 'assets/angular-material-examples/radio-overview/radio-overview-example';
import { SelectCustomTriggerExample } from 'assets/angular-material-examples/select-custom-trigger/select-custom-trigger-example';
import { SelectDisabledExample } from 'assets/angular-material-examples/select-disabled/select-disabled-example';
import { SelectErrorStateMatcherExample } from 'assets/angular-material-examples/select-error-state-matcher/select-error-state-matcher-example';
import { SelectFormExample } from 'assets/angular-material-examples/select-form/select-form-example';
import { SelectHintErrorExample } from 'assets/angular-material-examples/select-hint-error/select-hint-error-example';
import { SelectMultipleExample } from 'assets/angular-material-examples/select-multiple/select-multiple-example';
import { SelectNoRippleExample } from 'assets/angular-material-examples/select-no-ripple/select-no-ripple-example';
import { SelectOptgroupExample } from 'assets/angular-material-examples/select-optgroup/select-optgroup-example';
import { SelectOverviewExample } from 'assets/angular-material-examples/select-overview/select-overview-example';
import { SelectPanelClassExample } from 'assets/angular-material-examples/select-panel-class/select-panel-class-example';
import { SelectResetExample } from 'assets/angular-material-examples/select-reset/select-reset-example';
import { SelectValueBindingExample } from 'assets/angular-material-examples/select-value-binding/select-value-binding-example';
import { SidenavOverviewExample } from 'assets/angular-material-examples/sidenav-overview/sidenav-overview-example';
import { SlideToggleConfigurableExample } from 'assets/angular-material-examples/slide-toggle-configurable/slide-toggle-configurable-example';
import { SlideToggleFormsExample } from 'assets/angular-material-examples/slide-toggle-forms/slide-toggle-forms-example';
import { SlideToggleOverviewExample } from 'assets/angular-material-examples/slide-toggle-overview/slide-toggle-overview-example';
import { SliderConfigurableExample } from 'assets/angular-material-examples/slider-configurable/slider-configurable-example';
import { SliderOverviewExample } from 'assets/angular-material-examples/slider-overview/slider-overview-example';
import { PizzaPartyComponent, SnackBarComponentExample } from 'assets/angular-material-examples/snack-bar-component/snack-bar-component-example';
import { SnackBarOverviewExample } from 'assets/angular-material-examples/snack-bar-overview/snack-bar-overview-example';
import { SortOverviewExample } from 'assets/angular-material-examples/sort-overview/sort-overview-example';
import { StepperOverviewExample } from 'assets/angular-material-examples/stepper-overview/stepper-overview-example';
import { TableBasicExample } from 'assets/angular-material-examples/table-basic/table-basic-example';
import { TableFilteringExample } from 'assets/angular-material-examples/table-filtering/table-filtering-example';
import { TableHttpExample } from 'assets/angular-material-examples/table-http/table-http-example';
import { TableOverviewExample } from 'assets/angular-material-examples/table-overview/table-overview-example';
import { TablePaginationExample } from 'assets/angular-material-examples/table-pagination/table-pagination-example';
import { TableSortingExample } from 'assets/angular-material-examples/table-sorting/table-sorting-example';
import { TabsOverviewExample } from 'assets/angular-material-examples/tabs-overview/tabs-overview-example';
import { TabsTemplateLabelExample } from 'assets/angular-material-examples/tabs-template-label/tabs-template-label-example';
import { ToolbarMultirowExample } from 'assets/angular-material-examples/toolbar-multirow/toolbar-multirow-example';
import { ToolbarOverviewExample } from 'assets/angular-material-examples/toolbar-overview/toolbar-overview-example';
import { TooltipOverviewExample } from 'assets/angular-material-examples/tooltip-overview/tooltip-overview-example';
import { TooltipPositionExample } from 'assets/angular-material-examples/tooltip-position/tooltip-position-example';
import { DatepickerCustomIconExample } from 'assets/angular-material-examples/datepicker-custom-icon/datepicker-custom-icon-example';
import { SidenavAutosizeExample } from 'assets/angular-material-examples/sidenav-autosize/sidenav-autosize-example';
import { SnackBarPositionExample } from 'assets/angular-material-examples/snack-bar-position/snack-bar-position-example';
import { TableSelectionExample } from 'assets/angular-material-examples/table-selection/table-selection-example';
import { TooltipDelayExample } from 'assets/angular-material-examples/tooltip-delay/tooltip-delay-example';
import { TooltipManualExample } from 'assets/angular-material-examples/tooltip-manual/tooltip-manual-example';
import { TooltipModifiedDefaultsExample } from 'assets/angular-material-examples/tooltip-modified-defaults/tooltip-modified-defaults-example';
import { DividerOverviewExample } from 'assets/angular-material-examples/divider-overview/divider-overview-example';
import { FormFieldLabelExample } from 'assets/angular-material-examples/form-field-label/form-field-label-example';
import { AutocompleteOptgroupExample } from 'assets/angular-material-examples/autocomplete-optgroup/autocomplete-optgroup-example';
import { BadgeOverviewExample } from 'assets/angular-material-examples/badge-overview/badge-overview-example';
import { BottomSheetOverviewExample, BottomSheetOverviewExampleSheet } from 'assets/angular-material-examples/bottom-sheet-overview/bottom-sheet-overview-example';
import { CdkTreeFlatExample } from 'assets/angular-material-examples/cdk-tree-flat/cdk-tree-flat-example';
import { CdkTreeNestedExample } from 'assets/angular-material-examples/cdk-tree-nested/cdk-tree-nested-example';
import { ChipsAutocompleteExample } from 'assets/angular-material-examples/chips-autocomplete/chips-autocomplete-example';
import { DatepickerColorExample } from 'assets/angular-material-examples/datepicker-color/datepicker-color-example';
import { DatepickerCustomHeaderExample, ExampleHeader } from 'assets/angular-material-examples/datepicker-custom-header/datepicker-custom-header-example';
import { DatepickerViewsSelectionExample } from 'assets/angular-material-examples/datepicker-views-selection/datepicker-views-selection-example';
import { ExpansionExpandCollapseAllExample } from 'assets/angular-material-examples/expansion-expand-collapse-all/expansion-expand-collapse-all-example';
import { FocusMonitorDirectivesExample } from 'assets/angular-material-examples/focus-monitor-directives/focus-monitor-directives-example';
import { FocusMonitorFocusViaExample } from 'assets/angular-material-examples/focus-monitor-focus-via/focus-monitor-focus-via-example';
import { FocusMonitorOverviewExample } from 'assets/angular-material-examples/focus-monitor-overview/focus-monitor-overview-example';
import { FormFieldAppearanceExample } from 'assets/angular-material-examples/form-field-appearance/form-field-appearance-example';
import { IconSvgExample } from 'assets/angular-material-examples/icon-svg/icon-svg-example';
import { SidenavBackdropExample } from 'assets/angular-material-examples/sidenav-backdrop/sidenav-backdrop-example';
import { SidenavDisableCloseExample } from 'assets/angular-material-examples/sidenav-disable-close/sidenav-disable-close-example';
import { SidenavDrawerOverviewExample } from 'assets/angular-material-examples/sidenav-drawer-overview/sidenav-drawer-overview-example';
import { SidenavFixedExample } from 'assets/angular-material-examples/sidenav-fixed/sidenav-fixed-example';
import { SidenavModeExample } from 'assets/angular-material-examples/sidenav-mode/sidenav-mode-example';
import { SidenavOpenCloseExample } from 'assets/angular-material-examples/sidenav-open-close/sidenav-open-close-example';
import { SidenavPositionExample } from 'assets/angular-material-examples/sidenav-position/sidenav-position-example';
import { SidenavResponsiveExample } from 'assets/angular-material-examples/sidenav-responsive/sidenav-responsive-example';
import { SliderFormattingExample } from 'assets/angular-material-examples/slider-formatting/slider-formatting-example';
import { StepperEditableExample } from 'assets/angular-material-examples/stepper-editable/stepper-editable-example';
import { StepperOptionalExample } from 'assets/angular-material-examples/stepper-optional/stepper-optional-example';
import { TableFooterRowExample } from 'assets/angular-material-examples/table-footer-row/table-footer-row-example';
import { TableNativeOnlyExample } from 'assets/angular-material-examples/table-native-only/table-native-only-example';
import { TextFieldAutofillDirectiveExample } from 'assets/angular-material-examples/text-field-autofill-directive/text-field-autofill-directive-example';
import { TextFieldAutofillMonitorExample } from 'assets/angular-material-examples/text-field-autofill-monitor/text-field-autofill-monitor-example';
import { TextFieldAutosizeTextareaExample } from 'assets/angular-material-examples/text-field-autosize-textarea/text-field-autosize-textarea-example';
import { TreeChecklistExample } from 'assets/angular-material-examples/tree-checklist/tree-checklist-example';
import { TreeDynamicExample } from 'assets/angular-material-examples/tree-dynamic/tree-dynamic-example';
import { TreeFlatOverviewExample } from 'assets/angular-material-examples/tree-flat-overview/tree-flat-overview-example';
import { TreeLoadmoreExample } from 'assets/angular-material-examples/tree-loadmore/tree-loadmore-example';
import { TreeNestedOverviewExample } from 'assets/angular-material-examples/tree-nested-overview/tree-nested-overview-example';

export const COMPONENT_MAP = {
    'autocomplete'    : [
        'autocomplete-overview',
        'autocomplete-auto-active-first-option',
        'autocomplete-display',
        'autocomplete-filter',
        'autocomplete-optgroup',
        'autocomplete-simple'
    ],
    'badge'           : [
        'badge-overview'
    ],
    'bottom-sheet'    : [
        'bottom-sheet-overview'
    ],
    'button'          : [
        'button-overview',
        'button-types'
    ],
    'button-toggle'   : [
        'button-toggle-overview',
        'button-toggle-exclusive'
    ],
    'card'            : [
        'card-overview',
        'card-fancy'
    ],
    // 'cdk-table'       : [
    //     'cdk-table-basic',
    //     'cdk-table-flat'
    // ],
    // 'cdk-tree'        : [
    //     'cdk-tree-nested'
    // ],
    'checkbox'        : [
        'checkbox-overview',
        'checkbox-configurable'
    ],
    'chips'           : [
        'chips-overview',
        'chips-autocomplete',
        'chips-input',
        'chips-stacked'
    ],
    'datepicker'      : [
        'datepicker-overview',
        'datepicker-api',
        'datepicker-color',
        'datepicker-custom-header',
        'datepicker-custom-icon',
        'datepicker-disabled',
        'datepicker-events',
        'datepicker-filter',
        'datepicker-formats',
        'datepicker-locale',
        'datepicker-min-max',
        'datepicker-moment',
        'datepicker-start-view',
        'datepicker-touch',
        'datepicker-value',
        'datepicker-views-selection'
    ],
    'dialog'          : [
        'dialog-overview',
        'dialog-content',
        'dialog-data',
        'dialog-elements'
    ],
    'divider'         : [
        'divider-overview'
    ],
    'elevation'       : [
        'elevation-overview'
    ],
    'expansion-panel' : [
        'expansion-overview',
        'expansion-expand-collapse-all',
        'expansion-steps'
    ],
    // 'focus-monitor'   : [
    //     'focus-monitor-overview',
    //     'focus-monitor-directives',
    //     'focus-monitor-focus-via'
    // ],
    'form-field'      : [
        'form-field-overview',
        'form-field-appearance',
        'form-field-custom-control',
        'form-field-error',
        'form-field-hint',
        'form-field-label',
        'form-field-prefix-suffix',
        'form-field-theming'
    ],
    'grid-list'       : [
        'grid-list-overview',
        'grid-list-dynamic'
    ],
    'icon'            : [
        'icon-overview',
        'icon-svg'
    ],
    'input'           : [
        'input-overview',
        'input-clearable',
        'input-error-state-matcher',
        'input-errors',
        'input-form',
        'input-hint',
        'input-prefix-suffix'
    ],
    'list'            : [
        'list-overview',
        'list-sections',
        'list-selection'
    ],
    'menu'            : [
        'menu-overview',
        'menu-icons',
        'nested-menu'
    ],
    'paginator'       : [
        'paginator-overview',
        'paginator-configurable'
    ],
    'progress-bar'    : [
        'progress-bar-buffer',
        'progress-bar-configurable',
        'progress-bar-determinate',
        'progress-bar-indeterminate',
        'progress-bar-query'
    ],
    'progress-spinner': [
        'progress-spinner-overview',
        'progress-spinner-configurable'
    ],
    'radio-button'    : [
        'radio-overview',
        'radio-ng-model'
    ],
    'select'          : [
        'select-overview',
        'select-custom-trigger',
        'select-disabled',
        'select-error-state-matcher',
        'select-form',
        'select-hint-error',
        'select-multiple',
        'select-no-ripple',
        'select-optgroup',
        'select-panel-class',
        'select-reset',
        'select-value-binding'
    ],
    'sidenav'         : [
        // 'sidenav-overview',
        'sidenav-drawer-overview',
        'sidenav-autosize',
        'sidenav-backdrop'
        // 'sidenav-disable-close',
        // 'sidenav-fixed',
        // 'sidenav-mode',
        // 'sidenav-open-close',
        // 'sidenav-position',
        // 'sidenav-responsive'
    ],
    'slide-toggle'    : [
        'slide-toggle-overview',
        'slide-toggle-configurable',
        'slide-toggle-forms'
    ],
    'slider'          : [
        'slider-overview',
        'slider-configurable',
        'slider-formatting'
    ],
    'snackbar'        : [
        'snack-bar-overview',
        'snack-bar-position'
    ],
    'sort-header'     : [
        'sort-overview'
    ],
    'stepper'         : [
        'stepper-overview',
        'stepper-editable',
        'stepper-optional'
    ],
    'table'           : [
        'table-overview',
        'table-basic',
        'table-filtering',
        'table-footer-row',
        'table-http',
        'table-native-only',
        'table-pagination',
        'table-selection',
        'table-sorting'
    ],
    'tabs'            : [
        'tabs-overview',
        'tabs-template-label'
    ],
    'text-field'      : [
        'text-field-autofill-directive',
        'text-field-autofill-monitor',
        'text-field-autosize-textarea'
    ],
    'toolbar'         : [
        'toolbar-overview',
        'toolbar-multirow'
    ],
    'tooltip'         : [
        'tooltip-overview',
        'tooltip-delay',
        'tooltip-manual',
        'tooltip-modified-defaults',
        'tooltip-position'
    ],
    'tree'            : [
        'tree-flat-overview',
        'tree-nested-overview',
        'tree-checklist',
        'tree-dynamic',
        'tree-loadmore'
    ]
};

export const EXAMPLE_COMPONENTS = {
    'autocomplete-auto-active-first-option': {
        title    : 'Highlight the first autocomplete option',
        component: AutocompleteAutoActiveFirstOptionExample
    },
    'autocomplete-display'                 : {
        title    : 'Display value autocomplete',
        component: AutocompleteDisplayExample
    },
    'autocomplete-filter'                  : {
        title    : 'Filter autocomplete',
        component: AutocompleteFilterExample
    },
    'autocomplete-optgroup'                : {
        title    : 'Option groups autocomplete',
        component: AutocompleteOptgroupExample
    },
    'autocomplete-overview'                : {
        title    : 'Autocomplete overview',
        component: AutocompleteOverviewExample
    },
    'autocomplete-simple'                  : {
        title    : 'Simple autocomplete',
        component: AutocompleteSimpleExample
    },
    'badge-overview'                       : {
        title    : 'Badge overview',
        component: BadgeOverviewExample
    },
    'bottom-sheet-overview'                : {
        title          : 'Bottom Sheet Overview',
        component      : BottomSheetOverviewExample,
        additionalFiles: ['bottom-sheet-overview-example-sheet.html'],
        selectorName   : 'BottomSheetOverviewExample, BottomSheetOverviewExampleSheet'
    },
    '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
    },
    'cdk-tree-flat'                        : {
        title    : 'Tree with flat nodes',
        component: CdkTreeFlatExample
    },
    'cdk-tree-nested'                      : {
        title    : 'Tree with nested nodes',
        component: CdkTreeNestedExample
    },
    'checkbox-configurable'                : {
        title    : 'Configurable checkbox',
        component: CheckboxConfigurableExample
    },
    'checkbox-overview'                    : {
        title    : 'Basic checkboxes',
        component: CheckboxOverviewExample
    },
    'chips-autocomplete'                   : {
        title    : 'Chips Autocomplete',
        component: ChipsAutocompleteExample
    },
    '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-color'                     : {
        title    : 'Datepicker palette colors',
        component: DatepickerColorExample
    },
    'datepicker-custom-header'             : {
        title       : 'Datepicker with custom calendar header',
        component   : DatepickerCustomHeaderExample,
        selectorName: 'DatepickerCustomHeaderExample, ExampleHeader'
    },
    '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
    },
    'datepicker-views-selection'           : {
        title    : 'Datepicker emulating a Year and month picker',
        component: DatepickerViewsSelectionExample
    },
    '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-expand-collapse-all'        : {
        title    : 'Accordion with expand/collapse all toggles',
        component: ExpansionExpandCollapseAllExample
    },
    'expansion-overview'                   : {
        title    : 'Basic expansion panel',
        component: ExpansionOverviewExample
    },
    'expansion-steps'                      : {
        title    : 'Expansion panel as accordion',
        component: ExpansionStepsExample
    },
    'focus-monitor-directives'             : {
        title    : 'Monitoring focus with FocusMonitor',
        component: FocusMonitorDirectivesExample
    },
    'focus-monitor-focus-via'              : {
        title    : 'Focusing with a specific FocusOrigin',
        component: FocusMonitorFocusViaExample
    },
    'focus-monitor-overview'               : {
        title    : 'Monitoring focus with FocusMonitor',
        component: FocusMonitorOverviewExample
    },
    'form-field-appearance'                : {
        title    : 'Form field appearance variants',
        component: FormFieldAppearanceExample
    },
    '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-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-backdrop'                     : {
        title    : 'Drawer with explicit backdrop setting',
        component: SidenavBackdropExample
    },
    '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-formatting'                    : {
        title    : 'Slider with custom thumb label formatting.',
        component: SliderFormattingExample
    },
    '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
    },
    'snack-bar-position'                   : {
        title    : 'Snack-bar with configurable position',
        component: SnackBarPositionExample
    },
    'sort-overview'                        : {
        title    : 'Sorting overview',
        component: SortOverviewExample
    },
    'stepper-editable'                     : {
        title    : 'Stepper with editable steps',
        component: StepperEditableExample
    },
    'stepper-optional'                     : {
        title    : 'Stepper with optional steps',
        component: StepperOptionalExample
    },
    'stepper-overview'                     : {
        title    : 'Stepper overview',
        component: StepperOverviewExample
    },
    'table-basic'                          : {
        title    : 'Basic table',
        component: TableBasicExample
    },
    'table-filtering'                      : {
        title    : 'Table with filtering',
        component: TableFilteringExample
    },
    'table-footer-row'                     : {
        title    : 'Footer row table',
        component: TableFooterRowExample
    },
    'table-http'                           : {
        title    : 'Table retrieving data through HTTP',
        component: TableHttpExample
    },
    'table-native-only'                    : {
        title    : 'Native `<table>` that only applies the Material styles',
        component: TableNativeOnlyExample
    },
    '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
    },
    'text-field-autofill-directive'        : {
        title    : 'Monitoring autofill state with cdkAutofill',
        component: TextFieldAutofillDirectiveExample
    },
    'text-field-autofill-monitor'          : {
        title    : 'Monitoring autofill state with AutofillMonitor',
        component: TextFieldAutofillMonitorExample
    },
    'text-field-autosize-textarea'         : {
        title    : 'Auto-resizing textarea',
        component: TextFieldAutosizeTextareaExample
    },
    'toolbar-multirow'                     : {
        title    : 'Multi-row toolbar',
        component: ToolbarMultirowExample
    },
    'toolbar-overview'                     : {
        title    : 'Basic toolbar',
        component: ToolbarOverviewExample
    },
    'tooltip-delay'                        : {
        title    : 'Tooltip with a show and hide delay',
        component: TooltipDelayExample
    },
    'tooltip-manual'                       : {
        title    : 'Tooltip that can be manually shown/hidden.',
        component: TooltipManualExample
    },
    'tooltip-modified-defaults'            : {
        title    : 'Tooltip with a show and hide delay',
        component: TooltipModifiedDefaultsExample
    },
    'tooltip-overview'                     : {
        title    : 'Basic tooltip',
        component: TooltipOverviewExample
    },
    'tooltip-position'                     : {
        title    : 'Tooltip with custom position',
        component: TooltipPositionExample
    },
    'tree-checklist'                       : {
        title    : 'Tree with checkboxes',
        component: TreeChecklistExample
    },
    'tree-dynamic'                         : {
        title    : 'Tree with dynamic data',
        component: TreeDynamicExample
    },
    'tree-flat-overview'                   : {
        title    : 'Tree with flat nodes',
        component: TreeFlatOverviewExample
    },
    'tree-loadmore'                        : {
        title    : 'Tree with partially loaded data',
        component: TreeLoadmoreExample
    },
    'tree-nested-overview'                 : {
        title    : 'Tree with nested nodes',
        component: TreeNestedOverviewExample
    }
};

export const EXAMPLE_LIST = [
    AutocompleteAutoActiveFirstOptionExample,
    AutocompleteDisplayExample,
    AutocompleteFilterExample,
    AutocompleteOptgroupExample,
    AutocompleteOverviewExample,
    AutocompleteSimpleExample,
    BadgeOverviewExample,
    BottomSheetOverviewExample, BottomSheetOverviewExampleSheet,
    ButtonOverviewExample,
    ButtonToggleExclusiveExample,
    ButtonToggleOverviewExample,
    ButtonTypesExample,
    CardFancyExample,
    CardOverviewExample,
    CdkTableBasicExample,
    CdkTreeFlatExample,
    CdkTreeNestedExample,
    CheckboxConfigurableExample,
    CheckboxOverviewExample,
    ChipsAutocompleteExample,
    ChipsInputExample,
    ChipsOverviewExample,
    ChipsStackedExample,
    DatepickerApiExample,
    DatepickerColorExample,
    DatepickerCustomHeaderExample, ExampleHeader,
    DatepickerCustomIconExample,
    DatepickerDisabledExample,
    DatepickerEventsExample,
    DatepickerFilterExample,
    DatepickerFormatsExample,
    DatepickerLocaleExample,
    DatepickerMinMaxExample,
    DatepickerMomentExample,
    DatepickerOverviewExample,
    DatepickerStartViewExample,
    DatepickerTouchExample,
    DatepickerValueExample,
    DatepickerViewsSelectionExample,
    DialogContentExample, DialogContentExampleDialog,
    DialogDataExample, DialogDataExampleDialog,
    DialogElementsExample, DialogElementsExampleDialog,
    DialogOverviewExample, DialogOverviewExampleDialog,
    DividerOverviewExample,
    ElevationOverviewExample,
    ExpansionExpandCollapseAllExample,
    ExpansionOverviewExample,
    ExpansionStepsExample,
    FocusMonitorDirectivesExample,
    FocusMonitorFocusViaExample,
    FocusMonitorOverviewExample,
    FormFieldAppearanceExample,
    FormFieldCustomControlExample, MyTelInput,
    FormFieldErrorExample,
    FormFieldHintExample,
    FormFieldLabelExample,
    FormFieldOverviewExample,
    FormFieldPrefixSuffixExample,
    FormFieldThemingExample,
    GridListDynamicExample,
    GridListOverviewExample,
    IconOverviewExample,
    IconSvgExample,
    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,
    SidenavBackdropExample,
    SidenavDisableCloseExample,
    SidenavDrawerOverviewExample,
    SidenavFixedExample,
    SidenavModeExample,
    SidenavOpenCloseExample,
    SidenavOverviewExample,
    SidenavPositionExample,
    SidenavResponsiveExample,
    SlideToggleConfigurableExample,
    SlideToggleFormsExample,
    SlideToggleOverviewExample,
    SliderConfigurableExample,
    SliderFormattingExample,
    SliderOverviewExample,
    SnackBarComponentExample, PizzaPartyComponent,
    SnackBarOverviewExample,
    SnackBarPositionExample,
    SortOverviewExample,
    StepperEditableExample,
    StepperOptionalExample,
    StepperOverviewExample,
    TableBasicExample,
    TableFilteringExample,
    TableFooterRowExample,
    TableHttpExample,
    TableNativeOnlyExample,
    TableOverviewExample,
    TablePaginationExample,
    TableSelectionExample,
    TableSortingExample,
    TabsOverviewExample,
    TabsTemplateLabelExample,
    TextFieldAutofillDirectiveExample,
    TextFieldAutofillMonitorExample,
    TextFieldAutosizeTextareaExample,
    ToolbarMultirowExample,
    ToolbarOverviewExample,
    TooltipDelayExample,
    TooltipManualExample,
    TooltipModifiedDefaultsExample,
    TooltipOverviewExample,
    TooltipPositionExample,
    TreeChecklistExample,
    TreeDynamicExample,
    TreeFlatOverviewExample,
    TreeLoadmoreExample,
    TreeNestedOverviewExample
];