ui-essentials/src/lib/components/data-display/list/list-examples.component.ts

import { Component, ChangeDetectionStrategy } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ListItemComponent, ListItemData } from './list-item.component';
import { ListContainerComponent } from './list-container.component';

@Component({
  selector: 'ui-list-examples',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [CommonModule, ListItemComponent, ListContainerComponent],
  template: `
    <div class="list-examples">
      <h2>List Component Examples</h2>
      
      <!-- Basic Text Lists -->
      <section class="example-section">
        <h3>Text Lists - Different Sizes</h3>
        
        <div class="example-grid">
          <div class="example-item">
            <h4>Small (sm)</h4>
            <ui-list-container elevation="sm" spacing="xs" [rounded]="true">
              @for (item of basicTextItems; track item.primary) {
                <ui-list-item 
                  [data]="item"
                  size="sm"
                  lines="one"
                  variant="text"
                  [divider]="true"
                />
              }
            </ui-list-container>
          </div>
          
          <div class="example-item">
            <h4>Medium (md)</h4>
            <ui-list-container elevation="sm" spacing="xs" [rounded]="true">
              @for (item of basicTextItems; track item.primary) {
                <ui-list-item 
                  [data]="item"
                  size="md"
                  lines="one"
                  variant="text"
                  [divider]="true"
                />
              }
            </ui-list-container>
          </div>
          
          <div class="example-item">
            <h4>Large (lg)</h4>
            <ui-list-container elevation="sm" spacing="xs" [rounded]="true">
              @for (item of basicTextItems; track item.primary) {
                <ui-list-item 
                  [data]="item"
                  size="lg"
                  lines="one"
                  variant="text"
                  [divider]="true"
                />
              }
            </ui-list-container>
          </div>
        </div>
      </section>

      <!-- Multi-line Lists -->
      <section class="example-section">
        <h3>Multi-line Text Lists</h3>
        
        <div class="example-grid">
          <div class="example-item">
            <h4>Two Lines</h4>
            <ui-list-container elevation="md" spacing="sm" [rounded]="true">
              @for (item of twoLineItems; track item.primary) {
                <ui-list-item 
                  [data]="item"
                  size="md"
                  lines="two"
                  variant="text"
                />
              }
            </ui-list-container>
          </div>
          
          <div class="example-item">
            <h4>Three Lines</h4>
            <ui-list-container elevation="md" spacing="sm" [rounded]="true">
              @for (item of threeLineItems; track item.primary) {
                <ui-list-item 
                  [data]="item"
                  size="lg"
                  lines="three"
                  variant="text"
                />
              }
            </ui-list-container>
          </div>
        </div>
      </section>

      <!-- Avatar Lists -->
      <section class="example-section">
        <h3>Lists with Avatars</h3>
        
        <div class="example-grid">
          <div class="example-item">
            <h4>Avatar + One Line</h4>
            <ui-list-container elevation="sm" spacing="xs" [rounded]="true">
              @for (item of avatarItems; track item.primary) {
                <ui-list-item 
                  [data]="item"
                  size="md"
                  lines="one"
                  variant="avatar"
                >
                  <button slot="trailing" class="action-button">
                    <i class="fas fa-ellipsis-v"></i>
                  </button>
                </ui-list-item>
              }
            </ui-list-container>
          </div>
          
          <div class="example-item">
            <h4>Avatar + Two Lines</h4>
            <ui-list-container elevation="sm" spacing="xs" [rounded]="true">
              @for (item of avatarTwoLineItems; track item.primary) {
                <ui-list-item 
                  [data]="item"
                  size="lg"
                  lines="two"
                  variant="avatar"
                >
                  <span slot="trailing" class="timestamp">2h</span>
                </ui-list-item>
              }
            </ui-list-container>
          </div>
        </div>
      </section>

      <!-- Media Lists -->
      <section class="example-section">
        <h3>Lists with Media</h3>
        
        <div class="example-grid">
          <div class="example-item">
            <h4>Media + Two Lines</h4>
            <ui-list-container elevation="md" spacing="sm" [rounded]="true">
              @for (item of mediaItems; track item.primary) {
                <ui-list-item 
                  [data]="item"
                  size="lg"
                  lines="two"
                  variant="media"
                >
                  <button slot="trailing" class="play-button">
                    <i class="fas fa-play"></i>
                  </button>
                </ui-list-item>
              }
            </ui-list-container>
          </div>
          
          <div class="example-item">
            <h4>Media + Three Lines</h4>
            <ui-list-container elevation="md" spacing="sm" [rounded]="true">
              @for (item of mediaThreeLineItems; track item.primary) {
                <ui-list-item 
                  [data]="item"
                  size="lg"
                  lines="three"
                  variant="media"
                >
                  <div slot="trailing" class="rating">
                    <i class="fas fa-star"></i>
                    <span>4.8</span>
                  </div>
                </ui-list-item>
              }
            </ui-list-container>
          </div>
        </div>
      </section>

      <!-- Scrollable List -->
      <section class="example-section">
        <h3>Scrollable List</h3>
        
        <div class="example-single">
          <ui-list-container 
            elevation="lg" 
            spacing="xs" 
            [scrollable]="true"
            maxHeight="300px"
            [rounded]="true"
          >
            @for (item of longList; track item.primary) {
              <ui-list-item 
                [data]="item"
                size="md"
                lines="two"
                variant="avatar"
                [divider]="true"
              >
                @if (item.selected) {
                  <i slot="trailing" class="fas fa-check text-success"></i>
                }
              </ui-list-item>
            }
          </ui-list-container>
        </div>
      </section>

      <!-- Interactive States -->
      <section class="example-section">
        <h3>Interactive States</h3>
        
        <div class="example-single">
          <ui-list-container elevation="sm" spacing="sm" [rounded]="true">
            @for (item of interactiveItems; track item.primary) {
              <ui-list-item 
                [data]="item"
                size="md"
                lines="two"
                variant="avatar"
              >
                @if (item.selected) {
                  <i slot="trailing" class="fas fa-check text-success"></i>
                } @else {
                  <button slot="trailing" class="select-button">Select</button>
                }
              </ui-list-item>
            }
          </ui-list-container>
        </div>
      </section>
    </div>
  `,
  styleUrls: ['./list-examples.component.scss']
})
export class ListExamplesComponent {
  basicTextItems: ListItemData[] = [
    { primary: 'Inbox' },
    { primary: 'Starred' },
    { primary: 'Sent' },
    { primary: 'Drafts' },
    { primary: 'Archive' }
  ];

