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-quantityselector.ts

@@ -1,5 +1,7 @@
-import { customElement, property, html, type TemplateResult, DeesElement, type CSSResult, } from '@design.estate/dees-element';
+import { customElement, property, html, type TemplateResult, css, cssManager } 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-quantityselector.demo.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -8,67 +10,50 @@ declare global {
 }
 
 @customElement('dees-input-quantityselector')
-export class DeesInputQuantitySelector extends DeesElement {
-  public static demo = () => html`<dees-input-quantityselector></dees-input-quantityselector>`;
+export class DeesInputQuantitySelector extends DeesInputBase<DeesInputQuantitySelector> {
+  public static demo = demoFunc;
 
   // INSTANCE
-  public changeSubject = new domtools.plugins.smartrx.rxjs.Subject();
-
-  @property()
-  public label: string = 'Label';
-
-  @property({
-    type: String,
-    reflect: true,
-  })
-  public key: string;
 
   @property({
     type: Number
   })
   public value: number = 1;
 
-  @property({
-    type: Boolean,
-  })
-  public required: boolean = false;
 
-  @property({
-    type: Boolean
-  })
-  public disabled: boolean = false;
 
-  constructor() {
-    super();
-  }
-
-  public render(): TemplateResult {
-    return html`
-      ${domtools.elementBasic.styles}
-      <style>
+  public static styles = [
+    ...DeesInputBase.baseStyles,
+    cssManager.defaultStyles,
+    css`
         :host {
-          display: block;
-          width: 110px;
+          width: auto;
           user-select: none;
         }
-        .maincontainer {
+        
+        .quantity-container {
           transition: all 0.1s;
           font-size: 14px;
           display: grid;
           grid-template-columns: 33% 34% 33%;
           text-align: center;
-          background:none;
+          background: ${cssManager.bdTheme('#fafafa', '#222222')};
           line-height: 40px;
           padding: 0px;
-          min-width: 100px;
-          color: ${this.goBright ? '#666' : '#CCC'};
-          border: ${this.goBright ? '1px solid #333' : '1px solid #CCC'};
+          min-width: 110px;
+          color: ${cssManager.bdTheme('#666', '#CCC')};
+          border: 1px solid ${cssManager.bdTheme('#CCC', '#444')};
           border-radius: 4px;
         }
+        
+        .quantity-container.disabled {
+          opacity: 0.5;
+          pointer-events: none;
+        }
 
-        .mainContainer:hover {
-          color: ${this.goBright ? '#333' : '#fff'};
-          border: ${this.goBright ? '1px solid #333' : '1px solid #fff'};
+        .quantity-container:hover {
+          color: ${cssManager.bdTheme('#333', '#fff')};
+          border-color: ${cssManager.bdTheme('#999', '#666')};
         }
 
         .minus {
@@ -91,28 +76,41 @@ export class DeesInputQuantitySelector extends DeesElement {
           text-align: center;
         }
 
-        
-      </style>
+    `,
+  ];
 
-      <div class="maincontainer">
-        <div class="selector minus" @click="${() => {this.decrease();}}">-</div>
+  public render(): TemplateResult {
+    return html`
+      <div class="input-wrapper">
+        <dees-label .label=${this.label}></dees-label>
+        <div class="quantity-container ${this.disabled ? 'disabled' : ''}">
+          <div class="selector minus" @click="${() => {this.decrease();}}">-</div>
         <div class="quantity">${this.value}</div>
-        <div class="selector plus" @click="${() => {this.increase();}}">+</div>
+          <div class="selector plus" @click="${() => {this.increase();}}">+</div>
+        </div>
       </div>
     `;
   }
 
-  public increase () {
-    this.value++;
-    this.changeSubject.next(this);
+  public increase() {
+    if (!this.disabled) {
+      this.value++;
+      this.changeSubject.next(this);
+    }
   }
 
-  public decrease () {
-    if (this.value > 0) {
+  public decrease() {
+    if (!this.disabled && this.value > 0) {
       this.value--;
-    } else {
-      // nothing to do here
+      this.changeSubject.next(this);
     }
-    this.changeSubject.next(this);
+  }
+
+  public getValue(): number {
+    return this.value;
+  }
+
+  public setValue(value: number): void {
+    this.value = value;
   }
 }