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

@@ -1,18 +1,19 @@
 import {
   customElement,
-  DeesElement,
   type TemplateResult,
   state,
   html,
-  domtools,
   property,
+  css,
+  cssManager,
 } from '@design.estate/dees-element';
-
+import * as domtools from '@design.estate/dees-domtools';
+import { DeesInputBase } from './dees-input-base.js';
 import * as ibantools from 'ibantools';
 import { demoFunc } from './dees-input-iban.demo.js';
 
 @customElement('dees-input-iban')
-export class DeesInputIban extends DeesElement {
+export class DeesInputIban extends DeesInputBase<DeesInputIban> {
   // STATIC
   public static demo = demoFunc;
 
@@ -23,60 +24,44 @@ export class DeesInputIban extends DeesElement {
   @state()
   enteredIbanIsValid: boolean = false;
 
-  @property({
-    type: Boolean,
-  })
-  public disabled = false;
-
-  @property({
-    type: Boolean,
-  })
-  public required = false;
-
-  @property({
-    type: String,
-  })
-  public label = '';
-
-  @property({
-    type: String,
-  })
-  public key = '';
-
   @property({
     type: String,
   })
   public value = '';
 
-  public changeSubject = new domtools.plugins.smartrx.rxjs.Subject<DeesInputIban>();
+  public static styles = [
+    ...DeesInputBase.baseStyles,
+    cssManager.defaultStyles,
+    css`
+      /* IBAN input specific styles can go here */
+    `,
+  ];
 
   public render(): TemplateResult {
     return html`
-      <style>
-        input[type='text'] {
-          line-height: 20px;
-          padding: 5px;
-          width: 250px;
-        }
-      </style>
-      <dees-input-text
-        .label=${'IBAN'}
-        .value=${this.value}
-        @input=${(eventArg: InputEvent) => {
-          this.validateIban(eventArg);
-        }}
-      ></dees-input-text>
+      <div class="input-wrapper">
+        <dees-label .label=${this.label || 'IBAN'} .description=${this.description}></dees-label>
+        <dees-input-text
+          .value=${this.value}
+          .disabled=${this.disabled}
+          .required=${this.required}
+          .placeholder=${'DE89 3704 0044 0532 0130 00'}
+          @input=${(eventArg: InputEvent) => {
+            this.validateIban(eventArg);
+          }}
+        ></dees-input-text>
+      </div>
     `;
   }
 
-  public async firstUpdated() {
-    const deesInputText = this.shadowRoot.querySelector('dees-input-text');
-    deesInputText.disabled = this.disabled;
-    deesInputText.required = this.required;
-    deesInputText.changeSubject.subscribe(valueArg => {
-      this.value = valueArg.value;
-      this.changeSubject.next(this);
-    })
+  public firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
+    super.firstUpdated(_changedProperties);
+    const deesInputText = this.shadowRoot.querySelector('dees-input-text') as any;
+    if (deesInputText && deesInputText.changeSubject) {
+      deesInputText.changeSubject.subscribe(() => {
+        this.changeSubject.next(this);
+      });
+    }
   }
 
   public async validateIban(eventArg: InputEvent): Promise<void> {
@@ -95,4 +80,13 @@ export class DeesInputIban extends DeesElement {
     const deesInputText = this.shadowRoot.querySelector('dees-input-text');
     deesInputText.validationText = `IBAN is valid: ${this.enteredIbanIsValid}`;
   }
+
+  public getValue(): string {
+    return this.value;
+  }
+
+  public setValue(value: string): void {
+    this.value = value;
+    this.enteredString = ibantools.friendlyFormatIBAN(value) || '';
+  }
 }