Add comprehensive component library and demo application
Added extensive component library with feedback components (empty state, loading spinner, skeleton loader), enhanced form components (autocomplete, date picker, file upload, form field, time picker), navigation components (pagination), and overlay components (backdrop, drawer, modal, overlay container). Updated demo application with comprehensive showcase components and enhanced styling throughout the project. Excluded font files from repository to reduce size. 🤖 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,310 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { BackdropComponent } from '../../../../../ui-essentials/src/lib/components/overlays';
|
||||
|
||||
@Component({
|
||||
selector: 'ui-backdrop-demo',
|
||||
standalone: true,
|
||||
imports: [CommonModule, BackdropComponent],
|
||||
template: `
|
||||
<div class="demo-container">
|
||||
<h2>Backdrop Demo</h2>
|
||||
|
||||
<!-- Basic Usage -->
|
||||
<section class="demo-section">
|
||||
<h3>Basic Backdrop</h3>
|
||||
<div class="demo-row">
|
||||
<button
|
||||
class="demo-button"
|
||||
(click)="toggleBasicBackdrop()"
|
||||
>
|
||||
Toggle Basic Backdrop
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<ui-backdrop
|
||||
[visible]="showBasicBackdrop"
|
||||
(clicked)="handleBackdropClick('Basic backdrop clicked!')"
|
||||
(visibleChange)="showBasicBackdrop = $event"
|
||||
></ui-backdrop>
|
||||
</section>
|
||||
|
||||
<!-- Backdrop Variants -->
|
||||
<section class="demo-section">
|
||||
<h3>Variants</h3>
|
||||
<div class="demo-row">
|
||||
@for (variant of variants; track variant) {
|
||||
<button
|
||||
class="demo-button"
|
||||
(click)="showVariantBackdrop(variant)"
|
||||
>
|
||||
{{ variant }} Backdrop
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
|
||||
@if (currentVariant) {
|
||||
<ui-backdrop
|
||||
[visible]="showVariant"
|
||||
[variant]="currentVariant"
|
||||
[opacity]="0.6"
|
||||
(clicked)="handleBackdropClick($event.type + ' backdrop clicked!')"
|
||||
(visibleChange)="handleVariantVisibilityChange($event)"
|
||||
>
|
||||
<div class="backdrop-content">
|
||||
<h4>{{ currentVariant | titlecase }} Backdrop</h4>
|
||||
<p>Click backdrop to close</p>
|
||||
</div>
|
||||
</ui-backdrop>
|
||||
}
|
||||
</section>
|
||||
|
||||
<!-- Blur Backdrop -->
|
||||
<section class="demo-section">
|
||||
<h3>Blur Effect</h3>
|
||||
<div class="demo-row">
|
||||
<button
|
||||
class="demo-button"
|
||||
(click)="toggleBlurBackdrop()"
|
||||
>
|
||||
Toggle Blur Backdrop
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<ui-backdrop
|
||||
[visible]="showBlurBackdrop"
|
||||
[blur]="true"
|
||||
[opacity]="0.3"
|
||||
(clicked)="handleBackdropClick('Blur backdrop clicked!')"
|
||||
(visibleChange)="showBlurBackdrop = $event"
|
||||
>
|
||||
<div class="backdrop-content backdrop-content--glass">
|
||||
<h4>Blur Backdrop</h4>
|
||||
<p>Notice the blur effect behind this content</p>
|
||||
<button class="demo-button" (click)="showBlurBackdrop = false">Close</button>
|
||||
</div>
|
||||
</ui-backdrop>
|
||||
</section>
|
||||
|
||||
<!-- Opacity Control -->
|
||||
<section class="demo-section">
|
||||
<h3>Opacity Control</h3>
|
||||
<div class="demo-controls">
|
||||
<label for="opacity-slider">Opacity: {{ currentOpacity }}</label>
|
||||
<input
|
||||
id="opacity-slider"
|
||||
type="range"
|
||||
min="0.1"
|
||||
max="1"
|
||||
step="0.1"
|
||||
[value]="currentOpacity"
|
||||
(input)="updateOpacity($event)"
|
||||
>
|
||||
<button
|
||||
class="demo-button"
|
||||
(click)="toggleOpacityBackdrop()"
|
||||
>
|
||||
Show Backdrop
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<ui-backdrop
|
||||
[visible]="showOpacityBackdrop"
|
||||
[opacity]="currentOpacity"
|
||||
(clicked)="handleBackdropClick('Opacity backdrop clicked!')"
|
||||
(visibleChange)="showOpacityBackdrop = $event"
|
||||
>
|
||||
<div class="backdrop-content">
|
||||
<h4>Opacity: {{ currentOpacity }}</h4>
|
||||
<p>Adjust the opacity using the slider above</p>
|
||||
</div>
|
||||
</ui-backdrop>
|
||||
</section>
|
||||
|
||||
<!-- Z-Index Control -->
|
||||
<section class="demo-section">
|
||||
<h3>Z-Index & Stacking</h3>
|
||||
<div class="demo-row">
|
||||
<button
|
||||
class="demo-button"
|
||||
(click)="showStackedBackdrops()"
|
||||
>
|
||||
Show Stacked Backdrops
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Lower z-index backdrop -->
|
||||
<ui-backdrop
|
||||
[visible]="showFirstBackdrop"
|
||||
[zIndex]="1000"
|
||||
variant="dark"
|
||||
[opacity]="0.4"
|
||||
(clicked)="handleBackdropClick('First backdrop clicked!')"
|
||||
>
|
||||
<div class="backdrop-content backdrop-content--large">
|
||||
<h4>First Backdrop (z-index: 1000)</h4>
|
||||
<p>This is behind the second backdrop</p>
|
||||
</div>
|
||||
</ui-backdrop>
|
||||
|
||||
<!-- Higher z-index backdrop -->
|
||||
<ui-backdrop
|
||||
[visible]="showSecondBackdrop"
|
||||
[zIndex]="1010"
|
||||
variant="light"
|
||||
[opacity]="0.3"
|
||||
(clicked)="handleBackdropClick('Second backdrop clicked!')"
|
||||
(visibleChange)="handleStackedBackdropChange($event)"
|
||||
>
|
||||
<div class="backdrop-content backdrop-content--small">
|
||||
<h4>Second Backdrop (z-index: 1010)</h4>
|
||||
<p>This is in front of the first backdrop</p>
|
||||
<button class="demo-button" (click)="hideStackedBackdrops()">Close Both</button>
|
||||
</div>
|
||||
</ui-backdrop>
|
||||
</section>
|
||||
|
||||
<!-- Non-clickable Backdrop -->
|
||||
<section class="demo-section">
|
||||
<h3>Non-clickable Backdrop</h3>
|
||||
<div class="demo-row">
|
||||
<button
|
||||
class="demo-button"
|
||||
(click)="toggleNonClickableBackdrop()"
|
||||
>
|
||||
Show Non-clickable
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<ui-backdrop
|
||||
[visible]="showNonClickableBackdrop"
|
||||
[clickable]="false"
|
||||
(visibleChange)="showNonClickableBackdrop = $event"
|
||||
>
|
||||
<div class="backdrop-content">
|
||||
<h4>Non-clickable Backdrop</h4>
|
||||
<p>This backdrop cannot be clicked to close</p>
|
||||
<button class="demo-button" (click)="showNonClickableBackdrop = false">Close</button>
|
||||
</div>
|
||||
</ui-backdrop>
|
||||
</section>
|
||||
|
||||
<!-- Event Log -->
|
||||
<section class="demo-section">
|
||||
<h3>Event Log</h3>
|
||||
<div class="demo-log">
|
||||
@for (event of eventLog; track $index) {
|
||||
<div class="log-entry">{{ event }}</div>
|
||||
}
|
||||
@empty {
|
||||
<div class="log-entry log-entry--empty">No events yet. Interact with backdrops above.</div>
|
||||
}
|
||||
</div>
|
||||
<button class="demo-button demo-button--secondary" (click)="clearEventLog()">Clear Log</button>
|
||||
</section>
|
||||
</div>
|
||||
`,
|
||||
styleUrl: './backdrop-demo.component.scss'
|
||||
})
|
||||
export class BackdropDemoComponent {
|
||||
// Basic backdrop
|
||||
showBasicBackdrop = false;
|
||||
|
||||
// Variant backdrop
|
||||
variants = ['default', 'blur', 'dark', 'light'] as const;
|
||||
currentVariant: typeof this.variants[number] | null = null;
|
||||
showVariant = false;
|
||||
|
||||
// Blur backdrop
|
||||
showBlurBackdrop = false;
|
||||
|
||||
// Opacity backdrop
|
||||
showOpacityBackdrop = false;
|
||||
currentOpacity = 0.5;
|
||||
|
||||
// Stacked backdrops
|
||||
showFirstBackdrop = false;
|
||||
showSecondBackdrop = false;
|
||||
|
||||
// Non-clickable backdrop
|
||||
showNonClickableBackdrop = false;
|
||||
|
||||
// Event log
|
||||
eventLog: string[] = [];
|
||||
|
||||
toggleBasicBackdrop(): void {
|
||||
this.showBasicBackdrop = !this.showBasicBackdrop;
|
||||
this.logEvent(`Basic backdrop ${this.showBasicBackdrop ? 'opened' : 'closed'}`);
|
||||
}
|
||||
|
||||
showVariantBackdrop(variant: typeof this.variants[number]): void {
|
||||
this.currentVariant = variant;
|
||||
this.showVariant = true;
|
||||
this.logEvent(`${variant} backdrop opened`);
|
||||
}
|
||||
|
||||
handleVariantVisibilityChange(visible: boolean): void {
|
||||
this.showVariant = visible;
|
||||
if (!visible && this.currentVariant) {
|
||||
this.logEvent(`${this.currentVariant} backdrop closed`);
|
||||
this.currentVariant = null;
|
||||
}
|
||||
}
|
||||
|
||||
toggleBlurBackdrop(): void {
|
||||
this.showBlurBackdrop = !this.showBlurBackdrop;
|
||||
this.logEvent(`Blur backdrop ${this.showBlurBackdrop ? 'opened' : 'closed'}`);
|
||||
}
|
||||
|
||||
updateOpacity(event: Event): void {
|
||||
const target = event.target as HTMLInputElement;
|
||||
this.currentOpacity = parseFloat(target.value);
|
||||
}
|
||||
|
||||
toggleOpacityBackdrop(): void {
|
||||
this.showOpacityBackdrop = !this.showOpacityBackdrop;
|
||||
this.logEvent(`Opacity backdrop ${this.showOpacityBackdrop ? 'opened' : 'closed'} with opacity ${this.currentOpacity}`);
|
||||
}
|
||||
|
||||
showStackedBackdrops(): void {
|
||||
this.showFirstBackdrop = true;
|
||||
this.showSecondBackdrop = true;
|
||||
this.logEvent('Stacked backdrops opened');
|
||||
}
|
||||
|
||||
hideStackedBackdrops(): void {
|
||||
this.showFirstBackdrop = false;
|
||||
this.showSecondBackdrop = false;
|
||||
this.logEvent('Stacked backdrops closed');
|
||||
}
|
||||
|
||||
handleStackedBackdropChange(visible: boolean): void {
|
||||
if (!visible) {
|
||||
this.hideStackedBackdrops();
|
||||
}
|
||||
}
|
||||
|
||||
toggleNonClickableBackdrop(): void {
|
||||
this.showNonClickableBackdrop = !this.showNonClickableBackdrop;
|
||||
this.logEvent(`Non-clickable backdrop ${this.showNonClickableBackdrop ? 'opened' : 'closed'}`);
|
||||
}
|
||||
|
||||
handleBackdropClick(message: string): void {
|
||||
this.logEvent(message);
|
||||
}
|
||||
|
||||
private logEvent(message: string): void {
|
||||
const timestamp = new Date().toLocaleTimeString();
|
||||
this.eventLog.unshift(`[${timestamp}] ${message}`);
|
||||
|
||||
// Keep only last 10 events
|
||||
if (this.eventLog.length > 10) {
|
||||
this.eventLog = this.eventLog.slice(0, 10);
|
||||
}
|
||||
}
|
||||
|
||||
clearEventLog(): void {
|
||||
this.eventLog = [];
|
||||
this.logEvent('Event log cleared');
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user