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

import { html, css } from '@design.estate/dees-element';
import '@design.estate/dees-wcctools/demotools';
import './dees-panel.js';

export const demoFunc = () => html`
  <dees-demowrapper>
    <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;
        }
        
        .demo-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: 24px;
        }
        
        .result-display {
          margin-top: 16px;
          padding: 12px;
          background: rgba(0, 105, 242, 0.1);
          border-radius: 4px;
          font-family: monospace;
          font-size: 14px;
        }
      `}
    </style>
    
    <div class="demo-container">
      <dees-panel .title=${'1. Basic Radio Groups'} .subtitle=${'Simple string options for common use cases'}>
        <div class="demo-grid">
          <dees-input-radiogroup
            .label=${'Subscription Plan'}
            .options=${['Basic - $9/month', 'Pro - $29/month', 'Enterprise - $99/month']}
            .selectedOption=${'Pro - $29/month'}
            .description=${'Choose your subscription tier'}
          ></dees-input-radiogroup>
          
          <dees-input-radiogroup
            .label=${'Priority Level'}
            .options=${['High', 'Medium', 'Low']}
            .selectedOption=${'Medium'}
            .required=${true}
          ></dees-input-radiogroup>
        </div>
      </dees-panel>
      
      <dees-panel .title=${'2. Horizontal Layout'} .subtitle=${'Radio groups with horizontal arrangement'}>
        <dees-input-radiogroup
          .label=${'Do you agree with the terms?'}
          .options=${['Yes', 'No', 'Maybe']}
          .direction=${'horizontal'}
          .selectedOption=${'Yes'}
        ></dees-input-radiogroup>
        
        <dees-input-radiogroup
          .label=${'Experience Level'}
          .options=${['Beginner', 'Intermediate', 'Expert']}
          .direction=${'horizontal'}
          .selectedOption=${'Intermediate'}
          .description=${'Select your experience level with web development'}
        ></dees-input-radiogroup>
      </dees-panel>
      
      <dees-panel .title=${'3. Advanced Options'} .subtitle=${'Using object format with keys and payloads'}>
        <dees-input-radiogroup
          id="advanced-radio"
          .label=${'Select Region'}
          .options=${[
            { option: 'United States (US East)', key: 'us-east', payload: { region: 'us-east-1', latency: 20 } },
            { option: 'Europe (Frankfurt)', key: 'eu-central', payload: { region: 'eu-central-1', latency: 50 } },
            { option: 'Asia Pacific (Singapore)', key: 'ap-southeast', payload: { region: 'ap-southeast-1', latency: 120 } }
          ]}
          .selectedOption=${'eu-central'}
          .description=${'Choose the closest region for optimal performance'}
          @change=${(e: CustomEvent) => {
            const display = document.querySelector('#region-result');
            if (display) {
              display.textContent = 'Selected: ' + JSON.stringify(e.detail.value, null, 2);
            }
          }}
        ></dees-input-radiogroup>
        <div id="region-result" class="result-display">Selected: { "region": "eu-central-1", "latency": 50 }</div>
      </dees-panel>
      
      <dees-panel .title=${'4. Survey Example'} .subtitle=${'Multiple radio groups for surveys and forms'}>
        <div class="demo-grid">
          <dees-input-radiogroup
            .label=${'How satisfied are you?'}
            .options=${['Very Satisfied', 'Satisfied', 'Neutral', 'Dissatisfied', 'Very Dissatisfied']}
            .selectedOption=${'Satisfied'}
          ></dees-input-radiogroup>
          
          <dees-input-radiogroup
            .label=${'Would you recommend us?'}
            .options=${['Definitely', 'Probably', 'Not Sure', 'Probably Not', 'Definitely Not']}
            .selectedOption=${'Probably'}
          ></dees-input-radiogroup>
        </div>
      </dees-panel>
      
      <dees-panel .title=${'5. States & Validation'} .subtitle=${'Different states and validation examples'}>
        <div class="demo-grid">
          <dees-input-radiogroup
            .label=${'Required Selection'}
            .options=${['Option A', 'Option B', 'Option C']}
            .required=${true}
            .description=${'This field is required'}
          ></dees-input-radiogroup>
          
          <dees-input-radiogroup
            .label=${'Disabled State'}
            .options=${['Disabled Option 1', 'Disabled Option 2', 'Disabled Option 3']}
            .selectedOption=${'Disabled Option 2'}
            .disabled=${true}
          ></dees-input-radiogroup>
        </div>
      </dees-panel>
      
      <dees-panel .title=${'6. Settings Example'} .subtitle=${'Common patterns in application settings'}>
        <dees-input-radiogroup
          .label=${'Theme Preference'}
          .options=${[
            { option: 'Light Theme', key: 'light', payload: 'light' },
            { option: 'Dark Theme', key: 'dark', payload: 'dark' },
            { option: 'System Default', key: 'system', payload: 'auto' }
          ]}
          .selectedOption=${'dark'}
          .description=${'Choose how the application should appear'}
        ></dees-input-radiogroup>
        
        <dees-input-radiogroup
          .label=${'Notification Frequency'}
          .options=${['All Notifications', 'Important Only', 'None']}
          .selectedOption=${'Important Only'}
          .description=${'Control how often you receive notifications'}
        ></dees-input-radiogroup>
        
        <dees-input-radiogroup
          .label=${'Language'}
          .options=${['English', 'German', 'French', 'Spanish', 'Japanese']}
          .selectedOption=${'English'}
          .direction=${'horizontal'}
        ></dees-input-radiogroup>
      </dees-panel>
      
      <dees-panel .title=${'7. Form Integration'} .subtitle=${'Works seamlessly with dees-form'}>
        <dees-form>
          <dees-input-text
            .label=${'Product Name'}
            .required=${true}
            .key=${'productName'}
          ></dees-input-text>
          
          <dees-input-radiogroup
            .label=${'Product Category'}
            .options=${['Electronics', 'Clothing', 'Books', 'Home & Garden', 'Sports']}
            .required=${true}
            .key=${'category'}
          ></dees-input-radiogroup>
          
          <dees-input-radiogroup
            .label=${'Condition'}
            .options=${['New', 'Like New', 'Good', 'Fair', 'Poor']}
            .direction=${'horizontal'}
            .key=${'condition'}
            .selectedOption=${'New'}
          ></dees-input-radiogroup>
          
          <dees-input-radiogroup
            .label=${'Shipping Speed'}
            .options=${[
              { option: 'Standard (5-7 days)', key: 'standard', payload: { days: 7, price: 0 } },
              { option: 'Express (2-3 days)', key: 'express', payload: { days: 3, price: 10 } },
              { option: 'Overnight', key: 'overnight', payload: { days: 1, price: 25 } }
            ]}
            .selectedOption=${'standard'}
            .key=${'shipping'}
          ></dees-input-radiogroup>
          
          <dees-form-submit .text=${'Submit Product'}></dees-form-submit>
        </dees-form>
      </dees-panel>
    </div>
  </dees-demowrapper>
`;