+ Customize the appbar below by toggling different options: +
+ +
+ <ui-appbar
+ variant="standard"
+ [slots]="{title: true, leftIcon: true, rightIcon: true}"
+ [elevated]="false">
+ <fa-icon [icon]="faBars" slot="left-icon"></fa-icon>
+ <span slot="title">My App</span>
+ <fa-icon [icon]="faSearch" slot="right-icon"></fa-icon>
+</ui-appbar><ui-appbar
+ variant="standard"
+ [slots]="{title: true, leftLogo: true, rightAvatar: true}"
+ [elevated]="true">
+ <div slot="left-logo" style="font-weight: 600;">
+ MyBrand
+ </div>
+ <span slot="title">Dashboard</span>
+ <img slot="right-avatar" src="avatar.jpg"
+ style="width: 32px; height: 32px; border-radius: 50%;">
+</ui-appbar><ui-appbar
+ variant="standard"
+ [slots]="{title: true, leftIcon: true, rightMenu: true}"
+ [elevated]="false">
+ <fa-icon [icon]="faArrowLeft" slot="left-icon"></fa-icon>
+ <span slot="title">Settings</span>
+ <div slot="right-menu" style="display: flex; gap: 1rem;">
+ <fa-icon [icon]="faSearch"></fa-icon>
+ <fa-icon [icon]="faEllipsisV"></fa-icon>
+ </div>
+</ui-appbar>XS (24px)
+SM (32px)
+MD (40px)
+LG (48px)
+XL (64px)
+XXL (80px)
+John Doe
+Jane Smith
+Alex Rodriguez
+Fallback (Broken URL)
+Online
+Offline
+Away
+Busy
+3 notifications
+99+ notifications
+Online + Badge
+Premium User
+Circle (Default)
+Square
+Rounded Square
+Primary
+Secondary
+Success
+Warning
+Danger
+{{ user.role }}
+{{ user.email }}
+Loading
+Empty Name
+Single Character
+No Name
+<ui-avatar
+ size="md"
+ name="Current User"
+ status="online">
+</ui-avatar><ui-avatar
+ size="lg"
+ name="John Doe"
+ imageUrl="https://example.com/avatar.jpg"
+ altText="John's profile picture"
+ status="away"
+ badge="5">
+</ui-avatar><ui-avatar
+ size="xl"
+ name="Admin User"
+ color="primary"
+ shape="rounded"
+ badge="⭐"
+ [loading]="false">
+</ui-avatar>Click backdrop to close
+Notice the blur effect behind this content
+ +Adjust the opacity using the slider above
+This is behind the second backdrop
+This is in front of the first backdrop
+ +This backdrop cannot be clicked to close
+ +XS
+Small
+Medium
+Large
+Pill
+Rounded
+Square
+<ui-badge variant="success" size="md">
+ Active
+</ui-badge><ui-badge
+ variant="warning"
+ [isDot]="true"
+ ariaLabel="Warning status">
+</ui-badge><ui-badge
+ variant="danger"
+ shape="square"
+ size="lg"
+ title="Critical status">
+ Critical
+</ui-badge>Small
+Medium
+Large
+Primary
+Secondary
+Tertiary
+Pulse
+Disabled
+Loading
+Expand
+<ui-button
+ variant="filled"
+ size="medium"
+ (clicked)="handleClick($event)">
+ Click Me
+</ui-button><ui-text-button
+ size="large"
+ [disabled]="false"
+ (clicked)="handleTextClick($event)">
+ Text Action
+</ui-text-button><ui-button
+ variant="filled"
+ [icon]="faDownload"
+ iconPosition="left"
+ (clicked)="downloadFile()">
+ Download
+</ui-button><ui-fab
+ variant="primary"
+ size="medium"
+ position="bottom-right"
+ [pulse]="true"
+ (clicked)="openDialog()">
+ +
+</ui-fab>Default elevated card with shadow
+This is the most common card variant with a subtle elevation that lifts it above the surface.
+Card with background color
+Filled cards use background color to separate content from the surrounding surface.
+Card with border emphasis
+Outlined cards use borders to separate content while maintaining a clean appearance.
+Compact card for minimal content.
+Standard card size for most use cases with balanced spacing.
+Spacious card for detailed content with generous padding and larger typography.
+No shadow
+Subtle shadow
+Moderate shadow
+Prominent shadow
+Deep shadow
+Sharp corners
+Subtle rounding
+Standard rounding
+Generous rounding
+Circle
+Click me!
+This card responds to clicks and has hover effects. Try clicking or focusing with keyboard.
+Cannot interact
+This card is disabled and cannot be interacted with.
++ Glass morphism effects using semantic design tokens from the shared-ui library. + Each variant offers different levels of transparency and blur effects. +
+ +Ultra-light transparency
++ Barely visible background with subtle blur effect for minimal visual interference. + Perfect for overlays that need to preserve background visibility. +
+Gentle transparency
++ Gentle glass effect that maintains excellent readability while adding modern depth. + Ideal for cards that need subtle separation from background. +
+Balanced effect
++ Perfect balance between visibility and glass morphism effect. + The most versatile variant suitable for most interface components. +
+Strong presence
++ Prominent glass effect with substantial background presence. + Great for important UI elements that need to stand out prominently. +
+Maximum opacity with enhanced blur
++ Nearly opaque with enhanced blur for a true frosted glass appearance. + Perfect for modals, overlays, and primary interface panels. +
++ Glass effects with full interactivity, smooth animations, and hover states. +
+Interactive with smooth animations
++ Click me! Light glass variant with full interactivity and animation support. + Features hover effects and touch feedback. +
+Strong glass with responsive feedback
++ Heavy glass variant combining strong visual presence with responsive interactions. + Perfect for call-to-action cards and important interactive elements. +
+Medium glass with keyboard navigation
++ Medium glass effect with complete accessibility support including keyboard navigation, + focus states, and screen reader compatibility. +
++ Enhanced Glass System: All glass effects now use semantic design tokens from the shared-ui library, + ensuring consistent theming, better performance, and improved browser compatibility. +
+@include glass-{{ '{' }}variant{{ '}' }}(true) mixinswill-change and isolationBeautiful gradient overlay
+This card has a gradient background layer that creates visual depth and interest.
+Custom pattern design
+Click me! Cards can have complex patterns and remain fully interactive with proper layering.
+<ui-card variant="elevated" size="md" elevation="sm" radius="md">
+ <div slot="header">
+ <h4>Card Title</h4>
+ <p>Card subtitle</p>
+ </div>
+ <p>Card content goes here</p>
+ <div slot="footer">
+ <ui-button variant="filled">Action</ui-button>
+ </div>
+</ui-card><ui-card
+ variant="elevated"
+ [clickable]="true"
+ (cardClick)="handleCardClick($event)">
+ <p>Click me!</p>
+</ui-card><ui-card
+ variant="elevated"
+ [glass]="true"
+ glassVariant="medium"
+ elevation="md"
+ radius="lg">
+ <p>Glass morphism effect with semantic tokens</p>
+</ui-card><!-- All glass variants using semantic design tokens -->
+<ui-card [glass]="true" glassVariant="translucent">Ultra-light transparency</ui-card>
+<ui-card [glass]="true" glassVariant="light">Gentle glass effect</ui-card>
+<ui-card [glass]="true" glassVariant="medium">Balanced glass morphism</ui-card>
+<ui-card [glass]="true" glassVariant="heavy">Strong visual presence</ui-card>
+<ui-card [glass]="true" glassVariant="frosted">Maximum opacity with blur</ui-card><ui-card
+ variant="elevated"
+ [glass]="true"
+ glassVariant="light"
+ [clickable]="true"
+ (cardClick)="handleCardClick($event)"
+ elevation="lg"
+ radius="lg">
+ <p>Clickable glass card with animations</p>
+</ui-card><ui-card
+ variant="elevated"
+ [hasBackgroundLayer]="true"
+ [hasHeader]="true">
+ <div slot="background">
+ <!-- Background content -->
+ </div>
+ <div slot="header">
+ <h4>Card with Background</h4>
+ </div>
+ <p>Content over background</p>
+</ui-card>Current slide: {{ currentSlide + 1 }} of {{ interactiveItems.length }}
+ @if (lastClickedItem) { +Last clicked: {{ lastClickedItem.title }}
+ } +<ui-checkbox
+ label="Accept terms"
+ [(ngModel)]="isAccepted"
+ (checkboxChange)="onAccept($event)">
+</ui-checkbox><ui-checkbox
+ label="Marketing emails"
+ description="Receive promotional content"
+ variant="success"
+ size="lg"
+ [(ngModel)]="emailOptIn">
+</ui-checkbox><ui-checkbox
+ label="I agree to terms"
+ [required]="true"
+ state="error"
+ [(ngModel)]="agreedToTerms">
+</ui-checkbox>{{ getCurrentValues() }}
+ Click chips to toggle selection:
+Selected: {{ getSelectedItems() }}
+<ui-chip
+ variant="filled"
+ label="Basic Chip"
+ [clickable]="true"
+ (chipClick)="handleClick($event)">
+</ui-chip><ui-chip
+ variant="outlined"
+ label="Home"
+ [leadingIcon]="faHome"
+ [clickable]="true"
+ (chipClick)="goHome()">
+</ui-chip><ui-chip
+ variant="filled"
+ label="Tag Name"
+ [removable]="true"
+ [closeIcon]="faTimes"
+ (chipRemove)="removeTag($event)">
+</ui-chip><ui-chip
+ variant="outlined"
+ label="John Doe"
+ avatar="path/to/avatar.jpg"
+ avatarAlt="John Doe"
+ [clickable]="true"
+ (chipClick)="viewProfile('john')">
+</ui-chip>Large padding and centered content for hero sections
+{{ item }}
+ } +Discover what makes our product special
+ +{{ feature.description }}
+{{ interactiveValue ? formatDate(interactiveValue) : 'No date selected' }}
+Change count: {{ changeCount }}
+This is a basic drawer with default settings.
+You can close it by clicking the X button, pressing Escape, or clicking outside the drawer.
+This drawer slides in from the left side.
+Default position for navigation menus and sidebars.
+This drawer slides in from the right side.
+Great for secondary actions, filters, or settings panels.
+This drawer slides down from the top.
+Perfect for notifications, announcements, or quick access panels.
+This drawer slides up from the bottom.
+Commonly used for mobile interfaces and action sheets.
+This is a small drawer (280px width).
+Perfect for simple navigation or minimal content.
+This is a medium drawer (360px width) - the default size.
+Good balance between content space and screen real estate.
+This is a large drawer (480px width).
+Ideal for detailed content, forms, or complex interfaces.
+This is an extra large drawer (640px width).
+Use for very detailed interfaces or when you need more space.
+This drawer doesn't have a header section.
+This drawer has a footer with buttons.
+The footer stays at the bottom even if the content is scrollable.
+ +This content spans the full width
with no padding constraints.
Content below can still have its own padding.
+This is a persistent drawer that doesn't have a backdrop.
+It stays open until explicitly closed and doesn't block interaction with the rest of the page.
+Perfect for navigation menus that should remain visible.
+This drawer cannot be closed by clicking the X, pressing Escape, or clicking the backdrop.
+You must use the Close button below.
+ +{{ item }}
+ } +This drawer is configured based on your selections:
+{{ size }} size
+ } +Default
+ +Search
+ +Error
+ +Loading
+ +Success
+Normal
+ +Disabled
+ +No Action
++ This is custom content projected into the empty state component. + You can add any HTML or Angular components here. +
+With Content Projection
+Action clicked: {{ lastAction || 'None' }}
+Click count: {{ clickCount }}
+File upload with {{ size }} sizing.
+File upload with {{ variant }} styling.
+Accepts only image files (JPEG, PNG, GIF, WebP).
+Accepts PDF, Word, and Excel documents.
+Maximum file size of 5MB per file.
+Maximum of 3 files can be selected.
+Only one file can be selected.
+File upload in disabled state.
+File upload showing error state.
+File upload showing success state.
+File upload integrated with Angular reactive forms and validation.
+ + + + @if (submittedFiles.length > 0) { +Monitor file upload events in real-time.
+ +No events yet. Add or remove files to see events.
+ } @else { + @for (event of recentEvents.slice(-5).reverse(); track $index) { +{{ codeExample }}This demo showcases the Font Awesome icons available in the shared-ui library. Icons are pre-configured and ready to use across the application.
+fa-icon [icon]="faUser"
+ fa-icon [icon]="faHome"
+ fa-icon [icon]="faCog"
+ size="xs"
+ size="sm"
+ size="lg"
+ size="2x"
+ size="3x"
+ Most commonly used icons for UI elements, actions, and navigation.
+Outlined versions of icons, great for secondary actions and states.
+Social media and company logos for external integrations.
+style="color: #dc3545;"
+ size="lg", size="2x", size="3x"
+ import { faUser } from '@fortawesome/free-solid-svg-icons';export class MyComponent {
+ faUser = faUser;
+ faHome = faHome;
+ faCog = faCog;
+}<fa-icon [icon]="faUser"></fa-icon>
+<fa-icon [icon]="faHome" size="lg"></fa-icon>
+<fa-icon [icon]="faCog" size="2x"></fa-icon><fa-icon
+ [icon]="faHeart"
+ size="2x"
+ style="color: #dc3545;">
+</fa-icon><ui-button
+ variant="filled"
+ [icon]="faPlus"
+ iconPosition="left">
+ Add Item
+</ui-button><nav class="nav-menu">
+ <a href="/home">
+ <fa-icon [icon]="faHome"></fa-icon> Home
+ </a>
+ <a href="/profile">
+ <fa-icon [icon]="faUser"></fa-icon> Profile
+ </a>
+</nav><div class="status-success">
+ <fa-icon [icon]="faCheckCircle"></fa-icon>
+ Operation completed successfully!
+</div>
+
+<div class="status-error">
+ <fa-icon [icon]="faTimesCircle"></fa-icon>
+ Something went wrong.
+</div><div class="loading-container">
+ <fa-icon [icon]="faSpinner"></fa-icon>
+ Loading...
+</div>
+
+<ui-button
+ [disabled]="isLoading"
+ [icon]="isLoading ? faSpinner : faSave">
+ {{ isLoading ? 'Saving...' : 'Save' }}
+</ui-button>Only import the specific icons you're using to keep bundle size small.
+import { faUser, faHome } from '@fortawesome/free-solid-svg-icons';
+ Choose icons that clearly represent their function or meaning.
+faTrash for delete, faEdit for edit, faPlus for add
+ Use consistent icon sizes throughout your application.
+size="sm" for inline text, size="lg" for buttons
+ Add aria-labels for screen readers when icons convey important information.
+<fa-icon [icon]="faUser" aria-label="User profile"></fa-icon>
+ faPlus - Add/Create
+ faEdit - Edit/Modify
+ faTrash - Delete/Remove
+ faSave - Save/Confirm
+ faCancel - Cancel/Dismiss
+ faRefresh - Reload/Update
+ faHome - Home page
+ faArrowLeft - Go back
+ faArrowRight - Go forward
+ faChevronUp - Expand up
+ faChevronDown - Expand down
+ faBars - Menu toggle
+ faCheckCircle - Success
+ faTimesCircle - Error
+ faExclamationTriangle - Warning
+ faInfoCircle - Information
+ faSpinner - Loading
+ faUser - User/Profile
+ faCog - Settings
+ faSearch - Search
+ faEye - View/Show
+ faEyeSlash - Hide
+ faDownload - Download
+ Form field with {{ size }} sizing.
+Standard vertical layout with label above the control.
+Horizontal layout with label beside the control.
+Compact spacing for tighter layouts.
+Normal state with no validation.
+Error state with error message.
+Success state with success message.
+Warning state with warning message.
+Info state with informational message.
+Disabled field with disabled styling.
+Field marked as required with asterisk.
+Field marked as optional with (optional) text.
+Shows character count with maximum limit.
+Additional helpful information with icon.
+Form fields with Angular reactive form validation.
+ + + +{{ codeExample }}Resize the window to see responsive behavior
+A flexible image container with lazy loading, aspect ratios, and various display options.
+ + +With additional styled elements
+<ui-text-input
+ label="Email"
+ placeholder="Enter your email"
+ type="email"
+ variant="outlined"
+ size="md"
+ [(ngModel)]="email"
+ (inputChange)="handleEmailChange($event)">
+</ui-text-input><ui-text-input
+ label="Search"
+ placeholder="Search products..."
+ type="search"
+ variant="filled"
+ [prefixIcon]="faSearch"
+ [clearable]="true"
+ [(ngModel)]="searchTerm"
+ (inputChange)="handleSearch($event)">
+</ui-text-input><ui-textarea
+ label="Message"
+ placeholder="Enter your message..."
+ variant="outlined"
+ [rows]="4"
+ [maxLength]="500"
+ [showCharacterCount]="true"
+ [(ngModel)]="message"
+ (textareaChange)="handleMessageChange($event)">
+</ui-textarea><ui-input-wrapper
+ [mode]="inputMode"
+ label="Dynamic Input"
+ placeholder="Switches between input and textarea"
+ variant="outlined"
+ [prefixIcon]="faEdit"
+ [(ngModel)]="content"
+ (inputChange)="handleContentChange($event)">
+</ui-input-wrapper>{{ getValuesAsJson() }}
+ Small grid widget
+Analytics data
+Metrics overview
+Main highlight content
+Data insights
+Performance data
+Generated reports
+Responsive: mobile 12, tablet 6, desktop 6
+Quarter width
+Quarter width
+One third width
+Two thirds width
+{{ item.description }}
+This content area is larger than the container, so it will show custom scrollbars.
+You can scroll both horizontally and vertically to see all the content.
+<ui-dashboard-shell-layout
+ [sidebarCollapsed]="collapsed"
+ [showFooter]="true">
+ <div slot="header">Header Content</div>
+ <nav slot="sidebar">Navigation</nav>
+ <div slot="main">Main Content</div>
+ <div slot="footer">Footer Content</div>
+</ui-dashboard-shell-layout><ui-widget-grid-layout
+ gridSize="md"
+ [autoFit]="true">
+ <ui-widget-container>
+ <div>Widget Content</div>
+ </ui-widget-container>
+</ui-widget-grid-layout><ui-bento-grid-layout
+ variant="balanced"
+ [adaptive]="true">
+ <div>Grid Item 1</div>
+ <div>Grid Item 2</div>
+ <div>Grid Item 3</div>
+</ui-bento-grid-layout><ui-list-detail-layout>
+ <div slot="list">
+ List of items
+ </div>
+ <div slot="detail">
+ Selected item details
+ </div>
+</ui-list-detail-layout>+ Click items to interact with them: +
+ +<ui-list-container elevation="sm" spacing="xs" [rounded]="true">
+ <ui-list-item
+ [data]="{primary: 'Inbox'}"
+ size="md"
+ lines="one"
+ variant="text">
+ <fa-icon [icon]="faInbox" slot="trailing"></fa-icon>
+ </ui-list-item>
+</ui-list-container><ui-list-container elevation="md" spacing="sm" [rounded]="true">
+ <ui-list-item
+ [data]="{
+ primary: 'John Doe',
+ secondary: 'john@example.com',
+ avatarSrc: 'avatar.jpg'
+ }"
+ size="lg"
+ lines="two"
+ variant="avatar">
+ <button slot="trailing" (click)="call()">
+ <fa-icon [icon]="faPhone"></fa-icon>
+ </button>
+ </ui-list-item>
+</ui-list-container>{{ size }}
+{{ type }}
+{{ variant }}
+{{ speed }}
+With Label
+Processing
+Uploading
+Normal
+Disabled
+Spinner clicked: {{ clickCount }} times
+ } +This is the loaded content.
+ +✅ Data processed successfully!
+ +This is a basic modal with default settings.
+You can close it by clicking the X button, pressing Escape, or clicking outside the modal.
+This is a small modal (400px width).
+This is a medium modal (600px width) - the default size.
+This is a large modal (800px width).
+Perfect for forms, detailed content, or complex interfaces.
+This is an extra large modal (1000px width).
+Use this for very complex interfaces or wide content.
+This modal takes up the entire screen.
+Perfect for complex applications or immersive experiences.
+This is the default modal variant.
+Are you sure you want to continue? This action cannot be undone.
+This will permanently delete the item. This action cannot be undone.
+Your changes have been saved successfully!
+This modal doesn't have a header section.
+This modal has a footer with buttons aligned between start and end.
+ +This content spans the full width
with no padding constraints.
This modal cannot be closed by clicking the X, pressing Escape, or clicking the backdrop.
+You must use the Close button below.
+ +{{ item }}
+ } +This modal is configured based on your selections:
+Overlays shown: {{ overlayCount }}
+Backdrop clicks: {{ backdropClickCount }}
+ESC key presses: {{ escapeCount }}
+<ui-pagination
+ [currentPage]="currentPage"
+ [totalPages]="totalPages"
+ (pageChange)="onPageChange($event)">
+</ui-pagination><ui-pagination
+ [currentPage]="currentPage"
+ [totalPages]="totalPages"
+ [totalItems]="totalItems"
+ [itemsPerPage]="itemsPerPage"
+ [showInfo]="true"
+ (pageChange)="onPageChange($event)">
+</ui-pagination><ui-pagination
+ [currentPage]="currentPage"
+ [totalPages]="totalPages"
+ [compact]="true"
+ [showLabels]="true"
+ size="sm"
+ alignment="left"
+ previousLabel="Back"
+ nextLabel="Forward"
+ (pageChange)="onPageChange($event)">
+</ui-pagination><ui-pagination
+ [currentPage]="currentPage"
+ [totalPages]="totalPages"
+ [maxVisible]="5"
+ size="lg"
+ alignment="center"
+ ariaLabel="Search results pagination"
+ [showInfo]="true"
+ (pageChange)="handlePageChange($event)">
+</ui-pagination><ui-progress-bar
+ label="Download Progress"
+ size="md"
+ variant="primary"
+ [progress]="75"
+ helperText="3 of 4 files downloaded">
+</ui-progress-bar><ui-progress-bar
+ label="Loading..."
+ progressType="indeterminate"
+ variant="primary"
+ [animated]="true"
+ helperText="Please wait while we process your request">
+</ui-progress-bar><ui-progress-bar
+ label="Video Loading"
+ progressType="buffer"
+ [progress]="currentProgress"
+ [buffer]="bufferProgress"
+ variant="secondary"
+ helperText="Buffering video content">
+</ui-progress-bar><ui-progress-bar
+ label="Upload Progress"
+ [progress]="uploadPercent"
+ variant="success"
+ [striped]="true"
+ [animated]="true"
+ size="lg"
+ helperText="Uploading files...">
+</ui-progress-bar><ui-radio-group
+ label="Choose an option"
+ [options]="options"
+ name="radio-group"
+ [(ngModel)]="selectedValue"
+ (selectionChange)="onSelectionChange($event)">
+</ui-radio-group><ui-radio-button
+ value="option1"
+ label="Option 1"
+ name="radio-name"
+ size="md"
+ variant="primary"
+ [(ngModel)]="selectedValue"
+ (selectionChange)="onSelectionChange($event)">
+</ui-radio-button><ui-radio-group
+ label="Subscription Plans"
+ [options]="[
+ {{ '{' }}
+ value: 'basic',
+ label: 'Basic Plan',
+ description: 'Perfect for individuals'
+ {{ '}' }},
+ {{ '{' }}
+ value: 'pro',
+ label: 'Pro Plan',
+ description: 'For small teams'
+ {{ '}' }}
+ ]"
+ name="subscription"
+ [(ngModel)]="plan">
+</ui-radio-group><ui-radio-group
+ label="Payment Method"
+ [options]="paymentOptions"
+ orientation="horizontal"
+ name="payment"
+ [(ngModel)]="paymentMethod">
+</ui-radio-group>{{ getCurrentValues() }}
+ <ui-search-bar
+ placeholder="Search..."
+ [(ngModel)]="searchValue"
+ (searchChange)="onSearchChange($event)"
+ (searchSubmit)="onSearchSubmit($event)">
+</ui-search-bar><ui-search-bar
+ placeholder="Search with suggestions..."
+ [suggestions]="suggestions"
+ [(ngModel)]="searchValue"
+ (suggestionSelect)="onSuggestionSelect($event)">
+</ui-search-bar><ui-search-bar
+ placeholder="Search with icons..."
+ [leadingIcon]="faSearch"
+ [trailingIcons]="iconButtons"
+ variant="filled"
+ size="lg"
+ (trailingIconClick)="onIconClick($event)">
+</ui-search-bar>{{ getCurrentValues() }}
+ Skeleton loaders provide visual placeholders while content is loading, improving perceived performance and user experience.
+ + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+<ui-skeleton-loader shape="text" size="md"></ui-skeleton-loader><ui-skeleton-profile avatarSize="lg"></ui-skeleton-profile><ui-skeleton-group variant="horizontal">
+ <ui-skeleton-loader shape="avatar" size="sm"></ui-skeleton-loader>
+ <ui-skeleton-loader shape="text" width="w-75"></ui-skeleton-loader>
+</ui-skeleton-group>Spacers with debug mode enabled to show spacing
+Semantic spacing tokens for different component contexts
+Semantic spacing tokens for layout elements
+Spacer that grows to fill available space
+ +<ui-switch
+ label="Enable feature"
+ size="md"
+ variant="primary"
+ (switchChange)="onToggle($event)">
+</ui-switch><ui-switch
+ label="Email Notifications"
+ helperText="Receive updates via email"
+ variant="success"
+ [ngModel]="emailEnabled"
+ (switchChange)="toggleEmail($event)">
+</ui-switch><ui-switch
+ formControlName="agreement"
+ label="I agree to terms"
+ variant="primary"
+ [required]="true">
+</ui-switch><ui-switch
+ size="lg"
+ variant="secondary"
+ ariaLabel="Toggle feature"
+ (switchChange)="handleToggle($event)">
+</ui-switch><ui-table
+ [data]="tableData"
+ [columns]="columns"
+ variant="striped"
+ size="default"
+ [hoverable]="true"
+ (sort)="handleSort($event)"
+ (rowClick)="handleRowClick($event)">
+</ui-table><ui-table
+ [data]="userData"
+ [columns]="columns"
+ [cellTemplates]="cellTemplates">
+</ui-table>
+
+<ng-template #statusTemplate let-value>
+ <ui-status-badge [variant]="getVariant(value)">
+ {{ "{{ value }}" }}
+ </ui-status-badge>
+</ng-template>columns: TableColumn[] = [
+ {{ '{' }} key: 'name', label: 'Name', sortable: true {{ '}' }},
+ {{ '{' }} key: 'email', label: 'Email', sortable: true {{ '}' }},
+ {{ '{' }} key: 'status', label: 'Status', align: 'center' {{ '}' }},
+ {{ '{' }} key: 'actions', label: 'Actions', align: 'right' {{ '}' }}
+];{{ interactiveValue ? formatTime(interactiveValue) : 'No time selected' }}
+24-hour format: {{ interactiveValue ? format24Hour(interactiveValue) : 'N/A' }}
+Change count: {{ changeCount }}
++ Customize the video player below by toggling different options: +
+ ++ Typical setup for educational content with subtitles and chapter markers +
++ Autoplay setup for product demonstrations and marketing content +
++ Compact player for media galleries and previews +
++ Demonstrates error handling when video fails to load +
+<ui-video-player
+ [sources]="videoSources"
+ poster="poster-image.jpg"
+ [showControls]="true"
+ ariaLabel="Demo video player">
+</ui-video-player><ui-video-player
+ [sources]="videoSources"
+ [tracks]="subtitleTracks"
+ poster="poster-image.jpg"
+ size="lg"
+ [showControls]="true"
+ [allowFullscreen]="true"
+ (play)="onVideoPlay()"
+ (pause)="onVideoPause()">
+</ui-video-player><ui-video-player
+ [sources]="videoSources"
+ variant="minimal"
+ size="md"
+ [autoplay]="true"
+ [muted]="true"
+ [loop]="true"
+ [showVolumeControl]="false"
+ [allowFullscreen]="false">
+</ui-video-player>{{ item.subtitle }}
+ } + @if (item.content) { +{{ item.content }}
+ } +|
+
+ {{ column.label }}
+ @if (column.sortable && sortColumn === column.key) {
+
+ @if (sortDirection === 'asc') {
+ ↑
+ } @else if (sortDirection === 'desc') {
+ ↓
+ }
+
+ }
+
+ |
+ }
+
|---|
|
+
+ @if (emptyTemplate) {
+
+ {{ emptyMessage }}
+ }
+ |
+
|
+ @if (getCellTemplate(column.key)) {
+ |
+ }
+
{{ description }}
+ } + +Customize your app's appearance
+