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;
        }
        
        dees-panel {
          margin-bottom: 24px;
        }
        
        dees-panel:last-child {
          margin-bottom: 0;
        }
      `}
    </style>
    
    <div class="demo-container">
      <dees-panel .heading="Complete Form Example" .description="A comprehensive form with various input types, validation, and form submission handling">
        <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>
      </dees-panel>
      
      <dees-panel .heading="Horizontal Form Layout" .description="Compact form with inputs arranged horizontally - perfect for filters and quick forms">
        <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>
      </dees-panel>
      
      <dees-panel .heading="Advanced Form Features" .description="Form with specialized input types and complex validation">
        <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>
      </dees-panel>
    </div>
  </dees-demowrapper>
`;