dees-catalog/ts_web/elements/dees-modal.demo.ts

import { html, css, cssManager } from '@design.estate/dees-element';
import { DeesModal } from './dees-modal.js';

export const demoFunc = () => html`
  <style>
    ${css`
      .demo-container {
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding: 24px;
        max-width: 1200px;
        margin: 0 auto;
      }
      
      .demo-section {
        background: ${cssManager.bdTheme('#f8f9fa', '#1a1a1a')};
        border-radius: 8px;
        padding: 24px;
        border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
      }
      
      .demo-section h3 {
        margin-top: 0;
        margin-bottom: 16px;
        color: ${cssManager.bdTheme('#333', '#fff')};
      }
      
      .demo-section p {
        color: ${cssManager.bdTheme('#666', '#999')};
        margin-bottom: 16px;
      }
      
      .button-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 16px;
      }
    `}
  </style>
  
  <div class="demo-container">
    <div class="demo-section">
      <h3>Header Buttons</h3>
      <p>Modals can have optional header buttons for help and closing.</p>
      <div class="button-grid">
        <dees-button @click=${() => {
          DeesModal.createAndShow({
            heading: 'With Help Button',
            showHelpButton: true,
            onHelp: async () => {
              const helpModal = await DeesModal.createAndShow({
                heading: 'Help',
                width: 'small',
                showCloseButton: true,
                showHelpButton: false,
                content: html`
                  <p>This is the help content for the modal.</p>
                  <p>You can provide context-specific help here.</p>
                `,
                menuOptions: [{
                  name: 'Got it',
                  action: async (modal) => modal.destroy()
                }],
              });
            },
            content: html`
              <p>This modal has a help button in the header. Click it to see help content.</p>
              <p>The close button is also visible by default.</p>
            `,
            menuOptions: [{
              name: 'OK',
              action: async (modal) => modal.destroy()
            }],
          });
        }}>With Help Button</dees-button>
        
        <dees-button @click=${() => {
          DeesModal.createAndShow({
            heading: 'No Close Button',
            showCloseButton: false,
            content: html`
              <p>This modal has no close button in the header.</p>
              <p>You must use the action buttons or click outside to close it.</p>
            `,
            menuOptions: [{
              name: 'Close',
              action: async (modal) => modal.destroy()
            }],
          });
        }}>No Close Button</dees-button>
        
        <dees-button @click=${() => {
          DeesModal.createAndShow({
            heading: 'Both Buttons',
            showHelpButton: true,
            showCloseButton: true,
            onHelp: () => alert('Help clicked!'),
            content: html`
              <p>This modal has both help and close buttons.</p>
            `,
            menuOptions: [{
              name: 'Done',
              action: async (modal) => modal.destroy()
            }],
          });
        }}>Both Buttons</dees-button>
        
        <dees-button @click=${() => {
          DeesModal.createAndShow({
            heading: 'Clean Header',
            showCloseButton: false,
            showHelpButton: false,
            content: html`
              <p>This modal has a clean header with no buttons.</p>
            `,
            menuOptions: [{
              name: 'Close',
              action: async (modal) => modal.destroy()
            }],
          });
        }}>Clean Header</dees-button>
      </div>
    </div>
    
    <div class="demo-section">
      <h3>Modal Width Variations</h3>
      <p>Modals can have different widths: small, medium, large, fullscreen, or custom pixel values.</p>
      <div class="button-grid">
        <dees-button @click=${() => {
          DeesModal.createAndShow({
            heading: 'Small Modal',
            width: 'small',
            content: html`
              <p>This is a small modal with a width of 380px. Perfect for simple confirmations or brief messages.</p>
            `,
            menuOptions: [{
              name: 'Cancel',
              action: async (modal) => modal.destroy()
            }, {
              name: 'OK',
              action: async (modal) => modal.destroy()
            }],
          });
        }}>Small Modal</dees-button>
        
        <dees-button @click=${() => {
          DeesModal.createAndShow({
            heading: 'Medium Modal (Default)',
            width: 'medium',
            content: html`
              <dees-form>
                <dees-input-text .label=${'Username'}></dees-input-text>
                <dees-input-text .label=${'Email'} .inputType=${'email'}></dees-input-text>
                <dees-input-text .label=${'Password'} .inputType=${'password'}></dees-input-text>
              </dees-form>
            `,
            menuOptions: [{
              name: 'Cancel',
              action: async (modal) => modal.destroy()
            }, {
              name: 'Sign Up',
              action: async (modal) => modal.destroy()
            }],
          });
        }}>Medium Modal</dees-button>
        
        <dees-button @click=${() => {
          DeesModal.createAndShow({
            heading: 'Large Modal',
            width: 'large',
            content: html`
              <h4>Wide Content Area</h4>
              <p>This large modal is 800px wide and perfect for displaying more complex content like forms with multiple columns, tables, or detailed information.</p>
              <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px;">
                <dees-input-text .label=${'First Name'}></dees-input-text>
                <dees-input-text .label=${'Last Name'}></dees-input-text>
                <dees-input-text .label=${'Company'}></dees-input-text>
                <dees-input-text .label=${'Position'}></dees-input-text>
              </div>
            `,
            menuOptions: [{
              name: 'Cancel',
              action: async (modal) => modal.destroy()
            }, {
              name: 'Save',
              action: async (modal) => modal.destroy()
            }],
          });
        }}>Large Modal</dees-button>
        
        <dees-button @click=${() => {
          DeesModal.createAndShow({
            heading: 'Fullscreen Editor',
            width: 'fullscreen',
            showHelpButton: true,
            onHelp: async () => {
              alert('In a real app, this would show editor documentation');
            },
            content: html`
              <h4>Fullscreen Experience with Header Controls</h4>
              <p>This modal takes up almost the entire viewport with a 20px margin on all sides. The header buttons are particularly useful in fullscreen mode.</p>
              <p>The content area can be as tall as needed and will scroll if necessary.</p>
              <div style="height: 200px; background: ${cssManager.bdTheme('#f0f0f0', '#2a2a2a')}; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-top: 16px;">
                <span style="color: ${cssManager.bdTheme('#999', '#666')}">Large content area</span>
              </div>
            `,
            menuOptions: [{
              name: 'Save',
              action: async (modal) => modal.destroy()
            }, {
              name: 'Cancel',
              action: async (modal) => modal.destroy()
            }],
          });
        }}>Fullscreen Modal</dees-button>
      </div>
    </div>
    
    <div class="demo-section">
      <h3>Custom Width & Constraints</h3>
      <p>You can also set custom pixel widths and min/max constraints.</p>
      <div class="button-grid">
        <dees-button @click=${() => {
          DeesModal.createAndShow({
            heading: 'Custom Width (700px)',
            width: 700,
            content: html`
              <p>This modal has a custom width of exactly 700 pixels.</p>
            `,
            menuOptions: [{
              name: 'Close',
              action: async (modal) => modal.destroy()
            }],
          });
        }}>Custom 700px</dees-button>
        
        <dees-button @click=${() => {
          DeesModal.createAndShow({
            heading: 'With Max Width',
            width: 'large',
            maxWidth: 600,
            content: html`
              <p>This modal is set to 'large' but constrained by a maxWidth of 600px.</p>
            `,
            menuOptions: [{
              name: 'Got it',
              action: async (modal) => modal.destroy()
            }],
          });
        }}>Max Width 600px</dees-button>
        
        <dees-button @click=${() => {
          DeesModal.createAndShow({
            heading: 'With Min Width',
            width: 300,
            minWidth: 400,
            content: html`
              <p>This modal width is set to 300px but has a minWidth of 400px, so it will be 400px wide.</p>
            `,
            menuOptions: [{
              name: 'OK',
              action: async (modal) => modal.destroy()
            }],
          });
        }}>Min Width 400px</dees-button>
      </div>
    </div>
    
    <div class="demo-section">
      <h3>Button Variations</h3>
      <p>Modals can have different button configurations with proper spacing.</p>
      <div class="button-grid">
        <dees-button @click=${() => {
          DeesModal.createAndShow({
            heading: 'Multiple Actions',
            content: html`
              <p>This modal demonstrates multiple buttons with proper spacing between them.</p>
            `,
            menuOptions: [{
              name: 'Delete',
              action: async (modal) => modal.destroy()
            }, {
              name: 'Cancel',
              action: async (modal) => modal.destroy()
            }, {
              name: 'Save Changes',
              action: async (modal) => modal.destroy()
            }],
          });
        }}>Three Buttons</dees-button>
        
        <dees-button @click=${() => {
          DeesModal.createAndShow({
            heading: 'Single Action',
            content: html`
              <p>Sometimes you just need one button.</p>
            `,
            menuOptions: [{
              name: 'Acknowledge',
              action: async (modal) => modal.destroy()
            }],
          });
        }}>Single Button</dees-button>
        
        <dees-button @click=${() => {
          DeesModal.createAndShow({
            heading: 'No Actions',
            content: html`
              <p>This modal has no bottom buttons. Use the X button or click outside to close.</p>
              <p style="margin-top: 16px; color: ${cssManager.bdTheme('#666', '#999')};">This is useful for informational modals that don't require user action.</p>
            `,
            menuOptions: [],
          });
        }}>No Buttons</dees-button>
        
        <dees-button @click=${() => {
          DeesModal.createAndShow({
            heading: 'Long Button Labels',
            content: html`
              <p>Testing button layout with longer labels.</p>
            `,
            menuOptions: [{
              name: 'Discard All Changes',
              action: async (modal) => modal.destroy()
            }, {
              name: 'Save and Continue Editing',
              action: async (modal) => modal.destroy()
            }],
          });
        }}>Long Labels</dees-button>
      </div>
    </div>
    
    <div class="demo-section">
      <h3>Responsive Behavior</h3>
      <p>All modals automatically become full-width on mobile devices (< 768px viewport width) for better usability.</p>
      <dees-button @click=${() => {
        DeesModal.createAndShow({
          heading: 'Responsive Modal',
          width: 'large',
          showHelpButton: true,
          onHelp: () => console.log('Help requested for responsive modal'),
          content: html`
            <p>Resize your browser window to see how this modal adapts. On mobile viewports, it will automatically take the full width minus margins.</p>
            <p>The header buttons remain accessible at all viewport sizes.</p>
          `,
          menuOptions: [{
            name: 'Close',
            action: async (modal) => modal.destroy()
          }],
        });
      }}>Test Responsive</dees-button>
    </div>
  </div>
`