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

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BackdropComponent } from '../../../../../ui-essentials/src/lib/components/overlays/backdrop/backdrop.component';

@Component({
  selector: 'ui-backdrop-demo',
  standalone: true,
  imports: [CommonModule, BackdropComponent],
  template: `
    <div class="demo-container">
      <h2>Backdrop Demo</h2>
      
      <!-- Basic Usage -->
      <section class="demo-section">
        <h3>Basic Backdrop</h3>
        <div class="demo-row">
          <button 
            class="demo-button"
            (click)="toggleBasicBackdrop()"
          >
            Toggle Basic Backdrop
          </button>
        </div>
        
        <ui-backdrop 
          [visible]="showBasicBackdrop"
          (clicked)="handleBackdropClick('Basic backdrop clicked!')"
          (visibleChange)="showBasicBackdrop = $event"
        ></ui-backdrop>
      </section>
      
      <!-- Backdrop Variants -->
      <section class="demo-section">
        <h3>Variants</h3>
        <div class="demo-row">
          @for (variant of variants; track variant) {
            <button 
              class="demo-button"
              (click)="showVariantBackdrop(variant)"
            >
              {{ variant }} Backdrop
            </button>
          }
        </div>
        
        @if (currentVariant) {
          <ui-backdrop 
            [visible]="showVariant"
            [variant]="currentVariant"
            [opacity]="0.6"
            (clicked)="handleBackdropClick($event.type + ' backdrop clicked!')"
            (visibleChange)="handleVariantVisibilityChange($event)"
          >
            <div class="backdrop-content">
              <h4>{{ currentVariant | titlecase }} Backdrop</h4>
              <p>Click backdrop to close</p>
            </div>
          </ui-backdrop>
        }
      </section>
      
      <!-- Blur Backdrop -->
      <section class="demo-section">
        <h3>Blur Effect</h3>
        <div class="demo-row">
          <button 
            class="demo-button"
            (click)="toggleBlurBackdrop()"
          >
            Toggle Blur Backdrop
          </button>
        </div>
        
        <ui-backdrop 
          [visible]="showBlurBackdrop"
          [blur]="true"
          [opacity]="0.3"
          (clicked)="handleBackdropClick('Blur backdrop clicked!')"
          (visibleChange)="showBlurBackdrop = $event"
        >
          <div class="backdrop-content backdrop-content--glass">
            <h4>Blur Backdrop</h4>
            <p>Notice the blur effect behind this content</p>
            <button class="demo-button" (click)="showBlurBackdrop = false">Close</button>
          </div>
        </ui-backdrop>
      </section>
      
      <!-- Opacity Control -->
      <section class="demo-section">
        <h3>Opacity Control</h3>
        <div class="demo-controls">
          <label for="opacity-slider">Opacity: {{ currentOpacity }}</label>
          <input 
            id="opacity-slider"
            type="range" 
            min="0.1" 
            max="1" 
            step="0.1" 
            [value]="currentOpacity"
            (input)="updateOpacity($event)"
          >
          <button 
            class="demo-button"
            (click)="toggleOpacityBackdrop()"
          >
            Show Backdrop
          </button>
        </div>
        
        <ui-backdrop 
          [visible]="showOpacityBackdrop"
          [opacity]="currentOpacity"
          (clicked)="handleBackdropClick('Opacity backdrop clicked!')"
          (visibleChange)="showOpacityBackdrop = $event"
        >
          <div class="backdrop-content">
            <h4>Opacity: {{ currentOpacity }}</h4>
            <p>Adjust the opacity using the slider above</p>
          </div>
        </ui-backdrop>
      </section>
      
      <!-- Z-Index Control -->
      <section class="demo-section">
        <h3>Z-Index & Stacking</h3>
        <div class="demo-row">
          <button 
            class="demo-button"
            (click)="showStackedBackdrops()"
          >
            Show Stacked Backdrops
          </button>
        </div>
        
        <!-- Lower z-index backdrop -->
        <ui-backdrop 
          [visible]="showFirstBackdrop"
          [zIndex]="1000"
          variant="dark"
          [opacity]="0.4"
          (clicked)="handleBackdropClick('First backdrop clicked!')"
        >
          <div class="backdrop-content backdrop-content--large">
            <h4>First Backdrop (z-index: 1000)</h4>
            <p>This is behind the second backdrop</p>
          </div>
        </ui-backdrop>
        
        <!-- Higher z-index backdrop -->
        <ui-backdrop 
          [visible]="showSecondBackdrop"
          [zIndex]="1010"
          variant="light"
          [opacity]="0.3"
          (clicked)="handleBackdropClick('Second backdrop clicked!')"
          (visibleChange)="handleStackedBackdropChange($event)"
        >
          <div class="backdrop-content backdrop-content--small">
            <h4>Second Backdrop (z-index: 1010)</h4>
            <p>This is in front of the first backdrop</p>
            <button class="demo-button" (click)="hideStackedBackdrops()">Close Both</button>
          </div>
        </ui-backdrop>
      </section>
      
      <!-- Non-clickable Backdrop -->
      <section class="demo-section">
        <h3>Non-clickable Backdrop</h3>
        <div class="demo-row">
          <button 
            class="demo-button"
            (click)="toggleNonClickableBackdrop()"
          >
            Show Non-clickable
          </button>
        </div>
        
        <ui-backdrop 
          [visible]="showNonClickableBackdrop"
          [clickable]="false"
          (visibleChange)="showNonClickableBackdrop = $event"
        >
          <div class="backdrop-content">
            <h4>Non-clickable Backdrop</h4>
            <p>This backdrop cannot be clicked to close</p>
            <button class="demo-button" (click)="showNonClickableBackdrop = false">Close</button>
          </div>
        </ui-backdrop>
      </section>
      
      <!-- Event Log -->
      <section class="demo-section">
        <h3>Event Log</h3>
        <div class="demo-log">
          @for (event of eventLog; track $index) {
            <div class="log-entry">{{ event }}</div>
          }
          @empty {
            <div class="log-entry log-entry--empty">No events yet. Interact with backdrops above.</div>
          }
        </div>
        <button class="demo-button demo-button--secondary" (click)="clearEventLog()">Clear Log</button>
      </section>
    </div>
  `,
  styleUrl: './backdrop-demo.component.scss'
})
export class BackdropDemoComponent {
  // Basic backdrop
  showBasicBackdrop = false;
  
