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

ts_web/elements/dees-input-checkbox.ts

@@ -1,14 +1,13 @@
 import {
   customElement,
-  DeesElement,
   type TemplateResult,
   property,
   html,
   css,
   cssManager,
-  type CSSResult,
 } from '@design.estate/dees-element';
 import * as domtools from '@design.estate/dees-domtools';
+import { DeesInputBase } from './dees-input-base.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -17,51 +16,33 @@ declare global {
 }
 
 @customElement('dees-input-checkbox')
-export class DeesInputCheckbox extends DeesElement {
+export class DeesInputCheckbox extends DeesInputBase<DeesInputCheckbox> {
   // STATIC
   public static demo = () => html`<dees-input-checkbox></dees-input-checkbox>`;
 
   // INSTANCE
-  public changeSubject = new domtools.plugins.smartrx.rxjs.Subject();
-
-  @property({
-    type: String,
-    reflect: true,
-  })
-  public key: string;
-
-  @property({
-    type: String,
-  })
-  public label: string = 'Label';
 
   @property({
     type: Boolean,
   })
   public value: boolean = false;
 
-  @property({
-    type: Boolean,
-  })
-  public required: boolean = false;
 
-  @property({
-    type: Boolean
-  })
-  public disabled: boolean = false;
+  constructor() {
+    super();
+    this.labelPosition = 'right'; // Checkboxes default to label on the right
+  }
 
-  public render(): TemplateResult {
-    return html`
-      ${domtools.elementBasic.styles}
-      <style>
+  public static styles = [
+    ...DeesInputBase.baseStyles,
+    cssManager.defaultStyles,
+    css`
         * {
           box-sizing: border-box;
         }
 
         :host {
-          display: block;
           position: relative;
-          margin: 20px 0px;
           cursor: default;
         }
         :host(:hover) {
@@ -69,21 +50,12 @@ export class DeesInputCheckbox extends DeesElement {
         }
 
         .maincontainer {
-          display: grid;
-          grid-template-columns: 25px auto;
           padding: 5px 0px;
-          color: ${this.goBright ? '#333' : '#ccc'};
+          color: ${cssManager.bdTheme('#333', '#ccc')};
         }
 
         .maincontainer:hover {
-          ${this.goBright ? '#000' : '#ccc'};
-        }
-
-        .label {
-          margin-left: 15px;
-          line-height: 25px;
-          font-size: 14px;
-          font-weight: normal;
+          color: ${cssManager.bdTheme('#000', '#fff')};
         }
 
         input:focus {
@@ -94,12 +66,12 @@ export class DeesInputCheckbox extends DeesElement {
         .checkbox {
           transition: all 0.1s;
           box-sizing: border-box;
-          border: 1px solid ${this.goBright ? '#CCC' : '#999'};
+          border: 1px solid ${cssManager.bdTheme('#CCC', '#999')};
           border-radius: 2px;
           height: 24px;
           width: 24px;
           display: inline-block;
-          background: ${this.goBright ? '#fafafa' : '#222'};
+          background: ${cssManager.bdTheme('#fafafa', '#222')};
         }
 
         .checkbox.selected {
@@ -146,19 +118,25 @@ export class DeesInputCheckbox extends DeesElement {
         img {
           padding: 4px;
         }
-      </style>
-      <div class="maincontainer" @click="${this.toggleSelected}">
-        <div class="checkbox ${this.value ? 'selected' : ''} ${this.disabled ? 'disabled' : ''}" tabindex="0">
-          ${this.value
-            ? html`
-                <span class="checkmark">
-                  <div class="checkmark_stem"></div>
-                  <div class="checkmark_kick"></div>
-                </span>
-              `
-            : html``}
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="input-wrapper">
+        <div class="maincontainer" @click="${this.toggleSelected}">
+          <div class="checkbox ${this.value ? 'selected' : ''} ${this.disabled ? 'disabled' : ''}" tabindex="0">
+            ${this.value
+              ? html`
+                  <span class="checkmark">
+                    <div class="checkmark_stem"></div>
+                    <div class="checkmark_kick"></div>
+                  </span>
+                `
+              : html``}
+          </div>
         </div>
-        <div class="label">${this.label}</div>
+        <dees-label .label=${this.label}></dees-label>
       </div>
     `;
   }
@@ -177,6 +155,14 @@ export class DeesInputCheckbox extends DeesElement {
     this.changeSubject.next(this);
   }
 
+  public getValue(): boolean {
+    return this.value;
+  }
+
+  public setValue(value: boolean): void {
+    this.value = value;
+  }
+
   public focus(): void {
     const checkboxDiv = this.shadowRoot.querySelector('.checkbox');
     if (checkboxDiv) {