import {
	Component,
	ViewEncapsulation,
  Input
} from '@angular/core';
import { AvatarDemoComponent } from './avatar-demo/avatar-demo.component';
import { ButtonDemoComponent } from './button-demo/button-demo.component';
import { TableDemoComponent } from './table-demo/table-demo.component';
import { BadgeDemoComponent } from './badge-demo/badge-demo.component';
import { MenuDemoComponent } from './menu-demo/menu-demo.component';
import { InputDemoComponent } from './input-demo/input-demo.component';
import { LayoutDemoComponent } from './layout-demo/layout-demo.component';
import { RadioDemoComponent } from './radio-demo/radio-demo.component';
import { CheckboxDemoComponent } from './checkbox-demo/checkbox-demo.component';
import { SearchDemoComponent } from './search-demo/search-demo.component';
import { SwitchDemoComponent } from './switch-demo/switch-demo.component';
import { ProgressDemoComponent } from './progress-demo/progress-demo.component';
import { CardDemoComponent } from './card-demo/card-demo.component';
import { ChipDemoComponent } from './chip-demo/chip-demo.component';
import { AppbarDemoComponent } from './appbar-demo/appbar-demo.component';
import { BottomNavigationDemoComponent } from './bottom-navigation-demo/bottom-navigation-demo.component';
import { FontAwesomeDemoComponent } from './fontawesome-demo/fontawesome-demo.component';
import { ImageContainerDemoComponent } from './image-container-demo/image-container-demo.component';
import { CarouselDemoComponent } from './carousel-demo/carousel-demo.component';
import { VideoPlayerDemoComponent } from "./video-player-demo/video-player-demo.component";
import { ListDemoComponent } from "./list-demo/list-demo.component";
import { ModalDemoComponent } from "./modal-demo/modal-demo.component";
import { DrawerDemoComponent } from "./drawer-demo/drawer-demo.component";
import { DatePickerDemoComponent } from './date-picker-demo/date-picker-demo.component';
import { TimePickerDemoComponent } from './time-picker-demo/time-picker-demo.component';
import { GridSystemDemoComponent } from './grid-system-demo/grid-system-demo.component';
import { SpacerDemoComponent } from './spacer-demo/spacer-demo.component';
import { ContainerDemoComponent } from './container-demo/container-demo.component';
import { PaginationDemoComponent } from './pagination-demo/pagination-demo.component';
import { SkeletonLoaderDemoComponent } from './skeleton-loader-demo/skeleton-loader-demo.component';
import { EmptyStateDemoComponent } from './empty-state-demo/empty-state-demo.component';
import { FileUploadDemoComponent } from './file-upload-demo/file-upload-demo.component';
import { FormFieldDemoComponent } from './form-field-demo/form-field-demo.component';
import { AutocompleteDemoComponent } from './autocomplete-demo/autocomplete-demo.component';
import { BackdropDemoComponent } from './backdrop-demo/backdrop-demo.component';
import { OverlayContainerDemoComponent } from './overlay-container-demo/overlay-container-demo.component';
import { LoadingSpinnerDemoComponent } from './loading-spinner-demo/loading-spinner-demo.component';
import { ProgressCircleDemoComponent } from './progress-circle-demo/progress-circle-demo.component';
import { RangeSliderDemoComponent } from './range-slider-demo/range-slider-demo.component';
import { ColorPickerDemoComponent } from './color-picker-demo/color-picker-demo.component';
import { DividerDemoComponent } from './divider-demo/divider-demo.component';
import { TooltipDemoComponent } from './tooltip-demo/tooltip-demo.component';
import { AccordionDemoComponent } from './accordion-demo/accordion-demo.component';
import { PopoverDemoComponent } from './popover-demo/popover-demo.component';
import { AlertDemoComponent } from './alert-demo/alert-demo.component';
import { SnackbarDemoComponent } from './snackbar-demo/snackbar-demo.component';
import { ToastDemoComponent } from './toast-demo/toast-demo.component';
import { TreeViewDemoComponent } from './tree-view-demo/tree-view-demo.component';
import { TimelineDemoComponent } from './timeline-demo/timeline-demo.component';
import { StepperDemoComponent } from './stepper-demo/stepper-demo.component';
import { FabMenuDemoComponent } from './fab-menu-demo/fab-menu-demo.component';
import { EnhancedTableDemoComponent } from './enhanced-table-demo/enhanced-table-demo.component';
import { SplitButtonDemoComponent } from './split-button-demo/split-button-demo.component';
import { CommandPaletteDemoComponent } from './command-palette-demo/command-palette-demo.component';
import { TransferListDemoComponent } from './transfer-list-demo/transfer-list-demo.component';
import { FloatingToolbarDemoComponent } from './floating-toolbar-demo/floating-toolbar-demo.component';
import { TagInputDemoComponent } from './tag-input-demo/tag-input-demo.component';
import { IconButtonDemoComponent } from './icon-button-demo/icon-button-demo.component';


