dees-catalog/ts_web/elements/dees-form.demo.ts

import { html, css, domtools, cssManager } from '@design.estate/dees-element';
import type { DeesForm } from './dees-form.js';
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;
          }
        }
        
        .form-container {
          background: #fff;
          border: 1px solid #e0e0e0;
          border-radius: 8px;
          padding: 24px;
          box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        @media (prefers-color-scheme: dark) {
          .form-container {
            background: #222;
            border-color: #333;
          }
        }
        
        .horizontal-form {
          display: flex;
          align-items: flex-start;
          gap: 16px;
          flex-wrap: wrap;
        }
      `}
    </style>
    
    <div class="demo-container">
      <div class="demo-section">
        <h3>Complete Form Example</h3>
        <p>A comprehensive form with various input types, validation, and form submission handling</p>
        
        <div class="form-container">
          <dees-form
            @formData=${async (eventArg) => {
              const form: DeesForm = eventArg.currentTarget;
              form.setStatus('pending', 'Processing...');
              await domtools.plugins.smartdelay.delayFor(2000);
              form.setStatus('success', 'Form submitted successfully!');
              await domtools.plugins.smartdelay.delayFor(2000);
              form.reset();
            }}
          >
            <dees-input-text 
              .required=${true} 
              key="firstName" 
              label="First Name"
              .description=${'Your given name'}
            ></dees-input-text>
            
            <dees-input-text 
              .required=${true} 
              key="lastName" 
              label="Last Name"
            ></dees-input-text>
            
            <dees-input-text 
              .required=${true} 
              key="email" 
              label="Email Address"
              .description=${'We will use this to contact you'}
            ></dees-input-text>
            
            <dees-input-dropdown
              .required=${true}
              key="country"
              .label=${'Country'}
              .options=${[
                { option: 'United States', key: 'us' },
                { option: 'Canada', key: 'ca' },
                { option: 'Germany', key: 'de' },
                { option: 'France', key: 'fr' },
                { option: 'United Kingdom', key: 'uk' },
              ]}
            ></dees-input-dropdown>
            
            <dees-input-text
              .required=${true}
              key="password"
              label="Password"
              isPasswordBool
              .description=${'Minimum 8 characters'}
            ></dees-input-text>
            
            <dees-input-checkbox
              .required=${true}
              key="terms"
              label="I agree to the Terms and Conditions"
            ></dees-input-checkbox>
            
            <dees-input-checkbox
              key="newsletter"
              label="Send me promotional emails"
              .value=${true}
            ></dees-input-checkbox>
            
            <dees-form-submit>Create Account</dees-form-submit>
          </dees-form>
        </div>
      </div>
      
      <div class="demo-section">
        <h3>Horizontal Form Layout</h3>
        <p>Compact form with inputs arranged horizontally - perfect for filters and quick forms</p>
        
        <div class="form-container">
          <dees-form horizontal-layout>
            <dees-input-text 
              key="search" 
              label="Search"
            ></dees-input-text>
            
            <dees-input-dropdown
              key="category"
              .label=${'Category'}
              .enableSearch=${false}
              .options=${[
                { option: 'All', key: 'all' },
                { option: 'Products', key: 'products' },
                { option: 'Services', key: 'services' },
                { option: 'Support', key: 'support' },
              ]}
            ></dees-input-dropdown>
            
            <dees-input-dropdown
              key="sort"
              .label=${'Sort By'}
              .enableSearch=${false}
              .options=${[
                { option: 'Newest', key: 'newest' },
                { option: 'Popular', key: 'popular' },
                { option: 'Price: Low to High', key: 'price_asc' },
                { option: 'Price: High to Low', key: 'price_desc' },
              ]}
            ></dees-input-dropdown>
            
            <dees-input-checkbox
              key="inStock"
              label="In Stock Only"
              .value=${true}
            ></dees-input-checkbox>
          </dees-form>
        </div>
      </div>
      
      <div class="demo-section">
        <h3>Advanced Form Features</h3>
        <p>Form with specialized input types and complex validation</p>
        
        <div class="form-container">
          <dees-form
            @formData=${async (eventArg) => {
              const form: DeesForm = eventArg.currentTarget;
              const data = eventArg.detail.data;
              console.log('Form data:', data);
              form.setStatus('success', 'Data logged to console!');
            }}
          >
            <dees-input-iban 
              key="iban"
              label="IBAN"
              .required=${true}
            ></dees-input-iban>
            
            <dees-input-phone
              key="phone"
              label="Phone Number"
              .required=${true}
            ></dees-input-phone>
            
            <dees-input-multitoggle
              key="preferences"
              .label=${'Notification Preferences'}
              .options=${['Email', 'SMS', 'Push', 'In-App']}
              .selectedOption=${'Email'}
            ></dees-input-multitoggle>
            
            <dees-input-multiselect
              key="interests"
              .label=${'Areas of Interest'}
              .options=${[
                { option: 'Technology', key: 'tech' },
                { option: 'Design', key: 'design' },
                { option: 'Business', key: 'business' },
                { option: 'Marketing', key: 'marketing' },
                { option: 'Sales', key: 'sales' },
              ]}
            ></dees-input-multiselect>
            
            <dees-input-fileupload
              key="documents"
              .label=${'Upload Documents'}
              .description=${'PDF, DOC, or DOCX files up to 10MB'}
            ></dees-input-fileupload>
            
            <dees-form-submit>Submit Application</dees-form-submit>
          </dees-form>
        </div>
      </div>
    </div>
  </dees-demowrapper>
`;