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

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

export const stepperDemo = () => html`
  <dees-stepper
    .steps=${[
      {
        title: 'Account Setup',
        content: html`
          <dees-form>
            <dees-input-text key="email" label="Work Email" required></dees-input-text>
            <dees-input-text key="password" label="Create Password" type="password" required></dees-input-text>
            <dees-form-submit>Continue</dees-form-submit>
          </dees-form>
        `,
        validationFunc: async (stepperArg, elementArg) => {
          const deesForm = elementArg.querySelector('dees-form');
          deesForm.addEventListener('formData', () => stepperArg.goNext(), { once: true });
        },
      },
      {
        title: 'Profile Details',
        content: html`
          <dees-form>
            <dees-input-text key="firstName" label="First Name" required></dees-input-text>
            <dees-input-text key="lastName" label="Last Name" required></dees-input-text>
            <dees-form-submit>Continue</dees-form-submit>
          </dees-form>
        `,
        validationFunc: async (stepperArg, elementArg) => {
          const deesForm = elementArg.querySelector('dees-form');
          deesForm.addEventListener('formData', () => stepperArg.goNext(), { once: true });
        },
      },
      {
        title: 'Contact Information',
        content: html`
          <dees-form>
            <dees-input-phone key="phone" label="Mobile Number" required></dees-input-phone>
            <dees-input-text key="company" label="Company"></dees-input-text>
            <dees-form-submit>Continue</dees-form-submit>
          </dees-form>
        `,
        validationFunc: async (stepperArg, elementArg) => {
          const deesForm = elementArg.querySelector('dees-form');
          deesForm.addEventListener('formData', () => stepperArg.goNext(), { once: true });
        },
      },
      {
        title: 'Team Size',
        content: html`
          <dees-form>
            <dees-input-dropdown
              key="teamSize"
              label="How big is your team?"
              .options=${[
                { label: '1-5', value: '1-5' },
                { label: '6-20', value: '6-20' },
                { label: '21-50', value: '21-50' },
                { label: '51+', value: '51+' },
              ]}
              required
            ></dees-input-dropdown>
            <dees-form-submit>Continue</dees-form-submit>
          </dees-form>
        `,
        validationFunc: async (stepperArg, elementArg) => {
          const deesForm = elementArg.querySelector('dees-form');
          deesForm.addEventListener('formData', () => stepperArg.goNext(), { once: true });
        },
      },
      {
        title: 'Goals',
        content: html`
          <dees-form>
            <dees-input-multitoggle
              key="goal"
              label="Main objective"
              .options=${[
                { label: 'Onboarding', value: 'onboarding' },
                { label: 'Analytics', value: 'analytics' },
                { label: 'Automation', value: 'automation' },
              ]}
              required
            ></dees-input-multitoggle>
            <dees-form-submit>Continue</dees-form-submit>
          </dees-form>
        `,
        validationFunc: async (stepperArg, elementArg) => {
          const deesForm = elementArg.querySelector('dees-form');
          deesForm.addEventListener('formData', () => stepperArg.goNext(), { once: true });
        },
      },
      {
        title: 'Brand Preferences',
        content: html`
          <dees-form>
            <dees-input-text key="brandColor" label="Primary brand color"></dees-input-text>
            <dees-input-text key="tone" label="Preferred tone (e.g. friendly, formal)"></dees-input-text>
            <dees-form-submit>Continue</dees-form-submit>
          </dees-form>
        `,
        validationFunc: async (stepperArg, elementArg) => {
          const deesForm = elementArg.querySelector('dees-form');
          deesForm.addEventListener('formData', () => stepperArg.goNext(), { once: true });
        },
      },
      {
        title: 'Integrations',
        content: html`
          <dees-form>
            <dees-input-list
              key="integrations"
              label="Integrations in use"
              placeholder="Add integration"
            ></dees-input-list>
            <dees-form-submit>Continue</dees-form-submit>
          </dees-form>
        `,
        validationFunc: async (stepperArg, elementArg) => {
          const deesForm = elementArg.querySelector('dees-form');
          deesForm.addEventListener('formData', () => stepperArg.goNext(), { once: true });
        },
      },
      {
        title: 'Review & Launch',
        content: html`
          <dees-panel>
            <p>Almost there! Review your selections and launch whenever you're ready.</p>
          </dees-panel>
        `,
      },
    ] as const}
  ></dees-stepper>
`;