dees-catalog/ts_web/elements/dees-input-checkbox.demo.ts

import { html, css } from '@design.estate/dees-element';
import '@design.estate/dees-wcctools/demotools';
import type { DeesInputCheckbox } from './dees-input-checkbox.js';
import './dees-button.js';

export const demoFunc = () => html`
  <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
    // Get all checkboxes for demo interactions
    const checkboxes = elementArg.querySelectorAll('dees-input-checkbox');
    
    // Example of programmatic interaction
    const selectAllBtn = elementArg.querySelector('#select-all-btn');
    const clearAllBtn = elementArg.querySelector('#clear-all-btn');
    
    if (selectAllBtn && clearAllBtn) {
      selectAllBtn.addEventListener('click', () => {
        checkboxes.forEach((checkbox: DeesInputCheckbox) => {
          if (!checkbox.disabled && checkbox.key?.startsWith('feature')) {
            checkbox.value = true;
          }
        });
      });
      
      clearAllBtn.addEventListener('click', () => {
        checkboxes.forEach((checkbox: DeesInputCheckbox) => {
          if (!checkbox.disabled && checkbox.key?.startsWith('feature')) {
            checkbox.value = false;
          }
        });
      });
    }
  }}>
    <style>
      ${css`
        .demo-container {
          display: flex;
          flex-direction: column;
          gap: 24px;
          padding: 24px;
          max-width: 1200px;
          margin: 0 auto;
        }
        
        .demo-section {
          background: #f8f9fa;
          border-radius: 8px;
          padding: 24px;
        }
        
        @media (prefers-color-scheme: dark) {
          .demo-section {
            background: #1a1a1a;
          }
        }
        
        .demo-section h3 {
          margin-top: 0;
          margin-bottom: 16px;
          color: #0069f2;
          font-size: 18px;
        }
        
        .demo-section p {
          margin-top: 0;
          margin-bottom: 16px;
          color: #666;
          font-size: 14px;
        }
        
        @media (prefers-color-scheme: dark) {
          .demo-section p {
            color: #999;
          }
        }
        
        .horizontal-group {
          display: flex;
          align-items: center;
          gap: 16px;
          flex-wrap: wrap;
        }
        
        .checkbox-group {
          display: flex;
          flex-direction: column;
          gap: 8px;
        }
        
        .feature-list {
          background: #f0f0f0;
          border-radius: 4px;
          padding: 16px;
          margin-bottom: 16px;
        }
        
        @media (prefers-color-scheme: dark) {
          .feature-list {
            background: #0a0a0a;
          }
        }
        
        .button-group {
          display: flex;
          gap: 8px;
          margin-bottom: 16px;
        }
      `}
    </style>
    
    <div class="demo-container">
      <div class="demo-section">
        <h3>Basic Checkboxes</h3>
        <p>Standard checkbox inputs for boolean selections</p>
        
        <dees-input-checkbox 
          .label=${'I agree to the Terms and Conditions'} 
          .value=${true}
          .key=${'terms'}
        ></dees-input-checkbox>
        
        <dees-input-checkbox 
          .label=${'Subscribe to newsletter'} 
          .value=${false}
          .key=${'newsletter'}
        ></dees-input-checkbox>
        
        <dees-input-checkbox 
          .label=${'Enable notifications'} 
          .required=${true}
          .key=${'notifications'}
        ></dees-input-checkbox>
      </div>
      
      <div class="demo-section">
        <h3>Horizontal Layout</h3>
        <p>Checkboxes arranged horizontally for compact forms</p>
        
        <div class="horizontal-group">
          <dees-input-checkbox 
            .label=${'Option A'} 
            .layoutMode=${'horizontal'}
            .key=${'optionA'}
          ></dees-input-checkbox>
          
          <dees-input-checkbox 
            .label=${'Option B'} 
            .layoutMode=${'horizontal'} 
            .value=${true}
            .key=${'optionB'}
          ></dees-input-checkbox>
          
          <dees-input-checkbox 
            .label=${'Option C'} 
            .layoutMode=${'horizontal'}
            .key=${'optionC'}
          ></dees-input-checkbox>
          
          <dees-input-checkbox 
            .label=${'Option D'} 
            .layoutMode=${'horizontal'}
            .value=${true}
            .key=${'optionD'}
          ></dees-input-checkbox>
        </div>
      </div>
      
      <div class="demo-section">
        <h3>Feature Selection Example</h3>
        <p>Common use case for feature toggles with batch operations</p>
        
        <div class="button-group">
          <dees-button id="select-all-btn" type="secondary">Select All</dees-button>
          <dees-button id="clear-all-btn" type="secondary">Clear All</dees-button>
        </div>
        
        <div class="feature-list">
          <div class="checkbox-group">
            <dees-input-checkbox 
              .label=${'Dark Mode Support'} 
              .value=${true}
              .key=${'feature1'}
            ></dees-input-checkbox>
            
            <dees-input-checkbox 
              .label=${'Email Notifications'} 
              .value=${true}
              .key=${'feature2'}
            ></dees-input-checkbox>
            
            <dees-input-checkbox 
              .label=${'Two-Factor Authentication'} 
              .value=${false}
              .key=${'feature3'}
            ></dees-input-checkbox>
            
            <dees-input-checkbox 
              .label=${'API Access'} 
              .value=${true}
              .key=${'feature4'}
            ></dees-input-checkbox>
            
            <dees-input-checkbox 
              .label=${'Advanced Analytics'} 
              .value=${false}
              .key=${'feature5'}
            ></dees-input-checkbox>
          </div>
        </div>
      </div>
      
      <div class="demo-section">
        <h3>States</h3>
        <p>Different checkbox states and configurations</p>
        
        <dees-input-checkbox 
          .label=${'Disabled Unchecked'} 
          .disabled=${true}
          .key=${'disabled1'}
        ></dees-input-checkbox>
        
        <dees-input-checkbox 
          .label=${'Disabled Checked'} 
          .disabled=${true} 
          .value=${true}
          .key=${'disabled2'}
        ></dees-input-checkbox>
        
        <dees-input-checkbox 
          .label=${'Required Checkbox'} 
          .required=${true}
          .key=${'required'}
        ></dees-input-checkbox>
      </div>
      
      <div class="demo-section">
        <h3>Real-world Examples</h3>
        <p>Common checkbox patterns in applications</p>
        
        <div class="checkbox-group">
          <dees-input-checkbox 
            .label=${'Remember me on this device'} 
            .value=${true}
            .key=${'rememberMe'}
          ></dees-input-checkbox>
          
          <dees-input-checkbox 
            .label=${'Make my profile public'} 
            .value=${false}
            .key=${'publicProfile'}
          ></dees-input-checkbox>
          
          <dees-input-checkbox 
            .label=${'Allow others to find me by email'} 
            .value=${false}
            .key=${'findByEmail'}
          ></dees-input-checkbox>
          
          <dees-input-checkbox 
            .label=${'Send me product updates and announcements'} 
            .value=${true}
            .key=${'productUpdates'}
          ></dees-input-checkbox>
        </div>
      </div>
    </div>
  </dees-demowrapper>
`;