@design.estate/dees-catalog 3.49.0 → 3.49.2

package/ts_web/elements/00group-feedback/dees-progressbar/dees-progressbar.ts

@@ -89,7 +89,7 @@ export class DeesProgressbar extends DeesElement {
   }
 
   public async updatePercentage() {
-    const progressBarFill = this.shadowRoot.querySelector('.progressBarFill') as HTMLElement;
+    const progressBarFill = this.shadowRoot!.querySelector('.progressBarFill') as HTMLElement;
     progressBarFill.style.width = `${this.percentage}%`;
   }
 

package/ts_web/elements/00group-form/dees-form/dees-form.demo.ts

@@ -57,10 +57,10 @@ export const demoFunc = () => html`
       const outputDiv = elementArg.querySelector('.form-output');
       
       if (form && outputDiv) {
-        form.addEventListener('formData', async (eventArg: CustomEvent) => {
+        form.addEventListener('formData', (async (eventArg: CustomEvent) => {
           const data = eventArg.detail.data;
           console.log('Form submitted with data:', data);
-          
+
           // Show processing state
           form.setStatus('pending', 'Processing your registration...');
           outputDiv.innerHTML = `<strong>Submitted Data:</strong>\n${JSON.stringify(data, null, 2)}`;
@@ -75,7 +75,7 @@ export const demoFunc = () => html`
           await domtools.plugins.smartdelay.delayFor(2000);
           form.reset();
           outputDiv.innerHTML = '<em>Form has been reset</em>';
-        });
+        }) as unknown as EventListener);
         
         // Track individual field changes
         const inputs = form.querySelectorAll('dees-input-text, dees-input-dropdown, dees-input-checkbox');
