Add comprehensive component library expansion with new UI components
This commit includes multiple new components and improvements to the UI essentials library: ## New Components Added: - **Accordion**: Expandable/collapsible content panels with full accessibility - **Alert**: Notification and messaging component with variants and dismiss functionality - **Popover**: Floating content containers with positioning and trigger options - **Timeline**: Chronological event display with customizable styling - **Tree View**: Hierarchical data display with expand/collapse functionality - **Toast**: Notification component (previously committed, includes style refinements) ## Component Features: - Full TypeScript implementation with Angular 19+ patterns - Comprehensive SCSS styling using semantic design tokens exclusively - Multiple size variants (sm, md, lg) and color variants (primary, success, warning, danger, info) - Accessibility support with ARIA attributes and keyboard navigation - Responsive design with mobile-first approach - Interactive demos showcasing all component features - Integration with existing design system and routing ## Demo Applications: - Created comprehensive demo components for each new component - Interactive examples with live code demonstrations - Integrated into main demo application routing and navigation ## Documentation: - Added COMPONENT_CREATION_TEMPLATE.md with detailed guidelines - Comprehensive component creation patterns and best practices - Design token usage guidelines and validation rules ## Code Quality: - Follows established Angular and SCSS conventions - Uses only verified semantic design tokens - Maintains consistency with existing component architecture - Comprehensive error handling and edge case management 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
skyai_dev
@@ -0,0 +1,194 @@
|
||||
@use '../../../../../shared-ui/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-lg;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
||||
h2 {
|
||||
color: $semantic-color-text-primary;
|
||||
font-size: $semantic-typography-heading-h2-size;
|
||||
margin-bottom: $semantic-spacing-layout-lg;
|
||||
border-bottom: 1px solid $semantic-color-border-subtle;
|
||||
padding-bottom: $semantic-spacing-content-paragraph;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: $semantic-color-text-secondary;
|
||||
font-size: $semantic-typography-heading-h3-size;
|
||||
margin-bottom: $semantic-spacing-component-lg;
|
||||
margin-top: $semantic-spacing-layout-lg;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: $semantic-color-text-primary;
|
||||
font-size: $semantic-typography-heading-h4-size;
|
||||
margin-bottom: $semantic-spacing-component-md;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-section {
|
||||
margin-bottom: $semantic-spacing-layout-xl;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-row {
|
||||
display: flex;
|
||||
gap: $semantic-spacing-component-lg;
|
||||
flex-wrap: wrap;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.demo-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $semantic-spacing-component-lg;
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.demo-accordion-container {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.demo-controls {
|
||||
display: flex;
|
||||
gap: $semantic-spacing-component-md;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: $semantic-spacing-component-lg;
|
||||
padding: $semantic-spacing-component-lg;
|
||||
background: $semantic-color-surface-secondary;
|
||||
border-radius: $semantic-border-radius-lg;
|
||||
border: 1px solid $semantic-color-border-subtle;
|
||||
|
||||
button {
|
||||
padding: $semantic-spacing-component-sm $semantic-spacing-component-md;
|
||||
border: 1px solid $semantic-color-border-primary;
|
||||
border-radius: $semantic-border-radius-sm;
|
||||
background: $semantic-color-surface-primary;
|
||||
color: $semantic-color-text-primary;
|
||||
font-size: $semantic-typography-font-size-sm;
|
||||
cursor: pointer;
|
||||
transition: all $semantic-motion-duration-fast $semantic-easing-standard;
|
||||
|
||||
&:hover {
|
||||
background: $semantic-color-surface-secondary;
|
||||
border-color: $semantic-color-border-primary;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 2px solid $semantic-color-primary;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
&--primary {
|
||||
background: $semantic-color-primary;
|
||||
color: $semantic-color-on-primary;
|
||||
border-color: $semantic-color-primary;
|
||||
|
||||
&:hover {
|
||||
background: $semantic-color-primary;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.demo-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $semantic-spacing-component-sm;
|
||||
padding: $semantic-spacing-component-md;
|
||||
border: 1px solid $semantic-color-border-subtle;
|
||||
border-radius: $semantic-border-radius-md;
|
||||
background: $semantic-color-surface-primary;
|
||||
|
||||
h5 {
|
||||
margin: 0 0 $semantic-spacing-component-xs 0;
|
||||
font-size: $semantic-typography-font-size-sm;
|
||||
font-weight: $semantic-typography-font-weight-medium;
|
||||
color: $semantic-color-text-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.code-example {
|
||||
background: $semantic-color-surface-secondary;
|
||||
border: 1px solid $semantic-color-border-subtle;
|
||||
border-radius: $semantic-border-radius-sm;
|
||||
padding: $semantic-spacing-component-md;
|
||||
font-family: $semantic-typography-font-family-mono;
|
||||
font-size: $semantic-typography-font-size-xs;
|
||||
color: $semantic-color-text-primary;
|
||||
overflow-x: auto;
|
||||
white-space: pre-wrap;
|
||||
margin-top: $semantic-spacing-component-sm;
|
||||
}
|
||||
|
||||
.sample-content {
|
||||
line-height: $semantic-typography-line-height-relaxed;
|
||||
|
||||
p {
|
||||
margin: 0 0 $semantic-spacing-component-sm 0;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0 0 $semantic-spacing-component-sm $semantic-spacing-component-lg;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: $semantic-spacing-component-xs;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-demo {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: $semantic-spacing-component-xs;
|
||||
color: $semantic-color-primary;
|
||||
font-weight: $semantic-typography-font-weight-medium;
|
||||
}
|
||||
|
||||
// Responsive design
|
||||
@media (max-width: $semantic-breakpoint-md - 1) {
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-md;
|
||||
}
|
||||
|
||||
.demo-row {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.demo-column {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.demo-controls {
|
||||
flex-direction: column;
|
||||
gap: $semantic-spacing-component-sm;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $semantic-breakpoint-sm - 1) {
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-sm;
|
||||
}
|
||||
|
||||
.demo-item {
|
||||
padding: $semantic-spacing-component-sm;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,355 @@
|
||||
import { Component, ViewChild } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { AccordionComponent, AccordionItemComponent, AccordionItem, AccordionExpandEvent } from '../../../../../ui-essentials/src/public-api';
|
||||
|
||||
@Component({
|
||||
selector: 'ui-accordion-demo',
|
||||
standalone: true,
|
||||
imports: [CommonModule, AccordionComponent, AccordionItemComponent],
|
||||
template: `
|
||||
<div class="demo-container">
|
||||
<h2>Accordion Demo</h2>
|
||||
|
||||
<!-- Basic Usage -->
|
||||
<section class="demo-section">
|
||||
<h3>Basic Usage</h3>
|
||||
<div class="demo-row">
|
||||
<div class="demo-column">
|
||||
<div class="demo-item">
|
||||
<h5>Single Expand (Default)</h5>
|
||||
<div class="demo-accordion-container">
|
||||
<ui-accordion>
|
||||
<ui-accordion-item id="basic-1" title="Getting Started">
|
||||
<div class="sample-content">
|
||||
<p>Welcome to our comprehensive guide on getting started with our platform.</p>
|
||||
<p>This section covers the essential steps you need to know to begin your journey.</p>
|
||||
</div>
|
||||
</ui-accordion-item>
|
||||
<ui-accordion-item id="basic-2" title="Advanced Features">
|
||||
<div class="sample-content">
|
||||
<p>Explore our advanced features designed for power users.</p>
|
||||
<ul>
|
||||
<li>Advanced analytics and reporting</li>
|
||||
<li>Custom integrations and APIs</li>
|
||||
<li>Enterprise-grade security features</li>
|
||||
</ul>
|
||||
</div>
|
||||
</ui-accordion-item>
|
||||
<ui-accordion-item id="basic-3" title="Troubleshooting">
|
||||
<div class="sample-content">
|
||||
<p>Common issues and their solutions:</p>
|
||||
<ul>
|
||||
<li>Login and authentication problems</li>
|
||||
<li>Performance optimization tips</li>
|
||||
<li>Data import and export issues</li>
|
||||
</ul>
|
||||
</div>
|
||||
</ui-accordion-item>
|
||||
</ui-accordion>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-column">
|
||||
<div class="demo-item">
|
||||
<h5>Multiple Expand</h5>
|
||||
<div class="demo-accordion-container">
|
||||
<ui-accordion [multiple]="true">
|
||||
<ui-accordion-item id="multi-1" title="Account Settings">
|
||||
<div class="sample-content">
|
||||
<p>Manage your account preferences and personal information.</p>
|
||||
<p>Update your profile, change password, and configure notification settings.</p>
|
||||
</div>
|
||||
</ui-accordion-item>
|
||||
<ui-accordion-item id="multi-2" title="Privacy Controls">
|
||||
<div class="sample-content">
|
||||
<p>Control how your data is used and shared:</p>
|
||||
<ul>
|
||||
<li>Data sharing preferences</li>
|
||||
<li>Visibility settings</li>
|
||||
<li>Third-party integrations</li>
|
||||
</ul>
|
||||
</div>
|
||||
</ui-accordion-item>
|
||||
<ui-accordion-item id="multi-3" title="Notifications">
|
||||
<div class="sample-content">
|
||||
<p>Customize your notification preferences to stay informed about what matters most to you.</p>
|
||||
</div>
|
||||
</ui-accordion-item>
|
||||
</ui-accordion>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Size Variants -->
|
||||
<section class="demo-section">
|
||||
<h3>Size Variants</h3>
|
||||
<div class="demo-row">
|
||||
@for (size of sizes; track size) {
|
||||
<div class="demo-column">
|
||||
<div class="demo-item">
|
||||
<h5>Size: {{ size | titlecase }}</h5>
|
||||
<div class="demo-accordion-container">
|
||||
<ui-accordion [size]="size">
|
||||
<ui-accordion-item [id]="'size-' + size + '-1'" title="Sample Header">
|
||||
<div class="sample-content">
|
||||
<p>This is {{ size }} sized accordion content. The padding and font sizes adjust based on the size variant.</p>
|
||||
</div>
|
||||
</ui-accordion-item>
|
||||
<ui-accordion-item [id]="'size-' + size + '-2'" title="Another Section">
|
||||
<div class="sample-content">
|
||||
<p>More content to demonstrate the {{ size }} size variant styling.</p>
|
||||
</div>
|
||||
</ui-accordion-item>
|
||||
</ui-accordion>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Variants -->
|
||||
<section class="demo-section">
|
||||
<h3>Style Variants</h3>
|
||||
<div class="demo-row">
|
||||
@for (variant of variants; track variant) {
|
||||
<div class="demo-column">
|
||||
<div class="demo-item">
|
||||
<h5>{{ variant | titlecase }}</h5>
|
||||
<div class="demo-accordion-container">
|
||||
<ui-accordion [variant]="variant">
|
||||
<ui-accordion-item [id]="'variant-' + variant + '-1'" title="Design System">
|
||||
<div class="sample-content">
|
||||
<p>This {{ variant }} variant shows different visual styling approaches for the accordion component.</p>
|
||||
</div>
|
||||
</ui-accordion-item>
|
||||
<ui-accordion-item [id]="'variant-' + variant + '-2'" title="Component Library">
|
||||
<div class="sample-content">
|
||||
<p>Each variant provides a different visual weight and emphasis level.</p>
|
||||
</div>
|
||||
</ui-accordion-item>
|
||||
</ui-accordion>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Programmatic API -->
|
||||
<section class="demo-section">
|
||||
<h3>Programmatic Control</h3>
|
||||
<div class="demo-item">
|
||||
<div class="demo-controls">
|
||||
<button (click)="expandItem('api-1')" class="button--primary">Expand Item 1</button>
|
||||
<button (click)="expandItem('api-2')" class="button--primary">Expand Item 2</button>
|
||||
<button (click)="expandItem('api-3')" class="button--primary">Expand Item 3</button>
|
||||
<button (click)="expandAll()">Expand All</button>
|
||||
<button (click)="collapseAll()">Collapse All</button>
|
||||
</div>
|
||||
|
||||
<div class="demo-accordion-container">
|
||||
<ui-accordion
|
||||
#programmaticAccordion
|
||||
[multiple]="true"
|
||||
[items]="programmaticItems"
|
||||
(itemToggle)="handleItemToggle($event)"
|
||||
(expandedItemsChange)="handleExpandedItemsChange($event)">
|
||||
</ui-accordion>
|
||||
</div>
|
||||
|
||||
<div class="code-example">
|
||||
Current expanded items: {{ expandedItemIds | json }}
|
||||
Last toggled: {{ lastToggledItem | json }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- States -->
|
||||
<section class="demo-section">
|
||||
<h3>States</h3>
|
||||
<div class="demo-row">
|
||||
<div class="demo-column">
|
||||
<div class="demo-item">
|
||||
<h5>Disabled Accordion</h5>
|
||||
<div class="demo-accordion-container">
|
||||
<ui-accordion [disabled]="true">
|
||||
<ui-accordion-item id="disabled-1" title="Disabled Section">
|
||||
<div class="sample-content">
|
||||
<p>This entire accordion is disabled and cannot be interacted with.</p>
|
||||
</div>
|
||||
</ui-accordion-item>
|
||||
<ui-accordion-item id="disabled-2" title="Another Disabled Section">
|
||||
<div class="sample-content">
|
||||
<p>All items in this accordion are disabled.</p>
|
||||
</div>
|
||||
</ui-accordion-item>
|
||||
</ui-accordion>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-column">
|
||||
<div class="demo-item">
|
||||
<h5>Individual Disabled Items</h5>
|
||||
<div class="demo-accordion-container">
|
||||
<ui-accordion>
|
||||
<ui-accordion-item id="mixed-1" title="Active Section">
|
||||
<div class="sample-content">
|
||||
<p>This section is active and can be expanded/collapsed normally.</p>
|
||||
</div>
|
||||
</ui-accordion-item>
|
||||
<ui-accordion-item id="mixed-2" title="Disabled Section" [disabled]="true">
|
||||
<div class="sample-content">
|
||||
<p>This individual section is disabled.</p>
|
||||
</div>
|
||||
</ui-accordion-item>
|
||||
<ui-accordion-item id="mixed-3" title="Another Active Section">
|
||||
<div class="sample-content">
|
||||
<p>This section is also active and functional.</p>
|
||||
</div>
|
||||
</ui-accordion-item>
|
||||
</ui-accordion>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Custom Content -->
|
||||
<section class="demo-section">
|
||||
<h3>Custom Content</h3>
|
||||
<div class="demo-item">
|
||||
<div class="demo-accordion-container">
|
||||
<ui-accordion>
|
||||
<ui-accordion-item id="custom-1" title="">
|
||||
<div slot="header" class="icon-demo">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
|
||||
<path d="M8 1l2.5 5h5.5l-4.5 3.5 1.5 5.5L8 12l-4.5 3.5L5 10 0.5 6h5.5L8 1z"/>
|
||||
</svg>
|
||||
Custom Header with Icon
|
||||
</div>
|
||||
<div class="sample-content">
|
||||
<p>This accordion item uses custom header content with an icon.</p>
|
||||
<p>The header slot allows for complete customization of the trigger area.</p>
|
||||
</div>
|
||||
</ui-accordion-item>
|
||||
|
||||
<ui-accordion-item id="custom-2" title="">
|
||||
<div slot="header">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
|
||||
<strong>Rich Header Content</strong>
|
||||
<span style="background: #e3f2fd; color: #1976d2; padding: 2px 8px; border-radius: 12px; font-size: 12px;">
|
||||
New
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sample-content">
|
||||
<p>Complex header layouts are possible with custom slot content.</p>
|
||||
<p>This example shows a header with a badge indicator.</p>
|
||||
</div>
|
||||
</ui-accordion-item>
|
||||
</ui-accordion>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Interactive Example -->
|
||||
<section class="demo-section">
|
||||
<h3>Interactive Example</h3>
|
||||
<div class="demo-item">
|
||||
<h4>Event Handling</h4>
|
||||
<div class="demo-accordion-container">
|
||||
<ui-accordion (itemToggle)="handleInteractiveToggle($event)">
|
||||
<ui-accordion-item id="interactive-1" title="Click to Track Events">
|
||||
<div class="sample-content">
|
||||
<p>This accordion tracks all toggle events. Check the event log below.</p>
|
||||
</div>
|
||||
</ui-accordion-item>
|
||||
<ui-accordion-item id="interactive-2" title="Another Trackable Item">
|
||||
<div class="sample-content">
|
||||
<p>Each interaction will be logged with detailed event information.</p>
|
||||
</div>
|
||||
</ui-accordion-item>
|
||||
</ui-accordion>
|
||||
</div>
|
||||
|
||||
<div class="code-example">
|
||||
Event Log ({{ eventLog.length }} events):
|
||||
{{ eventLog.length > 0 ? (eventLog | json) : 'No events yet...' }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
`,
|
||||
styleUrl: './accordion-demo.component.scss'
|
||||
})
|
||||
export class AccordionDemoComponent {
|
||||
@ViewChild('programmaticAccordion') programmaticAccordion!: AccordionComponent;
|
||||
|
||||
sizes = ['sm', 'md', 'lg'] as const;
|
||||
variants = ['elevated', 'outlined', 'filled'] as const;
|
||||
|
||||
programmaticItems: AccordionItem[] = [
|
||||
{
|
||||
id: 'api-1',
|
||||
title: 'API Documentation',
|
||||
content: 'Complete API reference with examples and best practices for integration.',
|
||||
expanded: false
|
||||
},
|
||||
{
|
||||
id: 'api-2',
|
||||
title: 'SDK Downloads',
|
||||
content: 'Download our SDKs for various programming languages and frameworks.',
|
||||
expanded: false
|
||||
},
|
||||
{
|
||||
id: 'api-3',
|
||||
title: 'Code Examples',
|
||||
content: 'Real-world code examples and implementation patterns.',
|
||||
expanded: false
|
||||
}
|
||||
];
|
||||
|
||||
expandedItemIds: string[] = [];
|
||||
lastToggledItem: AccordionExpandEvent | null = null;
|
||||
eventLog: AccordionExpandEvent[] = [];
|
||||
|
||||
handleItemToggle(event: AccordionExpandEvent): void {
|
||||
this.lastToggledItem = event;
|
||||
console.log('Accordion item toggled:', event);
|
||||
}
|
||||
|
||||
handleExpandedItemsChange(expandedIds: string[]): void {
|
||||
this.expandedItemIds = expandedIds;
|
||||
console.log('Expanded items changed:', expandedIds);
|
||||
}
|
||||
|
||||
handleInteractiveToggle(event: AccordionExpandEvent): void {
|
||||
this.eventLog.unshift({
|
||||
...event,
|
||||
// Add timestamp for demonstration
|
||||
timestamp: new Date().toLocaleTimeString()
|
||||
} as any);
|
||||
|
||||
// Keep only last 5 events
|
||||
if (this.eventLog.length > 5) {
|
||||
this.eventLog = this.eventLog.slice(0, 5);
|
||||
}
|
||||
}
|
||||
|
||||
expandItem(itemId: string): void {
|
||||
this.programmaticAccordion?.expandItem(itemId);
|
||||
}
|
||||
|
||||
expandAll(): void {
|
||||
this.programmaticAccordion?.expandAll();
|
||||
}
|
||||
|
||||
collapseAll(): void {
|
||||
this.programmaticAccordion?.collapseAll();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,167 @@
|
||||
@use '../../../../../shared-ui/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: $semantic-spacing-layout-section-md;
|
||||
}
|
||||
|
||||
.demo-section {
|
||||
margin-bottom: $semantic-spacing-layout-section-lg;
|
||||
|
||||
h2, h3, h4 {
|
||||
margin: 0 0 $semantic-spacing-component-lg 0;
|
||||
color: $semantic-color-text-primary;
|
||||
}
|
||||
|
||||
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);
|
||||
border-bottom: $semantic-border-width-1 solid $semantic-color-border-subtle;
|
||||
padding-bottom: $semantic-spacing-component-md;
|
||||
}
|
||||
|
||||
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-secondary;
|
||||
margin-bottom: $semantic-spacing-component-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);
|
||||
margin-bottom: $semantic-spacing-component-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $semantic-spacing-component-md;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.demo-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: $semantic-spacing-layout-section-md;
|
||||
}
|
||||
|
||||
.demo-variant-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $semantic-spacing-component-sm;
|
||||
}
|
||||
|
||||
.demo-message {
|
||||
padding: $semantic-spacing-component-md;
|
||||
background: $semantic-color-surface-secondary;
|
||||
border: $semantic-border-width-1 solid $semantic-color-border-subtle;
|
||||
border-radius: $semantic-border-card-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-secondary;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.demo-button {
|
||||
background: $semantic-color-primary;
|
||||
color: $semantic-color-on-primary;
|
||||
border: none;
|
||||
border-radius: $semantic-border-button-radius;
|
||||
padding: $semantic-spacing-interactive-button-padding-y $semantic-spacing-interactive-button-padding-x;
|
||||
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;
|
||||
|
||||
&:hover {
|
||||
box-shadow: $semantic-shadow-button-hover;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid $semantic-color-focus;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: $semantic-shadow-button-rest;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-info {
|
||||
background: $semantic-color-surface-elevated;
|
||||
border: $semantic-border-width-1 solid $semantic-color-border-subtle;
|
||||
border-radius: $semantic-border-card-radius;
|
||||
padding: $semantic-spacing-component-lg;
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding-left: $semantic-spacing-component-md;
|
||||
|
||||
li {
|
||||
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-secondary;
|
||||
margin-bottom: $semantic-spacing-component-xs;
|
||||
|
||||
strong {
|
||||
color: $semantic-color-text-primary;
|
||||
font-weight: $semantic-typography-font-weight-semibold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive adjustments
|
||||
@media (max-width: $semantic-breakpoint-md - 1) {
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-sm;
|
||||
}
|
||||
|
||||
.demo-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: $semantic-spacing-layout-section-sm;
|
||||
}
|
||||
|
||||
.demo-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;
|
||||
|
||||
h2 {
|
||||
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);
|
||||
}
|
||||
|
||||
h3 {
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,212 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
|
||||
import { AlertComponent } from "../../../../../ui-essentials/src/public-api";
|
||||
|
||||
@Component({
|
||||
selector: 'ui-alert-demo',
|
||||
standalone: true,
|
||||
imports: [CommonModule, FontAwesomeModule, AlertComponent],
|
||||
template: `
|
||||
<div class="demo-container">
|
||||
<h2>Alert Demo</h2>
|
||||
|
||||
<!-- Size Variants -->
|
||||
<section class="demo-section">
|
||||
<h3>Sizes</h3>
|
||||
<div class="demo-column">
|
||||
@for (size of sizes; track size) {
|
||||
<ui-alert [size]="size" title="{{size | titlecase}} Alert">
|
||||
This is a {{ size }} size alert component demonstration.
|
||||
</ui-alert>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Variant Types -->
|
||||
<section class="demo-section">
|
||||
<h3>Variants</h3>
|
||||
<div class="demo-column">
|
||||
<ui-alert variant="primary" title="Primary Alert">
|
||||
This is a primary alert for general information or neutral messages.
|
||||
</ui-alert>
|
||||
|
||||
<ui-alert variant="success" title="Success Alert">
|
||||
Your action was completed successfully! Everything worked as expected.
|
||||
</ui-alert>
|
||||
|
||||
<ui-alert variant="warning" title="Warning Alert">
|
||||
Please review this information carefully before proceeding.
|
||||
</ui-alert>
|
||||
|
||||
<ui-alert variant="danger" title="Error Alert">
|
||||
Something went wrong. Please check your input and try again.
|
||||
</ui-alert>
|
||||
|
||||
<ui-alert variant="info" title="Information Alert">
|
||||
Here's some helpful information you might want to know.
|
||||
</ui-alert>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Without Icons -->
|
||||
<section class="demo-section">
|
||||
<h3>Without Icons</h3>
|
||||
<div class="demo-column">
|
||||
<ui-alert variant="success" title="Success" [showIcon]="false">
|
||||
This alert doesn't show an icon for a cleaner look.
|
||||
</ui-alert>
|
||||
|
||||
<ui-alert variant="warning" [showIcon]="false">
|
||||
This warning alert has no title and no icon.
|
||||
</ui-alert>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Dismissible Alerts -->
|
||||
<section class="demo-section">
|
||||
<h3>Dismissible Alerts</h3>
|
||||
<div class="demo-column">
|
||||
@for (dismissibleAlert of dismissibleAlerts; track dismissibleAlert.id) {
|
||||
<ui-alert
|
||||
[variant]="dismissibleAlert.variant"
|
||||
[title]="dismissibleAlert.title"
|
||||
[dismissible]="true"
|
||||
(dismissed)="dismissAlert(dismissibleAlert.id)">
|
||||
{{ dismissibleAlert.message }}
|
||||
</ui-alert>
|
||||
}
|
||||
|
||||
@if (dismissibleAlerts.length === 0) {
|
||||
<p class="demo-message">All dismissible alerts have been dismissed. <button type="button" (click)="resetDismissibleAlerts()" class="demo-button">Reset Alerts</button></p>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- No Title Alerts -->
|
||||
<section class="demo-section">
|
||||
<h3>Without Titles</h3>
|
||||
<div class="demo-column">
|
||||
<ui-alert variant="info">
|
||||
This is an informational alert without a title. The message stands on its own.
|
||||
</ui-alert>
|
||||
|
||||
<ui-alert variant="danger" [dismissible]="true">
|
||||
This is a dismissible error alert without a title.
|
||||
</ui-alert>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Bold Titles -->
|
||||
<section class="demo-section">
|
||||
<h3>Bold Titles</h3>
|
||||
<div class="demo-column">
|
||||
<ui-alert variant="primary" title="Important Notice" [boldTitle]="true">
|
||||
This alert has a bold title to emphasize importance.
|
||||
</ui-alert>
|
||||
|
||||
<ui-alert variant="warning" title="Critical Warning" [boldTitle]="true" [dismissible]="true">
|
||||
Bold titles help draw attention to critical messages.
|
||||
</ui-alert>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Interactive Examples -->
|
||||
<section class="demo-section">
|
||||
<h3>Interactive Examples</h3>
|
||||
<div class="demo-column">
|
||||
<ui-alert
|
||||
variant="success"
|
||||
title="Form Submitted Successfully"
|
||||
[dismissible]="true"
|
||||
(dismissed)="handleAlertDismissed('success')">
|
||||
Your form has been submitted and will be processed within 24 hours.
|
||||
</ui-alert>
|
||||
|
||||
<ui-alert
|
||||
variant="info"
|
||||
title="Newsletter Subscription"
|
||||
[dismissible]="true"
|
||||
(dismissed)="handleAlertDismissed('newsletter')">
|
||||
Don't forget to confirm your email address to complete your subscription.
|
||||
</ui-alert>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- All Combinations -->
|
||||
<section class="demo-section">
|
||||
<h3>Size & Variant Combinations</h3>
|
||||
<div class="demo-grid">
|
||||
@for (variant of variants; track variant) {
|
||||
<div class="demo-variant-group">
|
||||
<h4>{{ variant | titlecase }}</h4>
|
||||
@for (size of sizes; track size) {
|
||||
<ui-alert
|
||||
[variant]="variant"
|
||||
[size]="size"
|
||||
[title]="size | titlecase"
|
||||
[dismissible]="size === 'lg'">
|
||||
{{ variant | titlecase }} {{ size }} alert
|
||||
</ui-alert>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Accessibility Information -->
|
||||
<section class="demo-section">
|
||||
<h3>Accessibility Features</h3>
|
||||
<div class="demo-info">
|
||||
<ul>
|
||||
<li><strong>Screen Reader Support:</strong> Proper ARIA labels and live regions</li>
|
||||
<li><strong>Keyboard Navigation:</strong> Dismissible alerts can be closed with Enter or Space</li>
|
||||
<li><strong>Focus Management:</strong> Clear focus indicators on dismiss button</li>
|
||||
<li><strong>Semantic HTML:</strong> Proper heading hierarchy and content structure</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
`,
|
||||
styleUrl: './alert-demo.component.scss'
|
||||
})
|
||||
export class AlertDemoComponent {
|
||||
sizes = ['sm', 'md', 'lg'] as const;
|
||||
variants = ['primary', 'success', 'warning', 'danger', 'info'] as const;
|
||||
|
||||
dismissibleAlerts = [
|
||||
{
|
||||
id: 1,
|
||||
variant: 'success' as const,
|
||||
title: 'Task Completed',
|
||||
message: 'Your task has been completed successfully and saved to your dashboard.'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
variant: 'warning' as const,
|
||||
title: 'Session Expiring',
|
||||
message: 'Your session will expire in 5 minutes. Please save your work.'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
variant: 'info' as const,
|
||||
title: 'New Feature Available',
|
||||
message: 'Check out our new dashboard analytics feature in the sidebar menu.'
|
||||
}
|
||||
];
|
||||
|
||||
private originalDismissibleAlerts = [...this.dismissibleAlerts];
|
||||
|
||||
dismissAlert(id: number): void {
|
||||
this.dismissibleAlerts = this.dismissibleAlerts.filter(alert => alert.id !== id);
|
||||
console.log(`Alert with ID ${id} dismissed`);
|
||||
}
|
||||
|
||||
resetDismissibleAlerts(): void {
|
||||
this.dismissibleAlerts = [...this.originalDismissibleAlerts];
|
||||
}
|
||||
|
||||
handleAlertDismissed(type: string): void {
|
||||
console.log(`${type} alert dismissed`);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,367 @@
|
||||
@use "../../../../../shared-ui/src/styles/semantic/index" as *;
|
||||
|
||||
.popover-demo {
|
||||
padding: $semantic-spacing-layout-section-xs;
|
||||
|
||||
&__section {
|
||||
margin-bottom: $semantic-spacing-layout-section-sm;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: map-get($semantic-typography-heading-h3, font-size);
|
||||
color: $semantic-color-text-primary;
|
||||
margin-bottom: $semantic-spacing-content-heading;
|
||||
padding-bottom: $semantic-spacing-content-list-item;
|
||||
border-bottom: $semantic-border-card-width solid $semantic-color-border-subtle;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: map-get($semantic-typography-heading-h4, font-size);
|
||||
color: $semantic-color-text-secondary;
|
||||
margin-bottom: $semantic-spacing-content-paragraph;
|
||||
}
|
||||
|
||||
&__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: $semantic-spacing-layout-section-xs;
|
||||
margin-bottom: $semantic-spacing-layout-section-xs;
|
||||
}
|
||||
|
||||
&__row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: $semantic-spacing-layout-section-xs;
|
||||
margin-bottom: $semantic-spacing-layout-section-xs;
|
||||
align-items: center;
|
||||
|
||||
&--center {
|
||||
justify-content: center;
|
||||
min-height: 200px;
|
||||
padding: $semantic-spacing-layout-section-xs;
|
||||
border: 2px dashed $semantic-color-border-subtle;
|
||||
border-radius: $semantic-border-radius-lg;
|
||||
}
|
||||
|
||||
&--positions {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
grid-template-rows: auto auto auto;
|
||||
gap: $semantic-spacing-component-lg;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
min-height: 300px;
|
||||
padding: $semantic-spacing-layout-section-xs;
|
||||
border: 2px dashed $semantic-color-border-subtle;
|
||||
border-radius: $semantic-border-radius-lg;
|
||||
}
|
||||
}
|
||||
|
||||
&__trigger-button {
|
||||
padding: $semantic-spacing-component-sm $semantic-spacing-component-md;
|
||||
border: $semantic-border-card-width solid $semantic-color-border-primary;
|
||||
border-radius: $semantic-border-radius-md;
|
||||
background: $semantic-color-surface-primary;
|
||||
color: $semantic-color-text-primary;
|
||||
font-size: $semantic-typography-font-size-md;
|
||||
cursor: pointer;
|
||||
transition: all $semantic-motion-duration-fast $semantic-motion-easing-ease;
|
||||
min-width: 120px;
|
||||
|
||||
&:hover {
|
||||
background: $semantic-color-surface-secondary;
|
||||
border-color: $semantic-color-border-focus;
|
||||
}
|
||||
|
||||
&: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-hover;
|
||||
border-color: $semantic-color-primary-hover;
|
||||
}
|
||||
}
|
||||
|
||||
&--small {
|
||||
padding: $semantic-spacing-component-xs $semantic-spacing-component-sm;
|
||||
font-size: $semantic-typography-font-size-sm;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
&--large {
|
||||
padding: $semantic-spacing-component-md $semantic-spacing-component-lg;
|
||||
font-size: $semantic-typography-font-size-lg;
|
||||
min-width: 140px;
|
||||
}
|
||||
}
|
||||
|
||||
&__stats {
|
||||
display: flex;
|
||||
gap: $semantic-spacing-content-paragraph;
|
||||
margin-top: $semantic-spacing-content-paragraph;
|
||||
font-size: $semantic-typography-font-size-sm;
|
||||
color: $semantic-color-text-secondary;
|
||||
}
|
||||
|
||||
&__code-example {
|
||||
margin-top: $semantic-spacing-content-heading;
|
||||
padding: $semantic-spacing-component-md;
|
||||
background: $semantic-color-surface-secondary;
|
||||
border: $semantic-border-card-width solid $semantic-color-border-subtle;
|
||||
border-radius: $semantic-border-radius-md;
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
font-size: $semantic-typography-font-size-sm;
|
||||
color: $semantic-color-text-secondary;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
// Position grid layout
|
||||
&__position-top-start {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
&__position-top {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
&__position-top-end {
|
||||
grid-column: 3;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
&__position-left {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
&__position-center {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
&__position-right {
|
||||
grid-column: 3;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
&__position-bottom-start {
|
||||
grid-column: 1;
|
||||
grid-row: 3;
|
||||
}
|
||||
|
||||
&__position-bottom {
|
||||
grid-column: 2;
|
||||
grid-row: 3;
|
||||
}
|
||||
|
||||
&__position-bottom-end {
|
||||
grid-column: 3;
|
||||
grid-row: 3;
|
||||
}
|
||||
|
||||
// Custom popover content styles
|
||||
.popover-content {
|
||||
&__menu {
|
||||
min-width: 200px;
|
||||
|
||||
.menu-item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: $semantic-spacing-component-sm $semantic-spacing-component-md;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: $semantic-color-text-primary;
|
||||
font-size: $semantic-typography-font-size-sm;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: background-color $semantic-motion-duration-fast $semantic-motion-easing-ease;
|
||||
|
||||
&:hover {
|
||||
background: $semantic-color-surface-secondary;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid $semantic-color-focus;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
&--divider {
|
||||
border-bottom: $semantic-border-card-width solid $semantic-color-border-subtle;
|
||||
margin-bottom: $semantic-spacing-content-line-tight;
|
||||
padding-bottom: $semantic-spacing-content-line-tight;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__form {
|
||||
min-width: 280px;
|
||||
|
||||
.form-group {
|
||||
margin-bottom: $semantic-spacing-content-paragraph;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-size: $semantic-typography-font-size-sm;
|
||||
color: $semantic-color-text-primary;
|
||||
margin-bottom: $semantic-spacing-content-line-tight;
|
||||
font-weight: $semantic-typography-font-weight-medium;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
width: 100%;
|
||||
padding: $semantic-spacing-component-sm;
|
||||
border: $semantic-border-card-width solid $semantic-color-border-primary;
|
||||
border-radius: $semantic-border-radius-sm;
|
||||
background: $semantic-color-surface-primary;
|
||||
color: $semantic-color-text-primary;
|
||||
font-size: $semantic-typography-font-size-sm;
|
||||
transition: border-color $semantic-motion-duration-fast $semantic-motion-easing-ease;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: $semantic-color-focus;
|
||||
box-shadow: 0 0 0 1px $semantic-color-focus;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: $semantic-color-text-tertiary;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
min-height: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
&__card {
|
||||
min-width: 300px;
|
||||
max-width: 400px;
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $semantic-spacing-content-list-item;
|
||||
margin-bottom: $semantic-spacing-content-list-item;
|
||||
|
||||
.avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: $semantic-border-radius-full;
|
||||
background: $semantic-color-primary;
|
||||
color: $semantic-color-on-primary;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: $semantic-typography-font-weight-semibold;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
.name {
|
||||
font-weight: $semantic-typography-font-weight-medium;
|
||||
font-size: $semantic-typography-font-size-md;
|
||||
color: $semantic-color-text-primary;
|
||||
}
|
||||
|
||||
.role {
|
||||
font-size: $semantic-typography-font-size-xs;
|
||||
color: $semantic-color-text-secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-content {
|
||||
font-size: $semantic-typography-font-size-sm;
|
||||
color: $semantic-color-text-secondary;
|
||||
line-height: $semantic-typography-line-height-relaxed;
|
||||
margin-bottom: $semantic-spacing-content-paragraph;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
display: flex;
|
||||
gap: $semantic-spacing-content-list-item;
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
padding: $semantic-spacing-component-xs $semantic-spacing-component-sm;
|
||||
border: $semantic-border-card-width solid $semantic-color-border-primary;
|
||||
border-radius: $semantic-border-radius-sm;
|
||||
background: $semantic-color-surface-primary;
|
||||
color: $semantic-color-text-primary;
|
||||
font-size: $semantic-typography-font-size-xs;
|
||||
cursor: pointer;
|
||||
transition: all $semantic-motion-duration-fast $semantic-motion-easing-ease;
|
||||
|
||||
&:hover {
|
||||
background: $semantic-color-surface-secondary;
|
||||
}
|
||||
|
||||
&.primary {
|
||||
background: $semantic-color-primary;
|
||||
color: $semantic-color-on-primary;
|
||||
border-color: $semantic-color-primary;
|
||||
|
||||
&:hover {
|
||||
background: $semantic-color-primary-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__tooltip {
|
||||
max-width: 200px;
|
||||
font-size: $semantic-typography-font-size-xs;
|
||||
line-height: $semantic-typography-line-height-normal;
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive design
|
||||
@media (max-width: $semantic-breakpoint-md - 1) {
|
||||
&__grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
&__row {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
|
||||
&--positions {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: repeat(9, auto);
|
||||
gap: $semantic-spacing-component-sm;
|
||||
min-height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__position-top-start,
|
||||
&__position-top,
|
||||
&__position-top-end,
|
||||
&__position-left,
|
||||
&__position-center,
|
||||
&__position-right,
|
||||
&__position-bottom-start,
|
||||
&__position-bottom,
|
||||
&__position-bottom-end {
|
||||
grid-column: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,534 @@
|
||||
import { Component, ViewChild, ElementRef, signal } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { PopoverComponent } from '../../../../../ui-essentials/src/lib/components/overlays/popover';
|
||||
|
||||
type PopoverPosition = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
|
||||
type PopoverSize = 'sm' | 'md' | 'lg';
|
||||
type PopoverVariant = 'default' | 'elevated' | 'floating' | 'menu' | 'tooltip';
|
||||
type PopoverTrigger = 'click' | 'hover' | 'focus' | 'manual';
|
||||
|
||||
@Component({
|
||||
selector: 'ui-popover-demo',
|
||||
standalone: true,
|
||||
imports: [CommonModule, PopoverComponent],
|
||||
template: `
|
||||
<div class="popover-demo">
|
||||
<!-- Header -->
|
||||
<div class="popover-demo__section">
|
||||
<h2 class="popover-demo__title">Popover Component</h2>
|
||||
<p>A flexible popover component with multiple positioning options, trigger types, and variants. Perfect for dropdowns, tooltips, context menus, and floating content.</p>
|
||||
</div>
|
||||
|
||||
<!-- Size Variants -->
|
||||
<div class="popover-demo__section">
|
||||
<h3 class="popover-demo__subtitle">Sizes</h3>
|
||||
<div class="popover-demo__row">
|
||||
@for (size of sizes; track size) {
|
||||
<button
|
||||
class="popover-demo__trigger-button"
|
||||
[class]="'popover-demo__trigger-button--' + size"
|
||||
#triggerSize
|
||||
(click)="togglePopover('size-' + size)">
|
||||
{{ size.toUpperCase() }} Size
|
||||
</button>
|
||||
<ui-popover
|
||||
[visible]="getPopoverState('size-' + size)"
|
||||
[size]="size"
|
||||
[triggerElement]="triggerSize"
|
||||
position="bottom"
|
||||
trigger="manual"
|
||||
(visibleChange)="setPopoverState('size-' + size, $event)">
|
||||
<div class="popover-content__tooltip">
|
||||
This is a {{ size }} sized popover with sample content to demonstrate the different size options available.
|
||||
</div>
|
||||
</ui-popover>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Variant Styles -->
|
||||
<div class="popover-demo__section">
|
||||
<h3 class="popover-demo__subtitle">Variants</h3>
|
||||
<div class="popover-demo__row">
|
||||
@for (variant of variants; track variant) {
|
||||
<button
|
||||
class="popover-demo__trigger-button"
|
||||
#triggerVariant
|
||||
(click)="togglePopover('variant-' + variant)">
|
||||
{{ variant | titlecase }}
|
||||
</button>
|
||||
<ui-popover
|
||||
[visible]="getPopoverState('variant-' + variant)"
|
||||
[variant]="variant"
|
||||
[triggerElement]="triggerVariant"
|
||||
position="bottom"
|
||||
trigger="manual"
|
||||
[showArrow]="variant !== 'elevated' && variant !== 'floating'"
|
||||
(visibleChange)="setPopoverState('variant-' + variant, $event)">
|
||||
<div class="popover-content__tooltip">
|
||||
@if (variant === 'tooltip') {
|
||||
<div class="popover-content__tooltip">Quick tooltip content</div>
|
||||
} @else {
|
||||
<div>
|
||||
<strong>{{ variant | titlecase }} Variant</strong>
|
||||
<p>This demonstrates the {{ variant }} styling variant of the popover component.</p>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</ui-popover>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Position Examples -->
|
||||
<div class="popover-demo__section">
|
||||
<h3 class="popover-demo__subtitle">Positions</h3>
|
||||
<div class="popover-demo__row popover-demo__row--positions">
|
||||
<!-- Top positions -->
|
||||
<button
|
||||
class="popover-demo__trigger-button popover-demo__position-top-start"
|
||||
#triggerTopStart
|
||||
(click)="togglePopover('pos-top-start')">
|
||||
Top Start
|
||||
</button>
|
||||
<button
|
||||
class="popover-demo__trigger-button popover-demo__position-top"
|
||||
#triggerTop
|
||||
(click)="togglePopover('pos-top')">
|
||||
Top
|
||||
</button>
|
||||
<button
|
||||
class="popover-demo__trigger-button popover-demo__position-top-end"
|
||||
#triggerTopEnd
|
||||
(click)="togglePopover('pos-top-end')">
|
||||
Top End
|
||||
</button>
|
||||
|
||||
<!-- Middle positions -->
|
||||
<button
|
||||
class="popover-demo__trigger-button popover-demo__position-left"
|
||||
#triggerLeft
|
||||
(click)="togglePopover('pos-left')">
|
||||
Left
|
||||
</button>
|
||||
<div class="popover-demo__position-center">
|
||||
<div style="padding: 20px; border: 2px solid #ddd; border-radius: 8px; background: #f9f9f9;">
|
||||
Reference Element
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="popover-demo__trigger-button popover-demo__position-right"
|
||||
#triggerRight
|
||||
(click)="togglePopover('pos-right')">
|
||||
Right
|
||||
</button>
|
||||
|
||||
<!-- Bottom positions -->
|
||||
<button
|
||||
class="popover-demo__trigger-button popover-demo__position-bottom-start"
|
||||
#triggerBottomStart
|
||||
(click)="togglePopover('pos-bottom-start')">
|
||||
Bottom Start
|
||||
</button>
|
||||
<button
|
||||
class="popover-demo__trigger-button popover-demo__position-bottom"
|
||||
#triggerBottom
|
||||
(click)="togglePopover('pos-bottom')">
|
||||
Bottom
|
||||
</button>
|
||||
<button
|
||||
class="popover-demo__trigger-button popover-demo__position-bottom-end"
|
||||
#triggerBottomEnd
|
||||
(click)="togglePopover('pos-bottom-end')">
|
||||
Bottom End
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Position Popovers -->
|
||||
@for (position of positions; track position.key) {
|
||||
<ui-popover
|
||||
[visible]="getPopoverState('pos-' + position.key)"
|
||||
[position]="position.value"
|
||||
[triggerElement]="getPositionTrigger(position.key)"
|
||||
trigger="manual"
|
||||
(visibleChange)="setPopoverState('pos-' + position.key, $event)">
|
||||
<div class="popover-content__tooltip">
|
||||
<strong>{{ position.value | titlecase }}</strong>
|
||||
<p>Positioned {{ position.value }} relative to trigger.</p>
|
||||
</div>
|
||||
</ui-popover>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- Trigger Types -->
|
||||
<div class="popover-demo__section">
|
||||
<h3 class="popover-demo__subtitle">Trigger Types</h3>
|
||||
<div class="popover-demo__row">
|
||||
<!-- Click Trigger -->
|
||||
<button
|
||||
class="popover-demo__trigger-button"
|
||||
#triggerClick>
|
||||
Click Trigger
|
||||
</button>
|
||||
<ui-popover
|
||||
[triggerElement]="triggerClick"
|
||||
position="bottom"
|
||||
trigger="click">
|
||||
<div class="popover-content__menu">
|
||||
<button class="menu-item">Action 1</button>
|
||||
<button class="menu-item">Action 2</button>
|
||||
<button class="menu-item menu-item--divider">Action 3</button>
|
||||
<button class="menu-item">Settings</button>
|
||||
</div>
|
||||
</ui-popover>
|
||||
|
||||
<!-- Hover Trigger -->
|
||||
<button
|
||||
class="popover-demo__trigger-button"
|
||||
#triggerHover>
|
||||
Hover Trigger
|
||||
</button>
|
||||
<ui-popover
|
||||
[triggerElement]="triggerHover"
|
||||
position="bottom"
|
||||
trigger="hover"
|
||||
variant="tooltip"
|
||||
[hoverDelay]="500">
|
||||
<div class="popover-content__tooltip">
|
||||
This popover appears on hover with a 500ms delay.
|
||||
</div>
|
||||
</ui-popover>
|
||||
|
||||
<!-- Focus Trigger -->
|
||||
<input
|
||||
type="text"
|
||||
class="popover-demo__trigger-button"
|
||||
placeholder="Focus Trigger (click to focus)"
|
||||
#triggerFocus
|
||||
style="text-align: center;">
|
||||
<ui-popover
|
||||
[triggerElement]="triggerFocus"
|
||||
position="bottom"
|
||||
trigger="focus">
|
||||
<div class="popover-content__form">
|
||||
<div class="form-group">
|
||||
<label>Help Information</label>
|
||||
<p>This popover appears when the input gains focus and helps guide the user.</p>
|
||||
</div>
|
||||
</div>
|
||||
</ui-popover>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Advanced Examples -->
|
||||
<div class="popover-demo__section">
|
||||
<h3 class="popover-demo__subtitle">Advanced Examples</h3>
|
||||
|
||||
<!-- Menu Dropdown -->
|
||||
<div class="popover-demo__row">
|
||||
<button
|
||||
class="popover-demo__trigger-button popover-demo__trigger-button--primary"
|
||||
#triggerMenu
|
||||
(click)="togglePopover('menu-dropdown')">
|
||||
Menu Dropdown
|
||||
</button>
|
||||
<ui-popover
|
||||
[visible]="getPopoverState('menu-dropdown')"
|
||||
[triggerElement]="triggerMenu"
|
||||
position="bottom-start"
|
||||
variant="menu"
|
||||
trigger="manual"
|
||||
(visibleChange)="setPopoverState('menu-dropdown', $event)">
|
||||
<div class="popover-content__menu">
|
||||
<button class="menu-item" (click)="handleMenuAction('new')">📄 New Document</button>
|
||||
<button class="menu-item" (click)="handleMenuAction('open')">📂 Open...</button>
|
||||
<button class="menu-item" (click)="handleMenuAction('save')">💾 Save</button>
|
||||
<button class="menu-item menu-item--divider" (click)="handleMenuAction('export')">📤 Export</button>
|
||||
<button class="menu-item" (click)="handleMenuAction('print')">🖨️ Print</button>
|
||||
<button class="menu-item menu-item--divider" (click)="handleMenuAction('settings')">⚙️ Settings</button>
|
||||
<button class="menu-item" (click)="handleMenuAction('help')">❓ Help</button>
|
||||
</div>
|
||||
</ui-popover>
|
||||
|
||||
<!-- Form Popover -->
|
||||
<button
|
||||
class="popover-demo__trigger-button"
|
||||
#triggerForm
|
||||
(click)="togglePopover('form-popover')">
|
||||
Quick Form
|
||||
</button>
|
||||
<ui-popover
|
||||
[visible]="getPopoverState('form-popover')"
|
||||
[triggerElement]="triggerForm"
|
||||
position="bottom"
|
||||
trigger="manual"
|
||||
title="Contact Information"
|
||||
(visibleChange)="setPopoverState('form-popover', $event)">
|
||||
<div class="popover-content__form">
|
||||
<div class="form-group">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" id="name" placeholder="Enter your name">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email">Email</label>
|
||||
<input type="email" id="email" placeholder="Enter your email">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="message">Message</label>
|
||||
<textarea id="message" placeholder="Enter your message"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<button (click)="handleFormSubmit()">Submit</button>
|
||||
<button (click)="setPopoverState('form-popover', false)">Cancel</button>
|
||||
</div>
|
||||
</ui-popover>
|
||||
|
||||
<!-- User Card -->
|
||||
<button
|
||||
class="popover-demo__trigger-button"
|
||||
#triggerCard
|
||||
(click)="togglePopover('user-card')">
|
||||
User Profile
|
||||
</button>
|
||||
<ui-popover
|
||||
[visible]="getPopoverState('user-card')"
|
||||
[triggerElement]="triggerCard"
|
||||
position="bottom"
|
||||
variant="elevated"
|
||||
trigger="manual"
|
||||
(visibleChange)="setPopoverState('user-card', $event)">
|
||||
<div class="popover-content__card">
|
||||
<div class="card-header">
|
||||
<div class="avatar">JD</div>
|
||||
<div class="user-info">
|
||||
<div class="name">John Doe</div>
|
||||
<div class="role">Senior Developer</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
Full-stack developer with 5+ years of experience in Angular, Node.js, and cloud technologies. Passionate about creating user-friendly interfaces and scalable applications.
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<button (click)="handleUserAction('message')">Message</button>
|
||||
<button class="primary" (click)="handleUserAction('connect')">Connect</button>
|
||||
</div>
|
||||
</div>
|
||||
</ui-popover>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Configuration Options -->
|
||||
<div class="popover-demo__section">
|
||||
<h3 class="popover-demo__subtitle">Configuration Options</h3>
|
||||
|
||||
<div class="popover-demo__row">
|
||||
<!-- Auto-positioning -->
|
||||
<button
|
||||
class="popover-demo__trigger-button"
|
||||
#triggerAutoPos
|
||||
(click)="togglePopover('auto-position')"
|
||||
style="margin-left: auto; margin-right: 20px;">
|
||||
Auto Position (try at edge)
|
||||
</button>
|
||||
<ui-popover
|
||||
[visible]="getPopoverState('auto-position')"
|
||||
[triggerElement]="triggerAutoPos"
|
||||
position="right"
|
||||
[autoPosition]="true"
|
||||
trigger="manual"
|
||||
(visibleChange)="setPopoverState('auto-position', $event)"
|
||||
(positionChange)="handlePositionChange($event)">
|
||||
<div class="popover-content__tooltip">
|
||||
<strong>Auto-positioning Enabled</strong>
|
||||
<p>This popover automatically adjusts its position to stay within the viewport.</p>
|
||||
<p><strong>Current Position:</strong> {{ currentAutoPosition() || 'right' }}</p>
|
||||
</div>
|
||||
</ui-popover>
|
||||
|
||||
<!-- With Backdrop -->
|
||||
<button
|
||||
class="popover-demo__trigger-button"
|
||||
#triggerBackdrop
|
||||
(click)="togglePopover('with-backdrop')">
|
||||
With Backdrop
|
||||
</button>
|
||||
<ui-popover
|
||||
[visible]="getPopoverState('with-backdrop')"
|
||||
[triggerElement]="triggerBackdrop"
|
||||
position="bottom"
|
||||
[showBackdrop]="true"
|
||||
[backdropClosable]="true"
|
||||
[preventBodyScroll]="true"
|
||||
trigger="manual"
|
||||
(visibleChange)="setPopoverState('with-backdrop', $event)"
|
||||
(backdropClicked)="handleBackdropClick()">
|
||||
<div class="popover-content__card">
|
||||
<div style="text-align: center; padding: 20px;">
|
||||
<h4>Modal-like Popover</h4>
|
||||
<p>This popover has a backdrop and prevents body scroll. Click the backdrop or press ESC to close.</p>
|
||||
<button class="primary" (click)="setPopoverState('with-backdrop', false)">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</ui-popover>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Usage Statistics -->
|
||||
<div class="popover-demo__stats">
|
||||
<span>Total Interactions: {{ totalInteractions() }}</span>
|
||||
<span>Backdrop Clicks: {{ backdropClicks() }}</span>
|
||||
<span>Auto-repositions: {{ autoRepositions() }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Code Example -->
|
||||
<div class="popover-demo__code-example">
|
||||
<pre><code><!-- Basic Usage -->
|
||||
<button #trigger>Click me</button>
|
||||
<ui-popover [triggerElement]="trigger" position="bottom" trigger="click">
|
||||
<p>Popover content goes here</p>
|
||||
</ui-popover>
|
||||
|
||||
<!-- Advanced Configuration -->
|
||||
<ui-popover
|
||||
[triggerElement]="myTrigger"
|
||||
position="bottom-start"
|
||||
variant="menu"
|
||||
trigger="click"
|
||||
[autoPosition]="true"
|
||||
[showArrow]="true"
|
||||
(visibleChange)="onPopoverToggle($event)">
|
||||
<div class="custom-menu">...</div>
|
||||
</ui-popover></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
styleUrl: './popover-demo.component.scss'
|
||||
})
|
||||
export class PopoverDemoComponent {
|
||||
// Component references
|
||||
@ViewChild('triggerTopStart', { read: ElementRef }) triggerTopStart?: ElementRef<HTMLElement>;
|
||||
@ViewChild('triggerTop', { read: ElementRef }) triggerTop?: ElementRef<HTMLElement>;
|
||||
@ViewChild('triggerTopEnd', { read: ElementRef }) triggerTopEnd?: ElementRef<HTMLElement>;
|
||||
@ViewChild('triggerLeft', { read: ElementRef }) triggerLeft?: ElementRef<HTMLElement>;
|
||||
@ViewChild('triggerRight', { read: ElementRef }) triggerRight?: ElementRef<HTMLElement>;
|
||||
@ViewChild('triggerBottomStart', { read: ElementRef }) triggerBottomStart?: ElementRef<HTMLElement>;
|
||||
@ViewChild('triggerBottom', { read: ElementRef }) triggerBottom?: ElementRef<HTMLElement>;
|
||||
@ViewChild('triggerBottomEnd', { read: ElementRef }) triggerBottomEnd?: ElementRef<HTMLElement>;
|
||||
|
||||
// Demo data
|
||||
readonly sizes: PopoverSize[] = ['sm', 'md', 'lg'];
|
||||
readonly variants: PopoverVariant[] = ['default', 'elevated', 'floating', 'menu', 'tooltip'];
|
||||
readonly triggers: PopoverTrigger[] = ['click', 'hover', 'focus', 'manual'];
|
||||
|
||||
readonly positions = [
|
||||
{ key: 'top-start', value: 'top-start' as PopoverPosition },
|
||||
{ key: 'top', value: 'top' as PopoverPosition },
|
||||
{ key: 'top-end', value: 'top-end' as PopoverPosition },
|
||||
{ key: 'left', value: 'left' as PopoverPosition },
|
||||
{ key: 'right', value: 'right' as PopoverPosition },
|
||||
{ key: 'bottom-start', value: 'bottom-start' as PopoverPosition },
|
||||
{ key: 'bottom', value: 'bottom' as PopoverPosition },
|
||||
{ key: 'bottom-end', value: 'bottom-end' as PopoverPosition }
|
||||
];
|
||||
|
||||
// State management
|
||||
private popoverStates = new Map<string, boolean>();
|
||||
|
||||
// Statistics
|
||||
private _totalInteractions = signal(0);
|
||||
private _backdropClicks = signal(0);
|
||||
private _autoRepositions = signal(0);
|
||||
private _currentAutoPosition = signal<PopoverPosition | null>(null);
|
||||
|
||||
readonly totalInteractions = this._totalInteractions.asReadonly();
|
||||
readonly backdropClicks = this._backdropClicks.asReadonly();
|
||||
readonly autoRepositions = this._autoRepositions.asReadonly();
|
||||
readonly currentAutoPosition = this._currentAutoPosition.asReadonly();
|
||||
|
||||
/**
|
||||
* Gets the state of a popover by key
|
||||
*/
|
||||
getPopoverState(key: string): boolean {
|
||||
return this.popoverStates.get(key) || false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets the state of a popover by key
|
||||
*/
|
||||
setPopoverState(key: string, visible: boolean): void {
|
||||
this.popoverStates.set(key, visible);
|
||||
if (visible) {
|
||||
this._totalInteractions.update(count => count + 1);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggles a popover state
|
||||
*/
|
||||
togglePopover(key: string): void {
|
||||
const currentState = this.getPopoverState(key);
|
||||
this.setPopoverState(key, !currentState);
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the trigger element for position demos
|
||||
*/
|
||||
getPositionTrigger(position: string): HTMLElement | undefined {
|
||||
switch (position) {
|
||||
case 'top-start': return this.triggerTopStart?.nativeElement;
|
||||
case 'top': return this.triggerTop?.nativeElement;
|
||||
case 'top-end': return this.triggerTopEnd?.nativeElement;
|
||||
case 'left': return this.triggerLeft?.nativeElement;
|
||||
case 'right': return this.triggerRight?.nativeElement;
|
||||
case 'bottom-start': return this.triggerBottomStart?.nativeElement;
|
||||
case 'bottom': return this.triggerBottom?.nativeElement;
|
||||
case 'bottom-end': return this.triggerBottomEnd?.nativeElement;
|
||||
default: return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles menu actions
|
||||
*/
|
||||
handleMenuAction(action: string): void {
|
||||
console.log('Menu action:', action);
|
||||
this.setPopoverState('menu-dropdown', false);
|
||||
// You could implement actual menu logic here
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles form submission
|
||||
*/
|
||||
handleFormSubmit(): void {
|
||||
console.log('Form submitted');
|
||||
this.setPopoverState('form-popover', false);
|
||||
// You could implement actual form logic here
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles user profile actions
|
||||
*/
|
||||
handleUserAction(action: string): void {
|
||||
console.log('User action:', action);
|
||||
this.setPopoverState('user-card', false);
|
||||
// You could implement actual user interaction logic here
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles position changes from auto-positioning
|
||||
*/
|
||||
handlePositionChange(newPosition: PopoverPosition): void {
|
||||
console.log('Position changed to:', newPosition);
|
||||
this._currentAutoPosition.set(newPosition);
|
||||
this._autoRepositions.update(count => count + 1);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles backdrop clicks
|
||||
*/
|
||||
handleBackdropClick(): void {
|
||||
console.log('Backdrop clicked');
|
||||
this._backdropClicks.update(count => count + 1);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,121 @@
|
||||
@use '../../../../../shared-ui/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-md;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
||||
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-bottom: $semantic-spacing-layout-section-lg;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-section {
|
||||
margin-bottom: $semantic-spacing-layout-section-xl;
|
||||
|
||||
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-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-secondary;
|
||||
margin-bottom: $semantic-spacing-component-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: $semantic-spacing-grid-gap-lg;
|
||||
}
|
||||
|
||||
.demo-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $semantic-spacing-layout-section-md;
|
||||
}
|
||||
|
||||
.demo-item {
|
||||
padding: $semantic-spacing-component-lg;
|
||||
border: $semantic-border-width-1 solid $semantic-color-border-secondary;
|
||||
border-radius: $semantic-border-card-radius;
|
||||
background: $semantic-color-surface-primary;
|
||||
}
|
||||
|
||||
.demo-controls {
|
||||
display: flex;
|
||||
gap: $semantic-spacing-component-sm;
|
||||
margin-bottom: $semantic-spacing-component-md;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.demo-button {
|
||||
padding: $semantic-spacing-interactive-button-padding-y $semantic-spacing-interactive-button-padding-x;
|
||||
border: $semantic-border-width-1 solid $semantic-color-border-primary;
|
||||
border-radius: $semantic-border-button-radius;
|
||||
background: $semantic-color-surface-primary;
|
||||
color: $semantic-color-text-primary;
|
||||
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;
|
||||
color: $semantic-color-on-primary;
|
||||
border-color: $semantic-color-primary;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid $semantic-color-focus;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive Design
|
||||
@media (max-width: ($semantic-breakpoint-lg - 1)) {
|
||||
.demo-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: ($semantic-breakpoint-md - 1)) {
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-sm;
|
||||
}
|
||||
|
||||
.demo-section {
|
||||
margin-bottom: $semantic-spacing-layout-section-lg;
|
||||
}
|
||||
|
||||
.demo-item {
|
||||
padding: $semantic-spacing-component-md;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: ($semantic-breakpoint-sm - 1)) {
|
||||
.demo-controls {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.demo-button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,274 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { TimelineComponent, TimelineItem } from "../../../../../ui-essentials/src/public-api";
|
||||
|
||||
@Component({
|
||||
selector: 'ui-timeline-demo',
|
||||
standalone: true,
|
||||
imports: [CommonModule, TimelineComponent],
|
||||
template: `
|
||||
<div class="demo-container">
|
||||
<h2>Timeline Demo</h2>
|
||||
|
||||
<!-- Size Variants -->
|
||||
<section class="demo-section">
|
||||
<h3>Sizes</h3>
|
||||
<div class="demo-grid">
|
||||
@for (size of sizes; track size) {
|
||||
<div class="demo-item">
|
||||
<h4>{{ size }} size</h4>
|
||||
<ui-timeline
|
||||
[size]="size"
|
||||
[items]="basicItems">
|
||||
</ui-timeline>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Color Variants -->
|
||||
<section class="demo-section">
|
||||
<h3>Variants</h3>
|
||||
<div class="demo-grid">
|
||||
@for (variant of variants; track variant) {
|
||||
<div class="demo-item">
|
||||
<h4>{{ variant }}</h4>
|
||||
<ui-timeline
|
||||
[variant]="variant"
|
||||
[items]="basicItems">
|
||||
</ui-timeline>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Orientation -->
|
||||
<section class="demo-section">
|
||||
<h3>Orientation</h3>
|
||||
<div class="demo-column">
|
||||
<div class="demo-item">
|
||||
<h4>Vertical (Default)</h4>
|
||||
<ui-timeline
|
||||
orientation="vertical"
|
||||
[items]="basicItems">
|
||||
</ui-timeline>
|
||||
</div>
|
||||
|
||||
<div class="demo-item">
|
||||
<h4>Horizontal</h4>
|
||||
<ui-timeline
|
||||
orientation="horizontal"
|
||||
[items]="shortItems">
|
||||
</ui-timeline>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Status Examples -->
|
||||
<section class="demo-section">
|
||||
<h3>Status Examples</h3>
|
||||
<div class="demo-item">
|
||||
<h4>Various Status States</h4>
|
||||
<ui-timeline [items]="statusItems"></ui-timeline>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Complete Example -->
|
||||
<section class="demo-section">
|
||||
<h3>Complete Project Timeline</h3>
|
||||
<div class="demo-item">
|
||||
<ui-timeline
|
||||
size="lg"
|
||||
variant="primary"
|
||||
[items]="projectItems"
|
||||
ariaLabel="Project development timeline">
|
||||
</ui-timeline>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Interactive Example -->
|
||||
<section class="demo-section">
|
||||
<h3>Interactive</h3>
|
||||
<div class="demo-controls">
|
||||
<button (click)="addTimelineItem()" class="demo-button">
|
||||
Add Item
|
||||
</button>
|
||||
<button (click)="toggleOrientation()" class="demo-button">
|
||||
Toggle Orientation
|
||||
</button>
|
||||
<button (click)="cycleSize()" class="demo-button">
|
||||
Cycle Size
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="demo-item">
|
||||
<h4>Dynamic Timeline ({{ currentOrientation }} / {{ currentSize }})</h4>
|
||||
<ui-timeline
|
||||
[size]="currentSize"
|
||||
[orientation]="currentOrientation"
|
||||
[items]="dynamicItems">
|
||||
</ui-timeline>
|
||||
</div>
|
||||
|
||||
<p>Items: {{ dynamicItems.length }}</p>
|
||||
</section>
|
||||
</div>
|
||||
`,
|
||||
styleUrl: './timeline-demo.component.scss'
|
||||
})
|
||||
export class TimelineDemoComponent {
|
||||
sizes = ['sm', 'md', 'lg'] as const;
|
||||
variants = ['primary', 'secondary', 'success'] as const;
|
||||
|
||||
currentSize: 'sm' | 'md' | 'lg' = 'md';
|
||||
currentOrientation: 'vertical' | 'horizontal' = 'vertical';
|
||||
itemCounter = 1;
|
||||
|
||||
basicItems: TimelineItem[] = [
|
||||
{
|
||||
id: '1',
|
||||
title: 'Project Started',
|
||||
description: 'Initial setup and planning phase',
|
||||
timestamp: '2 hours ago',
|
||||
status: 'completed'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: 'Development Phase',
|
||||
description: 'Building core features and functionality',
|
||||
timestamp: '1 hour ago',
|
||||
status: 'active'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
title: 'Testing',
|
||||
description: 'Quality assurance and bug fixes',
|
||||
timestamp: 'In 30 minutes',
|
||||
status: 'pending'
|
||||
}
|
||||
];
|
||||
|
||||
shortItems: TimelineItem[] = [
|
||||
{
|
||||
id: '1',
|
||||
title: 'Plan',
|
||||
status: 'completed'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: 'Build',
|
||||
status: 'active'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
title: 'Test',
|
||||
status: 'pending'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
title: 'Deploy',
|
||||
status: 'pending'
|
||||
}
|
||||
];
|
||||
|
||||
statusItems: TimelineItem[] = [
|
||||
{
|
||||
id: '1',
|
||||
title: 'Completed Task',
|
||||
description: 'This task has been successfully finished',
|
||||
timestamp: '2 days ago',
|
||||
status: 'completed'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: 'Active Task',
|
||||
description: 'This task is currently in progress',
|
||||
timestamp: 'Now',
|
||||
status: 'active'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
title: 'Failed Task',
|
||||
description: 'This task encountered an error',
|
||||
timestamp: '1 hour ago',
|
||||
status: 'error'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
title: 'Pending Task',
|
||||
description: 'This task is waiting to be started',
|
||||
timestamp: 'Tomorrow',
|
||||
status: 'pending'
|
||||
}
|
||||
];
|
||||
|
||||
projectItems: TimelineItem[] = [
|
||||
{
|
||||
id: '1',
|
||||
title: 'Requirements Gathering',
|
||||
description: 'Collected and analyzed project requirements from stakeholders',
|
||||
timestamp: 'March 1, 2024',
|
||||
status: 'completed'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: 'Design Phase',
|
||||
description: 'Created wireframes, mockups, and technical specifications',
|
||||
timestamp: 'March 15, 2024',
|
||||
status: 'completed'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
title: 'Development Sprint 1',
|
||||
description: 'Implemented core functionality and user authentication',
|
||||
timestamp: 'April 1, 2024',
|
||||
status: 'completed'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
title: 'Development Sprint 2',
|
||||
description: 'Building dashboard and data visualization features',
|
||||
timestamp: 'April 15, 2024',
|
||||
status: 'active'
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
title: 'Testing & QA',
|
||||
description: 'Comprehensive testing and bug fixing phase',
|
||||
timestamp: 'May 1, 2024',
|
||||
status: 'pending'
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
title: 'Deployment',
|
||||
description: 'Production deployment and go-live activities',
|
||||
timestamp: 'May 15, 2024',
|
||||
status: 'pending'
|
||||
}
|
||||
];
|
||||
|
||||
dynamicItems: TimelineItem[] = [...this.basicItems];
|
||||
|
||||
addTimelineItem(): void {
|
||||
const newItem: TimelineItem = {
|
||||
id: `dynamic-${this.itemCounter}`,
|
||||
title: `Dynamic Item ${this.itemCounter}`,
|
||||
description: `This is a dynamically added item #${this.itemCounter}`,
|
||||
timestamp: `${this.itemCounter} minutes ago`,
|
||||
status: 'active'
|
||||
};
|
||||
|
||||
this.dynamicItems = [...this.dynamicItems, newItem];
|
||||
this.itemCounter++;
|
||||
}
|
||||
|
||||
toggleOrientation(): void {
|
||||
this.currentOrientation = this.currentOrientation === 'vertical' ? 'horizontal' : 'vertical';
|
||||
}
|
||||
|
||||
cycleSize(): void {
|
||||
const currentIndex = this.sizes.indexOf(this.currentSize);
|
||||
const nextIndex = (currentIndex + 1) % this.sizes.length;
|
||||
this.currentSize = this.sizes[nextIndex];
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../../../../shared-ui/src/styles/semantic' as *;
|
||||
@use '../../../../../shared-ui/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-md;
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { ToastComponent } from '../../../../../../../ui-essentials/src/lib/components/feedback/toast/toast.component';
|
||||
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
|
||||
import { faPlay, faStop, faRedo } from '@fortawesome/free-solid-svg-icons';
|
||||
import { ToastComponent } from '../../../../../../dist/ui-essentials/lib/components/feedback/toast/toast.component';
|
||||
|
||||
@Component({
|
||||
selector: 'ui-toast-demo',
|
||||
|
||||
@@ -0,0 +1,116 @@
|
||||
@use '../../../../../shared-ui/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-component-lg;
|
||||
}
|
||||
|
||||
.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;
|
||||
border-bottom: $semantic-border-width-1 solid $semantic-color-border-subtle;
|
||||
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-primary;
|
||||
margin-bottom: $semantic-spacing-component-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-row {
|
||||
display: flex;
|
||||
gap: $semantic-spacing-layout-section-md;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.demo-column {
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
|
||||
.ui-tree-view {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-controls {
|
||||
display: flex;
|
||||
gap: $semantic-spacing-component-sm;
|
||||
margin-bottom: $semantic-spacing-component-md;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.demo-button {
|
||||
padding: $semantic-spacing-interactive-button-padding-y $semantic-spacing-interactive-button-padding-x;
|
||||
border: $semantic-border-width-1 solid $semantic-color-border-primary;
|
||||
border-radius: $semantic-border-button-radius;
|
||||
background: $semantic-color-surface-primary;
|
||||
color: $semantic-color-text-primary;
|
||||
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);
|
||||
|
||||
&:hover {
|
||||
background: $semantic-color-surface-secondary;
|
||||
box-shadow: $semantic-shadow-button-hover;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid $semantic-color-focus;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: $semantic-shadow-button-rest;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-info {
|
||||
margin-top: $semantic-spacing-component-md;
|
||||
padding: $semantic-spacing-component-sm;
|
||||
background: $semantic-color-surface-secondary;
|
||||
border-radius: $semantic-border-radius-sm;
|
||||
border-left: 4px solid $semantic-color-primary;
|
||||
|
||||
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;
|
||||
|
||||
strong {
|
||||
color: $semantic-color-text-primary;
|
||||
font-weight: $semantic-typography-font-weight-semibold;
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive Design
|
||||
@media (max-width: $semantic-breakpoint-md - 1) {
|
||||
.demo-row {
|
||||
flex-direction: column;
|
||||
gap: $semantic-spacing-component-md;
|
||||
}
|
||||
|
||||
.demo-column {
|
||||
min-width: unset;
|
||||
}
|
||||
|
||||
.demo-controls {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,366 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { TreeViewComponent } from "../../../../../ui-essentials/src/public-api";
|
||||
import { TreeNode } from '../../../../../../dist/ui-essentials/lib/components/data-display/tree-view/tree-view.component';
|
||||
|
||||
@Component({
|
||||
selector: 'ui-tree-view-demo',
|
||||
standalone: true,
|
||||
imports: [CommonModule, TreeViewComponent],
|
||||
template: `
|
||||
<div class="demo-container">
|
||||
<h2>Tree View Demo</h2>
|
||||
|
||||
<!-- Size Variants -->
|
||||
<section class="demo-section">
|
||||
<h3>Sizes</h3>
|
||||
<div class="demo-row">
|
||||
@for (size of sizes; track size) {
|
||||
<div class="demo-column">
|
||||
<h4>{{ size | titlecase }} Size</h4>
|
||||
<ui-tree-view
|
||||
[size]="size"
|
||||
[nodes]="basicNodes"
|
||||
(nodeSelected)="handleNodeSelected($event)"
|
||||
(nodeToggled)="handleNodeToggled($event)">
|
||||
</ui-tree-view>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Color Variants -->
|
||||
<section class="demo-section">
|
||||
<h3>Variants</h3>
|
||||
<div class="demo-row">
|
||||
@for (variant of variants; track variant) {
|
||||
<div class="demo-column">
|
||||
<h4>{{ variant | titlecase }} Variant</h4>
|
||||
<ui-tree-view
|
||||
[variant]="variant"
|
||||
[nodes]="basicNodes"
|
||||
(nodeSelected)="handleNodeSelected($event)"
|
||||
(nodeToggled)="handleNodeToggled($event)">
|
||||
</ui-tree-view>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features -->
|
||||
<section class="demo-section">
|
||||
<h3>Features</h3>
|
||||
<div class="demo-row">
|
||||
<!-- Multi-select -->
|
||||
<div class="demo-column">
|
||||
<h4>Multi-Select</h4>
|
||||
<ui-tree-view
|
||||
[nodes]="featureNodes"
|
||||
[multiSelect]="true"
|
||||
(nodeSelected)="handleNodeSelected($event)"
|
||||
(nodeToggled)="handleNodeToggled($event)">
|
||||
</ui-tree-view>
|
||||
</div>
|
||||
|
||||
<!-- With Icons -->
|
||||
<div class="demo-column">
|
||||
<h4>With Icons</h4>
|
||||
<ui-tree-view
|
||||
[nodes]="iconNodes"
|
||||
[showIcons]="true"
|
||||
(nodeSelected)="handleNodeSelected($event)"
|
||||
(nodeToggled)="handleNodeToggled($event)">
|
||||
</ui-tree-view>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- States -->
|
||||
<section class="demo-section">
|
||||
<h3>States</h3>
|
||||
<div class="demo-row">
|
||||
<!-- Loading -->
|
||||
<div class="demo-column">
|
||||
<h4>Loading</h4>
|
||||
<ui-tree-view [loading]="true"></ui-tree-view>
|
||||
</div>
|
||||
|
||||
<!-- Empty -->
|
||||
<div class="demo-column">
|
||||
<h4>Empty</h4>
|
||||
<ui-tree-view
|
||||
[nodes]="[]"
|
||||
emptyMessage="No files found">
|
||||
</ui-tree-view>
|
||||
</div>
|
||||
|
||||
<!-- Disabled Nodes -->
|
||||
<div class="demo-column">
|
||||
<h4>Disabled Nodes</h4>
|
||||
<ui-tree-view
|
||||
[nodes]="disabledNodes"
|
||||
(nodeSelected)="handleNodeSelected($event)"
|
||||
(nodeToggled)="handleNodeToggled($event)">
|
||||
</ui-tree-view>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Interactive Controls -->
|
||||
<section class="demo-section">
|
||||
<h3>Interactive Controls</h3>
|
||||
<div class="demo-controls">
|
||||
<button class="demo-button" (click)="expandAll()">Expand All</button>
|
||||
<button class="demo-button" (click)="collapseAll()">Collapse All</button>
|
||||
<button class="demo-button" (click)="getSelected()">Get Selected</button>
|
||||
<button class="demo-button" (click)="clearSelection()">Clear Selection</button>
|
||||
</div>
|
||||
|
||||
<ui-tree-view
|
||||
#interactiveTree
|
||||
[nodes]="interactiveNodes"
|
||||
[multiSelect]="true"
|
||||
(nodeSelected)="handleNodeSelected($event)"
|
||||
(nodeToggled)="handleNodeToggled($event)"
|
||||
(nodesChanged)="handleNodesChanged($event)">
|
||||
</ui-tree-view>
|
||||
|
||||
@if (selectedInfo) {
|
||||
<div class="demo-info">
|
||||
<strong>Selected:</strong> {{ selectedInfo }}
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (lastAction) {
|
||||
<div class="demo-info">
|
||||
<strong>Last Action:</strong> {{ lastAction }}
|
||||
</div>
|
||||
}
|
||||
</section>
|
||||
|
||||
<!-- File System Example -->
|
||||
<section class="demo-section">
|
||||
<h3>File System Example</h3>
|
||||
<ui-tree-view
|
||||
[nodes]="fileSystemNodes"
|
||||
[showIcons]="true"
|
||||
size="sm"
|
||||
emptyMessage="No files or folders"
|
||||
(nodeSelected)="handleFileSystemSelect($event)"
|
||||
(nodeToggled)="handleNodeToggled($event)">
|
||||
</ui-tree-view>
|
||||
|
||||
@if (selectedFile) {
|
||||
<div class="demo-info">
|
||||
<strong>Selected File:</strong> {{ selectedFile }}
|
||||
</div>
|
||||
}
|
||||
</section>
|
||||
</div>
|
||||
`,
|
||||
styleUrl: './tree-view-demo.component.scss'
|
||||
})
|
||||
export class TreeViewDemoComponent {
|
||||
sizes = ['sm', 'md', 'lg'] as const;
|
||||
variants = ['primary', 'secondary'] as const;
|
||||
|
||||
selectedInfo = '';
|
||||
lastAction = '';
|
||||
selectedFile = '';
|
||||
|
||||
basicNodes: TreeNode[] = [
|
||||
{
|
||||
id: 'item1',
|
||||
label: 'Item 1',
|
||||
children: [
|
||||
{ id: 'item1-1', label: 'Sub Item 1.1' },
|
||||
{ id: 'item1-2', label: 'Sub Item 1.2' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'item2',
|
||||
label: 'Item 2',
|
||||
children: [
|
||||
{
|
||||
id: 'item2-1',
|
||||
label: 'Sub Item 2.1',
|
||||
children: [
|
||||
{ id: 'item2-1-1', label: 'Sub Sub Item 2.1.1' }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{ id: 'item3', label: 'Item 3' }
|
||||
];
|
||||
|
||||
featureNodes: TreeNode[] = [
|
||||
{
|
||||
id: 'feature1',
|
||||
label: 'Authentication',
|
||||
expanded: true,
|
||||
children: [
|
||||
{ id: 'feature1-1', label: 'Login', selected: true },
|
||||
{ id: 'feature1-2', label: 'Registration' },
|
||||
{ id: 'feature1-3', label: 'Password Reset' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'feature2',
|
||||
label: 'User Management',
|
||||
children: [
|
||||
{ id: 'feature2-1', label: 'User Profile' },
|
||||
{ id: 'feature2-2', label: 'User Settings', selected: true }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
iconNodes: TreeNode[] = [
|
||||
{
|
||||
id: 'folder1',
|
||||
label: 'Documents',
|
||||
icon: '📁',
|
||||
expanded: true,
|
||||
children: [
|
||||
{ id: 'file1', label: 'Report.pdf', icon: '📄' },
|
||||
{ id: 'file2', label: 'Presentation.pptx', icon: '📊' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'folder2',
|
||||
label: 'Images',
|
||||
icon: '📁',
|
||||
children: [
|
||||
{ id: 'file3', label: 'Photo1.jpg', icon: '🖼️' },
|
||||
{ id: 'file4', label: 'Logo.png', icon: '🖼️' }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
disabledNodes: TreeNode[] = [
|
||||
{
|
||||
id: 'enabled1',
|
||||
label: 'Enabled Item',
|
||||
children: [
|
||||
{ id: 'disabled1', label: 'Disabled Sub Item', disabled: true },
|
||||
{ id: 'enabled2', label: 'Enabled Sub Item' }
|
||||
]
|
||||
},
|
||||
{ id: 'disabled2', label: 'Disabled Item', disabled: true }
|
||||
];
|
||||
|
||||
interactiveNodes: TreeNode[] = JSON.parse(JSON.stringify(this.basicNodes));
|
||||
|
||||
fileSystemNodes: TreeNode[] = [
|
||||
{
|
||||
id: 'src',
|
||||
label: 'src',
|
||||
icon: '📁',
|
||||
expanded: true,
|
||||
children: [
|
||||
{
|
||||
id: 'components',
|
||||
label: 'components',
|
||||
icon: '📁',
|
||||
children: [
|
||||
{ id: 'button.ts', label: 'button.component.ts', icon: '📄' },
|
||||
{ id: 'input.ts', label: 'input.component.ts', icon: '📄' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'services',
|
||||
label: 'services',
|
||||
icon: '📁',
|
||||
children: [
|
||||
{ id: 'api.ts', label: 'api.service.ts', icon: '📄' },
|
||||
{ id: 'auth.ts', label: 'auth.service.ts', icon: '📄' }
|
||||
]
|
||||
},
|
||||
{ id: 'main.ts', label: 'main.ts', icon: '📄' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'assets',
|
||||
label: 'assets',
|
||||
icon: '📁',
|
||||
children: [
|
||||
{ id: 'logo.png', label: 'logo.png', icon: '🖼️' },
|
||||
{ id: 'styles.css', label: 'styles.css', icon: '📄' }
|
||||
]
|
||||
},
|
||||
{ id: 'package.json', label: 'package.json', icon: '📄' },
|
||||
{ id: 'readme.md', label: 'README.md', icon: '📄' }
|
||||
];
|
||||
|
||||
handleNodeSelected(event: { node: TreeNode; selected: boolean }): void {
|
||||
this.lastAction = `${event.selected ? 'Selected' : 'Deselected'}: ${event.node.label}`;
|
||||
console.log('Node selected:', event);
|
||||
}
|
||||
|
||||
handleNodeToggled(event: { node: TreeNode; expanded: boolean }): void {
|
||||
this.lastAction = `${event.expanded ? 'Expanded' : 'Collapsed'}: ${event.node.label}`;
|
||||
console.log('Node toggled:', event);
|
||||
}
|
||||
|
||||
handleNodesChanged(nodes: TreeNode[]): void {
|
||||
this.interactiveNodes = nodes;
|
||||
const selected = this.getSelectedNodes(nodes);
|
||||
this.selectedInfo = selected.map(n => n.label).join(', ') || 'None';
|
||||
}
|
||||
|
||||
handleFileSystemSelect(event: { node: TreeNode; selected: boolean }): void {
|
||||
this.selectedFile = event.selected ? event.node.label : '';
|
||||
}
|
||||
|
||||
expandAll(): void {
|
||||
this.setAllExpanded(this.interactiveNodes, true);
|
||||
this.lastAction = 'Expanded all nodes';
|
||||
}
|
||||
|
||||
collapseAll(): void {
|
||||
this.setAllExpanded(this.interactiveNodes, false);
|
||||
this.lastAction = 'Collapsed all nodes';
|
||||
}
|
||||
|
||||
getSelected(): void {
|
||||
const selected = this.getSelectedNodes(this.interactiveNodes);
|
||||
this.selectedInfo = selected.map(n => n.label).join(', ') || 'None';
|
||||
this.lastAction = `Found ${selected.length} selected nodes`;
|
||||
}
|
||||
|
||||
clearSelection(): void {
|
||||
this.clearAllSelections(this.interactiveNodes);
|
||||
this.selectedInfo = 'None';
|
||||
this.lastAction = 'Cleared all selections';
|
||||
}
|
||||
|
||||
private setAllExpanded(nodes: TreeNode[], expanded: boolean): void {
|
||||
for (const node of nodes) {
|
||||
if (node.children && node.children.length > 0) {
|
||||
node.expanded = expanded;
|
||||
this.setAllExpanded(node.children, expanded);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private getSelectedNodes(nodes: TreeNode[]): TreeNode[] {
|
||||
const selected: TreeNode[] = [];
|
||||
for (const node of nodes) {
|
||||
if (node.selected) {
|
||||
selected.push(node);
|
||||
}
|
||||
if (node.children) {
|
||||
selected.push(...this.getSelectedNodes(node.children));
|
||||
}
|
||||
}
|
||||
return selected;
|
||||
}
|
||||
|
||||
private clearAllSelections(nodes: TreeNode[]): void {
|
||||
for (const node of nodes) {
|
||||
node.selected = false;
|
||||
if (node.children) {
|
||||
this.clearAllSelections(node.children);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user