  twoLineItems: ListItemData[] = [
    {
      primary: 'Meeting with Design Team',
      secondary: 'Discuss new component library architecture and implementation'
    },
    {
      primary: 'Code Review - Authentication',
      secondary: 'Review pull request #247 for OAuth integration updates'
    },
    {
      primary: 'Performance Optimization',
      secondary: 'Analyze bundle size and implement lazy loading strategies'
    }
  ];

  threeLineItems: ListItemData[] = [
    {
      primary: 'Angular 19 Migration',
      secondary: 'Upgrade project to latest Angular version with new control flow',
      tertiary: 'Estimated completion: Next Sprint'
    },
    {
      primary: 'Design System Documentation',
      secondary: 'Create comprehensive documentation for all components',
      tertiary: 'Priority: High - Needed for team onboarding'
    }
  ];

  avatarItems: ListItemData[] = [
    {
      primary: 'John Doe',
      avatarSrc: 'https://api.dicebear.com/7.x/avataaars/svg?seed=john',
      avatarAlt: 'John Doe avatar'
    },
    {
      primary: 'Jane Smith',
      avatarSrc: 'https://api.dicebear.com/7.x/avataaars/svg?seed=jane',
      avatarAlt: 'Jane Smith avatar'
    },
    {
      primary: 'Mike Johnson',
      avatarSrc: 'https://api.dicebear.com/7.x/avataaars/svg?seed=mike',
      avatarAlt: 'Mike Johnson avatar'
    }
  ];

  avatarTwoLineItems: ListItemData[] = [
    {
      primary: 'Sarah Wilson',
      secondary: 'Hey! How\'s the new component library coming along?',
      avatarSrc: 'https://api.dicebear.com/7.x/avataaars/svg?seed=sarah',
      avatarAlt: 'Sarah Wilson avatar'
    },
    {
      primary: 'Alex Chen',
      secondary: 'The design tokens look great. Ready for review.',
      avatarSrc: 'https://api.dicebear.com/7.x/avataaars/svg?seed=alex',
      avatarAlt: 'Alex Chen avatar'
    }
  ];

  mediaItems: ListItemData[] = [
    {
      primary: 'Angular Fundamentals',
      secondary: 'Complete guide to modern Angular development',
      mediaSrc: 'https://picsum.photos/80/80?random=1',
      mediaAlt: 'Angular course thumbnail'
    },
    {
      primary: 'TypeScript Deep Dive',
      secondary: 'Advanced TypeScript patterns and best practices',
      mediaSrc: 'https://picsum.photos/80/80?random=2',
      mediaAlt: 'TypeScript course thumbnail'
    }
  ];

  mediaThreeLineItems: ListItemData[] = [
    {
      primary: 'Design Systems at Scale',
      secondary: 'Building maintainable design systems for large organizations',
      tertiary: 'Duration: 2h 30m • Updated: Today',
      mediaSrc: 'https://picsum.photos/80/80?random=3',
      mediaAlt: 'Design systems course'
    },
    {
      primary: 'Component Architecture',
      secondary: 'Scalable component patterns in modern web applications',
      tertiary: 'Duration: 1h 45m • Updated: Yesterday',
      mediaSrc: 'https://picsum.photos/80/80?random=4',
      mediaAlt: 'Component architecture course'
    }
  ];

  longList: ListItemData[] = Array.from({ length: 20 }, (_, i) => ({
    primary: `Contact ${i + 1}`,
    secondary: `contact${i + 1}@example.com`,
    avatarSrc: `https://api.dicebear.com/7.x/avataaars/svg?seed=contact${i}`,
    avatarAlt: `Contact ${i + 1} avatar`,
    selected: i === 3 || i === 7 || i === 12
  }));

  interactiveItems: ListItemData[] = [
    {
      primary: 'Enable Notifications',
      secondary: 'Get notified about important updates',
      avatarSrc: 'https://api.dicebear.com/7.x/avataaars/svg?seed=notify',
      selected: false
    },
    {
      primary: 'Dark Mode',
      secondary: 'Switch to dark theme',
      avatarSrc: 'https://api.dicebear.com/7.x/avataaars/svg?seed=dark',
      selected: true
    },
    {
      primary: 'Auto-save',
      secondary: 'Automatically save your work',
      avatarSrc: 'https://api.dicebear.com/7.x/avataaars/svg?seed=save',
      selected: false,
      disabled: true
    }
  ];
}