@churchillliving/se-ui-toolkit 6.56.19 → 6.56.21

package/fesm2022/churchillliving-se-ui-toolkit.mjs

@@ -10978,39 +10978,90 @@ class GridComponent {
         }
         this.saveColumnWidths();
     }
+    onColumnHeaderDblClick(event, columnHeader, dt) {
+        event.preventDefault();
+        event.stopPropagation();
+        console.log('Double click detected - auto-fitting all columns');
+        // Auto-fit all columns instead of just the one clicked
+        this.selectedColumns.forEach((column) => {
+            this.autoFitColumnWidth(column.header, dt);
+        });
+    }
     autoFitColumnWidth(columnHeader, dt) {
-        if (!dt?.el?.nativeElement?.id)
-            return;
-        this.gridId = dt.el.nativeElement.id;
-        const columnIndex = this.selectedColumns.findIndex((col) => col.header?.toLowerCase() === columnHeader?.toLowerCase());
-        if (columnIndex < 0)
+        if (!columnHeader || !dt?.el?.nativeElement) {
+            console.log('Missing columnHeader or dt');
             return;
-        const column = this.selectedColumns[columnIndex];
+        }
         const table = dt.el.nativeElement;
-        const cells = table.querySelectorAll(`td:nth-child(${columnIndex + 1}), th:nth-child(${columnIndex + 1})`);
-        let maxWidth = 50;
-        cells.forEach((cell) => {
-            const scrollWidth = cell.scrollWidth;
-            if (scrollWidth > maxWidth) {
-                maxWidth = scrollWidth;
+        const headerCell = table.querySelector(`th[id="${columnHeader}"]`);
+        if (!headerCell) {
+            console.log('Header cell not found for:', columnHeader);
+            return;
+        }
+        const headerRow = headerCell.parentElement;
+        if (!headerRow) {
+            console.log('Header row not found');
+            return;
+        }
+        const cellIndex = Array.from(headerRow.children).indexOf(headerCell);
+        if (cellIndex < 0) {
+            console.log('Cell index not found');
+            return;
+        }
+        const tbody = table.querySelector('tbody');
+        if (!tbody) {
+            console.log('tbody not found');
+            return;
+        }
+        const rows = tbody.querySelectorAll('tr');
+        let maxWidth = headerCell.scrollWidth;
+        console.log('Header cell scrollWidth:', maxWidth);
+        rows.forEach((row) => {
+            const cell = row.children[cellIndex];
+            if (cell) {
+                const scrollWidth = cell.scrollWidth;
+                console.log('Cell scrollWidth:', scrollWidth);
+                if (scrollWidth > maxWidth) {
+                    maxWidth = scrollWidth;
+                }
             }
         });
-        const padding = 8;
-        const calculatedWidth = maxWidth + padding;
-        column['customWidth'] = calculatedWidth;
-        this.saveColumnWidths();
-    }
-    onColumnHeaderDblClick(event, columnHeader, dt) {
-        const target = event.target;
-        const th = target.closest('th');
-        if (!th)
-            return;
-        const rect = th.getBoundingClientRect();
-        const threshold = 10;
-        const distanceFromRight = rect.right - event.clientX;
-        if (distanceFromRight <= threshold) {
-            event.preventDefault();
-            this.autoFitColumnWidth(columnHeader, dt);
+        const column = this.selectedColumns.find((col) => col.header?.toLowerCase() === columnHeader?.toLowerCase());
+        if (column) {
+            const padding = 12;
+            const newWidth = Math.ceil(maxWidth + padding);
+            console.log('Setting column width to:', newWidth);
+            // Remove width constraints from CSS for this column
+            const styleSheets = document.styleSheets;
+            for (let i = 0; i < styleSheets.length; i++) {
+                try {
+                    const rules = styleSheets[i].cssRules;
+                    for (let j = rules.length - 1; j >= 0; j--) {
+                        const rule = rules[j];
+                        if (rule.selectorText && rule.selectorText.includes(`nth-child(${cellIndex + 1})`) &&
+                            rule.selectorText.includes('GridComponentTable')) {
+                            console.log('Removing CSS rule:', rule.selectorText);
+                            styleSheets[i].deleteRule(j);
+                        }
+                    }
+                }
+                catch (e) {
+                    // CORS errors on external stylesheets, ignore
+                }
+            }
+            column['customWidth'] = newWidth;
+            column['columnWidth'] = newWidth;
+            // Update through data binding
+            this.selectedColumns = [...this.selectedColumns];
+            this.saveColumnWidths();
+            // Force table recalculation
+            this.cdr.detectChanges();
+            setTimeout(() => {
+                this.cdr.detectChanges();
+            }, 50);
+        }
+        else {
+            console.log('Column not found in selectedColumns');
         }
     }
     saveColumnWidths(toggleColumns = []) {