@shival99/z-ui 2.4.7 → 2.4.9

package/fesm2022/shival99-z-ui-components-z-table.mjs

@@ -10687,15 +10687,51 @@ class ZTableComponent {
         if (cells.length === 0) {
             return null;
         }
+        // The rendered cell is constrained by `table-layout: fixed`, so its scrollWidth includes
+        // the current column width. Measure a detached copy with all ellipsis constraints removed;
+        // otherwise every autosize click adds the cell padding to the previous width.
+        const measurementContainer = this._document.createElement('div');
+        measurementContainer.className = 'z-table-autosize-measure';
+        measurementContainer.style.cssText =
+            'position:absolute;left:-100000px;top:-100000px;width:max-content;height:0;overflow:visible;visibility:hidden;pointer-events:none;';
+        host.appendChild(measurementContainer);
         let width = 0;
-        for (let index = 0; index < cells.length; index++) {
-            const cell = cells.item(index);
-            width = Math.max(width, Math.ceil(cell.scrollWidth));
-        }
-        if (width <= 0) {
-            return null;
-        }
-        return width + 24;
+        try {
+            for (let index = 0; index < cells.length; index++) {
+                const cell = cells.item(index);
+                const clone = cell.cloneNode(true);
+                clone.style.setProperty('display', 'inline-block', 'important');
+                clone.style.setProperty('position', 'absolute', 'important');
+                clone.style.setProperty('width', 'max-content', 'important');
+                clone.style.setProperty('min-width', '0', 'important');
+                clone.style.setProperty('max-width', 'none', 'important');
+                clone.style.setProperty('overflow', 'visible', 'important');
+                clone.style.setProperty('white-space', 'nowrap', 'important');
+                const cloneElements = [clone, ...clone.querySelectorAll('*')];
+                for (const element of cloneElements) {
+                    element.style.setProperty('width', 'max-content', 'important');
+                    element.style.setProperty('max-width', 'none', 'important');
+                    element.style.setProperty('overflow', 'visible', 'important');
+                    element.style.setProperty('text-overflow', 'clip', 'important');
+                    element.style.setProperty('white-space', 'nowrap', 'important');
+                }
+                measurementContainer.appendChild(clone);
+                const intrinsicWidth = cloneElements.reduce((maxWidth, element) => {
+                    return Math.max(maxWidth, element.scrollWidth);
+                }, 0);
+                const cellStyle = getComputedStyle(cell);
+                const horizontalInset = Number.parseFloat(cellStyle.paddingLeft) +
+                    Number.parseFloat(cellStyle.paddingRight) +
+                    Number.parseFloat(cellStyle.borderLeftWidth) +
+                    Number.parseFloat(cellStyle.borderRightWidth);
+                width = Math.max(width, Math.ceil(intrinsicWidth + horizontalInset));
+                clone.remove();
+            }
+        }
+        finally {
+            measurementContainer.remove();
+        }
+        return width > 0 ? width : null;
     }
     _defaultColumnPinning() {
         const initialPinning = this.zConfig().initialState?.columnPinning;