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

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

export const demoFunc = () => html`
  <dees-demowrapper>
    <style>
      ${css`
        .demo-container {
          display: flex;
          flex-direction: column;
          gap: 32px;
          padding: 48px;
          background: ${cssManager.bdTheme('#f8f9fa', '#0a0a0a')};
          min-height: 100vh;
        }
        
        .section {
          background: ${cssManager.bdTheme('#ffffff', '#18181b')};
          border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
          border-radius: 8px;
          padding: 24px;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        
        .section-title {
          font-size: 18px;
          font-weight: 600;
          margin-bottom: 8px;
          color: ${cssManager.bdTheme('#09090b', '#fafafa')};
        }
        
        .section-description {
          font-size: 14px;
          color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
          margin-bottom: 24px;
        }
        
        .settings-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 24px;
        }
        
        @media (max-width: 768px) {
          .settings-grid {
            grid-template-columns: 1fr;
          }
        }
      `}
    </style>
    
    <div class="demo-container">
      <div class="section">
        <div class="section-title">Multi-Option Toggle</div>
        <div class="section-description">Select from multiple options with a smooth sliding indicator animation.</div>
        
        <dees-input-multitoggle
          .label=${'Display Mode'}
          .description=${'Choose how content is displayed'}
          .options=${['List View', 'Grid View', 'Compact']}
          .selectedOption=${'Grid View'}
        ></dees-input-multitoggle>
        
        <br><br>
        
        <dees-input-multitoggle
          .label=${'T-Shirt Size'}
          .description=${'Select your preferred size'}
          .options=${['XS', 'S', 'M', 'L', 'XL', 'XXL']}
          .selectedOption=${'M'}
        ></dees-input-multitoggle>
      </div>
      
      <div class="section">
        <div class="section-title">Boolean Toggle</div>
        <div class="section-description">Simple on/off switches with customizable labels for clearer context.</div>
        
        <dees-input-multitoggle
          .label=${'Notifications'}
          .description=${'Enable or disable push notifications'}
          .type=${'boolean'}
          .selectedOption=${'true'}
        ></dees-input-multitoggle>
        
        <br><br>
        
        <dees-input-multitoggle
          .label=${'Theme Mode'}
          .description=${'Switch between light and dark theme'}
          .type=${'boolean'}
          .booleanTrueName=${'Dark'}
          .booleanFalseName=${'Light'}
          .selectedOption=${'Dark'}
        ></dees-input-multitoggle>
      </div>
      
      <div class="section">
        <div class="section-title">Settings Grid</div>
        <div class="section-description">Configuration options arranged in a responsive grid layout.</div>
        
        <div class="settings-grid">
          <dees-input-multitoggle
            .label=${'Auto-Save'}
            .type=${'boolean'}
            .booleanTrueName=${'Enabled'}
            .booleanFalseName=${'Disabled'}
            .selectedOption=${'Enabled'}
          ></dees-input-multitoggle>
          
          <dees-input-multitoggle
            .label=${'Language'}
            .options=${['English', 'German', 'French', 'Spanish']}
            .selectedOption=${'English'}
          ></dees-input-multitoggle>
          
          <dees-input-multitoggle
            .label=${'Quality'}
            .options=${['Low', 'Medium', 'High', 'Ultra']}
            .selectedOption=${'High'}
          ></dees-input-multitoggle>
          
          <dees-input-multitoggle
            .label=${'Privacy'}
            .type=${'boolean'}
            .booleanTrueName=${'Private'}
            .booleanFalseName=${'Public'}
            .selectedOption=${'Private'}
          ></dees-input-multitoggle>
        </div>
      </div>
      
      <div class="section">
        <div class="section-title">States & Form Integration</div>
        <div class="section-description">Examples of disabled states and integration within forms.</div>
        
        <dees-input-multitoggle
          .label=${'Account Type'}
          .description=${'This setting is locked'}
          .options=${['Free', 'Pro', 'Enterprise']}
          .selectedOption=${'Enterprise'}
          .disabled=${true}
        ></dees-input-multitoggle>
        
        <br><br>
        
        <dees-form>
          <dees-input-text .label=${'Project Name'} .required=${true}></dees-input-text>
          <dees-input-multitoggle
            .label=${'Visibility'}
            .type=${'boolean'}
            .booleanTrueName=${'Public'}
            .booleanFalseName=${'Private'}
            .selectedOption=${'Private'}
          ></dees-input-multitoggle>
          <dees-input-multitoggle
            .label=${'License'}
            .options=${['MIT', 'Apache 2.0', 'GPL v3', 'Proprietary']}
            .selectedOption=${'MIT'}
          ></dees-input-multitoggle>
        </dees-form>
      </div>
    </div>
  </dees-demowrapper>
`;