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

ts_web/elements/dees-input-dropdown.ts

@@ -1,17 +1,16 @@
 import {
   customElement,
-  DeesElement,
   type TemplateResult,
   property,
   state,
   html,
   css,
   cssManager,
-  type CSSResult,
 } from '@design.estate/dees-element';
 import * as domtools from '@design.estate/dees-domtools';
 import { demoFunc } from './dees-input-dropdown.demo.js';
 import { DeesWindowLayer } from './dees-windowlayer.js';
+import { DeesInputBase } from './dees-input-base.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -20,20 +19,10 @@ declare global {
 }
 
 @customElement('dees-input-dropdown')
-export class DeesInputDropdown extends DeesElement {
+export class DeesInputDropdown extends DeesInputBase<DeesInputDropdown> {
   public static demo = demoFunc;
 
   // INSTANCE
-  public changeSubject = new domtools.plugins.smartrx.rxjs.Subject();
-
-  @property({
-    type: String,
-    reflect: true,
-  })
-  public label: string = 'Label';
-
-  @property()
-  public key: string;
 
   @property()
   public options: { option: string; key: string; payload?: any }[] = [];
@@ -41,20 +30,21 @@ export class DeesInputDropdown extends DeesElement {
   @property()
   public selectedOption: { option: string; key: string; payload?: any } = null;
 
-  @property({
-    type: Boolean,
-  })
-  public required: boolean = false;
+  // Add value property for form compatibility
+  public get value() {
+    return this.selectedOption;
+  }
+
+  public set value(val: { option: string; key: string; payload?: any }) {
+    this.selectedOption = val;
+  }
+
 
   @property({
     type: Boolean,
   })
   public enableSearch: boolean = true;
 
-  @property({
-    type: Boolean,
-  })
-  public disabled: boolean = false;
 
   @state()
   public opensToTop: boolean = false;
@@ -69,6 +59,7 @@ export class DeesInputDropdown extends DeesElement {
   public isOpened = false;
 
   public static styles = [
+    ...DeesInputBase.baseStyles,
     cssManager.defaultStyles,
     css`
       * {
@@ -78,19 +69,13 @@ export class DeesInputDropdown extends DeesElement {
       :host {
         font-family: Roboto;
         position: relative;
-        display: block;
         color: ${cssManager.bdTheme('#222', '#fff')};
-        margin-bottom: 24px;
       }
 
       .maincontainer {
         display: block;
       }
 
-      .label {
-        font-size: 14px;
-        margin-bottom: 8px;
-      }
 
       .selectedBox {
         user-select: none;
@@ -205,9 +190,10 @@ export class DeesInputDropdown extends DeesElement {
 
   public render(): TemplateResult {
     return html`
-      <div class="maincontainer" @keydown="${this.isOpened ? this.handleKeyDown : undefined}">
-        ${this.label ? html`<div class="label">${this.label}</div>` : html``}
-        <div class="selectionBox">
+      <div class="input-wrapper">
+        <dees-label .label=${this.label}></dees-label>
+        <div class="maincontainer" @keydown="${this.isOpened ? this.handleKeyDown : undefined}">
+          <div class="selectionBox">
           ${this.enableSearch && !this.opensToTop
             ? html`
                 <div class="search top">
@@ -247,6 +233,7 @@ export class DeesInputDropdown extends DeesElement {
           }}"
         >
           ${this.selectedOption?.option || 'Select...'} 
+          </div>
         </div>
       </div>
     `;
@@ -372,4 +359,12 @@ export class DeesInputDropdown extends DeesElement {
       event.preventDefault();
     }
   }
+
+  public getValue(): { option: string; key: string; payload?: any } {
+    return this.selectedOption;
+  }
+
+  public setValue(value: { option: string; key: string; payload?: any }): void {
+    this.selectedOption = value;
+  }
 }