dees-catalog/ts_web/elements/00group-layout/dees-stepper/dees-stepper.demo.ts

import { html } from '@design.estate/dees-element';
import { DeesStepper, type IStep } from './dees-stepper.js';

const demoSteps: IStep[] = [
  {
    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>
    `,
  },
];

const cloneSteps = (): IStep[] => demoSteps.map((step) => ({ ...step }));

export const stepperDemo = () => html`
  <div style="position: absolute; inset: 0;">
    <div
      style="position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 10;"
    >
      <dees-button
        @click=${async () => {
          await DeesStepper.createAndShow({ steps: cloneSteps() });
        }}
      >Open stepper as overlay</dees-button>
    </div>
    <dees-stepper .steps=${cloneSteps()}></dees-stepper>
  </div>
`;