  // Variant backdrop
  variants = ['default', 'blur', 'dark', 'light'] as const;
  currentVariant: typeof this.variants[number] | null = null;
  showVariant = false;
  
  // Blur backdrop
  showBlurBackdrop = false;
  
  // Opacity backdrop
  showOpacityBackdrop = false;
  currentOpacity = 0.5;
  
  // Stacked backdrops
  showFirstBackdrop = false;
  showSecondBackdrop = false;
  
  // Non-clickable backdrop
  showNonClickableBackdrop = false;
  
  // Event log
  eventLog: string[] = [];
  
  toggleBasicBackdrop(): void {
    this.showBasicBackdrop = !this.showBasicBackdrop;
    this.logEvent(`Basic backdrop ${this.showBasicBackdrop ? 'opened' : 'closed'}`);
  }
  
  showVariantBackdrop(variant: typeof this.variants[number]): void {
    this.currentVariant = variant;
    this.showVariant = true;
    this.logEvent(`${variant} backdrop opened`);
  }
  
  handleVariantVisibilityChange(visible: boolean): void {
    this.showVariant = visible;
    if (!visible && this.currentVariant) {
      this.logEvent(`${this.currentVariant} backdrop closed`);
      this.currentVariant = null;
    }
  }
  
  toggleBlurBackdrop(): void {
    this.showBlurBackdrop = !this.showBlurBackdrop;
    this.logEvent(`Blur backdrop ${this.showBlurBackdrop ? 'opened' : 'closed'}`);
  }
  
  updateOpacity(event: Event): void {
    const target = event.target as HTMLInputElement;
    this.currentOpacity = parseFloat(target.value);
  }
  
  toggleOpacityBackdrop(): void {
    this.showOpacityBackdrop = !this.showOpacityBackdrop;
    this.logEvent(`Opacity backdrop ${this.showOpacityBackdrop ? 'opened' : 'closed'} with opacity ${this.currentOpacity}`);
  }
  
  showStackedBackdrops(): void {
    this.showFirstBackdrop = true;
    this.showSecondBackdrop = true;
    this.logEvent('Stacked backdrops opened');
  }
  
  hideStackedBackdrops(): void {
    this.showFirstBackdrop = false;
    this.showSecondBackdrop = false;
    this.logEvent('Stacked backdrops closed');
  }
  
  handleStackedBackdropChange(visible: boolean): void {
    if (!visible) {
      this.hideStackedBackdrops();
    }
  }
  
  toggleNonClickableBackdrop(): void {
    this.showNonClickableBackdrop = !this.showNonClickableBackdrop;
    this.logEvent(`Non-clickable backdrop ${this.showNonClickableBackdrop ? 'opened' : 'closed'}`);
  }
  
  handleBackdropClick(message: string): void {
    this.logEvent(message);
  }
  
  private logEvent(message: string): void {
    const timestamp = new Date().toLocaleTimeString();
    this.eventLog.unshift(`[${timestamp}] ${message}`);
    
    // Keep only last 10 events
    if (this.eventLog.length > 10) {
      this.eventLog = this.eventLog.slice(0, 10);
    }
  }
  
  clearEventLog(): void {
    this.eventLog = [];
    this.logEvent('Event log cleared');
  }
}