feat(dees-stepper): implement stepper demo with multi-step form functionality

ts_web/elements/dees-input-wysiwyg.demo.ts

@@ -1,8 +1,8 @@
 import { html, css, type TemplateResult } from '@design.estate/dees-element';
 import '@design.estate/dees-wcctools/demotools';
 import './dees-panel.js';
-import type { DeesInputWysiwyg } from './dees-input-wysiwyg.js';
+import type { DeesInputWysiwyg } from './dees-input-wysiwyg/dees-input-wysiwyg.js';
-import type { IBlock } from './wysiwyg/wysiwyg.types.js';
+import type { IBlock } from './dees-input-wysiwyg/wysiwyg.types.js';
 
 interface IDemoEditor {
   basic: DeesInputWysiwyg;

ts_web/elements/dees-input-wysiwyg.ts

@@ -1,2 +1,3 @@
-// Re-export the modular component from the wysiwyg directory
+// Re-export the component and related helpers from the dedicated subdirectory
-export { DeesInputWysiwyg } from './wysiwyg/dees-input-wysiwyg.js';
+export { DeesInputWysiwyg } from './dees-input-wysiwyg/dees-input-wysiwyg.js';
+export * from './dees-input-wysiwyg/index.js';

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

@@ -0,0 +1,134 @@
+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>
+`;

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

@@ -14,6 +14,7 @@ import {
 } from '@design.estate/dees-element';
 
 import * as domtools from '@design.estate/dees-domtools';
+import { stepperDemo } from './dees-stepper.demo.js';
 
 export interface IStep {
   title: string;
@@ -31,139 +32,7 @@ declare global {
 
 @customElement('dees-stepper')
 export class DeesStepper extends DeesElement {
-  public static demo = () =>
+  public static demo = 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 IStep[]}
-      ></dees-stepper>
-    `;
 
   @property({
     type: Array,