@@ -158,14 +158,14 @@ export const demoFunc = () => html`
         console.log('Horizontal form layout active');
         
         // Monitor filter changes
-        form.addEventListener('formData', (event: CustomEvent) => {
+        form.addEventListener('formData', ((event: CustomEvent) => {
           const filters = event.detail.data;
           console.log('Filter applied:', filters);
-          
+
           // Simulate search
           const resultsCount = Math.floor(Math.random() * 100) + 1;
           console.log(`Found ${resultsCount} results with filters:`, filters);
-        });
+        }) as unknown as EventListener);
         
         // Setup real-time filter updates
         const inputs = form.querySelectorAll('[key]');
@@ -224,7 +224,7 @@ export const demoFunc = () => html`
       const statusDiv = elementArg.querySelector('#status-display');
       
       if (form) {
-        form.addEventListener('formData', async (eventArg: CustomEvent) => {
+        form.addEventListener('formData', (async (eventArg: CustomEvent) => {
           const data = eventArg.detail.data;
           console.log('Advanced form data:', data);
           
@@ -252,7 +252,7 @@ export const demoFunc = () => html`
           }
           
           console.log('Form data logged:', data);
-        });
+        }) as unknown as EventListener);
         
         // Monitor file uploads
         const fileUpload = form.querySelector('dees-input-fileupload');

package/ts_web/elements/00group-form/dees-form/dees-form.ts

@@ -135,13 +135,14 @@ export class DeesForm extends DeesElement {
   }
 
   public getFormElements(): Array<TFormInputElement> {
-    return Array.from(this.children).filter((child) =>
+    // Use querySelectorAll('*') to find form inputs nested inside wrapper elements (e.g. <div>)
+    return Array.from(this.querySelectorAll('*')).filter((child) =>
       FORM_INPUT_TYPES.includes(child.constructor as any)
     ) as unknown as TFormInputElement[];
   }
 
   public getSubmitButton(): DeesFormSubmit | undefined {
-    return Array.from(this.children).find(
+    return Array.from(this.querySelectorAll('*')).find(
       (child) => child instanceof DeesFormSubmit
     ) as DeesFormSubmit;
   }
@@ -155,8 +156,9 @@ export class DeesForm extends DeesElement {
         requiredOK = false;
       }
     }
-    if (this.getSubmitButton()) {
-      this.getSubmitButton().disabled = !requiredOK;
+    const submitButton = this.getSubmitButton();
+    if (submitButton) {
+      submitButton.disabled = !requiredOK;
     }
   }
 
@@ -199,6 +201,7 @@ export class DeesForm extends DeesElement {
   ) {
     const inputChildren = this.getFormElements();
     const submitButton = this.getSubmitButton();
+    if (!submitButton) return;
 
     switch (visualStateArg) {
       case 'normal':
@@ -239,7 +242,6 @@ export class DeesForm extends DeesElement {
    */
   reset() {
     const inputChildren = this.getFormElements();
-    const submitButton = this.getSubmitButton();
 
     for (const inputChild of inputChildren) {
       inputChild.value = null;

package/ts_web/elements/00group-form/dees-form-submit/dees-form-submit.ts

@@ -30,7 +30,7 @@ export class DeesFormSubmit extends DeesElement {
   accessor disabled = false;
 
   @property({ type: String })
-  accessor text: string;
+  accessor text!: string;
 
   @property({ type: String })
   accessor status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
@@ -42,7 +42,7 @@ export class DeesFormSubmit extends DeesElement {
   accessor size: 'sm' | 'default' | 'lg' | 'icon' | 'small' | 'normal' | 'large' = 'default';
 
   @property({ type: String })
-  accessor icon: string;
+  accessor icon!: string;
 
   @property({ type: String })
   accessor iconPosition: 'left' | 'right' = 'left';

package/ts_web/elements/00group-input/dees-input-base/dees-input-base.ts

@@ -31,10 +31,10 @@ export abstract class DeesInputBase<T = any> extends DeesElement {
    * Common properties for all inputs
    */
   @property({ type: String })
-  accessor key: string;
+  accessor key!: string;
 
   @property({ type: String })
-  accessor label: string;
+  accessor label!: string;
 
   @property({ type: Boolean })
   accessor required: boolean = false;
@@ -43,7 +43,7 @@ export abstract class DeesInputBase<T = any> extends DeesElement {
   accessor disabled: boolean = false;
 
   @property({ type: String })
-  accessor description: string;
+  accessor description!: string;
 
   /**
    * Common styles for all input components

package/ts_web/elements/00group-input/dees-input-checkbox/dees-input-checkbox.ts

@@ -215,7 +215,7 @@ export class DeesInputCheckbox extends DeesInputBase<DeesInputCheckbox> {
   }
 
   public focus(): void {
-    const checkboxDiv = this.shadowRoot.querySelector('.checkbox');
+    const checkboxDiv = this.shadowRoot!.querySelector('.checkbox');
     if (checkboxDiv) {
       (checkboxDiv as any).focus();
     }

package/ts_web/elements/00group-input/dees-input-code/dees-input-code.ts

@@ -610,20 +610,20 @@ export class DeesInputCode extends DeesInputBase<string> {
         {
           name: 'Cancel',
           action: async (modalRef) => {
-            await modalRef.destroy();
+            await modalRef!.destroy();
           },
         },
         {
           name: 'Save & Close',
           action: async (modalRef) => {
             // Get the editor content from the modal
-            modalEditorElement = modalRef.shadowRoot?.querySelector('dees-workspace-monaco') as DeesWorkspaceMonaco;
+            modalEditorElement = modalRef!.shadowRoot?.querySelector('dees-workspace-monaco') as DeesWorkspaceMonaco;
             if (modalEditorElement) {
               const editor = await modalEditorElement.editorDeferred.promise;
               const newValue = editor.getValue();
               this.setValue(newValue);
             }
-            await modalRef.destroy();
+            await modalRef!.destroy();
           },
         },
       ],

package/ts_web/elements/00group-input/dees-input-datepicker/demo.ts

@@ -47,9 +47,9 @@ export const demoFunc = () => html`
       const datePicker = elementArg.querySelector('dees-input-datepicker');
       
       if (datePicker) {
-        datePicker.addEventListener('change', (event: CustomEvent) => {
+        datePicker.addEventListener('change', ((event: CustomEvent) => {
           console.log('Basic date selected:', (event.target as DeesInputDatepicker).value);
-        });
+        }) as EventListener);
       }
     }}>
       <dees-panel .title=${'Basic Date Picker'} .subtitle=${'Simple date selection without time'}>
@@ -66,17 +66,17 @@ export const demoFunc = () => html`
       const appointmentPicker = elementArg.querySelector('dees-input-datepicker[label="Appointment"]');
       
       if (dateTimePicker) {
-        dateTimePicker.addEventListener('change', (event: CustomEvent) => {
+        dateTimePicker.addEventListener('change', ((event: CustomEvent) => {
           const value = (event.target as DeesInputDatepicker).value;
           console.log('24h format datetime:', value);
-        });
+        }) as EventListener);
       }
       
       if (appointmentPicker) {
-        appointmentPicker.addEventListener('change', (event: CustomEvent) => {
+        appointmentPicker.addEventListener('change', ((event: CustomEvent) => {
           const value = (event.target as DeesInputDatepicker).value;
           console.log('12h format datetime:', value);
-        });
+        }) as EventListener);
       }
     }}>
       <dees-panel .title=${'Date and Time Selection'} .subtitle=${'Date pickers with time selection in different formats'}>
@@ -102,14 +102,14 @@ export const demoFunc = () => html`
       const timezonePickers = elementArg.querySelectorAll('dees-input-datepicker');
       
       timezonePickers.forEach((picker) => {
-        picker.addEventListener('change', (event: CustomEvent) => {
+        picker.addEventListener('change', ((event: CustomEvent) => {
           const target = event.target as DeesInputDatepicker;
           console.log(`${target.label} value:`, target.value);
           const input = target.shadowRoot?.querySelector('.date-input') as HTMLInputElement;
           if (input) {
             console.log(`${target.label} formatted:`, input.value);
           }
-        });
+        }) as EventListener);
       });
     }}>
       <dees-panel .title=${'Timezone Support'} .subtitle=${'Date and time selection with timezone awareness'}>
@@ -140,7 +140,7 @@ export const demoFunc = () => html`
       
       if (futureDatePicker) {
         // Show the min/max constraints in action
-        futureDatePicker.addEventListener('change', (event: CustomEvent) => {
+        futureDatePicker.addEventListener('change', ((event: CustomEvent) => {
           const value = (event.target as DeesInputDatepicker).value;
           if (value) {
             const selectedDate = new Date(value);
@@ -148,7 +148,7 @@ export const demoFunc = () => html`
             const daysDiff = Math.floor((selectedDate.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));
             console.log(`Selected date is ${daysDiff} days from today`);
           }
-        });
+        }) as EventListener);
       }
     }}>
       <dees-panel .title=${'Date Range Constraints'} .subtitle=${'Limit selectable dates with min and max values'}>
