5983722793
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>
257 lines
10 KiB
TypeScript
257 lines
10 KiB
TypeScript
import { Component } from '@angular/core';
|
|
import { CommonModule } from '@angular/common';
|
|
import { ContainerComponent, GridSystemComponent } from '../../../../../ui-essentials/src/lib/components/layout';
|
|
|
|
@Component({
|
|
selector: 'ui-container-demo',
|
|
standalone: true,
|
|
imports: [CommonModule, ContainerComponent, GridSystemComponent],
|
|
template: `
|
|
<div class="demo-wrapper">
|
|
<h2>Container Demo</h2>
|
|
|
|
<!-- Size Variants -->
|
|
<section class="demo-section">
|
|
<h3>Size Variants</h3>
|
|
<div class="demo-containers-showcase">
|
|
@for (size of sizes; track size) {
|
|
<div class="demo-container-wrapper">
|
|
<div class="demo-label">{{ size }} (max-width: {{ getMaxWidth(size) }})</div>
|
|
<ui-container [size]="size" class="demo-container-outline">
|
|
<div class="demo-content">{{ size }} container content</div>
|
|
</ui-container>
|
|
</div>
|
|
}
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Variant Types -->
|
|
<section class="demo-section">
|
|
<h3>Container Variants</h3>
|
|
|
|
<div class="demo-variant-grid">
|
|
<div class="demo-variant-item">
|
|
<h4>Default Container</h4>
|
|
<ui-container size="md" class="demo-container-outline">
|
|
<div class="demo-content">Basic container with standard padding and centering</div>
|
|
</ui-container>
|
|
</div>
|
|
|
|
<div class="demo-variant-item">
|
|
<h4>Card Container</h4>
|
|
<ui-container size="md" variant="card">
|
|
<div class="demo-content">Card-style container with background, border, and shadow</div>
|
|
</ui-container>
|
|
</div>
|
|
|
|
<div class="demo-variant-item">
|
|
<h4>Section Container</h4>
|
|
<ui-container size="lg" variant="section" background="surface">
|
|
<div class="demo-content">Section container with larger vertical padding for page sections</div>
|
|
</ui-container>
|
|
</div>
|
|
|
|
<div class="demo-variant-item">
|
|
<h4>Hero Container</h4>
|
|
<ui-container size="xl" variant="hero" background="surface-elevated">
|
|
<div class="demo-content hero-content">
|
|
<h2>Hero Section</h2>
|
|
<p>Large padding and centered content for hero sections</p>
|
|
</div>
|
|
</ui-container>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Flex Containers -->
|
|
<section class="demo-section">
|
|
<h3>Flex Container Variants</h3>
|
|
|
|
<div class="demo-variant-grid">
|
|
<div class="demo-variant-item">
|
|
<h4>Flex Column (Default)</h4>
|
|
<ui-container size="sm" variant="flex" class="demo-container-outline">
|
|
<div class="demo-flex-item">Item 1</div>
|
|
<div class="demo-flex-item">Item 2</div>
|
|
<div class="demo-flex-item">Item 3</div>
|
|
</ui-container>
|
|
</div>
|
|
|
|
<div class="demo-variant-item">
|
|
<h4>Flex Row</h4>
|
|
<ui-container size="sm" variant="flex" flexDirection="row" class="demo-container-outline">
|
|
<div class="demo-flex-item">Item 1</div>
|
|
<div class="demo-flex-item">Item 2</div>
|
|
<div class="demo-flex-item">Item 3</div>
|
|
</ui-container>
|
|
</div>
|
|
|
|
<div class="demo-variant-item">
|
|
<h4>Flex Center</h4>
|
|
<ui-container size="sm" variant="flex" flexJustify="center" class="demo-container-outline demo-container-tall">
|
|
<div class="demo-flex-item">Centered</div>
|
|
<div class="demo-flex-item">Content</div>
|
|
</ui-container>
|
|
</div>
|
|
|
|
<div class="demo-variant-item">
|
|
<h4>Flex Space Between</h4>
|
|
<ui-container size="sm" variant="flex" flexDirection="row" flexJustify="between" class="demo-container-outline">
|
|
<div class="demo-flex-item">Start</div>
|
|
<div class="demo-flex-item">End</div>
|
|
</ui-container>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Grid Containers -->
|
|
<section class="demo-section">
|
|
<h3>Grid Container Variants</h3>
|
|
|
|
<div class="demo-variant-grid">
|
|
<div class="demo-variant-item">
|
|
<h4>Grid Auto</h4>
|
|
<ui-container size="lg" variant="grid" gridColumns="auto" class="demo-container-outline">
|
|
@for (item of getGridItems(6); track $index) {
|
|
<div class="demo-grid-item">{{ item }}</div>
|
|
}
|
|
</ui-container>
|
|
</div>
|
|
|
|
<div class="demo-variant-item">
|
|
<h4>Grid 3 Columns</h4>
|
|
<ui-container size="lg" variant="grid" [gridColumns]="3" class="demo-container-outline">
|
|
@for (item of getGridItems(6); track $index) {
|
|
<div class="demo-grid-item">{{ item }}</div>
|
|
}
|
|
</ui-container>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Padding Variants -->
|
|
<section class="demo-section">
|
|
<h3>Padding Variants</h3>
|
|
|
|
<div class="demo-variant-grid">
|
|
@for (padding of paddingSizes; track padding) {
|
|
<div class="demo-variant-item">
|
|
<h4>Padding: {{ padding }}</h4>
|
|
<ui-container size="sm" [padding]="padding" class="demo-container-outline">
|
|
<div class="demo-content">{{ padding }} padding content</div>
|
|
</ui-container>
|
|
</div>
|
|
}
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Background Variants -->
|
|
<section class="demo-section">
|
|
<h3>Background Variants</h3>
|
|
|
|
<div class="demo-variant-grid">
|
|
@for (bg of backgrounds; track bg) {
|
|
<div class="demo-variant-item">
|
|
<h4>Background: {{ bg }}</h4>
|
|
<ui-container size="sm" [background]="bg" padding="md" class="demo-container-outline">
|
|
<div class="demo-content">{{ bg }} background</div>
|
|
</ui-container>
|
|
</div>
|
|
}
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Scrollable Container -->
|
|
<section class="demo-section">
|
|
<h3>Scrollable Containers</h3>
|
|
|
|
<div class="demo-variant-grid">
|
|
<div class="demo-variant-item">
|
|
<h4>Vertical Scroll</h4>
|
|
<ui-container size="sm" scrollable="y" customMaxHeight="200px" variant="card">
|
|
@for (item of getLongContent(); track $index) {
|
|
<p class="demo-paragraph">{{ item }}</p>
|
|
}
|
|
</ui-container>
|
|
</div>
|
|
|
|
<div class="demo-variant-item">
|
|
<h4>Horizontal Scroll</h4>
|
|
<ui-container size="sm" scrollable="x" variant="card">
|
|
<div class="demo-wide-content">
|
|
This is a very long line of content that will cause horizontal scrolling when it exceeds the container width. Keep reading to see the scroll behavior in action.
|
|
</div>
|
|
</ui-container>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Real World Example -->
|
|
<section class="demo-section">
|
|
<h3>Real World Example</h3>
|
|
<ui-container size="lg" variant="section" background="surface">
|
|
<ui-container size="md" variant="centered">
|
|
<h2>Product Features</h2>
|
|
<p>Discover what makes our product special</p>
|
|
|
|
<ui-container variant="grid" [gridColumns]="3" customMaxWidth="800px">
|
|
@for (feature of features; track feature.title) {
|
|
<ui-container variant="card" padding="md">
|
|
<h3>{{ feature.title }}</h3>
|
|
<p>{{ feature.description }}</p>
|
|
</ui-container>
|
|
}
|
|
</ui-container>
|
|
</ui-container>
|
|
</ui-container>
|
|
</section>
|
|
</div>
|
|
`,
|
|
styleUrl: './container-demo.component.scss'
|
|
})
|
|
export class ContainerDemoComponent {
|
|
sizes: ('xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full')[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', 'full'];
|
|
paddingSizes: ('xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none')[] = ['xs', 'sm', 'md', 'lg', 'xl', 'none'];
|
|
backgrounds: ('transparent' | 'surface' | 'surface-secondary' | 'surface-elevated')[] = [
|
|
'transparent', 'surface', 'surface-secondary', 'surface-elevated'
|
|
];
|
|
|
|
features = [
|
|
{ title: 'Fast', description: 'Lightning-fast performance optimized for speed' },
|
|
{ title: 'Secure', description: 'Enterprise-grade security built from the ground up' },
|
|
{ title: 'Scalable', description: 'Grows with your business needs seamlessly' },
|
|
{ title: 'Reliable', description: '99.9% uptime guaranteed with redundant systems' },
|
|
{ title: 'Easy to Use', description: 'Intuitive interface designed for productivity' },
|
|
{ title: 'Supported', description: '24/7 customer support when you need it' }
|
|
];
|
|
|
|
getMaxWidth(size: string): string {
|
|
const sizes: Record<string, string> = {
|
|
'xs': '475px',
|
|
'sm': '640px',
|
|
'md': '768px',
|
|
'lg': '1024px',
|
|
'xl': '1280px',
|
|
'2xl': '1536px',
|
|
'full': 'none'
|
|
};
|
|
return sizes[size] || 'auto';
|
|
}
|
|
|
|
getGridItems(count: number): string[] {
|
|
return Array.from({ length: count }, (_, i) => `Item ${i + 1}`);
|
|
}
|
|
|
|
getLongContent(): string[] {
|
|
return [
|
|
'This is paragraph 1 with some content to demonstrate vertical scrolling.',
|
|
'This is paragraph 2 with more content to show how the container handles overflow.',
|
|
'This is paragraph 3 continuing the demonstration of scrollable content.',
|
|
'This is paragraph 4 adding even more content to ensure scrolling is needed.',
|
|
'This is paragraph 5 with the final bit of content to complete the demo.',
|
|
'This is paragraph 6 making sure we have enough content for scroll.',
|
|
'This is paragraph 7 - almost done with our scrollable content demo.',
|
|
'This is paragraph 8 - the last paragraph in our scrollable demo.'
|
|
];
|
|
}
|
|
} |