dees-catalog/ts_web/elements/dees-input-phone.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;
        }
        
        .horizontal-group {
          display: flex;
          align-items: center;
          gap: 16px;
          flex-wrap: wrap;
        }
      `}
    </style>
    
    <div class="demo-container">
      <dees-panel .title=${'Basic Phone Input'} .subtitle=${'Automatic formatting for phone numbers'}>
        <dees-input-phone 
          .label=${'Phone Number'} 
          .description=${'Enter your phone number with country code'}
          .value=${'5551234567'}
        ></dees-input-phone>
        
        <dees-input-phone 
          .label=${'Contact Phone'} 
          .description=${'Required for account verification'}
          .required=${true}
          .placeholder=${'+1 (555) 000-0000'}
        ></dees-input-phone>
      </dees-panel>
      
      <dees-panel .title=${'Horizontal Layout'} .subtitle=${'Phone inputs arranged horizontally'}>
        <div class="horizontal-group">
          <dees-input-phone 
            .label=${'Mobile'} 
            .layoutMode=${'horizontal'}
            .value=${'4155551234'}
          ></dees-input-phone>
          
          <dees-input-phone 
            .label=${'Office'} 
            .layoutMode=${'horizontal'}
            .placeholder=${'+1 (800) 555-0000'}
          ></dees-input-phone>
        </div>
      </dees-panel>
      
      <dees-panel .title=${'International Numbers'} .subtitle=${'Supports formatting for numbers with country codes'}>
        <dees-input-phone 
          .label=${'International Contact'} 
          .description=${'Automatically formats international numbers'}
          .value=${'441234567890'}
        ></dees-input-phone>
        
        <dees-input-phone 
          .label=${'Emergency Contact'} 
          .value=${'911'}
          .disabled=${true}
        ></dees-input-phone>
      </dees-panel>
      
      <dees-panel .title=${'Form Integration'} .subtitle=${'Phone input as part of a contact form'}>
        <dees-form>
          <dees-input-text .label=${'Full Name'} .required=${true}></dees-input-text>
          <dees-input-phone .label=${'Phone Number'} .required=${true}></dees-input-phone>
          <dees-input-text .label=${'Email'} .inputType=${'email'}></dees-input-text>
        </dees-form>
      </dees-panel>
    </div>
  </dees-demowrapper>
`;