@@ -171,14 +171,14 @@ export const demoFunc = () => html`
       
       const datePickers = elementArg.querySelectorAll('dees-input-datepicker');
       datePickers.forEach((picker) => {
-        picker.addEventListener('change', (event: CustomEvent) => {
+        picker.addEventListener('change', ((event: CustomEvent) => {
           const target = event.target as DeesInputDatepicker;
           // Log the formatted value that's displayed in the input
           const input = target.shadowRoot?.querySelector('.date-input') as HTMLInputElement;
           if (input) {
             console.log(`${target.label} format:`, input.value);
           }
-        });
+        }) as EventListener);
       });
     }}>
       <dees-panel .title=${'Date Formats'} .subtitle=${'Different date display formats for various regions'}>
@@ -268,7 +268,7 @@ export const demoFunc = () => html`
     <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
       // Generate weekend dates for the current month
       const generateWeekends = () => {
-        const weekends = [];
+        const weekends: string[] = [];
         const now = new Date();
         const year = now.getFullYear();
         const month = now.getMonth();
@@ -286,7 +286,7 @@ export const demoFunc = () => html`
       
       const picker = elementArg.querySelector('dees-input-datepicker');
       if (picker) {
-        picker.disabledDates = generateWeekends();
+        (picker as DeesInputDatepicker).disabledDates = generateWeekends();
         console.log('Disabled weekend dates for current month');
       }
     }}>
@@ -344,7 +344,7 @@ export const demoFunc = () => html`
       
       const picker = elementArg.querySelector('dees-input-datepicker');
       if (picker) {
-        picker.events = sampleEvents;
+        (picker as DeesInputDatepicker).events = sampleEvents;
         console.log('Calendar events loaded:', sampleEvents);
       }
     }}>
@@ -371,7 +371,7 @@ export const demoFunc = () => html`
       const output = elementArg.querySelector('#event-output');
       
       if (picker && output) {
-        picker.addEventListener('change', (event: CustomEvent) => {
+        picker.addEventListener('change', ((event: CustomEvent) => {
           const target = event.target as DeesInputDatepicker;
           const value = target.value;
           if (value) {
@@ -379,16 +379,16 @@ export const demoFunc = () => html`
             // Get the formatted value from the input element
             const input = target.shadowRoot?.querySelector('.date-input') as HTMLInputElement;
             const formattedValue = input?.value || 'N/A';
