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

import { html, css, cssManager } from '@design.estate/dees-element';
import '@design.estate/dees-wcctools/demotools';
import './dees-panel.js';
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;
        }
        
        dees-panel {
          margin-bottom: 24px;
        }
        
        dees-panel:last-child {
          margin-bottom: 0;
        }
        
        .checkbox-group {
          display: flex;
          flex-direction: column;
          gap: 12px;
        }
        
        .horizontal-checkboxes {
          display: flex;
          gap: 24px;
          flex-wrap: wrap;
        }
        
        .interactive-section {
          background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')};
          border-radius: 8px;
          padding: 16px;
          margin-top: 16px;
        }
        
        .output-text {
          font-family: monospace;
          font-size: 13px;
          color: ${cssManager.bdTheme('hsl(215.3 25% 26.7%)', 'hsl(210 40% 80%)')};
          padding: 8px;
          background: ${cssManager.bdTheme('hsl(210 40% 98%)', 'hsl(215 20.2% 11.8%)')};
          border-radius: 4px;
          min-height: 24px;
        }
        
        .form-section {
          background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 7%)')};
          border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
          border-radius: 8px;
          padding: 20px;
          margin-top: 16px;
        }
        
        .button-group {
          display: flex;
          gap: 8px;
          margin-bottom: 16px;
        }
        
        .feature-list {
          background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 11.8%)')};
          border: 1px solid ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(215 20.2% 16.8%)')};
          border-radius: 6px;
          padding: 16px;
        }
        
        .section-title {
          font-size: 16px;
          font-weight: 600;
          margin-bottom: 16px;
          color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
        }
      `}
    </style>
    
    <div class="demo-container">
      <dees-panel .title=${'Basic Checkboxes'} .subtitle=${'Simple checkbox examples with various labels'}>
        <div class="checkbox-group">
          <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'} 
            .value=${false}
            .description=${'Receive email updates about your account'}
            .key=${'notifications'}
          ></dees-input-checkbox>
        </div>
      </dees-panel>
      
      <dees-panel .title=${'Checkbox States'} .subtitle=${'Different checkbox states and configurations'}>
        <div class="checkbox-group">
          <dees-input-checkbox 
            .label=${'Default state'} 
            .value=${false}
          ></dees-input-checkbox>
          
          <dees-input-checkbox 
            .label=${'Checked state'} 
            .value=${true}
          ></dees-input-checkbox>
          
          <dees-input-checkbox 
            .label=${'Disabled unchecked'} 
            .value=${false}
            .disabled=${true}
          ></dees-input-checkbox>
          
          <dees-input-checkbox 
            .label=${'Disabled checked'} 
            .value=${true}
            .disabled=${true}
          ></dees-input-checkbox>
          
          <dees-input-checkbox 
            .label=${'Required checkbox'} 
            .required=${true}
            .key=${'required'}
          ></dees-input-checkbox>
        </div>
      </dees-panel>
      
      <dees-panel .title=${'Horizontal Layout'} .subtitle=${'Checkboxes arranged horizontally for compact forms'}>
        <div class="horizontal-checkboxes">
          <dees-input-checkbox 
            .label=${'Option A'} 
            .value=${false}
            .layoutMode=${'horizontal'}
            .key=${'optionA'}
          ></dees-input-checkbox>
          
          <dees-input-checkbox 
            .label=${'Option B'} 
            .value=${true}
            .layoutMode=${'horizontal'}
            .key=${'optionB'}
          ></dees-input-checkbox>
          
          <dees-input-checkbox 
            .label=${'Option C'} 
            .value=${false}
            .layoutMode=${'horizontal'}
            .key=${'optionC'}
          ></dees-input-checkbox>
          
          <dees-input-checkbox 
            .label=${'Option D'} 
            .value=${true}
            .layoutMode=${'horizontal'}
            .key=${'optionD'}
          ></dees-input-checkbox>
        </div>
      </dees-panel>
      
      <dees-panel .title=${'Feature Selection Example'} .subtitle=${'Common use case for feature toggles with batch operations'}>
        <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>
      </dees-panel>
      
      <dees-panel .title=${'Privacy Settings Example'} .subtitle=${'Checkboxes in a typical form context'}>
        <div class="form-section">
          <h4 class="section-title">Privacy Preferences</h4>
          
          <div class="checkbox-group">
            <dees-input-checkbox 
              .label=${'Share analytics data'} 
              .value=${true}
              .description=${'Help us improve by sharing anonymous usage data'}
            ></dees-input-checkbox>
            
            <dees-input-checkbox 
              .label=${'Personalized recommendations'} 
              .value=${true}
              .description=${'Get suggestions based on your activity'}
            ></dees-input-checkbox>
            
            <dees-input-checkbox 
              .label=${'Marketing communications'} 
              .value=${false}
              .description=${'Receive promotional emails and special offers'}
            ></dees-input-checkbox>
            
            <dees-input-checkbox 
              .label=${'Third-party integrations'} 
              .value=${false}
              .description=${'Allow approved partners to access your data'}
            ></dees-input-checkbox>
          </div>
        </div>
      </dees-panel>
      
      <dees-panel .title=${'Interactive Example'} .subtitle=${'Click checkboxes to see value changes'}>
        <div class="checkbox-group">
          <dees-input-checkbox 
            .label=${'Feature toggle'} 
            .value=${false}
            @changeSubject=${(event: CustomEvent) => {
              const output = document.querySelector('#checkbox-output');
              if (output && event.detail) {
                const isChecked = event.detail.getValue();
                output.textContent = `Feature is ${isChecked ? 'enabled' : 'disabled'}`;
              }
            }}
          ></dees-input-checkbox>
          
          <dees-input-checkbox 
            .label=${'Debug mode'} 
            .value=${false}
            @changeSubject=${(event: CustomEvent) => {
              const output = document.querySelector('#debug-output');
              if (output && event.detail) {
                const isChecked = event.detail.getValue();
                output.textContent = `Debug mode: ${isChecked ? 'ON' : 'OFF'}`;
              }
            }}
          ></dees-input-checkbox>
        </div>
        
        <div class="interactive-section">
          <div id="checkbox-output" class="output-text">Feature is disabled</div>
          <div id="debug-output" class="output-text" style="margin-top: 8px;">Debug mode: OFF</div>
        </div>
      </dees-panel>
    </div>
  </dees-demowrapper>
`;