+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `,
+ styleUrl: './command-palette-demo.component.scss'
+})
+export class CommandPaletteDemoComponent implements OnInit, OnDestroy {
+ @ViewChild('commandPalette') commandPalette!: CommandPaletteComponent;
+
+ private router = inject(Router);
+ private commandService = inject(CommandPaletteService);
+
+ // Icons
+ readonly faPalette = faPalette;
+ readonly faKeyboard = faKeyboard;
+ readonly faPlus = faPlus;
+ readonly faSearch = faSearch;
+ readonly faRocket = faRocket;
+ readonly faCog = faCog;
+ readonly faCopy = faCopy;
+ readonly faEye = faEye;
+ readonly faHome = faHome;
+ readonly faUser = faUser;
+ readonly faFile = faFile;
+ readonly faEdit = faEdit;
+ readonly faTools = faTools;
+ readonly faQuestion = faQuestion;
+ readonly faSave = faSave;
+ readonly faUndo = faUndo;
+ readonly faRedo = faRedo;
+ readonly faPaste = faPaste;
+
+ // Component state
+ paletteSize: 'md' | 'lg' | 'xl' = 'lg';
+ executionCount = 0;
+
+ config = {
+ showCategories: true,
+ showShortcuts: true,
+ showRecent: true,
+ maxResults: 20,
+ recentLimit: 5
+ };
+
+ globalShortcuts = [
+ createShortcuts().commandPalette(),
+ createShortcuts().quickSearch(),
+ createShortcuts().create('/', { preventDefault: true })
+ ];
+
+ get registeredCommandsCount(): number {
+ return this.commandService.commands().length;
+ }
+
+ get recentCommandsCount(): number {
+ return this.commandService.recentCommands().length;
+ }
+
+ ngOnInit(): void {
+ this.registerSampleCommands();
+ this.applyConfig();
+ }
+
+ ngOnDestroy(): void {
+ // Clean up registered commands
+ this.commandService.clearCommands();
+ }
+
+ openCommandPalette(): void {
+ this.commandPalette.open();
+ }
+
+ handleGlobalShortcut(event: any): void {
+ const shortcut = event.shortcut;
+
+ if (shortcut.key === 'k' && (shortcut.ctrlKey || shortcut.metaKey)) {
+ this.commandPalette.toggle();
+ } else if (shortcut.key === '/') {
+ this.commandPalette.open();
+ }
+ }
+
+ registerSampleCommands(): void {
+ const sampleCommands: Command[] = [
+ // Navigation Commands
+ {
+ id: 'nav-home',
+ title: 'Go Home',
+ description: 'Navigate to the home page',
+ icon: faHome,
+ category: CommandCategory.NAVIGATION,
+ keywords: ['home', 'dashboard', 'main'],
+ shortcut: ['Ctrl', 'H'],
+ handler: () => this.showToast('Navigating to home...'),
+ order: 1
+ },
+ {
+ id: 'nav-profile',
+ title: 'View Profile',
+ description: 'Go to user profile page',
+ icon: faUser,
+ category: CommandCategory.NAVIGATION,
+ keywords: ['profile', 'user', 'account'],
+ handler: () => this.showToast('Opening profile...'),
+ order: 2
+ },
+ {
+ id: 'nav-settings',
+ title: 'Open Settings',
+ description: 'Access application settings',
+ icon: faCog,
+ category: CommandCategory.SETTINGS,
+ keywords: ['settings', 'preferences', 'config'],
+ shortcut: ['Ctrl', ','],
+ handler: () => this.showToast('Opening settings...'),
+ order: 1
+ },
+
+ // File Commands
+ {
+ id: 'file-new',
+ title: 'New File',
+ description: 'Create a new file',
+ icon: faFile,
+ category: CommandCategory.FILE,
+ keywords: ['new', 'create', 'file', 'document'],
+ shortcut: ['Ctrl', 'N'],
+ handler: () => this.showToast('Creating new file...'),
+ order: 1
+ },
+ {
+ id: 'file-save',
+ title: 'Save File',
+ description: 'Save the current file',
+ icon: faSave,
+ category: CommandCategory.FILE,
+ keywords: ['save', 'file', 'document'],
+ shortcut: ['Ctrl', 'S'],
+ handler: () => this.showToast('Saving file...'),
+ order: 2
+ },
+
+ // Edit Commands
+ {
+ id: 'edit-copy',
+ title: 'Copy',
+ description: 'Copy selected content',
+ icon: faCopy,
+ category: CommandCategory.EDIT,
+ keywords: ['copy', 'clipboard'],
+ shortcut: ['Ctrl', 'C'],
+ handler: () => this.showToast('Content copied!'),
+ order: 1
+ },
+ {
+ id: 'edit-paste',
+ title: 'Paste',
+ description: 'Paste from clipboard',
+ icon: faPaste,
+ category: CommandCategory.EDIT,
+ keywords: ['paste', 'clipboard'],
+ shortcut: ['Ctrl', 'V'],
+ handler: () => this.showToast('Content pasted!'),
+ order: 2
+ },
+ {
+ id: 'edit-undo',
+ title: 'Undo',
+ description: 'Undo last action',
+ icon: faUndo,
+ category: CommandCategory.EDIT,
+ keywords: ['undo', 'revert'],
+ shortcut: ['Ctrl', 'Z'],
+ handler: () => this.showToast('Action undone!'),
+ order: 3
+ },
+ {
+ id: 'edit-redo',
+ title: 'Redo',
+ description: 'Redo last undone action',
+ icon: faRedo,
+ category: CommandCategory.EDIT,
+ keywords: ['redo', 'repeat'],
+ shortcut: ['Ctrl', 'Y'],
+ handler: () => this.showToast('Action redone!'),
+ order: 4
+ },
+
+ // Search Commands
+ {
+ id: 'search-global',
+ title: 'Global Search',
+ description: 'Search across all content',
+ icon: faSearch,
+ category: CommandCategory.SEARCH,
+ keywords: ['search', 'find', 'global'],
+ shortcut: ['Ctrl', 'Shift', 'F'],
+ handler: () => this.showToast('Opening global search...'),
+ order: 1
+ },
+
+ // Tools Commands
+ {
+ id: 'tools-theme',
+ title: 'Toggle Theme',
+ description: 'Switch between light and dark theme',
+ icon: faTools,
+ category: CommandCategory.TOOLS,
+ keywords: ['theme', 'dark', 'light', 'toggle'],
+ handler: () => this.showToast('Theme toggled!'),
+ order: 1
+ },
+
+ // Help Commands
+ {
+ id: 'help-docs',
+ title: 'Documentation',
+ description: 'Open help documentation',
+ icon: faQuestion,
+ category: CommandCategory.HELP,
+ keywords: ['help', 'docs', 'documentation'],
+ handler: () => this.showToast('Opening documentation...'),
+ order: 1
+ },
+
+ // Action Commands
+ {
+ id: 'action-refresh',
+ title: 'Refresh Page',
+ description: 'Reload the current page',
+ icon: faRocket,
+ category: CommandCategory.ACTIONS,
+ keywords: ['refresh', 'reload', 'update'],
+ shortcut: ['F5'],
+ handler: () => this.showToast('Page refreshed!'),
+ order: 1
+ }
+ ];
+
+ this.commandService.registerCommands(sampleCommands);
+ }
+
+ clearCommands(): void {
+ this.commandService.clearCommands();
+ this.commandService.clearRecentCommands();
+ }
+
+ updateConfig(key: string, event: Event): void {
+ const target = event.target as HTMLInputElement;
+ let value: any = target.type === 'checkbox' ? target.checked :
+ target.type === 'number' ? parseInt(target.value, 10) :
+ target.value;
+
+ (this.config as any)[key] = value;
+ this.applyConfig();
+ }
+
+ updatePaletteSize(event: Event): void {
+ const target = event.target as HTMLSelectElement;
+ this.paletteSize = target.value as 'md' | 'lg' | 'xl';
+ }
+
+ private applyConfig(): void {
+ this.commandService.updateConfig({
+ showCategories: this.config.showCategories,
+ showShortcuts: this.config.showShortcuts,
+ showRecent: this.config.showRecent,
+ maxResults: this.config.maxResults,
+ recentLimit: this.config.recentLimit
+ });
+ }
+
+ onPaletteOpened(): void {
+ console.log('Command palette opened');
+ }
+
+ onPaletteClosed(): void {
+ console.log('Command palette closed');
+ }
+
+ onCommandExecuted(event: { commandId: string; context: CommandExecutionContext }): void {
+ this.executionCount++;
+ console.log('Command executed:', event);
+ }
+
+ private showToast(message: string): void {
+ // Simple toast implementation for demo
+ const toast = document.createElement('div');
+ toast.className = 'demo-toast';
+ toast.textContent = message;
+ toast.style.cssText = `
+ position: fixed;
+ top: 20px;
+ right: 20px;
+ background: #333;
+ color: white;
+ padding: 12px 24px;
+ border-radius: 6px;
+ box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+ z-index: 10000;
+ font-size: 14px;
+ animation: slideIn 0.3s ease;
+ `;
+
+ document.body.appendChild(toast);
+
+ setTimeout(() => {
+ toast.style.animation = 'slideOut 0.3s ease forwards';
+ setTimeout(() => document.body.removeChild(toast), 300);
+ }, 3000);
+ }
+}
\ No newline at end of file
diff --git a/projects/demo-ui-essentials/src/app/demos/container-demo/container-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/container-demo/container-demo.component.scss
index 540d6fb..cbd5b49 100644
--- a/projects/demo-ui-essentials/src/app/demos/container-demo/container-demo.component.scss
+++ b/projects/demo-ui-essentials/src/app/demos/container-demo/container-demo.component.scss
@@ -78,12 +78,10 @@
margin: 0 auto; // Center the container
position: relative; // For proper positioning context
- // Override container component's auto margins that might be causing issues
+ // Ensure proper centering
&.ui-container {
- margin-left: auto !important;
- margin-right: auto !important;
- left: auto !important;
- right: auto !important;
+ margin-left: auto;
+ margin-right: auto;
}
&.demo-container-tall {
@@ -187,13 +185,9 @@
// Additional container demo specific styles
.demo-containers-showcase {
- // Force all containers to behave properly
+ // Ensure containers behave properly
.ui-container {
- // Ensure containers don't push beyond boundaries
position: relative;
- left: 0 !important;
- right: 0 !important;
- transform: none !important;
}
// Size-specific constraints to prevent overflow
diff --git a/projects/demo-ui-essentials/src/app/demos/demos.routes.ts b/projects/demo-ui-essentials/src/app/demos/demos.routes.ts
index 4e910ae..36433a9 100644
--- a/projects/demo-ui-essentials/src/app/demos/demos.routes.ts
+++ b/projects/demo-ui-essentials/src/app/demos/demos.routes.ts
@@ -59,6 +59,8 @@ import { SplitButtonDemoComponent } from './split-button-demo/split-button-demo.
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({
@@ -87,6 +89,10 @@ import { FloatingToolbarDemoComponent } from './floating-toolbar-demo/floating-t
+
+
+
+
+
+
+
+ + A powerful command palette for quick navigation and actions. Press Ctrl+K (or ⌘K on Mac) to open. +
+Quick Start
+
+
+
+
+
+
+
+ Configuration
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Features
+
+
+
+
+
+ Keyboard Navigation
+Full keyboard support with arrow keys, Enter, and Escape
+
+
+
+ Fuzzy Search
+Intelligent search with typo tolerance and keyword matching
+
+
+
+ Quick Actions
+Execute commands instantly with global keyboard shortcuts
+
+
+
+ Categorization
+Organize commands by category for better discoverability
+
+
+
+ Recent Commands
+Track and show recently used commands for quick access
+
+
+ Context Aware
+Commands can be shown or hidden based on application state
+Usage Statistics
+
+
+
+
+ {{ registeredCommandsCount }}
+ Registered Commands
+
+
+ {{ recentCommandsCount }}
+ Recent Commands
+
+
+ {{ executionCount }}
+ Commands Executed
+ Keyboard Shortcuts
+
+
+
+ Ctrl + K
+ Open Command Palette
+
+
+ ↑ / ↓
+ Navigate Results
+
+
+ Enter
+ Execute Selected Command
+
+
+ Esc
+ Close Palette
+
+
+ Tab
+ Navigate Results (Alternative)
+
+
+ /
+ Quick Search
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ @if (performanceMetrics) {
+
+
+
+
+
+
+
+
+
+
+ {{ value | titlecase }}
+
+
+
+
+
+ {{ value | currency:'USD':'symbol':'1.0-0' }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `,
+ styles: [`
+ h2 {
+ color: hsl(279, 14%, 11%);
+ font-size: 2rem;
+ margin-bottom: 2rem;
+ border-bottom: 2px solid hsl(258, 100%, 47%);
+ padding-bottom: 0.5rem;
+ }
+
+ h3 {
+ color: hsl(279, 14%, 25%);
+ font-size: 1.5rem;
+ margin-bottom: 1rem;
+ }
+
+ h4 {
+ color: hsl(287, 12%, 35%);
+ font-size: 1.125rem;
+ margin-bottom: 0.75rem;
+ }
+
+ section {
+ border: 1px solid hsl(289, 14%, 90%);
+ border-radius: 8px;
+ padding: 1.5rem;
+ background: hsl(286, 20%, 99%);
+ }
+
+ pre {
+ font-size: 0.875rem;
+ line-height: 1.5;
+ margin: 0.5rem 0;
+ }
+
+ code {
+ font-family: 'JetBrains Mono', monospace;
+ color: #d63384;
+ }
+
+ label {
+ cursor: pointer;
+ font-weight: 500;
+ }
+
+ input[type="checkbox"] {
+ cursor: pointer;
+ }
+ `]
+})
+export class EnhancedTableDemoComponent implements OnInit, AfterViewInit {
+ @ViewChild('statusTemplate') statusTemplate!: TemplateRefEnhanced Table Component Showcase
+Enterprise-grade data table with virtual scrolling, column resizing/reordering, and advanced filtering.
+ + +Basic Enhanced Table
+Table Variants
+ +
+
+
+
+
+ Striped Enhanced Table
+
+
+
+
+
+ Bordered Enhanced Table
+
+
+
+
+ Minimal Enhanced Table
+Virtual Scrolling ({{ largeDataset.length.toLocaleString() }} Records)
++ Virtual scrolling efficiently handles large datasets by only rendering visible rows. + Performance metrics are displayed below the table. +
+ +
+
+ }
+ Performance Metrics:
+
+
+ Render Time: {{ performanceMetrics.renderTime }}ms
+ Sort Time: {{ performanceMetrics.sortTime }}ms
+ Filter Time: {{ performanceMetrics.filterTime }}ms
+ Visible Rows: {{ performanceMetrics.visibleRows }}
+ Advanced Features with Custom Cell Templates
+
+
+ {{ value }}%
+
+
+
+
+
+ Interactive Column Configuration
+
+
+
+
+
+
+
+ Usage Examples
+
+
+ Basic Enhanced Table:
+<ui-enhanced-table
+ [data]="employees"
+ [columns]="columns"
+ variant="default"
+ [enableColumnResize]="true"
+ [enableColumnReorder]="true"
+ [showFilters]="true"
+ [height]="500"
+ (sort)="handleSort($event)"
+ (filter)="handleFilter($event)">
+</ui-enhanced-table>With Virtual Scrolling:
+<ui-enhanced-table
+ [data]="largeDataset"
+ [columns]="columns"
+ [virtualScrollConfig]="{{ '{' }}
+ enabled: true,
+ itemHeight: 48,
+ bufferSize: 10
+ {{ '}' }}"
+ [height]="600">
+</ui-enhanced-table>Column Configuration:
+columns: EnhancedTableColumn[] = [
+ {{ '{' }}
+ key: 'name',
+ label: 'Name',
+ width: 150,
+ sortable: true,
+ filterable: true,
+ filterType: 'text',
+ resizable: true,
+ draggable: true
+ {{ '}' }},
+ {{ '{' }}
+ key: 'salary',
+ label: 'Salary',
+ width: 120,
+ sortable: true,
+ filterable: true,
+ filterType: 'number',
+ resizable: true
+ {{ '}' }}
+];Interactive Demo Controls
+
+
+
+
+
+
+
+ @if (lastAction) {
+
+ Last Action: {{ lastAction }}
+
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `,
+ styleUrl: './fab-menu-demo.component.scss'
+})
+export class FabMenuDemoComponent {
+ sizes: FabMenuSize[] = ['sm', 'md', 'lg'];
+ variants: FabMenuVariant[] = ['primary', 'secondary', 'success', 'danger'];
+ directions: FabMenuDirection[] = ['up', 'down', 'left', 'right'];
+ positions: FabMenuPosition[] = ['bottom-right', 'bottom-left', 'top-right', 'top-left'];
+
+ activePositionDemo: FabMenuPosition | null = null;
+ eventLog: Array<{timestamp: Date, message: string}> = [];
+
+ // Icons (using simple text for demo - could be replaced with FontAwesome or other icon library)
+ plusIcon = '+';
+ closeIcon = '×';
+ menuIcon = '☰';
+ settingsIcon = '⚙';
+ appsIcon = '⊞';
+
+ basicMenuItems: FabMenuItem[] = [
+ { id: 'action1', label: 'Action 1', icon: '📝' },
+ { id: 'action2', label: 'Action 2', icon: '📁' },
+ { id: 'action3', label: 'Action 3', icon: '📊' }
+ ];
+
+ positionMenuItems: FabMenuItem[] = [
+ { id: 'close', label: 'Close Menu', icon: '×' },
+ { id: 'home', label: 'Go Home', icon: '🏠' },
+ { id: 'profile', label: 'Profile', icon: '👤' },
+ { id: 'settings', label: 'Settings', icon: '⚙' }
+ ];
+
+ mixedMenuItems: FabMenuItem[] = [
+ { id: 'save', label: 'Save', variant: 'success', icon: '💾' },
+ { id: 'edit', label: 'Edit', variant: 'primary', icon: '✏️' },
+ { id: 'delete', label: 'Delete', variant: 'danger', icon: '🗑️' },
+ { id: 'disabled', label: 'Disabled', disabled: true, icon: '🚫' }
+ ];
+
+ iconMenuItems: FabMenuItem[] = [
+ { id: 'email', label: 'Email', icon: '📧' },
+ { id: 'calendar', label: 'Calendar', icon: '📅' },
+ { id: 'documents', label: 'Documents', icon: '📄' },
+ { id: 'photos', label: 'Photos', icon: '📸' },
+ { id: 'music', label: 'Music', icon: '🎵' },
+ { id: 'videos', label: 'Videos', icon: '🎬' }
+ ];
+
+ getVariantMenuItems(variant: FabMenuVariant): FabMenuItem[] {
+ return [
+ { id: `${variant}1`, label: `${variant} Item 1`, variant },
+ { id: `${variant}2`, label: `${variant} Item 2`, variant },
+ { id: `${variant}3`, label: `${variant} Item 3`, variant }
+ ];
+ }
+
+ handleItemClick(event: {item: FabMenuItem, event: Event}): void {
+ this.logEvent(`Item clicked: ${event.item.label} (${event.item.id})`);
+ }
+
+ togglePositionDemo(position: FabMenuPosition): void {
+ if (this.activePositionDemo === position) {
+ this.activePositionDemo = null;
+ this.logEvent(`Closed ${position} positioned menu`);
+ } else {
+ this.activePositionDemo = position;
+ this.logEvent(`Opened ${position} positioned menu`);
+ }
+ }
+
+ handlePositionItemClick(event: {item: FabMenuItem, event: Event}): void {
+ if (event.item.id === 'close') {
+ this.activePositionDemo = null;
+ this.logEvent('Closed positioned menu via menu item');
+ } else {
+ this.logEvent(`Position menu item clicked: ${event.item.label}`);
+ }
+ }
+
+ onMenuOpened(): void {
+ this.logEvent('Menu opened');
+ }
+
+ onMenuClosed(): void {
+ this.logEvent('Menu closed');
+ }
+
+ logEvent(message: string): void {
+ this.eventLog.push({
+ timestamp: new Date(),
+ message
+ });
+ }
+
+ clearLog(): void {
+ this.eventLog = [];
+ this.logEvent('Event log cleared');
+ }
+}
\ No newline at end of file
diff --git a/projects/demo-ui-essentials/src/app/demos/floating-toolbar-demo/floating-toolbar-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/floating-toolbar-demo/floating-toolbar-demo.component.scss
new file mode 100644
index 0000000..4d7e3a5
--- /dev/null
+++ b/projects/demo-ui-essentials/src/app/demos/floating-toolbar-demo/floating-toolbar-demo.component.scss
@@ -0,0 +1,509 @@
+@use '../../../../../shared-ui/src/styles/semantic/index' as *;
+
+.demo-container {
+ padding: $semantic-spacing-layout-section-md;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.demo-section {
+ margin-bottom: $semantic-spacing-layout-section-lg;
+
+ h3 {
+ font-family: map-get($semantic-typography-heading-h3, font-family);
+ font-size: map-get($semantic-typography-heading-h3, font-size);
+ font-weight: map-get($semantic-typography-heading-h3, font-weight);
+ line-height: map-get($semantic-typography-heading-h3, line-height);
+ color: $semantic-color-text-primary;
+ margin-bottom: $semantic-spacing-layout-section-sm;
+ }
+}
+
+.demo-subsection {
+ margin-bottom: $semantic-spacing-layout-section-md;
+
+ h4 {
+ font-family: map-get($semantic-typography-heading-h4, font-family);
+ font-size: map-get($semantic-typography-heading-h4, font-size);
+ font-weight: map-get($semantic-typography-heading-h4, font-weight);
+ line-height: map-get($semantic-typography-heading-h4, line-height);
+ color: $semantic-color-text-primary;
+ margin-bottom: $semantic-spacing-component-md;
+ }
+}
+
+.demo-row {
+ display: flex;
+ gap: $semantic-spacing-component-md;
+ flex-wrap: wrap;
+ align-items: flex-start;
+
+ &--center {
+ justify-content: center;
+ }
+}
+
+.demo-item {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: $semantic-spacing-component-sm;
+}
+
+.demo-trigger-button {
+ padding: $semantic-spacing-component-sm $semantic-spacing-component-md;
+ background: $semantic-color-primary;
+ color: $semantic-color-on-primary;
+ border: none;
+ border-radius: $semantic-border-button-radius;
+ font-family: map-get($semantic-typography-button-medium, font-family);
+ font-size: map-get($semantic-typography-button-medium, font-size);
+ font-weight: map-get($semantic-typography-button-medium, font-weight);
+ line-height: map-get($semantic-typography-button-medium, line-height);
+ cursor: pointer;
+ transition: all $semantic-motion-duration-fast $semantic-motion-easing-ease;
+ min-height: $semantic-sizing-button-height-md;
+
+ &:hover {
+ background: $semantic-color-primary;
+ opacity: $semantic-opacity-hover;
+ }
+
+ &:focus-visible {
+ outline: 2px solid $semantic-color-focus;
+ outline-offset: 2px;
+ }
+
+ &:active {
+ transform: translateY(1px);
+ }
+}
+
+.demo-position-container {
+ display: grid;
+ grid-template-areas:
+ ". top ."
+ "left center right"
+ ". bottom .";
+ gap: $semantic-spacing-component-lg;
+ padding: $semantic-spacing-layout-section-md;
+ background: $semantic-color-surface-secondary;
+ border-radius: $semantic-border-radius-lg;
+ border: $semantic-border-width-1 solid $semantic-color-border-subtle;
+}
+
+.demo-position-button {
+ padding: $semantic-spacing-component-sm;
+ background: $semantic-color-surface-primary;
+ color: $semantic-color-text-primary;
+ border: $semantic-border-width-1 solid $semantic-color-border-primary;
+ border-radius: $semantic-border-radius-md;
+ cursor: pointer;
+ transition: all $semantic-motion-duration-fast $semantic-motion-easing-ease;
+ min-width: 80px;
+ text-align: center;
+ font-family: map-get($semantic-typography-button-small, font-family);
+ font-size: map-get($semantic-typography-button-small, font-size);
+ font-weight: map-get($semantic-typography-button-small, font-weight);
+ line-height: map-get($semantic-typography-button-small, line-height);
+
+ &--top {
+ grid-area: top;
+ }
+
+ &--bottom {
+ grid-area: bottom;
+ }
+
+ &--left {
+ grid-area: left;
+ }
+
+ &--right {
+ grid-area: right;
+ }
+
+ &:hover {
+ background: $semantic-color-surface-elevated;
+ border-color: $semantic-color-border-primary;
+ box-shadow: $semantic-shadow-elevation-1;
+ }
+
+ &:focus-visible {
+ outline: 2px solid $semantic-color-focus;
+ outline-offset: 2px;
+ }
+}
+
+.demo-context-area {
+ padding: $semantic-spacing-component-lg;
+ background: $semantic-color-surface-primary;
+ border: $semantic-border-width-1 solid $semantic-color-border-subtle;
+ border-radius: $semantic-border-radius-md;
+ margin-bottom: $semantic-spacing-component-md;
+ min-height: 120px;
+ position: relative;
+ cursor: pointer;
+
+ p {
+ font-family: map-get($semantic-typography-body-medium, font-family);
+ font-size: map-get($semantic-typography-body-medium, font-size);
+ font-weight: map-get($semantic-typography-body-medium, font-weight);
+ line-height: map-get($semantic-typography-body-medium, line-height);
+ color: $semantic-color-text-primary;
+ margin: 0 0 $semantic-spacing-content-paragraph 0;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ img {
+ max-width: 200px;
+ height: auto;
+ display: block;
+ margin: 0 auto $semantic-spacing-component-sm auto;
+ border-radius: $semantic-border-radius-sm;
+ }
+
+ &:hover {
+ background: $semantic-color-surface-elevated;
+ border-color: $semantic-color-border-primary;
+ }
+}
+
+.demo-hint {
+ font-family: map-get($semantic-typography-body-small, font-family);
+ font-size: map-get($semantic-typography-body-small, font-size);
+ font-weight: map-get($semantic-typography-body-small, font-weight);
+ line-height: map-get($semantic-typography-body-small, line-height);
+ color: $semantic-color-text-secondary;
+ text-align: center;
+ font-style: italic;
+}
+
+.demo-editor {
+ min-height: 120px;
+ padding: $semantic-spacing-component-md;
+ background: $semantic-color-surface-primary;
+ border: $semantic-border-width-1 solid $semantic-color-border-primary;
+ border-radius: $semantic-border-input-radius;
+ font-family: map-get($semantic-typography-body-medium, font-family);
+ font-size: map-get($semantic-typography-body-medium, font-size);
+ font-weight: map-get($semantic-typography-body-medium, font-weight);
+ line-height: map-get($semantic-typography-body-medium, line-height);
+ color: $semantic-color-text-primary;
+ cursor: text;
+
+ &:focus {
+ outline: 2px solid $semantic-color-focus;
+ outline-offset: 2px;
+ border-color: $semantic-color-primary;
+ }
+
+ p {
+ margin: 0 0 $semantic-spacing-content-paragraph 0;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ strong {
+ font-weight: $semantic-typography-font-weight-bold;
+ }
+
+ em {
+ font-style: italic;
+ }
+
+ u {
+ text-decoration: underline;
+ }
+}
+
+.demo-table {
+ width: 100%;
+ border-collapse: collapse;
+ background: $semantic-color-surface-primary;
+ border-radius: $semantic-border-radius-lg;
+ overflow: hidden;
+ box-shadow: $semantic-shadow-elevation-1;
+
+ th,
+ td {
+ padding: $semantic-spacing-component-sm $semantic-spacing-component-md;
+ text-align: left;
+ border-bottom: $semantic-border-width-1 solid $semantic-color-border-subtle;
+ font-family: map-get($semantic-typography-body-medium, font-family);
+ font-size: map-get($semantic-typography-body-medium, font-size);
+ font-weight: map-get($semantic-typography-body-medium, font-weight);
+ line-height: map-get($semantic-typography-body-medium, line-height);
+ }
+
+ th {
+ background: $semantic-color-surface-secondary;
+ color: $semantic-color-text-primary;
+ font-weight: $semantic-typography-font-weight-semibold;
+ position: sticky;
+ top: 0;
+ }
+
+ td {
+ color: $semantic-color-text-primary;
+ }
+}
+
+.demo-table-row {
+ cursor: pointer;
+ transition: background-color $semantic-motion-duration-fast $semantic-motion-easing-ease;
+
+ &:hover {
+ background: $semantic-color-surface-elevated;
+ }
+
+ &--selected {
+ background: $semantic-color-primary;
+ color: $semantic-color-on-primary;
+
+ td {
+ color: $semantic-color-on-primary;
+ }
+ }
+
+ &:last-child td {
+ border-bottom: none;
+ }
+}
+
+.demo-table-action {
+ background: none;
+ border: none;
+ color: $semantic-color-text-secondary;
+ font-size: $semantic-typography-font-size-lg;
+ cursor: pointer;
+ padding: $semantic-spacing-component-xs;
+ border-radius: $semantic-border-radius-sm;
+ transition: all $semantic-motion-duration-fast $semantic-motion-easing-ease;
+
+ &:hover {
+ background: $semantic-color-surface-elevated;
+ color: $semantic-color-text-primary;
+ }
+
+ &:focus-visible {
+ outline: 2px solid $semantic-color-focus;
+ outline-offset: 2px;
+ }
+
+ .demo-table-row--selected & {
+ color: $semantic-color-on-primary;
+
+ &:hover {
+ background: rgba(255, 255, 255, 0.1);
+ }
+ }
+}
+
+.demo-controls {
+ display: flex;
+ flex-direction: column;
+ gap: $semantic-spacing-component-md;
+ padding: $semantic-spacing-component-lg;
+ background: $semantic-color-surface-secondary;
+ border-radius: $semantic-border-radius-lg;
+ border: $semantic-border-width-1 solid $semantic-color-border-subtle;
+}
+
+.demo-control-group {
+ display: flex;
+ flex-wrap: wrap;
+ gap: $semantic-spacing-component-md;
+
+ label {
+ display: flex;
+ align-items: center;
+ gap: $semantic-spacing-component-xs;
+ font-family: map-get($semantic-typography-body-medium, font-family);
+ font-size: map-get($semantic-typography-body-medium, font-size);
+ font-weight: map-get($semantic-typography-body-medium, font-weight);
+ line-height: map-get($semantic-typography-body-medium, line-height);
+ color: $semantic-color-text-primary;
+ cursor: pointer;
+ user-select: none;
+
+ input[type="checkbox"] {
+ margin: 0;
+ cursor: pointer;
+ }
+ }
+}
+
+.demo-output {
+ margin-top: $semantic-spacing-layout-section-md;
+ padding: $semantic-spacing-component-lg;
+ background: $semantic-color-surface-secondary;
+ border-radius: $semantic-border-radius-lg;
+ border: $semantic-border-width-1 solid $semantic-color-border-subtle;
+
+ h4 {
+ font-family: map-get($semantic-typography-heading-h4, font-family);
+ font-size: map-get($semantic-typography-heading-h4, font-size);
+ font-weight: map-get($semantic-typography-heading-h4, font-weight);
+ line-height: map-get($semantic-typography-heading-h4, line-height);
+ color: $semantic-color-text-primary;
+ margin: 0 0 $semantic-spacing-component-md 0;
+ }
+}
+
+.demo-log {
+ max-height: 200px;
+ overflow-y: auto;
+ background: $semantic-color-surface-primary;
+ border: $semantic-border-width-1 solid $semantic-color-border-subtle;
+ border-radius: $semantic-border-radius-md;
+ padding: $semantic-spacing-component-sm;
+
+ // Custom scrollbar styling
+ scrollbar-width: thin;
+ scrollbar-color: $semantic-color-border-subtle $semantic-color-surface-secondary;
+
+ &::-webkit-scrollbar {
+ width: 6px;
+ }
+
+ &::-webkit-scrollbar-track {
+ background: $semantic-color-surface-secondary;
+ border-radius: $semantic-border-radius-sm;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background: $semantic-color-border-subtle;
+ border-radius: $semantic-border-radius-sm;
+
+ &:hover {
+ background: $semantic-color-border-primary;
+ }
+ }
+}
+
+.demo-log-entry {
+ font-family: $semantic-typography-font-family-mono;
+ font-size: map-get($semantic-typography-body-small, font-size);
+ color: $semantic-color-text-primary;
+ padding: $semantic-spacing-component-xs 0;
+ border-bottom: $semantic-border-width-1 solid $semantic-color-border-subtle;
+
+ &:last-child {
+ border-bottom: none;
+ }
+
+ &:first-child {
+ color: $semantic-color-success;
+ font-weight: $semantic-typography-font-weight-medium;
+ }
+}
+
+.demo-log-empty {
+ font-family: map-get($semantic-typography-body-medium, font-family);
+ font-size: map-get($semantic-typography-body-medium, font-size);
+ color: $semantic-color-text-secondary;
+ text-align: center;
+ padding: $semantic-spacing-component-md;
+ font-style: italic;
+}
+
+// Responsive Design
+@media (max-width: $semantic-breakpoint-md - 1) {
+ .demo-container {
+ padding: $semantic-spacing-layout-section-sm;
+ }
+
+ .demo-row {
+ gap: $semantic-spacing-component-sm;
+ }
+
+ .demo-position-container {
+ padding: $semantic-spacing-component-lg;
+ gap: $semantic-spacing-component-md;
+ }
+
+ .demo-control-group {
+ flex-direction: column;
+ gap: $semantic-spacing-component-sm;
+ }
+}
+
+@media (max-width: $semantic-breakpoint-sm - 1) {
+ .demo-container {
+ padding: $semantic-spacing-component-md;
+ }
+
+ .demo-section {
+ margin-bottom: $semantic-spacing-layout-section-md;
+ }
+
+ .demo-row {
+ flex-direction: column;
+ gap: $semantic-spacing-component-sm;
+ }
+
+ .demo-context-area {
+ padding: $semantic-spacing-component-md;
+ min-height: 100px;
+ }
+
+ .demo-editor {
+ min-height: 100px;
+ padding: $semantic-spacing-component-sm;
+ }
+
+ .demo-table {
+ font-size: map-get($semantic-typography-body-small, font-size);
+
+ th,
+ td {
+ padding: $semantic-spacing-component-xs $semantic-spacing-component-sm;
+ }
+ }
+
+ .demo-position-container {
+ grid-template-areas:
+ "top"
+ "left"
+ "center"
+ "right"
+ "bottom";
+ gap: $semantic-spacing-component-sm;
+ padding: $semantic-spacing-component-md;
+ }
+
+ .demo-position-button {
+ min-width: 60px;
+ }
+}
+
+// High contrast support
+@media (prefers-contrast: high) {
+ .demo-trigger-button,
+ .demo-position-button,
+ .demo-table,
+ .demo-context-area,
+ .demo-editor,
+ .demo-controls,
+ .demo-output,
+ .demo-log {
+ border-width: $semantic-border-width-2;
+ }
+}
+
+// Reduced motion support
+@media (prefers-reduced-motion: reduce) {
+ .demo-trigger-button,
+ .demo-position-button,
+ .demo-table-row,
+ .demo-table-action,
+ .demo-context-area {
+ transition: none;
+ }
+}
\ No newline at end of file
diff --git a/projects/demo-ui-essentials/src/app/demos/floating-toolbar-demo/floating-toolbar-demo.component.ts b/projects/demo-ui-essentials/src/app/demos/floating-toolbar-demo/floating-toolbar-demo.component.ts
new file mode 100644
index 0000000..ca2521f
--- /dev/null
+++ b/projects/demo-ui-essentials/src/app/demos/floating-toolbar-demo/floating-toolbar-demo.component.ts
@@ -0,0 +1,670 @@
+import { Component, ViewChild, AfterViewInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { FloatingToolbarComponent, ToolbarAction, FloatingToolbarConfig } from '../../../../../ui-essentials/src/lib/components/overlays/floating-toolbar/floating-toolbar.component';
+
+@Component({
+ selector: 'ui-floating-toolbar-demo',
+ standalone: true,
+ imports: [CommonModule, FormsModule, FloatingToolbarComponent],
+ template: `
+ Floating Action Button Menu Demo
+An interactive floating action button menu that expands to reveal multiple action items.
+ + +Sizes
+
+ @for (size of sizes; track size) {
+
+
+
+
+
+ }
+ {{ size | titlecase }}
+Color Variants
+
+ @for (variant of variants; track variant) {
+
+
+
+
+
+ }
+ {{ variant | titlecase }}
+Direction Variants
+
+ @for (direction of directions; track direction) {
+
+
+
+
+
+ }
+ {{ direction | titlecase }}
+Fixed Positions
+These examples show fixed positioning variants (click to activate):
+
+ @for (position of positions; track position) {
+
+ }
+
+
+ @if (activePositionDemo) {
+ States
+
+
+
+
+
+
+
+ Disabled
+
+
+
+
+
+ No Backdrop
+
+
+
+
+ Stay Open
+Advanced Examples
+ +
+
+
+
+
+ Mixed Item Variants
+
+
+
+
+ Large Menu with Icons
+Event Log
+
+ @if (eventLog.length === 0) {
+
+
+ No events yet. Interact with the FAB menus above.
+ } @else { + @for (event of eventLog.slice(-10); track $index) { +
+ {{ event.timestamp | date:'HH:mm:ss' }}
+
+
+ }
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Floating Toolbar Demo
+ + +Size Variants
+
+ @for (size of sizes; track size) {
+
+
+
+
+ }
+ Style Variants
+
+ @for (variant of variants; track variant) {
+
+
+
+
+ }
+ Position Variants
+
+
+
+ @for (position of positions; track position) {
+
+ }
+
+ Context-Sensitive Actions
+
+
+
+
+ + Select this text to see a text editing toolbar with cut, copy, paste, and formatting options. + The toolbar will appear automatically when you make a selection. +
+
+ 
+
+
+ Right-click the image for image editing options
+Auto-Hide Behavior
+
+
+
+ Custom Actions
+
+
+
+
+
+
+ Action Log:
+
+ @for (logEntry of actionLog; track $index) {
+
+ {{ logEntry }}
+ }
+ @if (actionLog.length === 0) {
+ No actions performed yet...
+ }
+ Interactive Examples
+ + +
+
+
+
+ Editable Text with Formatting Toolbar
+
+
+ This is an editable text area. Select text to see formatting options in the floating toolbar.
+Bold text, italic text, and underlined text are supported.
+
+
+
+
+
+ Data Table with Row Actions
+| Name | +Status | +Actions | +|
|---|---|---|---|
| {{ user.name }} | +{{ user.email }} | +{{ user.status }} | ++ + | +
Configuration Options
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `,
+ styleUrl: './icon-button-demo.component.scss'
+})
+export class IconButtonDemoComponent {
+ // FontAwesome icons
+ faHeart = faHeart;
+ faBookmark = faBookmark;
+ faShare = faShare;
+ faDownload = faDownload;
+ faEdit = faEdit;
+ faTrash = faTrash;
+ faSave = faSave;
+ faSearch = faSearch;
+ faPlus = faPlus;
+ faMinus = faMinus;
+ faHome = faHome;
+ faUser = faUser;
+ faCog = faCog;
+ faClose = faClose;
+ faCheck = faCheck;
+ faChevronLeft = faChevronLeft;
+ faChevronRight = faChevronRight;
+ faEllipsisV = faEllipsisV;
+ faStar = faStar;
+
+ // Demo state
+ clickCount = 0;
+ lastClicked = '';
+ isPressed = false;
+
+ handleClick(action: string): void {
+ this.clickCount++;
+ this.lastClicked = action;
+ console.log('Icon button clicked:', action);
+ }
+
+ togglePressed(): void {
+ this.isPressed = !this.isPressed;
+ this.handleClick(`toggle star ${this.isPressed ? 'on' : 'off'}`);
+ }
+}
\ No newline at end of file
diff --git a/projects/demo-ui-essentials/src/app/demos/snackbar-demo/snackbar-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/snackbar-demo/snackbar-demo.component.scss
new file mode 100644
index 0000000..9569f21
--- /dev/null
+++ b/projects/demo-ui-essentials/src/app/demos/snackbar-demo/snackbar-demo.component.scss
@@ -0,0 +1,90 @@
+@use '../../../../../shared-ui/src/styles/semantic/index' as *;
+
+.demo-container {
+ padding: $semantic-spacing-layout-section-md;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.demo-section {
+ margin-bottom: $semantic-spacing-layout-section-lg;
+
+ h3 {
+ font-family: map-get($semantic-typography-heading-h3, font-family);
+ font-size: map-get($semantic-typography-heading-h3, font-size);
+ font-weight: map-get($semantic-typography-heading-h3, font-weight);
+ line-height: map-get($semantic-typography-heading-h3, line-height);
+ color: $semantic-color-text-primary;
+ margin-bottom: $semantic-spacing-content-heading;
+ }
+}
+
+.demo-row {
+ display: flex;
+ align-items: center;
+ gap: $semantic-spacing-component-md;
+ flex-wrap: wrap;
+}
+
+.demo-button {
+ padding: $semantic-spacing-interactive-button-padding-y $semantic-spacing-interactive-button-padding-x;
+ background: $semantic-color-surface-primary;
+ border: $semantic-border-width-1 solid $semantic-color-border-primary;
+ border-radius: $semantic-border-button-radius;
+ cursor: pointer;
+ transition: all $semantic-motion-duration-fast $semantic-motion-easing-ease;
+
+ font-family: map-get($semantic-typography-button-medium, font-family);
+ font-size: map-get($semantic-typography-button-medium, font-size);
+ font-weight: map-get($semantic-typography-button-medium, font-weight);
+ line-height: map-get($semantic-typography-button-medium, line-height);
+ color: $semantic-color-text-primary;
+
+ &:hover {
+ background: $semantic-color-surface-secondary;
+ box-shadow: $semantic-shadow-button-hover;
+ }
+
+ &:focus-visible {
+ outline: 2px solid $semantic-color-focus;
+ outline-offset: 2px;
+ }
+
+ &--primary {
+ background: $semantic-color-primary;
+ color: $semantic-color-on-primary;
+ border-color: $semantic-color-primary;
+
+ &:hover {
+ background: $semantic-color-primary;
+ opacity: $semantic-opacity-hover;
+ }
+ }
+
+ &--warning {
+ background: $semantic-color-warning;
+ color: $semantic-color-on-warning;
+ border-color: $semantic-color-warning;
+
+ &:hover {
+ background: $semantic-color-warning;
+ opacity: $semantic-opacity-hover;
+ }
+ }
+
+ &--danger {
+ background: $semantic-color-danger;
+ color: $semantic-color-on-danger;
+ border-color: $semantic-color-danger;
+
+ &:hover {
+ background: $semantic-color-danger;
+ opacity: $semantic-opacity-hover;
+ }
+ }
+}
+
+// Static snackbars for demo purposes
+.demo-row ui-snackbar {
+ margin-bottom: $semantic-spacing-component-sm;
+}
\ No newline at end of file
diff --git a/projects/demo-ui-essentials/src/app/demos/snackbar-demo/snackbar-demo.component.ts b/projects/demo-ui-essentials/src/app/demos/snackbar-demo/snackbar-demo.component.ts
new file mode 100644
index 0000000..660bb9f
--- /dev/null
+++ b/projects/demo-ui-essentials/src/app/demos/snackbar-demo/snackbar-demo.component.ts
@@ -0,0 +1,246 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SnackbarAction, SnackbarComponent } from '../../../../../ui-essentials/src/lib/components/feedback/snackbar/snackbar.component';
+
+@Component({
+ selector: 'ui-snackbar-demo',
+ standalone: true,
+ imports: [CommonModule, SnackbarComponent],
+ template: `
+ Icon Button Component Showcase
+ + +Size Variants
+
+
+
+
+
+
+
+
+ Filled Variant
+
+
+
+
+
+
+
+
+
+
+ Tonal Variant
+
+
+
+
+
+
+
+
+
+
+ Outlined Variant
+
+
+
+
+
+
+
+
+
+
+ States
+
+
+
+
+
+
+
+
+ + Star button pressed state: {{ isPressed ? 'ON' : 'OFF' }} +
+Navigation Examples
+
+
+
+
+
+
+
+
+
+
+
+
+ Destructive Actions
+
+
+
+
+ + Use outlined variant for destructive actions to reduce accidental clicks +
+Interaction Test
+Total clicks: {{ clickCount }}
+Last clicked: {{ lastClicked || 'None' }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ @for (snackbar of activeSnackbars; track snackbar.id) {
+
+
+ }
+
+
+
+
+
+ `,
+ styleUrl: './snackbar-demo.component.scss'
+})
+export class SnackbarDemoComponent {
+ sizes = ['sm', 'md', 'lg'] as const;
+ variants = ['default', 'primary', 'success', 'warning', 'danger', 'info'] as const;
+ positions = [
+ 'bottom-center', 'bottom-left', 'bottom-right',
+ 'top-center', 'top-left', 'top-right'
+ ] as const;
+
+ activeSnackbars: any[] = [];
+ totalShown = 0;
+ lastAction = '';
+
+ singleAction: SnackbarAction[] = [
+ { label: 'UNDO', handler: () => this.handleDemoAction('Undo clicked') }
+ ];
+
+ multipleActions: SnackbarAction[] = [
+ { label: 'RETRY', handler: () => this.handleDemoAction('Retry clicked') },
+ { label: 'SETTINGS', handler: () => this.handleDemoAction('Settings clicked') }
+ ];
+
+ showPositionDemo(position: string): void {
+ this.addSnackbar({
+ message: `Snackbar at ${position}`,
+ variant: 'primary',
+ position: position as any,
+ showIcon: true,
+ autoDismiss: true,
+ duration: 3000
+ });
+ }
+
+ showSuccessSnackbar(): void {
+ this.addSnackbar({
+ message: 'Operation completed successfully!',
+ variant: 'success',
+ showIcon: true,
+ actions: this.singleAction
+ });
+ }
+
+ showWarningSnackbar(): void {
+ this.addSnackbar({
+ message: 'Warning: This action cannot be undone',
+ variant: 'warning',
+ showIcon: true,
+ autoDismiss: false
+ });
+ }
+
+ showErrorSnackbar(): void {
+ this.addSnackbar({
+ message: 'Error: Failed to save changes',
+ variant: 'danger',
+ showIcon: true,
+ actions: this.multipleActions,
+ autoDismiss: false
+ });
+ }
+
+ showActionSnackbar(): void {
+ this.addSnackbar({
+ message: 'File moved to trash',
+ variant: 'default',
+ actions: [
+ {
+ label: 'UNDO',
+ handler: () => {
+ this.handleDemoAction('File restored');
+ this.removeSnackbar(this.activeSnackbars[this.activeSnackbars.length - 1]?.id);
+ }
+ }
+ ],
+ duration: 6000
+ });
+ }
+
+ private addSnackbar(config: any): void {
+ const snackbar = {
+ id: Date.now() + Math.random(),
+ size: 'md',
+ position: 'bottom-center',
+ autoDismiss: true,
+ duration: 4000,
+ showIcon: false,
+ actions: [],
+ ...config
+ };
+
+ this.activeSnackbars.push(snackbar);
+ this.totalShown++;
+ }
+
+ removeSnackbar(id: number): void {
+ this.activeSnackbars = this.activeSnackbars.filter(s => s.id !== id);
+ }
+
+ handleActionClick(action: SnackbarAction, snackbarId: number): void {
+ this.lastAction = `${action.label} clicked on snackbar ${snackbarId}`;
+ }
+
+ private handleDemoAction(action: string): void {
+ this.lastAction = action;
+ }
+}
\ No newline at end of file
diff --git a/projects/demo-ui-essentials/src/app/demos/split-button-demo/split-button-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/split-button-demo/split-button-demo.component.scss
index 3ac5457..2e25ba9 100644
--- a/projects/demo-ui-essentials/src/app/demos/split-button-demo/split-button-demo.component.scss
+++ b/projects/demo-ui-essentials/src/app/demos/split-button-demo/split-button-demo.component.scss
@@ -10,10 +10,10 @@
margin-bottom: $semantic-spacing-layout-section-lg;
h3 {
- font-family: map-get($semantic-typography-heading-h3, font-family);
- font-size: map-get($semantic-typography-heading-h3, font-size);
- font-weight: map-get($semantic-typography-heading-h3, font-weight);
- line-height: map-get($semantic-typography-heading-h3, line-height);
+ font-family: $semantic-typography-font-family-sans;
+ font-size: $semantic-typography-font-size-lg;
+ font-weight: $semantic-typography-font-weight-semibold;
+ line-height: $semantic-typography-line-height-tight;
color: $semantic-color-text-primary;
margin-bottom: $semantic-spacing-component-md;
border-bottom: $semantic-border-width-1 solid $semantic-color-border-secondary;
@@ -36,10 +36,10 @@
border-radius: $semantic-border-radius-md;
p {
- font-family: map-get($semantic-typography-body-medium, font-family);
- font-size: map-get($semantic-typography-body-medium, font-size);
- font-weight: map-get($semantic-typography-body-medium, font-weight);
- line-height: map-get($semantic-typography-body-medium, line-height);
+ font-family: $semantic-typography-font-family-sans;
+ font-size: $semantic-typography-font-size-md;
+ font-weight: $semantic-typography-font-weight-normal;
+ line-height: $semantic-typography-line-height-normal;
color: $semantic-color-text-primary;
margin: $semantic-spacing-component-xs 0;
diff --git a/projects/demo-ui-essentials/src/app/demos/stepper-demo/stepper-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/stepper-demo/stepper-demo.component.scss
new file mode 100644
index 0000000..943dc3e
--- /dev/null
+++ b/projects/demo-ui-essentials/src/app/demos/stepper-demo/stepper-demo.component.scss
@@ -0,0 +1,196 @@
+@use '../../../../../shared-ui/src/styles/semantic/index' as *;
+
+.demo-container {
+ padding: $semantic-spacing-layout-section-sm;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.demo-section {
+ margin-bottom: $semantic-spacing-layout-section-md;
+
+ h2 {
+ font-family: map-get($semantic-typography-heading-h2, font-family);
+ font-size: map-get($semantic-typography-heading-h2, font-size);
+ font-weight: map-get($semantic-typography-heading-h2, font-weight);
+ line-height: map-get($semantic-typography-heading-h2, line-height);
+ color: $semantic-color-text-primary;
+ margin: 0 0 $semantic-spacing-content-heading 0;
+ }
+
+ h3 {
+ font-family: map-get($semantic-typography-heading-h3, font-family);
+ font-size: map-get($semantic-typography-heading-h3, font-size);
+ font-weight: map-get($semantic-typography-heading-h3, font-weight);
+ line-height: map-get($semantic-typography-heading-h3, line-height);
+ color: $semantic-color-text-primary;
+ margin: 0 0 $semantic-spacing-component-lg 0;
+ border-bottom: 1px solid $semantic-color-border-primary;
+ padding-bottom: $semantic-spacing-component-sm;
+ }
+
+ h4 {
+ font-family: map-get($semantic-typography-heading-h4, font-family);
+ font-size: map-get($semantic-typography-heading-h4, font-size);
+ font-weight: map-get($semantic-typography-heading-h4, font-weight);
+ line-height: map-get($semantic-typography-heading-h4, line-height);
+ color: $semantic-color-text-secondary;
+ margin: 0 0 $semantic-spacing-component-md 0;
+ }
+}
+
+.demo-subsection {
+ margin-bottom: $semantic-spacing-component-xl;
+ padding: $semantic-spacing-component-lg;
+ background: $semantic-color-surface-secondary;
+ border-radius: $semantic-border-radius-lg;
+ border: 1px solid $semantic-color-border-primary;
+}
+
+.demo-row {
+ display: flex;
+ gap: $semantic-spacing-component-xl;
+ flex-wrap: wrap;
+ margin-bottom: $semantic-spacing-component-lg;
+}
+
+.demo-item {
+ flex: 1;
+ min-width: 300px;
+ padding: $semantic-spacing-component-lg;
+ background: $semantic-color-surface-primary;
+ border: 1px solid $semantic-color-border-primary;
+ border-radius: $semantic-border-radius-md;
+}
+
+.vertical-stepper-container {
+ max-width: 400px;
+ padding: $semantic-spacing-component-lg;
+ background: $semantic-color-surface-primary;
+ border: 1px solid $semantic-color-border-primary;
+ border-radius: $semantic-border-radius-md;
+}
+
+.interactive-example {
+ padding: $semantic-spacing-component-xl;
+ background: $semantic-color-surface-primary;
+ border: 2px solid $semantic-color-border-primary;
+ border-radius: $semantic-border-radius-lg;
+ margin-bottom: $semantic-spacing-component-lg;
+}
+
+.demo-controls {
+ display: flex;
+ gap: $semantic-spacing-component-sm;
+ margin-top: $semantic-spacing-component-lg;
+ padding: $semantic-spacing-component-md;
+ background: $semantic-color-surface-secondary;
+ border-radius: $semantic-border-radius-sm;
+ flex-wrap: wrap;
+}
+
+.demo-button {
+ display: flex;
+ align-items: center;
+ gap: $semantic-spacing-component-xs;
+ padding: $semantic-spacing-interactive-button-padding-y $semantic-spacing-interactive-button-padding-x;
+ background: $semantic-color-brand-primary;
+ color: $semantic-color-on-brand-primary;
+ border: none;
+ border-radius: $semantic-border-radius-sm;
+ font-family: map-get($semantic-typography-button-medium, font-family);
+ font-size: map-get($semantic-typography-button-medium, font-size);
+ font-weight: map-get($semantic-typography-button-medium, font-weight);
+ cursor: pointer;
+ transition: all $semantic-motion-duration-fast $semantic-motion-easing-ease;
+
+ &:hover {
+ background: $semantic-color-brand-secondary;
+ transform: translateY(-1px);
+ box-shadow: $semantic-shadow-elevation-2;
+ }
+
+ &:focus-visible {
+ outline: 2px solid $semantic-color-brand-primary;
+ outline-offset: 2px;
+ }
+
+ &:active {
+ transform: translateY(0);
+ box-shadow: $semantic-shadow-elevation-1;
+ }
+
+ fa-icon {
+ font-size: $semantic-sizing-icon-inline;
+ }
+}
+
+.step-info {
+ margin-top: $semantic-spacing-component-lg;
+ padding: $semantic-spacing-component-md;
+ background: $semantic-color-surface-elevated;
+ border-radius: $semantic-border-radius-sm;
+ border-left: 4px solid $semantic-color-brand-primary;
+
+ p {
+ margin: 0 0 $semantic-spacing-content-line-tight 0;
+ font-family: map-get($semantic-typography-body-small, font-family);
+ font-size: map-get($semantic-typography-body-small, font-size);
+ font-weight: map-get($semantic-typography-body-small, font-weight);
+ line-height: map-get($semantic-typography-body-small, line-height);
+ color: $semantic-color-text-secondary;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+
+ strong {
+ color: $semantic-color-text-primary;
+ font-weight: $semantic-typography-font-weight-semibold;
+ }
+ }
+}
+
+// Responsive design
+@media (max-width: 768px) {
+ .demo-container {
+ padding: $semantic-spacing-component-md;
+ }
+
+ .demo-row {
+ flex-direction: column;
+ gap: $semantic-spacing-component-md;
+ }
+
+ .demo-item {
+ min-width: auto;
+ }
+
+ .demo-controls {
+ flex-direction: column;
+
+ .demo-button {
+ justify-content: center;
+ }
+ }
+
+ .vertical-stepper-container {
+ max-width: none;
+ }
+}
+
+@media (max-width: 480px) {
+ .demo-subsection,
+ .demo-item,
+ .interactive-example {
+ padding: $semantic-spacing-component-md;
+ }
+
+ .demo-section h2 {
+ font-size: map-get($semantic-typography-heading-h3, font-size);
+ }
+
+ .demo-section h3 {
+ font-size: map-get($semantic-typography-heading-h4, font-size);
+ }
+}
\ No newline at end of file
diff --git a/projects/demo-ui-essentials/src/app/demos/stepper-demo/stepper-demo.component.ts b/projects/demo-ui-essentials/src/app/demos/stepper-demo/stepper-demo.component.ts
new file mode 100644
index 0000000..b671400
--- /dev/null
+++ b/projects/demo-ui-essentials/src/app/demos/stepper-demo/stepper-demo.component.ts
@@ -0,0 +1,362 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faPlay, faUndo } from '@fortawesome/free-solid-svg-icons';
+import { StepperComponent, StepperStep } from '../../../../../ui-essentials/src/lib/components/navigation/stepper';
+
+@Component({
+ selector: 'ui-stepper-demo',
+ standalone: true,
+ imports: [CommonModule, StepperComponent, FontAwesomeModule],
+ template: `
+ Snackbar Demo
+ + +Sizes
+
+ @for (size of sizes; track size) {
+
+
+ }
+
+ Variants
+
+ @for (variant of variants; track variant) {
+
+
+ }
+
+ With Actions
+
+
+
+
+
+
+
+ Positions
+
+ @for (position of positions; track position) {
+
+ }
+
+ Click buttons to see snackbars in different positions
+Interactive Examples
+
+
+
+
+
+
+ Demo Status
+Active snackbars: {{ activeSnackbars.length }}
+Total shown: {{ totalShown }}
+Last action: {{ lastAction || 'None' }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `,
+ styleUrl: './stepper-demo.component.scss'
+})
+export class StepperDemoComponent {
+ sizes = ['sm', 'md', 'lg'] as const;
+ playIcon = faPlay;
+ resetIcon = faUndo;
+
+ lastAction = 'None';
+
+ // Horizontal stepper data
+ horizontalSteps: StepperStep[] = [
+ { id: 'h1', title: 'Account Info', description: 'Enter your personal details', current: true },
+ { id: 'h2', title: 'Verification', description: 'Verify your email address' },
+ { id: 'h3', title: 'Preferences', description: 'Set up your preferences' },
+ { id: 'h4', title: 'Complete', description: 'Account setup finished' }
+ ];
+
+ // Vertical stepper data
+ verticalSteps: StepperStep[] = [
+ { id: 'v1', title: 'Project Setup', description: 'Initialize your new project', completed: true },
+ { id: 'v2', title: 'Configuration', description: 'Configure project settings', current: true },
+ { id: 'v3', title: 'Dependencies', description: 'Install required dependencies' },
+ { id: 'v4', title: 'Testing', description: 'Run initial tests' },
+ { id: 'v5', title: 'Deployment', description: 'Deploy to production' }
+ ];
+
+ // Size demonstration
+ sizeSteps: StepperStep[] = [
+ { id: 's1', title: 'Step 1', completed: true },
+ { id: 's2', title: 'Step 2', current: true },
+ { id: 's3', title: 'Step 3' }
+ ];
+
+ // Variant demonstration
+ variantSteps: StepperStep[] = [
+ { id: 'var1', title: 'Design', completed: true },
+ { id: 'var2', title: 'Development', current: true },
+ { id: 'var3', title: 'Testing' },
+ { id: 'var4', title: 'Launch' }
+ ];
+
+ // Dense demonstration
+ denseSteps: StepperStep[] = [
+ { id: 'd1', title: 'Upload', completed: true },
+ { id: 'd2', title: 'Process', current: true },
+ { id: 'd3', title: 'Review' },
+ { id: 'd4', title: 'Publish' }
+ ];
+
+ // State demonstration
+ stateSteps: StepperStep[] = [
+ { id: 'st1', title: 'Completed', description: 'This step is done', completed: true },
+ { id: 'st2', title: 'Current', description: 'Currently active step', current: true },
+ { id: 'st3', title: 'Error', description: 'This step has an error', error: true },
+ { id: 'st4', title: 'Disabled', description: 'This step is disabled', disabled: true },
+ { id: 'st5', title: 'Pending', description: 'This step is pending' }
+ ];
+
+ // Linear stepper
+ linearSteps: StepperStep[] = [
+ { id: 'l1', title: 'Start', description: 'Begin the process', current: true },
+ { id: 'l2', title: 'Middle', description: 'Continue the process' },
+ { id: 'l3', title: 'End', description: 'Finish the process' }
+ ];
+
+ // Non-linear stepper
+ nonLinearSteps: StepperStep[] = [
+ { id: 'nl1', title: 'Overview', description: 'Click any step', completed: true },
+ { id: 'nl2', title: 'Details', description: 'Add more information', current: true },
+ { id: 'nl3', title: 'Review', description: 'Check your work' }
+ ];
+
+ // Interactive example
+ interactiveSteps: StepperStep[] = [
+ { id: 'i1', title: 'Planning', description: 'Plan your approach', current: true },
+ { id: 'i2', title: 'Implementation', description: 'Build the solution' },
+ { id: 'i3', title: 'Testing', description: 'Test thoroughly' },
+ { id: 'i4', title: 'Deployment', description: 'Go live' }
+ ];
+
+ onStepClick(type: string, event: {step: StepperStep, index: number}): void {
+ this.lastAction = `${type}: Clicked step "${event.step.title}" (index ${event.index})`;
+ console.log(`${type} stepper - Step clicked:`, event);
+ }
+
+ onStepChange(type: string, event: {step: StepperStep, index: number}): void {
+ this.lastAction = `${type}: Changed to step "${event.step.title}" (index ${event.index})`;
+ console.log(`${type} stepper - Step changed:`, event);
+ }
+
+ nextLinearStep(): void {
+ const currentIndex = this.linearSteps.findIndex(step => step.current);
+ if (currentIndex >= 0 && currentIndex < this.linearSteps.length - 1) {
+ // Mark current as completed
+ this.linearSteps[currentIndex].completed = true;
+ this.linearSteps[currentIndex].current = false;
+
+ // Move to next
+ this.linearSteps[currentIndex + 1].current = true;
+
+ this.lastAction = `Linear: Advanced to step ${currentIndex + 2}`;
+ }
+ }
+
+ resetLinearStepper(): void {
+ this.linearSteps.forEach((step, index) => {
+ step.current = index === 0;
+ step.completed = false;
+ step.error = false;
+ });
+ this.lastAction = 'Linear: Reset to beginning';
+ }
+
+ onInteractiveStepClick(event: {step: StepperStep, index: number}): void {
+ this.lastAction = `Interactive: Clicked "${event.step.title}"`;
+ }
+
+ onInteractiveStepChange(event: {step: StepperStep, index: number}): void {
+ this.lastAction = `Interactive: Changed to "${event.step.title}"`;
+ }
+
+ markCurrentCompleted(): void {
+ const currentStep = this.interactiveSteps.find(step => step.current);
+ if (currentStep) {
+ currentStep.completed = true;
+ currentStep.error = false;
+ this.lastAction = `Interactive: Marked "${currentStep.title}" as completed`;
+ }
+ }
+
+ markCurrentError(): void {
+ const currentStep = this.interactiveSteps.find(step => step.current);
+ if (currentStep) {
+ currentStep.error = true;
+ currentStep.completed = false;
+ this.lastAction = `Interactive: Marked "${currentStep.title}" as error`;
+ }
+ }
+
+ nextInteractiveStep(): void {
+ const currentIndex = this.interactiveSteps.findIndex(step => step.current);
+ if (currentIndex >= 0 && currentIndex < this.interactiveSteps.length - 1) {
+ // Mark current as completed if not in error
+ if (!this.interactiveSteps[currentIndex].error) {
+ this.interactiveSteps[currentIndex].completed = true;
+ }
+ this.interactiveSteps[currentIndex].current = false;
+
+ // Move to next
+ this.interactiveSteps[currentIndex + 1].current = true;
+
+ this.lastAction = `Interactive: Advanced to step ${currentIndex + 2}`;
+ }
+ }
+
+ resetInteractiveStepper(): void {
+ this.interactiveSteps.forEach((step, index) => {
+ step.current = index === 0;
+ step.completed = false;
+ step.error = false;
+ });
+ this.lastAction = 'Interactive: Reset to beginning';
+ }
+
+ getCurrentStepInfo(): string {
+ const currentStep = this.interactiveSteps.find(step => step.current);
+ return currentStep ? `${currentStep.title} (${this.interactiveSteps.indexOf(currentStep) + 1} of ${this.interactiveSteps.length})` : 'None';
+ }
+
+ getCompletedStepsCount(): number {
+ return this.interactiveSteps.filter(step => step.completed).length;
+ }
+}
\ No newline at end of file
diff --git a/projects/demo-ui-essentials/src/app/demos/table-demo/table-demo.component.ts b/projects/demo-ui-essentials/src/app/demos/table-demo/table-demo.component.ts
index 326cdbb..5ba1b98 100644
--- a/projects/demo-ui-essentials/src/app/demos/table-demo/table-demo.component.ts
+++ b/projects/demo-ui-essentials/src/app/demos/table-demo/table-demo.component.ts
@@ -1,7 +1,7 @@
import { Component, ChangeDetectionStrategy, TemplateRef, ViewChild } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TableComponent } from '../../../../../ui-essentials/src/lib/components/data-display/table/table.component';
-import { TableAction, TableActionsComponent } from '../../../../../ui-essentials/src/lib/components/data-display/table-actions.component';
+import { TableAction, TableActionsComponent } from '../../../../../ui-essentials/src/lib/components/data-display/table/table-actions.component';
import type { TableColumn } from '../../../../../ui-essentials/src/lib/components/data-display/table/table.component';
import type { TableSortEvent } from '../../../../../ui-essentials/src/lib/components/data-display/table/table.component';
import { StatusBadgeComponent } from '../../../../../ui-essentials/src/lib/components/feedback/status-badge.component';
diff --git a/projects/demo-ui-essentials/src/app/demos/tag-input-demo/tag-input-demo.component.ts b/projects/demo-ui-essentials/src/app/demos/tag-input-demo/tag-input-demo.component.ts
new file mode 100644
index 0000000..b60b126
--- /dev/null
+++ b/projects/demo-ui-essentials/src/app/demos/tag-input-demo/tag-input-demo.component.ts
@@ -0,0 +1,543 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { TagInputComponent } from '../../../../../ui-essentials/src/lib/components/forms/tag-input/tag-input.component';
+import { ButtonComponent } from '../../../../../ui-essentials/src/lib/components/buttons/button.component';
+import { faTag, faPlus, faTimes, faRefresh } from '@fortawesome/free-solid-svg-icons';
+
+@Component({
+ selector: 'ui-tag-input-demo',
+ standalone: true,
+ imports: [
+ CommonModule,
+ ReactiveFormsModule,
+ TagInputComponent,
+ ButtonComponent
+ ],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: `
+ Stepper Demo
+ + +Orientation
+
+
+
+
+
+ Horizontal Stepper
+
+
+ Vertical Stepper
+
+
+
+
+ Sizes
+
+ @for (size of sizes; track size) {
+
+
+
+
+
+ }
+ {{ size }} Size
+Variants
+
+
+
+
+
+
+ Default
+
+
+
+
+ Outlined
+Dense Layout
+
+
+
+
+
+
+ Normal
+
+
+
+
+ Dense
+Step States
+
+
+
+
+ All States
+Navigation Modes
+
+
+
+
+
+
+
+ Linear (Default)
+
+
+
+
+
+
+
+
+ Non-Linear
+Interactive Example
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Current Step: {{ getCurrentStepInfo() }}
+Completed Steps: {{ getCompletedStepsCount() }}
+Last Action: {{ lastAction }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `,
+ styles: [`
+ h2 {
+ color: hsl(279, 14%, 11%);
+ font-size: 2rem;
+ margin-bottom: 2rem;
+ border-bottom: 2px solid hsl(258, 100%, 47%);
+ padding-bottom: 0.5rem;
+ }
+
+ h3 {
+ color: hsl(279, 14%, 25%);
+ font-size: 1.5rem;
+ margin-bottom: 1rem;
+ }
+
+ h4 {
+ color: hsl(287, 12%, 35%);
+ font-size: 1.125rem;
+ margin-bottom: 0.75rem;
+ }
+
+ section {
+ border: 1px solid hsl(289, 14%, 90%);
+ border-radius: 8px;
+ padding: 1.5rem;
+ background: hsl(286, 20%, 99%);
+ }
+
+ .demo-tag-input {
+ width: 100%;
+ max-width: 500px;
+ }
+
+ pre {
+ font-size: 0.875rem;
+ line-height: 1.5;
+ margin: 0.5rem 0;
+ }
+
+ code {
+ font-family: 'JetBrains Mono', monospace;
+ color: #d63384;
+ }
+ `]
+})
+export class TagInputDemoComponent {
+ lastAction: string = '';
+
+ // FontAwesome icons
+ faTag = faTag;
+ faPlus = faPlus;
+ faTimes = faTimes;
+ faRefresh = faRefresh;
+
+ // Form
+ demoForm = new FormGroup({
+ tags: new FormControlTag Input Component Showcase
+ + +Basic Variants
+ +Outlined (Default)
+
+
+
+
+
+ Filled
+
+
+
+
+ Size Variants
+ +Small
+
+
+
+
+
+ Medium (Default)
+
+
+
+
+
+ Large
+
+
+
+
+ Configuration Options
+ +Max Tags (3)
+
+
+
+
+
+ Max Tag Length (10)
+
+
+
+
+
+ Allow Duplicates
+
+
+
+
+
+ No Trimming
+
+
+
+
+ States
+ +Normal
+
+
+
+
+
+ Disabled
+
+
+
+
+
+ Read Only
+
+
+
+
+
+ With Error
+
+
+
+
+ Form Integration
+ +Programmatic Control
+
+
+
+
+
+
+
+ Add Random Tag
+
+
+ Clear All
+
+
+ Add Multiple
+
+
+ Get as String
+
+
+ Usage Examples
+
+
+ Basic Usage:
+<ui-tag-input
+ placeholder="Add tags..."
+ (tagAdd)="onTagAdd($event)"
+ (tagRemove)="onTagRemove($event)">
+</ui-tag-input>With Constraints:
+<ui-tag-input
+ placeholder="Add up to 5 tags"
+ [maxTags]="5"
+ [maxTagLength]="20"
+ [allowDuplicates]="false"
+ helpText="Each tag can be up to 20 characters"
+ (maxTagsReached)="onMaxTags()"
+ (duplicateTag)="onDuplicate($event)">
+</ui-tag-input>Form Integration:
+<form [formGroup]="myForm">
+ <ui-tag-input
+ formControlName="tags"
+ placeholder="Required tags"
+ [errorMessage]="getFieldError('tags')">
+ </ui-tag-input>
+</form>Custom Separators:
+<ui-tag-input
+ placeholder="Use space or dash to separate"
+ [separators]="[' ', '-']"
+ helpText="Tags separated by space or dash">
+</ui-tag-input>Event Log
+ @if (lastAction) { +
+ Last action: {{ lastAction }}
+
+ }
+
+ Clear Log
+ Show Alert
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `,
+ styleUrl: './transfer-list-demo.component.scss'
+})
+export class TransferListDemoComponent {
+ // Basic example data
+ basicSourceItems = signalTransfer List Demo
+ + +Basic Transfer List
++ Select items from the source list and transfer them to the target list using the control buttons. +
+Size Variants
+
+
+
+
+
+ Small
+
+
+
+ Medium (Default)
+
+
+ Large
+Configuration Options
+ +
+
+
+
+
+
+
+
+ With Disabled Items
++ Some items can be disabled and cannot be selected or transferred. +
+Large Dataset
++ Transfer list with a large number of items to test performance and search functionality. +
+Custom Labels & Accessibility
+Event Log
+
+ @if (eventLog().length === 0) {
+
+ No events logged yet. Interact with the transfer lists above to see events.
+ } @else { + @for (event of eventLog(); track $index) { +
+ {{ event.type }}: {{ event.message }}
+ {{ event.timestamp | date:'short' }}
+
+ }
+ }
+ @if (eventLog().length > 0) {
+
+ }
+