@design.estate/dees-catalog 3.49.0 → 3.49.1

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 {

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

@@ -211,9 +211,9 @@ export class DeesInputMultitoggle extends DeesInputBase<DeesInputMultitoggle> {
   private indicatorInitialized = false;
 
   public async setIndicator() {
-    const indicator: HTMLDivElement = this.shadowRoot.querySelector('.indicator');
+    const indicator: HTMLDivElement | null = this.shadowRoot!.querySelector('.indicator');
     const selectedIndex = this.options.indexOf(this.selectedOption);
-    
+
     // If no valid selection, hide indicator
     if (selectedIndex === -1 || !indicator) {
       if (indicator) {
@@ -221,8 +221,8 @@ export class DeesInputMultitoggle extends DeesInputBase<DeesInputMultitoggle> {
       }
       return;
     }
-    
-    const option: HTMLDivElement = this.shadowRoot.querySelector(
+
+    const option: HTMLDivElement | null = this.shadowRoot!.querySelector(
       `.option:nth-child(${selectedIndex + 2})`
     );
     

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

@@ -67,7 +67,7 @@ export class DeesInputPhone extends DeesInputBase<DeesInputPhone> {
     }
     
     // Subscribe to the inner input's changes
-    const innerInput = this.shadowRoot.querySelector('dees-input-text') as any;
+    const innerInput = this.shadowRoot!.querySelector('dees-input-text') as any;
     if (innerInput && innerInput.changeSubject) {
       innerInput.changeSubject.subscribe(() => {
         this.changeSubject.next(this);

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

@@ -35,7 +35,7 @@ export class DeesInputRadiogroup extends DeesInputBase<string | object> {
   accessor direction: 'vertical' | 'horizontal' = 'vertical';
 
   @property({ type: String, reflect: true })
-  accessor validationState: 'valid' | 'invalid' | 'warn' | 'pending' = null;
+  accessor validationState: 'valid' | 'invalid' | 'warn' | 'pending' | null = null;
 
   // Form compatibility
   public get value() {
@@ -346,15 +346,15 @@ export class DeesInputRadiogroup extends DeesInputBase<string | object> {
   }
 
   private focusNextOption() {
-    const radioCircles = Array.from(this.shadowRoot.querySelectorAll('.radio-circle'));
-    const currentIndex = radioCircles.findIndex(el => el === this.shadowRoot.activeElement);
+    const radioCircles = Array.from(this.shadowRoot!.querySelectorAll('.radio-circle'));
+    const currentIndex = radioCircles.findIndex(el => el === this.shadowRoot!.activeElement);
     const nextIndex = (currentIndex + 1) % radioCircles.length;
     (radioCircles[nextIndex] as HTMLElement).focus();
   }
 
   private focusPreviousOption() {
-    const radioCircles = Array.from(this.shadowRoot.querySelectorAll('.radio-circle'));
-    const currentIndex = radioCircles.findIndex(el => el === this.shadowRoot.activeElement);
+    const radioCircles = Array.from(this.shadowRoot!.querySelectorAll('.radio-circle'));
+    const currentIndex = radioCircles.findIndex(el => el === this.shadowRoot!.activeElement);
     const prevIndex = currentIndex <= 0 ? radioCircles.length - 1 : currentIndex - 1;
     (radioCircles[prevIndex] as HTMLElement).focus();
   }

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

@@ -58,11 +58,11 @@ export class DeesInputRichtext extends DeesInputBase<string> {
   @state()
   accessor wordCount: number = 0;
 
-  private editorElement: HTMLElement;
-  private linkInputElement: HTMLInputElement;
+  private editorElement!: HTMLElement;
+  private linkInputElement!: HTMLInputElement;
   private tiptapBundle: ITiptapBundle | null = null;
 
-  public editor: Editor;
+  public editor!: Editor;
 
   public static styles = richtextStyles;
 
@@ -235,8 +235,8 @@ export class DeesInputRichtext extends DeesInputBase<string> {
     // Load Tiptap from CDN
     this.tiptapBundle = await DeesServiceLibLoader.getInstance().loadTiptap();
 
-    this.editorElement = this.shadowRoot.querySelector('.editor-content');
-    this.linkInputElement = this.shadowRoot.querySelector('.link-input input');
+    this.editorElement = this.shadowRoot!.querySelector('.editor-content')!;
+    this.linkInputElement = this.shadowRoot!.querySelector('.link-input input')!;
     this.initializeEditor();
   }
 

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

@@ -73,9 +73,9 @@ export const demoFunc = () => html`
       const inputs = elementArg.querySelectorAll('dees-input-text');
       
       inputs.forEach((input: DeesInputText) => {
-        input.addEventListener('changeSubject', (event: CustomEvent) => {
+        input.addEventListener('changeSubject', ((event: CustomEvent) => {
           console.log(`Input "${input.label}" changed to:`, input.getValue());
-        });
+        }) as EventListener);
         
         input.addEventListener('blur', () => {
           console.log(`Input "${input.label}" lost focus`);
@@ -271,7 +271,8 @@ export const demoFunc = () => html`
       // Track password visibility toggles
       const passwordInputs = elementArg.querySelectorAll('dees-input-text[isPasswordBool]');
       
-      passwordInputs.forEach((input: DeesInputText) => {
+      passwordInputs.forEach((_input) => {
+        const input = _input as DeesInputText;
         // Monitor for toggle button clicks within shadow DOM
         const checkToggle = () => {
           const inputEl = input.shadowRoot?.querySelector('input');
@@ -316,10 +317,10 @@ export const demoFunc = () => html`
       
       if (dynamicInput && output) {
         // Update output on every change
-        dynamicInput.addEventListener('changeSubject', (event: CustomEvent) => {
+        dynamicInput.addEventListener('changeSubject', ((event: CustomEvent) => {
           const value = (event.detail as DeesInputText).getValue();
           output.textContent = `Current value: "${value}"`;
-        });
+        }) as EventListener);
         
         // Also track focus/blur events
         dynamicInput.addEventListener('focus', () => {

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

@@ -47,7 +47,7 @@ export class DeesInputText extends DeesInputBase {
     type: Boolean,
     reflect: true,
   })
-  accessor validationState: 'valid' | 'warn' | 'invalid';
+  accessor validationState!: 'valid' | 'warn' | 'invalid';
 
   @property({
     reflect: true,
@@ -55,7 +55,7 @@ export class DeesInputText extends DeesInputBase {
   accessor validationText: string = '';
 
   @property({})
-  accessor validationFunction: (value: string) => boolean;
+  accessor validationFunction!: (value: string) => boolean;
 
   public static styles = [
     themeDefaultStyles,
@@ -274,12 +274,12 @@ export class DeesInputText extends DeesInputBase {
   }
 
   public async focus() {
-    const textInput = this.shadowRoot.querySelector('input');
-    textInput.focus();
+    const textInput = this.shadowRoot!.querySelector('input');
+    textInput!.focus();
   }
 
   public async blur() {
-    const textInput = this.shadowRoot.querySelector('input');
-    textInput.blur();
+    const textInput = this.shadowRoot!.querySelector('input');
+    textInput!.blur();
   }
 }

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

@@ -12,17 +12,19 @@ export const demoFunc = () => html`
 
     if (toggleAllOnBtn && toggleAllOffBtn) {
       toggleAllOnBtn.addEventListener('click', () => {
-        featureToggles.forEach((toggle: DeesInputToggle) => {
-          if (!toggle.disabled && !toggle.required) {
-            toggle.value = true;
+        featureToggles.forEach((toggle) => {
+          const t = toggle as unknown as DeesInputToggle;
+          if (!t.disabled && !t.required) {
+            t.value = true;
           }
         });
       });
 
       toggleAllOffBtn.addEventListener('click', () => {
-        featureToggles.forEach((toggle: DeesInputToggle) => {
-          if (!toggle.disabled && !toggle.required) {
-            toggle.value = false;
+        featureToggles.forEach((toggle) => {
+          const t = toggle as unknown as DeesInputToggle;
+          if (!t.disabled && !t.required) {
+            t.value = false;
           }
         });
       });
@@ -280,10 +282,10 @@ export const demoFunc = () => html`
           <dees-input-toggle
             .label=${'Airplane mode'}
             .value=${false}
-            @newValue=${(event: CustomEvent) => {
+            @newValue=${(event: Event) => {
               const output = document.querySelector('#airplane-output');
               if (output) {
-                output.textContent = `Airplane mode: ${event.detail ? 'ON' : 'OFF'}`;
+                output.textContent = `Airplane mode: ${(event as CustomEvent).detail ? 'ON' : 'OFF'}`;
               }
             }}
           ></dees-input-toggle>
@@ -291,10 +293,10 @@ export const demoFunc = () => html`
           <dees-input-toggle
             .label=${'Do not disturb'}
             .value=${false}
-            @newValue=${(event: CustomEvent) => {
+            @newValue=${(event: Event) => {
               const output = document.querySelector('#dnd-output');
               if (output) {
-                output.textContent = `Do not disturb: ${event.detail ? 'ENABLED' : 'DISABLED'}`;
+                output.textContent = `Do not disturb: ${(event as CustomEvent).detail ? 'ENABLED' : 'DISABLED'}`;
               }
             }}
           ></dees-input-toggle>

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

@@ -156,7 +156,7 @@ export class DeesInputTypelist extends DeesInputBase<DeesInputTypelist> {
         <dees-label .label=${this.label} .description=${this.description}></dees-label>
         <div class="mainbox">
           <div class="tags" @click=${() => {
-            this.shadowRoot.querySelector('input').focus();
+            this.shadowRoot!.querySelector('input')!.focus();
           }}>
             ${this.value.length === 0
               ? html`<div class="notags">No tags yet</div>`

package/ts_web/elements/00group-input/dees-input-wysiwyg/blocks/text/heading.block.ts

@@ -200,15 +200,16 @@ export class HeadingBlockHandler extends BaseBlockHandler {
     const wysiwygBlock = (headingBlock.getRootNode() as ShadowRoot).host as any;
     if (wysiwygBlock) {
       const originalDisconnectedCallback = (wysiwygBlock as any).disconnectedCallback;
+      const self = this;
       (wysiwygBlock as any).disconnectedCallback = async function() {
-        if (this.selectionHandler) {
-          document.removeEventListener('selectionchange', this.selectionHandler);
-          this.selectionHandler = null;
+        if (self.selectionHandler) {
+          document.removeEventListener('selectionchange', self.selectionHandler);
+          self.selectionHandler = null;
         }
         if (originalDisconnectedCallback) {
           await originalDisconnectedCallback.call(wysiwygBlock);
         }
-      }.bind(this);
+      };
     }
   }
   

package/ts_web/elements/00group-input/dees-input-wysiwyg/blocks/text/list.block.ts

@@ -213,15 +213,16 @@ export class ListBlockHandler extends BaseBlockHandler {
     const wysiwygBlock = (listBlock.getRootNode() as ShadowRoot).host as any;
     if (wysiwygBlock) {
       const originalDisconnectedCallback = (wysiwygBlock as any).disconnectedCallback;
+      const self = this;
       (wysiwygBlock as any).disconnectedCallback = async function() {
-        if (this.selectionHandler) {
-          document.removeEventListener('selectionchange', this.selectionHandler);
-          this.selectionHandler = null;
+        if (self.selectionHandler) {
+          document.removeEventListener('selectionchange', self.selectionHandler);
+          self.selectionHandler = null;
         }
         if (originalDisconnectedCallback) {
           await originalDisconnectedCallback.call(wysiwygBlock);
         }
-      }.bind(this);
+      };
     }
   }
   

package/ts_web/elements/00group-input/dees-input-wysiwyg/blocks/text/paragraph.block.ts

@@ -193,15 +193,16 @@ export class ParagraphBlockHandler extends BaseBlockHandler {
     const wysiwygBlock = element.closest('dees-wysiwyg-block');
     if (wysiwygBlock) {
       const originalDisconnectedCallback = (wysiwygBlock as any).disconnectedCallback;
+      const self = this;
       (wysiwygBlock as any).disconnectedCallback = async function() {
-        if (this.selectionHandler) {
-          document.removeEventListener('selectionchange', this.selectionHandler);
-          this.selectionHandler = null;
+        if (self.selectionHandler) {
+          document.removeEventListener('selectionchange', self.selectionHandler);
+          self.selectionHandler = null;
         }
         if (originalDisconnectedCallback) {
           await originalDisconnectedCallback.call(wysiwygBlock);
         }
-      }.bind(this);
+      };
     }
   }
   

package/ts_web/elements/00group-input/dees-input-wysiwyg/blocks/text/quote.block.ts

@@ -192,15 +192,16 @@ export class QuoteBlockHandler extends BaseBlockHandler {
     const wysiwygBlock = (quoteBlock.getRootNode() as ShadowRoot).host as any;
     if (wysiwygBlock) {
       const originalDisconnectedCallback = (wysiwygBlock as any).disconnectedCallback;
+      const self = this;
       (wysiwygBlock as any).disconnectedCallback = async function() {
-        if (this.selectionHandler) {
-          document.removeEventListener('selectionchange', this.selectionHandler);
-          this.selectionHandler = null;
+        if (self.selectionHandler) {
+          document.removeEventListener('selectionchange', self.selectionHandler);
+          self.selectionHandler = null;
         }
         if (originalDisconnectedCallback) {
           await originalDisconnectedCallback.call(wysiwygBlock);
         }
-      }.bind(this);
+      };
     }
   }