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

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { faDownload, faSave, faShare, faEdit, faTrash, faFile, faFileText, faPrint } from '@fortawesome/free-solid-svg-icons';
import { SplitButtonComponent, SplitButtonMenuItem } from '../../../../../ui-essentials/src/lib/components/buttons/split-button';

@Component({
  selector: 'ui-split-button-demo',
  standalone: true,
  imports: [CommonModule, SplitButtonComponent],
  template: `
    <div class="demo-container">
      <h2>Split Button Demo</h2>
      
      <!-- Size Variants -->
      <section class="demo-section">
        <h3>Sizes</h3>
        <div class="demo-row">
          @for (size of sizes; track size) {
            <ui-split-button 
              [size]="size"
              [menuItems]="basicMenuItems"
              (primaryClicked)="handlePrimaryClick('Primary clicked - ' + size)"
              (menuItemClicked)="handleMenuItemClick($event)">
              {{ size | titlecase }} Size
            </ui-split-button>
          }
        </div>
      </section>
      
      <!-- Variant Styles -->
      <section class="demo-section">
        <h3>Variants</h3>
        <div class="demo-row">
          @for (variant of variants; track variant) {
            <ui-split-button 
              [variant]="variant"
              [menuItems]="basicMenuItems"
              (primaryClicked)="handlePrimaryClick('Primary clicked - ' + variant)"
              (menuItemClicked)="handleMenuItemClick($event)">
              {{ variant | titlecase }}
            </ui-split-button>
          }
        </div>
      </section>
      
      <!-- With Icons -->
      <section class="demo-section">
        <h3>With Icons</h3>
        <div class="demo-row">
          <ui-split-button 
            [icon]="faDownload"
            iconPosition="left"
            [menuItems]="exportMenuItems"
            (primaryClicked)="handlePrimaryClick('Download clicked')"
            (menuItemClicked)="handleMenuItemClick($event)">
            Download
          </ui-split-button>
          
          <ui-split-button 
            variant="tonal"
            [icon]="faSave"
            iconPosition="right"
            [menuItems]="saveMenuItems"
            (primaryClicked)="handlePrimaryClick('Save clicked')"
            (menuItemClicked)="handleMenuItemClick($event)">
            Save
          </ui-split-button>
          
          <ui-split-button 
            variant="outlined"
            [icon]="faShare"
            [menuItems]="shareMenuItems"
            (primaryClicked)="handlePrimaryClick('Share clicked')"
            (menuItemClicked)="handleMenuItemClick($event)">
            Share
          </ui-split-button>
        </div>
      </section>
      
      <!-- States -->
      <section class="demo-section">
        <h3>States</h3>
        <div class="demo-row">
          <ui-split-button 
            [disabled]="true"
            [menuItems]="basicMenuItems">
            Disabled
          </ui-split-button>
          
          <ui-split-button 
            [loading]="true"
            [menuItems]="basicMenuItems">
            Loading
          </ui-split-button>
          
          <ui-split-button 
            [fullWidth]=true
            variant="tonal"
            [menuItems]="basicMenuItems"
            (primaryClicked)="handlePrimaryClick('Full width clicked')"
            (menuItemClicked)="handleMenuItemClick($event)">
            Full Width
          </ui-split-button>
        </div>
      </section>
      
      <!-- Complex Examples -->
      <section class="demo-section">
        <h3>Complex Examples</h3>
        <div class="demo-row">
          <ui-split-button 
            size="large"
            variant="filled"
            [icon]="faEdit"
            [menuItems]="editMenuItems"
            (primaryClicked)="handlePrimaryClick('Edit Document clicked')"
            (menuItemClicked)="handleMenuItemClick($event)">
            Edit Document
          </ui-split-button>
          
          <ui-split-button 
            size="medium"
            variant="outlined"
            [menuItems]="fileMenuItems"
            (primaryClicked)="handlePrimaryClick('New File clicked')"
            (menuItemClicked)="handleMenuItemClick($event)">
            New File
          </ui-split-button>
        </div>
      </section>
      
      <!-- Interactive Results -->
      <section class="demo-section">
        <h3>Interactive Results</h3>
        <div class="demo-results">
          <p><strong>Last Action:</strong> {{ lastAction || 'None' }}</p>
          <p><strong>Click Count:</strong> {{ clickCount }}</p>
        </div>
      </section>
    </div>
  `,
  styleUrl: './split-button-demo.component.scss'
})
export class SplitButtonDemoComponent {
  sizes = ['small', 'medium', 'large'] as const;
  variants = ['filled', 'tonal', 'outlined'] as const;
  
  clickCount = 0;
  lastAction = '';
  
  // Icons
  faDownload = faDownload;
  faSave = faSave;
  faShare = faShare;
  faEdit = faEdit;
  faTrash = faTrash;
  faFile = faFile;
  faFileText = faFileText;
  faPrint = faPrint;

  // Menu configurations
  basicMenuItems: SplitButtonMenuItem[] = [
    { label: 'Option 1', value: 'opt1' },
    { label: 'Option 2', value: 'opt2' },
    { label: 'Option 3', value: 'opt3' },
    { label: 'Disabled Option', value: 'disabled', disabled: true }
  ];

  exportMenuItems: SplitButtonMenuItem[] = [
    { label: 'Download PDF', value: 'pdf', icon: this.faFile },
    { label: 'Download CSV', value: 'csv', icon: this.faFileText },
    { label: 'Download Excel', value: 'excel', icon: this.faFile },
    { label: 'Print', value: 'print', icon: this.faPrint }
  ];

  saveMenuItems: SplitButtonMenuItem[] = [
    { label: 'Save As...', value: 'save-as' },
    { label: 'Save Copy', value: 'save-copy' },
    { label: 'Save Template', value: 'save-template' }
  ];

  shareMenuItems: SplitButtonMenuItem[] = [
    { label: 'Share Link', value: 'share-link' },
    { label: 'Share via Email', value: 'share-email' },
    { label: 'Export & Share', value: 'export-share' }
  ];

  editMenuItems: SplitButtonMenuItem[] = [
    { label: 'Quick Edit', value: 'quick-edit', icon: this.faEdit },
    { label: 'Advanced Edit', value: 'advanced-edit', icon: this.faEdit },
    { label: 'Delete', value: 'delete', icon: this.faTrash }
  ];

  fileMenuItems: SplitButtonMenuItem[] = [
    { label: 'New Text File', value: 'new-text', icon: this.faFileText },
    { label: 'New Document', value: 'new-doc', icon: this.faFile },
    { label: 'New from Template', value: 'new-template', icon: this.faFile }
  ];

  handlePrimaryClick(action: string): void {
    this.clickCount++;
    this.lastAction = action;
    console.log('Primary button clicked:', action);
  }

  handleMenuItemClick(data: { event: Event; item: SplitButtonMenuItem }): void {
    this.clickCount++;
    this.lastAction = `Menu item: ${data.item.label} (value: ${data.item.value})`;
    console.log('Menu item clicked:', data);
  }
}