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

@@ -2,6 +2,8 @@ import * as colors from './00colors.js';
 import * as plugins from './00plugins.js';
 
 import { DeesContextmenu } from './dees-contextmenu.js';
+import { DeesInputBase } from './dees-input-base.js';
+import { demoFunc } from './dees-input-fileupload.demo.js';
 
 import {
   customElement,
@@ -23,23 +25,9 @@ declare global {
 }
 
 @customElement('dees-input-fileupload')
-export class DeesInputFileupload extends DeesElement {
-  public static demo = () =>
-    html`<dees-input-fileupload .label=${'Attachments'}></dees-input-fileupload>`;
+export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
+  public static demo = demoFunc;
 
-  // INSTANCE
-  public changeSubject = new domtools.plugins.smartrx.rxjs.Subject();
-
-  @property({
-    type: String,
-  })
-  public label: string = null;
-
-  @property({
-    type: String,
-    reflect: true,
-  })
-  public key: string;
 
   @property({
     attribute: false,
@@ -49,16 +37,6 @@ export class DeesInputFileupload extends DeesElement {
   @property()
   public state: 'idle' | 'dragOver' | 'dropped' | 'uploading' | 'completed' = 'idle';
 
-  @property({
-    type: Boolean,
-  })
-  public required: boolean = false;
-
-  @property({
-    type: Boolean,
-  })
-  public disabled: boolean = false;
-
   @property({
     type: String,
   })
@@ -69,13 +47,12 @@ export class DeesInputFileupload extends DeesElement {
   }
 
   public static styles = [
+    ...DeesInputBase.baseStyles,
     cssManager.defaultStyles,
     css`
       :host {
         position: relative;
         display: grid;
-        margin: 10px 0px;
-        margin-bottom: 24px;
         color: ${cssManager.bdTheme('#333', '#ccc')};
       }
 
@@ -112,11 +89,6 @@ export class DeesInputFileupload extends DeesElement {
         background: #00000080;
       }
 
-      .label {
-        font-size: 14px;
-        margin-bottom: 8px;
-      }
-
       .uploadButton {
         position: relative;
         padding: 8px;
@@ -173,11 +145,12 @@ export class DeesInputFileupload extends DeesElement {
 
   public render(): TemplateResult {
     return html`
-      <div class="hidden">
-        <input type="file"></div>
-      </div>
-      ${this.label ? html`<div class="label">${this.label}</div>` : null}
-      <div class="maincontainer ${this.state === 'dragOver' ? 'dragOver' : ''}">
+      <div class="input-wrapper">
+        <dees-label .label=${this.label} .description=${this.description}></dees-label>
+        <div class="hidden">
+          <input type="file">
+        </div>
+        <div class="maincontainer ${this.state === 'dragOver' ? 'dragOver' : ''}">
         ${this.value.map(
           (fileArg) => html`
           <div class="uploadCandidate" @contextmenu=${eventArg => {
@@ -205,6 +178,7 @@ export class DeesInputFileupload extends DeesElement {
           ${this.buttonText}
         </div>
       </div>
+      </div>
     `;
   }
 
@@ -221,7 +195,8 @@ export class DeesInputFileupload extends DeesElement {
     this.changeSubject.next(this);
   }
 
-  public firstUpdated() {
+  public firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
+    super.firstUpdated(_changedProperties);
     const inputFile: HTMLInputElement = this.shadowRoot.querySelector('input[type="file"]');
     inputFile.addEventListener('change', (event: Event) => {
       const target = event.target as HTMLInputElement;
@@ -263,4 +238,12 @@ export class DeesInputFileupload extends DeesElement {
     dropArea.addEventListener('dragover', handlerFunction, false);
     dropArea.addEventListener('drop', handlerFunction, false);
   }
+
+  public getValue(): File[] {
+    return this.value;
+  }
+
+  public setValue(value: File[]): void {
+    this.value = value;
+  }
 }