feat: Implement unified input component architecture with standardized margins and layout modes

ts_web/elements/dees-form.ts

@@ -4,6 +4,7 @@ import {
   type TemplateResult,
   DeesElement,
   type CSSResult,
+  property,
 } from '@design.estate/dees-element';
 import * as domtools from '@design.estate/dees-domtools';
 
@@ -11,6 +12,7 @@ import { DeesInputCheckbox } from './dees-input-checkbox.js';
 import { DeesInputText } from './dees-input-text.js';
 import { DeesInputQuantitySelector } from './dees-input-quantityselector.js';
 import { DeesInputRadio } from './dees-input-radio.js';
+import { DeesInputDropdown } from './dees-input-dropdown.js';
 import { DeesFormSubmit } from './dees-form-submit.js';
 import { DeesTable } from './dees-table.js';
 import { demoFunc } from './dees-form.demo.js';
@@ -19,6 +21,7 @@ import { DeesInputIban } from './dees-input-iban.js';
 // Unified set for form input types
 const FORM_INPUT_TYPES = [
   DeesInputCheckbox,
+  DeesInputDropdown,
   DeesInputIban,
   DeesInputText,
   DeesInputQuantitySelector,
@@ -28,6 +31,7 @@ const FORM_INPUT_TYPES = [
 
 export type TFormInputElement =
   | DeesInputCheckbox
+  | DeesInputDropdown
   | DeesInputIban
   | DeesInputText
   | DeesInputQuantitySelector
@@ -48,6 +52,13 @@ export class DeesForm extends DeesElement {
   public changeSubject = new domtools.plugins.smartrx.rxjs.Subject();
   public readyDeferred = domtools.plugins.smartpromise.defer();
 
+  /**
+   * Controls the layout mode of child input components
+   * When true, sets all child inputs to horizontal layout
+   */
+  @property({ type: Boolean, reflect: true, attribute: 'horizontal-layout' })
+  public horizontalLayout: boolean = false;
+
   public render(): TemplateResult {
     return html`
       <style>
@@ -62,6 +73,7 @@ export class DeesForm extends DeesElement {
   public async firstUpdated() {
     const formChildren = this.getFormElements();
     this.updateRequiredStatus();
+    this.updateChildrenLayoutMode();
 
     for (const child of formChildren) {
       child.changeSubject.subscribe(async () => {
@@ -107,7 +119,7 @@ export class DeesForm extends DeesElement {
    */
   public async collectFormData() {
     const children = this.getFormElements();
-    const valueObject: { [key: string]: string | number | boolean | any[] } = {};
+    const valueObject: { [key: string]: string | number | boolean | any[] | { option: string; key: string; payload?: any } } = {};
     for (const child of children) {
       if (!child.key) {
         console.log(`form element with label "${child.label}" has no key. skipping.`);
@@ -202,4 +214,28 @@ export class DeesForm extends DeesElement {
       }
     });
   }
+
+  /**
+   * Updates the layout mode of child input components based on form's horizontalLayout property
+   */
+  private updateChildrenLayoutMode() {
+    const formChildren = this.getFormElements();
+    for (const child of formChildren) {
+      if ('layoutMode' in child) {
+        // The child's auto mode will detect this form's horizontal-layout attribute
+        (child as any).layoutMode = 'auto';
+      }
+    }
+  }
+
+  /**
+   * Called when properties change
+   */
+  updated(changedProperties: Map<string, any>) {
+    super.updated(changedProperties);
+    
+    if (changedProperties.has('horizontalLayout')) {
+      this.updateChildrenLayoutMode();
+    }
+  }
 }