feat: Enhance demo components with new input types and layout options

- Added dropdown and radio input components to the demo for application settings.
- Introduced horizontal layout for display preferences and notification settings.
- Implemented checkbox demo with programmatic selection and clear functionality.
- Created file upload and quantity selector demos with various states and configurations.
- Added comprehensive radio input demo showcasing group behavior and various states.
- Developed text input demo with validation states and advanced features like password visibility.
- Introduced a new panel component for better content organization in demos.

ts_web/elements/dees-input-phone.ts

@@ -1,14 +1,14 @@
 import {
   customElement,
-  DeesElement,
   type TemplateResult,
   property,
+  state,
   html,
   css,
-  unsafeCSS,
   cssManager,
-  type CSSResult,
 } from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+import { DeesInputBase } from './dees-input-base.js';
 import { demoFunc } from './dees-input-phone.demo.js';
 
 declare global {
@@ -18,12 +18,116 @@ declare global {
 }
 
 @customElement('dees-input-phone')
-export class DeesInputPhone extends DeesElement {
+export class DeesInputPhone extends DeesInputBase<DeesInputPhone> {
   // STATIC
   public static demo = demoFunc;
 
   // INSTANCE
-  public render() {
-    return html`<div>Phone Input</div>`;
+  @state()
+  protected formattedPhone: string = '';
+
+  @property({ type: String })
+  public value: string = '';
+
+  @property({ type: String })
+  public placeholder: string = '+1 (555) 123-4567';
+
+  public static styles = [
+    ...DeesInputBase.baseStyles,
+    cssManager.defaultStyles,
+    css`
+      /* Phone input specific styles can go here */
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="input-wrapper">
+        <dees-label .label=${this.label} .description=${this.description}></dees-label>
+        <dees-input-text
+          .value=${this.formattedPhone}
+          .disabled=${this.disabled}
+          .required=${this.required}
+          .placeholder=${this.placeholder}
+          @input=${(event: InputEvent) => this.handlePhoneInput(event)}
+        ></dees-input-text>
+      </div>
+    `;
+  }
+
+  public firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
+    super.firstUpdated(_changedProperties);
+    // Initialize formatted phone from value
+    if (this.value) {
+      this.formattedPhone = this.formatPhoneNumber(this.value);
+    }
+    
+    // Subscribe to the inner input's changes
+    const innerInput = this.shadowRoot.querySelector('dees-input-text') as any;
+    if (innerInput && innerInput.changeSubject) {
+      innerInput.changeSubject.subscribe(() => {
+        this.changeSubject.next(this);
+      });
+    }
+  }
+
+  private handlePhoneInput(event: InputEvent) {
+    const input = event.target as HTMLInputElement;
+    const cleanedValue = this.cleanPhoneNumber(input.value);
+    const formatted = this.formatPhoneNumber(cleanedValue);
+    
+    // Update the input with formatted value
+    if (input.value !== formatted) {
+      const cursorPosition = input.selectionStart || 0;
+      input.value = formatted;
+      
+      // Try to maintain cursor position intelligently
+      const newCursorPos = this.calculateCursorPosition(cleanedValue, formatted, cursorPosition);
+      input.setSelectionRange(newCursorPos, newCursorPos);
+    }
+    
+    this.formattedPhone = formatted;
+    this.value = cleanedValue;
+    this.changeSubject.next(this);
+  }
+
+  private cleanPhoneNumber(value: string): string {
+    // Remove all non-numeric characters
+    return value.replace(/\D/g, '');
+  }
+
+  private formatPhoneNumber(value: string): string {
+    // Basic US phone number formatting
+    // This can be enhanced to support international formats
+    const cleaned = this.cleanPhoneNumber(value);
+    
+    if (cleaned.length === 0) return '';
+    if (cleaned.length <= 3) return cleaned;
+    if (cleaned.length <= 6) return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3)}`;
+    if (cleaned.length <= 10) return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)}-${cleaned.slice(6)}`;
+    
+    // For numbers longer than 10 digits, format as international
+    return `+${cleaned.slice(0, cleaned.length - 10)} (${cleaned.slice(-10, -7)}) ${cleaned.slice(-7, -4)}-${cleaned.slice(-4)}`;
+  }
+
+  private calculateCursorPosition(cleaned: string, formatted: string, oldPos: number): number {
+    // Simple cursor position calculation
+    // Count how many formatting characters are before the cursor
+    let formattingChars = 0;
+    for (let i = 0; i < oldPos && i < formatted.length; i++) {
+      if (!/\d/.test(formatted[i])) {
+        formattingChars++;
+      }
+    }
+    return Math.min(oldPos + formattingChars, formatted.length);
+  }
+
+  public getValue(): string {
+    return this.value;
+  }
+
+  public setValue(value: string): void {
+    this.value = value;
+    this.formattedPhone = this.formatPhoneNumber(value);
   }
 }