dees-catalog-mobile/ts_web/elements/00group-ui/dees-mobile-actionsheet/dees-mobile-actionsheet.demo.ts

import { html } from '@design.estate/dees-element';
import { injectCssVariables } from '../../00variables.js';

export const demoFunc = () => {
  injectCssVariables();
  return html`
  <style>
    .demo-section {
      margin-bottom: 2rem;
    }
    .demo-section h3 {
      margin: 0 0 1rem 0;
      font-size: 0.875rem;
      color: var(--dees-muted-foreground);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .demo-note {
      font-size: 0.875rem;
      color: var(--dees-muted-foreground);
      margin-top: 0.5rem;
    }
  </style>

  <div class="demo-section">
    <h3>Action Sheet</h3>
    <dees-mobile-button
      @click=${(e: Event) => {
        const container = (e.target as HTMLElement).parentElement;
        const existing = container?.querySelector('dees-mobile-actionsheet');
        if (existing) existing.remove();

        const sheet = document.createElement('dees-mobile-actionsheet');
        (sheet as any).title = 'Add Photo';
        (sheet as any).options = [
          {
            id: 'camera',
            icon: 'camera',
            iconColor: 'var(--dees-primary)',
            iconBackground: 'rgba(59, 130, 246, 0.1)',
            title: 'Take Photo',
            subtitle: 'Use camera to capture a new photo'
          },
          {
            id: 'gallery',
            icon: 'image',
            iconColor: '#16a34a',
            iconBackground: '#dcfce7',
            title: 'Choose from Gallery',
            subtitle: 'Select an existing photo'
          }
        ];
        sheet.addEventListener('close', () => sheet.remove());
        sheet.addEventListener('select', (ev: any) => {
          console.log('Selected:', ev.detail);
          sheet.remove();
        });
        document.body.appendChild(sheet);
      }}
    >Show Photo Options</dees-mobile-button>
    <p class="demo-note">Opens an iOS-style action sheet from the bottom of the screen.</p>
  </div>

  <div class="demo-section">
    <h3>Share Options</h3>
    <dees-mobile-button
      variant="outline"
      @click=${(e: Event) => {
        const sheet = document.createElement('dees-mobile-actionsheet');
        (sheet as any).title = 'Share';
        (sheet as any).options = [
          {
            id: 'copy',
            icon: 'copy',
            title: 'Copy Link'
          },
          {
            id: 'email',
            icon: 'mail',
            title: 'Send via Email'
          },
          {
            id: 'message',
            icon: 'message-circle',
            title: 'Send Message'
          }
        ];
        sheet.addEventListener('close', () => sheet.remove());
        sheet.addEventListener('select', (ev: any) => {
          console.log('Share via:', ev.detail);
          sheet.remove();
        });
        document.body.appendChild(sheet);
      }}
    >Share Options</dees-mobile-button>
  </div>
`;
};