@design.estate/dees-catalog 3.49.0 → 3.49.1

package/ts_web/elements/00group-input/dees-input-wysiwyg/dees-formatting-menu.ts

@@ -188,36 +188,39 @@ export class DeesFormattingMenu extends DeesElement {
   
   public firstUpdated(): void {
     // Set up event delegation for the menu
-    this.shadowRoot?.addEventListener('mousedown', (e: MouseEvent) => {
+    this.shadowRoot!.addEventListener('mousedown', (e: Event) => {
+      const mouseEvent = e as MouseEvent;
       const menu = this.shadowRoot?.querySelector('.formatting-menu');
-      if (menu && menu.contains(e.target as Node)) {
+      if (menu && menu.contains(mouseEvent.target as Node)) {
         // Prevent focus loss
-        e.preventDefault();
-        e.stopPropagation();
+        mouseEvent.preventDefault();
+        mouseEvent.stopPropagation();
       }
     });
-    
-    this.shadowRoot?.addEventListener('click', (e: MouseEvent) => {
-      const target = e.target as HTMLElement;
+
+    this.shadowRoot!.addEventListener('click', (e: Event) => {
+      const mouseEvent = e as MouseEvent;
+      const target = mouseEvent.target as HTMLElement;
       const button = target.closest('.format-button') as HTMLElement;
-      
+
       if (button) {
-        e.preventDefault();
-        e.stopPropagation();
-        
+        mouseEvent.preventDefault();
+        mouseEvent.stopPropagation();
+
         const command = button.getAttribute('data-command');
         if (command) {
           this.applyFormat(command);
         }
       }
     });
-    
-    this.shadowRoot?.addEventListener('focus', (e: FocusEvent) => {
+
+    this.shadowRoot!.addEventListener('focus', (e: Event) => {
+      const focusEvent = e as FocusEvent;
       const menu = this.shadowRoot?.querySelector('.formatting-menu');
-      if (menu && menu.contains(e.target as Node)) {
+      if (menu && menu.contains(focusEvent.target as Node)) {
         // Prevent menu from taking focus
-        e.preventDefault();
-        e.stopPropagation();
+        focusEvent.preventDefault();
+        focusEvent.stopPropagation();
       }
     }, true); // Use capture phase
   }

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

@@ -77,7 +77,7 @@ export class DeesInputWysiwyg extends DeesInputBase<string> {
   @state()
   accessor selectedText: string = '';
 
-  public editorContentRef: HTMLDivElement;
+  public editorContentRef!: HTMLDivElement;
   public isComposing: boolean = false;
   
   // Handler instances
@@ -144,7 +144,7 @@ export class DeesInputWysiwyg extends DeesInputBase<string> {
     // No global selection listener needed
     
     // Listen for custom selection events from blocks
-    this.addEventListener('block-text-selected', (e: CustomEvent) => {
+    this.addEventListener('block-text-selected', ((e: CustomEvent) => {
       
       if (!this.slashMenu.visible && e.detail.hasSelection && e.detail.text.length > 0) {
         this.selectedText = e.detail.text;
@@ -164,8 +164,8 @@ export class DeesInputWysiwyg extends DeesInputBase<string> {
           );
         }
       }
-    });
-    
+    }) as EventListener);
+
     // Hide formatting menu when clicking outside
     document.addEventListener('mousedown', (e) => {
       // Check if click is on the formatting menu itself
@@ -896,14 +896,14 @@ export class DeesInputWysiwyg extends DeesInputBase<string> {
           {
             name: 'Cancel',
             action: async (modal) => {
-              modal.destroy();
+              modal!.destroy();
               resolve(null);
             }
           },
           {
             name: 'Add Link',
             action: async (modal) => {
-              modal.destroy();
+              modal!.destroy();
               resolve(linkUrl);
             }
           }

package/ts_web/elements/00group-input/dees-input-wysiwyg/dees-slash-menu.ts

@@ -216,46 +216,50 @@ export class DeesSlashMenu extends DeesElement {
   
   public firstUpdated(): void {
     // Set up event delegation
-    this.shadowRoot?.addEventListener('mousedown', (e: MouseEvent) => {
+    this.shadowRoot!.addEventListener('mousedown', (e: Event) => {
+      const mouseEvent = e as MouseEvent;
       const menu = this.shadowRoot?.querySelector('.slash-menu');
-      if (menu && menu.contains(e.target as Node)) {
+      if (menu && menu.contains(mouseEvent.target as Node)) {
         // Prevent focus loss
-        e.preventDefault();
-        e.stopPropagation();
+        mouseEvent.preventDefault();
+        mouseEvent.stopPropagation();
       }
     });
-    
-    this.shadowRoot?.addEventListener('click', (e: MouseEvent) => {
-      const target = e.target as HTMLElement;
+
+    this.shadowRoot!.addEventListener('click', (e: Event) => {
+      const mouseEvent = e as MouseEvent;
+      const target = mouseEvent.target as HTMLElement;
       const menuItem = target.closest('.slash-menu-item') as HTMLElement;
-      
+
       if (menuItem) {
-        e.preventDefault();
-        e.stopPropagation();
-        
+        mouseEvent.preventDefault();
+        mouseEvent.stopPropagation();
+
         const itemType = menuItem.getAttribute('data-item-type');
         if (itemType) {
           this.selectItem(itemType);
         }
       }
     });
-    
-    this.shadowRoot?.addEventListener('mouseenter', (e: MouseEvent) => {
-      const target = e.target as HTMLElement;
+
+    this.shadowRoot!.addEventListener('mouseenter', (e: Event) => {
+      const mouseEvent = e as MouseEvent;
+      const target = mouseEvent.target as HTMLElement;
       const menuItem = target.closest('.slash-menu-item') as HTMLElement;
-      
+
       if (menuItem) {
         const index = parseInt(menuItem.getAttribute('data-item-index') || '0', 10);
         this.selectedIndex = index;
       }
     }, true); // Use capture phase
-    
-    this.shadowRoot?.addEventListener('focus', (e: FocusEvent) => {
+
+    this.shadowRoot!.addEventListener('focus', (e: Event) => {
+      const focusEvent = e as FocusEvent;
       const menu = this.shadowRoot?.querySelector('.slash-menu');
-      if (menu && menu.contains(e.target as Node)) {
+      if (menu && menu.contains(focusEvent.target as Node)) {
         // Prevent menu from taking focus
-        e.preventDefault();
-        e.stopPropagation();
+        focusEvent.preventDefault();
+        focusEvent.stopPropagation();
       }
     }, true); // Use capture phase
   }

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

@@ -33,13 +33,13 @@ export class DeesWysiwygBlock extends DeesElement {
     }
   }
   @property({ type: Object })
-  accessor block: IBlock;
+  accessor block!: IBlock;
 
   @property({ type: Boolean })
   accessor isSelected: boolean = false;
 
   @property({ type: Object })
-  accessor handlers: IBlockEventHandlers;
+  accessor handlers!: IBlockEventHandlers;
 
   @property({ type: Object })
   accessor wysiwygComponent: any; // Reference to parent dees-input-wysiwyg

package/ts_web/elements/00group-input/dees-input-wysiwyg/wysiwyg.dragdrophandler.ts

@@ -105,10 +105,10 @@ export class WysiwygDragDropHandler {
   handleDragEnd(): void {
     // Clean up visual state
     const allBlocks = this.component.editorContentRef.querySelectorAll('.block-wrapper');
-    allBlocks.forEach((block: HTMLElement) => {
-      block.classList.remove('dragging', 'move-up', 'move-down');
-      block.style.removeProperty('--drag-offset');
-      block.style.removeProperty('transform');
+    allBlocks.forEach((block) => {
+      (block as HTMLElement).classList.remove('dragging', 'move-up', 'move-down');
+      (block as HTMLElement).style.removeProperty('--drag-offset');
+      (block as HTMLElement).style.removeProperty('transform');
     });
     
     // Remove dragging class from editor

package/ts_web/elements/00group-input/dees-input-wysiwyg/wysiwyg.keyboardhandler.ts

@@ -704,17 +704,17 @@ export class WysiwygKeyboardHandler {
       const rect = range.getBoundingClientRect();
       
       // Get the container element
-      let container = range.commonAncestorContainer;
+      let container: Node = range.commonAncestorContainer;
       if (container.nodeType === Node.TEXT_NODE) {
-        container = container.parentElement;
+        container = container.parentElement!;
       }
-      
+
       // Get the top position of the container
       const containerRect = (container as Element).getBoundingClientRect();
-      
+
       // Check if we're near the top (within 5px tolerance for line height variations)
       const isNearTop = rect.top - containerRect.top < 5;
-      
+
       // For single-line content, also check if we're at the beginning
       if (container.textContent && !container.textContent.includes('\n')) {
         const cursorPos = WysiwygSelection.getCursorPositionInElement(container as Element, ...shadowRoots);
@@ -740,11 +740,11 @@ export class WysiwygKeyboardHandler {
       const rect = range.getBoundingClientRect();
       
       // Get the container element
-      let container = range.commonAncestorContainer;
+      let container: Node = range.commonAncestorContainer;
       if (container.nodeType === Node.TEXT_NODE) {
-        container = container.parentElement;
+        container = container.parentElement!;
       }
-      
+
       // Get the bottom position of the container
       const containerRect = (container as Element).getBoundingClientRect();
       

package/ts_web/elements/00group-input/dees-input-wysiwyg/wysiwyg.modalmanager.ts

@@ -72,7 +72,7 @@ export class WysiwygModalManager {
           {
             name: 'Cancel',
             action: async (modal) => {
-              modal.destroy();
+              modal!.destroy();
               resolve(null);
             }
           }
@@ -158,7 +158,7 @@ export class WysiwygModalManager {
         {
           name: 'Done',
           action: async (modal) => {
-            modal.destroy();
+            modal!.destroy();
           }
         }
       ]

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

@@ -56,10 +56,10 @@ export const demoFunc = () => html`
       const roundProfile = elementArg.querySelector('dees-input-profilepicture[shape="round"]');
       
       if (roundProfile) {
-        roundProfile.addEventListener('change', (event: CustomEvent) => {
+        roundProfile.addEventListener('change', ((event: CustomEvent) => {
           const target = event.target as DeesInputProfilePicture;
           console.log('Round profile picture changed:', target.value?.substring(0, 50) + '...');
-        });
+        }) as EventListener);
       }
     }}>
       <dees-panel .title=${'Profile Picture Input'} .subtitle=${'Basic usage with round and square shapes'}>
@@ -85,10 +85,10 @@ export const demoFunc = () => html`
       // Different sizes demo
       const profiles = elementArg.querySelectorAll('dees-input-profilepicture');
       profiles.forEach((profile) => {
-        profile.addEventListener('change', (event: CustomEvent) => {
+        profile.addEventListener('change', ((event: CustomEvent) => {
           const target = event.target as DeesInputProfilePicture;
           console.log(`Profile (size ${target.size}) changed`);
-        });
+        }) as EventListener);
       });
     }}>
       <dees-panel .title=${'Size Variations'} .subtitle=${'Profile pictures in different sizes'}>
@@ -122,15 +122,15 @@ export const demoFunc = () => html`
       if (prefilledProfile) {
         prefilledProfile.value = sampleImageUrl;
         
-        prefilledProfile.addEventListener('change', (event: CustomEvent) => {
+        prefilledProfile.addEventListener('change', ((event: CustomEvent) => {
           const target = event.target as DeesInputProfilePicture;
           const output = elementArg.querySelector('#prefilled-output');
           if (output) {
-            output.textContent = target.value ? 
-              `Image data: ${target.value.substring(0, 80)}...` : 
+            output.textContent = target.value ?
+              `Image data: ${target.value.substring(0, 80)}...` :
               'No image selected';
           }
-        });
+        }) as EventListener);
       }
     }}>
       <dees-panel .title=${'Pre-filled and Value Binding'} .subtitle=${'Profile picture with initial value and change tracking'}>

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

@@ -436,10 +436,10 @@ export class DeesInputProfilePicture extends DeesInputBase<DeesInputProfilePictu
     this.modalInstance.outputSize = this.outputSize;
     this.modalInstance.outputQuality = this.outputQuality;
     
-    this.modalInstance.addEventListener('save', (event: CustomEvent) => {
+    this.modalInstance.addEventListener('save', ((event: CustomEvent) => {
       this.value = event.detail.croppedImage;
       this.changeSubject.next(this);
-    });
+    }) as EventListener);
     
     document.body.appendChild(this.modalInstance);
   }

package/ts_web/elements/00group-layout/dees-chips/dees-chips.ts

@@ -41,7 +41,7 @@ export class DeesChips extends DeesElement {
   accessor selectableChips: Tag[] = [];
 
   @property()
-  accessor selectedChip: Tag = null;
+  accessor selectedChip: Tag | null = null;
 
   @property({
     type: Array,

package/ts_web/elements/00group-layout/dees-dashboardgrid/dees-dashboardgrid.demo.ts

@@ -1,5 +1,6 @@
 import { html, css, cssManager } from '@design.estate/dees-element';
 import type { DeesDashboardgrid } from './dees-dashboardgrid.js';
+import type { LayoutDirection } from './types.js';
 import '@design.estate/dees-wcctools/demotools';
 
 export const demoFunc = () => {
@@ -160,7 +161,7 @@ export const demoFunc = () => {
       });
 
       // Enhanced logging for reflow events
-      let lastPlaceholderPosition = null;
+      let lastPlaceholderPosition: Record<string, string> | null = null;
       let moveEventCounter = 0;
 
       // Helper function to log grid state
@@ -231,25 +232,28 @@ export const demoFunc = () => {
       // Log initial state
       logGridState('Initial Grid State');
 
-      grid.addEventListener('widget-move', (e: CustomEvent) => {
+      grid.addEventListener('widget-move', (e: Event) => {
+        const detail = (e as CustomEvent).detail;
         logGridState('Widget Move', {
-          widget: e.detail.widget,
-          displaced: e.detail.displaced,
-          swappedWith: e.detail.swappedWith
+          widget: detail.widget,
+          displaced: detail.displaced,
+          swappedWith: detail.swappedWith
         });
       });
 
-      grid.addEventListener('widget-resize', (e: CustomEvent) => {
+      grid.addEventListener('widget-resize', (e: Event) => {
+        const detail = (e as CustomEvent).detail;
         logGridState('Widget Resize', {
-          widget: e.detail.widget,
-          displaced: e.detail.displaced,
-          swappedWith: e.detail.swappedWith
+          widget: detail.widget,
+          displaced: detail.displaced,
+          swappedWith: detail.swappedWith
         });
       });
 
-      grid.addEventListener('widget-remove', (e: CustomEvent) => {
+      grid.addEventListener('widget-remove', (e: Event) => {
+        const detail = (e as CustomEvent).detail;
         logGridState('Widget Remove', {
-          removedWidget: e.detail.widget
+          removedWidget: detail.widget
         });
         updateStatus();
       });
@@ -312,7 +316,7 @@ export const demoFunc = () => {
 
       // Log compact operations
       const originalCompact = grid.compact.bind(grid);
-      grid.compact = (direction?: string) => {
+      grid.compact = (direction?: LayoutDirection) => {
         console.group('🗜️ Compacting Grid');
         console.log('Direction:', direction || 'vertical');
         logGridState('Before Compact');

package/ts_web/elements/00group-layout/dees-label/dees-label.ts

@@ -32,7 +32,7 @@ export class DeesLabel extends DeesElement {
     type: String,
     reflect: true,
   })
-  accessor description: string;
+  accessor description!: string;
 
   @property({
     type: Boolean,

package/ts_web/elements/00group-layout/dees-stepper/dees-stepper.ts

@@ -45,7 +45,7 @@ export class DeesStepper extends DeesElement {
   @property({
     type: Object,
   })
-  accessor selectedStep: IStep;
+  accessor selectedStep!: IStep;
 
   constructor() {
     super();
@@ -214,19 +214,19 @@ export class DeesStepper extends DeesElement {
     this.setScrollStatus();
     // Remove entrance class after initial animation completes
     await this.domtools.convenience.smartdelay.delayFor(350);
-    this.shadowRoot.querySelector('.step.entrance')?.classList.remove('entrance');
+    this.shadowRoot!.querySelector('.step.entrance')?.classList.remove('entrance');
   }
 
   public async updated() {
     this.setScrollStatus();
   }
 
-  public scroller: typeof domtools.plugins.SweetScroll.prototype;
+  public scroller!: typeof domtools.plugins.SweetScroll.prototype;
 
   public async setScrollStatus() {
-    const stepperContainer: HTMLElement = this.shadowRoot.querySelector('.stepperContainer');
-    const firstStepElement: HTMLElement = this.shadowRoot.querySelector('.step');
-    const selectedStepElement: HTMLElement = this.shadowRoot.querySelector('.selected');
+    const stepperContainer = this.shadowRoot!.querySelector('.stepperContainer') as HTMLElement;
+    const firstStepElement = this.shadowRoot!.querySelector('.step') as HTMLElement;
+    const selectedStepElement = this.shadowRoot!.querySelector('.selected') as HTMLElement;
     if (!selectedStepElement) {
       return;
     }
@@ -278,7 +278,7 @@ export class DeesStepper extends DeesElement {
     this.selectedStep = previousStep;
     await this.domtoolsPromise;
     await this.domtools.convenience.smartdelay.delayFor(100);
-    this.selectedStep.onReturnToStepFunc?.(this, this.shadowRoot.querySelector('.selected'));
+    this.selectedStep.onReturnToStepFunc?.(this, this.shadowRoot!.querySelector('.selected') as HTMLElement);
   }
 
   public goNext() {

package/ts_web/elements/00group-media/dees-pdf-shared/utils.ts

@@ -21,9 +21,9 @@ export function throttle<T extends (...args: any[]) => any>(
 ): (...args: Parameters<T>) => void {
   let inThrottle: boolean;
 
-  return function executedFunction(...args: Parameters<T>) {
+  return (...args: Parameters<T>) => {
     if (!inThrottle) {
-      func.apply(this, args);
+      func(...args);
       inThrottle = true;
       setTimeout(() => inThrottle = false, limit);
     }

package/ts_web/elements/00group-media/dees-tile-pdf/demo.ts

@@ -7,7 +7,7 @@ export const demo = () => {
   ];
 
   const generateGridItems = (count: number) => {
-    const items = [];
+    const items: ReturnType<typeof html>[] = [];
     for (let i = 0; i < count; i++) {
       const pdfUrl = samplePdfs[i % samplePdfs.length];
       items.push(html`

package/ts_web/elements/00group-overlay/dees-contextmenu/dees-contextmenu.ts

@@ -130,7 +130,7 @@ export class DeesContextmenu extends DeesElement {
     type: Array,
   })
   accessor menuItems: (plugins.tsclass.website.IMenuItem & { shortcut?: string; disabled?: boolean; submenu?: (plugins.tsclass.website.IMenuItem & { shortcut?: string; disabled?: boolean } | { divider: true })[]; divider?: never } | { divider: true })[] = [];
-  windowLayer: DeesWindowLayer;
+  windowLayer!: DeesWindowLayer;
   
   private submenu: DeesContextmenu | null = null;
   private submenuTimeout: any = null;
@@ -278,7 +278,7 @@ export class DeesContextmenu extends DeesElement {
   }
   
   private handleKeydown = (event: KeyboardEvent) => {
-    const menuItems = Array.from(this.shadowRoot.querySelectorAll('.menuitem:not(.disabled)'));
+    const menuItems = Array.from(this.shadowRoot!.querySelectorAll('.menuitem:not(.disabled)'));
     const currentIndex = menuItems.findIndex(item => item.matches(':hover'));
     
     switch (event.key) {
@@ -352,7 +352,7 @@ export class DeesContextmenu extends DeesElement {
     if (!menuItem.submenu || menuItem.submenu.length === 0) return;
     
     // Find the menu item element
-    const menuItems = Array.from(this.shadowRoot.querySelectorAll('.menuitem'));
+    const menuItems = Array.from(this.shadowRoot!.querySelectorAll('.menuitem'));
     const menuItemElement = menuItems.find(el => el.querySelector('.menuitem-text')?.textContent === menuItem.name) as HTMLElement;
     if (!menuItemElement) return;