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

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

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;
        }
        
        .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;
        }
        
        .grid-layout {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 16px;
        }
        
        @media (max-width: 768px) {
          .grid-layout {
            grid-template-columns: 1fr;
          }
        }
      `}
    </style>
    
    <div class="demo-container">
      <div class="demo-section">
        <h3>Basic Text Inputs</h3>
        <p>Standard text inputs with labels and descriptions</p>
        
        <dees-input-text 
          .label=${'Username'} 
          .value=${'johndoe'}
          .key=${'username'}
        ></dees-input-text>
        
        <dees-input-text 
          .label=${'Email Address'} 
          .value=${'john@example.com'} 
          .description=${'We will never share your email with anyone'}
          .key=${'email'}
        ></dees-input-text>
        
        <dees-input-text 
          .label=${'Password'} 
          .isPasswordBool=${true} 
          .value=${'secret123'}
          .key=${'password'}
        ></dees-input-text>
      </div>
      
      <div class="demo-section">
        <h3>Horizontal Layout</h3>
        <p>Multiple inputs arranged horizontally for compact forms</p>
        
        <div class="horizontal-group">
          <dees-input-text 
            .label=${'First Name'} 
            .value=${'John'} 
            .layoutMode=${'horizontal'}
            .key=${'firstName'}
          ></dees-input-text>
          
          <dees-input-text 
            .label=${'Last Name'} 
            .value=${'Doe'} 
            .layoutMode=${'horizontal'}
            .key=${'lastName'}
          ></dees-input-text>
          
          <dees-input-text 
            .label=${'Age'} 
            .value=${'28'} 
            .layoutMode=${'horizontal'}
            .key=${'age'}
          ></dees-input-text>
        </div>
      </div>
      
      <div class="demo-section">
        <h3>Label Positions</h3>
        <p>Different label positioning options for various layouts</p>
        
        <dees-input-text 
          .label=${'Label on Top (Default)'} 
          .value=${'Standard layout'} 
          .labelPosition=${'top'}
        ></dees-input-text>
        
        <dees-input-text 
          .label=${'Label on Left'} 
          .value=${'Inline label'} 
          .labelPosition=${'left'}
        ></dees-input-text>
        
        <div class="grid-layout">
          <dees-input-text 
            .label=${'City'} 
            .value=${'New York'} 
            .labelPosition=${'left'}
          ></dees-input-text>
          
          <dees-input-text 
            .label=${'ZIP Code'} 
            .value=${'10001'} 
            .labelPosition=${'left'}
          ></dees-input-text>
        </div>
      </div>
      
      <div class="demo-section">
        <h3>Validation & States</h3>
        <p>Different validation states and input configurations</p>
        
        <dees-input-text 
          .label=${'Required Field'} 
          .required=${true}
          .key=${'requiredField'}
        ></dees-input-text>
        
        <dees-input-text 
          .label=${'Disabled Field'} 
          .value=${'Cannot edit this'} 
          .disabled=${true}
        ></dees-input-text>
        
        <dees-input-text 
          .label=${'Field with Error'} 
          .value=${'invalid@'} 
          .validationText=${'Please enter a valid email address'}
          .validationState=${'invalid'}
        ></dees-input-text>
      </div>
      
      <div class="demo-section">
        <h3>Advanced Features</h3>
        <p>Password visibility toggle and other advanced features</p>
        
        <dees-input-text 
          .label=${'Password with Toggle'} 
          .isPasswordBool=${true}
          .value=${'mySecurePassword123'}
          .description=${'Click the eye icon to show/hide password'}
        ></dees-input-text>
        
        <dees-input-text 
          .label=${'API Key'} 
          .isPasswordBool=${true}
          .value=${'sk-1234567890abcdef'}
          .description=${'Keep this key secure and never share it'}
        ></dees-input-text>
      </div>
    </div>
  </dees-demowrapper>
`;