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

ts_web/elements/dees-input-text.ts

@@ -1,16 +1,14 @@
 import * as colors from './00colors.js';
+import { DeesInputBase } from './dees-input-base.js';
 
 import {
   customElement,
-  DeesElement,
   type TemplateResult,
   property,
   html,
   cssManager,
   css,
-  type CSSResult,
 } from '@design.estate/dees-element';
-import * as domtools from '@design.estate/dees-domtools';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -19,47 +17,19 @@ declare global {
 }
 
 @customElement('dees-input-text')
-export class DeesInputText extends DeesElement {
+export class DeesInputText extends DeesInputBase {
   public static demo = () => html`
     <dees-input-text .label=${'this is a label'} .value=${'test'}></dees-input-text>
     <dees-input-text .isPasswordBool=${true}></dees-input-text>
   `;
 
   // INSTANCE
-  public changeSubject = new domtools.plugins.smartrx.rxjs.Subject<DeesInputText>();
-
-  @property({
-    type: String,
-  })
-  public label: string;
-
-  @property({
-    type: String,
-  })
-  public description: string;
-
-  @property({
-    type: String,
-    reflect: true,
-  })
-  public key: string;
-
   @property({
     type: String,
     reflect: true,
   })
   public value: string = '';
 
-  @property({
-    type: Boolean,
-  })
-  public required: boolean = false;
-
-  @property({
-    type: Boolean,
-  })
-  public disabled: boolean = false;
-
   @property({
     type: Boolean,
     reflect: true,
@@ -87,6 +57,7 @@ export class DeesInputText extends DeesElement {
   validationFunction: (value: string) => boolean;
 
   public static styles = [
+    ...DeesInputBase.baseStyles,
     cssManager.defaultStyles,
     css`
       * {
@@ -95,9 +66,6 @@ export class DeesInputText extends DeesElement {
 
       :host {
         position: relative;
-        display: grid;
-        margin: 8px 0px;
-        margin-bottom: 24px;
         z-index: auto;
       }
 
@@ -193,33 +161,32 @@ export class DeesInputText extends DeesElement {
           }
         `}
       </style>
-      <div class="maincontainer">
+      <div class="input-wrapper">
         <dees-label .label=${this.label} .description=${this.description}></dees-label>
-        <input
-          type="${this.isPasswordBool && !this.showPasswordBool ? 'password' : 'text'}"
-          .value=${this.value}
-          @input="${this.updateValue}"
-          .disabled=${this.disabled}
-        />
-        <div class="validationContainer">
-          ${this.validationText}
+        <div class="maincontainer">
+          <input
+            type="${this.isPasswordBool && !this.showPasswordBool ? 'password' : 'text'}"
+            .value=${this.value}
+            @input="${this.updateValue}"
+            .disabled=${this.disabled}
+          />
+          <div class="validationContainer">
+            ${this.validationText}
+          </div>
+          ${this.isPasswordBool
+            ? html`
+                <div class="showPassword" @click=${this.togglePasswordView}>
+                  <dees-icon .iconFA=${this.showPasswordBool ? 'eye' : 'eyeSlash'}></dees-icon>
+                </div>
+              `
+            : html``}
         </div>
-        ${this.isPasswordBool
-          ? html`
-              <div class="showPassword" @click=${this.togglePasswordView}>
-                <dees-icon .iconFA=${this.showPasswordBool ? 'eye' : 'eyeSlash'}></dees-icon>
-              </div>
-            `
-          : html``}
       </div>
     `;
   }
 
   firstUpdated() {
-    const input = this.shadowRoot.querySelector('input');
-    input.addEventListener('input', (eventArg: InputEvent) => {
-      
-    });
+    // Input event handling is already done in updateValue method
   }
 
   public async updateValue(eventArg: Event) {
@@ -228,16 +195,15 @@ export class DeesInputText extends DeesElement {
     this.changeSubject.next(this);
   }
 
-  public async freeze() {
-    this.disabled = true;
+  public getValue(): string {
+    return this.value;
   }
 
-  public async unfreeze() {
-    this.disabled = false;
+  public setValue(value: string): void {
+    this.value = value;
   }
 
   public async togglePasswordView() {
-    const domtools = await this.domtoolsPromise;
     this.showPasswordBool = !this.showPasswordBool;
     console.log(`this.showPasswordBool is: ${this.showPasswordBool}`);
   }