ui-essentials/projects/demo-ui-essentials/src/app/demos/empty-state-demo/empty-state-demo.component.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { EmptyStateComponent } from '../../../../../ui-essentials/src/lib/components/feedback/empty-state/empty-state.component';

@Component({
  selector: 'ui-empty-state-demo',
  standalone: true,
  imports: [CommonModule, EmptyStateComponent],
  template: `
    <div class="demo-container">
      <h2>Empty State Demo</h2>
      
      <!-- Size Variants -->
      <section class="demo-section">
        <h3>Sizes</h3>
        <div class="demo-grid">
          @for (size of sizes; track size) {
            <ui-empty-state 
              [size]="size"
              title="No items found"
              description="There are no items to display at the moment."
              actionLabel="Add Item"
              icon="<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2 2v-5m16 0h-5.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 009.586 13H4' /></svg>"
              (action)="handleDemoClick('Size: ' + size)">
            </ui-empty-state>
            <p class="demo-label">{{ size }} size</p>
          }
        </div>
      </section>
      
      <!-- Variant Types -->
      <section class="demo-section">
        <h3>Variants</h3>
        <div class="demo-grid">
          <ui-empty-state 
            variant="default"
            title="No data available"
            description="There's nothing here yet. Start by adding some content."
            actionLabel="Get Started"
            icon="<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z' /></svg>"
            (action)="handleDemoClick('Default variant')">
          </ui-empty-state>
          <p class="demo-label">Default</p>

          <ui-empty-state 
            variant="search"
            title="No search results"
            description="We couldn't find anything matching your search. Try adjusting your filters or search terms."
            actionLabel="Clear Filters"
            icon="<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z' /></svg>"
            (action)="handleDemoClick('Search variant')">
          </ui-empty-state>
          <p class="demo-label">Search</p>

          <ui-empty-state 
            variant="error"
            title="Something went wrong"
            description="We encountered an error while loading your content. Please try again."
            actionLabel="Retry"
            icon="<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z' /></svg>"
            (action)="handleDemoClick('Error variant')">
          </ui-empty-state>
          <p class="demo-label">Error</p>

          <ui-empty-state 
            variant="loading"
            title="Loading content..."
            description="Please wait while we fetch your data.">
          </ui-empty-state>
          <p class="demo-label">Loading</p>

          <ui-empty-state 
            variant="success"
            title="All done!"
            description="You've completed all tasks. Great work!"
            actionLabel="Start Over"
            icon="<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z' /></svg>"
            (action)="handleDemoClick('Success variant')">
          </ui-empty-state>
          <p class="demo-label">Success</p>
        </div>
      </section>
      
      <!-- States -->
      <section class="demo-section">
        <h3>States</h3>
        <div class="demo-grid">
          <ui-empty-state 
            title="Normal state"
            description="This is a normal empty state with an action button."
            actionLabel="Take Action"
            icon="<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 10V3L4 14h7v7l9-11h-7z' /></svg>"
            (action)="handleDemoClick('Normal state')">
          </ui-empty-state>
          <p class="demo-label">Normal</p>

          <ui-empty-state 
            title="Disabled action"
            description="This empty state has a disabled action button."
            actionLabel="Disabled Action"
            [disabled]="true"
            icon="<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728L5.636 5.636m12.728 12.728L18.364 5.636M5.636 18.364l12.728-12.728' /></svg>"
            (action)="handleDemoClick('Disabled state')">
          </ui-empty-state>
          <p class="demo-label">Disabled</p>

          <ui-empty-state 
            title="No action button"
            description="This empty state doesn't have an action button."
            icon="<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z' /></svg>">
          </ui-empty-state>
          <p class="demo-label">No Action</p>
        </div>
      </section>

      <!-- Content Projection -->
      <section class="demo-section">
        <h3>Custom Content</h3>
        <div class="demo-grid">
          <ui-empty-state 
            title="Custom content"
            description="You can add custom content inside the empty state."
            icon="<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zM7 21h10a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4z' /></svg>">
            <div style="margin: 16px 0; padding: 16px; background: var(--semantic-color-surface-secondary, #f8f9fa); border-radius: 8px;">
              <p style="margin: 0; color: var(--semantic-color-text-secondary, #6c757d); font-size: 14px;">
                This is custom content projected into the empty state component.
                You can add any HTML or Angular components here.
              </p>
            </div>
          </ui-empty-state>
          <p class="demo-label">With Content Projection</p>
        </div>
      </section>
      
      <!-- Interactive Example -->
      <section class="demo-section">
        <h3>Interactive Example</h3>
        <ui-empty-state 
          title="Interactive Demo"
          description="Click the button below to see the interaction in action."
          actionLabel="Click Me!"
          icon="<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122' /></svg>"
          (action)="handleDemoClick('Interactive example')">
        </ui-empty-state>
        <div class="demo-output">
          <p><strong>Action clicked:</strong> {{ lastAction || 'None' }}</p>
          <p><strong>Click count:</strong> {{ clickCount }}</p>
        </div>
      </section>
    </div>
  `,
  styleUrl: './empty-state-demo.component.scss'
})
export class EmptyStateDemoComponent {
  sizes = ['sm', 'md', 'lg'] as const;
  variants = ['default', 'search', 'error', 'loading', 'success'] as const;
  clickCount = 0;
  lastAction: string | null = null;
  
  handleDemoClick(action: string): void {
    this.clickCount++;
    this.lastAction = action;
    console.log('Empty state action clicked:', action);
  }
}