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

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

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;
        }
        
        .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">
      <dees-panel .title=${'Multi-Option Toggle'} .subtitle=${'Select from multiple options with a sliding indicator'}>
        <dees-input-multitoggle
          .label=${'Display Mode'}
          .description=${'Choose how content is displayed'}
          .options=${['List View', 'Grid View', 'Compact']}
          .selectedOption=${'Grid View'}
        ></dees-input-multitoggle>
        
        <dees-input-multitoggle
          .label=${'T-Shirt Size'}
          .description=${'Select your preferred size'}
          .options=${['XS', 'S', 'M', 'L', 'XL', 'XXL']}
          .selectedOption=${'M'}
        ></dees-input-multitoggle>
      </dees-panel>
      
      <dees-panel .title=${'Boolean Toggle'} .subtitle=${'Simple on/off switches with custom labels'}>
        <dees-input-multitoggle
          .label=${'Notifications'}
          .description=${'Enable or disable push notifications'}
          .type=${'boolean'}
          .selectedOption=${'true'}
        ></dees-input-multitoggle>
        
        <dees-input-multitoggle
          .label=${'Theme Mode'}
          .description=${'Switch between light and dark theme'}
          .type=${'boolean'}
          .booleanTrueName=${'Dark'}
          .booleanFalseName=${'Light'}
          .selectedOption=${'Dark'}
        ></dees-input-multitoggle>
      </dees-panel>
      
      <dees-panel .title=${'Settings Panel'} .subtitle=${'Configuration options in a horizontal layout'}>
        <div class="settings-grid">
          <dees-input-multitoggle
            .label=${'Auto-Save'}
            .layoutMode=${'horizontal'}
            .type=${'boolean'}
            .booleanTrueName=${'Enabled'}
            .booleanFalseName=${'Disabled'}
            .selectedOption=${'Enabled'}
          ></dees-input-multitoggle>
          
          <dees-input-multitoggle
            .label=${'Language'}
            .layoutMode=${'horizontal'}
            .options=${['English', 'German', 'French', 'Spanish']}
            .selectedOption=${'English'}
          ></dees-input-multitoggle>
          
          <dees-input-multitoggle
            .label=${'Quality'}
            .layoutMode=${'horizontal'}
            .options=${['Low', 'Medium', 'High', 'Ultra']}
            .selectedOption=${'High'}
          ></dees-input-multitoggle>
          
          <dees-input-multitoggle
            .label=${'Privacy'}
            .layoutMode=${'horizontal'}
            .type=${'boolean'}
            .booleanTrueName=${'Private'}
            .booleanFalseName=${'Public'}
            .selectedOption=${'Private'}
          ></dees-input-multitoggle>
        </div>
      </dees-panel>
      
      <dees-panel .title=${'States & Form Integration'} .subtitle=${'Disabled states and form usage'}>
        <dees-input-multitoggle
          .label=${'Account Type'}
          .description=${'This setting is locked'}
          .options=${['Free', 'Pro', 'Enterprise']}
          .selectedOption=${'Enterprise'}
          .disabled=${true}
        ></dees-input-multitoggle>
        
        <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>
      </dees-panel>
    </div>
  </dees-demowrapper>
`;