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

import { Component, ChangeDetectionStrategy } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CardComponent, GlassVariant } from '../../../../../ui-essentials/src/lib/components/data-display/card';
import { ButtonComponent } from '../../../../../ui-essentials/src/lib/components/buttons';

@Component({
  selector: 'ui-card-demo',
  standalone: true,
  imports: [
    CommonModule,
    CardComponent,
    ButtonComponent
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div style="padding: 2rem;">
      <h2>Card Component Showcase</h2>
      
      <!-- Basic Card Variants -->
      <section style="margin-bottom: 3rem;">
        <h3>Card Variants</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin-bottom: 2rem;">
          <ui-card variant="elevated" size="md" elevation="sm" radius="md">
            <div slot="header">
              <h4>Elevated Card</h4>
              <p>Default elevated card with shadow</p>
            </div>
            <p>This is the most common card variant with a subtle elevation that lifts it above the surface.</p>
            <div slot="footer">
              <ui-button variant="filled" size="small" (clicked)="handleClick('elevated')">Action</ui-button>
            </div>
          </ui-card>
          
          <ui-card variant="filled" size="md" elevation="none" radius="md">
            <div slot="header">
              <h4>Filled Card</h4>
              <p>Card with background color</p>
            </div>
            <p>Filled cards use background color to separate content from the surrounding surface.</p>
            <div slot="footer">
              <ui-button variant="tonal" size="small" (clicked)="handleClick('filled')">Action</ui-button>
            </div>
          </ui-card>
          
          <ui-card variant="outlined" size="md" elevation="none" radius="md">
            <div slot="header">
              <h4>Outlined Card</h4>
              <p>Card with border emphasis</p>
            </div>
            <p>Outlined cards use borders to separate content while maintaining a clean appearance.</p>
            <div slot="footer">
              <ui-button variant="outlined" size="small" (clicked)="handleClick('outlined')">Action</ui-button>
            </div>
          </ui-card>
        </div>
      </section>

      <!-- Size Variants -->
      <section style="margin-bottom: 3rem;">
        <h3>Size Variants</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-bottom: 2rem;">
          <ui-card variant="elevated" size="sm" elevation="sm" radius="md">
            <div slot="header">
              <h5>Small Card</h5>
            </div>
            <p>Compact card for minimal content.</p>
            <div slot="footer">
              <ui-button variant="filled" size="small" (clicked)="handleClick('small')">Small</ui-button>
            </div>
          </ui-card>
          
          <ui-card variant="elevated" size="md" elevation="sm" radius="md">
            <div slot="header">
              <h4>Medium Card</h4>
            </div>
            <p>Standard card size for most use cases with balanced spacing.</p>
            <div slot="footer">
              <ui-button variant="filled" size="medium" (clicked)="handleClick('medium')">Medium</ui-button>
            </div>
          </ui-card>
          
          <ui-card variant="elevated" size="lg" elevation="sm" radius="md">
            <div slot="header">
              <h3>Large Card</h3>
            </div>
            <p>Spacious card for detailed content with generous padding and larger typography.</p>
            <div slot="footer">
              <ui-button variant="filled" size="large" (clicked)="handleClick('large')">Large</ui-button>
            </div>
          </ui-card>
        </div>
      </section>

      <!-- Elevation Variants -->
      <section style="margin-bottom: 3rem;">
        <h3>Elevation Variants</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-bottom: 2rem;">
          <ui-card variant="elevated" size="md" elevation="none" radius="md">
            <div style="text-align: center; padding: 1rem;">
              <h5>None</h5>
              <p>No shadow</p>
            </div>
          </ui-card>
          
          <ui-card variant="elevated" size="md" elevation="sm" radius="md">
            <div style="text-align: center; padding: 1rem;">
              <h5>Small</h5>
              <p>Subtle shadow</p>
            </div>
          </ui-card>
          
          <ui-card variant="elevated" size="md" elevation="md" radius="md">
            <div style="text-align: center; padding: 1rem;">
              <h5>Medium</h5>
              <p>Moderate shadow</p>
            </div>
          </ui-card>
          
          <ui-card variant="elevated" size="md" elevation="lg" radius="md">
            <div style="text-align: center; padding: 1rem;">
              <h5>Large</h5>
              <p>Prominent shadow</p>
            </div>
          </ui-card>
          
          <ui-card variant="elevated" size="md" elevation="xl" radius="md">
            <div style="text-align: center; padding: 1rem;">
              <h5>Extra Large</h5>
              <p>Deep shadow</p>
            </div>
          </ui-card>
        </div>
      </section>

      <!-- Radius Variants -->
      <section style="margin-bottom: 3rem;">
        <h3>Corner Radius Variants</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-bottom: 2rem;">
          <ui-card variant="elevated" size="md" elevation="sm" radius="none">
            <div style="text-align: center; padding: 1rem;">
              <h5>No Radius</h5>
              <p>Sharp corners</p>
            </div>
          </ui-card>
          
          <ui-card variant="elevated" size="md" elevation="sm" radius="sm">
            <div style="text-align: center; padding: 1rem;">
              <h5>Small</h5>
              <p>Subtle rounding</p>
            </div>
          </ui-card>
          
          <ui-card variant="elevated" size="md" elevation="sm" radius="md">
            <div style="text-align: center; padding: 1rem;">
              <h5>Medium</h5>
              <p>Standard rounding</p>
            </div>
          </ui-card>
          
          <ui-card variant="elevated" size="md" elevation="sm" radius="lg">
            <div style="text-align: center; padding: 1rem;">
              <h5>Large</h5>
              <p>Generous rounding</p>
            </div>
          </ui-card>
          
          <ui-card variant="elevated" size="sm" elevation="sm" radius="full">
            <div style="text-align: center; padding: 0.5rem; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;">
              <div>
                <h6 style="margin: 0; font-size: 0.75rem;">Full</h6>
                <p style="margin: 0; font-size: 0.625rem;">Circle</p>
              </div>
            </div>
          </ui-card>
        </div>
      </section>

      <!-- Interactive States -->
      <section style="margin-bottom: 3rem;">
        <h3>Interactive States</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-bottom: 2rem;">
          <ui-card variant="elevated" size="md" elevation="sm" radius="md" [clickable]="true" (cardClick)="handleCardClick('clickable')">
            <div slot="header">
              <h4>Clickable Card</h4>
              <p>Click me!</p>
            </div>
            <p>This card responds to clicks and has hover effects. Try clicking or focusing with keyboard.</p>
          </ui-card>
          
          <ui-card variant="elevated" size="md" elevation="sm" radius="md" [disabled]="true">
            <div slot="header">
              <h4>Disabled Card</h4>
              <p>Cannot interact</p>
            </div>
            <p>This card is disabled and cannot be interacted with.</p>
            <div slot="footer">
              <ui-button variant="filled" size="small" [disabled]="true">Disabled</ui-button>
            </div>
          </ui-card>
        </div>
      </section>

      <!-- Glass Effect Variants -->
      <section style="margin-bottom: 3rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 2rem; border-radius: 1rem;">
        <h3 style="color: white; margin-bottom: 2rem;">Glass Effect Variants</h3>
        <p style="color: rgba(255,255,255,0.9); margin-bottom: 2rem;">
          Glass morphism effects using semantic design tokens from the shared-ui library. 
          Each variant offers different levels of transparency and blur effects.
        </p>
        
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-bottom: 2rem;">
          <ui-card variant="elevated" size="md" elevation="md" radius="md" [glass]="true" glassVariant="translucent">
            <div slot="header">
              <h4 style="color: white;">Translucent Glass</h4>
              <p style="color: rgba(255,255,255,0.8);">Ultra-light transparency</p>
            </div>
            <p style="color: rgba(255,255,255,0.9);">
              Barely visible background with subtle blur effect for minimal visual interference. 
              Perfect for overlays that need to preserve background visibility.
            </p>
            <div slot="footer">
              <ui-button variant="outlined" size="small" style="border-color: white; color: white;" (clicked)="handleClick('glass-translucent')">Translucent</ui-button>
            </div>
          </ui-card>
          
          <ui-card variant="elevated" size="md" elevation="md" radius="md" [glass]="true" glassVariant="light">
            <div slot="header">
              <h4 style="color: white;">Light Glass</h4>
              <p style="color: rgba(255,255,255,0.8);">Gentle transparency</p>
            </div>
            <p style="color: rgba(255,255,255,0.9);">
              Gentle glass effect that maintains excellent readability while adding modern depth. 
              Ideal for cards that need subtle separation from background.
            </p>
            <div slot="footer">
              <ui-button variant="outlined" size="small" style="border-color: white; color: white;" (clicked)="handleClick('glass-light')">Light</ui-button>
            </div>
          </ui-card>
          
          <ui-card variant="elevated" size="md" elevation="md" radius="md" [glass]="true" glassVariant="medium">
            <div slot="header">
              <h4 style="color: white;">Medium Glass</h4>
              <p style="color: rgba(255,255,255,0.8);">Balanced effect</p>
            </div>
            <p style="color: rgba(255,255,255,0.9);">
              Perfect balance between visibility and glass morphism effect. 
              The most versatile variant suitable for most interface components.
            </p>
            <div slot="footer">
              <ui-button variant="outlined" size="small" style="border-color: white; color: white;" (clicked)="handleClick('glass-medium')">Medium</ui-button>
            </div>
          </ui-card>
          
          <ui-card variant="elevated" size="md" elevation="md" radius="md" [glass]="true" glassVariant="heavy">
            <div slot="header">
              <h4 style="color: white;">Heavy Glass</h4>
              <p style="color: rgba(255,255,255,0.8);">Strong presence</p>
            </div>
            <p style="color: rgba(255,255,255,0.9);">
              Prominent glass effect with substantial background presence. 
              Great for important UI elements that need to stand out prominently.
            </p>
            <div slot="footer">
              <ui-button variant="outlined" size="small" style="border-color: white; color: white;" (clicked)="handleClick('glass-heavy')">Heavy</ui-button>
            </div>
          </ui-card>
          
          <ui-card variant="elevated" size="md" elevation="lg" radius="lg" [glass]="true" glassVariant="frosted">
            <div slot="header">
              <h4 style="color: white;">Frosted Glass</h4>
              <p style="color: rgba(255,255,255,0.8);">Maximum opacity with enhanced blur</p>
            </div>
            <p style="color: rgba(255,255,255,0.9);">
              Nearly opaque with enhanced blur for a true frosted glass appearance. 
              Perfect for modals, overlays, and primary interface panels.
            </p>
            <div slot="footer">
              <ui-button variant="outlined" size="small" style="border-color: white; color: white;" (clicked)="handleClick('glass-frosted')">Frosted</ui-button>
            </div>
          </ui-card>
        </div>
        
        <h4 style="color: white; margin-bottom: 1rem;">Interactive Glass Cards</h4>
        <p style="color: rgba(255,255,255,0.8); margin-bottom: 1.5rem;">
          Glass effects with full interactivity, smooth animations, and hover states.
        </p>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem;">
          <ui-card variant="elevated" size="md" elevation="lg" radius="lg" [glass]="true" glassVariant="light" [clickable]="true" (cardClick)="handleCardClick('glass-interactive-light')">
            <div slot="header">
              <h4 style="color: white;">Clickable Light Glass</h4>
              <p style="color: rgba(255,255,255,0.8);">Interactive with smooth animations</p>
            </div>
            <p style="color: rgba(255,255,255,0.9);">
              Click me! Light glass variant with full interactivity and animation support. 
              Features hover effects and touch feedback.
            </p>
          </ui-card>
          
          <ui-card variant="elevated" size="md" elevation="lg" radius="lg" [glass]="true" glassVariant="heavy" [clickable]="true" (cardClick)="handleCardClick('glass-interactive-heavy')">
            <div slot="header">
              <h4 style="color: white;">Clickable Heavy Glass</h4>
              <p style="color: rgba(255,255,255,0.8);">Strong glass with responsive feedback</p>
            </div>
            <p style="color: rgba(255,255,255,0.9);">
              Heavy glass variant combining strong visual presence with responsive interactions. 
              Perfect for call-to-action cards and important interactive elements.
            </p>
          </ui-card>
          
          <ui-card variant="elevated" size="md" elevation="lg" radius="lg" [glass]="true" glassVariant="medium" [clickable]="true" (cardClick)="handleCardClick('glass-interactive-medium')">
            <div slot="header">
              <h4 style="color: white;">Balanced Interactive Glass</h4>
              <p style="color: rgba(255,255,255,0.8);">Medium glass with keyboard navigation</p>
            </div>
            <p style="color: rgba(255,255,255,0.9);">
              Medium glass effect with complete accessibility support including keyboard navigation, 
              focus states, and screen reader compatibility.
            </p>
          </ui-card>
        </div>
        
        <h4 style="color: white; margin-bottom: 1rem; margin-top: 2rem;">Glass Implementation Details</h4>
        <div style="background: rgba(0,0,0,0.2); padding: 1.5rem; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1);">
          <p style="color: rgba(255,255,255,0.9); margin-bottom: 1rem;">
            <strong>Enhanced Glass System:</strong> All glass effects now use semantic design tokens from the shared-ui library,
            ensuring consistent theming, better performance, and improved browser compatibility.
          </p>
          <ul style="color: rgba(255,255,255,0.8); line-height: 1.6;">
            <li><strong>Semantic Tokens:</strong> Uses <code>&#64;include glass-{{ '{' }}variant{{ '}' }}(true)</code> mixins</li>
            <li><strong>Animation Support:</strong> Built-in smooth transitions and hover effects</li>
            <li><strong>Accessibility:</strong> Proper focus states and keyboard navigation</li>
            <li><strong>Browser Support:</strong> Automatic fallbacks for older browsers</li>
            <li><strong>Performance:</strong> Optimized with <code>will-change</code> and <code>isolation</code></li>
          </ul>
        </div>
      </section>

      <!-- Background Layer Cards -->
      <section style="margin-bottom: 3rem;">
        <h3>Background Layer Cards</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin-bottom: 2rem;">
          <ui-card 
            variant="elevated" 
            size="md" 
            elevation="md" 
            radius="lg" 
            [hasBackgroundLayer]="true"
            [hasHeader]="true"
            [hasFooter]="true">
            <div slot="background" style="
              background: linear-gradient(45deg, #ff6b6b, #feca57);
              width: 100%;
              height: 100%;
            "></div>
            <div slot="header">
              <h4 style="color: white; text-shadow: 0 1px 3px rgba(0,0,0,0.3);">Gradient Background</h4>
              <p style="color: rgba(255,255,255,0.9);">Beautiful gradient overlay</p>
            </div>
            <p style="color: rgba(255,255,255,0.95);">This card has a gradient background layer that creates visual depth and interest.</p>
            <div slot="footer">
              <ui-button variant="outlined" size="small" style="border-color: white; color: white;" (clicked)="handleClick('gradient')">Action</ui-button>
            </div>
          </ui-card>
          
          <ui-card 
            variant="elevated" 
            size="md" 
            elevation="md" 
            radius="lg" 
            [hasBackgroundLayer]="true"
            [hasHeader]="true"
            [clickable]="true"
            (cardClick)="handleCardClick('pattern')">
            <div slot="background" style="
              background-image: radial-gradient(circle at 25% 25%, #ff9a9e 0%, transparent 50%),
                                radial-gradient(circle at 75% 75%, #fecfef 0%, transparent 50%),
                                radial-gradient(circle at 50% 50%, #ffecd2 0%, transparent 50%);
              background-size: 150px 150px, 100px 100px, 200px 200px;
              background-position: 0 0, 50px 50px, 100px 100px;
              width: 100%;
              height: 100%;
            "></div>
            <div slot="header">
              <h4>Pattern Background</h4>
              <p>Custom pattern design</p>
            </div>
            <p>Click me! Cards can have complex patterns and remain fully interactive with proper layering.</p>
          </ui-card>
        </div>
      </section>

      <!-- Usage Examples -->
      <section style="margin-bottom: 3rem;">
        <h3>Usage Examples</h3>
        <div style="background: #f8f9fa; padding: 1.5rem; border-radius: 8px; border-left: 4px solid #007bff;">
          <h4>Basic Card:</h4>
          <pre style="background: #fff; padding: 1rem; border-radius: 4px; overflow-x: auto;"><code>&lt;ui-card variant="elevated" size="md" elevation="sm" radius="md"&gt;
  &lt;div slot="header"&gt;
    &lt;h4&gt;Card Title&lt;/h4&gt;
    &lt;p&gt;Card subtitle&lt;/p&gt;
  &lt;/div&gt;
  &lt;p&gt;Card content goes here&lt;/p&gt;
  &lt;div slot="footer"&gt;
    &lt;ui-button variant="filled"&gt;Action&lt;/ui-button&gt;
  &lt;/div&gt;
&lt;/ui-card&gt;</code></pre>

          <h4>Interactive Card:</h4>
          <pre style="background: #fff; padding: 1rem; border-radius: 4px; overflow-x: auto;"><code>&lt;ui-card 
  variant="elevated" 
  [clickable]="true"
  (cardClick)="handleCardClick($event)"&gt;
  &lt;p&gt;Click me!&lt;/p&gt;
&lt;/ui-card&gt;</code></pre>

          <h4>Glass Effect Card:</h4>
          <pre style="background: #fff; padding: 1rem; border-radius: 4px; overflow-x: auto;"><code>&lt;ui-card 
  variant="elevated" 
  [glass]="true"
  glassVariant="medium"
  elevation="md"
  radius="lg"&gt;
  &lt;p&gt;Glass morphism effect with semantic tokens&lt;/p&gt;
&lt;/ui-card&gt;</code></pre>

          <h4>Glass Variant Examples:</h4>
          <pre style="background: #fff; padding: 1rem; border-radius: 4px; overflow-x: auto;"><code>&lt;!-- All glass variants using semantic design tokens --&gt;
&lt;ui-card [glass]="true" glassVariant="translucent"&gt;Ultra-light transparency&lt;/ui-card&gt;
&lt;ui-card [glass]="true" glassVariant="light"&gt;Gentle glass effect&lt;/ui-card&gt;
&lt;ui-card [glass]="true" glassVariant="medium"&gt;Balanced glass morphism&lt;/ui-card&gt;
&lt;ui-card [glass]="true" glassVariant="heavy"&gt;Strong visual presence&lt;/ui-card&gt;
&lt;ui-card [glass]="true" glassVariant="frosted"&gt;Maximum opacity with blur&lt;/ui-card&gt;</code></pre>

          <h4>Interactive Glass Card:</h4>
          <pre style="background: #fff; padding: 1rem; border-radius: 4px; overflow-x: auto;"><code>&lt;ui-card 
  variant="elevated" 
  [glass]="true"
  glassVariant="light"
  [clickable]="true"
  (cardClick)="handleCardClick($event)"
  elevation="lg"
  radius="lg"&gt;
  &lt;p&gt;Clickable glass card with animations&lt;/p&gt;
&lt;/ui-card&gt;</code></pre>

          <h4>Background Layer Card:</h4>
          <pre style="background: #fff; padding: 1rem; border-radius: 4px; overflow-x: auto;"><code>&lt;ui-card 
  variant="elevated" 
  [hasBackgroundLayer]="true"
  [hasHeader]="true"&gt;
  &lt;div slot="background"&gt;
    &lt;!-- Background content --&gt;
  &lt;/div&gt;
  &lt;div slot="header"&gt;
    &lt;h4&gt;Card with Background&lt;/h4&gt;
  &lt;/div&gt;
  &lt;p&gt;Content over background&lt;/p&gt;
&lt;/ui-card&gt;</code></pre>
        </div>
      </section>

      <!-- Interactive Example -->
      <section style="margin-bottom: 3rem;">
        <h3>Interactive Actions</h3>
        @if (lastAction) {
          <div style="margin-bottom: 1rem; padding: 1rem; background: #e3f2fd; border-radius: 4px;">
            <strong>Last action:</strong> {{ lastAction }}
          </div>
        }
        <div style="display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem;">
          <ui-button variant="filled" (clicked)="resetDemo()">Reset Demo</ui-button>
          <ui-button variant="tonal" (clicked)="showAlert('Card showcase complete!')">Show Alert</ui-button>
        </div>
      </section>
    </div>
  `,
  styles: [`
    h2 {
      color: hsl(279, 14%, 11%);
      font-size: 2rem;
      margin-bottom: 2rem;
      border-bottom: 2px solid hsl(258, 100%, 47%);
      padding-bottom: 0.5rem;
    }
    
    h3 {
      color: hsl(279, 14%, 25%);
      font-size: 1.5rem;
      margin-bottom: 1rem;
    }
    
    h4 {
      color: hsl(287, 12%, 35%);
      font-size: 1.125rem;
      margin-bottom: 0.75rem;
    }
    
    section {
      border: 1px solid hsl(289, 14%, 90%);
      border-radius: 8px;
      padding: 1.5rem;
      background: hsl(286, 20%, 99%);
    }
    
    pre {
      font-size: 0.875rem;
      line-height: 1.5;
      margin: 0.5rem 0;
    }
    
    code {
      font-family: 'JetBrains Mono', monospace;
      color: #d63384;
    }
  `]
})
export class CardDemoComponent {
  lastAction: string = '';

  handleClick(buttonType: string): void {
    this.lastAction = `Button clicked: ${buttonType}`;
    console.log(`Button clicked: ${buttonType}`);
  }

  handleCardClick(cardType: string): void {
    this.lastAction = `Card clicked: ${cardType}`;
    console.log(`Card clicked: ${cardType}`);
  }

  showAlert(message: string): void {
    alert(message);
    this.lastAction = 'Alert shown';
  }

  resetDemo(): void {
    this.lastAction = '';
    console.log('Demo reset');
  }
}