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>
345 lines
10 KiB
TypeScript
345 lines
10 KiB
TypeScript
import { Component, ChangeDetectionStrategy } from '@angular/core';
|
|
import { CommonModule } from '@angular/common';
|
|
import { CarouselComponent, CarouselItem } from '../../../../../ui-essentials/src/lib/components/data-display/carousel';
|
|
|
|
@Component({
|
|
selector: 'ui-carousel-demo',
|
|
standalone: true,
|
|
imports: [CommonModule, CarouselComponent],
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
template: `
|
|
<div class="demo-container">
|
|
<h2>Carousel Component Demo</h2>
|
|
|
|
<!-- Size Variants -->
|
|
<section class="demo-section">
|
|
<h3>Size Variants</h3>
|
|
<div class="demo-row">
|
|
<div class="demo-item">
|
|
<h4>Small</h4>
|
|
<ui-carousel
|
|
[items]="imageItems"
|
|
size="sm"
|
|
variant="image"
|
|
[autoplay]="false">
|
|
</ui-carousel>
|
|
</div>
|
|
|
|
<div class="demo-item">
|
|
<h4>Medium</h4>
|
|
<ui-carousel
|
|
[items]="imageItems"
|
|
size="md"
|
|
variant="image"
|
|
[autoplay]="false">
|
|
</ui-carousel>
|
|
</div>
|
|
|
|
<div class="demo-item">
|
|
<h4>Large</h4>
|
|
<ui-carousel
|
|
[items]="imageItems"
|
|
size="lg"
|
|
variant="image"
|
|
[autoplay]="false">
|
|
</ui-carousel>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Variant Types -->
|
|
<section class="demo-section">
|
|
<h3>Variant Types</h3>
|
|
|
|
<div class="demo-item">
|
|
<h4>Image Carousel</h4>
|
|
<ui-carousel
|
|
[items]="imageItems"
|
|
variant="image"
|
|
size="md"
|
|
[autoplay]="false">
|
|
</ui-carousel>
|
|
</div>
|
|
|
|
<div class="demo-item">
|
|
<h4>Card Carousel</h4>
|
|
<ui-carousel
|
|
[items]="cardItems"
|
|
variant="card"
|
|
size="md"
|
|
[autoplay]="false">
|
|
</ui-carousel>
|
|
</div>
|
|
|
|
<div class="demo-item">
|
|
<h4>Content Carousel</h4>
|
|
<ui-carousel
|
|
[items]="contentItems"
|
|
variant="content"
|
|
size="md"
|
|
[autoplay]="false">
|
|
</ui-carousel>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Transition Effects -->
|
|
<section class="demo-section">
|
|
<h3>Transition Effects</h3>
|
|
<div class="demo-row">
|
|
<div class="demo-item">
|
|
<h4>Slide</h4>
|
|
<ui-carousel
|
|
[items]="imageItems.slice(0, 3)"
|
|
transition="slide"
|
|
size="md"
|
|
[autoplay]="false">
|
|
</ui-carousel>
|
|
</div>
|
|
|
|
<div class="demo-item">
|
|
<h4>Fade</h4>
|
|
<ui-carousel
|
|
[items]="imageItems.slice(0, 3)"
|
|
transition="fade"
|
|
size="md"
|
|
[autoplay]="false">
|
|
</ui-carousel>
|
|
</div>
|
|
|
|
<div class="demo-item">
|
|
<h4>Scale</h4>
|
|
<ui-carousel
|
|
[items]="imageItems.slice(0, 3)"
|
|
transition="scale"
|
|
size="md"
|
|
[autoplay]="false">
|
|
</ui-carousel>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Indicator Styles -->
|
|
<section class="demo-section">
|
|
<h3>Indicator Styles</h3>
|
|
<div class="demo-row">
|
|
<div class="demo-item">
|
|
<h4>Dots</h4>
|
|
<ui-carousel
|
|
[items]="imageItems.slice(0, 4)"
|
|
indicatorStyle="dots"
|
|
size="md"
|
|
[autoplay]="false">
|
|
</ui-carousel>
|
|
</div>
|
|
|
|
<div class="demo-item">
|
|
<h4>Bars</h4>
|
|
<ui-carousel
|
|
[items]="imageItems.slice(0, 4)"
|
|
indicatorStyle="bars"
|
|
size="md"
|
|
[autoplay]="false">
|
|
</ui-carousel>
|
|
</div>
|
|
|
|
<div class="demo-item">
|
|
<h4>Thumbnails</h4>
|
|
<ui-carousel
|
|
[items]="thumbnailItems"
|
|
indicatorStyle="thumbnails"
|
|
size="md"
|
|
[autoplay]="false">
|
|
</ui-carousel>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features -->
|
|
<section class="demo-section">
|
|
<h3>Special Features</h3>
|
|
<div class="demo-row">
|
|
<div class="demo-item">
|
|
<h4>Autoplay</h4>
|
|
<ui-carousel
|
|
[items]="imageItems.slice(0, 3)"
|
|
size="md"
|
|
[autoplay]="true"
|
|
[autoplayInterval]="2000">
|
|
</ui-carousel>
|
|
</div>
|
|
|
|
<div class="demo-item">
|
|
<h4>No Loop</h4>
|
|
<ui-carousel
|
|
[items]="imageItems.slice(0, 3)"
|
|
size="md"
|
|
[loop]="false"
|
|
[autoplay]="false">
|
|
</ui-carousel>
|
|
</div>
|
|
|
|
<div class="demo-item">
|
|
<h4>Disabled</h4>
|
|
<ui-carousel
|
|
[items]="imageItems.slice(0, 3)"
|
|
size="md"
|
|
[disabled]="true">
|
|
</ui-carousel>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Interactive Example -->
|
|
<section class="demo-section">
|
|
<h3>Interactive Example</h3>
|
|
<ui-carousel
|
|
[items]="interactiveItems"
|
|
variant="card"
|
|
size="lg"
|
|
[autoplay]="false"
|
|
(slideChange)="handleSlideChange($event)"
|
|
(itemClick)="handleItemClick($event)">
|
|
</ui-carousel>
|
|
<p class="demo-status">Current slide: {{ currentSlide + 1 }} of {{ interactiveItems.length }}</p>
|
|
@if (lastClickedItem) {
|
|
<p class="demo-status">Last clicked: {{ lastClickedItem.title }}</p>
|
|
}
|
|
</section>
|
|
</div>
|
|
`,
|
|
styleUrl: './carousel-demo.component.scss'
|
|
})
|
|
export class CarouselDemoComponent {
|
|
currentSlide = 0;
|
|
lastClickedItem: CarouselItem | null = null;
|
|
|
|
imageItems: CarouselItem[] = [
|
|
{
|
|
id: 1,
|
|
imageUrl: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=400&fit=crop',
|
|
title: 'Mountain Landscape',
|
|
subtitle: 'Serene mountain views'
|
|
},
|
|
{
|
|
id: 2,
|
|
imageUrl: 'https://images.unsplash.com/photo-1501594907352-04cda38ebc29?w=800&h=400&fit=crop',
|
|
title: 'Ocean Waves',
|
|
subtitle: 'Peaceful ocean scenery'
|
|
},
|
|
{
|
|
id: 3,
|
|
imageUrl: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=800&h=400&fit=crop',
|
|
title: 'Forest Path',
|
|
subtitle: 'Mystical forest trail'
|
|
},
|
|
{
|
|
id: 4,
|
|
imageUrl: 'https://images.unsplash.com/photo-1501436513145-30f24e19fcc4?w=800&h=400&fit=crop',
|
|
title: 'Desert Sunset',
|
|
subtitle: 'Golden desert landscape'
|
|
}
|
|
];
|
|
|
|
cardItems: CarouselItem[] = [
|
|
{
|
|
id: 1,
|
|
imageUrl: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&h=200&fit=crop',
|
|
title: 'Analytics Dashboard',
|
|
subtitle: 'Data Visualization',
|
|
content: 'Powerful analytics tools to understand your business metrics and make data-driven decisions.'
|
|
},
|
|
{
|
|
id: 2,
|
|
imageUrl: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=400&h=200&fit=crop',
|
|
title: 'Team Collaboration',
|
|
subtitle: 'Productivity Tools',
|
|
content: 'Enhanced collaboration features to keep your team connected and productive from anywhere.'
|
|
},
|
|
{
|
|
id: 3,
|
|
imageUrl: 'https://images.unsplash.com/photo-1563207153-f403bf289096?w=400&h=200&fit=crop',
|
|
title: 'Mobile Experience',
|
|
subtitle: 'Cross-Platform',
|
|
content: 'Seamless experience across all devices with our responsive design and mobile optimization.'
|
|
}
|
|
];
|
|
|
|
contentItems: CarouselItem[] = [
|
|
{
|
|
id: 1,
|
|
title: 'Welcome to Our Platform',
|
|
subtitle: 'Getting Started Guide',
|
|
content: 'Discover amazing features and capabilities that will transform the way you work and collaborate with your team.'
|
|
},
|
|
{
|
|
id: 2,
|
|
title: 'Advanced Features',
|
|
subtitle: 'Power User Tips',
|
|
content: 'Unlock the full potential of our platform with advanced features designed for professional workflows.'
|
|
},
|
|
{
|
|
id: 3,
|
|
title: 'Success Stories',
|
|
subtitle: 'Customer Testimonials',
|
|
content: 'Join thousands of satisfied customers who have achieved remarkable results using our solutions.'
|
|
}
|
|
];
|
|
|
|
thumbnailItems: CarouselItem[] = [
|
|
{
|
|
id: 1,
|
|
imageUrl: 'https://images.unsplash.com/photo-1517180102446-f3ece451e9d8?w=800&h=400&fit=crop',
|
|
thumbnail: 'https://images.unsplash.com/photo-1517180102446-f3ece451e9d8?w=100&h=60&fit=crop',
|
|
title: 'Urban Architecture',
|
|
subtitle: 'Modern city design'
|
|
},
|
|
{
|
|
id: 2,
|
|
imageUrl: 'https://images.unsplash.com/photo-1449824913935-59a10b8d2000?w=800&h=400&fit=crop',
|
|
thumbnail: 'https://images.unsplash.com/photo-1449824913935-59a10b8d2000?w=100&h=60&fit=crop',
|
|
title: 'Natural Beauty',
|
|
subtitle: 'Landscape photography'
|
|
},
|
|
{
|
|
id: 3,
|
|
imageUrl: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=400&fit=crop',
|
|
thumbnail: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=100&h=60&fit=crop',
|
|
title: 'Mountain Vista',
|
|
subtitle: 'Alpine scenery'
|
|
}
|
|
];
|
|
|
|
interactiveItems: CarouselItem[] = [
|
|
{
|
|
id: 1,
|
|
imageUrl: 'https://images.unsplash.com/photo-1557804506-669a67965ba0?w=400&h=200&fit=crop',
|
|
title: 'Project Alpha',
|
|
subtitle: 'Innovation Hub',
|
|
content: 'Revolutionary project management tools designed to streamline your workflow and boost productivity.'
|
|
},
|
|
{
|
|
id: 2,
|
|
imageUrl: 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=400&h=200&fit=crop',
|
|
title: 'Team Dynamics',
|
|
subtitle: 'Collaboration Suite',
|
|
content: 'Advanced collaboration features that bring teams together, regardless of location or time zone.'
|
|
},
|
|
{
|
|
id: 3,
|
|
imageUrl: 'https://images.unsplash.com/photo-1504384308090-c894fdcc538d?w=400&h=200&fit=crop',
|
|
title: 'Data Insights',
|
|
subtitle: 'Analytics Platform',
|
|
content: 'Comprehensive analytics and reporting tools to help you make informed business decisions.'
|
|
}
|
|
];
|
|
|
|
handleSlideChange(index: number): void {
|
|
this.currentSlide = index;
|
|
console.log('Slide changed to:', index);
|
|
}
|
|
|
|
handleItemClick(event: {item: CarouselItem, index: number}): void {
|
|
this.lastClickedItem = event.item;
|
|
console.log('Item clicked:', event);
|
|
}
|
|
} |