- Add new components: enhanced-table, fab-menu, icon-button, snackbar, select, tag-input, bottom-navigation, stepper, command-palette, floating-toolbar, transfer-list - Refactor table-actions and select components - Update component styles and exports - Add corresponding demo components 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
336 lines
12 KiB
TypeScript
336 lines
12 KiB
TypeScript
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() {
|
|
}
|
|
|
|
} |