-            output.innerHTML = `
+            (output as HTMLElement).innerHTML = `
               <strong>Event triggered!</strong><br>
               ISO Value: ${value}<br>
               Formatted: ${formattedValue}<br>
               Date object: ${date.toLocaleString()}
             `;
           } else {
-            output.innerHTML = '<em>Date cleared</em>';
+            (output as HTMLElement).innerHTML = '<em>Date cleared</em>';
           }
-        });
+        }) as EventListener);
         
         picker.addEventListener('blur', () => {
           console.log('Datepicker lost focus');

package/ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.demo.ts

@@ -56,16 +56,16 @@ export const demoFunc = () => html`
       
       // Log when country changes
       if (countryDropdown) {
-        countryDropdown.addEventListener('selectedOption', (event: CustomEvent) => {
+        countryDropdown.addEventListener('selectedOption', ((event: CustomEvent) => {
           console.log('Country selected:', event.detail);
-        });
+        }) as EventListener);
       }
       
       // Log when role changes
       if (roleDropdown) {
-        roleDropdown.addEventListener('selectedOption', (event: CustomEvent) => {
+        roleDropdown.addEventListener('selectedOption', ((event: CustomEvent) => {
           console.log('Role selected:', event.detail);
-        });
+        }) as EventListener);
       }
     }}>
       <dees-panel .title=${'1. Basic Dropdowns'} .subtitle=${'Standard dropdown with search functionality and various options'}>
@@ -103,9 +103,9 @@ export const demoFunc = () => html`
       const priorityDropdown = elementArg.querySelector('dees-input-dropdown');
       
       if (priorityDropdown) {
-        priorityDropdown.addEventListener('selectedOption', (event: CustomEvent) => {
+        priorityDropdown.addEventListener('selectedOption', ((event: CustomEvent) => {
           console.log(`Priority changed to: ${event.detail.option}`);
-        });
+        }) as EventListener);
       }
     }}>
       <dees-panel .title=${'2. Without Search'} .subtitle=${'Dropdown with search functionality disabled for simpler selection'}>
@@ -128,10 +128,10 @@ export const demoFunc = () => html`
       
       // Log all changes from horizontal dropdowns
       dropdowns.forEach((dropdown) => {
-        dropdown.addEventListener('selectedOption', (event: CustomEvent) => {
+        dropdown.addEventListener('selectedOption', ((event: CustomEvent) => {
           const label = dropdown.getAttribute('label');
           console.log(`${label}: ${event.detail.option}`);
-        });
+        }) as EventListener);
       });
     }}>
       <dees-panel .title=${'3. Horizontal Layout'} .subtitle=${'Multiple dropdowns in a horizontal layout for compact forms'}>
@@ -216,9 +216,9 @@ export const demoFunc = () => html`
       const dropdown = elementArg.querySelector('dees-input-dropdown');
       
       if (dropdown) {
-        dropdown.addEventListener('selectedOption', (event: CustomEvent) => {
+        dropdown.addEventListener('selectedOption', ((event: CustomEvent) => {
           console.log('Bottom dropdown selected:', event.detail);
-        });
+        }) as EventListener);
         
         // Note: The dropdown automatically detects available space
         // and opens upward when near the bottom of the viewport
@@ -248,16 +248,16 @@ export const demoFunc = () => html`
         output.innerHTML = '<em>Select a product to see details...</em>';
         
         // Handle dropdown changes
