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

ts_web/elements/dees-input-radio.ts

@@ -1,5 +1,6 @@
-import {customElement, DeesElement, type TemplateResult, property, html, type CSSResult,} from '@design.estate/dees-element';
+import {customElement, type TemplateResult, property, html, css, cssManager} from '@design.estate/dees-element';
 import * as domtools from '@design.estate/dees-domtools';
+import { DeesInputBase } from './dees-input-base.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -8,55 +9,34 @@ declare global {
 }
 
 @customElement('dees-input-radio')
-export class DeesInputRadio extends DeesElement {
+export class DeesInputRadio extends DeesInputBase<DeesInputRadio> {
   public static demo = () => html`<dees-input-radio></dees-input-radio>`;
 
   // INSTANCE
-  public changeSubject = new domtools.plugins.smartrx.rxjs.Subject();
-
-  @property({
-    type: String,
-    reflect: true,
-  })
-  public key: string;
-
-  @property()
-  public label: string = 'Label';
 
   @property()
   public value: boolean = false;
 
-  @property({
-    type: Boolean,
-  })
-  public required: boolean = false;
-
-  @property({
-    type: Boolean
-  })
-  public disabled: boolean = false;
 
   constructor() {
     super();
+    this.labelPosition = 'right'; // Radio buttons default to label on the right
   }
 
-  public render(): TemplateResult {
-    return html `
-      <style>
+  public static styles = [
+    ...DeesInputBase.baseStyles,
+    cssManager.defaultStyles,
+    css`
         * {
           box-sizing: border-box;
         }
 
         :host {
-          display: block;
           position: relative;
-          margin: 20px 0px;
         }
 
         .maincontainer {
           transition: all 0.3s;
-          display: grid;
-          grid-template-columns: 25px auto;
           padding: 5px 0px;
           color: #ccc;
         }
@@ -65,14 +45,6 @@ export class DeesInputRadio extends DeesElement {
           color: #fff;
         }
 
-        .label {
-          margin-left: 15px;
-          line-height: 25px;
-          font-size: 14px;
-          font-weight: normal;
-
-        }
-
         input:focus {
           outline: none;
           border-bottom: 1px solid #e4002b;
@@ -106,12 +78,18 @@ export class DeesInputRadio extends DeesElement {
           height: 10px;
           border-radius: 10px;
         }
-      </style>
-      <div class="maincontainer" @click="${this.toggleSelected}">
-        <div class="checkbox ${this.value ? 'selected' : ''}">
-        ${this.value ? html`<div class="innercircle"></div>`: html``}
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="input-wrapper">
+        <div class="maincontainer" @click="${this.toggleSelected}">
+          <div class="checkbox ${this.value ? 'selected' : ''}">
+          ${this.value ? html`<div class="innercircle"></div>`: html``}
+          </div>
         </div>
-        <div class="label">${this.label}</div>
+        <dees-label .label=${this.label}></dees-label>
       </div>
     `;
   }
@@ -124,4 +102,12 @@ export class DeesInputRadio extends DeesElement {
     }));
     this.changeSubject.next(this);
   }
+
+  public getValue(): boolean {
+    return this.value;
+  }
+
+  public setValue(value: boolean): void {
+    this.value = value;
+  }
 }