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

import { Component, ElementRef, ViewChild } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UiAnimationsService, AnimateDirective } from 'ui-animations';

@Component({
  selector: 'app-animations-demo',
  standalone: true,
  imports: [CommonModule, AnimateDirective],
  template: `
    <div class="animations-demo">
      <h2>UI Animations Demo</h2>
      
      <!-- Entrance Animations -->
      <section class="demo-section">
        <h3>Entrance Animations</h3>
        <div class="animation-grid">
          <div class="demo-card animate-fade-in">
            <h4>Fade In</h4>
            <p>Basic fade in animation</p>
          </div>
          
          <div class="demo-card animate-fade-in-up animation-delay-200">
            <h4>Fade In Up</h4>
            <p>Fade in with upward movement</p>
          </div>
          
          <div class="demo-card animate-slide-in-up animation-delay-300">
            <h4>Slide In Up</h4>
            <p>Slide in from bottom</p>
          </div>
          
          <div class="demo-card animate-zoom-in animation-delay-500">
            <h4>Zoom In</h4>
            <p>Scale up animation</p>
          </div>
        </div>
      </section>

      <!-- Emphasis Animations -->
      <section class="demo-section">
        <h3>Emphasis Animations</h3>
        <div class="animation-grid">
          <button class="demo-button" (click)="animateElement('bounce')">
            Bounce
          </button>
          
          <button class="demo-button" (click)="animateElement('shake')">
            Shake
          </button>
          
          <button class="demo-button" (click)="animateElement('pulse')">
            Pulse
          </button>
          
          <button class="demo-button" (click)="animateElement('wobble')">
            Wobble
          </button>
        </div>
        
        <div #animationTarget class="demo-target">
          Click buttons above to animate me!
        </div>
      </section>

      <!-- Directive Examples -->
      <section class="demo-section">
        <h3>Animation Directive Examples</h3>
        <div class="animation-grid">
          <div class="demo-card" uiAnimate="animate-fade-in-up" [animationTrigger]="'hover'">
            <h4>Hover to Animate</h4>
            <p>Uses directive with hover trigger</p>
          </div>
          
          <div class="demo-card" uiAnimate="animate-bounce" [animationTrigger]="'click'" [animationOnce]="true">
            <h4>Click to Animate</h4>
            <p>Uses directive with click trigger</p>
          </div>
        </div>
      </section>

      <!-- Service Examples -->
      <section class="demo-section">
        <h3>Animation Service Examples</h3>
        <div class="service-controls">
          <button (click)="serviceAnimate('animate-tada')">Tada</button>
          <button (click)="serviceAnimate('animate-jello')">Jello</button>
          <button (click)="serviceAnimate('animate-heartbeat')">Heartbeat</button>
          <button (click)="serviceAnimate('animate-rubber-band')">Rubber Band</button>
        </div>
        
        <div #serviceTarget class="demo-target service-target">
          Animation Service Target
        </div>
      </section>
    </div>
  `,
  styles: [`
    .animations-demo {
      padding: 2rem;
      max-width: 1200px;
      margin: 0 auto;
    }

    .demo-section {
      margin-bottom: 3rem;
      
      h3 {
        margin-bottom: 1.5rem;
        color: #333;
        border-bottom: 2px solid #007bff;
        padding-bottom: 0.5rem;
      }
    }

    .animation-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1.5rem;
      margin-bottom: 2rem;
    }

    .demo-card {
      padding: 1.5rem;
      border: 1px solid #ddd;
      border-radius: 8px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      transition: transform 0.2s ease;
      
      h4 {
        margin: 0 0 0.5rem 0;
        font-size: 1.2rem;
      }
      
      p {
        margin: 0;
        opacity: 0.9;
      }
      
      &:hover {
        transform: translateY(-2px);
      }
    }

    .demo-button {
      padding: 0.75rem 1.5rem;
      border: none;
      border-radius: 6px;
      background: #007bff;
      color: white;
      cursor: pointer;
      font-size: 1rem;
      transition: background-color 0.2s ease;
      
      &:hover {
        background: #0056b3;
      }
    }

    .demo-target {
      padding: 2rem;
      border: 2px dashed #007bff;
      border-radius: 8px;
      text-align: center;
      font-size: 1.2rem;
      font-weight: bold;
      background: #f8f9fa;
      margin-top: 1rem;
    }

    .service-target {
      background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
      color: white;
      border: none;
    }

    .service-controls {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      margin-bottom: 1rem;
    }

    /* Responsive */
    @media (max-width: 768px) {
      .animation-grid {
        grid-template-columns: 1fr;
      }
      
      .service-controls {
        justify-content: center;
      }
    }
  `]
})
export class AnimationsDemoComponent {
  @ViewChild('animationTarget', { static: true }) animationTarget!: ElementRef<HTMLElement>;
  @ViewChild('serviceTarget', { static: true }) serviceTarget!: ElementRef<HTMLElement>;

  constructor(private animationService: UiAnimationsService) {}

  animateElement(animationType: string) {
    const element = this.animationTarget.nativeElement;
    const animationClass = `animate-${animationType}`;
    
    // Remove any existing animation classes first
    element.className = element.className.replace(/animate-\w+/g, '');
    
    // Add animation class
    this.animationService.animateOnce(element, animationClass);
  }

  serviceAnimate(animationClass: string) {
    const element = this.serviceTarget.nativeElement;
    
    // Remove any existing animation classes first
    element.className = element.className.replace(/animate-\w+/g, '');
    
    // Add animation class with service
    this.animationService.animateOnce(element, animationClass);
  }
}