@Component({
    selector: 'ui-demo-routes',
    encapsulation: ViewEncapsulation.None,
    standalone: true,    
    template: `

		@switch (this.route) {
			@case ("home") {
			}

			@case ("appbar") {
                <ui-appbar-demo></ui-appbar-demo>
			}

			@case ("bottom-navigation") {
                <ui-bottom-navigation-demo></ui-bottom-navigation-demo>
			}

			@case ("avatar") {
                <ui-avatar-demo></ui-avatar-demo>
			}

            @case ("buttons") {
                <ui-button-demo></ui-button-demo>
			}

			@case ("icon-button") {
                <ui-icon-button-demo></ui-icon-button-demo>
			}

			@case ("cards") {
                <ui-card-demo></ui-card-demo>
			}

			@case ("chips") {
                <ui-chip-demo></ui-chip-demo>
			}

			@case ("badge") {
                <ui-badge-demo></ui-badge-demo>
			}

			@case ("fontawesome") {
                <ui-fontawesome-demo></ui-fontawesome-demo>
			}

			@case ("input") {
                <ui-input-demo></ui-input-demo>
			}
			@case ("layout") {
                <ui-layout-demo></ui-layout-demo>
			}
			@case ("radio") {
                <ui-radio-demo></ui-radio-demo>
			}
			
			@case ("checkbox") {
                <ui-checkbox-demo></ui-checkbox-demo>
			}
			
			@case ("search") {
                <ui-search-demo></ui-search-demo>
			}
			
			@case ("switch") {
                <ui-switch-demo></ui-switch-demo>
			}
			
			@case ("progress") {
                <ui-progress-demo></ui-progress-demo>
			}

			
			@case ("lists") {
                <ui-list-demo></ui-list-demo>
			}
			@case ("menu") {
                <ui-menu-demo></ui-menu-demo>
			}

			@case ("table") {
                <ui-table-demo></ui-table-demo>
			}

			@case ("image-container") {
                <ui-image-container-demo></ui-image-container-demo>
			}

			@case ("carousel") {
                <ui-carousel-demo></ui-carousel-demo>
			}

			@case ("video-player") {
                <ui-video-player-demo></ui-video-player-demo>
			}

			@case ("modal") {
                <ui-modal-demo></ui-modal-demo>
			}

			@case ("drawer") {
                <ui-drawer-demo></ui-drawer-demo>
			}

			@case ("date-picker") {
                <ui-date-picker-demo></ui-date-picker-demo>
			}

			@case ("time-picker") {
                <ui-time-picker-demo></ui-time-picker-demo>
			}

			@case ("grid-system") {
                <ui-grid-system-demo></ui-grid-system-demo>
			}

			@case ("spacer") {
                <ui-spacer-demo></ui-spacer-demo>
			}

			@case ("container") {
                <ui-container-demo></ui-container-demo>
			}

			@case ("pagination") {
                <ui-pagination-demo></ui-pagination-demo>
			}

			@case ("skeleton-loader") {
                <ui-skeleton-loader-demo></ui-skeleton-loader-demo>
			}

			@case ("empty-state") {
                <ui-empty-state-demo></ui-empty-state-demo>
			}

			@case ("file-upload") {
                <ui-file-upload-demo></ui-file-upload-demo>
			}

			@case ("form-field") {
                <ui-form-field-demo></ui-form-field-demo>
			}

			@case ("autocomplete") {
                <ui-autocomplete-demo></ui-autocomplete-demo>
			}

			@case ("backdrop") {
                <ui-backdrop-demo></ui-backdrop-demo>
			}

			@case ("overlay-container") {
                <ui-overlay-container-demo></ui-overlay-container-demo>
			}

			@case ("loading-spinner") {
                <ui-loading-spinner-demo></ui-loading-spinner-demo>
			}

			@case ("progress-circle") {
                <ui-progress-circle-demo></ui-progress-circle-demo>
			}

			@case ("range-slider") {
                <ui-range-slider-demo></ui-range-slider-demo>
			}

			@case ("color-picker") {
                <ui-color-picker-demo></ui-color-picker-demo>
			}

			@case ("divider") {
                <ui-divider-demo></ui-divider-demo>
			}

			@case ("tooltip") {
                <ui-tooltip-demo></ui-tooltip-demo>
			}

			@case ("accordion") {
                <ui-accordion-demo></ui-accordion-demo>
			}

			@case ("popover") {
                <ui-popover-demo></ui-popover-demo>
			}

			@case ("alert") {
                <ui-alert-demo></ui-alert-demo>
			}

			@case ("snackbar") {
                <ui-snackbar-demo></ui-snackbar-demo>
			}

			@case ("toast") {
                <ui-toast-demo></ui-toast-demo>
			}

			@case ("tree-view") {
                <ui-tree-view-demo></ui-tree-view-demo>
			}

			@case ("timeline") {
                <ui-timeline-demo></ui-timeline-demo>
			}

			@case ("stepper") {
                <ui-stepper-demo></ui-stepper-demo>
			}

			@case ("fab-menu") {
                <ui-fab-menu-demo></ui-fab-menu-demo>
			}

			@case ("enhanced-table") {
                <ui-enhanced-table-demo></ui-enhanced-table-demo>
			}

			@case ("split-button") {
                <ui-split-button-demo></ui-split-button-demo>
			}

			@case ("command-palette") {
                <ui-command-palette-demo></ui-command-palette-demo>
			}

			@case ("floating-toolbar") {
                <ui-floating-toolbar-demo></ui-floating-toolbar-demo>
			}

			@case ("transfer-list") {
                <ui-transfer-list-demo></ui-transfer-list-demo>
			}

			@case ("tag-input") {
                <ui-tag-input-demo></ui-tag-input-demo>
			}

            
		}
	`,
    imports: [AvatarDemoComponent, ButtonDemoComponent, IconButtonDemoComponent, CardDemoComponent,
    ChipDemoComponent, TableDemoComponent, BadgeDemoComponent,
    MenuDemoComponent, InputDemoComponent,
    LayoutDemoComponent, RadioDemoComponent, CheckboxDemoComponent,
    SearchDemoComponent, SwitchDemoComponent, ProgressDemoComponent,
    AppbarDemoComponent, BottomNavigationDemoComponent, FontAwesomeDemoComponent, ImageContainerDemoComponent,
    CarouselDemoComponent, VideoPlayerDemoComponent, ListDemoComponent, 
    ModalDemoComponent, DrawerDemoComponent, DatePickerDemoComponent, TimePickerDemoComponent,
    GridSystemDemoComponent, SpacerDemoComponent, ContainerDemoComponent, PaginationDemoComponent,
    SkeletonLoaderDemoComponent, EmptyStateDemoComponent, FileUploadDemoComponent, FormFieldDemoComponent,
    AutocompleteDemoComponent, BackdropDemoComponent, OverlayContainerDemoComponent, LoadingSpinnerDemoComponent,
    ProgressCircleDemoComponent, RangeSliderDemoComponent, ColorPickerDemoComponent, DividerDemoComponent, TooltipDemoComponent, AccordionDemoComponent,
    PopoverDemoComponent, AlertDemoComponent, SnackbarDemoComponent, ToastDemoComponent, TreeViewDemoComponent, TimelineDemoComponent, StepperDemoComponent, FabMenuDemoComponent, EnhancedTableDemoComponent, SplitButtonDemoComponent, CommandPaletteDemoComponent, FloatingToolbarDemoComponent, TransferListDemoComponent, TagInputDemoComponent]
})

 
export class DemoRoutes {

  @Input() route: string;

	constructor() {
    this.route = "home"
	}

	ngOnInit() {
	}

}