-        dropdown.addEventListener('change', (event: CustomEvent) => {
+        dropdown.addEventListener('change', ((event: CustomEvent) => {
           if (event.detail.value) {
-            output.innerHTML = `
+            (output as HTMLElement).innerHTML = `
               <strong>Selected:</strong> ${event.detail.value.option}<br>
               <strong>Key:</strong> ${event.detail.value.key}<br>
               <strong>Price:</strong> $${event.detail.value.payload?.price || 'N/A'}<br>
               <strong>Features:</strong> ${event.detail.value.payload?.features?.join(', ') || 'N/A'}
             `;
           }
-        });
+        }) as EventListener);
       }
     }}>
       <dees-panel .title=${'6. Event Handling & Payload'} .subtitle=${'Dropdown with payload data and change event handling'}>
@@ -281,20 +281,20 @@ export const demoFunc = () => html`
       const frameworkDropdown = elementArg.querySelector('dees-input-dropdown[key="framework"]');
       
       if (form) {
-        form.addEventListener('formData', (event: CustomEvent) => {
+        form.addEventListener('formData', ((event: CustomEvent) => {
           console.log('Form submitted with data:', event.detail.data);
-        });
+        }) as EventListener);
       }
       
       if (projectTypeDropdown && frameworkDropdown) {
         // Filter frameworks based on project type
-        projectTypeDropdown.addEventListener('selectedOption', (event: CustomEvent) => {
+        projectTypeDropdown.addEventListener('selectedOption', ((event: CustomEvent) => {
           const selectedType = event.detail.key;
           console.log(`Project type changed to: ${selectedType}`);
-          
+
           // In a real app, you could filter the framework options based on project type
           // For demo purposes, we just log the change
-        });
+        }) as EventListener);
       }
     }}>
       <dees-panel .title=${'7. Form Integration'} .subtitle=${'Dropdown working within a form with validation'}>

package/ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.ts

@@ -30,14 +30,14 @@ export class DeesInputDropdown extends DeesInputBase<DeesInputDropdown> {
   accessor options: { option: string; key: string; payload?: any }[] = [];
 
   @property()
-  accessor selectedOption: { option: string; key: string; payload?: any } = null;
+  accessor selectedOption: { option: string; key: string; payload?: any } | null = null;
 
   // Add value property for form compatibility
   public get value() {
     return this.selectedOption;
   }
 
-  public set value(val: { option: string; key: string; payload?: any }) {
+  public set value(val: { option: string; key: string; payload?: any } | null) {
     this.selectedOption = val;
   }
 
@@ -372,7 +372,7 @@ export class DeesInputDropdown extends DeesInputBase<DeesInputDropdown> {
     
     if (this.isOpened) {
       // Check available space and set position
-      const selectedBox = this.shadowRoot.querySelector('.selectedBox') as HTMLElement;
+      const selectedBox = this.shadowRoot!.querySelector('.selectedBox') as HTMLElement;
       const rect = selectedBox.getBoundingClientRect();
       const spaceBelow = window.innerHeight - rect.bottom;
       const spaceAbove = rect.top;
@@ -382,7 +382,7 @@ export class DeesInputDropdown extends DeesInputBase<DeesInputDropdown> {
       
       // Focus search input if present
       await this.updateComplete;
-      const searchInput = this.shadowRoot.querySelector('.search input') as HTMLInputElement;
+      const searchInput = this.shadowRoot!.querySelector('.search input') as HTMLInputElement;
       if (searchInput) {
         searchInput.focus();
       }
@@ -455,7 +455,7 @@ export class DeesInputDropdown extends DeesInputBase<DeesInputDropdown> {
     }
   }
 
-  public getValue(): { option: string; key: string; payload?: any } {
+  public getValue(): { option: string; key: string; payload?: any } | null {
     return this.selectedOption;
   }
 

package/ts_web/elements/00group-input/dees-input-fileupload/component.ts

@@ -48,7 +48,7 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
   accessor maxFiles: number = 0; // 0 means no limit
 
   @property({ type: String, reflect: true })
-  accessor validationState: 'valid' | 'invalid' | 'warn' | 'pending' = null;
+  accessor validationState: 'valid' | 'invalid' | 'warn' | 'pending' | null = null;
 
   accessor validationMessage: string = '';
 
@@ -266,7 +266,7 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
       return;
     }
     ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
-      this.dropArea!.addEventListener(eventName, this.handleDragEvent);
+      this.dropArea!.addEventListener(eventName, this.handleDragEvent as unknown as EventListener);
     });
   }
 
@@ -275,7 +275,7 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
       return;
     }
     ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
-      this.dropArea!.removeEventListener(eventName, this.handleDragEvent);
+      this.dropArea!.removeEventListener(eventName, this.handleDragEvent as unknown as EventListener);
     });
   }
 

package/ts_web/elements/00group-input/dees-input-iban/dees-input-iban.ts

@@ -60,7 +60,7 @@ export class DeesInputIban extends DeesInputBase<DeesInputIban> {
 
   public firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
     super.firstUpdated(_changedProperties);
-    const deesInputText = this.shadowRoot.querySelector('dees-input-text') as any;
+    const deesInputText = this.shadowRoot!.querySelector('dees-input-text') as any;
     if (deesInputText && deesInputText.changeSubject) {
       deesInputText.changeSubject.subscribe(() => {
         this.changeSubject.next(this);
@@ -81,8 +81,10 @@ export class DeesInputIban extends DeesInputBase<DeesInputIban> {
       }
     }
     this.enteredIbanIsValid = ibantools.isValidIBAN(this.enteredString.replace(/ /g, ''));
-    const deesInputText = this.shadowRoot.querySelector('dees-input-text');
-    deesInputText.validationText = `IBAN is valid: ${this.enteredIbanIsValid}`;
+    const deesInputText = this.shadowRoot!.querySelector('dees-input-text') as any;
+    if (deesInputText) {
+      deesInputText.validationText = `IBAN is valid: ${this.enteredIbanIsValid}`;
+    }
   }
 
   public getValue(): string {