@shival99/z-ui 2.0.7 → 2.0.8

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

@@ -201,7 +201,7 @@ class ZTableActionsComponent {
         </z-dropdown-menu>
       }
     </div>
-  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTrigger", "zTooltipType", "zTooltipSize", "zClass", "zShowDelay", "zHideDelay", "zArrow", "zDisabled", "zOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "component", type: ZDropdownMenuComponent, selector: "z-dropdown-menu", inputs: ["zItems", "zLabel", "zIcon", "zButtonType", "zPosition", "zButtonSize", "zOffset", "zMinWidth", "zMaxWidth", "zDisabled"], outputs: ["zOnItemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTrigger", "zTooltipType", "zTooltipSize", "zClass", "zShowDelay", "zHideDelay", "zArrow", "zDisabled", "zOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "component", type: ZDropdownMenuComponent, selector: "z-dropdown-menu", inputs: ["zItems", "zLabel", "zIcon", "zButtonType", "zPosition", "zButtonSize", "zOffset", "zMinWidth", "zMaxWidth", "zDisabled"], outputs: ["zOnItemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZTableActionsComponent, decorators: [{
             type: Component,
@@ -811,8 +811,13 @@ function columnConfigToColumnDef(config) {
         enableResizing: config.enableResizing,
         enablePinning: config.enablePinning,
         enableHiding: config.enableHiding,
-        filterType: filterConfig?.type,
-        filterOptions: filterConfig?.options,
+        filterValueType: filterConfig?.valueType,
+        filterUi: filterConfig?.ui,
+        filterAdvancedType: filterConfig?.advancedType ?? filterConfig?.filterType ?? filterConfig?.type,
+        filterLabel: filterConfig?.label,
+        filterOptions: filterConfig?.options ?? filterConfig?.filterOptions,
+        filterSelectConfig: filterConfig?.selectConfig,
+        filterOptionSource: filterConfig?.optionSource,
     };
     if (config.accessorKey) {
         columnDef.accessorKey = config.accessorKey;
@@ -843,128 +848,192 @@ function columnConfigToColumnDef(config) {
     if (!isLocalFilterMode) {
         columnDef.filterFn = () => true;
     }
-    if (isLocalFilterMode && !filterConfig?.filterFn && filterConfig?.type) {
-        switch (filterConfig.type) {
-            case 'select':
-                columnDef.filterFn = (row, columnId, filterValue) => {
-                    if (!filterValue || (Array.isArray(filterValue) && filterValue.length === 0)) {
-                        return true;
-                    }
-                    const cellValue = row.getValue(columnId);
-                    if (Array.isArray(filterValue)) {
-                        return filterValue.includes(cellValue);
-                    }
-                    return cellValue === filterValue;
-                };
-                break;
-            case 'multi-select':
-            case 'tags':
-                columnDef.filterFn = (row, columnId, filterValue) => {
-                    if (!filterValue || (Array.isArray(filterValue) && filterValue.length === 0)) {
-                        return true;
-                    }
-                    const cellValue = row.getValue(columnId);
-                    if (!Array.isArray(filterValue)) {
-                        return cellValue === filterValue;
-                    }
-                    const filterSet = new Set(filterValue);
-                    if (Array.isArray(cellValue)) {
-                        return cellValue.some(cv => filterSet.has(cv));
-                    }
-                    return filterSet.has(cellValue);
-                };
-                break;
-            case 'date':
-                columnDef.filterFn = (row, columnId, filterValue) => {
-                    if (!filterValue) {
-                        return true;
-                    }
-                    const cellValue = row.getValue(columnId);
-                    if (!cellValue) {
-                        return false;
-                    }
-                    const cellDate = cellValue instanceof Date ? cellValue : new Date(cellValue);
-                    const filterDate = filterValue instanceof Date ? filterValue : new Date(filterValue);
-                    if (isNaN(cellDate.getTime()) || isNaN(filterDate.getTime())) {
-                        return false;
-                    }
-                    return (cellDate.getFullYear() === filterDate.getFullYear() &&
-                        cellDate.getMonth() === filterDate.getMonth() &&
-                        cellDate.getDate() === filterDate.getDate());
-                };
-                break;
-            case 'date-range':
-                columnDef.filterFn = (row, columnId, filterValue) => {
-                    if (!filterValue || typeof filterValue !== 'object') {
-                        return true;
-                    }
-                    const { start, end } = filterValue;
-                    if (!start && !end) {
-                        return true;
-                    }
-                    const cellValue = row.getValue(columnId);
-                    if (!cellValue) {
-                        return false;
-                    }
-                    const cellDate = cellValue instanceof Date ? cellValue : new Date(cellValue);
-                    if (isNaN(cellDate.getTime())) {
-                        return false;
-                    }
-                    const cellDateOnly = new Date(cellDate.getFullYear(), cellDate.getMonth(), cellDate.getDate());
-                    if (start) {
-                        const startDate = start instanceof Date ? start : new Date(start);
-                        if (!isNaN(startDate.getTime())) {
-                            const startDateOnly = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate());
-                            if (cellDateOnly < startDateOnly) {
-                                return false;
-                            }
-                        }
-                    }
-                    if (end) {
-                        const endDate = end instanceof Date ? end : new Date(end);
-                        if (!isNaN(endDate.getTime())) {
-                            const endDateOnly = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate());
-                            if (cellDateOnly > endDateOnly) {
-                                return false;
-                            }
-                        }
-                    }
+    if (isLocalFilterMode && !filterConfig?.filterFn && filterConfig?.enabled) {
+        columnDef.filterFn = (row, columnId, filterValue) => {
+            if (!filterValue) {
+                return true;
+            }
+            const filters = Array.isArray(filterValue) ? filterValue : [filterValue];
+            const hasStructuredFilters = filters.some(item => item && typeof item === 'object' && 'operator' in item);
+            if (!hasStructuredFilters) {
+                const cellValue = row.getValue(columnId);
+                const legacyType = filterConfig?.advancedType ?? filterConfig?.filterType ?? filterConfig?.type;
+                const legacyResult = evaluateLegacyTableFilter(cellValue, filterValue, legacyType);
+                if (legacyResult !== null) {
+                    return legacyResult;
+                }
+                if (cellValue === null || cellValue === undefined) {
+                    return false;
+                }
+                return String(cellValue).toLowerCase().includes(String(filterValue).toLowerCase());
+            }
+            const cellValue = row.getValue(columnId);
+            const results = filters.map(item => {
+                if (!item || typeof item !== 'object' || !('operator' in item)) {
                     return true;
-                };
-                break;
-            case 'range':
-                columnDef.filterFn = (row, columnId, filterValue) => {
-                    if (!filterValue || !Array.isArray(filterValue)) {
-                        return true;
-                    }
-                    const [min, max] = filterValue;
-                    if (min === undefined && max === undefined) {
-                        return true;
-                    }
-                    const cellValue = row.getValue(columnId);
-                    if (cellValue === null || cellValue === undefined) {
-                        return false;
-                    }
-                    const numValue = typeof cellValue === 'number' ? cellValue : Number(cellValue);
-                    if (isNaN(numValue)) {
-                        return false;
-                    }
-                    if (min !== undefined && numValue < min) {
-                        return false;
-                    }
-                    if (max !== undefined && numValue > max) {
-                        return false;
-                    }
+                }
+                const { operator, value } = item;
+                const isEmptyValue = cellValue === '' || cellValue === null || cellValue === undefined;
+                if (operator === 'empty') {
+                    return isEmptyValue;
+                }
+                if (operator === 'notEmpty') {
+                    return !isEmptyValue;
+                }
+                if (value === null || value === undefined || value === '') {
                     return true;
-                };
-                break;
-        }
+                }
+                const cellText = String(cellValue).toLowerCase();
+                const filterText = String(value).toLowerCase();
+                if (operator === 'contains') {
+                    return cellText.includes(filterText);
+                }
+                if (operator === 'notContains') {
+                    return !cellText.includes(filterText);
+                }
+                if (operator === 'startsWith') {
+                    return cellText.startsWith(filterText);
+                }
+                if (operator === 'endsWith') {
+                    return cellText.endsWith(filterText);
+                }
+                if (operator === 'equals') {
+                    return cellText === filterText;
+                }
+                if (operator === 'notEquals') {
+                    return cellText !== filterText;
+                }
+                const cellNumber = typeof cellValue === 'number' ? cellValue : Number(cellValue);
+                const filterNumber = typeof value === 'number' ? value : Number(value);
+                if (isNaN(cellNumber) || isNaN(filterNumber)) {
+                    return false;
+                }
+                if (operator === 'greaterThan') {
+                    return cellNumber > filterNumber;
+                }
+                if (operator === 'greaterThanOrEqual') {
+                    return cellNumber >= filterNumber;
+                }
+                if (operator === 'lessThan') {
+                    return cellNumber < filterNumber;
+                }
+                return cellNumber <= filterNumber;
+            });
+            return results.reduce((accumulator, result, index) => {
+                if (index === 0) {
+                    return result;
+                }
+                const condition = filters[index];
+                if (condition.joinWithPrev === 'or') {
+                    return accumulator || result;
+                }
+                return accumulator && result;
+            }, true);
+        };
     }
     if (config.columns && config.columns.length > 0) {
         columnDef.columns = config.columns.map(subConfig => columnConfigToColumnDef(subConfig));
     }
     return columnDef;
 }
+function evaluateLegacyTableFilter(cellValue, filterValue, filterType) {
+    if (!filterType) {
+        return null;
+    }
+    if (filterType === 'range') {
+        if (!Array.isArray(filterValue)) {
+            return false;
+        }
+        const [min, max] = filterValue;
+        const current = typeof cellValue === 'number' ? cellValue : Number(cellValue);
+        if (isNaN(current)) {
+            return false;
+        }
+        const hasMin = min !== null && min !== undefined && min !== '';
+        const hasMax = max !== null && max !== undefined && max !== '';
+        const minValue = hasMin ? Number(min) : null;
+        const maxValue = hasMax ? Number(max) : null;
+        if (minValue !== null && current < minValue) {
+            return false;
+        }
+        if (maxValue !== null && current > maxValue) {
+            return false;
+        }
+        return hasMin || hasMax;
+    }
+    if (filterType === 'select') {
+        if (filterValue === null || filterValue === undefined || filterValue === '') {
+            return true;
+        }
+        return String(cellValue ?? '') === String(filterValue);
+    }
+    if (filterType === 'multi-select' || filterType === 'tags') {
+        if (!Array.isArray(filterValue) || filterValue.length === 0) {
+            return true;
+        }
+        const expectedValues = filterValue.map(value => String(value));
+        if (Array.isArray(cellValue)) {
+            return cellValue.map(value => String(value)).some(value => expectedValues.includes(value));
+        }
+        return expectedValues.includes(String(cellValue ?? ''));
+    }
+    if (filterType === 'date') {
+        const currentDate = toDateValue(cellValue);
+        const selectedDate = toDateValue(filterValue);
+        if (!currentDate || !selectedDate) {
+            return false;
+        }
+        return isSameDay(currentDate, selectedDate);
+    }
+    if (filterType === 'date-range') {
+        const currentDate = toDateValue(cellValue);
+        if (!currentDate || !filterValue || typeof filterValue !== 'object') {
+            return false;
+        }
+        const { start, end } = filterValue;
+        const startDate = toDateValue(start);
+        const endDate = toDateValue(end);
+        if (startDate && currentDate < startOfDay(startDate)) {
+            return false;
+        }
+        if (endDate && currentDate > endOfDay(endDate)) {
+            return false;
+        }
+        return !!(startDate || endDate);
+    }
+    if (filterType === 'time') {
+        const currentDate = toDateValue(cellValue);
+        const selectedDate = toDateValue(filterValue);
+        if (!currentDate || !selectedDate) {
+            return false;
+        }
+        return (currentDate.getHours() === selectedDate.getHours() &&
+            currentDate.getMinutes() === selectedDate.getMinutes() &&
+            currentDate.getSeconds() === selectedDate.getSeconds());
+    }
+    return null;
+}
+function toDateValue(value) {
+    if (value instanceof Date) {
+        return isNaN(value.getTime()) ? null : value;
+    }
+    if (typeof value === 'number' || typeof value === 'string') {
+        const parsed = new Date(value);
+        return isNaN(parsed.getTime()) ? null : parsed;
+    }
+    return null;
+}
+function isSameDay(left, right) {
+    return (left.getFullYear() === right.getFullYear() &&
+        left.getMonth() === right.getMonth() &&
+        left.getDate() === right.getDate());
+}
+function startOfDay(value) {
+    return new Date(value.getFullYear(), value.getMonth(), value.getDate(), 0, 0, 0, 0);
+}
+function endOfDay(value) {
+    return new Date(value.getFullYear(), value.getMonth(), value.getDate(), 23, 59, 59, 999);
+}
 // ─── Generic Utility Helpers ─────────────────────────────────────────────────
 /** Resolve a value that may be static or a function of the row data */
 const resolveConfigValue = (config, row, defaultValue) => {
@@ -1303,7 +1372,7 @@ class ZTableEditCellComponent {
         />
       }
     }
-  `, isInline: true, styles: [":host{display:block;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZInputComponent, selector: "z-input", inputs: ["class", "zType", "zSize", "zAlign", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zPrefix", "zSuffix", "zMin", "zMax", "zStep", "zShowArrows", "zMask", "zDecimalPlaces", "zAllowNegative", "zThousandSeparator", "zDecimalMarker", "zValidators", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zShowPasswordToggle", "zSearch", "zDebounce", "zAutofocus", "zAutoComplete", "zAllowClear", "zAutoSizeContent", "zRows", "zResize", "zMaxLength", "zAutoSuggest", "zColorConfig"], outputs: ["zOnSearch", "zOnChange", "zOnBlur", "zOnFocus", "zOnKeydown", "zOnEnter", "zOnColorCollapse", "zControl", "zEvent"], exportAs: ["zInput"] }, { kind: "component", type: ZSelectComponent, selector: "z-select", inputs: ["class", "zMode", "zSize", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zLoading", "zPrefix", "zAllowClear", "zWrap", "zShowSearch", "zPlaceholderSearch", "zDebounce", "zNotFoundText", "zEmptyText", "zEmptyIcon", "zMaxTagCount", "zDropdownMaxHeight", "zOptionHeight", "zVirtualScroll", "zShowAction", "zOptions", "zConfig", "zTranslateLabels", "zKey", "zSearchServer", "zLoadingMore", "zEnableLoadMore", "zScrollDistance", "zMaxVisible", "zScrollClose", "zPosition", "zSelectedTemplate", "zOptionTemplate", "zActionTemplate", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zValidators"], outputs: ["zOnSearch", "zOnLoadMore", "zOnBlur", "zOnFocus", "zControl", "zEvent"], exportAs: ["zSelect"] }, { kind: "component", type: ZCalendarComponent, selector: "z-calendar", inputs: ["class", "zMode", "zSize", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zShowTime", "zTimeFormat", "zShowHour", "zShowMinute", "zShowSecond", "zQuickSelect", "zAllowClear", "zFormat", "zMinDate", "zMaxDate", "zValueType", "zValidators", "zShowOk", "zOkText", "zShowCancel", "zCancelText", "zDisabledDate", "zScrollClose", "zDefaultTime", "zRangeDefaultTime"], outputs: ["zControl", "zChange", "zOnBlur", "zOnFocus", "zEvent"], exportAs: ["zCalendar"] }, { kind: "component", type: ZCheckboxComponent, selector: "z-checkbox", inputs: ["class", "zType", "zSize", "zLabel", "zText", "zDisabled", "zIndeterminate", "zValue", "zOptions", "zOrientation", "zCheckAll", "zCheckAllText", "zChecked", "zGroupValue"], outputs: ["zChange", "zGroupChange", "zOnBlur", "zOnFocus", "zControl", "zEvent", "zCheckedChange", "zGroupValueChange"] }, { kind: "component", type: ZSwitchComponent, selector: "z-switch", inputs: ["class", "zSwitchClass", "zThumbClass", "zSize", "zMode", "zLabel", "zText", "zCheckedText", "zUncheckedText", "zCheckedIcon", "zUncheckedIcon", "zDisabled", "zLoading", "zTextPosition", "zWave", "zChecked"], outputs: ["zChange", "zOnBlur", "zOnFocus", "zEvent", "zCheckedChange"] }, { kind: "component", type: ZAutocompleteComponent, selector: "z-autocomplete", inputs: ["class", "zOptions", "zConfig", "zSize", "zType", "zLabel", "zLabelClass", "zPlaceholder", "zDisabled", "zReadonly", "zLoading", "zRequired", "zPrefix", "zSuffix", "zAllowClear", "zVirtualScroll", "zDynamicSize", "zOptionHeight", "zHeightExpand", "zMaxVisible", "zResetOnSelect", "zEmptyText", "zEmptyIcon", "zNoDataText", "zNoDataIcon", "zAllowCustomValue", "zDebounceTime", "zLoadingMore", "zEnableLoadMore", "zScrollDistance", "zKey", "zOptionTemplate"], outputs: ["zOnSearch", "zOnLoadMore", "zOnSelect", "zOnEnter", "zOnCommit", "zValueChange", "zOnBlur", "zOnFocus", "zControl", "zEvent"], exportAs: ["zAutocomplete"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZInputComponent, selector: "z-input", inputs: ["class", "zType", "zSize", "zAlign", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zPrefix", "zSuffix", "zMin", "zMax", "zStep", "zShowArrows", "zMask", "zDecimalPlaces", "zAllowNegative", "zThousandSeparator", "zDecimalMarker", "zValidators", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zShowPasswordToggle", "zSearch", "zDebounce", "zAutofocus", "zAutoComplete", "zAllowClear", "zAutoSizeContent", "zRows", "zResize", "zMaxLength", "zAutoSuggest", "zColorConfig"], outputs: ["zOnSearch", "zOnChange", "zOnBlur", "zOnFocus", "zOnKeydown", "zOnEnter", "zOnColorCollapse", "zControl", "zEvent"], exportAs: ["zInput"] }, { kind: "component", type: ZSelectComponent, selector: "z-select", inputs: ["class", "zMode", "zSize", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zLoading", "zPrefix", "zAllowClear", "zWrap", "zShowSearch", "zPlaceholderSearch", "zDebounce", "zNotFoundText", "zEmptyText", "zEmptyIcon", "zMaxTagCount", "zDropdownMaxHeight", "zOptionHeight", "zVirtualScroll", "zShowAction", "zOptions", "zConfig", "zTranslateLabels", "zKey", "zSearchServer", "zLoadingMore", "zEnableLoadMore", "zScrollDistance", "zMaxVisible", "zScrollClose", "zPosition", "zSelectedTemplate", "zOptionTemplate", "zActionTemplate", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zValidators"], outputs: ["zOnSearch", "zOnLoadMore", "zOnBlur", "zOnFocus", "zControl", "zEvent"], exportAs: ["zSelect"] }, { kind: "component", type: ZCalendarComponent, selector: "z-calendar", inputs: ["class", "zMode", "zSize", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zShowTime", "zTimeFormat", "zShowHour", "zShowMinute", "zShowSecond", "zQuickSelect", "zAllowEdit", "zShortTime", "zAllowClear", "zFormat", "zMinDate", "zMaxDate", "zValueType", "zValidators", "zShowOk", "zOkText", "zShowCancel", "zCancelText", "zDisabledDate", "zScrollClose", "zDefaultTime", "zRangeDefaultTime"], outputs: ["zControl", "zChange", "zOnBlur", "zOnFocus", "zEvent"], exportAs: ["zCalendar"] }, { kind: "component", type: ZCheckboxComponent, selector: "z-checkbox", inputs: ["class", "zType", "zSize", "zLabel", "zText", "zDisabled", "zIndeterminate", "zValue", "zOptions", "zOrientation", "zCheckAll", "zCheckAllText", "zChecked", "zGroupValue"], outputs: ["zChange", "zGroupChange", "zOnBlur", "zOnFocus", "zControl", "zEvent", "zCheckedChange", "zGroupValueChange"] }, { kind: "component", type: ZSwitchComponent, selector: "z-switch", inputs: ["class", "zSwitchClass", "zThumbClass", "zSize", "zMode", "zLabel", "zText", "zCheckedText", "zUncheckedText", "zCheckedIcon", "zUncheckedIcon", "zDisabled", "zLoading", "zTextPosition", "zWave", "zChecked"], outputs: ["zChange", "zOnBlur", "zOnFocus", "zEvent", "zCheckedChange"] }, { kind: "component", type: ZAutocompleteComponent, selector: "z-autocomplete", inputs: ["class", "zOptions", "zConfig", "zSize", "zType", "zLabel", "zLabelClass", "zPlaceholder", "zDisabled", "zReadonly", "zLoading", "zRequired", "zPrefix", "zSuffix", "zAllowClear", "zVirtualScroll", "zDynamicSize", "zOptionHeight", "zHeightExpand", "zMaxVisible", "zResetOnSelect", "zEmptyText", "zEmptyIcon", "zNoDataText", "zNoDataIcon", "zAllowCustomValue", "zDebounceTime", "zLoadingMore", "zEnableLoadMore", "zScrollDistance", "zKey", "zOptionTemplate"], outputs: ["zOnSearch", "zOnLoadMore", "zOnSelect", "zOnEnter", "zOnCommit", "zValueChange", "zOnBlur", "zOnFocus", "zControl", "zEvent"], exportAs: ["zAutocomplete"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZTableEditCellComponent, decorators: [{
             type: Component,
@@ -1452,378 +1521,1114 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                     }, styles: [":host{display:block;width:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { zRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRow", required: true }] }], zRowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRowId", required: true }] }], zRowIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRowIndex", required: true }] }], zColumnId: [{ type: i0.Input, args: [{ isSignal: true, alias: "zColumnId", required: true }] }], zValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "zValue", required: false }] }], zEditConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "zEditConfig", required: false }] }], zRowUpdate: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRowUpdate", required: false }] }], zChange: [{ type: i0.Output, args: ["zChange"] }] } });
 
+const Z_TABLE_TEXT_OPERATORS = [
+    { labelKey: 'i18n_z_ui_table_filter_operator_contains', value: 'contains' },
+    { labelKey: 'i18n_z_ui_table_filter_operator_not_contains', value: 'notContains' },
+    { labelKey: 'i18n_z_ui_table_filter_operator_starts_with', value: 'startsWith' },
+    { labelKey: 'i18n_z_ui_table_filter_operator_ends_with', value: 'endsWith' },
+    { labelKey: 'i18n_z_ui_table_filter_operator_equals', value: 'equals' },
+    { labelKey: 'i18n_z_ui_table_filter_operator_not_equals', value: 'notEquals' },
+    { labelKey: 'i18n_z_ui_table_filter_operator_empty', value: 'empty' },
+    { labelKey: 'i18n_z_ui_table_filter_operator_not_empty', value: 'notEmpty' },
+];
+const Z_TABLE_NUMBER_OPERATORS = [
+    { labelKey: 'i18n_z_ui_table_filter_operator_equals', value: 'equals' },
+    { labelKey: 'i18n_z_ui_table_filter_operator_not_equals', value: 'notEquals' },
+    { labelKey: 'i18n_z_ui_table_filter_operator_greater_than', value: 'greaterThan' },
+    { labelKey: 'i18n_z_ui_table_filter_operator_greater_than_or_equal', value: 'greaterThanOrEqual' },
+    { labelKey: 'i18n_z_ui_table_filter_operator_less_than', value: 'lessThan' },
+    { labelKey: 'i18n_z_ui_table_filter_operator_less_than_or_equal', value: 'lessThanOrEqual' },
+    { labelKey: 'i18n_z_ui_table_filter_operator_empty', value: 'empty' },
+    { labelKey: 'i18n_z_ui_table_filter_operator_not_empty', value: 'notEmpty' },
+];
+const Z_TABLE_SORT_OPTIONS = [
+    { label: 'i18n_z_ui_table_clear_sort', value: 'none' },
+    { label: 'i18n_z_ui_table_sort_asc_short', value: 'asc' },
+    { label: 'i18n_z_ui_table_sort_desc_short', value: 'desc' },
+    { label: 'i18n_z_ui_table_sort_az', value: 'az' },
+    { label: 'i18n_z_ui_table_sort_za', value: 'za' },
+];
+const Z_TABLE_MAX_FILTER_CONDITIONS = 5;
+
 class ZTableFilterComponent {
     zColumn = input.required(...(ngDevMode ? [{ debugName: "zColumn" }] : []));
     zTable = input.required(...(ngDevMode ? [{ debugName: "zTable" }] : []));
-    _debounceTimeout = null;
-    _debounceMs = 300;
     _columnDef = computed(() => this.zColumn().columnDef, ...(ngDevMode ? [{ debugName: "_columnDef" }] : []));
-    filterType = computed(() => this._columnDef().filterType, ...(ngDevMode ? [{ debugName: "filterType" }] : []));
+    _appliedFilterConditions = signal(null, ...(ngDevMode ? [{ debugName: "_appliedFilterConditions" }] : []));
+    _appliedLegacyFilterValue = signal(null, ...(ngDevMode ? [{ debugName: "_appliedLegacyFilterValue" }] : []));
+    _appliedSortState = signal(null, ...(ngDevMode ? [{ debugName: "_appliedSortState" }] : []));
+    sortOptions = computed(() => Z_TABLE_SORT_OPTIONS, ...(ngDevMode ? [{ debugName: "sortOptions" }] : []));
+    draftFilters = signal([], ...(ngDevMode ? [{ debugName: "draftFilters" }] : []));
+    draftLegacyFilterValue = signal(undefined, ...(ngDevMode ? [{ debugName: "draftLegacyFilterValue" }] : []));
+    draftSortState = signal(false, ...(ngDevMode ? [{ debugName: "draftSortState" }] : []));
     columnFilterValue = computed(() => this.zColumn().getFilterValue(), ...(ngDevMode ? [{ debugName: "columnFilterValue" }] : []));
-    minValue = computed(() => this.zColumn().getFacetedMinMaxValues()?.[0] ?? '', ...(ngDevMode ? [{ debugName: "minValue" }] : []));
-    maxValue = computed(() => this.zColumn().getFacetedMinMaxValues()?.[1] ?? '', ...(ngDevMode ? [{ debugName: "maxValue" }] : []));
+    effectiveFilterValue = computed(() => {
+        const localValue = this._appliedLegacyFilterValue();
+        return localValue ? localValue.value : this.columnFilterValue();
+    }, ...(ngDevMode ? [{ debugName: "effectiveFilterValue" }] : []));
+    sortState = computed(() => this.zColumn().getIsSorted(), ...(ngDevMode ? [{ debugName: "sortState" }] : []));
+    effectiveSortState = computed(() => {
+        const localSort = this._appliedSortState();
+        return localSort === null ? this.sortState() : localSort;
+    }, ...(ngDevMode ? [{ debugName: "effectiveSortState" }] : []));
+    canSort = computed(() => this.zColumn().getCanSort(), ...(ngDevMode ? [{ debugName: "canSort" }] : []));
+    canFilter = computed(() => this.zColumn().getCanFilter(), ...(ngDevMode ? [{ debugName: "canFilter" }] : []));
+    filterUi = computed(() => this._normalizeFilterUi(this._columnDef().filterUi, this._columnDef().filterAdvancedType, this.canFilter()), ...(ngDevMode ? [{ debugName: "filterUi" }] : []));
+    advancedType = computed(() => this._normalizeAdvancedType(this._columnDef().filterAdvancedType, this._columnDef().filterValueType), ...(ngDevMode ? [{ debugName: "advancedType" }] : []));
+    isAdvancedUi = computed(() => this.filterUi() !== 'basic', ...(ngDevMode ? [{ debugName: "isAdvancedUi" }] : []));
+    isBuilderMode = computed(() => this.advancedType() === 'text' || this.advancedType() === 'number', ...(ngDevMode ? [{ debugName: "isBuilderMode" }] : []));
+    legacyAdvancedType = computed(() => this.advancedType(), ...(ngDevMode ? [{ debugName: "legacyAdvancedType" }] : []));
+    popoverContentClass = computed(() => 'w-90', ...(ngDevMode ? [{ debugName: "popoverContentClass" }] : []));
+    popoverWidth = computed(() => 360, ...(ngDevMode ? [{ debugName: "popoverWidth" }] : []));
+    sortLabelKey = computed(() => 'i18n_z_ui_table_sort', ...(ngDevMode ? [{ debugName: "sortLabelKey" }] : []));
+    legacyFilterLabelKey = computed(() => this._columnDef().filterLabel ?? this._defaultLegacyFilterLabelKey(), ...(ngDevMode ? [{ debugName: "legacyFilterLabelKey" }] : []));
+    filterConditions = computed(() => {
+        const localConditions = this._appliedFilterConditions();
+        if (localConditions) {
+            return localConditions;
+        }
+        return this._normalizeFilterConditions(this.columnFilterValue());
+    }, ...(ngDevMode ? [{ debugName: "filterConditions" }] : []));
+    filterConditionViews = computed(() => this.draftFilters().map((condition, index, filters) => ({
+        ...condition,
+        inputType: this.advancedType() === 'number' ? 'number' : 'text',
+        isJoinGroupStart: filters.length > 1 &&
+            (index === 0 || (index > 1 && condition.joinWithPrev !== (filters[index - 1]?.joinWithPrev ?? 'and'))),
+        isValueLess: this._isValueLessOperator(condition.operator),
+        joinLabelKey: (index === 0 ? filters[1]?.joinWithPrev : condition.joinWithPrev) === 'or'
+            ? 'i18n_z_ui_upload_or'
+            : 'i18n_z_ui_table_filter_and',
+        joinTone: (index === 0 ? filters[1]?.joinWithPrev : condition.joinWithPrev) === 'or' ? 'or' : 'and',
+        operatorOptions: this._operatorOptionsForDraft(condition.id),
+    })), ...(ngDevMode ? [{ debugName: "filterConditionViews" }] : []));
+    canAddFilterCondition = computed(() => this.draftFilters().length < Z_TABLE_MAX_FILTER_CONDITIONS, ...(ngDevMode ? [{ debugName: "canAddFilterCondition" }] : []));
+    filterBadgeCount = computed(() => {
+        const filterCount = this.isBuilderMode() ? this.filterConditions().length : this._hasLegacyFilterValue() ? 1 : 0;
+        return filterCount + (this.effectiveSortState() ? 1 : 0);
+    }, ...(ngDevMode ? [{ debugName: "filterBadgeCount" }] : []));
+    hasFilterValue = computed(() => this.isBuilderMode() ? this.filterConditions().length > 0 : this._hasLegacyFilterValue(), ...(ngDevMode ? [{ debugName: "hasFilterValue" }] : []));
+    isActive = computed(() => !!this.effectiveSortState() || this.hasFilterValue(), ...(ngDevMode ? [{ debugName: "isActive" }] : []));
+    draftSortValue = computed(() => this.draftSortState() || 'none', ...(ngDevMode ? [{ debugName: "draftSortValue" }] : []));
     rangeMinValue = computed(() => {
-        const value = this.columnFilterValue();
+        const value = this.draftLegacyFilterValue();
         if (!Array.isArray(value)) {
             return '';
         }
         return value[0] ?? '';
     }, ...(ngDevMode ? [{ debugName: "rangeMinValue" }] : []));
     rangeMaxValue = computed(() => {
-        const value = this.columnFilterValue();
+        const value = this.draftLegacyFilterValue();
         if (!Array.isArray(value)) {
             return '';
         }
         return value[1] ?? '';
     }, ...(ngDevMode ? [{ debugName: "rangeMaxValue" }] : []));
     dateValue = computed(() => {
-        const value = this.columnFilterValue();
-        if (value instanceof Date) {
-            return value;
-        }
-        return null;
+        const value = this.draftLegacyFilterValue();
+        return value instanceof Date ? value : null;
     }, ...(ngDevMode ? [{ debugName: "dateValue" }] : []));
+    timeValue = computed(() => {
+        const value = this.draftLegacyFilterValue();
+        return value instanceof Date ? value : null;
+    }, ...(ngDevMode ? [{ debugName: "timeValue" }] : []));
     dateRangeValue = computed(() => {
-        const value = this.columnFilterValue();
+        const value = this.draftLegacyFilterValue();
         if (value && typeof value === 'object' && 'start' in value && 'end' in value) {
             return value;
         }
         return null;
     }, ...(ngDevMode ? [{ debugName: "dateRangeValue" }] : []));
     selectValue = computed(() => {
-        const value = this.columnFilterValue();
+        const value = this.draftLegacyFilterValue();
         if (value === null || value === undefined || value === '') {
             return null;
         }
         return value;
     }, ...(ngDevMode ? [{ debugName: "selectValue" }] : []));
     multiSelectValue = computed(() => {
-        const value = this.columnFilterValue();
-        if (Array.isArray(value)) {
-            return value;
-        }
-        return [];
+        const value = this.draftLegacyFilterValue();
+        return Array.isArray(value) ? value : [];
     }, ...(ngDevMode ? [{ debugName: "multiSelectValue" }] : []));
     selectOptions = computed(() => {
-        const columnDef = this._columnDef();
-        if (columnDef.filterOptions && columnDef.filterOptions.length > 0) {
-            return columnDef.filterOptions;
+        const staticOptions = this._columnDef().filterOptions;
+        if (staticOptions && staticOptions.length > 0) {
+            return staticOptions;
         }
-        const facetedValues = this.zColumn().getFacetedUniqueValues();
-        if (facetedValues && facetedValues.size > 0) {
-            const uniqueValues = Array.from(facetedValues.keys()).sort().slice(0, 5000);
-            return uniqueValues.map(v => ({ label: String(v), value: String(v) }));
+        if ((this._columnDef().filterOptionSource ?? 'faceted') === 'faceted') {
+            const facetedValues = this.zColumn().getFacetedUniqueValues();
+            if (facetedValues && facetedValues.size > 0) {
+                return Array.from(facetedValues.keys())
+                    .sort()
+                    .slice(0, 5000)
+                    .map(value => ({ label: String(value), value }));
+            }
         }
         const table = this.zTable();
         const column = this.zColumn();
         const { rows } = table.getRowModel();
-        if (rows.length === 0) {
-            return [];
-        }
-        const uniqueValues = new Set();
+        const uniqueValues = new Map();
         for (const row of rows) {
             const value = row.getValue(column.id);
-            if (value !== null && value !== undefined && value !== '') {
-                uniqueValues.add(String(value));
+            if (value === null || value === undefined || value === '') {
+                continue;
             }
+            uniqueValues.set(String(value), value);
         }
-        const sortedValues = Array.from(uniqueValues).sort();
-        return sortedValues.map(v => ({ label: String(v), value: String(v) }));
+        return Array.from(uniqueValues.entries())
+            .sort(([left], [right]) => left.localeCompare(right))
+            .map(([label, value]) => ({
+            label,
+            value,
+        }));
     }, ...(ngDevMode ? [{ debugName: "selectOptions" }] : []));
-    ngOnDestroy() {
-        if (this._debounceTimeout) {
-            clearTimeout(this._debounceTimeout);
+    selectConfig = computed(() => this._columnDef().filterSelectConfig ?? {}, ...(ngDevMode ? [{ debugName: "selectConfig" }] : []));
+    syncDraft() {
+        this._syncAppliedStateFromColumn();
+        if (this.isBuilderMode()) {
+            this.draftFilters.set(this.filterConditions().map(condition => this._withDraftId(condition)));
+            this.draftSortState.set(this._normalizeSortState(this.effectiveSortState()));
+            return;
+        }
+        this.draftLegacyFilterValue.set(this.effectiveFilterValue());
+        this.draftSortState.set(this._normalizeSortState(this.effectiveSortState()));
+    }
+    toggleBasicSort() {
+        if (!this.canSort()) {
+            return;
+        }
+        const currentSort = this.effectiveSortState();
+        if (currentSort === 'asc') {
+            this.zColumn().clearSorting();
+            this._appliedSortState.set(false);
+            return;
+        }
+        if (currentSort === 'desc') {
+            this.zColumn().toggleSorting(false, false);
+            this._appliedSortState.set('asc');
+            return;
+        }
+        this.zColumn().toggleSorting(true, false);
+        this._appliedSortState.set('desc');
+    }
+    addDraftFilter(joinWithPrev) {
+        if (!this.canAddFilterCondition()) {
+            return;
+        }
+        this.draftFilters.update(filters => [
+            ...filters,
+            {
+                id: this._createDraftId(),
+                joinWithPrev,
+                operator: null,
+                value: null,
+            },
+        ]);
+    }
+    removeDraftFilter(id) {
+        this.draftFilters.update(filters => filters
+            .filter(item => item.id !== id)
+            .map(item => ({
+            ...item,
+            joinWithPrev: item.joinWithPrev ?? 'and',
+        })));
+    }
+    updateFilterOperator(id, operator) {
+        this.draftFilters.update(filters => filters.map(item => {
+            if (item.id !== id) {
+                return item;
+            }
+            return {
+                ...item,
+                operator,
+                value: null,
+            };
+        }));
+    }
+    updateFilterValue(id, value) {
+        this.draftFilters.update(filters => filters.map(item => {
+            if (item.id !== id) {
+                return item;
+            }
+            return { ...item, value };
+        }));
+    }
+    updateDraftSort(value) {
+        if (!value || value === 'none') {
+            this.draftSortState.set(false);
+            return;
         }
+        this.draftSortState.set(value === 'desc' || value === 'za' ? 'desc' : 'asc');
+    }
+    resetFilters() {
+        this.draftFilters.set([]);
+        this.draftLegacyFilterValue.set(undefined);
+        this.draftSortState.set(false);
+        this.zColumn().clearSorting();
+        this.zColumn().setFilterValue(undefined);
+        this._appliedFilterConditions.set([]);
+        this._appliedLegacyFilterValue.set({ value: undefined });
+        this._appliedSortState.set(false);
+    }
+    applyFilters() {
+        if (this.isBuilderMode()) {
+            const nextFilters = this.draftFilters()
+                .map(({ id: _id, ...condition }) => condition)
+                .filter((condition) => this._isApplicableCondition(condition));
+            this.zColumn().setFilterValue(nextFilters.length > 0 ? nextFilters : undefined);
+            this._appliedFilterConditions.set(nextFilters);
+            this._applySortState(this.draftSortState());
+            return;
+        }
+        const nextFilterValue = this._normalizeLegacyFilterValue(this.draftLegacyFilterValue());
+        this.zColumn().setFilterValue(nextFilterValue);
+        this._appliedLegacyFilterValue.set({ value: nextFilterValue });
+        this._applySortState(this.draftSortState());
     }
     onMinChangeDebounced(value) {
-        this._debounce(() => {
-            const numValue = value === null || value === '' ? undefined : Number(value);
-            this.zColumn().setFilterValue((old) => [numValue, old?.[1]]);
-        });
+        const numValue = value === null || value === '' ? undefined : Number(value);
+        const oldValue = this.draftLegacyFilterValue();
+        const rangeValue = Array.isArray(oldValue) ? oldValue : [];
+        this.draftLegacyFilterValue.set([numValue, rangeValue[1]]);
     }
     onMaxChangeDebounced(value) {
-        this._debounce(() => {
-            const numValue = value === null || value === '' ? undefined : Number(value);
-            this.zColumn().setFilterValue((old) => [old?.[0], numValue]);
-        });
+        const numValue = value === null || value === '' ? undefined : Number(value);
+        const oldValue = this.draftLegacyFilterValue();
+        const rangeValue = Array.isArray(oldValue) ? oldValue : [];
+        this.draftLegacyFilterValue.set([rangeValue[0], numValue]);
     }
-    onTextChangeDebounced(value) {
-        this._debounce(() => {
-            this.zColumn().setFilterValue(value);
-        });
+    onDateChange(value) {
+        this.draftLegacyFilterValue.set(value || undefined);
+    }
+    onTimeChange(value) {
+        this.draftLegacyFilterValue.set(value || undefined);
+    }
+    onDateRangeChange(value) {
+        this.draftLegacyFilterValue.set(value && (value.start || value.end) ? value : undefined);
     }
     onSelectChange(value) {
         if (typeof value === 'object' && value !== null && 'value' in value) {
-            this.zColumn().setFilterValue(value.value || undefined);
+            this.draftLegacyFilterValue.set(value.value || undefined);
             return;
         }
-        this.zColumn().setFilterValue(value || undefined);
+        this.draftLegacyFilterValue.set(value || undefined);
     }
     onMultiSelectChange(value) {
-        if (!value || (Array.isArray(value) && value.length === 0)) {
-            this.zColumn().setFilterValue(undefined);
+        if (!value || value.length === 0) {
+            this.draftLegacyFilterValue.set(undefined);
             return;
         }
-        this.zColumn().setFilterValue(value);
+        this.draftLegacyFilterValue.set(value);
     }
-    onDateChange(value) {
-        this.zColumn().setFilterValue(value || undefined);
+    _normalizeFilterUi(value, advancedType, canFilter) {
+        if (value === 'basic' || value === 'advanced' || value === 'custom') {
+            return value === 'custom' ? 'advanced' : value;
+        }
+        if (canFilter || advancedType) {
+            return 'advanced';
+        }
+        return 'basic';
     }
-    onDateRangeChange(value) {
-        if (value && (value.start || value.end)) {
-            this.zColumn().setFilterValue(value);
+    _normalizeAdvancedType(value, filterValueType) {
+        if (value) {
+            return value;
+        }
+        if (filterValueType === 'number') {
+            return 'number';
+        }
+        return 'text';
+    }
+    _defaultLegacyFilterLabelKey() {
+        const type = this.legacyAdvancedType();
+        if (type === 'time') {
+            return 'i18n_z_ui_table_filter_time';
+        }
+        if (type === 'date') {
+            return 'i18n_z_ui_table_filter_date';
+        }
+        if (type === 'date-range') {
+            return 'i18n_z_ui_table_filter_date_range';
+        }
+        return 'i18n_z_ui_table_filter_value';
+    }
+    _normalizeFilterConditions(value) {
+        if (!value) {
+            return [];
+        }
+        if (Array.isArray(value)) {
+            const hasStructuredFilters = value.some(item => item && typeof item === 'object' && 'operator' in item);
+            if (!hasStructuredFilters) {
+                return [];
+            }
+            return value
+                .filter((item) => this._isFilterCondition(item))
+                .map(item => ({
+                ...item,
+                joinWithPrev: item.joinWithPrev ?? 'and',
+            }));
+        }
+        if (this._isFilterCondition(value)) {
+            return [{ ...value, joinWithPrev: value.joinWithPrev ?? 'and' }];
+        }
+        return [
+            {
+                joinWithPrev: 'and',
+                operator: this.advancedType() === 'number' ? 'equals' : 'contains',
+                value,
+            },
+        ];
+    }
+    _isFilterCondition(value) {
+        if (!value || typeof value !== 'object' || !('operator' in value)) {
+            return false;
+        }
+        const { operator } = value;
+        return this._operatorDefinitions().some(item => item.value === operator);
+    }
+    _operatorDefinitions() {
+        return this.advancedType() === 'number' ? Z_TABLE_NUMBER_OPERATORS : Z_TABLE_TEXT_OPERATORS;
+    }
+    _operatorOptions() {
+        return this._operatorDefinitions().map(operator => ({
+            label: operator.labelKey,
+            value: operator.value,
+        }));
+    }
+    _operatorOptionsForDraft(id) {
+        const draftFilters = this.draftFilters();
+        const currentIndex = draftFilters.findIndex(condition => condition.id === id);
+        const currentJoinTone = this._conditionJoinTone(currentIndex, draftFilters);
+        const selectedOperators = new Set(draftFilters
+            .filter((condition, index) => {
+            if (condition.id === id || !condition.operator) {
+                return false;
+            }
+            return currentJoinTone === 'and' && this._conditionJoinTone(index, draftFilters) === 'and';
+        })
+            .map(condition => condition.operator));
+        return this._operatorDefinitions().map(operator => ({
+            label: operator.labelKey,
+            value: operator.value,
+            disabled: selectedOperators.has(operator.value),
+        }));
+    }
+    _conditionJoinTone(index, filters) {
+        if (index < 0) {
+            return 'and';
+        }
+        const condition = filters[index];
+        const joinWithPrev = index === 0 ? filters[1]?.joinWithPrev : condition?.joinWithPrev;
+        return joinWithPrev === 'or' ? 'or' : 'and';
+    }
+    _withDraftId(condition) {
+        return {
+            id: this._createDraftId(),
+            joinWithPrev: condition.joinWithPrev,
+            operator: condition.operator,
+            value: condition.value ?? null,
+        };
+    }
+    _createDraftId() {
+        return `filter-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+    }
+    _isApplicableCondition(condition) {
+        if (!condition.operator) {
+            return false;
+        }
+        if (this._isValueLessOperator(condition.operator)) {
+            return true;
+        }
+        return condition.value !== null && condition.value !== undefined && condition.value !== '';
+    }
+    _isValueLessOperator(operator) {
+        return operator === 'empty' || operator === 'notEmpty';
+    }
+    _applySortState(sortState) {
+        if (!sortState) {
+            this.zColumn().clearSorting();
+            this._appliedSortState.set(false);
             return;
         }
-        this.zColumn().setFilterValue(undefined);
+        this.zColumn().toggleSorting(sortState === 'desc', false);
+        this._appliedSortState.set(sortState);
+    }
+    _normalizeSortState(value) {
+        if (value === 'asc' || value === 'desc') {
+            return value;
+        }
+        return false;
     }
-    _debounce(fn) {
-        if (this._debounceTimeout) {
-            clearTimeout(this._debounceTimeout);
+    _hasLegacyFilterValue() {
+        const value = this.effectiveFilterValue();
+        if (value === null || value === undefined || value === '') {
+            return false;
+        }
+        if (Array.isArray(value)) {
+            return value.some(item => item !== null && item !== undefined && item !== '');
+        }
+        if (value && typeof value === 'object' && 'start' in value && 'end' in value) {
+            const range = value;
+            return !!(range.start || range.end);
+        }
+        return true;
+    }
+    _normalizeLegacyFilterValue(value) {
+        if (this.legacyAdvancedType() === 'range') {
+            if (!Array.isArray(value)) {
+                return undefined;
+            }
+            const [min, max] = value;
+            const hasMin = min !== null && min !== undefined && min !== '';
+            const hasMax = max !== null && max !== undefined && max !== '';
+            return hasMin || hasMax ? [min, max] : undefined;
+        }
+        if (value && typeof value === 'object' && 'start' in value && 'end' in value) {
+            const range = value;
+            return range.start || range.end ? range : undefined;
+        }
+        if (Array.isArray(value)) {
+            return value.length > 0 ? value : undefined;
+        }
+        return value === null || value === '' ? undefined : value;
+    }
+    _syncAppliedStateFromColumn() {
+        if (this._appliedFilterConditions() === null) {
+            this._appliedFilterConditions.set(this._normalizeFilterConditions(this.zColumn().getFilterValue()));
+        }
+        if (this._appliedLegacyFilterValue() === null) {
+            this._appliedLegacyFilterValue.set({ value: this.zColumn().getFilterValue() });
+        }
+        if (this._appliedSortState() === null) {
+            this._appliedSortState.set(this.zColumn().getIsSorted());
         }
-        this._debounceTimeout = setTimeout(fn, this._debounceMs);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZTableFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZTableFilterComponent, isStandalone: true, selector: "z-table-filter", inputs: { zColumn: { classPropertyName: "zColumn", publicName: "zColumn", isSignal: true, isRequired: true, transformFunction: null }, zTable: { classPropertyName: "zTable", publicName: "zTable", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "z-table-filter block" }, ngImport: i0, template: `
-    @switch (filterType()) {
-      @case ('range') {
-        <div class="flex gap-1">
-          <z-input
-            zType="number"
-            zSize="sm"
-            [zPlaceholder]="'i18n_z_ui_table_filter_min' | translate"
-            [ngModel]="rangeMinValue()"
-            (ngModelChange)="onMinChangeDebounced($event)"
-            class="min-w-0 flex-1"
-          />
-          <z-input
-            zType="number"
-            zSize="sm"
-            [zPlaceholder]="'i18n_z_ui_table_filter_max' | translate"
-            [ngModel]="rangeMaxValue()"
-            (ngModelChange)="onMaxChangeDebounced($event)"
-            class="min-w-0 flex-1"
-          />
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZTableFilterComponent, isStandalone: true, selector: "z-table-filter", inputs: { zColumn: { classPropertyName: "zColumn", publicName: "zColumn", isSignal: true, isRequired: true, transformFunction: null }, zTable: { classPropertyName: "zTable", publicName: "zTable", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "z-table-filter inline-flex" }, ngImport: i0, template: `
+    @if (isAdvancedUi()) {
+      <button
+        type="button"
+        z-popover
+        [zPopoverContent]="filterPopover"
+        zTrigger="click"
+        zPosition="bottom"
+        [zOffset]="6"
+        [zPopoverWidth]="popoverWidth()"
+        class="z-table-filter-trigger hover:bg-muted text-muted-foreground relative flex size-6 cursor-pointer items-center justify-center rounded-sm transition-colors"
+        [class.bg-muted]="isActive()"
+        [class.text-foreground]="isActive()"
+        (zShow)="syncDraft()"
+      >
+        <z-icon zType="lucideFilter" zSize="15" />
+        @if (filterBadgeCount() > 0) {
+          <span
+            class="bg-primary text-primary-foreground absolute -top-1 -right-1 flex h-3.5 min-w-3.5 items-center justify-center rounded-full px-0.5 text-[0.625rem] leading-none font-semibold"
+          >
+            {{ filterBadgeCount() }}
+          </span>
+        }
+      </button>
+
+      <ng-template #filterPopover let-close="close">
+        <div class="p-1" [class]="popoverContentClass()">
+          @if (canSort()) {
+            <div class="p-1">
+              <div class="grid min-w-0 grid-cols-[1fr_1fr_2rem] items-center gap-2">
+                <z-input class="min-w-0" zSize="sm" zReadonly [ngModel]="sortLabelKey() | translate" />
+                <z-select
+                  class="col-span-2 min-w-0"
+                  zSize="sm"
+                  [zOptions]="sortOptions()"
+                  [zWrap]="false"
+                  [zScrollClose]="true"
+                  [ngModel]="draftSortValue()"
+                  [zPlaceholder]="'i18n_z_ui_table_sort' | translate"
+                  (ngModelChange)="updateDraftSort($event)"
+                />
+              </div>
+            </div>
+          }
+
+          @if (canFilter()) {
+            @if (isBuilderMode()) {
+              <div>
+                @if (filterConditionViews().length > 0) {
+                  <div class="max-h-72 overflow-y-auto">
+                    <div class="z-table-filter-group flex flex-col gap-2 py-1 pr-0 pb-1 pl-1">
+                      @for (condition of filterConditionViews(); track condition.id) {
+                        @if (condition.isJoinGroupStart) {
+                          <div
+                            class="z-table-filter-condition-divider"
+                            [class.z-table-filter-condition-divider--and]="condition.joinTone === 'and'"
+                            [class.z-table-filter-condition-divider--or]="condition.joinTone === 'or'"
+                          >
+                            <span
+                              class="z-table-filter-condition-divider-label"
+                              [class.z-table-filter-condition-divider-label--and]="condition.joinTone === 'and'"
+                              [class.z-table-filter-condition-divider-label--or]="condition.joinTone === 'or'"
+                            >
+                              {{ condition.joinLabelKey | translate }}
+                            </span>
+                          </div>
+                        }
+                        <div class="z-table-filter-condition-row">
+                          <div class="grid min-w-0 grid-cols-[1fr_1fr_2rem] items-center gap-2 pr-1">
+                            <z-select
+                              class="min-w-0"
+                              zSize="sm"
+                              [zOptions]="condition.operatorOptions"
+                              [zWrap]="false"
+                              [zScrollClose]="true"
+                              [zMaxVisible]="30"
+                              [zPlaceholder]="'i18n_z_ui_table_filter_select_condition' | translate"
+                              [ngModel]="condition.operator"
+                              (ngModelChange)="updateFilterOperator(condition.id, $event)"
+                            />
+                            @if (condition.isValueLess) {
+                              <div class="bg-muted text-muted-foreground flex h-8 items-center rounded-sm px-2 text-sm">
+                                {{ 'i18n_z_ui_table_filter_no_value' | translate }}
+                              </div>
+                            } @else {
+                              <z-input
+                                class="min-w-0"
+                                [zType]="condition.inputType"
+                                zSize="sm"
+                                zAllowClear
+                                [zPlaceholder]="'i18n_z_ui_table_filter_value' | translate"
+                                [ngModel]="condition.value ?? ''"
+                                (ngModelChange)="updateFilterValue(condition.id, $event)"
+                              />
+                            }
+                            <button
+                              type="button"
+                              z-button
+                              zSize="sm"
+                              zType="outline-destructive-soft"
+                              (click)="removeDraftFilter(condition.id)"
+                            >
+                              <z-icon zType="lucideTrash2" zSize="14" />
+                            </button>
+                          </div>
+                        </div>
+                      }
+                    </div>
+                  </div>
+                } @else {
+                  <div class="p-1">
+                    <z-empty
+                      zSize="sm"
+                      zIcon="lucidePackageOpen"
+                      [zMessage]="'i18n_z_ui_table_filter_empty_conditions' | translate"
+                    />
+                  </div>
+                }
+              </div>
+            } @else {
+              <div class="p-1">
+                <div class="grid min-w-0 grid-cols-[1fr_1fr_2rem] items-center gap-2">
+                  <z-input class="min-w-0" zSize="sm" zReadonly [ngModel]="legacyFilterLabelKey() | translate" />
+                  @switch (legacyAdvancedType()) {
+                    @case ('range') {
+                      <div class="col-span-2 flex min-w-0 gap-1">
+                        <z-input
+                          zType="number"
+                          zSize="sm"
+                          [zPlaceholder]="'i18n_z_ui_table_filter_min' | translate"
+                          [ngModel]="rangeMinValue()"
+                          (ngModelChange)="onMinChangeDebounced($event)"
+                          class="min-w-0 flex-1"
+                        />
+                        <z-input
+                          zType="number"
+                          zSize="sm"
+                          [zPlaceholder]="'i18n_z_ui_table_filter_max' | translate"
+                          [ngModel]="rangeMaxValue()"
+                          (ngModelChange)="onMaxChangeDebounced($event)"
+                          class="min-w-0 flex-1"
+                        />
+                      </div>
+                    }
+                    @case ('date') {
+                      <z-calendar
+                        zMode="single"
+                        zSize="sm"
+                        zAllowClear
+                        [zAllowEdit]="false"
+                        zValueType="date"
+                        [zScrollClose]="true"
+                        [zPlaceholder]="'i18n_z_ui_table_filter_date' | translate"
+                        [ngModel]="dateValue()"
+                        (ngModelChange)="onDateChange($event)"
+                        class="col-span-2 min-w-0"
+                      />
+                    }
+                    @case ('date-range') {
+                      <z-calendar
+                        zMode="range"
+                        zSize="sm"
+                        zAllowClear
+                        [zAllowEdit]="false"
+                        [zQuickSelect]="true"
+                        [zShortTime]="true"
+                        zValueType="date"
+                        [zScrollClose]="true"
+                        [zPlaceholder]="'i18n_z_ui_table_filter_date_range' | translate"
+                        [ngModel]="dateRangeValue()"
+                        (ngModelChange)="onDateRangeChange($event)"
+                        class="col-span-2 min-w-0"
+                      />
+                    }
+                    @case ('time') {
+                      <z-calendar
+                        zMode="single"
+                        zSize="sm"
+                        zAllowClear
+                        [zAllowEdit]="false"
+                        zShowTime
+                        zValueType="date"
+                        [zScrollClose]="true"
+                        [zPlaceholder]="'i18n_z_ui_table_filter_time' | translate"
+                        [ngModel]="timeValue()"
+                        (ngModelChange)="onTimeChange($event)"
+                        class="col-span-2 min-w-0"
+                      />
+                    }
+                    @case ('select') {
+                      <z-select
+                        zSize="sm"
+                        zAllowClear
+                        [zWrap]="false"
+                        [zScrollClose]="true"
+                        [zOptions]="selectOptions()"
+                        [zConfig]="selectConfig()"
+                        [ngModel]="selectValue()"
+                        [zMaxVisible]="30"
+                        [zPlaceholder]="'i18n_z_ui_common_select' | translate"
+                        (ngModelChange)="onSelectChange($event)"
+                        class="col-span-2 min-w-0"
+                      />
+                    }
+                    @case ('multi-select') {
+                      <z-select
+                        zMode="multiple"
+                        zSize="sm"
+                        zAllowClear
+                        [zWrap]="false"
+                        [zScrollClose]="true"
+                        [zOptions]="selectOptions()"
+                        [zConfig]="selectConfig()"
+                        [zMaxTagCount]="1"
+                        [zMaxVisible]="30"
+                        [ngModel]="multiSelectValue()"
+                        [zPlaceholder]="'i18n_z_ui_common_select' | translate"
+                        (ngModelChange)="onMultiSelectChange($event)"
+                        class="col-span-2 min-w-0"
+                      />
+                    }
+                    @case ('tags') {
+                      <z-select
+                        zMode="tags"
+                        zSize="sm"
+                        [zOptions]="selectOptions()"
+                        [zConfig]="selectConfig()"
+                        [zWrap]="false"
+                        [zScrollClose]="true"
+                        [zMaxTagCount]="1"
+                        [zMaxVisible]="30"
+                        [zPlaceholder]="'i18n_z_ui_common_select' | translate"
+                        class="col-span-2 min-w-0"
+                        [zAllowClear]="true"
+                        [ngModel]="multiSelectValue()"
+                        (ngModelChange)="onMultiSelectChange($event)"
+                      />
+                    }
+                  }
+                </div>
+              </div>
+            }
+          }
+
+          <div class="bg-border my-1 h-px"></div>
+          <div class="flex items-center justify-between gap-2 p-1">
+            <button
+              z-button
+              zType="ghost"
+              zSize="sm"
+              zTypeIcon="lucideRotateCcw"
+              type="button"
+              [attr.aria-label]="'i18n_z_ui_table_reset' | translate"
+              [title]="'i18n_z_ui_table_reset' | translate"
+              (click)="resetFilters(); close()"
+            ></button>
+            <div class="flex items-center gap-2">
+              @if (isBuilderMode()) {
+                <button
+                  z-button
+                  zType="outline"
+                  zSize="sm"
+                  type="button"
+                  [disabled]="!canAddFilterCondition()"
+                  (click)="addDraftFilter('and')"
+                >
+                  <z-icon zType="lucidePlus" zSize="14" />
+                  AND
+                </button>
+                <button
+                  z-button
+                  zType="outline"
+                  zSize="sm"
+                  type="button"
+                  [disabled]="!canAddFilterCondition()"
+                  (click)="addDraftFilter('or')"
+                >
+                  <z-icon zType="lucidePlus" zSize="14" />
+                  OR
+                </button>
+              }
+              <button z-button zType="default" zSize="sm" type="button" (click)="applyFilters(); close()">
+                {{ 'i18n_z_ui_table_apply' | translate }}
+              </button>
+            </div>
+          </div>
         </div>
-      }
-      @case ('date') {
-        <z-calendar
-          zMode="single"
-          zSize="sm"
-          zAllowClear
-          zValueType="date"
-          [zScrollClose]="true"
-          [zPlaceholder]="'i18n_z_ui_table_filter_date' | translate"
-          [ngModel]="dateValue()"
-          (ngModelChange)="onDateChange($event)"
-          class="w-full"
-        />
-      }
-      @case ('date-range') {
-        <z-calendar
-          zMode="range"
-          zSize="sm"
-          zAllowClear
-          zValueType="date"
-          [zScrollClose]="true"
-          [zPlaceholder]="'i18n_z_ui_table_filter_date_range' | translate"
-          [ngModel]="dateRangeValue()"
-          (ngModelChange)="onDateRangeChange($event)"
-          class="w-full"
-        />
-      }
-      @case ('select') {
-        <z-select
-          zSize="sm"
-          zAllowClear
-          [zWrap]="false"
-          [zScrollClose]="true"
-          [zOptions]="selectOptions()"
-          [ngModel]="selectValue()"
-          [zMaxVisible]="30"
-          [zPlaceholder]="'i18n_z_ui_common_select' | translate"
-          (ngModelChange)="onSelectChange($event)"
-          class="w-full min-w-0"
-        />
-      }
-      @case ('multi-select') {
-        <z-select
-          zMode="multiple"
-          zSize="sm"
-          zAllowClear
-          [zWrap]="false"
-          [zScrollClose]="true"
-          [zOptions]="selectOptions()"
-          [zMaxTagCount]="1"
-          [zMaxVisible]="30"
-          [ngModel]="multiSelectValue()"
-          [zPlaceholder]="'i18n_z_ui_common_select' | translate"
-          (ngModelChange)="onMultiSelectChange($event)"
-          class="w-full min-w-0"
-        />
-      }
-      @case ('tags') {
-        <z-select
-          zMode="tags"
-          zSize="sm"
-          [zOptions]="selectOptions()"
-          [zWrap]="false"
-          [zScrollClose]="true"
-          [zMaxTagCount]="1"
-          [zMaxVisible]="30"
-          [zPlaceholder]="'i18n_z_ui_common_select' | translate"
-          class="w-full min-w-0"
-          [zAllowClear]="true"
-          (ngModelChange)="onMultiSelectChange($event)"
-          [ngModel]="multiSelectValue()"
-        />
-      }
-      @case ('number') {
-        <z-input
-          zType="number"
-          zSize="sm"
-          zAllowClear
-          [zPlaceholder]="'i18n_z_ui_table_filter_search' | translate"
-          [ngModel]="columnFilterValue()?.toString() ?? ''"
-          (ngModelChange)="onTextChangeDebounced($event)"
-          class="w-full"
-        />
-      }
-      @default {
-        <z-input
-          zType="text"
-          zSize="sm"
-          zAllowClear
-          [zPlaceholder]="'i18n_z_ui_table_filter_search' | translate"
-          [ngModel]="(columnFilterValue() ?? '').toString()"
-          (ngModelChange)="onTextChangeDebounced($event)"
-          class="w-full"
-        />
-      }
+      </ng-template>
+    } @else {
+      <button
+        type="button"
+        class="z-table-filter-trigger hover:bg-muted text-muted-foreground relative flex size-6 cursor-pointer items-center justify-center rounded-sm transition-colors"
+        [class.bg-muted]="isActive()"
+        [class.text-foreground]="isActive()"
+        (click)="toggleBasicSort()"
+      >
+        @if (effectiveSortState() === 'asc') {
+          <z-icon zType="lucideArrowUp" zSize="15" />
+        } @else if (effectiveSortState() === 'desc') {
+          <z-icon zType="lucideArrowDown" zSize="15" />
+        } @else {
+          <z-icon zType="lucideArrowDownUp" zSize="15" class="opacity-70" />
+        }
+      </button>
     }
-  `, isInline: true, styles: [":host{color:var(--foreground);font-weight:450;font-style:normal;text-decoration:none;text-transform:none;letter-spacing:normal}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZInputComponent, selector: "z-input", inputs: ["class", "zType", "zSize", "zAlign", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zPrefix", "zSuffix", "zMin", "zMax", "zStep", "zShowArrows", "zMask", "zDecimalPlaces", "zAllowNegative", "zThousandSeparator", "zDecimalMarker", "zValidators", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zShowPasswordToggle", "zSearch", "zDebounce", "zAutofocus", "zAutoComplete", "zAllowClear", "zAutoSizeContent", "zRows", "zResize", "zMaxLength", "zAutoSuggest", "zColorConfig"], outputs: ["zOnSearch", "zOnChange", "zOnBlur", "zOnFocus", "zOnKeydown", "zOnEnter", "zOnColorCollapse", "zControl", "zEvent"], exportAs: ["zInput"] }, { kind: "component", type: ZSelectComponent, selector: "z-select", inputs: ["class", "zMode", "zSize", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zLoading", "zPrefix", "zAllowClear", "zWrap", "zShowSearch", "zPlaceholderSearch", "zDebounce", "zNotFoundText", "zEmptyText", "zEmptyIcon", "zMaxTagCount", "zDropdownMaxHeight", "zOptionHeight", "zVirtualScroll", "zShowAction", "zOptions", "zConfig", "zTranslateLabels", "zKey", "zSearchServer", "zLoadingMore", "zEnableLoadMore", "zScrollDistance", "zMaxVisible", "zScrollClose", "zPosition", "zSelectedTemplate", "zOptionTemplate", "zActionTemplate", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zValidators"], outputs: ["zOnSearch", "zOnLoadMore", "zOnBlur", "zOnFocus", "zControl", "zEvent"], exportAs: ["zSelect"] }, { kind: "component", type: ZCalendarComponent, selector: "z-calendar", inputs: ["class", "zMode", "zSize", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zShowTime", "zTimeFormat", "zShowHour", "zShowMinute", "zShowSecond", "zQuickSelect", "zAllowClear", "zFormat", "zMinDate", "zMaxDate", "zValueType", "zValidators", "zShowOk", "zOkText", "zShowCancel", "zCancelText", "zDisabledDate", "zScrollClose", "zDefaultTime", "zRangeDefaultTime"], outputs: ["zControl", "zChange", "zOnBlur", "zOnFocus", "zEvent"], exportAs: ["zCalendar"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:inline-flex;color:var(--foreground);font-weight:450;font-style:normal;text-decoration:none;text-transform:none;letter-spacing:normal}.z-table-filter-trigger.z-popover-open{background-color:var(--muted);color:var(--foreground);box-shadow:0 0 0 2px color-mix(in srgb,var(--ring) 30%,transparent)}.z-table-filter-group{position:relative}.z-table-filter-condition-row{display:grid;grid-template-columns:minmax(0,1fr)}.z-table-filter-condition-divider{display:flex;align-items:center;gap:.375rem;padding-right:.25rem}.z-table-filter-condition-divider:after{content:\"\";height:1px;flex:1;border-top:1px dashed color-mix(in srgb,var(--border) 90%,var(--primary) 10%)}.z-table-filter-condition-divider--and:after{border-top-color:color-mix(in srgb,#2563eb 70%,var(--border))}.z-table-filter-condition-divider--or:after{border-top-color:color-mix(in srgb,#dc2626 70%,var(--border))}.z-table-filter-condition-divider-label{display:inline-flex;align-items:center;border-radius:.125rem;border:1px dashed currentColor;padding:.0625rem .375rem;font-size:.6875rem;font-weight:600;line-height:1rem;text-transform:uppercase}.z-table-filter-condition-divider-label--and{background:color-mix(in srgb,#2563eb 8%,transparent);color:#2563eb}.z-table-filter-condition-divider-label--or{background:color-mix(in srgb,#dc2626 8%,transparent);color:#dc2626}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: ZCalendarComponent, selector: "z-calendar", inputs: ["class", "zMode", "zSize", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zShowTime", "zTimeFormat", "zShowHour", "zShowMinute", "zShowSecond", "zQuickSelect", "zAllowEdit", "zShortTime", "zAllowClear", "zFormat", "zMinDate", "zMaxDate", "zValueType", "zValidators", "zShowOk", "zOkText", "zShowCancel", "zCancelText", "zDisabledDate", "zScrollClose", "zDefaultTime", "zRangeDefaultTime"], outputs: ["zControl", "zChange", "zOnBlur", "zOnFocus", "zEvent"], exportAs: ["zCalendar"] }, { kind: "component", type: ZEmptyComponent, selector: "z-empty", inputs: ["class", "zType", "zIcon", "zIconSize", "zSize", "zMessage", "zDescription"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZInputComponent, selector: "z-input", inputs: ["class", "zType", "zSize", "zAlign", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zPrefix", "zSuffix", "zMin", "zMax", "zStep", "zShowArrows", "zMask", "zDecimalPlaces", "zAllowNegative", "zThousandSeparator", "zDecimalMarker", "zValidators", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zShowPasswordToggle", "zSearch", "zDebounce", "zAutofocus", "zAutoComplete", "zAllowClear", "zAutoSizeContent", "zRows", "zResize", "zMaxLength", "zAutoSuggest", "zColorConfig"], outputs: ["zOnSearch", "zOnChange", "zOnBlur", "zOnFocus", "zOnKeydown", "zOnEnter", "zOnColorCollapse", "zControl", "zEvent"], exportAs: ["zInput"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zTriggerRef", "zManualClose", "zOutsideClickClose", "zScrollClose", "zShowArrow"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange"], exportAs: ["zPopover"] }, { kind: "component", type: ZSelectComponent, selector: "z-select", inputs: ["class", "zMode", "zSize", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zLoading", "zPrefix", "zAllowClear", "zWrap", "zShowSearch", "zPlaceholderSearch", "zDebounce", "zNotFoundText", "zEmptyText", "zEmptyIcon", "zMaxTagCount", "zDropdownMaxHeight", "zOptionHeight", "zVirtualScroll", "zShowAction", "zOptions", "zConfig", "zTranslateLabels", "zKey", "zSearchServer", "zLoadingMore", "zEnableLoadMore", "zScrollDistance", "zMaxVisible", "zScrollClose", "zPosition", "zSelectedTemplate", "zOptionTemplate", "zActionTemplate", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zValidators"], outputs: ["zOnSearch", "zOnLoadMore", "zOnBlur", "zOnFocus", "zControl", "zEvent"], exportAs: ["zSelect"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZTableFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'z-table-filter', imports: [FormsModule, ZInputComponent, ZSelectComponent, ZCalendarComponent, TranslatePipe], standalone: true, template: `
-    @switch (filterType()) {
-      @case ('range') {
-        <div class="flex gap-1">
-          <z-input
-            zType="number"
-            zSize="sm"
-            [zPlaceholder]="'i18n_z_ui_table_filter_min' | translate"
-            [ngModel]="rangeMinValue()"
-            (ngModelChange)="onMinChangeDebounced($event)"
-            class="min-w-0 flex-1"
-          />
-          <z-input
-            zType="number"
-            zSize="sm"
-            [zPlaceholder]="'i18n_z_ui_table_filter_max' | translate"
-            [ngModel]="rangeMaxValue()"
-            (ngModelChange)="onMaxChangeDebounced($event)"
-            class="min-w-0 flex-1"
-          />
+            args: [{ selector: 'z-table-filter', imports: [
+                        FormsModule,
+                        ZButtonComponent,
+                        ZCalendarComponent,
+                        ZEmptyComponent,
+                        ZIconComponent,
+                        ZInputComponent,
+                        ZPopoverDirective,
+                        ZSelectComponent,
+                        TranslatePipe,
+                    ], standalone: true, template: `
+    @if (isAdvancedUi()) {
+      <button
+        type="button"
+        z-popover
+        [zPopoverContent]="filterPopover"
+        zTrigger="click"
+        zPosition="bottom"
+        [zOffset]="6"
+        [zPopoverWidth]="popoverWidth()"
+        class="z-table-filter-trigger hover:bg-muted text-muted-foreground relative flex size-6 cursor-pointer items-center justify-center rounded-sm transition-colors"
+        [class.bg-muted]="isActive()"
+        [class.text-foreground]="isActive()"
+        (zShow)="syncDraft()"
+      >
+        <z-icon zType="lucideFilter" zSize="15" />
+        @if (filterBadgeCount() > 0) {
+          <span
+            class="bg-primary text-primary-foreground absolute -top-1 -right-1 flex h-3.5 min-w-3.5 items-center justify-center rounded-full px-0.5 text-[0.625rem] leading-none font-semibold"
+          >
+            {{ filterBadgeCount() }}
+          </span>
+        }
+      </button>
+
+      <ng-template #filterPopover let-close="close">
+        <div class="p-1" [class]="popoverContentClass()">
+          @if (canSort()) {
+            <div class="p-1">
+              <div class="grid min-w-0 grid-cols-[1fr_1fr_2rem] items-center gap-2">
+                <z-input class="min-w-0" zSize="sm" zReadonly [ngModel]="sortLabelKey() | translate" />
+                <z-select
+                  class="col-span-2 min-w-0"
+                  zSize="sm"
+                  [zOptions]="sortOptions()"
+                  [zWrap]="false"
+                  [zScrollClose]="true"
+                  [ngModel]="draftSortValue()"
+                  [zPlaceholder]="'i18n_z_ui_table_sort' | translate"
+                  (ngModelChange)="updateDraftSort($event)"
+                />
+              </div>
+            </div>
+          }
+
+          @if (canFilter()) {
+            @if (isBuilderMode()) {
+              <div>
+                @if (filterConditionViews().length > 0) {
+                  <div class="max-h-72 overflow-y-auto">
+                    <div class="z-table-filter-group flex flex-col gap-2 py-1 pr-0 pb-1 pl-1">
+                      @for (condition of filterConditionViews(); track condition.id) {
+                        @if (condition.isJoinGroupStart) {
+                          <div
+                            class="z-table-filter-condition-divider"
+                            [class.z-table-filter-condition-divider--and]="condition.joinTone === 'and'"
+                            [class.z-table-filter-condition-divider--or]="condition.joinTone === 'or'"
+                          >
+                            <span
+                              class="z-table-filter-condition-divider-label"
+                              [class.z-table-filter-condition-divider-label--and]="condition.joinTone === 'and'"
+                              [class.z-table-filter-condition-divider-label--or]="condition.joinTone === 'or'"
+                            >
+                              {{ condition.joinLabelKey | translate }}
+                            </span>
+                          </div>
+                        }
+                        <div class="z-table-filter-condition-row">
+                          <div class="grid min-w-0 grid-cols-[1fr_1fr_2rem] items-center gap-2 pr-1">
+                            <z-select
+                              class="min-w-0"
+                              zSize="sm"
+                              [zOptions]="condition.operatorOptions"
+                              [zWrap]="false"
+                              [zScrollClose]="true"
+                              [zMaxVisible]="30"
+                              [zPlaceholder]="'i18n_z_ui_table_filter_select_condition' | translate"
+                              [ngModel]="condition.operator"
+                              (ngModelChange)="updateFilterOperator(condition.id, $event)"
+                            />
+                            @if (condition.isValueLess) {
+                              <div class="bg-muted text-muted-foreground flex h-8 items-center rounded-sm px-2 text-sm">
+                                {{ 'i18n_z_ui_table_filter_no_value' | translate }}
+                              </div>
+                            } @else {
+                              <z-input
+                                class="min-w-0"
+                                [zType]="condition.inputType"
+                                zSize="sm"
+                                zAllowClear
+                                [zPlaceholder]="'i18n_z_ui_table_filter_value' | translate"
+                                [ngModel]="condition.value ?? ''"
+                                (ngModelChange)="updateFilterValue(condition.id, $event)"
+                              />
+                            }
+                            <button
+                              type="button"
+                              z-button
+                              zSize="sm"
+                              zType="outline-destructive-soft"
+                              (click)="removeDraftFilter(condition.id)"
+                            >
+                              <z-icon zType="lucideTrash2" zSize="14" />
+                            </button>
+                          </div>
+                        </div>
+                      }
+                    </div>
+                  </div>
+                } @else {
+                  <div class="p-1">
+                    <z-empty
+                      zSize="sm"
+                      zIcon="lucidePackageOpen"
+                      [zMessage]="'i18n_z_ui_table_filter_empty_conditions' | translate"
+                    />
+                  </div>
+                }
+              </div>
+            } @else {
+              <div class="p-1">
+                <div class="grid min-w-0 grid-cols-[1fr_1fr_2rem] items-center gap-2">
+                  <z-input class="min-w-0" zSize="sm" zReadonly [ngModel]="legacyFilterLabelKey() | translate" />
+                  @switch (legacyAdvancedType()) {
+                    @case ('range') {
+                      <div class="col-span-2 flex min-w-0 gap-1">
+                        <z-input
+                          zType="number"
+                          zSize="sm"
+                          [zPlaceholder]="'i18n_z_ui_table_filter_min' | translate"
+                          [ngModel]="rangeMinValue()"
+                          (ngModelChange)="onMinChangeDebounced($event)"
+                          class="min-w-0 flex-1"
+                        />
+                        <z-input
+                          zType="number"
+                          zSize="sm"
+                          [zPlaceholder]="'i18n_z_ui_table_filter_max' | translate"
+                          [ngModel]="rangeMaxValue()"
+                          (ngModelChange)="onMaxChangeDebounced($event)"
+                          class="min-w-0 flex-1"
+                        />
+                      </div>
+                    }
+                    @case ('date') {
+                      <z-calendar
+                        zMode="single"
+                        zSize="sm"
+                        zAllowClear
+                        [zAllowEdit]="false"
+                        zValueType="date"
+                        [zScrollClose]="true"
+                        [zPlaceholder]="'i18n_z_ui_table_filter_date' | translate"
+                        [ngModel]="dateValue()"
+                        (ngModelChange)="onDateChange($event)"
+                        class="col-span-2 min-w-0"
+                      />
+                    }
+                    @case ('date-range') {
+                      <z-calendar
+                        zMode="range"
+                        zSize="sm"
+                        zAllowClear
+                        [zAllowEdit]="false"
+                        [zQuickSelect]="true"
+                        [zShortTime]="true"
+                        zValueType="date"
+                        [zScrollClose]="true"
+                        [zPlaceholder]="'i18n_z_ui_table_filter_date_range' | translate"
+                        [ngModel]="dateRangeValue()"
+                        (ngModelChange)="onDateRangeChange($event)"
+                        class="col-span-2 min-w-0"
+                      />
+                    }
+                    @case ('time') {
+                      <z-calendar
+                        zMode="single"
+                        zSize="sm"
+                        zAllowClear
+                        [zAllowEdit]="false"
+                        zShowTime
+                        zValueType="date"
+                        [zScrollClose]="true"
+                        [zPlaceholder]="'i18n_z_ui_table_filter_time' | translate"
+                        [ngModel]="timeValue()"
+                        (ngModelChange)="onTimeChange($event)"
+                        class="col-span-2 min-w-0"
+                      />
+                    }
+                    @case ('select') {
+                      <z-select
+                        zSize="sm"
+                        zAllowClear
+                        [zWrap]="false"
+                        [zScrollClose]="true"
+                        [zOptions]="selectOptions()"
+                        [zConfig]="selectConfig()"
+                        [ngModel]="selectValue()"
+                        [zMaxVisible]="30"
+                        [zPlaceholder]="'i18n_z_ui_common_select' | translate"
+                        (ngModelChange)="onSelectChange($event)"
+                        class="col-span-2 min-w-0"
+                      />
+                    }
+                    @case ('multi-select') {
+                      <z-select
+                        zMode="multiple"
+                        zSize="sm"
+                        zAllowClear
+                        [zWrap]="false"
+                        [zScrollClose]="true"
+                        [zOptions]="selectOptions()"
+                        [zConfig]="selectConfig()"
+                        [zMaxTagCount]="1"
+                        [zMaxVisible]="30"
+                        [ngModel]="multiSelectValue()"
+                        [zPlaceholder]="'i18n_z_ui_common_select' | translate"
+                        (ngModelChange)="onMultiSelectChange($event)"
+                        class="col-span-2 min-w-0"
+                      />
+                    }
+                    @case ('tags') {
+                      <z-select
+                        zMode="tags"
+                        zSize="sm"
+                        [zOptions]="selectOptions()"
+                        [zConfig]="selectConfig()"
+                        [zWrap]="false"
+                        [zScrollClose]="true"
+                        [zMaxTagCount]="1"
+                        [zMaxVisible]="30"
+                        [zPlaceholder]="'i18n_z_ui_common_select' | translate"
+                        class="col-span-2 min-w-0"
+                        [zAllowClear]="true"
+                        [ngModel]="multiSelectValue()"
+                        (ngModelChange)="onMultiSelectChange($event)"
+                      />
+                    }
+                  }
+                </div>
+              </div>
+            }
+          }
+
+          <div class="bg-border my-1 h-px"></div>
+          <div class="flex items-center justify-between gap-2 p-1">
+            <button
+              z-button
+              zType="ghost"
+              zSize="sm"
+              zTypeIcon="lucideRotateCcw"
+              type="button"
+              [attr.aria-label]="'i18n_z_ui_table_reset' | translate"
+              [title]="'i18n_z_ui_table_reset' | translate"
+              (click)="resetFilters(); close()"
+            ></button>
+            <div class="flex items-center gap-2">
+              @if (isBuilderMode()) {
+                <button
+                  z-button
+                  zType="outline"
+                  zSize="sm"
+                  type="button"
+                  [disabled]="!canAddFilterCondition()"
+                  (click)="addDraftFilter('and')"
+                >
+                  <z-icon zType="lucidePlus" zSize="14" />
+                  AND
+                </button>
+                <button
+                  z-button
+                  zType="outline"
+                  zSize="sm"
+                  type="button"
+                  [disabled]="!canAddFilterCondition()"
+                  (click)="addDraftFilter('or')"
+                >
+                  <z-icon zType="lucidePlus" zSize="14" />
+                  OR
+                </button>
+              }
+              <button z-button zType="default" zSize="sm" type="button" (click)="applyFilters(); close()">
+                {{ 'i18n_z_ui_table_apply' | translate }}
+              </button>
+            </div>
+          </div>
         </div>
-      }
-      @case ('date') {
-        <z-calendar
-          zMode="single"
-          zSize="sm"
-          zAllowClear
-          zValueType="date"
-          [zScrollClose]="true"
-          [zPlaceholder]="'i18n_z_ui_table_filter_date' | translate"
-          [ngModel]="dateValue()"
-          (ngModelChange)="onDateChange($event)"
-          class="w-full"
-        />
-      }
-      @case ('date-range') {
-        <z-calendar
-          zMode="range"
-          zSize="sm"
-          zAllowClear
-          zValueType="date"
-          [zScrollClose]="true"
-          [zPlaceholder]="'i18n_z_ui_table_filter_date_range' | translate"
-          [ngModel]="dateRangeValue()"
-          (ngModelChange)="onDateRangeChange($event)"
-          class="w-full"
-        />
-      }
-      @case ('select') {
-        <z-select
-          zSize="sm"
-          zAllowClear
-          [zWrap]="false"
-          [zScrollClose]="true"
-          [zOptions]="selectOptions()"
-          [ngModel]="selectValue()"
-          [zMaxVisible]="30"
-          [zPlaceholder]="'i18n_z_ui_common_select' | translate"
-          (ngModelChange)="onSelectChange($event)"
-          class="w-full min-w-0"
-        />
-      }
-      @case ('multi-select') {
-        <z-select
-          zMode="multiple"
-          zSize="sm"
-          zAllowClear
-          [zWrap]="false"
-          [zScrollClose]="true"
-          [zOptions]="selectOptions()"
-          [zMaxTagCount]="1"
-          [zMaxVisible]="30"
-          [ngModel]="multiSelectValue()"
-          [zPlaceholder]="'i18n_z_ui_common_select' | translate"
-          (ngModelChange)="onMultiSelectChange($event)"
-          class="w-full min-w-0"
-        />
-      }
-      @case ('tags') {
-        <z-select
-          zMode="tags"
-          zSize="sm"
-          [zOptions]="selectOptions()"
-          [zWrap]="false"
-          [zScrollClose]="true"
-          [zMaxTagCount]="1"
-          [zMaxVisible]="30"
-          [zPlaceholder]="'i18n_z_ui_common_select' | translate"
-          class="w-full min-w-0"
-          [zAllowClear]="true"
-          (ngModelChange)="onMultiSelectChange($event)"
-          [ngModel]="multiSelectValue()"
-        />
-      }
-      @case ('number') {
-        <z-input
-          zType="number"
-          zSize="sm"
-          zAllowClear
-          [zPlaceholder]="'i18n_z_ui_table_filter_search' | translate"
-          [ngModel]="columnFilterValue()?.toString() ?? ''"
-          (ngModelChange)="onTextChangeDebounced($event)"
-          class="w-full"
-        />
-      }
-      @default {
-        <z-input
-          zType="text"
-          zSize="sm"
-          zAllowClear
-          [zPlaceholder]="'i18n_z_ui_table_filter_search' | translate"
-          [ngModel]="(columnFilterValue() ?? '').toString()"
-          (ngModelChange)="onTextChangeDebounced($event)"
-          class="w-full"
-        />
-      }
+      </ng-template>
+    } @else {
+      <button
+        type="button"
+        class="z-table-filter-trigger hover:bg-muted text-muted-foreground relative flex size-6 cursor-pointer items-center justify-center rounded-sm transition-colors"
+        [class.bg-muted]="isActive()"
+        [class.text-foreground]="isActive()"
+        (click)="toggleBasicSort()"
+      >
+        @if (effectiveSortState() === 'asc') {
+          <z-icon zType="lucideArrowUp" zSize="15" />
+        } @else if (effectiveSortState() === 'desc') {
+          <z-icon zType="lucideArrowDown" zSize="15" />
+        } @else {
+          <z-icon zType="lucideArrowDownUp" zSize="15" class="opacity-70" />
+        }
+      </button>
     }
   `, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: 'z-table-filter block',
-                    }, styles: [":host{color:var(--foreground);font-weight:450;font-style:normal;text-decoration:none;text-transform:none;letter-spacing:normal}\n"] }]
+                        class: 'z-table-filter inline-flex',
+                    }, styles: [":host{display:inline-flex;color:var(--foreground);font-weight:450;font-style:normal;text-decoration:none;text-transform:none;letter-spacing:normal}.z-table-filter-trigger.z-popover-open{background-color:var(--muted);color:var(--foreground);box-shadow:0 0 0 2px color-mix(in srgb,var(--ring) 30%,transparent)}.z-table-filter-group{position:relative}.z-table-filter-condition-row{display:grid;grid-template-columns:minmax(0,1fr)}.z-table-filter-condition-divider{display:flex;align-items:center;gap:.375rem;padding-right:.25rem}.z-table-filter-condition-divider:after{content:\"\";height:1px;flex:1;border-top:1px dashed color-mix(in srgb,var(--border) 90%,var(--primary) 10%)}.z-table-filter-condition-divider--and:after{border-top-color:color-mix(in srgb,#2563eb 70%,var(--border))}.z-table-filter-condition-divider--or:after{border-top-color:color-mix(in srgb,#dc2626 70%,var(--border))}.z-table-filter-condition-divider-label{display:inline-flex;align-items:center;border-radius:.125rem;border:1px dashed currentColor;padding:.0625rem .375rem;font-size:.6875rem;font-weight:600;line-height:1rem;text-transform:uppercase}.z-table-filter-condition-divider-label--and{background:color-mix(in srgb,#2563eb 8%,transparent);color:#2563eb}.z-table-filter-condition-divider-label--or{background:color-mix(in srgb,#dc2626 8%,transparent);color:#dc2626}\n"] }]
         }], propDecorators: { zColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "zColumn", required: true }] }], zTable: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTable", required: true }] }] } });
 
 class ZTableIconTextComponent {
@@ -1880,7 +2685,7 @@ class ZTableIconTextComponent {
         }
       }
     </span>
-  `, isInline: true, styles: [":host{display:inline-flex;align-items:center;min-width:0;max-width:100%}.z-table-icon-text-inner{display:inline-flex;align-items:center;gap:.25rem;line-height:1.2;min-width:0;max-width:100%}span.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTrigger", "zTooltipType", "zTooltipSize", "zClass", "zShowDelay", "zHideDelay", "zArrow", "zDisabled", "zOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "pipe", type: ZSafeHtmlPipe, name: "zSafeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:inline-flex;align-items:center;min-width:0;max-width:100%}.z-table-icon-text-inner{display:inline-flex;align-items:center;gap:.25rem;line-height:1.2;min-width:0;max-width:100%}span.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTrigger", "zTooltipType", "zTooltipSize", "zClass", "zShowDelay", "zHideDelay", "zArrow", "zDisabled", "zOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "pipe", type: ZSafeHtmlPipe, name: "zSafeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZTableIconTextComponent, decorators: [{
             type: Component,
@@ -3593,7 +4398,7 @@ class ZTableComponent {
                 colDef.maxSize = width;
                 colDef.enableResizing = c.enableResizing ?? false;
                 colDef.enableSorting = false;
-                colDef.enablePinning = false;
+                colDef.enablePinning = c.enablePinning ?? true;
             }
             return colDef;
         });
@@ -3855,6 +4660,7 @@ class ZTableComponent {
         ...this.centerLeafColumns(),
         ...this.rightLeafColumns(),
     ], ...(ngDevMode ? [{ debugName: "orderedLeafColumns" }] : []));
+    hideableColumns = computed(() => this.orderedLeafColumns().filter(col => col.getCanHide() && !this._isColumnHiddenFromVisibilityMenu(col.id)), ...(ngDevMode ? [{ debugName: "hideableColumns" }] : []));
     orderedHeaderGroups = computed(() => {
         void this.columnPinning();
         void this.columnOrder();
@@ -4489,6 +5295,9 @@ class ZTableComponent {
             this.columnSizing,
             this.columnPinning,
             this.columnVisibility,
+            this.sorting,
+            this.columnFilters,
+            this.globalFilter,
             this.showHeaderFooterShadow,
             this.showHorizontalBorder,
             this.showVerticalBorder,
@@ -4698,7 +5507,6 @@ class ZTableComponent {
                 content: config.headerResolver?.(column) ?? this._getExcelColumnHeader(column),
                 align: this._getExcelColumnHeaderAlign(column),
             },
-            size: column.size,
             columns: column.columns ? this._toExcelTableColumns(column.columns, config) : undefined,
         }));
     }
@@ -4929,7 +5737,10 @@ class ZTableComponent {
         });
     }
     // ─── Sort / Pagination / Search Handlers ──────────────────────────────────
-    /** Handles sort click; auto-adds shiftKey for multi-sort when enabled */
+    /**
+     * @deprecated Header sort now lives in the column filter popover.
+     * Giữ tạm để các consumer/template cũ còn compile trong giai đoạn chuyển đổi.
+     */
     handleSort(event, handler) {
         event.preventDefault();
         if (this.zConfig().enableMultiSort) {
@@ -5194,6 +6005,38 @@ class ZTableComponent {
         this._columnPinVersion.update(v => v + 1);
         this._checkHorizontalScroll();
     }
+    toggleColumnVisibility(columnId) {
+        const column = this.table.getColumn(columnId);
+        if (!column || !column.getCanHide() || this._isColumnHiddenFromVisibilityMenu(columnId)) {
+            return;
+        }
+        const isVisible = column.getIsVisible();
+        const currentVisibility = this.columnVisibility();
+        const allHideableIds = this.hideableColumns().map(col => col.id);
+        const visibleCount = allHideableIds.filter(id => currentVisibility[id] !== false).length;
+        if (isVisible && visibleCount <= 2) {
+            return;
+        }
+        this.columnVisibility.set({ ...currentVisibility, [columnId]: !isVisible });
+    }
+    refreshColumnPopoverPositions(...popovers) {
+        queueMicrotask(() => {
+            requestAnimationFrame(() => {
+                for (const popover of popovers) {
+                    popover.updatePosition();
+                }
+            });
+        });
+    }
+    _isColumnHiddenFromVisibilityMenu(columnId) {
+        const actionColumnId = this.actionColumnInfo()?.columnId;
+        return (columnId === 'select' ||
+            columnId === 'expand' ||
+            columnId === 'rowDrag' ||
+            columnId === 'actionRowPin' ||
+            columnId === 'actions' ||
+            columnId === actionColumnId);
+    }
     moveColumnLeft(columnId) {
         const currentOrder = this.columnOrder();
         if (currentOrder.length === 0) {
@@ -5470,7 +6313,7 @@ class ZTableComponent {
         return result;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZTableComponent, isStandalone: true, selector: "z-table", inputs: { zClass: { classPropertyName: "zClass", publicName: "zClass", isSignal: true, isRequired: false, transformFunction: null }, zConfig: { classPropertyName: "zConfig", publicName: "zConfig", isSignal: true, isRequired: false, transformFunction: null }, zLoading: { classPropertyName: "zLoading", publicName: "zLoading", isSignal: true, isRequired: false, transformFunction: null }, zKey: { classPropertyName: "zKey", publicName: "zKey", isSignal: true, isRequired: false, transformFunction: null }, zVariant: { classPropertyName: "zVariant", publicName: "zVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zChange: "zChange", zControl: "zControl" }, host: { classAttribute: "z-table block relative py-1" }, providers: [TranslatePipe], viewQueries: [{ propertyName: "theadWrapper", first: true, predicate: ["theadWrapper"], descendants: true, isSignal: true }, { propertyName: "tbodyContainer", first: true, predicate: ["tbodyContainer"], descendants: true, isSignal: true }, { propertyName: "tbodyWrapper", first: true, predicate: ["tbodyWrapper"], descendants: true, isSignal: true }, { propertyName: "tbodyScrollbar", first: true, predicate: ["tbodyWrapper"], descendants: true, isSignal: true }, { propertyName: "tfootWrapper", first: true, predicate: ["tfootWrapper"], descendants: true, isSignal: true }, { propertyName: "expandedRowTemplate", first: true, predicate: ["expandedRowTemplate"], descendants: true, isSignal: true }, { propertyName: "virtualRowElements", predicate: ["virtualRow"], descendants: true, isSignal: true }], exportAs: ["zTable"], ngImport: i0, template: "<!-- Toolbar: Search & Settings -->\n@if (isSearchEnabled() || zConfig().enableSettings) {\n  <div class=\"z-table-toolbar mb-2 flex items-center justify-between gap-4\">\n    <!-- Search -->\n    @if (isSearchEnabled()) {\n      @let config = searchConfig();\n      <z-input\n        [class]=\"config?.width ?? 'w-64'\"\n        [zSize]=\"config?.size ?? 'sm'\"\n        [zPlaceholder]=\"config?.placeholder ?? 'i18n_z_ui_table_search' | translate\"\n        [zSearch]=\"true\"\n        [zDebounce]=\"config?.debounceTime ?? 300\"\n        (zOnSearch)=\"onSearchChange($event)\" />\n    } @else {\n      <div></div>\n    }\n\n    <!-- Settings Button -->\n    @if (zConfig().enableSettings) {\n      <z-button zType=\"outline\" zSize=\"sm\" zTypeIcon=\"lucideSettings\" (click)=\"openSettingsDrawer()\">\n        {{ 'i18n_z_ui_table_settings' | translate }}\n      </z-button>\n    }\n  </div>\n}\n\n<div\n  [class]=\"classTable()\"\n  [class.z-hide-horizontal-border]=\"!showHorizontalBorder()\"\n  [class.z-hide-vertical-border]=\"!showVerticalBorder()\"\n  [style.max-height]=\"zConfig().maxHeight\"\n  [style.min-height]=\"zConfig().minHeight\">\n  <!-- Shared colgroup template -->\n  <ng-template #colGroupTpl>\n    <colgroup>\n      @if (canUseVirtualColumns()) {\n        @for (column of leftLeafColumns(); track column.id) {\n          @let customWidth = column.id | zTableColumnConfig: zConfig().columns : 'width';\n          <col [style.width]=\"customWidth || 'calc(var(--col-' + column.id + '-size) * 1px)'\" />\n        }\n        @if (virtualLeftSpacerWidth() > 0) {\n          <col [style.width.px]=\"virtualLeftSpacerWidth()\" />\n        }\n        @for (column of virtualCenterColumns(); track column.id) {\n          @let customWidth = column.id | zTableColumnConfig: zConfig().columns : 'width';\n          <col [style.width]=\"customWidth || 'calc(var(--col-' + column.id + '-size) * 1px)'\" />\n        }\n        @if (virtualRightSpacerWidth() > 0) {\n          <col [style.width.px]=\"virtualRightSpacerWidth()\" />\n        }\n        @for (column of rightLeafColumns(); track column.id) {\n          @let customWidth = column.id | zTableColumnConfig: zConfig().columns : 'width';\n          <col [style.width]=\"customWidth || 'calc(var(--col-' + column.id + '-size) * 1px)'\" />\n        }\n      } @else {\n        @for (column of orderedLeafColumns(); track column.id) {\n          @if (column.getIsVisible()) {\n            @let customWidth = column.id | zTableColumnConfig: zConfig().columns : 'width';\n            <col [style.width]=\"customWidth || 'calc(var(--col-' + column.id + '-size) * 1px)'\" />\n          }\n        }\n      }\n    </colgroup>\n  </ng-template>\n\n  <!-- Header table -->\n  <div\n    class=\"z-thead-wrapper shadow-card\"\n    [class.z-shadow-header]=\"shouldHeaderShowShadow()\"\n    [class.z-scroll-left]=\"hasScrollLeft()\"\n    [class.z-scroll-right]=\"hasScrollRight()\"\n    #theadWrapper>\n    <table [ngStyle]=\"columnSizeVars()\" [style.width.px]=\"table.getTotalSize()\">\n      <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n      <thead>\n        @if (canUseVirtualColumns()) {\n          <tr>\n            @for (header of leftHeaderRow(); track header.id) {\n              @let rowSpan = header | zTableSpan: zConfig().columns : 'headerRowSpan';\n              @let shouldRender = header | zTableCellRender: leftHeaderRow() : zConfig().columns : 'header';\n              @if (rowSpan && shouldRender) {\n                <th\n                  [attr.id]=\"header.column.id\"\n                  [ngStyle]=\"\n                    header.column\n                      | zTablePinningStyles: header : 'header' : table : zConfig().columns : columnSizingInfo()\n                  \"\n                  [class]=\"\n                    (header.column.id | zTableColumnConfig: zConfig().columns : 'headerClass') +\n                    ' ' +\n                    (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass')\n                  \"\n                  [style]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerStyle'\"\n                  [class.z-sticky-left]=\"header.column.getIsPinned() === 'left'\"\n                  [class.z-sticky-right]=\"header.column.getIsPinned() === 'right'\"\n                  [class.z-sticky-left-last]=\"header | zTableCellPin: 'isLastLeftPinned' : zConfig().columns\"\n                  [class.z-sticky-right-first]=\"header | zTableCellPin: 'isFirstRightPinned' : zConfig().columns\"\n                  [class.z-sticky-right-last]=\"header | zTableCellPin: 'isLastRightPinned' : zConfig().columns\"\n                  [class.z-at-left-edge]=\"header | zTableCellOffset: orderedLeafColumns()\"\n                  [class.z-col-drag]=\"header.column.id === 'rowDrag'\"\n                  [class.z-col-select]=\"header.column.id === 'select'\"\n                  [class.z-col-expand]=\"header.column.id === 'expand'\"\n                  [class.z-col-actions]=\"\n                    header.column.id === 'actions' || header.column.id === actionColumnInfo()?.columnId\n                  \"\n                  [attr.rowspan]=\"rowSpan\"\n                  [attr.colspan]=\"header | zTableSpan: zConfig().columns : 'headerColSpan'\">\n                  @if (header.column.id === 'rowDrag') {\n                    <div class=\"flex items-center justify-center\">\n                      <z-icon zType=\"lucideGripVertical\" zSize=\"14\" class=\"text-muted-foreground opacity-70\" />\n                    </div>\n                  } @else if (header.column.id === 'select') {\n                    <div class=\"flex items-center justify-center\">\n                      <z-checkbox\n                        [zChecked]=\"table.getIsAllRowsSelected()\"\n                        [zIndeterminate]=\"table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()\"\n                        (zChange)=\"table.toggleAllRowsSelected()\" />\n                    </div>\n                  } @else if (header.column.id === 'expand') {\n                    <div class=\"flex items-center justify-center\">\n                      <button\n                        type=\"button\"\n                        (click)=\"table.toggleAllRowsExpanded()\"\n                        class=\"hover:bg-muted flex h-6 w-6 cursor-pointer items-center justify-center rounded\">\n                        <z-icon\n                          zType=\"lucideChevronRight\"\n                          zSize=\"14\"\n                          class=\"transition-transform duration-200\"\n                          [class.rotate-90]=\"table.getIsSomeRowsExpanded()\" />\n                      </button>\n                    </div>\n                  } @else {\n                    <div\n                      class=\"flex w-full items-center gap-1\"\n                      [class.justify-center]=\"\n                        (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') ===\n                        'text-center'\n                      \"\n                      [class.justify-end]=\"\n                        (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') === 'text-right'\n                      \">\n                      @let columnEnableOrdering =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enableOrdering';\n                      @let columnEnablePinning =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enablePinning';\n                      @let effectiveEnableOrdering = columnEnableOrdering || zConfig().enableColumnOrdering;\n                      @let effectiveEnablePinning = columnEnablePinning || zConfig().enableColumnPinning;\n                      <ng-template #colOptionsPopoverContent>\n                        <div class=\"flex flex-col gap-0.5 p-0.5\">\n                          @if (effectiveEnableOrdering) {\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isFirstMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (click)=\"moveColumnLeft(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowLeft\" zSize=\"12\" />\n                              <span>{{ 'i18n_z_ui_table_move_left' | translate }}</span>\n                            </button>\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isLastMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (click)=\"moveColumnRight(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowRight\" zSize=\"12\" />\n                              <span>{{ 'i18n_z_ui_table_move_right' | translate }}</span>\n                            </button>\n                          }\n                          @if (effectiveEnableOrdering && header.column.getCanPin() && effectiveEnablePinning) {\n                            <div class=\"border-border my-0.5 border-t\"></div>\n                          }\n                          @if (header.column.getCanPin() && effectiveEnablePinning) {\n                            @if (header.column.getIsPinned() !== 'left') {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, 'left'); colOptionsPopover.hideImmediate()\"\n                                class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                <z-icon zType=\"lucidePin\" zSize=\"12\" class=\"rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_left' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned() !== 'right') {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, 'right'); colOptionsPopover.hideImmediate()\"\n                                class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                <z-icon zType=\"lucidePin\" zSize=\"12\" class=\"-rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_right' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned()) {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, false); colOptionsPopover.hideImmediate()\"\n                                class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                              </button>\n                            }\n                          }\n                        </div>\n                      </ng-template>\n\n                      @let hasColumnOptions =\n                        (header.column.getCanPin() && effectiveEnablePinning) || effectiveEnableOrdering;\n                      <div\n                        class=\"z-header-text-wrapper inline-flex max-w-full items-center gap-1 rounded px-1.5 py-1\"\n                        [class.cursor-pointer]=\"hasColumnOptions\"\n                        [class.z-has-options]=\"hasColumnOptions\"\n                        [attr.z-popover]=\"hasColumnOptions ? '' : null\"\n                        #colOptionsPopover=\"zPopover\"\n                        #headerTextWrapper\n                        z-popover\n                        [zPopoverContent]=\"hasColumnOptions ? colOptionsPopoverContent : null\"\n                        zTrigger=\"click\"\n                        zPosition=\"bottom\"\n                        [zOffset]=\"5\">\n                        <ng-container\n                          *flexRender=\"header.column.columnDef.header; props: header.getContext(); let headerContent\">\n                          @if (headerContent | zTableIsTemplateRef) {\n                            <div\n                              class=\"z-template-content\"\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \">\n                              <ng-container\n                                *ngTemplateOutlet=\"headerContent; context: { $implicit: header.getContext() }\" />\n                            </div>\n                          } @else if (headerContent | zTableHasIcon) {\n                            <z-table-icon-text\n                              class=\"min-w-0 truncate\"\n                              [zText]=\"headerContent\"\n                              [zTooltip]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerTooltip'\"\n                              [zTriggerElement]=\"headerTextWrapper\"\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \" />\n                          } @else {\n                            <span\n                              class=\"z-table-cell-text\"\n                              z-tooltip\n                              [zContent]=\"\n                                (header.column.id | zTableColumnConfig: zConfig().columns : 'headerTooltip') ||\n                                headerContent\n                              \"\n                              [zTriggerElement]=\"headerTextWrapper\"\n                              [innerHTML]=\"headerContent | translate | zSafeHtml\"\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \"></span>\n                          }\n                        </ng-container>\n                        @if (hasColumnOptions) {\n                          <z-icon zType=\"lucideChevronDown\" zSize=\"15\" class=\"text-muted-foreground shrink-0\" />\n                        }\n                      </div>\n                      @if (header.column.getCanSort() && !hasBodyRowSpan()) {\n                        <span\n                          class=\"z-sort-icon shrink-0 cursor-pointer text-gray-500 hover:text-gray-700\"\n                          (click)=\"handleSort($event, header.column.getToggleSortingHandler())\">\n                          @if (header.column.getIsSorted() === 'asc') {\n                            <z-icon zType=\"lucideArrowUp\" zSize=\"15\" />\n                          } @else if (header.column.getIsSorted() === 'desc') {\n                            <z-icon zType=\"lucideArrowDown\" zSize=\"15\" />\n                          } @else {\n                            <z-icon zType=\"lucideArrowDownUp\" zSize=\"15\" class=\"opacity-60\" />\n                          }\n                        </span>\n                      }\n                    </div>\n                  }\n                  @if (header.column.getCanFilter() && hasFiltering()) {\n                    <div class=\"mt-1\">\n                      <z-table-filter [zColumn]=\"$any(header.column)\" [zTable]=\"$any(table)\" />\n                    </div>\n                  }\n                  @if (\n                    header.column.id !== 'rowDrag' &&\n                    header.column.id !== 'select' &&\n                    header.column.id !== 'expand' &&\n                    zConfig().enableColumnResizing !== false\n                  ) {\n                    <div\n                      class=\"z-resizer\"\n                      [class.z-is-resizing]=\"header.column.getIsResizing()\"\n                      [class.z-resizer-left]=\"\n                        header.column.getIsPinned() === 'right' || header.column.getIsLastColumn()\n                      \"\n                      (dblclick)=\"header.column.resetSize()\"\n                      [zTableResize]=\"header\"></div>\n                  }\n                </th>\n              }\n            }\n            @if (virtualLeftSpacerWidth() > 0) {\n              <th class=\"pointer-events-none border-0 p-0\" [style.width.px]=\"virtualLeftSpacerWidth()\"></th>\n            }\n            @for (header of virtualCenterHeaderRow(); track header.id) {\n              @let rowSpan = header | zTableSpan: zConfig().columns : 'headerRowSpan';\n              @let shouldRender = header | zTableCellRender: virtualCenterHeaderRow() : zConfig().columns : 'header';\n              @if (rowSpan && shouldRender) {\n                <th\n                  [attr.id]=\"header.column.id\"\n                  [class]=\"\n                    (header.column.id | zTableColumnConfig: zConfig().columns : 'headerClass') +\n                    ' ' +\n                    (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass')\n                  \"\n                  [style]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerStyle'\"\n                  [class.z-col-drag]=\"header.column.id === 'rowDrag'\"\n                  [class.z-col-select]=\"header.column.id === 'select'\"\n                  [class.z-col-expand]=\"header.column.id === 'expand'\"\n                  [class.z-col-actions]=\"\n                    header.column.id === 'actions' || header.column.id === actionColumnInfo()?.columnId\n                  \"\n                  [attr.rowspan]=\"rowSpan\"\n                  [attr.colspan]=\"header | zTableSpan: zConfig().columns : 'headerColSpan'\">\n                  @if (header.column.id === 'rowDrag') {\n                    <div class=\"flex items-center justify-center\">\n                      <z-icon zType=\"lucideGripVertical\" zSize=\"14\" class=\"text-muted-foreground opacity-70\" />\n                    </div>\n                  } @else if (header.column.id === 'select') {\n                    <div class=\"flex items-center justify-center\">\n                      <z-checkbox\n                        [zChecked]=\"table.getIsAllRowsSelected()\"\n                        [zIndeterminate]=\"table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()\"\n                        (zChange)=\"table.toggleAllRowsSelected()\" />\n                    </div>\n                  } @else if (header.column.id === 'expand') {\n                    <div class=\"flex items-center justify-center\">\n                      <button\n                        type=\"button\"\n                        (click)=\"table.toggleAllRowsExpanded()\"\n                        class=\"hover:bg-muted flex h-6 w-6 cursor-pointer items-center justify-center rounded\">\n                        <z-icon\n                          zType=\"lucideChevronRight\"\n                          zSize=\"14\"\n                          class=\"transition-transform duration-200\"\n                          [class.rotate-90]=\"table.getIsSomeRowsExpanded()\" />\n                      </button>\n                    </div>\n                  } @else {\n                    <div\n                      class=\"flex w-full items-center gap-1\"\n                      [class.justify-center]=\"\n                        (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') ===\n                        'text-center'\n                      \"\n                      [class.justify-end]=\"\n                        (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') === 'text-right'\n                      \">\n                      @let columnEnableOrdering =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enableOrdering';\n                      @let columnEnablePinning =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enablePinning';\n                      @let effectiveEnableOrdering = columnEnableOrdering || zConfig().enableColumnOrdering;\n                      @let effectiveEnablePinning = columnEnablePinning || zConfig().enableColumnPinning;\n                      <ng-template #colOptionsPopoverContent>\n                        <div class=\"flex flex-col gap-0.5 p-0.5\">\n                          @if (effectiveEnableOrdering) {\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isFirstMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (click)=\"moveColumnLeft(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowLeft\" zSize=\"12\" />\n                              <span>{{ 'i18n_z_ui_table_move_left' | translate }}</span>\n                            </button>\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isLastMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (click)=\"moveColumnRight(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowRight\" zSize=\"12\" />\n                              <span>{{ 'i18n_z_ui_table_move_right' | translate }}</span>\n                            </button>\n                          }\n                          @if (effectiveEnableOrdering && header.column.getCanPin() && effectiveEnablePinning) {\n                            <div class=\"border-border my-0.5 border-t\"></div>\n                          }\n                          @if (header.column.getCanPin() && effectiveEnablePinning) {\n                            @if (header.column.getIsPinned() !== 'left') {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, 'left'); colOptionsPopover.hideImmediate()\"\n                                class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                <z-icon zType=\"lucidePin\" zSize=\"12\" class=\"rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_left' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned() !== 'right') {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, 'right'); colOptionsPopover.hideImmediate()\"\n                                class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                <z-icon zType=\"lucidePin\" zSize=\"12\" class=\"-rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_right' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned()) {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, false); colOptionsPopover.hideImmediate()\"\n                                class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                              </button>\n                            }\n                          }\n                        </div>\n                      </ng-template>\n\n                      @let hasColumnOptions =\n                        (header.column.getCanPin() && effectiveEnablePinning) || effectiveEnableOrdering;\n                      <div\n                        class=\"z-header-text-wrapper inline-flex max-w-full items-center gap-1 rounded px-1.5 py-1\"\n                        [class.cursor-pointer]=\"hasColumnOptions\"\n                        [class.z-has-options]=\"hasColumnOptions\"\n                        [attr.z-popover]=\"hasColumnOptions ? '' : null\"\n                        #colOptionsPopover=\"zPopover\"\n                        #headerTextWrapper\n                        z-popover\n                        [zPopoverContent]=\"hasColumnOptions ? colOptionsPopoverContent : null\"\n                        zTrigger=\"click\"\n                        zPosition=\"bottom\"\n                        [zOffset]=\"5\">\n                        <ng-container\n                          *flexRender=\"header.column.columnDef.header; props: header.getContext(); let headerContent\">\n                          @if (headerContent | zTableIsTemplateRef) {\n                            <div\n                              class=\"z-template-content\"\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \">\n                              <ng-container\n                                *ngTemplateOutlet=\"headerContent; context: { $implicit: header.getContext() }\" />\n                            </div>\n                          } @else if (headerContent | zTableHasIcon) {\n                            <z-table-icon-text\n                              class=\"min-w-0 truncate\"\n                              [zText]=\"headerContent\"\n                              [zTooltip]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerTooltip'\"\n                              [zTriggerElement]=\"headerTextWrapper\"\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \" />\n                          } @else {\n                            <span\n                              class=\"z-table-cell-text\"\n                              z-tooltip\n                              [zContent]=\"\n                                (header.column.id | zTableColumnConfig: zConfig().columns : 'headerTooltip') ||\n                                headerContent\n                              \"\n                              [zTriggerElement]=\"headerTextWrapper\"\n                              [innerHTML]=\"headerContent | translate | zSafeHtml\"\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \"></span>\n                          }\n                        </ng-container>\n                        @if (hasColumnOptions) {\n                          <z-icon zType=\"lucideChevronDown\" zSize=\"15\" class=\"text-muted-foreground shrink-0\" />\n                        }\n                      </div>\n                      @if (header.column.getCanSort() && !hasBodyRowSpan()) {\n                        <span\n                          class=\"z-sort-icon shrink-0 cursor-pointer text-gray-500 hover:text-gray-700\"\n                          (click)=\"handleSort($event, header.column.getToggleSortingHandler())\">\n                          @if (header.column.getIsSorted() === 'asc') {\n                            <z-icon zType=\"lucideArrowUp\" zSize=\"15\" />\n                          } @else if (header.column.getIsSorted() === 'desc') {\n                            <z-icon zType=\"lucideArrowDown\" zSize=\"15\" />\n                          } @else {\n                            <z-icon zType=\"lucideArrowDownUp\" zSize=\"15\" class=\"opacity-60\" />\n                          }\n                        </span>\n                      }\n                    </div>\n                  }\n                  @if (header.column.getCanFilter() && hasFiltering()) {\n                    <div class=\"mt-1\">\n                      <z-table-filter [zColumn]=\"$any(header.column)\" [zTable]=\"$any(table)\" />\n                    </div>\n                  }\n                  @if (\n                    header.column.id !== 'rowDrag' &&\n                    header.column.id !== 'select' &&\n                    header.column.id !== 'expand' &&\n                    zConfig().enableColumnResizing !== false\n                  ) {\n                    <div\n                      class=\"z-resizer\"\n                      [class.z-is-resizing]=\"header.column.getIsResizing()\"\n                      [class.z-resizer-left]=\"\n                        header.column.getIsPinned() === 'right' || header.column.getIsLastColumn()\n                      \"\n                      (dblclick)=\"header.column.resetSize()\"\n                      [zTableResize]=\"header\"></div>\n                  }\n                </th>\n              }\n            }\n            @if (virtualRightSpacerWidth() > 0) {\n              <th class=\"pointer-events-none border-0 p-0\" [style.width.px]=\"virtualRightSpacerWidth()\"></th>\n            }\n            @for (header of rightHeaderRow(); track header.id) {\n              @let rowSpan = header | zTableSpan: zConfig().columns : 'headerRowSpan';\n              @let shouldRender = header | zTableCellRender: rightHeaderRow() : zConfig().columns : 'header';\n              @if (rowSpan && shouldRender) {\n                <th\n                  [attr.id]=\"header.column.id\"\n                  [ngStyle]=\"\n                    header.column\n                      | zTablePinningStyles: header : 'header' : table : zConfig().columns : columnSizingInfo()\n                  \"\n                  [class]=\"\n                    (header.column.id | zTableColumnConfig: zConfig().columns : 'headerClass') +\n                    ' ' +\n                    (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass')\n                  \"\n                  [style]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerStyle'\"\n                  [class.z-sticky-left]=\"header.column.getIsPinned() === 'left'\"\n                  [class.z-sticky-right]=\"header.column.getIsPinned() === 'right'\"\n                  [class.z-sticky-left-last]=\"header | zTableCellPin: 'isLastLeftPinned' : zConfig().columns\"\n                  [class.z-sticky-right-first]=\"header | zTableCellPin: 'isFirstRightPinned' : zConfig().columns\"\n                  [class.z-sticky-right-last]=\"header | zTableCellPin: 'isLastRightPinned' : zConfig().columns\"\n                  [class.z-at-left-edge]=\"header | zTableCellOffset: orderedLeafColumns()\"\n                  [class.z-col-drag]=\"header.column.id === 'rowDrag'\"\n                  [class.z-col-select]=\"header.column.id === 'select'\"\n                  [class.z-col-expand]=\"header.column.id === 'expand'\"\n                  [class.z-col-actions]=\"\n                    header.column.id === 'actions' || header.column.id === actionColumnInfo()?.columnId\n                  \"\n                  [attr.rowspan]=\"rowSpan\"\n                  [attr.colspan]=\"header | zTableSpan: zConfig().columns : 'headerColSpan'\">\n                  @if (header.column.id === 'rowDrag') {\n                    <div class=\"flex items-center justify-center\">\n                      <z-icon zType=\"lucideGripVertical\" zSize=\"14\" class=\"text-muted-foreground opacity-70\" />\n                    </div>\n                  } @else if (header.column.id === 'select') {\n                    <!-- Header Checkbox -->\n                    <div class=\"flex items-center justify-center\">\n                      <z-checkbox\n                        [zChecked]=\"table.getIsAllRowsSelected()\"\n                        [zIndeterminate]=\"table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()\"\n                        (zChange)=\"table.toggleAllRowsSelected()\" />\n                    </div>\n                  } @else if (header.column.id === 'expand') {\n                    <!-- Expand All Button -->\n                    <div class=\"flex items-center justify-center\">\n                      <button\n                        type=\"button\"\n                        (click)=\"table.toggleAllRowsExpanded()\"\n                        class=\"hover:bg-muted flex h-6 w-6 cursor-pointer items-center justify-center rounded\">\n                        <z-icon\n                          zType=\"lucideChevronRight\"\n                          zSize=\"14\"\n                          class=\"transition-transform duration-200\"\n                          [class.rotate-90]=\"table.getIsSomeRowsExpanded()\" />\n                      </button>\n                    </div>\n                  } @else {\n                    <!-- Header Content with Sort and Pin -->\n                    <div\n                      class=\"flex w-full items-center gap-1\"\n                      [class.justify-center]=\"\n                        (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') ===\n                        'text-center'\n                      \"\n                      [class.justify-end]=\"\n                        (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') === 'text-right'\n                      \">\n                      <!-- Column Options Popover Template -->\n                      @let columnEnableOrdering =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enableOrdering';\n                      @let columnEnablePinning =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enablePinning';\n                      @let effectiveEnableOrdering = columnEnableOrdering || zConfig().enableColumnOrdering;\n                      @let effectiveEnablePinning = columnEnablePinning || zConfig().enableColumnPinning;\n                      <ng-template #colOptionsPopoverContent>\n                        <div class=\"flex flex-col gap-0.5 p-0.5\">\n                          @if (effectiveEnableOrdering) {\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isFirstMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (click)=\"moveColumnLeft(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowLeft\" zSize=\"12\" />\n                              <span>{{ 'i18n_z_ui_table_move_left' | translate }}</span>\n                            </button>\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isLastMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (click)=\"moveColumnRight(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowRight\" zSize=\"12\" />\n                              <span>{{ 'i18n_z_ui_table_move_right' | translate }}</span>\n                            </button>\n                          }\n                          @if (effectiveEnableOrdering && header.column.getCanPin() && effectiveEnablePinning) {\n                            <div class=\"border-border my-0.5 border-t\"></div>\n                          }\n                          @if (header.column.getCanPin() && effectiveEnablePinning) {\n                            @if (header.column.getIsPinned() !== 'left') {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, 'left'); colOptionsPopover.hideImmediate()\"\n                                class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                <z-icon zType=\"lucidePin\" zSize=\"12\" class=\"rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_left' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned() !== 'right') {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, 'right'); colOptionsPopover.hideImmediate()\"\n                                class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                <z-icon zType=\"lucidePin\" zSize=\"12\" class=\"-rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_right' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned()) {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, false); colOptionsPopover.hideImmediate()\"\n                                class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                              </button>\n                            }\n                          }\n                        </div>\n                      </ng-template>\n\n                      <!-- Header Text with Popover Trigger -->\n                      @let hasColumnOptions =\n                        (header.column.getCanPin() && effectiveEnablePinning) || effectiveEnableOrdering;\n                      <div\n                        class=\"z-header-text-wrapper inline-flex max-w-full items-center gap-1 rounded px-1.5 py-1\"\n                        [class.cursor-pointer]=\"hasColumnOptions\"\n                        [class.z-has-options]=\"hasColumnOptions\"\n                        [attr.z-popover]=\"hasColumnOptions ? '' : null\"\n                        #colOptionsPopover=\"zPopover\"\n                        #headerTextWrapper\n                        z-popover\n                        [zPopoverContent]=\"hasColumnOptions ? colOptionsPopoverContent : null\"\n                        zTrigger=\"click\"\n                        zPosition=\"bottom\"\n                        [zOffset]=\"5\">\n                        <ng-container\n                          *flexRender=\"header.column.columnDef.header; props: header.getContext(); let headerContent\">\n                          @if (headerContent | zTableIsTemplateRef) {\n                            <div\n                              class=\"z-template-content\"\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \">\n                              <ng-container\n                                *ngTemplateOutlet=\"headerContent; context: { $implicit: header.getContext() }\" />\n                            </div>\n                          } @else if (headerContent | zTableHasIcon) {\n                            <z-table-icon-text\n                              class=\"min-w-0 truncate\"\n                              [zText]=\"headerContent\"\n                              [zTooltip]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerTooltip'\"\n                              [zTriggerElement]=\"headerTextWrapper\"\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \" />\n                          } @else {\n                            <span\n                              class=\"z-table-cell-text\"\n                              z-tooltip\n                              [zContent]=\"\n                                (header.column.id | zTableColumnConfig: zConfig().columns : 'headerTooltip') ||\n                                headerContent\n                              \"\n                              [zTriggerElement]=\"headerTextWrapper\"\n                              [innerHTML]=\"headerContent | translate | zSafeHtml\"\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \"></span>\n                          }\n                        </ng-container>\n                        <!-- Dropdown indicator when has options (between text and sort icon) -->\n                        @if (hasColumnOptions) {\n                          <z-icon zType=\"lucideChevronDown\" zSize=\"15\" class=\"text-muted-foreground shrink-0\" />\n                        }\n                      </div>\n                      <!-- Sort Icon (outside wrapper, no hover background) -->\n                      @if (header.column.getCanSort() && !hasBodyRowSpan()) {\n                        <span\n                          class=\"z-sort-icon shrink-0 cursor-pointer text-gray-500 hover:text-gray-700\"\n                          (click)=\"handleSort($event, header.column.getToggleSortingHandler())\">\n                          @if (header.column.getIsSorted() === 'asc') {\n                            <z-icon zType=\"lucideArrowUp\" zSize=\"15\" />\n                          } @else if (header.column.getIsSorted() === 'desc') {\n                            <z-icon zType=\"lucideArrowDown\" zSize=\"15\" />\n                          } @else {\n                            <z-icon zType=\"lucideArrowDownUp\" zSize=\"15\" class=\"opacity-60\" />\n                          }\n                        </span>\n                      }\n                    </div>\n                  }\n                  <!-- Column Filter -->\n                  @if (header.column.getCanFilter() && hasFiltering()) {\n                    <div class=\"mt-1\">\n                      <z-table-filter [zColumn]=\"$any(header.column)\" [zTable]=\"$any(table)\" />\n                    </div>\n                  }\n                  <!-- Column Resizer -->\n                  @if (\n                    header.column.id !== 'rowDrag' &&\n                    header.column.id !== 'select' &&\n                    header.column.id !== 'expand' &&\n                    zConfig().enableColumnResizing !== false\n                  ) {\n                    <div\n                      class=\"z-resizer\"\n                      [class.z-is-resizing]=\"header.column.getIsResizing()\"\n                      [class.z-resizer-left]=\"\n                        header.column.getIsPinned() === 'right' || header.column.getIsLastColumn()\n                      \"\n                      (dblclick)=\"header.column.resetSize()\"\n                      [zTableResize]=\"header\"></div>\n                  }\n                </th>\n              }\n            }\n          </tr>\n        } @else {\n          @for (headerGroup of orderedHeaderGroups(); track headerGroup.id) {\n            <tr>\n              @for (header of headerGroup.headers; track header.id) {\n                @let rowSpan = header | zTableSpan: zConfig().columns : 'headerRowSpan';\n                @let shouldRender = header | zTableCellRender: headerGroup.headers : zConfig().columns : 'header';\n                @if (rowSpan && shouldRender) {\n                  <th\n                    [attr.id]=\"header.column.id\"\n                    [ngStyle]=\"\n                      header.column\n                        | zTablePinningStyles: header : 'header' : table : zConfig().columns : columnSizingInfo()\n                    \"\n                    [class]=\"\n                      (header.column.id | zTableColumnConfig: zConfig().columns : 'headerClass') +\n                      ' ' +\n                      (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass')\n                    \"\n                    [style]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerStyle'\"\n                    [class.z-sticky-left]=\"header.column.getIsPinned() === 'left'\"\n                    [class.z-sticky-right]=\"header.column.getIsPinned() === 'right'\"\n                    [class.z-sticky-left-last]=\"header | zTableCellPin: 'isLastLeftPinned' : zConfig().columns\"\n                    [class.z-sticky-right-first]=\"header | zTableCellPin: 'isFirstRightPinned' : zConfig().columns\"\n                    [class.z-sticky-right-last]=\"header | zTableCellPin: 'isLastRightPinned' : zConfig().columns\"\n                    [class.z-at-left-edge]=\"header | zTableCellOffset: orderedLeafColumns()\"\n                    [class.z-col-drag]=\"header.column.id === 'rowDrag'\"\n                    [class.z-col-select]=\"header.column.id === 'select'\"\n                    [class.z-col-expand]=\"header.column.id === 'expand'\"\n                    [class.z-col-actions]=\"\n                      header.column.id === 'actions' || header.column.id === actionColumnInfo()?.columnId\n                    \"\n                    [attr.rowspan]=\"rowSpan\"\n                    [attr.colspan]=\"header | zTableSpan: zConfig().columns : 'headerColSpan'\">\n                    @if (header.column.id === 'rowDrag') {\n                      <div class=\"flex items-center justify-center\">\n                        <z-icon zType=\"lucideGripVertical\" zSize=\"14\" class=\"text-muted-foreground opacity-70\" />\n                      </div>\n                    } @else if (header.column.id === 'select') {\n                      <div class=\"flex items-center justify-center\">\n                        <z-checkbox\n                          [zChecked]=\"table.getIsAllRowsSelected()\"\n                          [zIndeterminate]=\"table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()\"\n                          (zChange)=\"table.toggleAllRowsSelected()\" />\n                      </div>\n                    } @else if (header.column.id === 'expand') {\n                      <div class=\"flex items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          (click)=\"table.toggleAllRowsExpanded()\"\n                          class=\"hover:bg-muted flex h-6 w-6 cursor-pointer items-center justify-center rounded\">\n                          <z-icon\n                            zType=\"lucideChevronRight\"\n                            zSize=\"14\"\n                            class=\"transition-transform duration-200\"\n                            [class.rotate-90]=\"table.getIsSomeRowsExpanded()\" />\n                        </button>\n                      </div>\n                    } @else {\n                      <div\n                        class=\"flex w-full items-center gap-1\"\n                        [class.justify-center]=\"\n                          (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') ===\n                          'text-center'\n                        \"\n                        [class.justify-end]=\"\n                          (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') ===\n                          'text-right'\n                        \">\n                        @let columnEnableOrdering =\n                          header.column.id | zTableColumnConfig: zConfig().columns : 'enableOrdering';\n                        @let columnEnablePinning =\n                          header.column.id | zTableColumnConfig: zConfig().columns : 'enablePinning';\n                        @let effectiveEnableOrdering = columnEnableOrdering || zConfig().enableColumnOrdering;\n                        @let effectiveEnablePinning = columnEnablePinning || zConfig().enableColumnPinning;\n                        <ng-template #colOptionsPopoverContent>\n                          <div class=\"flex flex-col gap-0.5 p-0.5\">\n                            @if (effectiveEnableOrdering) {\n                              <button\n                                type=\"button\"\n                                [disabled]=\"isFirstMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                                (click)=\"moveColumnLeft(header.column.id); colOptionsPopover.hideImmediate()\"\n                                class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs disabled:pointer-events-none disabled:opacity-40\">\n                                <z-icon zType=\"lucideArrowLeft\" zSize=\"12\" />\n                                <span>{{ 'i18n_z_ui_table_move_left' | translate }}</span>\n                              </button>\n                              <button\n                                type=\"button\"\n                                [disabled]=\"isLastMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                                (click)=\"moveColumnRight(header.column.id); colOptionsPopover.hideImmediate()\"\n                                class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs disabled:pointer-events-none disabled:opacity-40\">\n                                <z-icon zType=\"lucideArrowRight\" zSize=\"12\" />\n                                <span>{{ 'i18n_z_ui_table_move_right' | translate }}</span>\n                              </button>\n                            }\n                            @if (effectiveEnableOrdering && header.column.getCanPin() && effectiveEnablePinning) {\n                              <div class=\"border-border my-0.5 border-t\"></div>\n                            }\n                            @if (header.column.getCanPin() && effectiveEnablePinning) {\n                              @if (header.column.getIsPinned() !== 'left') {\n                                <button\n                                  type=\"button\"\n                                  (click)=\"handleColumnPin(header.column.id, 'left'); colOptionsPopover.hideImmediate()\"\n                                  class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                  <z-icon zType=\"lucidePin\" zSize=\"12\" class=\"rotate-90\" />\n                                  <span>{{ 'i18n_z_ui_table_pin_left' | translate }}</span>\n                                </button>\n                              }\n                              @if (header.column.getIsPinned() !== 'right') {\n                                <button\n                                  type=\"button\"\n                                  (click)=\"\n                                    handleColumnPin(header.column.id, 'right'); colOptionsPopover.hideImmediate()\n                                  \"\n                                  class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                  <z-icon zType=\"lucidePin\" zSize=\"12\" class=\"-rotate-90\" />\n                                  <span>{{ 'i18n_z_ui_table_pin_right' | translate }}</span>\n                                </button>\n                              }\n                              @if (header.column.getIsPinned()) {\n                                <button\n                                  type=\"button\"\n                                  (click)=\"handleColumnPin(header.column.id, false); colOptionsPopover.hideImmediate()\"\n                                  class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                  <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                  <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                                </button>\n                              }\n                            }\n                          </div>\n                        </ng-template>\n\n                        @let hasColumnOptions =\n                          (header.column.getCanPin() && effectiveEnablePinning) || effectiveEnableOrdering;\n                        <div\n                          class=\"z-header-text-wrapper inline-flex max-w-full items-center gap-1 rounded px-1.5 py-1\"\n                          [class.cursor-pointer]=\"hasColumnOptions\"\n                          [class.z-has-options]=\"hasColumnOptions\"\n                          [attr.z-popover]=\"hasColumnOptions ? '' : null\"\n                          #colOptionsPopover=\"zPopover\"\n                          #headerTextWrapper\n                          z-popover\n                          [zPopoverContent]=\"hasColumnOptions ? colOptionsPopoverContent : null\"\n                          zTrigger=\"click\"\n                          zPosition=\"bottom\"\n                          [zOffset]=\"5\">\n                          <ng-container\n                            *flexRender=\"header.column.columnDef.header; props: header.getContext(); let headerContent\">\n                            @if (headerContent | zTableIsTemplateRef) {\n                              <div\n                                class=\"z-template-content\"\n                                [ngClass]=\"\n                                  header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                                \"\n                                [ngStyle]=\"\n                                  header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                                \">\n                                <ng-container\n                                  *ngTemplateOutlet=\"headerContent; context: { $implicit: header.getContext() }\" />\n                              </div>\n                            } @else if (headerContent | zTableHasIcon) {\n                              <z-table-icon-text\n                                class=\"min-w-0 truncate\"\n                                [zText]=\"headerContent\"\n                                [zTooltip]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerTooltip'\"\n                                [zTriggerElement]=\"headerTextWrapper\"\n                                [ngClass]=\"\n                                  header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                                \"\n                                [ngStyle]=\"\n                                  header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                                \" />\n                            } @else {\n                              <span\n                                class=\"z-table-cell-text\"\n                                z-tooltip\n                                [zContent]=\"\n                                  (header.column.id | zTableColumnConfig: zConfig().columns : 'headerTooltip') ||\n                                  headerContent\n                                \"\n                                [zTriggerElement]=\"headerTextWrapper\"\n                                [innerHTML]=\"headerContent | translate | zSafeHtml\"\n                                [ngClass]=\"\n                                  header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                                \"\n                                [ngStyle]=\"\n                                  header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                                \"></span>\n                            }\n                          </ng-container>\n                          @if (hasColumnOptions) {\n                            <z-icon zType=\"lucideChevronDown\" zSize=\"15\" class=\"text-muted-foreground shrink-0\" />\n                          }\n                        </div>\n                        @if (header.column.getCanSort() && !hasBodyRowSpan()) {\n                          <span\n                            class=\"z-sort-icon shrink-0 cursor-pointer text-gray-500 hover:text-gray-700\"\n                            (click)=\"handleSort($event, header.column.getToggleSortingHandler())\">\n                            @if (header.column.getIsSorted() === 'asc') {\n                              <z-icon zType=\"lucideArrowUp\" zSize=\"15\" />\n                            } @else if (header.column.getIsSorted() === 'desc') {\n                              <z-icon zType=\"lucideArrowDown\" zSize=\"15\" />\n                            } @else {\n                              <z-icon zType=\"lucideArrowDownUp\" zSize=\"15\" class=\"opacity-60\" />\n                            }\n                          </span>\n                        }\n                      </div>\n                    }\n                    @if (header.column.getCanFilter() && hasFiltering()) {\n                      <div class=\"mt-1\">\n                        <z-table-filter [zColumn]=\"$any(header.column)\" [zTable]=\"$any(table)\" />\n                      </div>\n                    }\n                    @if (\n                      header.column.id !== 'rowDrag' &&\n                      header.column.id !== 'select' &&\n                      header.column.id !== 'expand' &&\n                      zConfig().enableColumnResizing !== false\n                    ) {\n                      <div\n                        class=\"z-resizer\"\n                        [class.z-is-resizing]=\"header.column.getIsResizing()\"\n                        [class.z-resizer-left]=\"\n                          header.column.getIsPinned() === 'right' || header.column.getIsLastColumn()\n                        \"\n                        (dblclick)=\"header.column.resetSize()\"\n                        [zTableResize]=\"header\"></div>\n                    }\n                  </th>\n                }\n              }\n            </tr>\n          }\n        }\n      </thead>\n    </table>\n  </div>\n\n  <!-- Body table -->\n  <div\n    class=\"z-tbody-wrapper relative\"\n    #tbodyContainer\n    [class.z-scroll-left]=\"hasScrollLeft()\"\n    [class.z-scroll-right]=\"hasScrollRight()\">\n    @if (isLoading() || isProcessing()) {\n      <!-- Loading State -->\n      @if (zConfig().useSkeleton) {\n        <!-- Skeleton Loading -->\n        <div class=\"animate-in fade-in flex h-full flex-col duration-200\">\n          @for (i of skeletonRows(); track $index; let last = $last) {\n            <div\n              class=\"border-border box-border flex flex-1 flex-col items-start justify-center gap-1.5 px-2\"\n              [class.border-b]=\"!last\">\n              <z-skeleton zType=\"bar\" zWidth=\"100%\" zHeight=\"22px\" zRadius=\"4px\" />\n              <z-skeleton zType=\"bar\" zWidth=\"50%\" zHeight=\"14px\" zRadius=\"4px\" />\n            </div>\n          }\n        </div>\n      } @else {\n        <!-- Spinner Loading -->\n        <div class=\"z-loading-state\">\n          <z-loading [zLoading]=\"true\" zSize=\"lg\" [zText]=\"'i18n_z_ui_table_loading' | translate\" />\n        </div>\n      }\n    } @else if (isEmpty()) {\n      <div class=\"z-empty-state\">\n        @if (isNoSearchResults()) {\n          <z-empty zIcon=\"lucideSearchX\" zSize=\"sm\" [zMessage]=\"'i18n_z_ui_table_no_results' | translate\" />\n        } @else {\n          <z-empty zIcon=\"lucidePackageOpen\" zSize=\"sm\" [zMessage]=\"'i18n_z_ui_table_no_data' | translate\" />\n        }\n      </div>\n    } @else {\n      <ng-scrollbar class=\"z-tbody-scrollbar\" #tbodyWrapper track=\"all\" cdkScrollable (scroll)=\"onTbodyScroll($event)\">\n        @if (isVirtual()) {\n          <!-- Virtual Scroll Mode -->\n          <div\n            class=\"z-virtual-scroll-inner\"\n            cdkDropList\n            [cdkDropListData]=\"table.getRowModel().rows\"\n            [cdkDropListDisabled]=\"!isVirtualRowDragEnabled()\"\n            cdkDropListOrientation=\"vertical\"\n            [cdkDropListAutoScrollStep]=\"20\"\n            (cdkDropListDropped)=\"onRowDrop($event)\"\n            [style.height.px]=\"virtualizer.getTotalSize()\"\n            [style.min-width.px]=\"table.getTotalSize()\">\n            @for (virtualItem of virtualizer.getVirtualItems(); track virtualItem.index) {\n              @let groupRows = dynamicGroupRows()[virtualItem.index] || [];\n              <div\n                #virtualRow\n                class=\"z-virtual-row\"\n                cdkDrag\n                cdkDragLockAxis=\"y\"\n                cdkDragPreviewClass=\"z-table-row-drag-preview\"\n                cdkDragPlaceholderClass=\"z-table-row-drag-placeholder\"\n                [cdkDragData]=\"groupRows[0]\"\n                [cdkDragDisabled]=\"!isVirtualRowDragEnabled() || groupRows.length !== 1\"\n                (cdkDragStarted)=\"onRowDragStarted()\"\n                (cdkDragEnded)=\"onRowDragEnded($event)\"\n                [attr.data-index]=\"virtualItem.index\"\n                [style.height.px]=\"\n                  dynamicSize() ? null : (dynamicGroupHeights()[virtualItem.index] ?? groupSize() * virtualRowHeight())\n                \"\n                [style.transform]=\"'translate3d(0,' + virtualItem.start + 'px,0)'\">\n                <ng-template cdkDragPreview>\n                  @if (groupRows[0]; as previewRow) {\n                    <div class=\"z-table-row-drag-preview\" [style.width.px]=\"table.getTotalSize()\">\n                      @for (cell of previewRow.getVisibleCells(); track cell.id) {\n                        @let isPreviewCellVisible = cell | zTableCellVisible: zConfig().columns;\n                        @let shouldRenderPreviewColSpan =\n                          cell | zTableCellRender: previewRow.getVisibleCells() : zConfig().columns : 'body';\n                        @if (isPreviewCellVisible && shouldRenderPreviewColSpan) {\n                          <div\n                            class=\"z-table-row-drag-preview-cell\"\n                            [style.width.px]=\"cell.column.getSize()\"\n                            [class.z-table-row-drag-preview-handle]=\"cell.column.id === 'rowDrag'\">\n                            @if (cell.column.id === 'rowDrag') {\n                              <z-icon zType=\"lucideGripVertical\" zSize=\"14\" class=\"text-muted-foreground\" />\n                            } @else {\n                              <span class=\"truncate\">{{ cell.getValue() ?? '' }}</span>\n                            }\n                          </div>\n                        }\n                      }\n                    </div>\n                  }\n                </ng-template>\n\n                <ng-template cdkDragPlaceholder>\n                  <div class=\"z-table-row-drag-placeholder-inner\" [style.height.px]=\"virtualItem.size\"></div>\n                </ng-template>\n\n                <table [ngStyle]=\"columnSizeVars()\" [style.width.px]=\"table.getTotalSize()\">\n                  <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n                  <tbody\n                    [class.z-has-vertical-scroll]=\"hasVerticalScroll()\"\n                    [class.z-last-row-touches-bottom]=\"lastRowTouchesBottom()\">\n                    @for (row of groupRows; track row.id) {\n                      <tr\n                        z-table-row-hover\n                        [style.height.px]=\"dynamicSize() ? null : virtualRowHeight()\"\n                        [style.min-height.px]=\"dynamicSize() ? virtualRowHeight() : null\"\n                        [class.z-child-row]=\"row.depth > 0\"\n                        [class.z-selected]=\"row.getIsSelected()\"\n                        [class.z-indeterminate-selected]=\"row.getIsSomeSelected() && !row.getIsSelected()\">\n                        @for (cell of row.getVisibleCells(); track cell.id) {\n                          @if (\n                            canUseVirtualColumns() &&\n                            virtualLeftSpacerWidth() > 0 &&\n                            cell.column.id === firstVirtualCenterColumnId()\n                          ) {\n                            <td\n                              class=\"pointer-events-none border-0 p-0\"\n                              [style.width.px]=\"virtualLeftSpacerWidth()\"></td>\n                          }\n                          @let shouldRenderRowSpan =\n                            cell | zTableSpan: zConfig().columns : 'shouldRender' : table.getRowModel().rows;\n                          @let shouldRenderColSpan =\n                            cell | zTableCellRender: row.getVisibleCells() : zConfig().columns : 'body';\n                          @let isVirtualColumnVisible =\n                            !canUseVirtualColumns() ||\n                            cell.column.getIsPinned() !== false ||\n                            virtualCenterColumnVisibilityMap()[cell.column.id];\n                          @if (shouldRenderRowSpan && shouldRenderColSpan && isVirtualColumnVisible) {\n                            <td\n                              [ngStyle]=\"\n                                cell.column\n                                  | zTablePinningStyles\n                                    : cell\n                                    : 'body'\n                                    : row.getVisibleCells()\n                                    : zConfig().columns\n                                    : columnSizingInfo()\n                              \"\n                              [class.z-sticky-left]=\"cell.column.getIsPinned() === 'left'\"\n                              [class.z-sticky-right]=\"cell.column.getIsPinned() === 'right'\"\n                              [class.z-sticky-left-last]=\"\n                                cell.column.getIsPinned() === 'left' && cell.column.getIsLastColumn('left')\n                              \"\n                              [class.z-sticky-right-first]=\"\n                                cell.column.getIsPinned() === 'right' && cell.column.getIsFirstColumn('right')\n                              \"\n                              [class.z-sticky-right-last]=\"\n                                cell.column.getIsPinned() === 'right' && cell.column.getIsLastColumn('right')\n                              \"\n                              [class.z-at-left-edge]=\"cell | zTableCellOffset: orderedLeafColumns()\"\n                              [class.z-col-drag]=\"cell.column.id === 'rowDrag'\"\n                              [class.z-col-select]=\"cell.column.id === 'select'\"\n                              [class.z-col-expand]=\"cell.column.id === 'expand'\"\n                              [class.z-col-actions]=\"cell.column.id === actionColumnInfo()?.columnId\"\n                              [class.z-at-bottom]=\"\n                                cell | zTableCellBottom: zConfig().columns : table.getRowModel().rows\n                              \"\n                              [attr.rowspan]=\"\n                                cell | zTableSpan: zConfig().columns : 'cellRowSpan' : table.getRowModel().rows\n                              \"\n                              [attr.colspan]=\"cell | zTableSpan: zConfig().columns : 'cellColSpan'\"\n                              [class]=\"cell | zTableCellConfig: zConfig().columns : 'cellClass'\"\n                              [style]=\"cell | zTableCellConfig: zConfig().columns : 'cellStyle'\">\n                              @if (cell.column.id === 'rowDrag') {\n                                <div class=\"flex items-center justify-center\">\n                                  <button\n                                    cdkDragHandle\n                                    type=\"button\"\n                                    class=\"text-muted-foreground inline-flex size-7 items-center justify-center rounded-md\"\n                                    [class.cursor-grab]=\"isRowDragEnabled()\"\n                                    [class.opacity-40]=\"!isRowDragEnabled()\">\n                                    <z-icon zType=\"lucideGripVertical\" zSize=\"14\" />\n                                  </button>\n                                </div>\n                              } @else if (cell.column.id === 'select') {\n                                <!-- Row Checkbox -->\n                                <div class=\"flex items-center justify-center\">\n                                  <z-checkbox\n                                    [zChecked]=\"cell.row.getIsSelected()\"\n                                    [zIndeterminate]=\"cell.row.getIsSomeSelected() && !cell.row.getIsSelected()\"\n                                    [zDisabled]=\"!cell.row.getCanSelect()\"\n                                    (zChange)=\"cell.row.toggleSelected()\" />\n                                </div>\n                              } @else if (cell.column.id === 'expand') {\n                                <!-- Expand Button -->\n                                <div class=\"flex items-center justify-center\">\n                                  @if (cell.row.subRows && cell.row.subRows.length > 0) {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.toggleExpanded()\"\n                                      class=\"hover:bg-muted flex h-6 w-6 cursor-pointer items-center justify-center rounded\">\n                                      <z-icon\n                                        zType=\"lucideChevronRight\"\n                                        zSize=\"14\"\n                                        class=\"transition-transform duration-200\"\n                                        [class.rotate-90]=\"cell.row.getIsExpanded()\" />\n                                    </button>\n                                  }\n                                </div>\n                              } @else if (cell.column.id === actionColumnInfo()?.columnId && actionColumnInfo()) {\n                                <z-table-actions\n                                  [zConfig]=\"$any(actionColumnInfo()!.config)\"\n                                  [zRow]=\"cell.row.original\"\n                                  [zRowId]=\"cell.row.id\"\n                                  (zActionClick)=\"onActionClick($event)\" />\n                              } @else {\n                                @let isCellVisible = cell | zTableCellVisible: zConfig().columns;\n                                @if (isCellVisible) {\n                                  @let editInfoVirtual = cell.getContext() | zTableCellEdit: zConfig().columns;\n                                  @if (editInfoVirtual.enabled) {\n                                    <!-- Editable Cell (Virtual) -->\n                                    <z-table-edit-cell\n                                      [zRow]=\"cell.row.original\"\n                                      [zRowId]=\"cell.row.id\"\n                                      [zRowIndex]=\"cell.row.index\"\n                                      [zColumnId]=\"cell.column.id\"\n                                      [zValue]=\"cell.getValue()\"\n                                      [zRowUpdate]=\"_rowUpdate()\"\n                                      [zEditConfig]=\"$any(editInfoVirtual.config)\"\n                                      (zChange)=\"onCellEdit($any($event))\" />\n                                  } @else {\n                                    <ng-container\n                                      *flexRender=\"\n                                        cell.column.columnDef.cell;\n                                        props: cell.getContext();\n                                        let cellContent\n                                      \">\n                                      @if (cellContent | zTableIsTemplateRef) {\n                                        <!-- TemplateRef rendering -->\n                                        @let isClickable = cell.column.id | zTableCellClickable: zConfig().columns;\n                                        <div\n                                          class=\"z-template-content\"\n                                          [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                          [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\"\n                                          (click)=\"isClickable && onCellClick(row, cell.column.id, cell.getValue())\">\n                                          <ng-container\n                                            *ngTemplateOutlet=\"\n                                              cellContent;\n                                              context: { $implicit: cell.getContext() }\n                                            \" />\n                                        </div>\n                                      } @else if (cellContent | zTableHasIcon) {\n                                        <!-- Icon syntax rendering -->\n                                        @let isClickableIcon = cell.column.id | zTableCellClickable: zConfig().columns;\n                                        <z-table-icon-text\n                                          [zText]=\"cellContent\"\n                                          [zTooltip]=\"cell | zTableCellConfig: zConfig().columns : 'contentTooltip'\"\n                                          [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                          [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\"\n                                          (click)=\"\n                                            isClickableIcon && onCellClick(row, cell.column.id, cell.getValue())\n                                          \" />\n                                      } @else {\n                                        <!-- Default/innerHTML rendering -->\n                                        @let isClickableDefault =\n                                          cell.column.id | zTableCellClickable: zConfig().columns;\n                                        <div\n                                          class=\"z-table-cell-text\"\n                                          z-tooltip\n                                          [zContent]=\"\n                                            (cell | zTableCellConfig: zConfig().columns : 'contentTooltip') ||\n                                            cellContent\n                                          \"\n                                          [innerHTML]=\"cellContent | translate | zSafeHtml\"\n                                          [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                          [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\"\n                                          (click)=\"\n                                            isClickableDefault && onCellClick(row, cell.column.id, cell.getValue())\n                                          \"></div>\n                                      }\n                                    </ng-container>\n                                  }\n                                }\n                              }\n                            </td>\n                          }\n                          @if (\n                            canUseVirtualColumns() &&\n                            virtualRightSpacerWidth() > 0 &&\n                            cell.column.id === lastVirtualCenterColumnId()\n                          ) {\n                            <td\n                              class=\"pointer-events-none border-0 p-0\"\n                              [style.width.px]=\"virtualRightSpacerWidth()\"></td>\n                          }\n                        }\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n              </div>\n            }\n          </div>\n        } @else {\n          <!-- Normal Scroll Mode -->\n          <table [ngStyle]=\"columnSizeVars()\" [style.width.px]=\"table.getTotalSize()\">\n            <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n            <tbody\n              cdkDropList\n              class=\"z-table-drag-body\"\n              [cdkDropListData]=\"table.getRowModel().rows\"\n              [cdkDropListDisabled]=\"!isRowDragEnabled()\"\n              cdkDropListOrientation=\"vertical\"\n              [cdkDropListAutoScrollStep]=\"20\"\n              (cdkDropListDropped)=\"onRowDrop($event)\"\n              [class.z-has-vertical-scroll]=\"hasVerticalScroll()\"\n              [class.z-last-row-touches-bottom]=\"lastRowTouchesBottom()\">\n              <!-- Row Template -->\n              <ng-template #rowTemplate let-row>\n                <tr\n                  cdkDrag\n                  z-table-row-hover\n                  cdkDragLockAxis=\"y\"\n                  cdkDragPreviewClass=\"z-table-row-drag-preview\"\n                  cdkDragPlaceholderClass=\"z-table-row-drag-placeholder\"\n                  [cdkDragData]=\"row\"\n                  [cdkDragDisabled]=\"!isRowDragEnabled()\"\n                  (cdkDragStarted)=\"onRowDragStarted()\"\n                  (cdkDragEnded)=\"onRowDragEnded($event)\"\n                  [attr.data-row-id]=\"row.id\"\n                  [ngStyle]=\"row | zTableRow: table : 'pinningStyles' : pinnedRowHeights() : virtualRowHeight()\"\n                  [class.z-child-row]=\"row.depth > 0\"\n                  [class.z-selected]=\"row.getIsSelected()\"\n                  [class.z-indeterminate-selected]=\"row.getIsSomeSelected() && !row.getIsSelected()\"\n                  [class.z-pinned-top]=\"row.getIsPinned() === 'top'\"\n                  [class.z-pinned-bottom]=\"row.getIsPinned() === 'bottom'\"\n                  [class.z-shadow-bottom]=\"\n                    showHeaderFooterShadow() &&\n                    row.getIsPinned() === 'top' &&\n                    (row | zTableRow: table : 'isLastTopPinned')\n                  \"\n                  [class.z-shadow-top]=\"\n                    showHeaderFooterShadow() &&\n                    row.getIsPinned() === 'bottom' &&\n                    (row | zTableRow: table : 'isFirstBottomPinned')\n                  \"\n                  [attr.data-depth]=\"row.depth\">\n                  <ng-template cdkDragPreview>\n                    <div class=\"z-table-row-drag-preview\" [style.width.px]=\"table.getTotalSize()\">\n                      @for (cell of row.getVisibleCells(); track cell.id) {\n                        @let isPreviewCellVisible = cell | zTableCellVisible: zConfig().columns;\n                        @let shouldRenderPreviewColSpan =\n                          cell | zTableCellRender: row.getVisibleCells() : zConfig().columns : 'body';\n                        @if (isPreviewCellVisible && shouldRenderPreviewColSpan) {\n                          <div\n                            class=\"z-table-row-drag-preview-cell\"\n                            [style.width.px]=\"cell.column.getSize()\"\n                            [class.z-table-row-drag-preview-handle]=\"cell.column.id === 'rowDrag'\">\n                            @if (cell.column.id === 'rowDrag') {\n                              <z-icon zType=\"lucideGripVertical\" zSize=\"14\" class=\"text-muted-foreground\" />\n                            } @else {\n                              <span class=\"truncate\">{{ cell.getValue() ?? '' }}</span>\n                            }\n                          </div>\n                        }\n                      }\n                    </div>\n                  </ng-template>\n\n                  <ng-template cdkDragPlaceholder>\n                    <tr class=\"z-table-row-drag-placeholder-row\">\n                      <td [attr.colspan]=\"renderedColumnCount()\">\n                        <div class=\"z-table-row-drag-placeholder-inner\" [style.height.px]=\"virtualRowHeight()\"></div>\n                      </td>\n                    </tr>\n                  </ng-template>\n\n                  @for (cell of row.getVisibleCells(); track cell.id) {\n                    @if (\n                      canUseVirtualColumns() &&\n                      virtualLeftSpacerWidth() > 0 &&\n                      cell.column.id === firstVirtualCenterColumnId()\n                    ) {\n                      <td class=\"pointer-events-none border-0 p-0\" [style.width.px]=\"virtualLeftSpacerWidth()\"></td>\n                    }\n                    @let shouldRenderRowSpan =\n                      cell | zTableSpan: zConfig().columns : 'shouldRender' : table.getRowModel().rows;\n                    @let shouldRenderColSpan =\n                      cell | zTableCellRender: row.getVisibleCells() : zConfig().columns : 'body';\n                    @let isVirtualColumnVisible =\n                      !canUseVirtualColumns() ||\n                      cell.column.getIsPinned() !== false ||\n                      virtualCenterColumnVisibilityMap()[cell.column.id];\n                    @if (shouldRenderRowSpan && shouldRenderColSpan && isVirtualColumnVisible) {\n                      <td\n                        [ngStyle]=\"\n                          cell.column\n                            | zTablePinningStyles\n                              : cell\n                              : 'body'\n                              : row.getVisibleCells()\n                              : zConfig().columns\n                              : columnSizingInfo()\n                        \"\n                        [class]=\"cell | zTableCellConfig: zConfig().columns : 'cellClass'\"\n                        [style]=\"cell | zTableCellConfig: zConfig().columns : 'cellStyle'\"\n                        [class.z-sticky-left]=\"cell.column.getIsPinned() === 'left'\"\n                        [class.z-sticky-right]=\"cell.column.getIsPinned() === 'right'\"\n                        [class.z-sticky-left-last]=\"\n                          cell.column.getIsPinned() === 'left' && cell.column.getIsLastColumn('left')\n                        \"\n                        [class.z-sticky-right-first]=\"\n                          cell.column.getIsPinned() === 'right' && cell.column.getIsFirstColumn('right')\n                        \"\n                        [class.z-sticky-right-last]=\"\n                          cell.column.getIsPinned() === 'right' && cell.column.getIsLastColumn('right')\n                        \"\n                        [class.z-at-left-edge]=\"cell | zTableCellOffset: orderedLeafColumns()\"\n                        [class.z-col-drag]=\"cell.column.id === 'rowDrag'\"\n                        [class.z-col-select]=\"cell.column.id === 'select'\"\n                        [class.z-col-expand]=\"cell.column.id === 'expand'\"\n                        [class.z-col-actions]=\"\n                          cell.column.id === 'actions' || cell.column.id === actionColumnInfo()?.columnId\n                        \"\n                        [class.z-at-bottom]=\"cell | zTableCellBottom: zConfig().columns : table.getRowModel().rows\"\n                        [attr.rowspan]=\"cell | zTableSpan: zConfig().columns : 'cellRowSpan' : table.getRowModel().rows\"\n                        [attr.colspan]=\"cell | zTableSpan: zConfig().columns : 'cellColSpan'\">\n                        @if (cell.column.id === 'rowDrag') {\n                          <div class=\"flex items-center justify-center\">\n                            <button\n                              cdkDragHandle\n                              type=\"button\"\n                              class=\"text-muted-foreground hover:bg-muted hover:text-foreground inline-flex size-7 items-center justify-center rounded-md transition-colors\"\n                              [class.cursor-grab]=\"isRowDragEnabled()\"\n                              [class.cursor-not-allowed]=\"!isRowDragEnabled()\"\n                              [class.opacity-40]=\"!isRowDragEnabled()\">\n                              <z-icon zType=\"lucideGripVertical\" zSize=\"14\" />\n                            </button>\n                          </div>\n                        } @else if (cell.column.id === 'select') {\n                          <!-- Row Checkbox with Pin Button -->\n                          <div class=\"flex items-center justify-center gap-1\">\n                            <z-checkbox\n                              [zChecked]=\"cell.row.getIsSelected()\"\n                              [zIndeterminate]=\"cell.row.getIsSomeSelected() && !cell.row.getIsSelected()\"\n                              [zDisabled]=\"!cell.row.getCanSelect()\"\n                              (zChange)=\"cell.row.toggleSelected()\" />\n                            @if (zConfig().enableRowPinning && cell.row.depth === 0 && !hasBodyRowSpan()) {\n                              <ng-template #rowPinPopoverContent>\n                                <div class=\"flex flex-col gap-0.5 p-0.5\">\n                                  @if (cell.row.getIsPinned() !== 'top') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_top' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned() !== 'bottom') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('bottom'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_bottom' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned()) {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin(false); rowPinPopover.hideImmediate()\"\n                                      class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                                    </button>\n                                  }\n                                </div>\n                              </ng-template>\n                              <button\n                                type=\"button\"\n                                z-popover\n                                #rowPinPopover=\"zPopover\"\n                                [zPopoverContent]=\"rowPinPopoverContent\"\n                                zTrigger=\"click\"\n                                zPosition=\"bottom\"\n                                class=\"z-row-pin-trigger text-muted-foreground hover:bg-muted hover:text-foreground flex cursor-pointer items-center justify-center rounded p-1\"\n                                [class.text-primary]=\"cell.row.getIsPinned()\">\n                                <z-icon zType=\"lucideEllipsis\" zSize=\"14\" class=\"rotate-90\" />\n                              </button>\n                            }\n                          </div>\n                        } @else if (cell.column.id === 'expand') {\n                          <!-- Expand Button with Row Pin Popover -->\n                          <div class=\"flex items-center justify-center gap-1\">\n                            @if (cell.row.subRows && cell.row.subRows.length > 0) {\n                              <button\n                                type=\"button\"\n                                (click)=\"cell.row.toggleExpanded()\"\n                                class=\"hover:bg-muted flex h-6 w-6 cursor-pointer items-center justify-center rounded\">\n                                <z-icon\n                                  zType=\"lucideChevronRight\"\n                                  zSize=\"14\"\n                                  class=\"transition-transform duration-200\"\n                                  [class.rotate-90]=\"cell.row.getIsExpanded()\" />\n                              </button>\n                            }\n                            @if (\n                              zConfig().enableRowPinning &&\n                              cell.row.depth === 0 &&\n                              !(cell.row.subRows && cell.row.subRows.length > 0) &&\n                              !hasBodyRowSpan()\n                            ) {\n                              <ng-template #rowPinPopoverContent>\n                                <div class=\"flex flex-col gap-0.5 p-0.5\">\n                                  @if (cell.row.getIsPinned() !== 'top') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_top' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned() !== 'bottom') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('bottom'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_bottom' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned()) {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin(false); rowPinPopover.hideImmediate()\"\n                                      class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                                    </button>\n                                  }\n                                </div>\n                              </ng-template>\n                              <button\n                                type=\"button\"\n                                z-popover\n                                #rowPinPopover=\"zPopover\"\n                                [zPopoverContent]=\"rowPinPopoverContent\"\n                                zTrigger=\"click\"\n                                zPosition=\"bottom\"\n                                class=\"z-row-pin-trigger text-muted-foreground hover:bg-muted hover:text-foreground flex cursor-pointer items-center justify-center rounded p-1\"\n                                [class.text-primary]=\"cell.row.getIsPinned()\">\n                                <z-icon zType=\"lucideEllipsis\" zSize=\"14\" class=\"rotate-90\" />\n                              </button>\n                            }\n                          </div>\n                        } @else if (cell.column.id === 'actions') {\n                          <!-- Actions Column - Row Pin Only (for parent rows) -->\n                          @if (cell.row.depth === 0 && !hasBodyRowSpan()) {\n                            <div class=\"flex items-center justify-center\">\n                              <ng-template #rowPinPopoverContent>\n                                <div class=\"flex flex-col gap-0.5 p-0.5\">\n                                  @if (cell.row.getIsPinned() !== 'top') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_top' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned() !== 'bottom') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('bottom'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_bottom' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned()) {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin(false); rowPinPopover.hideImmediate()\"\n                                      class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                                    </button>\n                                  }\n                                </div>\n                              </ng-template>\n                              <button\n                                type=\"button\"\n                                z-popover\n                                #rowPinPopover=\"zPopover\"\n                                [zPopoverContent]=\"rowPinPopoverContent\"\n                                zTrigger=\"click\"\n                                zPosition=\"bottom\"\n                                class=\"z-row-pin-trigger text-muted-foreground hover:bg-muted hover:text-foreground flex cursor-pointer items-center justify-center rounded p-1\"\n                                [class.text-primary]=\"cell.row.getIsPinned()\">\n                                <z-icon zType=\"lucideEllipsis\" zSize=\"14\" class=\"rotate-90\" />\n                              </button>\n                            </div>\n                          }\n                        } @else if (cell.column.id === actionColumnInfo()?.columnId && actionColumnInfo()) {\n                          <z-table-actions\n                            [zConfig]=\"$any(actionColumnInfo()!.config)\"\n                            [zRow]=\"cell.row.original\"\n                            [zRowId]=\"cell.row.id\"\n                            (zActionClick)=\"onActionClick($event)\" />\n                        } @else {\n                          @let isCellVisibleNormal = cell | zTableCellVisible: zConfig().columns;\n                          @if (isCellVisibleNormal) {\n                            @let editInfo = cell.getContext() | zTableCellEdit: zConfig().columns;\n                            @if (editInfo.enabled) {\n                              <!-- Editable Cell -->\n                              <z-table-edit-cell\n                                [zRow]=\"cell.row.original\"\n                                [zRowId]=\"cell.row.id\"\n                                [zRowIndex]=\"cell.row.index\"\n                                [zColumnId]=\"cell.column.id\"\n                                [zValue]=\"cell.getValue()\"\n                                [zRowUpdate]=\"_rowUpdate()\"\n                                [zEditConfig]=\"$any(editInfo.config)\"\n                                (zChange)=\"onCellEdit($any($event))\" />\n                            } @else {\n                              <ng-container\n                                *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let cellContent\">\n                                @if (cellContent | zTableIsTemplateRef) {\n                                  <!-- TemplateRef rendering -->\n                                  @let isClickableTpl = cell.column.id | zTableCellClickable: zConfig().columns;\n                                  <div\n                                    class=\"z-template-content\"\n                                    [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                    [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\"\n                                    (click)=\"isClickableTpl && onCellClick(row, cell.column.id, cell.getValue())\">\n                                    <ng-container\n                                      *ngTemplateOutlet=\"cellContent; context: { $implicit: cell.getContext() }\" />\n                                  </div>\n                                } @else if (cellContent | zTableHasIcon) {\n                                  <!-- Icon syntax rendering -->\n                                  @let isClickableIconTpl = cell.column.id | zTableCellClickable: zConfig().columns;\n                                  <z-table-icon-text\n                                    [zText]=\"cellContent\"\n                                    [zTooltip]=\"cell | zTableCellConfig: zConfig().columns : 'contentTooltip'\"\n                                    [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                    [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\"\n                                    (click)=\"isClickableIconTpl && onCellClick(row, cell.column.id, cell.getValue())\" />\n                                } @else {\n                                  <!-- Default/innerHTML rendering -->\n                                  @let isClickableDefaultTpl = cell.column.id | zTableCellClickable: zConfig().columns;\n                                  <div\n                                    class=\"z-table-cell-text\"\n                                    z-tooltip\n                                    [zContent]=\"\n                                      (cell | zTableCellConfig: zConfig().columns : 'contentTooltip') || cellContent\n                                    \"\n                                    [innerHTML]=\"cellContent | translate | zSafeHtml\"\n                                    [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                    [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\"\n                                    (click)=\"\n                                      isClickableDefaultTpl && onCellClick(row, cell.column.id, cell.getValue())\n                                    \"></div>\n                                }\n                              </ng-container>\n                            }\n                          }\n                        }\n                      </td>\n                    }\n                    @if (\n                      canUseVirtualColumns() &&\n                      virtualRightSpacerWidth() > 0 &&\n                      cell.column.id === lastVirtualCenterColumnId()\n                    ) {\n                      <td class=\"pointer-events-none border-0 p-0\" [style.width.px]=\"virtualRightSpacerWidth()\"></td>\n                    }\n                  }\n                </tr>\n\n                <!-- Expanded Row Detail -->\n                @if (row.getIsExpanded() && row.depth === 0 && !row.subRows?.length && zConfig().expandedRowTemplate) {\n                  <tr class=\"z-expanded-row\">\n                    <td [attr.colspan]=\"renderedColumnCount()\" class=\"p-0\">\n                      <ng-container *ngTemplateOutlet=\"zConfig().expandedRowTemplate!; context: { $implicit: row }\" />\n                    </td>\n                  </tr>\n                }\n              </ng-template>\n\n              <!-- Render Top Pinned Rows (hidden when filtered data is empty) -->\n              @if (!isEmpty()) {\n                @for (row of table.getTopRows(); track row.id) {\n                  <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: row }\" />\n                }\n              }\n\n              <!-- Render Center Rows -->\n              @for (row of table.getCenterRows(); track row.id) {\n                <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: row }\" />\n              }\n\n              <!-- Render Bottom Pinned Rows (hidden when filtered data is empty) -->\n              @if (!isEmpty()) {\n                @for (row of bottomRowsReversed(); track row.id) {\n                  <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: row }\" />\n                }\n              }\n            </tbody>\n          </table>\n        }\n      </ng-scrollbar>\n    }\n    <!-- end @else -->\n  </div>\n\n  <!-- Footer table -->\n  @if (hasFooter()) {\n    <div\n      class=\"z-tfoot-wrapper\"\n      [class.z-shadow-footer]=\"shouldFooterShowShadow()\"\n      [class.z-scroll-left]=\"hasScrollLeft()\"\n      [class.z-scroll-right]=\"hasScrollRight()\"\n      #tfootWrapper>\n      <table [ngStyle]=\"columnSizeVars()\" [style.width.px]=\"table.getTotalSize()\">\n        <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n        <tfoot>\n          @for (footerGroup of orderedFooterGroups(); track footerGroup.id) {\n            @if (footerGroup | zTableFooterContent: zConfig().columns) {\n              <tr>\n                @for (footer of footerGroup.headers; track footer.id) {\n                  @if (\n                    canUseVirtualColumns() &&\n                    virtualLeftSpacerWidth() > 0 &&\n                    footer.column.id === firstVirtualCenterColumnId()\n                  ) {\n                    <th class=\"pointer-events-none border-0 p-0\" [style.width.px]=\"virtualLeftSpacerWidth()\"></th>\n                  }\n                  @let rowSpan = footer | zTableSpan: zConfig().columns : 'footerRowSpan';\n                  @let shouldRender = footer | zTableCellRender: footerGroup.headers : zConfig().columns : 'footer';\n                  @let isVirtualColumnVisible =\n                    !canUseVirtualColumns() ||\n                    footer.column.getIsPinned() !== false ||\n                    virtualCenterColumnVisibilityMap()[footer.column.id];\n                  @if (rowSpan && shouldRender && isVirtualColumnVisible) {\n                    <th\n                      [ngStyle]=\"\n                        footer.column\n                          | zTablePinningStyles: footer : 'footer' : table : zConfig().columns : columnSizingInfo()\n                      \"\n                      [class]=\"\n                        (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerClass') +\n                        ' ' +\n                        (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass')\n                      \"\n                      [style]=\"footer.column.id | zTableColumnConfig: zConfig().columns : 'footerStyle'\"\n                      [class.z-sticky-left]=\"footer.column.getIsPinned() === 'left'\"\n                      [class.z-sticky-right]=\"footer.column.getIsPinned() === 'right'\"\n                      [class.z-sticky-left-last]=\"\n                        footer | zTableCellPin: 'isLastLeftPinned' : zConfig().columns : 'footer'\n                      \"\n                      [class.z-sticky-right-first]=\"\n                        footer | zTableCellPin: 'isFirstRightPinned' : zConfig().columns : 'footer'\n                      \"\n                      [class.z-sticky-right-last]=\"\n                        footer | zTableCellPin: 'isLastRightPinned' : zConfig().columns : 'footer'\n                      \"\n                      [class.z-at-left-edge]=\"footer | zTableCellOffset: orderedLeafColumns()\"\n                      [attr.rowspan]=\"rowSpan\"\n                      [attr.colspan]=\"footer | zTableSpan: zConfig().columns : 'footerColSpan'\">\n                      @let configFooterContent =\n                        footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContent';\n                      @if (footer.column.columnDef.footer) {\n                        <ng-container\n                          *flexRender=\"footer.column.columnDef.footer; props: footer.getContext(); let footerContent\">\n                          <div\n                            class=\"flex w-full items-center\"\n                            [class.justify-center]=\"\n                              (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass') ===\n                              'text-center'\n                            \"\n                            [class.justify-end]=\"\n                              (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass') ===\n                              'text-right'\n                            \">\n                            @if (footerContent | zTableIsTemplateRef) {\n                              <!-- TemplateRef rendering -->\n                              <div\n                                class=\"z-template-content\"\n                                [ngClass]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentClass'\n                                \"\n                                [ngStyle]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentStyle'\n                                \">\n                                <ng-container\n                                  *ngTemplateOutlet=\"footerContent; context: { $implicit: footer.getContext() }\" />\n                              </div>\n                            } @else if (footerContent | zTableHasIcon) {\n                              <!-- Icon syntax rendering -->\n                              <z-table-icon-text\n                                [zText]=\"footerContent\"\n                                [zTooltip]=\"footer.column.id | zTableColumnConfig: zConfig().columns : 'footerTooltip'\"\n                                [ngClass]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentClass'\n                                \"\n                                [ngStyle]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentStyle'\n                                \" />\n                            } @else {\n                              <!-- Default/string rendering -->\n                              <span\n                                class=\"z-table-cell-text\"\n                                z-tooltip\n                                [zContent]=\"\n                                  (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerTooltip') ||\n                                  footerContent\n                                \"\n                                [ngClass]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentClass'\n                                \"\n                                [ngStyle]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentStyle'\n                                \">\n                                {{ footerContent | translate }}\n                              </span>\n                            }\n                          </div>\n                        </ng-container>\n                      } @else if (configFooterContent) {\n                        <!-- Fallback for group columns without TanStack footer -->\n                        <div\n                          class=\"flex w-full items-center\"\n                          [class.justify-center]=\"\n                            (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass') ===\n                            'text-center'\n                          \"\n                          [class.justify-end]=\"\n                            (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass') ===\n                            'text-right'\n                          \">\n                          <span\n                            class=\"z-table-cell-text\"\n                            z-tooltip\n                            [zContent]=\"\n                              (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerTooltip') ||\n                              $any(configFooterContent)\n                            \"\n                            [ngClass]=\"footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentClass'\"\n                            [ngStyle]=\"footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentStyle'\">\n                            {{ $any(configFooterContent) | translate }}\n                          </span>\n                        </div>\n                      }\n                    </th>\n                  }\n                  @if (\n                    canUseVirtualColumns() &&\n                    virtualRightSpacerWidth() > 0 &&\n                    footer.column.id === lastVirtualCenterColumnId()\n                  ) {\n                    <th class=\"pointer-events-none border-0 p-0\" [style.width.px]=\"virtualRightSpacerWidth()\"></th>\n                  }\n                }\n              </tr>\n            }\n          }\n        </tfoot>\n      </table>\n    </div>\n  }\n</div>\n\n<!-- Pagination -->\n@if (zConfig().pagination?.enabled !== false) {\n  <div class=\"mt-4 flex items-center justify-between gap-4\">\n    <div class=\"truncate text-sm text-gray-500\">\n      {{ 'i18n_z_ui_table_total_rows' | translate: { total: (paginationTotal() | zFormatNum) } }}\n    </div>\n    <z-pagination\n      [zTotal]=\"paginationTotal()\"\n      [(zPageIndex)]=\"pagination().pageIndex\"\n      [(zPageSize)]=\"pagination().pageSize\"\n      [zPageSizeOptions]=\"zConfig().pagination?.pageSizeOptions ?? [10, 20, 50, 100]\"\n      [zShowSizeChanger]=\"zConfig().pagination?.showSizeChanger ?? true\"\n      [zShowQuickJumper]=\"zConfig().pagination?.showQuickJumper ?? false\"\n      [zShowTotal]=\"false\"\n      [zDisabled]=\"zConfig().pagination?.disabled || isLoading() || isProcessing()\"\n      (zOnPageChange)=\"onPageChange($event)\" />\n  </div>\n}\n\n<!-- Floating Bulk Action Bar -->\n<div class=\"z-bulk-action-bar-origin\" cdkOverlayOrigin #bulkBarOrigin=\"cdkOverlayOrigin\"></div>\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"bulkBarOrigin\"\n  [cdkConnectedOverlayOpen]=\"bulkBarMounted()\"\n  [cdkConnectedOverlayPositions]=\"bulkBarPositions\"\n  [cdkConnectedOverlayHasBackdrop]=\"false\"\n  cdkConnectedOverlayPanelClass=\"z-bulk-action-bar-overlay\">\n  @if (bulkBarConfig(); as config) {\n    <div class=\"z-bulk-action-bar-inner\" [class.z-leaving]=\"bulkBarClosing()\">\n      <div class=\"z-bulk-action-bar-count\">\n        {{ bulkBarContext()?.selectedRowIds?.length ?? 0 | zFormatNum }}\n        {{ config.selectedLabel ?? ('i18n_z_ui_table_selected' | translate) }}\n      </div>\n\n      <div class=\"z-bulk-action-bar-divider\"></div>\n\n      @for (item of bulkBarItems(); track item.action.key) {\n        <button\n          type=\"button\"\n          class=\"z-bulk-action-bar-button\"\n          [class.z-danger]=\"item.action.type === 'outline-destructive-secondary'\"\n          [disabled]=\"item.disabled\"\n          (click)=\"onBulkActionClick(item.action)\">\n          @if (item.action.icon) {\n            <z-icon [zType]=\"item.action.icon\" [zSize]=\"item.action.iconSize ?? '14'\" />\n          }\n          @if (item.action.label) {\n            <span>{{ item.action.label | translate }}</span>\n          }\n        </button>\n      }\n    </div>\n  }\n</ng-template>\n\n<!-- Settings Drawer -->\n<z-drawer\n  [(zVisible)]=\"showSettingsDrawer\"\n  [zTitle]=\"'i18n_z_ui_table_settings_title' | translate\"\n  zPlacement=\"right\"\n  zWidth=\"500px\"\n  [zShadow]=\"true\"\n  [zOkText]=\"null\"\n  [zCancelText]=\"'i18n_z_ui_drawer_close' | translate\">\n  <div class=\"z-table-settings-drawer px-4\">\n    <!-- Display Settings -->\n    <div class=\"mb-4\">\n      <h4 class=\"text-foreground mb-2 text-sm font-semibold\">{{ 'i18n_z_ui_table_display_settings' | translate }}</h4>\n      <p class=\"text-muted-foreground mb-3 text-xs\">{{ 'i18n_z_ui_table_display_settings_desc' | translate }}</p>\n      <div class=\"grid grid-cols-2 gap-x-4 gap-y-3\">\n        <z-checkbox\n          [zChecked]=\"showHorizontalBorder()\"\n          [zText]=\"'i18n_z_ui_table_horizontal_border' | translate\"\n          (zChange)=\"showHorizontalBorder.set(!showHorizontalBorder())\" />\n        <z-checkbox\n          [zChecked]=\"showVerticalBorder()\"\n          [zText]=\"'i18n_z_ui_table_vertical_border' | translate\"\n          (zChange)=\"showVerticalBorder.set(!showVerticalBorder())\" />\n        <z-checkbox\n          [zChecked]=\"showHeaderFooterShadow()\"\n          [zText]=\"'i18n_z_ui_table_header_footer_shadow' | translate\"\n          (zChange)=\"showHeaderFooterShadow.set(!showHeaderFooterShadow())\" />\n      </div>\n    </div>\n\n    <!-- Divider -->\n    <div class=\"border-border my-4 border-t\"></div>\n\n    <!-- Unified Column Settings -->\n    @if (zConfig().enableSettings) {\n      <div class=\"mb-4\">\n        <h4 class=\"text-foreground mb-2 text-sm font-semibold\">{{ 'i18n_z_ui_table_column_settings' | translate }}</h4>\n        <p class=\"text-muted-foreground mb-3 text-xs\">{{ 'i18n_z_ui_table_column_settings_desc' | translate }}</p>\n\n        <!-- Unpinned Columns (Draggable) -->\n        <div\n          cdkDropList\n          #columnDropList=\"cdkDropList\"\n          [cdkDropListAutoScrollDisabled]=\"true\"\n          (cdkDropListDropped)=\"onPendingColumnDrop($event)\"\n          class=\"z-column-drop-list space-y-1.5\">\n          @for (columnId of columnOrder(); track columnId; let i = $index) {\n            @if (columnId !== 'expand' && columnId !== 'select' && columnId !== 'rowDrag') {\n              @let column = table.getColumn(columnId);\n              @let isPinned = column?.getIsPinned();\n              @let isVisible = columnVisibility()[columnId] !== false;\n              @let canPin = column?.getCanPin() !== false && zConfig().enableColumnPinning;\n              @if (!isPinned) {\n                <div\n                  cdkDrag\n                  [cdkDragData]=\"columnId\"\n                  cdkDragLockAxis=\"y\"\n                  cdkDragPreviewContainer=\"global\"\n                  cdkDragPreviewClass=\"z-drag-preview\"\n                  class=\"z-drag-item border-border bg-card hover:border-primary flex cursor-grab items-center gap-2 rounded border px-2 py-1.5 text-sm active:cursor-grabbing\"\n                  [class.opacity-60]=\"!isVisible\">\n                  <!-- Drag Handle -->\n                  <z-icon\n                    cdkDragHandle\n                    zType=\"lucideGripVertical\"\n                    zSize=\"14\"\n                    class=\"text-muted-foreground shrink-0 cursor-grab active:cursor-grabbing\" />\n\n                  <!-- Visibility Checkbox -->\n                  <input\n                    type=\"checkbox\"\n                    [checked]=\"isVisible\"\n                    (change)=\"onToggleColumnVisibility(columnId)\"\n                    (mousedown)=\"$event.stopPropagation()\"\n                    class=\"border-input h-4 w-4 shrink-0 cursor-pointer rounded\" />\n\n                  <!-- Column Name -->\n                  <span class=\"flex min-w-0 flex-1 flex-col\">\n                    <span class=\"truncate\" [class.text-muted-foreground]=\"!isVisible\">\n                      {{ columnId | zTableColumnHeader: zConfig().columns | translate }}\n                    </span>\n                    @let parents = columnId | zTableColumnParents: zConfig().columns;\n                    @if (parents) {\n                      <span class=\"text-muted-foreground truncate text-[0.625rem]\">({{ parents | translate }})</span>\n                    }\n                  </span>\n\n                  <!-- Pin Buttons -->\n                  @if (canPin) {\n                    <div class=\"flex shrink-0 items-center gap-0.5\" (mousedown)=\"$event.stopPropagation()\">\n                      <button\n                        type=\"button\"\n                        [disabled]=\"!isVisible\"\n                        (click)=\"onToggleColumnPin(columnId, 'left')\"\n                        class=\"text-muted-foreground hover:bg-muted cursor-pointer rounded p-1 text-xs transition-colors disabled:cursor-not-allowed disabled:opacity-40\"\n                        title=\"Pin Left\">\n                        <z-icon zType=\"lucideArrowLeft\" zSize=\"12\" />\n                      </button>\n                      <button\n                        type=\"button\"\n                        [disabled]=\"!isVisible\"\n                        (click)=\"onToggleColumnPin(columnId, 'right')\"\n                        class=\"text-muted-foreground hover:bg-muted cursor-pointer rounded p-1 text-xs transition-colors disabled:cursor-not-allowed disabled:opacity-40\"\n                        title=\"Pin Right\">\n                        <z-icon zType=\"lucideArrowRight\" zSize=\"12\" />\n                      </button>\n                    </div>\n                  }\n                </div>\n              }\n            }\n          }\n        </div>\n\n        <!-- Pinned Columns Section -->\n        @if (zConfig().enableColumnPinning) {\n          @if (pinnedColumnIds().length > 0) {\n            <div class=\"border-border mt-4 border-t pt-4\">\n              <h5 class=\"text-muted-foreground mb-2 text-xs font-medium\">\n                {{ 'i18n_z_ui_table_pinned_columns' | translate }}\n              </h5>\n              <div class=\"space-y-1.5\">\n                @for (columnId of pinnedColumnIds(); track columnId) {\n                  @let column = table.getColumn(columnId);\n                  @let isPinned = column?.getIsPinned();\n                  @let isVisible = columnVisibility()[columnId] !== false;\n                  <div\n                    class=\"border-border bg-muted/30 flex items-center gap-2 rounded border px-2 py-1.5 text-sm\"\n                    [class.opacity-60]=\"!isVisible\">\n                    <!-- Pin Icon -->\n                    <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"text-primary shrink-0\" />\n\n                    <!-- Visibility Checkbox -->\n                    <input\n                      type=\"checkbox\"\n                      [checked]=\"isVisible\"\n                      (change)=\"onToggleColumnVisibility(columnId)\"\n                      class=\"border-input h-4 w-4 shrink-0 cursor-pointer rounded\" />\n\n                    <!-- Column Name -->\n                    <span class=\"flex min-w-0 flex-1 flex-col\">\n                      <span class=\"truncate\" [class.text-muted-foreground]=\"!isVisible\">\n                        {{ columnId | zTableColumnHeader: zConfig().columns | translate }}\n                      </span>\n                      @let pinnedParents = columnId | zTableColumnParents: zConfig().columns;\n                      @if (pinnedParents) {\n                        <span class=\"text-muted-foreground truncate text-[0.625rem]\">\n                          ({{ pinnedParents | translate }})\n                        </span>\n                      }\n                    </span>\n\n                    <!-- Position Badge -->\n                    <span class=\"bg-primary/10 text-primary shrink-0 rounded px-1.5 py-0.5 text-[0.625rem] font-medium\">\n                      {{\n                        isPinned === 'left'\n                          ? ('i18n_z_ui_table_left' | translate)\n                          : ('i18n_z_ui_table_right' | translate)\n                      }}\n                    </span>\n\n                    <!-- Unpin Button -->\n                    <button\n                      type=\"button\"\n                      (click)=\"onToggleColumnPin(columnId, isPinned === 'left' ? 'left' : 'right')\"\n                      class=\"text-muted-foreground hover:bg-muted hover:text-foreground cursor-pointer rounded p-1 text-xs transition-colors\"\n                      title=\"Unpin\">\n                      <z-icon zType=\"lucideX\" zSize=\"12\" />\n                    </button>\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        }\n      </div>\n    }\n  </div>\n</z-drawer>\n", styles: [".z-bulk-action-bar-origin{position:fixed;left:50%;bottom:1rem;width:1px;height:1px;pointer-events:none}:host ::ng-deep .z-bulk-action-bar-overlay{max-width:calc(100vw - 2rem);margin-bottom:1rem;transform-origin:center bottom}.z-bulk-action-bar-inner{border:thin solid color-mix(in srgb,var(--border) 88%,transparent);border-radius:.5rem;background:color-mix(in srgb,var(--card) 96%,var(--background));color:var(--foreground);box-shadow:0 1rem 2.5rem color-mix(in srgb,var(--foreground) 16%,transparent),0 .25rem .75rem color-mix(in srgb,var(--foreground) 8%,transparent),0 0 0 1px color-mix(in srgb,var(--background) 65%,transparent) inset;display:flex;align-items:center;width:max-content;min-height:2.25rem;max-width:calc(100vw - 2rem);overflow:hidden;transform-origin:center bottom;animation:z-bulk-action-bar-enter .18s cubic-bezier(.16,1,.3,1);will-change:opacity,transform}.z-bulk-action-bar-inner.z-leaving{pointer-events:none;animation:z-bulk-action-bar-exit .14s ease-in forwards}.z-bulk-action-bar-count{padding:0 .75rem;white-space:nowrap;font-size:.8125rem;font-weight:500;color:var(--foreground)}.z-bulk-action-bar-divider{width:1px;align-self:stretch;background:color-mix(in srgb,var(--border) 88%,transparent)}.z-bulk-action-bar-button{display:inline-flex;align-items:center;gap:.375rem;min-height:2.25rem;padding:0 .75rem;border-left:thin solid color-mix(in srgb,var(--border) 78%,transparent);color:var(--foreground);font-size:.8125rem;white-space:nowrap;cursor:pointer;transition:background-color .14s ease,color .14s ease}.z-bulk-action-bar-button:hover:not(:disabled){background:var(--muted)}.z-bulk-action-bar-button:disabled{cursor:not-allowed;opacity:.45}.z-bulk-action-bar-button.z-danger{color:var(--destructive)}.z-bulk-action-bar-button.z-danger:hover:not(:disabled){background:color-mix(in srgb,var(--destructive) 12%,transparent)}@keyframes z-bulk-action-bar-enter{0%{opacity:0;transform:translateY(.875rem)}to{opacity:1;transform:translateY(0)}}@keyframes z-bulk-action-bar-exit{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(.875rem)}}@media(prefers-reduced-motion:reduce){.z-bulk-action-bar-inner{animation:none}}:host ::ng-deep .z-table-cell-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;min-width:0;-webkit-user-select:text;user-select:text}:host ::ng-deep .z-table-cell-text>*,:host ::ng-deep .z-table-cell-text *{display:inline-block;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}.z-template-content{display:block;width:100%;min-width:0;max-width:100%;overflow:hidden}.z-template-content>*{min-width:0;max-width:100%}.z-template-content>[class*=flex]{min-width:0;max-width:100%}.z-template-content>[class*=flex]>*{min-width:0;flex-shrink:1}.z-template-content>[class*=grid]{min-width:0;max-width:100%}.z-thead-wrapper{flex-shrink:0;background:var(--muted);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.z-thead-wrapper::-webkit-scrollbar{display:none}.z-table-row-drag-preview{display:flex;align-items:stretch;overflow:hidden;border:1px solid var(--primary);border-radius:.5rem;background-color:var(--card);box-shadow:0 10px 24px #00000029}.z-table-row-drag-preview-cell{display:flex;min-width:0;align-items:center;padding:.5rem 12px;border-right:thin solid var(--border);background-color:var(--card);color:var(--foreground);font-size:.875rem}.z-table-row-drag-preview-cell:last-child{border-right:none}.z-table-row-drag-preview-cell>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.z-table-row-drag-preview-handle{justify-content:center}.z-table-row-drag-placeholder-row td{padding:0!important;border-top:none!important;border-left:none!important;border-right:none!important;border-bottom:thin solid transparent!important;background:transparent!important}.z-table-row-drag-placeholder-inner{width:100%;min-height:2.625rem;border:2px dashed var(--primary);border-radius:0;background-color:color-mix(in srgb,var(--primary) 10%,transparent);opacity:1!important;visibility:visible!important;box-sizing:border-box}.z-table-row-drag-placeholder-row.cdk-drag-placeholder *{opacity:1}.z-table-row-drag-placeholder-row.cdk-drag-placeholder .z-table-row-drag-placeholder-inner{opacity:1!important;visibility:visible!important}:host{display:flex;flex-direction:column;height:100%;--scrollbar-track-thickness: 7px;--scrollbar-track-color: transparent;--scrollbar-thumb-shape: 3px;--z-shadow-left-right: -1.875rem;--z-shadow-left-width: 1.875rem;--z-shadow-left-opacity: 0;--z-shadow-right-left: -1.875rem;--z-shadow-right-width: 1.875rem;--z-shadow-right-opacity: 0;--z-sticky-left-border-color: transparent;--z-sticky-right-border-color: var(--border)}.z-table-container{display:flex;flex-direction:column;position:relative;width:100%;height:100%;overflow:hidden;border-radius:.3125rem;border:thin solid var(--border);background-color:var(--card)}.z-table-container.z-table-borderless{border:none;border-radius:0;box-shadow:none!important;background-color:transparent}.z-table-container.z-hide-horizontal-border th,.z-table-container.z-hide-horizontal-border td{border-bottom:none!important;border-top:none!important}.z-table-container.z-hide-vertical-border th,.z-table-container.z-hide-vertical-border td{border-left:none!important}table{width:fit-content;min-width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:.875rem}.z-table-toolbar .z-settings-btn{transition:all .15s ease}.z-table-toolbar .z-settings-btn:hover{border-color:var(--muted-foreground)}.z-thead-wrapper{flex-shrink:0;background:var(--muted);overflow-x:hidden;overflow-y:hidden;touch-action:pan-y pinch-zoom}.z-thead-wrapper th{height:auto;padding:.5rem 12px;text-align:left;vertical-align:middle;font-weight:500;color:var(--foreground);white-space:nowrap;overflow:hidden;background:var(--muted);border-left:thin solid var(--border);border-bottom:thin solid var(--border);-webkit-user-select:none;user-select:none}.z-thead-wrapper th.z-at-left-edge{border-left:none}.z-thead-wrapper th[colspan]{text-align:center;background:var(--muted);font-weight:500;color:var(--foreground)}.z-thead-wrapper.z-shadow-header{box-shadow:0 1px 3px #00000014;position:relative;z-index:15}.z-thead-wrapper.z-shadow-header:where(.dark,.dark *){box-shadow:0 1px 3px #0000004d}.z-tbody-wrapper{flex:1;min-height:6.25rem;display:flex;flex-direction:column}.z-tbody-scrollbar{flex:1;height:100%}.z-empty-state,.z-loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:6.25rem;height:100%;color:var(--muted-foreground);font-size:.875rem;animation:z-fade-in .2s ease-out}.z-tbody-scrollbar,.z-tbody-scrollbar table{animation:z-fade-in .2s ease-out}@keyframes z-fade-in{0%{opacity:0;transform:translateY(.25rem)}to{opacity:1;transform:translateY(0)}}.z-tbody-wrapper tr{transition:background-color .15s ease}.z-tbody-wrapper tr:hover,.z-tbody-wrapper tr:hover td[style*=sticky]{background-color:var(--muted)}.z-tbody-wrapper tr.z-pinned-top td.z-sticky-left,.z-tbody-wrapper tr.z-pinned-top td.z-sticky-right,.z-tbody-wrapper tr.z-pinned-bottom td.z-sticky-left,.z-tbody-wrapper tr.z-pinned-bottom td.z-sticky-right{z-index:3}.z-tbody-wrapper tr.z-shadow-bottom{box-shadow:0 1px 3px #00000014!important;position:relative;z-index:15}.z-tbody-wrapper tr.z-shadow-bottom:where(.dark,.dark *){box-shadow:0 1px 3px #0000004d!important}.z-tbody-wrapper tr.z-shadow-top{box-shadow:0 -2px 4px #0000000d!important;position:relative;z-index:15}.z-tbody-wrapper tr.z-shadow-top:where(.dark,.dark *){box-shadow:0 -2px 4px #0003!important}.z-tbody-wrapper td{padding:.5rem 12px;height:2.5rem;vertical-align:middle;color:var(--foreground);white-space:nowrap;overflow:hidden;background:var(--card);border-left:thin solid var(--border);border-bottom:thin solid var(--border);box-sizing:border-box}.z-tbody-wrapper tbody.z-has-vertical-scroll td.z-at-bottom,.z-tbody-wrapper tbody.z-last-row-touches-bottom td.z-at-bottom{border-bottom:none}.z-tbody-wrapper td.z-at-left-edge{border-left:none}.z-tbody-wrapper td i{color:var(--muted-foreground);font-style:italic}.z-tbody-wrapper td[rowspan]{vertical-align:top;padding-top:.75rem}.z-tbody-wrapper td.z-row-hover{background-color:var(--muted)!important}.z-tbody-wrapper td.z-col-select,.z-tbody-wrapper td.z-col-expand,.z-tbody-wrapper td.z-col-actions{padding:.5rem 4px!important;text-align:center}.z-tbody-wrapper tr.z-child-row td.z-col-select:first-child,.z-tbody-wrapper tr.z-child-row td.z-col-expand:first-child,.z-tbody-wrapper tr.z-child-row td.z-col-actions:first-child{padding-left:0!important}.z-virtual-scroll-inner{position:relative;width:100%}.z-virtual-row{position:absolute;top:0;left:0;width:100%}tr.z-child-row td:first-child{padding-left:.75rem!important}tbody tr.z-selected,tbody tr.z-selected td{background-color:color-mix(in srgb,var(--primary) 15%,var(--background))!important}tbody tr.z-selected:hover,tbody tr.z-selected:hover td{background-color:color-mix(in srgb,var(--primary) 20%,var(--background))!important}tbody tr.z-indeterminate-selected,tbody tr.z-indeterminate-selected td{background-color:color-mix(in srgb,var(--primary) 10%,var(--background))!important}tbody tr.z-indeterminate-selected:hover,tbody tr.z-indeterminate-selected:hover td{background-color:color-mix(in srgb,var(--primary) 15%,var(--background))!important}tbody tr.z-pinned-top td{background-color:var(--card)!important}tbody tr.z-pinned-top:hover{background-color:var(--muted)}tbody tr.z-pinned-top:hover td{background-color:var(--muted)!important}tbody tr.z-pinned-bottom td{background-color:var(--card)!important}tbody tr.z-pinned-bottom:hover{background-color:var(--muted)}tbody tr.z-pinned-bottom:hover td,tr.z-expanded-row td{background-color:var(--muted)!important}thead th{position:relative}thead th .z-resizer{position:absolute;right:0;top:0;height:100%;width:.5rem;background:transparent;cursor:col-resize;-webkit-user-select:none;user-select:none;touch-action:none;z-index:5}thead th .z-resizer:after{content:\"\";position:absolute;right:0;top:0;height:100%;width:.1875rem;background:#0000001a;opacity:0;transition:opacity .2s ease}thead th .z-resizer:after:where(.dark,.dark *){background:#ffffff1a}thead th .z-resizer:hover:after{opacity:1;background:var(--primary);width:.1875rem}thead th .z-resizer.z-is-resizing:after{opacity:1;background:var(--primary);width:.1875rem}thead th .z-resizer.z-resizer-left{right:auto;left:0}thead th .z-resizer.z-resizer-left:after{right:auto;left:0}.z-thead-wrapper th.z-sticky-left,.z-thead-wrapper th.z-sticky-right,.z-tbody-wrapper th.z-sticky-left,.z-tbody-wrapper th.z-sticky-right,.z-tfoot-wrapper th.z-sticky-left,.z-tfoot-wrapper th.z-sticky-right{background-color:var(--muted);z-index:1;transform:translateZ(0);backface-visibility:hidden}.z-thead-wrapper td.z-sticky-left,.z-thead-wrapper td.z-sticky-right,.z-tbody-wrapper td.z-sticky-left,.z-tbody-wrapper td.z-sticky-right,.z-tfoot-wrapper td.z-sticky-left,.z-tfoot-wrapper td.z-sticky-right{background-color:var(--card);z-index:1;transform:translateZ(0);backface-visibility:hidden}.z-thead-wrapper th.z-sticky-left-last,.z-thead-wrapper td.z-sticky-left-last,.z-tbody-wrapper th.z-sticky-left-last,.z-tbody-wrapper td.z-sticky-left-last,.z-tfoot-wrapper th.z-sticky-left-last,.z-tfoot-wrapper td.z-sticky-left-last{position:relative;overflow:visible;border-right:thin solid var(--z-sticky-left-border-color)}.z-thead-wrapper th.z-sticky-left-last:after,.z-thead-wrapper td.z-sticky-left-last:after,.z-tbody-wrapper th.z-sticky-left-last:after,.z-tbody-wrapper td.z-sticky-left-last:after,.z-tfoot-wrapper th.z-sticky-left-last:after,.z-tfoot-wrapper td.z-sticky-left-last:after{content:\"\";position:absolute;top:0;bottom:0;right:var(--z-shadow-left-right);width:var(--z-shadow-left-width);pointer-events:none;box-shadow:inset 10px 0 8px -8px #0000001a;z-index:10;opacity:var(--z-shadow-left-opacity)}:host-context(.dark) .z-thead-wrapper th.z-sticky-left-last:after,:host-context(.dark) .z-thead-wrapper td.z-sticky-left-last:after,:host-context(.dark) .z-tbody-wrapper th.z-sticky-left-last:after,:host-context(.dark) .z-tbody-wrapper td.z-sticky-left-last:after,:host-context(.dark) .z-tfoot-wrapper th.z-sticky-left-last:after,:host-context(.dark) .z-tfoot-wrapper td.z-sticky-left-last:after{box-shadow:inset 10px 0 10px -8px #0000004d}.z-thead-wrapper.z-scroll-left,.z-tbody-wrapper.z-scroll-left,.z-tfoot-wrapper.z-scroll-left{--z-shadow-left-opacity: 1}.z-thead-wrapper.z-scroll-left:where(.dark,.dark *),.z-tbody-wrapper.z-scroll-left:where(.dark,.dark *),.z-tfoot-wrapper.z-scroll-left:where(.dark,.dark *){--z-sticky-left-border-color: var(--border)}.z-thead-wrapper th.z-sticky-right-first,.z-thead-wrapper td.z-sticky-right-first,.z-tbody-wrapper th.z-sticky-right-first,.z-tbody-wrapper td.z-sticky-right-first,.z-tfoot-wrapper th.z-sticky-right-first,.z-tfoot-wrapper td.z-sticky-right-first{position:relative;overflow:visible;border-left:thin solid var(--z-sticky-right-border-color)}.z-thead-wrapper th.z-sticky-right-first:before,.z-thead-wrapper td.z-sticky-right-first:before,.z-tbody-wrapper th.z-sticky-right-first:before,.z-tbody-wrapper td.z-sticky-right-first:before,.z-tfoot-wrapper th.z-sticky-right-first:before,.z-tfoot-wrapper td.z-sticky-right-first:before{content:\"\";position:absolute;top:0;bottom:0;left:var(--z-shadow-right-left);width:var(--z-shadow-right-width);pointer-events:none;box-shadow:inset -10px 0 8px -8px #0000001a;z-index:10;opacity:var(--z-shadow-right-opacity)}:host-context(.dark) .z-thead-wrapper th.z-sticky-right-first:before,:host-context(.dark) .z-thead-wrapper td.z-sticky-right-first:before,:host-context(.dark) .z-tbody-wrapper th.z-sticky-right-first:before,:host-context(.dark) .z-tbody-wrapper td.z-sticky-right-first:before,:host-context(.dark) .z-tfoot-wrapper th.z-sticky-right-first:before,:host-context(.dark) .z-tfoot-wrapper td.z-sticky-right-first:before{box-shadow:inset -10px 0 10px -8px #0000004d}.z-thead-wrapper.z-scroll-right,.z-tbody-wrapper.z-scroll-right,.z-tfoot-wrapper.z-scroll-right{--z-shadow-right-opacity: 1}.z-thead-wrapper.z-scroll-right:not(:where(.dark,.dark *)),.z-tbody-wrapper.z-scroll-right:not(:where(.dark,.dark *)),.z-tfoot-wrapper.z-scroll-right:not(:where(.dark,.dark *)){--z-sticky-right-border-color: transparent}.z-thead-wrapper th.z-sticky-right-last,.z-tfoot-wrapper th.z-sticky-right-last{position:relative}.z-thead-wrapper th.z-sticky-right-last:after,.z-tfoot-wrapper th.z-sticky-right-last:after{content:\"\";position:absolute;top:0;bottom:0;right:-1.875rem;width:1.875rem;background:var(--muted);pointer-events:none}.z-tfoot-wrapper{flex-shrink:0;background:var(--muted);overflow-x:hidden;overflow-y:hidden;touch-action:pan-y pinch-zoom}.z-tfoot-wrapper th{height:auto;padding:.5rem 12px;text-align:left;vertical-align:middle;font-weight:500;font-size:.75rem;color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.5px;background:var(--muted);border-left:thin solid var(--border);border-top:thin solid var(--border)}.z-tfoot-wrapper th.z-at-left-edge{border-left:none}.z-tfoot-wrapper.z-shadow-footer{box-shadow:0 -2px 4px #0000000d;position:relative;z-index:15}.z-tfoot-wrapper.z-shadow-footer:where(.dark,.dark *){box-shadow:0 -2px 4px #0003}.z-pin-btn{padding:.125rem 4px;border-radius:.25rem;color:var(--muted-foreground);transition:all .15s ease}.z-pin-btn:hover{background-color:var(--muted);color:var(--foreground)}.z-pin-btn.z-pin-btn-active{color:var(--primary);background-color:var(--primary)}.z-pin-btn.z-pin-btn-active:hover{background-color:var(--primary);opacity:.8}.z-row-pin-trigger{opacity:1}.z-row-pin-trigger.text-primary{color:var(--primary)}.z-header-pin-trigger{opacity:1}.z-header-pin-trigger.text-primary{color:var(--primary)}th{overflow:hidden}th .z-header-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}th .z-header-text-wrapper{transition:background-color .15s ease;border-radius:.25rem;min-width:0;overflow:hidden;flex-shrink:1}th .z-header-text-wrapper.z-has-options:hover{background-color:color-mix(in srgb,var(--foreground) 8%,transparent)}th .z-header-text-wrapper.z-has-options:active{background-color:color-mix(in srgb,var(--foreground) 12%,transparent)}.cdk-drag-preview,.z-drag-preview{box-shadow:0 5px 20px #0003;box-sizing:border-box;border-radius:.375rem;background-color:var(--card);border:1px solid var(--primary);overflow:hidden;z-index:10000!important;pointer-events:none}.cdk-drag-preview:where(.dark,.dark *),.z-drag-preview:where(.dark,.dark *){box-shadow:0 5px 20px #00000080}.cdk-drag-placeholder{background-color:color-mix(in srgb,var(--primary) 10%,var(--background));border:2px dashed var(--primary);box-sizing:border-box;border-radius:.375rem}.cdk-drag-animating{transition:transform .1s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .cdk-drag:not(.cdk-drag-placeholder){transition:transform .1s cubic-bezier(0,0,.2,1)}.z-drag-item.cdk-drag-dragging{transition:none!important}.z-column-drop-list{min-height:3.125rem;overscroll-behavior:contain}.z-column-drop-list.cdk-drop-list-dragging{overflow:clip}.z-table-settings-drawer input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:1rem;height:1rem;border:thin solid var(--input);border-radius:.25rem;background-color:var(--background);cursor:pointer;position:relative;transition:all .2s ease}.z-table-settings-drawer input[type=checkbox]:hover{border-color:var(--primary)}.z-table-settings-drawer input[type=checkbox]:checked{background-color:var(--primary);border-color:var(--primary)}.z-table-settings-drawer input[type=checkbox]:checked:after{content:\"\";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:.375rem;height:.625rem;border:solid var(--primary-foreground);border-width:0 .125rem .125rem 0;transform:translate(-50%,-60%) rotate(45deg)}.z-table-settings-drawer input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: i1$1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "ngmodule", type: ScrollingModule }, { kind: "component", type: NgScrollbar, selector: "ng-scrollbar:not([externalViewport]), [ngScrollbar]", exportAs: ["ngScrollbar"] }, { kind: "directive", type: FlexRenderDirective, selector: "[flexRender]", inputs: ["flexRender", "flexRenderProps", "flexRenderInjector"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: ZCheckboxComponent, selector: "z-checkbox", inputs: ["class", "zType", "zSize", "zLabel", "zText", "zDisabled", "zIndeterminate", "zValue", "zOptions", "zOrientation", "zCheckAll", "zCheckAllText", "zChecked", "zGroupValue"], outputs: ["zChange", "zGroupChange", "zOnBlur", "zOnFocus", "zControl", "zEvent", "zCheckedChange", "zGroupValueChange"] }, { kind: "component", type: ZEmptyComponent, selector: "z-empty", inputs: ["class", "zType", "zIcon", "zIconSize", "zSize", "zMessage", "zDescription"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZInputComponent, selector: "z-input", inputs: ["class", "zType", "zSize", "zAlign", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zPrefix", "zSuffix", "zMin", "zMax", "zStep", "zShowArrows", "zMask", "zDecimalPlaces", "zAllowNegative", "zThousandSeparator", "zDecimalMarker", "zValidators", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zShowPasswordToggle", "zSearch", "zDebounce", "zAutofocus", "zAutoComplete", "zAllowClear", "zAutoSizeContent", "zRows", "zResize", "zMaxLength", "zAutoSuggest", "zColorConfig"], outputs: ["zOnSearch", "zOnChange", "zOnBlur", "zOnFocus", "zOnKeydown", "zOnEnter", "zOnColorCollapse", "zControl", "zEvent"], exportAs: ["zInput"] }, { kind: "component", type: ZLoadingComponent, selector: "z-loading", inputs: ["class", "zSpinner", "zSize", "zColor", "zText", "zOverlay", "zOverlayType", "zFullscreen", "zLoading"] }, { kind: "component", type: ZSkeletonComponent, selector: "z-skeleton", inputs: ["class", "zType", "zSize", "zWidth", "zHeight", "zRows", "zGap", "zAnimated", "zRadius"] }, { kind: "component", type: ZDrawerComponent, selector: "z-drawer", inputs: ["class", "zVisible", "zTitle", "zDescription", "zWidth", "zHeight", "zPlacement", "zClosable", "zMaskClosable", "zHideFooter", "zHideHeader", "zOkText", "zCancelText", "zOkDestructive", "zOkDisabled", "zLoading", "zOverlay", "zShadow", "zShape", "zContentLoading", "zSkeletonRows"], outputs: ["zOnOk", "zOnCancel", "zAfterClose", "zScrollbar", "zVisibleChange"], exportAs: ["zDrawer"] }, { kind: "component", type: ZPaginationComponent, selector: "z-pagination", inputs: ["zPageIndex", "zPageSize", "zTotal", "zPageSizeOptions", "zShowSizeChanger", "zShowQuickJumper", "zShowTotal", "zSimple", "zSize", "zDisabled", "zTotalLabel", "zPerPageLabel", "zGoToLabel"], outputs: ["zOnPageChange", "zPageIndexChange", "zPageSizeChange"] }, { kind: "component", type: ZTableFilterComponent, selector: "z-table-filter", inputs: ["zColumn", "zTable"] }, { kind: "component", type: ZTableEditCellComponent, selector: "z-table-edit-cell", inputs: ["zRow", "zRowId", "zRowIndex", "zColumnId", "zValue", "zEditConfig", "zRowUpdate"], outputs: ["zChange"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zTriggerRef", "zManualClose", "zScrollClose", "zShowArrow"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange"], exportAs: ["zPopover"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTrigger", "zTooltipType", "zTooltipSize", "zClass", "zShowDelay", "zHideDelay", "zArrow", "zDisabled", "zOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "directive", type: ZTableResizeDirective, selector: "[z-table-resize],[zTableResize]", inputs: ["zTableResize"] }, { kind: "directive", type: ZTableRowHoverDirective, selector: "[z-table-row-hover], [zTableRowHover]", inputs: ["zTableRowHover"] }, { kind: "component", type: ZTableIconTextComponent, selector: "z-table-icon-text", inputs: ["zText", "zTooltip", "zTriggerElement"] }, { kind: "component", type: ZTableActionsComponent, selector: "z-table-actions", inputs: ["zConfig", "zRow", "zRowId", "zDropdownButtonSize"], outputs: ["zActionClick"] }, { kind: "pipe", type: ZTableIsTemplateRefPipe, name: "zTableIsTemplateRef" }, { kind: "pipe", type: ZTableHasIconPipe, name: "zTableHasIcon" }, { kind: "pipe", type: ZTableCellBottomPipe, name: "zTableCellBottom" }, { kind: "pipe", type: ZTableCellClickablePipe, name: "zTableCellClickable" }, { kind: "pipe", type: ZTableCellConfigPipe, name: "zTableCellConfig" }, { kind: "pipe", type: ZTableCellEditPipe, name: "zTableCellEdit" }, { kind: "pipe", type: ZTableCellOffsetPipe, name: "zTableCellOffset" }, { kind: "pipe", type: ZTableCellPinPipe, name: "zTableCellPin" }, { kind: "pipe", type: ZTableCellVisiblePipe, name: "zTableCellVisible" }, { kind: "pipe", type: ZTableColumnConfigPipe, name: "zTableColumnConfig" }, { kind: "pipe", type: ZTableColumnHeaderPipe, name: "zTableColumnHeader" }, { kind: "pipe", type: ZTableColumnParentsPipe, name: "zTableColumnParents" }, { kind: "pipe", type: ZTableFooterContentPipe, name: "zTableFooterContent" }, { kind: "pipe", type: ZTablePinningStylesPipe, name: "zTablePinningStyles" }, { kind: "pipe", type: ZTableRowPipe, name: "zTableRow" }, { kind: "pipe", type: ZTableSpanPipe, name: "zTableSpan" }, { kind: "pipe", type: ZTableCellRenderPipe, name: "zTableCellRender" }, { kind: "pipe", type: ZFormatNumPipe, name: "zFormatNum" }, { kind: "pipe", type: ZSafeHtmlPipe, name: "zSafeHtml" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZTableComponent, isStandalone: true, selector: "z-table", inputs: { zClass: { classPropertyName: "zClass", publicName: "zClass", isSignal: true, isRequired: false, transformFunction: null }, zConfig: { classPropertyName: "zConfig", publicName: "zConfig", isSignal: true, isRequired: false, transformFunction: null }, zLoading: { classPropertyName: "zLoading", publicName: "zLoading", isSignal: true, isRequired: false, transformFunction: null }, zKey: { classPropertyName: "zKey", publicName: "zKey", isSignal: true, isRequired: false, transformFunction: null }, zVariant: { classPropertyName: "zVariant", publicName: "zVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zChange: "zChange", zControl: "zControl" }, host: { classAttribute: "z-table block relative py-1" }, providers: [TranslatePipe], viewQueries: [{ propertyName: "theadWrapper", first: true, predicate: ["theadWrapper"], descendants: true, isSignal: true }, { propertyName: "tbodyContainer", first: true, predicate: ["tbodyContainer"], descendants: true, isSignal: true }, { propertyName: "tbodyWrapper", first: true, predicate: ["tbodyWrapper"], descendants: true, isSignal: true }, { propertyName: "tbodyScrollbar", first: true, predicate: ["tbodyWrapper"], descendants: true, isSignal: true }, { propertyName: "tfootWrapper", first: true, predicate: ["tfootWrapper"], descendants: true, isSignal: true }, { propertyName: "expandedRowTemplate", first: true, predicate: ["expandedRowTemplate"], descendants: true, isSignal: true }, { propertyName: "virtualRowElements", predicate: ["virtualRow"], descendants: true, isSignal: true }], exportAs: ["zTable"], ngImport: i0, template: "<!-- Toolbar: Search & Settings -->\n@if (isSearchEnabled() || zConfig().enableSettings) {\n  <div class=\"z-table-toolbar mb-2 flex items-center justify-between gap-4\">\n    <!-- Search -->\n    @if (isSearchEnabled()) {\n      @let config = searchConfig();\n      <z-input\n        [class]=\"config?.width ?? 'w-64'\"\n        [zSize]=\"config?.size ?? 'sm'\"\n        [zPlaceholder]=\"config?.placeholder ?? 'i18n_z_ui_table_search' | translate\"\n        [zSearch]=\"true\"\n        [zDebounce]=\"config?.debounceTime ?? 300\"\n        (zOnSearch)=\"onSearchChange($event)\" />\n    } @else {\n      <div></div>\n    }\n\n    <!-- Settings Button -->\n    @if (zConfig().enableSettings) {\n      <z-button zType=\"outline\" zSize=\"sm\" zTypeIcon=\"lucideSettings\" (click)=\"openSettingsDrawer()\">\n        {{ 'i18n_z_ui_table_settings' | translate }}\n      </z-button>\n    }\n  </div>\n}\n\n<div\n  [class]=\"classTable()\"\n  [class.z-hide-horizontal-border]=\"!showHorizontalBorder()\"\n  [class.z-hide-vertical-border]=\"!showVerticalBorder()\"\n  [style.max-height]=\"zConfig().maxHeight\"\n  [style.min-height]=\"zConfig().minHeight\">\n  <!-- Shared colgroup template -->\n  <ng-template #colGroupTpl>\n    <colgroup>\n      @if (canUseVirtualColumns()) {\n        @for (column of leftLeafColumns(); track column.id) {\n          @let customWidth = column.id | zTableColumnConfig: zConfig().columns : 'width';\n          <col [style.width]=\"customWidth || 'calc(var(--col-' + column.id + '-size) * 1px)'\" />\n        }\n        @if (virtualLeftSpacerWidth() > 0) {\n          <col [style.width.px]=\"virtualLeftSpacerWidth()\" />\n        }\n        @for (column of virtualCenterColumns(); track column.id) {\n          @let customWidth = column.id | zTableColumnConfig: zConfig().columns : 'width';\n          <col [style.width]=\"customWidth || 'calc(var(--col-' + column.id + '-size) * 1px)'\" />\n        }\n        @if (virtualRightSpacerWidth() > 0) {\n          <col [style.width.px]=\"virtualRightSpacerWidth()\" />\n        }\n        @for (column of rightLeafColumns(); track column.id) {\n          @let customWidth = column.id | zTableColumnConfig: zConfig().columns : 'width';\n          <col [style.width]=\"customWidth || 'calc(var(--col-' + column.id + '-size) * 1px)'\" />\n        }\n      } @else {\n        @for (column of orderedLeafColumns(); track column.id) {\n          @if (column.getIsVisible()) {\n            @let customWidth = column.id | zTableColumnConfig: zConfig().columns : 'width';\n            <col [style.width]=\"customWidth || 'calc(var(--col-' + column.id + '-size) * 1px)'\" />\n          }\n        }\n      }\n    </colgroup>\n  </ng-template>\n\n  <!-- Header table -->\n  <div\n    class=\"z-thead-wrapper shadow-card\"\n    [class.z-shadow-header]=\"shouldHeaderShowShadow()\"\n    [class.z-scroll-left]=\"hasScrollLeft()\"\n    [class.z-scroll-right]=\"hasScrollRight()\"\n    #theadWrapper>\n    <table [ngStyle]=\"columnSizeVars()\" [style.width.px]=\"table.getTotalSize()\">\n      <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n      <thead>\n        @if (canUseVirtualColumns()) {\n          <tr>\n            @for (header of leftHeaderRow(); track header.id) {\n              @let rowSpan = header | zTableSpan: zConfig().columns : 'headerRowSpan';\n              @let shouldRender = header | zTableCellRender: leftHeaderRow() : zConfig().columns : 'header';\n              @if (rowSpan && shouldRender) {\n                <th\n                  [attr.id]=\"header.column.id\"\n                  [ngStyle]=\"\n                    header.column\n                      | zTablePinningStyles: header : 'header' : table : zConfig().columns : columnSizingInfo()\n                  \"\n                  [class]=\"\n                    (header.column.id | zTableColumnConfig: zConfig().columns : 'headerClass') +\n                    ' ' +\n                    (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass')\n                  \"\n                  [style]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerStyle'\"\n                  [class.z-sticky-left]=\"header.column.getIsPinned() === 'left'\"\n                  [class.z-sticky-right]=\"header.column.getIsPinned() === 'right'\"\n                  [class.z-sticky-left-last]=\"header | zTableCellPin: 'isLastLeftPinned' : zConfig().columns\"\n                  [class.z-sticky-right-first]=\"header | zTableCellPin: 'isFirstRightPinned' : zConfig().columns\"\n                  [class.z-sticky-right-last]=\"header | zTableCellPin: 'isLastRightPinned' : zConfig().columns\"\n                  [class.z-at-left-edge]=\"header | zTableCellOffset: orderedLeafColumns()\"\n                  [class.z-col-drag]=\"header.column.id === 'rowDrag'\"\n                  [class.z-col-select]=\"header.column.id === 'select'\"\n                  [class.z-col-expand]=\"header.column.id === 'expand'\"\n                  [class.z-col-actions]=\"\n                    header.column.id === 'actions' || header.column.id === actionColumnInfo()?.columnId\n                  \"\n                  [attr.rowspan]=\"rowSpan\"\n                  [attr.colspan]=\"header | zTableSpan: zConfig().columns : 'headerColSpan'\">\n                  @if (header.column.id === 'rowDrag') {\n                    <div class=\"flex items-center justify-center\">\n                      <z-icon zType=\"lucideGripVertical\" zSize=\"14\" class=\"text-muted-foreground opacity-70\" />\n                    </div>\n                  } @else if (header.column.id === 'select') {\n                    <div class=\"flex items-center justify-center\">\n                      <z-checkbox\n                        [zChecked]=\"table.getIsAllRowsSelected()\"\n                        [zIndeterminate]=\"table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()\"\n                        (zChange)=\"table.toggleAllRowsSelected()\" />\n                    </div>\n                  } @else if (header.column.id === 'expand') {\n                    <div class=\"flex items-center justify-center\">\n                      <button\n                        type=\"button\"\n                        (click)=\"table.toggleAllRowsExpanded()\"\n                        class=\"hover:bg-muted flex h-6 w-6 cursor-pointer items-center justify-center rounded\">\n                        <z-icon\n                          zType=\"lucideChevronRight\"\n                          zSize=\"14\"\n                          class=\"transition-transform duration-200\"\n                          [class.rotate-90]=\"table.getIsSomeRowsExpanded()\" />\n                      </button>\n                    </div>\n                  } @else {\n                    <div\n                      class=\"flex w-full items-center gap-1\"\n                      [class.justify-center]=\"\n                        (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') ===\n                        'text-center'\n                      \"\n                      [class.justify-end]=\"\n                        (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') === 'text-right'\n                      \">\n                      @let columnEnableOrdering =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enableOrdering';\n                      @let columnEnablePinning =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enablePinning';\n                      @let effectiveEnableOrdering = columnEnableOrdering || zConfig().enableColumnOrdering;\n                      @let effectiveEnablePinning = columnEnablePinning || zConfig().enableColumnPinning;\n                      <ng-template #colOptionsPopoverContent>\n                        <div class=\"flex flex-col gap-1 p-1\">\n                          @if (effectiveEnableOrdering) {\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isFirstMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (click)=\"moveColumnLeft(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowLeft\" zSize=\"14\" />\n                              <span>{{ 'i18n_z_ui_table_move_left' | translate }}</span>\n                            </button>\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isLastMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (click)=\"moveColumnRight(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowRight\" zSize=\"14\" />\n                              <span>{{ 'i18n_z_ui_table_move_right' | translate }}</span>\n                            </button>\n                          }\n                          @if (effectiveEnableOrdering && header.column.getCanPin() && effectiveEnablePinning) {\n                            <div class=\"border-border my-0.5 border-t\"></div>\n                          }\n                          @if (header.column.getCanPin() && effectiveEnablePinning) {\n                            @if (header.column.getIsPinned() !== 'left') {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, 'left'); colOptionsPopover.hideImmediate()\"\n                                class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm\">\n                                <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_left' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned() !== 'right') {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, 'right'); colOptionsPopover.hideImmediate()\"\n                                class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm\">\n                                <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"-rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_right' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned()) {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, false); colOptionsPopover.hideImmediate()\"\n                                class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm\">\n                                <z-icon zType=\"lucideX\" zSize=\"14\" />\n                                <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                              </button>\n                            }\n                          }\n                          @if (hideableColumns().length > 0) {\n                            @if (effectiveEnableOrdering || (header.column.getCanPin() && effectiveEnablePinning)) {\n                              <div class=\"border-border my-0.5 border-t\"></div>\n                            }\n                            <button\n                              type=\"button\"\n                              #colVisPopover=\"zPopover\"\n                              z-popover\n                              [zPopoverContent]=\"colVisPopoverContent\"\n                              zTrigger=\"hover\"\n                              [zShowDelay]=\"150\"\n                              [zHideDelay]=\"200\"\n                              [zManualClose]=\"true\"\n                              [zOutsideClickClose]=\"true\"\n                              zPosition=\"right\"\n                              [zOffset]=\"6\"\n                              class=\"text-foreground hover:bg-muted data-[state=open]:bg-muted flex w-full cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm outline-none\">\n                              <z-icon zType=\"lucideEye\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                              <span class=\"flex-1 text-left\">\n                                {{ 'i18n_z_ui_table_show_hide_columns' | translate }}\n                              </span>\n                              <z-icon zType=\"lucideChevronRight\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                            </button>\n                            <ng-template #colVisPopoverContent>\n                              <div class=\"flex max-h-72 flex-col gap-0.5 overflow-y-auto p-1\" style=\"min-width: 180px\">\n                                @for (col of hideableColumns(); track col.id) {\n                                  <button\n                                    type=\"button\"\n                                    (click)=\"\n                                      toggleColumnVisibility(col.id);\n                                      refreshColumnPopoverPositions(colOptionsPopover, colVisPopover)\n                                    \"\n                                    class=\"hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm\"\n                                    [class.text-foreground]=\"col.getIsVisible()\"\n                                    [class.text-muted-foreground]=\"!col.getIsVisible()\">\n                                    @if (col.getIsVisible()) {\n                                      <z-icon zType=\"lucideCheck\" zSize=\"14\" class=\"text-primary shrink-0\" />\n                                    } @else {\n                                      <span class=\"inline-flex w-3.5 shrink-0\"></span>\n                                    }\n                                    <span class=\"truncate\">{{ col.id | zTableColumnHeader: zConfig().columns }}</span>\n                                  </button>\n                                }\n                              </div>\n                            </ng-template>\n                          }\n                        </div>\n                      </ng-template>\n\n                      @let hasColumnOptions =\n                        (header.column.getCanPin() && effectiveEnablePinning) ||\n                        effectiveEnableOrdering ||\n                        hideableColumns().length > 0;\n                      <div\n                        class=\"z-header-text-wrapper inline-flex max-w-full items-center gap-1 rounded px-1.5 py-1\"\n                        [class.cursor-pointer]=\"hasColumnOptions\"\n                        [class.z-has-options]=\"hasColumnOptions\"\n                        [attr.z-popover]=\"hasColumnOptions ? '' : null\"\n                        #colOptionsPopover=\"zPopover\"\n                        #headerTextWrapper\n                        z-popover\n                        [zPopoverContent]=\"hasColumnOptions ? colOptionsPopoverContent : null\"\n                        zTrigger=\"click\"\n                        zPosition=\"bottom\"\n                        [zOffset]=\"5\"\n                        [attr.tabindex]=\"hasColumnOptions ? 0 : null\"\n                        [attr.role]=\"hasColumnOptions ? 'button' : null\"\n                        [attr.aria-haspopup]=\"hasColumnOptions ? 'menu' : null\">\n                        <ng-container\n                          *flexRender=\"header.column.columnDef.header; props: header.getContext(); let headerContent\">\n                          @if (headerContent | zTableIsTemplateRef) {\n                            <div\n                              class=\"z-template-content\"\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \">\n                              <ng-container\n                                *ngTemplateOutlet=\"headerContent; context: { $implicit: header.getContext() }\" />\n                            </div>\n                          } @else if (headerContent | zTableHasIcon) {\n                            <z-table-icon-text\n                              class=\"min-w-0 truncate\"\n                              [zText]=\"headerContent\"\n                              [zTooltip]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerTooltip'\"\n                              [zTriggerElement]=\"headerTextWrapper\"\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \" />\n                          } @else {\n                            <span\n                              class=\"z-table-cell-text\"\n                              z-tooltip\n                              [zContent]=\"\n                                (header.column.id | zTableColumnConfig: zConfig().columns : 'headerTooltip') ||\n                                headerContent\n                              \"\n                              [zTriggerElement]=\"headerTextWrapper\"\n                              [innerHTML]=\"headerContent | translate | zSafeHtml\"\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \"></span>\n                          }\n                        </ng-container>\n                        @if (hasColumnOptions) {\n                          <z-icon zType=\"lucideChevronDown\" zSize=\"15\" class=\"text-muted-foreground shrink-0\" />\n                        }\n                      </div>\n                      @if ((header.column.getCanSort() && !hasBodyRowSpan()) || header.column.getCanFilter()) {\n                        <z-table-filter [zColumn]=\"$any(header.column)\" [zTable]=\"$any(table)\" />\n                      }\n                    </div>\n                  }\n                  @if (\n                    header.column.id !== 'rowDrag' &&\n                    header.column.id !== 'select' &&\n                    header.column.id !== 'expand' &&\n                    zConfig().enableColumnResizing !== false\n                  ) {\n                    <div\n                      class=\"z-resizer\"\n                      [class.z-is-resizing]=\"header.column.getIsResizing()\"\n                      [class.z-resizer-left]=\"\n                        header.column.getIsPinned() === 'right' || header.column.getIsLastColumn()\n                      \"\n                      (dblclick)=\"header.column.resetSize()\"\n                      [zTableResize]=\"header\"></div>\n                  }\n                </th>\n              }\n            }\n            @if (virtualLeftSpacerWidth() > 0) {\n              <th class=\"pointer-events-none border-0 p-0\" [style.width.px]=\"virtualLeftSpacerWidth()\"></th>\n            }\n            @for (header of virtualCenterHeaderRow(); track header.id) {\n              @let rowSpan = header | zTableSpan: zConfig().columns : 'headerRowSpan';\n              @let shouldRender = header | zTableCellRender: virtualCenterHeaderRow() : zConfig().columns : 'header';\n              @if (rowSpan && shouldRender) {\n                <th\n                  [attr.id]=\"header.column.id\"\n                  [class]=\"\n                    (header.column.id | zTableColumnConfig: zConfig().columns : 'headerClass') +\n                    ' ' +\n                    (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass')\n                  \"\n                  [style]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerStyle'\"\n                  [class.z-col-drag]=\"header.column.id === 'rowDrag'\"\n                  [class.z-col-select]=\"header.column.id === 'select'\"\n                  [class.z-col-expand]=\"header.column.id === 'expand'\"\n                  [class.z-col-actions]=\"\n                    header.column.id === 'actions' || header.column.id === actionColumnInfo()?.columnId\n                  \"\n                  [attr.rowspan]=\"rowSpan\"\n                  [attr.colspan]=\"header | zTableSpan: zConfig().columns : 'headerColSpan'\">\n                  @if (header.column.id === 'rowDrag') {\n                    <div class=\"flex items-center justify-center\">\n                      <z-icon zType=\"lucideGripVertical\" zSize=\"14\" class=\"text-muted-foreground opacity-70\" />\n                    </div>\n                  } @else if (header.column.id === 'select') {\n                    <div class=\"flex items-center justify-center\">\n                      <z-checkbox\n                        [zChecked]=\"table.getIsAllRowsSelected()\"\n                        [zIndeterminate]=\"table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()\"\n                        (zChange)=\"table.toggleAllRowsSelected()\" />\n                    </div>\n                  } @else if (header.column.id === 'expand') {\n                    <div class=\"flex items-center justify-center\">\n                      <button\n                        type=\"button\"\n                        (click)=\"table.toggleAllRowsExpanded()\"\n                        class=\"hover:bg-muted flex h-6 w-6 cursor-pointer items-center justify-center rounded\">\n                        <z-icon\n                          zType=\"lucideChevronRight\"\n                          zSize=\"14\"\n                          class=\"transition-transform duration-200\"\n                          [class.rotate-90]=\"table.getIsSomeRowsExpanded()\" />\n                      </button>\n                    </div>\n                  } @else {\n                    <div\n                      class=\"flex w-full items-center gap-1\"\n                      [class.justify-center]=\"\n                        (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') ===\n                        'text-center'\n                      \"\n                      [class.justify-end]=\"\n                        (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') === 'text-right'\n                      \">\n                      @let columnEnableOrdering =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enableOrdering';\n                      @let columnEnablePinning =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enablePinning';\n                      @let effectiveEnableOrdering = columnEnableOrdering || zConfig().enableColumnOrdering;\n                      @let effectiveEnablePinning = columnEnablePinning || zConfig().enableColumnPinning;\n                      <ng-template #colOptionsPopoverContent>\n                        <div class=\"flex flex-col gap-1 p-1\">\n                          @if (effectiveEnableOrdering) {\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isFirstMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (click)=\"moveColumnLeft(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowLeft\" zSize=\"14\" />\n                              <span>{{ 'i18n_z_ui_table_move_left' | translate }}</span>\n                            </button>\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isLastMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (click)=\"moveColumnRight(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowRight\" zSize=\"14\" />\n                              <span>{{ 'i18n_z_ui_table_move_right' | translate }}</span>\n                            </button>\n                          }\n                          @if (effectiveEnableOrdering && header.column.getCanPin() && effectiveEnablePinning) {\n                            <div class=\"border-border my-0.5 border-t\"></div>\n                          }\n                          @if (header.column.getCanPin() && effectiveEnablePinning) {\n                            @if (header.column.getIsPinned() !== 'left') {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, 'left'); colOptionsPopover.hideImmediate()\"\n                                class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm\">\n                                <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_left' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned() !== 'right') {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, 'right'); colOptionsPopover.hideImmediate()\"\n                                class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm\">\n                                <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"-rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_right' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned()) {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, false); colOptionsPopover.hideImmediate()\"\n                                class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm\">\n                                <z-icon zType=\"lucideX\" zSize=\"14\" />\n                                <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                              </button>\n                            }\n                          }\n                          @if (hideableColumns().length > 0) {\n                            @if (effectiveEnableOrdering || (header.column.getCanPin() && effectiveEnablePinning)) {\n                              <div class=\"border-border my-0.5 border-t\"></div>\n                            }\n                            <button\n                              type=\"button\"\n                              #colVisPopover=\"zPopover\"\n                              z-popover\n                              [zPopoverContent]=\"colVisPopoverContent\"\n                              zTrigger=\"hover\"\n                              [zShowDelay]=\"150\"\n                              [zHideDelay]=\"200\"\n                              [zManualClose]=\"true\"\n                              [zOutsideClickClose]=\"true\"\n                              zPosition=\"right\"\n                              [zOffset]=\"6\"\n                              class=\"text-foreground hover:bg-muted data-[state=open]:bg-muted flex w-full cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm outline-none\">\n                              <z-icon zType=\"lucideEye\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                              <span class=\"flex-1 text-left\">\n                                {{ 'i18n_z_ui_table_show_hide_columns' | translate }}\n                              </span>\n                              <z-icon zType=\"lucideChevronRight\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                            </button>\n                            <ng-template #colVisPopoverContent>\n                              <div class=\"flex max-h-72 flex-col gap-0.5 overflow-y-auto p-1\" style=\"min-width: 180px\">\n                                @for (col of hideableColumns(); track col.id) {\n                                  <button\n                                    type=\"button\"\n                                    (click)=\"\n                                      toggleColumnVisibility(col.id);\n                                      refreshColumnPopoverPositions(colOptionsPopover, colVisPopover)\n                                    \"\n                                    class=\"hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm\"\n                                    [class.text-foreground]=\"col.getIsVisible()\"\n                                    [class.text-muted-foreground]=\"!col.getIsVisible()\">\n                                    @if (col.getIsVisible()) {\n                                      <z-icon zType=\"lucideCheck\" zSize=\"14\" class=\"text-primary shrink-0\" />\n                                    } @else {\n                                      <span class=\"inline-flex w-3.5 shrink-0\"></span>\n                                    }\n                                    <span class=\"truncate\">{{ col.id | zTableColumnHeader: zConfig().columns }}</span>\n                                  </button>\n                                }\n                              </div>\n                            </ng-template>\n                          }\n                        </div>\n                      </ng-template>\n\n                      @let hasColumnOptions =\n                        (header.column.getCanPin() && effectiveEnablePinning) ||\n                        effectiveEnableOrdering ||\n                        hideableColumns().length > 0;\n                      <div\n                        class=\"z-header-text-wrapper inline-flex max-w-full items-center gap-1 rounded px-1.5 py-1\"\n                        [class.cursor-pointer]=\"hasColumnOptions\"\n                        [class.z-has-options]=\"hasColumnOptions\"\n                        [attr.z-popover]=\"hasColumnOptions ? '' : null\"\n                        #colOptionsPopover=\"zPopover\"\n                        #headerTextWrapper\n                        z-popover\n                        [zPopoverContent]=\"hasColumnOptions ? colOptionsPopoverContent : null\"\n                        zTrigger=\"click\"\n                        zPosition=\"bottom\"\n                        [zOffset]=\"5\"\n                        [attr.tabindex]=\"hasColumnOptions ? 0 : null\"\n                        [attr.role]=\"hasColumnOptions ? 'button' : null\"\n                        [attr.aria-haspopup]=\"hasColumnOptions ? 'menu' : null\">\n                        <ng-container\n                          *flexRender=\"header.column.columnDef.header; props: header.getContext(); let headerContent\">\n                          @if (headerContent | zTableIsTemplateRef) {\n                            <div\n                              class=\"z-template-content\"\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \">\n                              <ng-container\n                                *ngTemplateOutlet=\"headerContent; context: { $implicit: header.getContext() }\" />\n                            </div>\n                          } @else if (headerContent | zTableHasIcon) {\n                            <z-table-icon-text\n                              class=\"min-w-0 truncate\"\n                              [zText]=\"headerContent\"\n                              [zTooltip]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerTooltip'\"\n                              [zTriggerElement]=\"headerTextWrapper\"\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \" />\n                          } @else {\n                            <span\n                              class=\"z-table-cell-text\"\n                              z-tooltip\n                              [zContent]=\"\n                                (header.column.id | zTableColumnConfig: zConfig().columns : 'headerTooltip') ||\n                                headerContent\n                              \"\n                              [zTriggerElement]=\"headerTextWrapper\"\n                              [innerHTML]=\"headerContent | translate | zSafeHtml\"\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \"></span>\n                          }\n                        </ng-container>\n                        @if (hasColumnOptions) {\n                          <z-icon zType=\"lucideChevronDown\" zSize=\"15\" class=\"text-muted-foreground shrink-0\" />\n                        }\n                      </div>\n                      @if ((header.column.getCanSort() && !hasBodyRowSpan()) || header.column.getCanFilter()) {\n                        <z-table-filter [zColumn]=\"$any(header.column)\" [zTable]=\"$any(table)\" />\n                      }\n                    </div>\n                  }\n                  @if (\n                    header.column.id !== 'rowDrag' &&\n                    header.column.id !== 'select' &&\n                    header.column.id !== 'expand' &&\n                    zConfig().enableColumnResizing !== false\n                  ) {\n                    <div\n                      class=\"z-resizer\"\n                      [class.z-is-resizing]=\"header.column.getIsResizing()\"\n                      [class.z-resizer-left]=\"\n                        header.column.getIsPinned() === 'right' || header.column.getIsLastColumn()\n                      \"\n                      (dblclick)=\"header.column.resetSize()\"\n                      [zTableResize]=\"header\"></div>\n                  }\n                </th>\n              }\n            }\n            @if (virtualRightSpacerWidth() > 0) {\n              <th class=\"pointer-events-none border-0 p-0\" [style.width.px]=\"virtualRightSpacerWidth()\"></th>\n            }\n            @for (header of rightHeaderRow(); track header.id) {\n              @let rowSpan = header | zTableSpan: zConfig().columns : 'headerRowSpan';\n              @let shouldRender = header | zTableCellRender: rightHeaderRow() : zConfig().columns : 'header';\n              @if (rowSpan && shouldRender) {\n                <th\n                  [attr.id]=\"header.column.id\"\n                  [ngStyle]=\"\n                    header.column\n                      | zTablePinningStyles: header : 'header' : table : zConfig().columns : columnSizingInfo()\n                  \"\n                  [class]=\"\n                    (header.column.id | zTableColumnConfig: zConfig().columns : 'headerClass') +\n                    ' ' +\n                    (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass')\n                  \"\n                  [style]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerStyle'\"\n                  [class.z-sticky-left]=\"header.column.getIsPinned() === 'left'\"\n                  [class.z-sticky-right]=\"header.column.getIsPinned() === 'right'\"\n                  [class.z-sticky-left-last]=\"header | zTableCellPin: 'isLastLeftPinned' : zConfig().columns\"\n                  [class.z-sticky-right-first]=\"header | zTableCellPin: 'isFirstRightPinned' : zConfig().columns\"\n                  [class.z-sticky-right-last]=\"header | zTableCellPin: 'isLastRightPinned' : zConfig().columns\"\n                  [class.z-at-left-edge]=\"header | zTableCellOffset: orderedLeafColumns()\"\n                  [class.z-col-drag]=\"header.column.id === 'rowDrag'\"\n                  [class.z-col-select]=\"header.column.id === 'select'\"\n                  [class.z-col-expand]=\"header.column.id === 'expand'\"\n                  [class.z-col-actions]=\"\n                    header.column.id === 'actions' || header.column.id === actionColumnInfo()?.columnId\n                  \"\n                  [attr.rowspan]=\"rowSpan\"\n                  [attr.colspan]=\"header | zTableSpan: zConfig().columns : 'headerColSpan'\">\n                  @if (header.column.id === 'rowDrag') {\n                    <div class=\"flex items-center justify-center\">\n                      <z-icon zType=\"lucideGripVertical\" zSize=\"14\" class=\"text-muted-foreground opacity-70\" />\n                    </div>\n                  } @else if (header.column.id === 'select') {\n                    <!-- Header Checkbox -->\n                    <div class=\"flex items-center justify-center\">\n                      <z-checkbox\n                        [zChecked]=\"table.getIsAllRowsSelected()\"\n                        [zIndeterminate]=\"table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()\"\n                        (zChange)=\"table.toggleAllRowsSelected()\" />\n                    </div>\n                  } @else if (header.column.id === 'expand') {\n                    <!-- Expand All Button -->\n                    <div class=\"flex items-center justify-center\">\n                      <button\n                        type=\"button\"\n                        (click)=\"table.toggleAllRowsExpanded()\"\n                        class=\"hover:bg-muted flex h-6 w-6 cursor-pointer items-center justify-center rounded\">\n                        <z-icon\n                          zType=\"lucideChevronRight\"\n                          zSize=\"14\"\n                          class=\"transition-transform duration-200\"\n                          [class.rotate-90]=\"table.getIsSomeRowsExpanded()\" />\n                      </button>\n                    </div>\n                  } @else {\n                    <!-- Header Content with Sort and Pin -->\n                    <div\n                      class=\"flex w-full items-center gap-1\"\n                      [class.justify-center]=\"\n                        (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') ===\n                        'text-center'\n                      \"\n                      [class.justify-end]=\"\n                        (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') === 'text-right'\n                      \">\n                      <!-- Column Options Popover Template -->\n                      @let columnEnableOrdering =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enableOrdering';\n                      @let columnEnablePinning =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enablePinning';\n                      @let effectiveEnableOrdering = columnEnableOrdering || zConfig().enableColumnOrdering;\n                      @let effectiveEnablePinning = columnEnablePinning || zConfig().enableColumnPinning;\n                      <ng-template #colOptionsPopoverContent>\n                        <div class=\"flex flex-col gap-1 p-1\">\n                          @if (effectiveEnableOrdering) {\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isFirstMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (click)=\"moveColumnLeft(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowLeft\" zSize=\"14\" />\n                              <span>{{ 'i18n_z_ui_table_move_left' | translate }}</span>\n                            </button>\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isLastMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (click)=\"moveColumnRight(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowRight\" zSize=\"14\" />\n                              <span>{{ 'i18n_z_ui_table_move_right' | translate }}</span>\n                            </button>\n                          }\n                          @if (effectiveEnableOrdering && header.column.getCanPin() && effectiveEnablePinning) {\n                            <div class=\"border-border my-0.5 border-t\"></div>\n                          }\n                          @if (header.column.getCanPin() && effectiveEnablePinning) {\n                            @if (header.column.getIsPinned() !== 'left') {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, 'left'); colOptionsPopover.hideImmediate()\"\n                                class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm\">\n                                <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_left' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned() !== 'right') {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, 'right'); colOptionsPopover.hideImmediate()\"\n                                class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm\">\n                                <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"-rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_right' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned()) {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, false); colOptionsPopover.hideImmediate()\"\n                                class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm\">\n                                <z-icon zType=\"lucideX\" zSize=\"14\" />\n                                <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                              </button>\n                            }\n                          }\n                          @if (hideableColumns().length > 0) {\n                            @if (effectiveEnableOrdering || (header.column.getCanPin() && effectiveEnablePinning)) {\n                              <div class=\"border-border my-0.5 border-t\"></div>\n                            }\n                            <button\n                              type=\"button\"\n                              #colVisPopover=\"zPopover\"\n                              z-popover\n                              [zPopoverContent]=\"colVisPopoverContent\"\n                              zTrigger=\"hover\"\n                              [zShowDelay]=\"150\"\n                              [zHideDelay]=\"200\"\n                              [zManualClose]=\"true\"\n                              [zOutsideClickClose]=\"true\"\n                              zPosition=\"right\"\n                              [zOffset]=\"6\"\n                              class=\"text-foreground hover:bg-muted data-[state=open]:bg-muted flex w-full cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm outline-none\">\n                              <z-icon zType=\"lucideEye\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                              <span class=\"flex-1 text-left\">\n                                {{ 'i18n_z_ui_table_show_hide_columns' | translate }}\n                              </span>\n                              <z-icon zType=\"lucideChevronRight\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                            </button>\n                            <ng-template #colVisPopoverContent>\n                              <div class=\"flex max-h-72 flex-col gap-0.5 overflow-y-auto p-1\" style=\"min-width: 180px\">\n                                @for (col of hideableColumns(); track col.id) {\n                                  <button\n                                    type=\"button\"\n                                    (click)=\"\n                                      toggleColumnVisibility(col.id);\n                                      refreshColumnPopoverPositions(colOptionsPopover, colVisPopover)\n                                    \"\n                                    class=\"hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm\"\n                                    [class.text-foreground]=\"col.getIsVisible()\"\n                                    [class.text-muted-foreground]=\"!col.getIsVisible()\">\n                                    @if (col.getIsVisible()) {\n                                      <z-icon zType=\"lucideCheck\" zSize=\"14\" class=\"text-primary shrink-0\" />\n                                    } @else {\n                                      <span class=\"inline-flex w-3.5 shrink-0\"></span>\n                                    }\n                                    <span class=\"truncate\">{{ col.id | zTableColumnHeader: zConfig().columns }}</span>\n                                  </button>\n                                }\n                              </div>\n                            </ng-template>\n                          }\n                        </div>\n                      </ng-template>\n\n                      @let hasColumnOptions =\n                        (header.column.getCanPin() && effectiveEnablePinning) ||\n                        effectiveEnableOrdering ||\n                        hideableColumns().length > 0;\n                      <div\n                        class=\"z-header-text-wrapper inline-flex max-w-full items-center gap-1 rounded px-1.5 py-1\"\n                        [class.cursor-pointer]=\"hasColumnOptions\"\n                        [class.z-has-options]=\"hasColumnOptions\"\n                        [attr.z-popover]=\"hasColumnOptions ? '' : null\"\n                        #colOptionsPopover=\"zPopover\"\n                        #headerTextWrapper\n                        z-popover\n                        [zPopoverContent]=\"hasColumnOptions ? colOptionsPopoverContent : null\"\n                        zTrigger=\"click\"\n                        zPosition=\"bottom\"\n                        [zOffset]=\"5\"\n                        [attr.tabindex]=\"hasColumnOptions ? 0 : null\"\n                        [attr.role]=\"hasColumnOptions ? 'button' : null\"\n                        [attr.aria-haspopup]=\"hasColumnOptions ? 'menu' : null\">\n                        <ng-container\n                          *flexRender=\"header.column.columnDef.header; props: header.getContext(); let headerContent\">\n                          @if (headerContent | zTableIsTemplateRef) {\n                            <div\n                              class=\"z-template-content\"\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerStyle'\">\n                              <ng-container\n                                *ngTemplateOutlet=\"headerContent; context: { $implicit: header.getContext() }\" />\n                            </div>\n                          } @else if (headerContent | zTableHasIcon) {\n                            <z-table-icon-text\n                              class=\"min-w-0 truncate\"\n                              [zText]=\"headerContent\"\n                              [zTooltip]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerTooltip'\"\n                              [zTriggerElement]=\"headerTextWrapper\"\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \" />\n                          } @else {\n                            <span\n                              class=\"z-table-cell-text\"\n                              z-tooltip\n                              [zContent]=\"\n                                (header.column.id | zTableColumnConfig: zConfig().columns : 'headerTooltip') ||\n                                headerContent\n                              \"\n                              [zTriggerElement]=\"headerTextWrapper\"\n                              [innerHTML]=\"headerContent | translate | zSafeHtml\"\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \"></span>\n                          }\n                        </ng-container>\n                        <!-- Dropdown indicator when has options (between text and sort icon) -->\n                        @if (hasColumnOptions) {\n                          <z-icon zType=\"lucideChevronDown\" zSize=\"15\" class=\"text-muted-foreground shrink-0\" />\n                        }\n                      </div>\n                      <!-- Sort Icon (outside wrapper, no hover background) -->\n                      @if ((header.column.getCanSort() && !hasBodyRowSpan()) || header.column.getCanFilter()) {\n                        <z-table-filter [zColumn]=\"$any(header.column)\" [zTable]=\"$any(table)\" />\n                      }\n                    </div>\n                  }\n                  <!-- Column Resizer -->\n                  @if (\n                    header.column.id !== 'rowDrag' &&\n                    header.column.id !== 'select' &&\n                    header.column.id !== 'expand' &&\n                    zConfig().enableColumnResizing !== false\n                  ) {\n                    <div\n                      class=\"z-resizer\"\n                      [class.z-is-resizing]=\"header.column.getIsResizing()\"\n                      [class.z-resizer-left]=\"\n                        header.column.getIsPinned() === 'right' || header.column.getIsLastColumn()\n                      \"\n                      (dblclick)=\"header.column.resetSize()\"\n                      [zTableResize]=\"header\"></div>\n                  }\n                </th>\n              }\n            }\n          </tr>\n        } @else {\n          @for (headerGroup of orderedHeaderGroups(); track headerGroup.id) {\n            <tr>\n              @for (header of headerGroup.headers; track header.id) {\n                @let rowSpan = header | zTableSpan: zConfig().columns : 'headerRowSpan';\n                @let shouldRender = header | zTableCellRender: headerGroup.headers : zConfig().columns : 'header';\n                @if (rowSpan && shouldRender) {\n                  <th\n                    [attr.id]=\"header.column.id\"\n                    [ngStyle]=\"\n                      header.column\n                        | zTablePinningStyles: header : 'header' : table : zConfig().columns : columnSizingInfo()\n                    \"\n                    [class]=\"\n                      (header.column.id | zTableColumnConfig: zConfig().columns : 'headerClass') +\n                      ' ' +\n                      (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass')\n                    \"\n                    [style]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerStyle'\"\n                    [class.z-sticky-left]=\"header.column.getIsPinned() === 'left'\"\n                    [class.z-sticky-right]=\"header.column.getIsPinned() === 'right'\"\n                    [class.z-sticky-left-last]=\"header | zTableCellPin: 'isLastLeftPinned' : zConfig().columns\"\n                    [class.z-sticky-right-first]=\"header | zTableCellPin: 'isFirstRightPinned' : zConfig().columns\"\n                    [class.z-sticky-right-last]=\"header | zTableCellPin: 'isLastRightPinned' : zConfig().columns\"\n                    [class.z-at-left-edge]=\"header | zTableCellOffset: orderedLeafColumns()\"\n                    [class.z-col-drag]=\"header.column.id === 'rowDrag'\"\n                    [class.z-col-select]=\"header.column.id === 'select'\"\n                    [class.z-col-expand]=\"header.column.id === 'expand'\"\n                    [class.z-col-actions]=\"\n                      header.column.id === 'actions' || header.column.id === actionColumnInfo()?.columnId\n                    \"\n                    [attr.rowspan]=\"rowSpan\"\n                    [attr.colspan]=\"header | zTableSpan: zConfig().columns : 'headerColSpan'\">\n                    @if (header.column.id === 'rowDrag') {\n                      <div class=\"flex items-center justify-center\">\n                        <z-icon zType=\"lucideGripVertical\" zSize=\"14\" class=\"text-muted-foreground opacity-70\" />\n                      </div>\n                    } @else if (header.column.id === 'select') {\n                      <div class=\"flex items-center justify-center\">\n                        <z-checkbox\n                          [zChecked]=\"table.getIsAllRowsSelected()\"\n                          [zIndeterminate]=\"table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()\"\n                          (zChange)=\"table.toggleAllRowsSelected()\" />\n                      </div>\n                    } @else if (header.column.id === 'expand') {\n                      <div class=\"flex items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          (click)=\"table.toggleAllRowsExpanded()\"\n                          class=\"hover:bg-muted flex h-6 w-6 cursor-pointer items-center justify-center rounded\">\n                          <z-icon\n                            zType=\"lucideChevronRight\"\n                            zSize=\"14\"\n                            class=\"transition-transform duration-200\"\n                            [class.rotate-90]=\"table.getIsSomeRowsExpanded()\" />\n                        </button>\n                      </div>\n                    } @else {\n                      <div\n                        class=\"flex w-full items-center gap-1\"\n                        [class.justify-center]=\"\n                          (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') ===\n                          'text-center'\n                        \"\n                        [class.justify-end]=\"\n                          (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') ===\n                          'text-right'\n                        \">\n                        @let columnEnableOrdering =\n                          header.column.id | zTableColumnConfig: zConfig().columns : 'enableOrdering';\n                        @let columnEnablePinning =\n                          header.column.id | zTableColumnConfig: zConfig().columns : 'enablePinning';\n                        @let effectiveEnableOrdering = columnEnableOrdering || zConfig().enableColumnOrdering;\n                        @let effectiveEnablePinning = columnEnablePinning || zConfig().enableColumnPinning;\n                        <ng-template #colOptionsPopoverContent>\n                          <div class=\"flex flex-col gap-1 p-1\">\n                            @if (effectiveEnableOrdering) {\n                              <button\n                                type=\"button\"\n                                [disabled]=\"isFirstMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                                (click)=\"moveColumnLeft(header.column.id); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted flex min-h-8 cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-[0.9375rem] outline-none disabled:pointer-events-none disabled:opacity-40\">\n                                <z-icon zType=\"lucideArrowLeft\" zSize=\"15\" />\n                                <span>{{ 'i18n_z_ui_table_move_left' | translate }}</span>\n                              </button>\n                              <button\n                                type=\"button\"\n                                [disabled]=\"isLastMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                                (click)=\"moveColumnRight(header.column.id); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted flex min-h-8 cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-[0.9375rem] outline-none disabled:pointer-events-none disabled:opacity-40\">\n                                <z-icon zType=\"lucideArrowRight\" zSize=\"15\" />\n                                <span>{{ 'i18n_z_ui_table_move_right' | translate }}</span>\n                              </button>\n                            }\n                            @if (effectiveEnableOrdering && header.column.getCanPin() && effectiveEnablePinning) {\n                              <div class=\"border-border my-0.5 border-t\"></div>\n                            }\n                            @if (header.column.getCanPin() && effectiveEnablePinning) {\n                              @if (header.column.getIsPinned() !== 'left') {\n                                <button\n                                  type=\"button\"\n                                  (click)=\"handleColumnPin(header.column.id, 'left'); colOptionsPopover.hideImmediate()\"\n                                  class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted flex min-h-8 cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-[0.9375rem] outline-none\">\n                                  <z-icon zType=\"lucidePin\" zSize=\"15\" class=\"rotate-90\" />\n                                  <span>{{ 'i18n_z_ui_table_pin_left' | translate }}</span>\n                                </button>\n                              }\n                              @if (header.column.getIsPinned() !== 'right') {\n                                <button\n                                  type=\"button\"\n                                  (click)=\"\n                                    handleColumnPin(header.column.id, 'right'); colOptionsPopover.hideImmediate()\n                                  \"\n                                  class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted flex min-h-8 cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-[0.9375rem] outline-none\">\n                                  <z-icon zType=\"lucidePin\" zSize=\"15\" class=\"-rotate-90\" />\n                                  <span>{{ 'i18n_z_ui_table_pin_right' | translate }}</span>\n                                </button>\n                              }\n                              @if (header.column.getIsPinned()) {\n                                <button\n                                  type=\"button\"\n                                  (click)=\"handleColumnPin(header.column.id, false); colOptionsPopover.hideImmediate()\"\n                                  class=\"z-column-menu-item text-destructive hover:bg-destructive/10 focus:bg-destructive/10 flex min-h-8 cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-[0.9375rem] outline-none\">\n                                  <z-icon zType=\"lucideX\" zSize=\"15\" />\n                                  <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                                </button>\n                              }\n                            }\n                            @if (hideableColumns().length > 0) {\n                              @if (effectiveEnableOrdering || (header.column.getCanPin() && effectiveEnablePinning)) {\n                                <div class=\"border-border my-0.5 border-t\"></div>\n                              }\n                              <button\n                                type=\"button\"\n                                #colVisPopover=\"zPopover\"\n                                z-popover\n                                [zPopoverContent]=\"colVisPopoverContent\"\n                                zTrigger=\"hover\"\n                                [zShowDelay]=\"150\"\n                                [zHideDelay]=\"200\"\n                                [zManualClose]=\"true\"\n                                [zOutsideClickClose]=\"true\"\n                                zPosition=\"right\"\n                                [zOffset]=\"6\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted data-[state=open]:bg-muted flex min-h-8 w-full cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-[0.9375rem] outline-none\">\n                                <z-icon zType=\"lucideEye\" zSize=\"15\" class=\"text-muted-foreground shrink-0\" />\n                                <span class=\"flex-1 text-left\">\n                                  {{ 'i18n_z_ui_table_show_hide_columns' | translate }}\n                                </span>\n                                <z-icon zType=\"lucideChevronRight\" zSize=\"15\" class=\"text-muted-foreground shrink-0\" />\n                              </button>\n                              <ng-template #colVisPopoverContent>\n                                <div\n                                  class=\"flex max-h-72 flex-col gap-0.5 overflow-y-auto p-1\"\n                                  style=\"min-width: 180px\">\n                                  @for (col of hideableColumns(); track col.id) {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"\n                                        toggleColumnVisibility(col.id);\n                                        refreshColumnPopoverPositions(colOptionsPopover, colVisPopover)\n                                      \"\n                                      class=\"z-column-menu-item hover:bg-muted focus:bg-muted flex min-h-8 cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-[0.9375rem] outline-none\"\n                                      [class.text-foreground]=\"col.getIsVisible()\"\n                                      [class.text-muted-foreground]=\"!col.getIsVisible()\">\n                                      @if (col.getIsVisible()) {\n                                        <z-icon zType=\"lucideCheck\" zSize=\"15\" class=\"text-primary shrink-0\" />\n                                      } @else {\n                                        <span class=\"inline-flex w-[15px] shrink-0\"></span>\n                                      }\n                                      <span class=\"truncate\">{{ col.id | zTableColumnHeader: zConfig().columns }}</span>\n                                    </button>\n                                  }\n                                </div>\n                              </ng-template>\n                            }\n                          </div>\n                        </ng-template>\n\n                        @let hasColumnOptions =\n                          (header.column.getCanPin() && effectiveEnablePinning) ||\n                          effectiveEnableOrdering ||\n                          hideableColumns().length > 0;\n                        <div\n                          class=\"z-header-text-wrapper inline-flex max-w-full items-center gap-1 rounded px-1.5 py-1\"\n                          [class.cursor-pointer]=\"hasColumnOptions\"\n                          [class.z-has-options]=\"hasColumnOptions\"\n                          [attr.z-popover]=\"hasColumnOptions ? '' : null\"\n                          #colOptionsPopover=\"zPopover\"\n                          #headerTextWrapper\n                          z-popover\n                          [zPopoverContent]=\"hasColumnOptions ? colOptionsPopoverContent : null\"\n                          zTrigger=\"click\"\n                          zPosition=\"bottom\"\n                          [zOffset]=\"5\"\n                          [attr.tabindex]=\"hasColumnOptions ? 0 : null\"\n                          [attr.role]=\"hasColumnOptions ? 'button' : null\"\n                          [attr.aria-haspopup]=\"hasColumnOptions ? 'menu' : null\">\n                          <ng-container\n                            *flexRender=\"header.column.columnDef.header; props: header.getContext(); let headerContent\">\n                            @if (headerContent | zTableIsTemplateRef) {\n                              <div\n                                class=\"z-template-content\"\n                                [ngClass]=\"\n                                  header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                                \"\n                                [ngStyle]=\"\n                                  header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                                \">\n                                <ng-container\n                                  *ngTemplateOutlet=\"headerContent; context: { $implicit: header.getContext() }\" />\n                              </div>\n                            } @else if (headerContent | zTableHasIcon) {\n                              <z-table-icon-text\n                                class=\"min-w-0 truncate\"\n                                [zText]=\"headerContent\"\n                                [zTooltip]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerTooltip'\"\n                                [zTriggerElement]=\"headerTextWrapper\"\n                                [ngClass]=\"\n                                  header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                                \"\n                                [ngStyle]=\"\n                                  header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                                \" />\n                            } @else {\n                              <span\n                                class=\"z-table-cell-text\"\n                                z-tooltip\n                                [zContent]=\"\n                                  (header.column.id | zTableColumnConfig: zConfig().columns : 'headerTooltip') ||\n                                  headerContent\n                                \"\n                                [zTriggerElement]=\"headerTextWrapper\"\n                                [innerHTML]=\"headerContent | translate | zSafeHtml\"\n                                [ngClass]=\"\n                                  header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                                \"\n                                [ngStyle]=\"\n                                  header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                                \"></span>\n                            }\n                          </ng-container>\n                          @if (hasColumnOptions) {\n                            <z-icon zType=\"lucideChevronDown\" zSize=\"15\" class=\"text-muted-foreground shrink-0\" />\n                          }\n                        </div>\n                        @if ((header.column.getCanSort() && !hasBodyRowSpan()) || header.column.getCanFilter()) {\n                          <z-table-filter [zColumn]=\"$any(header.column)\" [zTable]=\"$any(table)\" />\n                        }\n                      </div>\n                    }\n                    @if (\n                      header.column.id !== 'rowDrag' &&\n                      header.column.id !== 'select' &&\n                      header.column.id !== 'expand' &&\n                      zConfig().enableColumnResizing !== false\n                    ) {\n                      <div\n                        class=\"z-resizer\"\n                        [class.z-is-resizing]=\"header.column.getIsResizing()\"\n                        [class.z-resizer-left]=\"\n                          header.column.getIsPinned() === 'right' || header.column.getIsLastColumn()\n                        \"\n                        (dblclick)=\"header.column.resetSize()\"\n                        [zTableResize]=\"header\"></div>\n                    }\n                  </th>\n                }\n              }\n            </tr>\n          }\n        }\n      </thead>\n    </table>\n  </div>\n\n  <!-- Body table -->\n  <div\n    class=\"z-tbody-wrapper relative\"\n    #tbodyContainer\n    [class.z-scroll-left]=\"hasScrollLeft()\"\n    [class.z-scroll-right]=\"hasScrollRight()\">\n    @if (isLoading() || isProcessing()) {\n      <!-- Loading State -->\n      @if (zConfig().useSkeleton) {\n        <!-- Skeleton Loading -->\n        <div class=\"animate-in fade-in flex h-full flex-col duration-200\">\n          @for (i of skeletonRows(); track $index; let last = $last) {\n            <div\n              class=\"border-border box-border flex flex-1 flex-col items-start justify-center gap-1.5 px-2\"\n              [class.border-b]=\"!last\">\n              <z-skeleton zType=\"bar\" zWidth=\"100%\" zHeight=\"22px\" zRadius=\"4px\" />\n              <z-skeleton zType=\"bar\" zWidth=\"50%\" zHeight=\"14px\" zRadius=\"4px\" />\n            </div>\n          }\n        </div>\n      } @else {\n        <!-- Spinner Loading -->\n        <div class=\"z-loading-state\">\n          <z-loading [zLoading]=\"true\" zSize=\"lg\" [zText]=\"'i18n_z_ui_table_loading' | translate\" />\n        </div>\n      }\n    } @else if (isEmpty()) {\n      <div class=\"z-empty-state\">\n        @if (isNoSearchResults()) {\n          <z-empty zIcon=\"lucideSearchX\" zSize=\"sm\" [zMessage]=\"'i18n_z_ui_table_no_results' | translate\" />\n        } @else {\n          <z-empty zIcon=\"lucidePackageOpen\" zSize=\"sm\" [zMessage]=\"'i18n_z_ui_table_no_data' | translate\" />\n        }\n      </div>\n    } @else {\n      <ng-scrollbar class=\"z-tbody-scrollbar\" #tbodyWrapper track=\"all\" cdkScrollable (scroll)=\"onTbodyScroll($event)\">\n        @if (isVirtual()) {\n          <!-- Virtual Scroll Mode -->\n          <div\n            class=\"z-virtual-scroll-inner\"\n            cdkDropList\n            [cdkDropListData]=\"table.getRowModel().rows\"\n            [cdkDropListDisabled]=\"!isVirtualRowDragEnabled()\"\n            cdkDropListOrientation=\"vertical\"\n            [cdkDropListAutoScrollStep]=\"20\"\n            (cdkDropListDropped)=\"onRowDrop($event)\"\n            [style.height.px]=\"virtualizer.getTotalSize()\"\n            [style.min-width.px]=\"table.getTotalSize()\">\n            @for (virtualItem of virtualizer.getVirtualItems(); track virtualItem.index) {\n              @let groupRows = dynamicGroupRows()[virtualItem.index] || [];\n              <div\n                #virtualRow\n                class=\"z-virtual-row\"\n                cdkDrag\n                cdkDragLockAxis=\"y\"\n                cdkDragPreviewClass=\"z-table-row-drag-preview\"\n                cdkDragPlaceholderClass=\"z-table-row-drag-placeholder\"\n                [cdkDragData]=\"groupRows[0]\"\n                [cdkDragDisabled]=\"!isVirtualRowDragEnabled() || groupRows.length !== 1\"\n                (cdkDragStarted)=\"onRowDragStarted()\"\n                (cdkDragEnded)=\"onRowDragEnded($event)\"\n                [attr.data-index]=\"virtualItem.index\"\n                [style.height.px]=\"\n                  dynamicSize() ? null : (dynamicGroupHeights()[virtualItem.index] ?? groupSize() * virtualRowHeight())\n                \"\n                [style.transform]=\"'translate3d(0,' + virtualItem.start + 'px,0)'\">\n                <ng-template cdkDragPreview>\n                  @if (groupRows[0]; as previewRow) {\n                    <div class=\"z-table-row-drag-preview\" [style.width.px]=\"table.getTotalSize()\">\n                      @for (cell of previewRow.getVisibleCells(); track cell.id) {\n                        @let isPreviewCellVisible = cell | zTableCellVisible: zConfig().columns;\n                        @let shouldRenderPreviewColSpan =\n                          cell | zTableCellRender: previewRow.getVisibleCells() : zConfig().columns : 'body';\n                        @if (isPreviewCellVisible && shouldRenderPreviewColSpan) {\n                          <div\n                            class=\"z-table-row-drag-preview-cell\"\n                            [style.width.px]=\"cell.column.getSize()\"\n                            [class.z-table-row-drag-preview-handle]=\"cell.column.id === 'rowDrag'\">\n                            @if (cell.column.id === 'rowDrag') {\n                              <z-icon zType=\"lucideGripVertical\" zSize=\"14\" class=\"text-muted-foreground\" />\n                            } @else {\n                              <span class=\"truncate\">{{ cell.getValue() ?? '' }}</span>\n                            }\n                          </div>\n                        }\n                      }\n                    </div>\n                  }\n                </ng-template>\n\n                <ng-template cdkDragPlaceholder>\n                  <div class=\"z-table-row-drag-placeholder-inner\" [style.height.px]=\"virtualItem.size\"></div>\n                </ng-template>\n\n                <table [ngStyle]=\"columnSizeVars()\" [style.width.px]=\"table.getTotalSize()\">\n                  <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n                  <tbody\n                    [class.z-has-vertical-scroll]=\"hasVerticalScroll()\"\n                    [class.z-last-row-touches-bottom]=\"lastRowTouchesBottom()\">\n                    @for (row of groupRows; track row.id) {\n                      <tr\n                        z-table-row-hover\n                        [style.height.px]=\"dynamicSize() ? null : virtualRowHeight()\"\n                        [style.min-height.px]=\"dynamicSize() ? virtualRowHeight() : null\"\n                        [class.z-child-row]=\"row.depth > 0\"\n                        [class.z-selected]=\"row.getIsSelected()\"\n                        [class.z-indeterminate-selected]=\"row.getIsSomeSelected() && !row.getIsSelected()\">\n                        @for (cell of row.getVisibleCells(); track cell.id) {\n                          @if (\n                            canUseVirtualColumns() &&\n                            virtualLeftSpacerWidth() > 0 &&\n                            cell.column.id === firstVirtualCenterColumnId()\n                          ) {\n                            <td\n                              class=\"pointer-events-none border-0 p-0\"\n                              [style.width.px]=\"virtualLeftSpacerWidth()\"></td>\n                          }\n                          @let shouldRenderRowSpan =\n                            cell | zTableSpan: zConfig().columns : 'shouldRender' : table.getRowModel().rows;\n                          @let shouldRenderColSpan =\n                            cell | zTableCellRender: row.getVisibleCells() : zConfig().columns : 'body';\n                          @let isVirtualColumnVisible =\n                            !canUseVirtualColumns() ||\n                            cell.column.getIsPinned() !== false ||\n                            virtualCenterColumnVisibilityMap()[cell.column.id];\n                          @if (shouldRenderRowSpan && shouldRenderColSpan && isVirtualColumnVisible) {\n                            <td\n                              [ngStyle]=\"\n                                cell.column\n                                  | zTablePinningStyles\n                                    : cell\n                                    : 'body'\n                                    : row.getVisibleCells()\n                                    : zConfig().columns\n                                    : columnSizingInfo()\n                              \"\n                              [class.z-sticky-left]=\"cell.column.getIsPinned() === 'left'\"\n                              [class.z-sticky-right]=\"cell.column.getIsPinned() === 'right'\"\n                              [class.z-sticky-left-last]=\"\n                                cell.column.getIsPinned() === 'left' && cell.column.getIsLastColumn('left')\n                              \"\n                              [class.z-sticky-right-first]=\"\n                                cell.column.getIsPinned() === 'right' && cell.column.getIsFirstColumn('right')\n                              \"\n                              [class.z-sticky-right-last]=\"\n                                cell.column.getIsPinned() === 'right' && cell.column.getIsLastColumn('right')\n                              \"\n                              [class.z-at-left-edge]=\"cell | zTableCellOffset: orderedLeafColumns()\"\n                              [class.z-col-drag]=\"cell.column.id === 'rowDrag'\"\n                              [class.z-col-select]=\"cell.column.id === 'select'\"\n                              [class.z-col-expand]=\"cell.column.id === 'expand'\"\n                              [class.z-col-actions]=\"cell.column.id === actionColumnInfo()?.columnId\"\n                              [class.z-at-bottom]=\"\n                                cell | zTableCellBottom: zConfig().columns : table.getRowModel().rows\n                              \"\n                              [attr.rowspan]=\"\n                                cell | zTableSpan: zConfig().columns : 'cellRowSpan' : table.getRowModel().rows\n                              \"\n                              [attr.colspan]=\"cell | zTableSpan: zConfig().columns : 'cellColSpan'\"\n                              [class]=\"cell | zTableCellConfig: zConfig().columns : 'cellClass'\"\n                              [style]=\"cell | zTableCellConfig: zConfig().columns : 'cellStyle'\">\n                              @if (cell.column.id === 'rowDrag') {\n                                <div class=\"flex items-center justify-center\">\n                                  <button\n                                    cdkDragHandle\n                                    type=\"button\"\n                                    class=\"text-muted-foreground inline-flex size-7 items-center justify-center rounded-md\"\n                                    [class.cursor-grab]=\"isRowDragEnabled()\"\n                                    [class.opacity-40]=\"!isRowDragEnabled()\">\n                                    <z-icon zType=\"lucideGripVertical\" zSize=\"14\" />\n                                  </button>\n                                </div>\n                              } @else if (cell.column.id === 'select') {\n                                <!-- Row Checkbox -->\n                                <div class=\"flex items-center justify-center\">\n                                  <z-checkbox\n                                    [zChecked]=\"cell.row.getIsSelected()\"\n                                    [zIndeterminate]=\"cell.row.getIsSomeSelected() && !cell.row.getIsSelected()\"\n                                    [zDisabled]=\"!cell.row.getCanSelect()\"\n                                    (zChange)=\"cell.row.toggleSelected()\" />\n                                </div>\n                              } @else if (cell.column.id === 'expand') {\n                                <!-- Expand Button -->\n                                <div class=\"flex items-center justify-center\">\n                                  @if (cell.row.subRows && cell.row.subRows.length > 0) {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.toggleExpanded()\"\n                                      class=\"hover:bg-muted flex h-6 w-6 cursor-pointer items-center justify-center rounded\">\n                                      <z-icon\n                                        zType=\"lucideChevronRight\"\n                                        zSize=\"14\"\n                                        class=\"transition-transform duration-200\"\n                                        [class.rotate-90]=\"cell.row.getIsExpanded()\" />\n                                    </button>\n                                  }\n                                </div>\n                              } @else if (cell.column.id === actionColumnInfo()?.columnId && actionColumnInfo()) {\n                                <z-table-actions\n                                  [zConfig]=\"$any(actionColumnInfo()!.config)\"\n                                  [zRow]=\"cell.row.original\"\n                                  [zRowId]=\"cell.row.id\"\n                                  (zActionClick)=\"onActionClick($event)\" />\n                              } @else {\n                                @let isCellVisible = cell | zTableCellVisible: zConfig().columns;\n                                @if (isCellVisible) {\n                                  @let editInfoVirtual = cell.getContext() | zTableCellEdit: zConfig().columns;\n                                  @if (editInfoVirtual.enabled) {\n                                    <!-- Editable Cell (Virtual) -->\n                                    <z-table-edit-cell\n                                      [zRow]=\"cell.row.original\"\n                                      [zRowId]=\"cell.row.id\"\n                                      [zRowIndex]=\"cell.row.index\"\n                                      [zColumnId]=\"cell.column.id\"\n                                      [zValue]=\"cell.getValue()\"\n                                      [zRowUpdate]=\"_rowUpdate()\"\n                                      [zEditConfig]=\"$any(editInfoVirtual.config)\"\n                                      (zChange)=\"onCellEdit($any($event))\" />\n                                  } @else {\n                                    <ng-container\n                                      *flexRender=\"\n                                        cell.column.columnDef.cell;\n                                        props: cell.getContext();\n                                        let cellContent\n                                      \">\n                                      @if (cellContent | zTableIsTemplateRef) {\n                                        <!-- TemplateRef rendering -->\n                                        @let isClickable = cell.column.id | zTableCellClickable: zConfig().columns;\n                                        <div\n                                          class=\"z-template-content\"\n                                          [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                          [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\"\n                                          (click)=\"isClickable && onCellClick(row, cell.column.id, cell.getValue())\">\n                                          <ng-container\n                                            *ngTemplateOutlet=\"\n                                              cellContent;\n                                              context: { $implicit: cell.getContext() }\n                                            \" />\n                                        </div>\n                                      } @else if (cellContent | zTableHasIcon) {\n                                        <!-- Icon syntax rendering -->\n                                        @let isClickableIcon = cell.column.id | zTableCellClickable: zConfig().columns;\n                                        <z-table-icon-text\n                                          [zText]=\"cellContent\"\n                                          [zTooltip]=\"cell | zTableCellConfig: zConfig().columns : 'contentTooltip'\"\n                                          [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                          [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\"\n                                          (click)=\"\n                                            isClickableIcon && onCellClick(row, cell.column.id, cell.getValue())\n                                          \" />\n                                      } @else {\n                                        <!-- Default/innerHTML rendering -->\n                                        @let isClickableDefault =\n                                          cell.column.id | zTableCellClickable: zConfig().columns;\n                                        <div\n                                          class=\"z-table-cell-text\"\n                                          z-tooltip\n                                          [zContent]=\"\n                                            (cell | zTableCellConfig: zConfig().columns : 'contentTooltip') ||\n                                            cellContent\n                                          \"\n                                          [innerHTML]=\"cellContent | translate | zSafeHtml\"\n                                          [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                          [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\"\n                                          (click)=\"\n                                            isClickableDefault && onCellClick(row, cell.column.id, cell.getValue())\n                                          \"></div>\n                                      }\n                                    </ng-container>\n                                  }\n                                }\n                              }\n                            </td>\n                          }\n                          @if (\n                            canUseVirtualColumns() &&\n                            virtualRightSpacerWidth() > 0 &&\n                            cell.column.id === lastVirtualCenterColumnId()\n                          ) {\n                            <td\n                              class=\"pointer-events-none border-0 p-0\"\n                              [style.width.px]=\"virtualRightSpacerWidth()\"></td>\n                          }\n                        }\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n              </div>\n            }\n          </div>\n        } @else {\n          <!-- Normal Scroll Mode -->\n          <table [ngStyle]=\"columnSizeVars()\" [style.width.px]=\"table.getTotalSize()\">\n            <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n            <tbody\n              cdkDropList\n              class=\"z-table-drag-body\"\n              [cdkDropListData]=\"table.getRowModel().rows\"\n              [cdkDropListDisabled]=\"!isRowDragEnabled()\"\n              cdkDropListOrientation=\"vertical\"\n              [cdkDropListAutoScrollStep]=\"20\"\n              (cdkDropListDropped)=\"onRowDrop($event)\"\n              [class.z-has-vertical-scroll]=\"hasVerticalScroll()\"\n              [class.z-last-row-touches-bottom]=\"lastRowTouchesBottom()\">\n              <!-- Row Template -->\n              <ng-template #rowTemplate let-row>\n                <tr\n                  cdkDrag\n                  z-table-row-hover\n                  cdkDragLockAxis=\"y\"\n                  cdkDragPreviewClass=\"z-table-row-drag-preview\"\n                  cdkDragPlaceholderClass=\"z-table-row-drag-placeholder\"\n                  [cdkDragData]=\"row\"\n                  [cdkDragDisabled]=\"!isRowDragEnabled()\"\n                  (cdkDragStarted)=\"onRowDragStarted()\"\n                  (cdkDragEnded)=\"onRowDragEnded($event)\"\n                  [attr.data-row-id]=\"row.id\"\n                  [ngStyle]=\"row | zTableRow: table : 'pinningStyles' : pinnedRowHeights() : virtualRowHeight()\"\n                  [class.z-child-row]=\"row.depth > 0\"\n                  [class.z-selected]=\"row.getIsSelected()\"\n                  [class.z-indeterminate-selected]=\"row.getIsSomeSelected() && !row.getIsSelected()\"\n                  [class.z-pinned-top]=\"row.getIsPinned() === 'top'\"\n                  [class.z-pinned-bottom]=\"row.getIsPinned() === 'bottom'\"\n                  [class.z-shadow-bottom]=\"\n                    showHeaderFooterShadow() &&\n                    row.getIsPinned() === 'top' &&\n                    (row | zTableRow: table : 'isLastTopPinned')\n                  \"\n                  [class.z-shadow-top]=\"\n                    showHeaderFooterShadow() &&\n                    row.getIsPinned() === 'bottom' &&\n                    (row | zTableRow: table : 'isFirstBottomPinned')\n                  \"\n                  [attr.data-depth]=\"row.depth\">\n                  <ng-template cdkDragPreview>\n                    <div class=\"z-table-row-drag-preview\" [style.width.px]=\"table.getTotalSize()\">\n                      @for (cell of row.getVisibleCells(); track cell.id) {\n                        @let isPreviewCellVisible = cell | zTableCellVisible: zConfig().columns;\n                        @let shouldRenderPreviewColSpan =\n                          cell | zTableCellRender: row.getVisibleCells() : zConfig().columns : 'body';\n                        @if (isPreviewCellVisible && shouldRenderPreviewColSpan) {\n                          <div\n                            class=\"z-table-row-drag-preview-cell\"\n                            [style.width.px]=\"cell.column.getSize()\"\n                            [class.z-table-row-drag-preview-handle]=\"cell.column.id === 'rowDrag'\">\n                            @if (cell.column.id === 'rowDrag') {\n                              <z-icon zType=\"lucideGripVertical\" zSize=\"14\" class=\"text-muted-foreground\" />\n                            } @else {\n                              <span class=\"truncate\">{{ cell.getValue() ?? '' }}</span>\n                            }\n                          </div>\n                        }\n                      }\n                    </div>\n                  </ng-template>\n\n                  <ng-template cdkDragPlaceholder>\n                    <tr class=\"z-table-row-drag-placeholder-row\">\n                      <td [attr.colspan]=\"renderedColumnCount()\">\n                        <div class=\"z-table-row-drag-placeholder-inner\" [style.height.px]=\"virtualRowHeight()\"></div>\n                      </td>\n                    </tr>\n                  </ng-template>\n\n                  @for (cell of row.getVisibleCells(); track cell.id) {\n                    @if (\n                      canUseVirtualColumns() &&\n                      virtualLeftSpacerWidth() > 0 &&\n                      cell.column.id === firstVirtualCenterColumnId()\n                    ) {\n                      <td class=\"pointer-events-none border-0 p-0\" [style.width.px]=\"virtualLeftSpacerWidth()\"></td>\n                    }\n                    @let shouldRenderRowSpan =\n                      cell | zTableSpan: zConfig().columns : 'shouldRender' : table.getRowModel().rows;\n                    @let shouldRenderColSpan =\n                      cell | zTableCellRender: row.getVisibleCells() : zConfig().columns : 'body';\n                    @let isVirtualColumnVisible =\n                      !canUseVirtualColumns() ||\n                      cell.column.getIsPinned() !== false ||\n                      virtualCenterColumnVisibilityMap()[cell.column.id];\n                    @if (shouldRenderRowSpan && shouldRenderColSpan && isVirtualColumnVisible) {\n                      <td\n                        [ngStyle]=\"\n                          cell.column\n                            | zTablePinningStyles\n                              : cell\n                              : 'body'\n                              : row.getVisibleCells()\n                              : zConfig().columns\n                              : columnSizingInfo()\n                        \"\n                        [class]=\"cell | zTableCellConfig: zConfig().columns : 'cellClass'\"\n                        [style]=\"cell | zTableCellConfig: zConfig().columns : 'cellStyle'\"\n                        [class.z-sticky-left]=\"cell.column.getIsPinned() === 'left'\"\n                        [class.z-sticky-right]=\"cell.column.getIsPinned() === 'right'\"\n                        [class.z-sticky-left-last]=\"\n                          cell.column.getIsPinned() === 'left' && cell.column.getIsLastColumn('left')\n                        \"\n                        [class.z-sticky-right-first]=\"\n                          cell.column.getIsPinned() === 'right' && cell.column.getIsFirstColumn('right')\n                        \"\n                        [class.z-sticky-right-last]=\"\n                          cell.column.getIsPinned() === 'right' && cell.column.getIsLastColumn('right')\n                        \"\n                        [class.z-at-left-edge]=\"cell | zTableCellOffset: orderedLeafColumns()\"\n                        [class.z-col-drag]=\"cell.column.id === 'rowDrag'\"\n                        [class.z-col-select]=\"cell.column.id === 'select'\"\n                        [class.z-col-expand]=\"cell.column.id === 'expand'\"\n                        [class.z-col-actions]=\"\n                          cell.column.id === 'actions' || cell.column.id === actionColumnInfo()?.columnId\n                        \"\n                        [class.z-at-bottom]=\"cell | zTableCellBottom: zConfig().columns : table.getRowModel().rows\"\n                        [attr.rowspan]=\"cell | zTableSpan: zConfig().columns : 'cellRowSpan' : table.getRowModel().rows\"\n                        [attr.colspan]=\"cell | zTableSpan: zConfig().columns : 'cellColSpan'\">\n                        @if (cell.column.id === 'rowDrag') {\n                          <div class=\"flex items-center justify-center\">\n                            <button\n                              cdkDragHandle\n                              type=\"button\"\n                              class=\"text-muted-foreground hover:bg-muted hover:text-foreground inline-flex size-7 items-center justify-center rounded-md transition-colors\"\n                              [class.cursor-grab]=\"isRowDragEnabled()\"\n                              [class.cursor-not-allowed]=\"!isRowDragEnabled()\"\n                              [class.opacity-40]=\"!isRowDragEnabled()\">\n                              <z-icon zType=\"lucideGripVertical\" zSize=\"14\" />\n                            </button>\n                          </div>\n                        } @else if (cell.column.id === 'select') {\n                          <!-- Row Checkbox with Pin Button -->\n                          <div class=\"flex items-center justify-center gap-1\">\n                            <z-checkbox\n                              [zChecked]=\"cell.row.getIsSelected()\"\n                              [zIndeterminate]=\"cell.row.getIsSomeSelected() && !cell.row.getIsSelected()\"\n                              [zDisabled]=\"!cell.row.getCanSelect()\"\n                              (zChange)=\"cell.row.toggleSelected()\" />\n                            @if (zConfig().enableRowPinning && cell.row.depth === 0 && !hasBodyRowSpan()) {\n                              <ng-template #rowPinPopoverContent>\n                                <div class=\"flex flex-col gap-1 p-1\">\n                                  @if (cell.row.getIsPinned() !== 'top') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_top' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned() !== 'bottom') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('bottom'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_bottom' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned()) {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin(false); rowPinPopover.hideImmediate()\"\n                                      class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                                    </button>\n                                  }\n                                </div>\n                              </ng-template>\n                              <button\n                                type=\"button\"\n                                z-popover\n                                #rowPinPopover=\"zPopover\"\n                                [zPopoverContent]=\"rowPinPopoverContent\"\n                                zTrigger=\"click\"\n                                zPosition=\"bottom\"\n                                class=\"z-row-pin-trigger text-muted-foreground hover:bg-muted hover:text-foreground flex cursor-pointer items-center justify-center rounded p-1\"\n                                [class.text-primary]=\"cell.row.getIsPinned()\">\n                                <z-icon zType=\"lucideEllipsis\" zSize=\"14\" class=\"rotate-90\" />\n                              </button>\n                            }\n                          </div>\n                        } @else if (cell.column.id === 'expand') {\n                          <!-- Expand Button with Row Pin Popover -->\n                          <div class=\"flex items-center justify-center gap-1\">\n                            @if (cell.row.subRows && cell.row.subRows.length > 0) {\n                              <button\n                                type=\"button\"\n                                (click)=\"cell.row.toggleExpanded()\"\n                                class=\"hover:bg-muted flex h-6 w-6 cursor-pointer items-center justify-center rounded\">\n                                <z-icon\n                                  zType=\"lucideChevronRight\"\n                                  zSize=\"14\"\n                                  class=\"transition-transform duration-200\"\n                                  [class.rotate-90]=\"cell.row.getIsExpanded()\" />\n                              </button>\n                            }\n                            @if (\n                              zConfig().enableRowPinning &&\n                              cell.row.depth === 0 &&\n                              !(cell.row.subRows && cell.row.subRows.length > 0) &&\n                              !hasBodyRowSpan()\n                            ) {\n                              <ng-template #rowPinPopoverContent>\n                                <div class=\"flex flex-col gap-1 p-1\">\n                                  @if (cell.row.getIsPinned() !== 'top') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_top' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned() !== 'bottom') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('bottom'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_bottom' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned()) {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin(false); rowPinPopover.hideImmediate()\"\n                                      class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                                    </button>\n                                  }\n                                </div>\n                              </ng-template>\n                              <button\n                                type=\"button\"\n                                z-popover\n                                #rowPinPopover=\"zPopover\"\n                                [zPopoverContent]=\"rowPinPopoverContent\"\n                                zTrigger=\"click\"\n                                zPosition=\"bottom\"\n                                class=\"z-row-pin-trigger text-muted-foreground hover:bg-muted hover:text-foreground flex cursor-pointer items-center justify-center rounded p-1\"\n                                [class.text-primary]=\"cell.row.getIsPinned()\">\n                                <z-icon zType=\"lucideEllipsis\" zSize=\"14\" class=\"rotate-90\" />\n                              </button>\n                            }\n                          </div>\n                        } @else if (cell.column.id === 'actions') {\n                          <!-- Actions Column - Row Pin Only (for parent rows) -->\n                          @if (cell.row.depth === 0 && !hasBodyRowSpan()) {\n                            <div class=\"flex items-center justify-center\">\n                              <ng-template #rowPinPopoverContent>\n                                <div class=\"flex flex-col gap-1 p-1\">\n                                  @if (cell.row.getIsPinned() !== 'top') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_top' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned() !== 'bottom') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('bottom'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_bottom' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned()) {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin(false); rowPinPopover.hideImmediate()\"\n                                      class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                                    </button>\n                                  }\n                                </div>\n                              </ng-template>\n                              <button\n                                type=\"button\"\n                                z-popover\n                                #rowPinPopover=\"zPopover\"\n                                [zPopoverContent]=\"rowPinPopoverContent\"\n                                zTrigger=\"click\"\n                                zPosition=\"bottom\"\n                                class=\"z-row-pin-trigger text-muted-foreground hover:bg-muted hover:text-foreground flex cursor-pointer items-center justify-center rounded p-1\"\n                                [class.text-primary]=\"cell.row.getIsPinned()\">\n                                <z-icon zType=\"lucideEllipsis\" zSize=\"14\" class=\"rotate-90\" />\n                              </button>\n                            </div>\n                          }\n                        } @else if (cell.column.id === actionColumnInfo()?.columnId && actionColumnInfo()) {\n                          <z-table-actions\n                            [zConfig]=\"$any(actionColumnInfo()!.config)\"\n                            [zRow]=\"cell.row.original\"\n                            [zRowId]=\"cell.row.id\"\n                            (zActionClick)=\"onActionClick($event)\" />\n                        } @else {\n                          @let isCellVisibleNormal = cell | zTableCellVisible: zConfig().columns;\n                          @if (isCellVisibleNormal) {\n                            @let editInfo = cell.getContext() | zTableCellEdit: zConfig().columns;\n                            @if (editInfo.enabled) {\n                              <!-- Editable Cell -->\n                              <z-table-edit-cell\n                                [zRow]=\"cell.row.original\"\n                                [zRowId]=\"cell.row.id\"\n                                [zRowIndex]=\"cell.row.index\"\n                                [zColumnId]=\"cell.column.id\"\n                                [zValue]=\"cell.getValue()\"\n                                [zRowUpdate]=\"_rowUpdate()\"\n                                [zEditConfig]=\"$any(editInfo.config)\"\n                                (zChange)=\"onCellEdit($any($event))\" />\n                            } @else {\n                              <ng-container\n                                *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let cellContent\">\n                                @if (cellContent | zTableIsTemplateRef) {\n                                  <!-- TemplateRef rendering -->\n                                  @let isClickableTpl = cell.column.id | zTableCellClickable: zConfig().columns;\n                                  <div\n                                    class=\"z-template-content\"\n                                    [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                    [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\"\n                                    (click)=\"isClickableTpl && onCellClick(row, cell.column.id, cell.getValue())\">\n                                    <ng-container\n                                      *ngTemplateOutlet=\"cellContent; context: { $implicit: cell.getContext() }\" />\n                                  </div>\n                                } @else if (cellContent | zTableHasIcon) {\n                                  <!-- Icon syntax rendering -->\n                                  @let isClickableIconTpl = cell.column.id | zTableCellClickable: zConfig().columns;\n                                  <z-table-icon-text\n                                    [zText]=\"cellContent\"\n                                    [zTooltip]=\"cell | zTableCellConfig: zConfig().columns : 'contentTooltip'\"\n                                    [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                    [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\"\n                                    (click)=\"isClickableIconTpl && onCellClick(row, cell.column.id, cell.getValue())\" />\n                                } @else {\n                                  <!-- Default/innerHTML rendering -->\n                                  @let isClickableDefaultTpl = cell.column.id | zTableCellClickable: zConfig().columns;\n                                  <div\n                                    class=\"z-table-cell-text\"\n                                    z-tooltip\n                                    [zContent]=\"\n                                      (cell | zTableCellConfig: zConfig().columns : 'contentTooltip') || cellContent\n                                    \"\n                                    [innerHTML]=\"cellContent | translate | zSafeHtml\"\n                                    [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                    [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\"\n                                    (click)=\"\n                                      isClickableDefaultTpl && onCellClick(row, cell.column.id, cell.getValue())\n                                    \"></div>\n                                }\n                              </ng-container>\n                            }\n                          }\n                        }\n                      </td>\n                    }\n                    @if (\n                      canUseVirtualColumns() &&\n                      virtualRightSpacerWidth() > 0 &&\n                      cell.column.id === lastVirtualCenterColumnId()\n                    ) {\n                      <td class=\"pointer-events-none border-0 p-0\" [style.width.px]=\"virtualRightSpacerWidth()\"></td>\n                    }\n                  }\n                </tr>\n\n                <!-- Expanded Row Detail -->\n                @if (row.getIsExpanded() && row.depth === 0 && !row.subRows?.length && zConfig().expandedRowTemplate) {\n                  <tr class=\"z-expanded-row\">\n                    <td [attr.colspan]=\"renderedColumnCount()\" class=\"p-0\">\n                      <ng-container *ngTemplateOutlet=\"zConfig().expandedRowTemplate!; context: { $implicit: row }\" />\n                    </td>\n                  </tr>\n                }\n              </ng-template>\n\n              <!-- Render Top Pinned Rows (hidden when filtered data is empty) -->\n              @if (!isEmpty()) {\n                @for (row of table.getTopRows(); track row.id) {\n                  <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: row }\" />\n                }\n              }\n\n              <!-- Render Center Rows -->\n              @for (row of table.getCenterRows(); track row.id) {\n                <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: row }\" />\n              }\n\n              <!-- Render Bottom Pinned Rows (hidden when filtered data is empty) -->\n              @if (!isEmpty()) {\n                @for (row of bottomRowsReversed(); track row.id) {\n                  <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: row }\" />\n                }\n              }\n            </tbody>\n          </table>\n        }\n      </ng-scrollbar>\n    }\n    <!-- end @else -->\n  </div>\n\n  <!-- Footer table -->\n  @if (hasFooter()) {\n    <div\n      class=\"z-tfoot-wrapper\"\n      [class.z-shadow-footer]=\"shouldFooterShowShadow()\"\n      [class.z-scroll-left]=\"hasScrollLeft()\"\n      [class.z-scroll-right]=\"hasScrollRight()\"\n      #tfootWrapper>\n      <table [ngStyle]=\"columnSizeVars()\" [style.width.px]=\"table.getTotalSize()\">\n        <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n        <tfoot>\n          @for (footerGroup of orderedFooterGroups(); track footerGroup.id) {\n            @if (footerGroup | zTableFooterContent: zConfig().columns) {\n              <tr>\n                @for (footer of footerGroup.headers; track footer.id) {\n                  @if (\n                    canUseVirtualColumns() &&\n                    virtualLeftSpacerWidth() > 0 &&\n                    footer.column.id === firstVirtualCenterColumnId()\n                  ) {\n                    <th class=\"pointer-events-none border-0 p-0\" [style.width.px]=\"virtualLeftSpacerWidth()\"></th>\n                  }\n                  @let rowSpan = footer | zTableSpan: zConfig().columns : 'footerRowSpan';\n                  @let shouldRender = footer | zTableCellRender: footerGroup.headers : zConfig().columns : 'footer';\n                  @let isVirtualColumnVisible =\n                    !canUseVirtualColumns() ||\n                    footer.column.getIsPinned() !== false ||\n                    virtualCenterColumnVisibilityMap()[footer.column.id];\n                  @if (rowSpan && shouldRender && isVirtualColumnVisible) {\n                    <th\n                      [ngStyle]=\"\n                        footer.column\n                          | zTablePinningStyles: footer : 'footer' : table : zConfig().columns : columnSizingInfo()\n                      \"\n                      [class]=\"\n                        (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerClass') +\n                        ' ' +\n                        (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass')\n                      \"\n                      [style]=\"footer.column.id | zTableColumnConfig: zConfig().columns : 'footerStyle'\"\n                      [class.z-sticky-left]=\"footer.column.getIsPinned() === 'left'\"\n                      [class.z-sticky-right]=\"footer.column.getIsPinned() === 'right'\"\n                      [class.z-sticky-left-last]=\"\n                        footer | zTableCellPin: 'isLastLeftPinned' : zConfig().columns : 'footer'\n                      \"\n                      [class.z-sticky-right-first]=\"\n                        footer | zTableCellPin: 'isFirstRightPinned' : zConfig().columns : 'footer'\n                      \"\n                      [class.z-sticky-right-last]=\"\n                        footer | zTableCellPin: 'isLastRightPinned' : zConfig().columns : 'footer'\n                      \"\n                      [class.z-at-left-edge]=\"footer | zTableCellOffset: orderedLeafColumns()\"\n                      [attr.rowspan]=\"rowSpan\"\n                      [attr.colspan]=\"footer | zTableSpan: zConfig().columns : 'footerColSpan'\">\n                      @let configFooterContent =\n                        footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContent';\n                      @if (footer.column.columnDef.footer) {\n                        <ng-container\n                          *flexRender=\"footer.column.columnDef.footer; props: footer.getContext(); let footerContent\">\n                          <div\n                            class=\"flex w-full items-center\"\n                            [class.justify-center]=\"\n                              (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass') ===\n                              'text-center'\n                            \"\n                            [class.justify-end]=\"\n                              (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass') ===\n                              'text-right'\n                            \">\n                            @if (footerContent | zTableIsTemplateRef) {\n                              <!-- TemplateRef rendering -->\n                              <div\n                                class=\"z-template-content\"\n                                [ngClass]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentClass'\n                                \"\n                                [ngStyle]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentStyle'\n                                \">\n                                <ng-container\n                                  *ngTemplateOutlet=\"footerContent; context: { $implicit: footer.getContext() }\" />\n                              </div>\n                            } @else if (footerContent | zTableHasIcon) {\n                              <!-- Icon syntax rendering -->\n                              <z-table-icon-text\n                                [zText]=\"footerContent\"\n                                [zTooltip]=\"footer.column.id | zTableColumnConfig: zConfig().columns : 'footerTooltip'\"\n                                [ngClass]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentClass'\n                                \"\n                                [ngStyle]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentStyle'\n                                \" />\n                            } @else {\n                              <!-- Default/string rendering -->\n                              <span\n                                class=\"z-table-cell-text\"\n                                z-tooltip\n                                [zContent]=\"\n                                  (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerTooltip') ||\n                                  footerContent\n                                \"\n                                [ngClass]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentClass'\n                                \"\n                                [ngStyle]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentStyle'\n                                \">\n                                {{ footerContent | translate }}\n                              </span>\n                            }\n                          </div>\n                        </ng-container>\n                      } @else if (configFooterContent) {\n                        <!-- Fallback for group columns without TanStack footer -->\n                        <div\n                          class=\"flex w-full items-center\"\n                          [class.justify-center]=\"\n                            (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass') ===\n                            'text-center'\n                          \"\n                          [class.justify-end]=\"\n                            (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass') ===\n                            'text-right'\n                          \">\n                          <span\n                            class=\"z-table-cell-text\"\n                            z-tooltip\n                            [zContent]=\"\n                              (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerTooltip') ||\n                              $any(configFooterContent)\n                            \"\n                            [ngClass]=\"footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentClass'\"\n                            [ngStyle]=\"footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentStyle'\">\n                            {{ $any(configFooterContent) | translate }}\n                          </span>\n                        </div>\n                      }\n                    </th>\n                  }\n                  @if (\n                    canUseVirtualColumns() &&\n                    virtualRightSpacerWidth() > 0 &&\n                    footer.column.id === lastVirtualCenterColumnId()\n                  ) {\n                    <th class=\"pointer-events-none border-0 p-0\" [style.width.px]=\"virtualRightSpacerWidth()\"></th>\n                  }\n                }\n              </tr>\n            }\n          }\n        </tfoot>\n      </table>\n    </div>\n  }\n</div>\n\n<!-- Pagination -->\n@if (zConfig().pagination?.enabled !== false) {\n  <div class=\"mt-4 flex items-center justify-between gap-4\">\n    <div class=\"truncate text-sm text-gray-500\">\n      {{ 'i18n_z_ui_table_total_rows' | translate: { total: (paginationTotal() | zFormatNum) } }}\n    </div>\n    <z-pagination\n      [zTotal]=\"paginationTotal()\"\n      [(zPageIndex)]=\"pagination().pageIndex\"\n      [(zPageSize)]=\"pagination().pageSize\"\n      [zPageSizeOptions]=\"zConfig().pagination?.pageSizeOptions ?? [10, 20, 50, 100]\"\n      [zShowSizeChanger]=\"zConfig().pagination?.showSizeChanger ?? true\"\n      [zShowQuickJumper]=\"zConfig().pagination?.showQuickJumper ?? false\"\n      [zShowTotal]=\"false\"\n      [zDisabled]=\"zConfig().pagination?.disabled || isLoading() || isProcessing()\"\n      (zOnPageChange)=\"onPageChange($event)\" />\n  </div>\n}\n\n<!-- Floating Bulk Action Bar -->\n<div class=\"z-bulk-action-bar-origin\" cdkOverlayOrigin #bulkBarOrigin=\"cdkOverlayOrigin\"></div>\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"bulkBarOrigin\"\n  [cdkConnectedOverlayOpen]=\"bulkBarMounted()\"\n  [cdkConnectedOverlayPositions]=\"bulkBarPositions\"\n  [cdkConnectedOverlayHasBackdrop]=\"false\"\n  cdkConnectedOverlayPanelClass=\"z-bulk-action-bar-overlay\">\n  @if (bulkBarConfig(); as config) {\n    <div class=\"z-bulk-action-bar-inner\" [class.z-leaving]=\"bulkBarClosing()\">\n      <div class=\"z-bulk-action-bar-count\">\n        {{ bulkBarContext()?.selectedRowIds?.length ?? 0 | zFormatNum }}\n        {{ config.selectedLabel ?? ('i18n_z_ui_table_selected' | translate) }}\n      </div>\n\n      <div class=\"z-bulk-action-bar-divider\"></div>\n\n      @for (item of bulkBarItems(); track item.action.key) {\n        <button\n          type=\"button\"\n          class=\"z-bulk-action-bar-button\"\n          [class.z-danger]=\"item.action.type === 'outline-destructive-secondary'\"\n          [disabled]=\"item.disabled\"\n          (click)=\"onBulkActionClick(item.action)\">\n          @if (item.action.icon) {\n            <z-icon [zType]=\"item.action.icon\" [zSize]=\"item.action.iconSize ?? '14'\" />\n          }\n          @if (item.action.label) {\n            <span>{{ item.action.label | translate }}</span>\n          }\n        </button>\n      }\n    </div>\n  }\n</ng-template>\n\n<!-- Settings Drawer -->\n<z-drawer\n  [(zVisible)]=\"showSettingsDrawer\"\n  [zTitle]=\"'i18n_z_ui_table_settings_title' | translate\"\n  zPlacement=\"right\"\n  zWidth=\"500px\"\n  [zShadow]=\"true\"\n  [zOkText]=\"null\"\n  [zCancelText]=\"'i18n_z_ui_drawer_close' | translate\">\n  <div class=\"z-table-settings-drawer px-4\">\n    <!-- Display Settings -->\n    <div class=\"mb-4\">\n      <h4 class=\"text-foreground mb-2 text-sm font-semibold\">{{ 'i18n_z_ui_table_display_settings' | translate }}</h4>\n      <p class=\"text-muted-foreground mb-3 text-xs\">{{ 'i18n_z_ui_table_display_settings_desc' | translate }}</p>\n      <div class=\"grid grid-cols-2 gap-x-4 gap-y-3\">\n        <z-checkbox\n          [zChecked]=\"showHorizontalBorder()\"\n          [zText]=\"'i18n_z_ui_table_horizontal_border' | translate\"\n          (zChange)=\"showHorizontalBorder.set(!showHorizontalBorder())\" />\n        <z-checkbox\n          [zChecked]=\"showVerticalBorder()\"\n          [zText]=\"'i18n_z_ui_table_vertical_border' | translate\"\n          (zChange)=\"showVerticalBorder.set(!showVerticalBorder())\" />\n        <z-checkbox\n          [zChecked]=\"showHeaderFooterShadow()\"\n          [zText]=\"'i18n_z_ui_table_header_footer_shadow' | translate\"\n          (zChange)=\"showHeaderFooterShadow.set(!showHeaderFooterShadow())\" />\n      </div>\n    </div>\n\n    <!-- Divider -->\n    <div class=\"border-border my-4 border-t\"></div>\n\n    <!-- Unified Column Settings -->\n    @if (zConfig().enableSettings) {\n      <div class=\"mb-4\">\n        <h4 class=\"text-foreground mb-2 text-sm font-semibold\">{{ 'i18n_z_ui_table_column_settings' | translate }}</h4>\n        <p class=\"text-muted-foreground mb-3 text-xs\">{{ 'i18n_z_ui_table_column_settings_desc' | translate }}</p>\n\n        <!-- Unpinned Columns (Draggable) -->\n        <div\n          cdkDropList\n          #columnDropList=\"cdkDropList\"\n          [cdkDropListAutoScrollDisabled]=\"true\"\n          (cdkDropListDropped)=\"onPendingColumnDrop($event)\"\n          class=\"z-column-drop-list space-y-1.5\">\n          @for (columnId of columnOrder(); track columnId; let i = $index) {\n            @if (columnId !== 'expand' && columnId !== 'select' && columnId !== 'rowDrag') {\n              @let column = table.getColumn(columnId);\n              @let isPinned = column?.getIsPinned();\n              @let isVisible = columnVisibility()[columnId] !== false;\n              @let canPin = column?.getCanPin() !== false && zConfig().enableColumnPinning;\n              @if (!isPinned) {\n                <div\n                  cdkDrag\n                  [cdkDragData]=\"columnId\"\n                  cdkDragLockAxis=\"y\"\n                  cdkDragPreviewContainer=\"global\"\n                  cdkDragPreviewClass=\"z-drag-preview\"\n                  class=\"z-drag-item border-border bg-card hover:border-primary flex cursor-grab items-center gap-2 rounded border px-2 py-1.5 text-sm active:cursor-grabbing\"\n                  [class.opacity-60]=\"!isVisible\">\n                  <!-- Drag Handle -->\n                  <z-icon\n                    cdkDragHandle\n                    zType=\"lucideGripVertical\"\n                    zSize=\"14\"\n                    class=\"text-muted-foreground shrink-0 cursor-grab active:cursor-grabbing\" />\n\n                  <!-- Visibility Checkbox -->\n                  <input\n                    type=\"checkbox\"\n                    [checked]=\"isVisible\"\n                    (change)=\"onToggleColumnVisibility(columnId)\"\n                    (mousedown)=\"$event.stopPropagation()\"\n                    class=\"border-input h-4 w-4 shrink-0 cursor-pointer rounded\" />\n\n                  <!-- Column Name -->\n                  <span class=\"flex min-w-0 flex-1 flex-col\">\n                    <span class=\"truncate\" [class.text-muted-foreground]=\"!isVisible\">\n                      {{ columnId | zTableColumnHeader: zConfig().columns | translate }}\n                    </span>\n                    @let parents = columnId | zTableColumnParents: zConfig().columns;\n                    @if (parents) {\n                      <span class=\"text-muted-foreground truncate text-[0.625rem]\">({{ parents | translate }})</span>\n                    }\n                  </span>\n\n                  <!-- Pin Buttons -->\n                  @if (canPin) {\n                    <div class=\"flex shrink-0 items-center gap-0.5\" (mousedown)=\"$event.stopPropagation()\">\n                      <button\n                        type=\"button\"\n                        [disabled]=\"!isVisible\"\n                        (click)=\"onToggleColumnPin(columnId, 'left')\"\n                        class=\"text-muted-foreground hover:bg-muted cursor-pointer rounded p-1 text-xs transition-colors disabled:cursor-not-allowed disabled:opacity-40\"\n                        title=\"Pin Left\">\n                        <z-icon zType=\"lucideArrowLeft\" zSize=\"12\" />\n                      </button>\n                      <button\n                        type=\"button\"\n                        [disabled]=\"!isVisible\"\n                        (click)=\"onToggleColumnPin(columnId, 'right')\"\n                        class=\"text-muted-foreground hover:bg-muted cursor-pointer rounded p-1 text-xs transition-colors disabled:cursor-not-allowed disabled:opacity-40\"\n                        title=\"Pin Right\">\n                        <z-icon zType=\"lucideArrowRight\" zSize=\"12\" />\n                      </button>\n                    </div>\n                  }\n                </div>\n              }\n            }\n          }\n        </div>\n\n        <!-- Pinned Columns Section -->\n        @if (zConfig().enableColumnPinning) {\n          @if (pinnedColumnIds().length > 0) {\n            <div class=\"border-border mt-4 border-t pt-4\">\n              <h5 class=\"text-muted-foreground mb-2 text-xs font-medium\">\n                {{ 'i18n_z_ui_table_pinned_columns' | translate }}\n              </h5>\n              <div class=\"space-y-1.5\">\n                @for (columnId of pinnedColumnIds(); track columnId) {\n                  @let column = table.getColumn(columnId);\n                  @let isPinned = column?.getIsPinned();\n                  @let isVisible = columnVisibility()[columnId] !== false;\n                  <div\n                    class=\"border-border bg-muted/30 flex items-center gap-2 rounded border px-2 py-1.5 text-sm\"\n                    [class.opacity-60]=\"!isVisible\">\n                    <!-- Pin Icon -->\n                    <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"text-primary shrink-0\" />\n\n                    <!-- Visibility Checkbox -->\n                    <input\n                      type=\"checkbox\"\n                      [checked]=\"isVisible\"\n                      (change)=\"onToggleColumnVisibility(columnId)\"\n                      class=\"border-input h-4 w-4 shrink-0 cursor-pointer rounded\" />\n\n                    <!-- Column Name -->\n                    <span class=\"flex min-w-0 flex-1 flex-col\">\n                      <span class=\"truncate\" [class.text-muted-foreground]=\"!isVisible\">\n                        {{ columnId | zTableColumnHeader: zConfig().columns | translate }}\n                      </span>\n                      @let pinnedParents = columnId | zTableColumnParents: zConfig().columns;\n                      @if (pinnedParents) {\n                        <span class=\"text-muted-foreground truncate text-[0.625rem]\">\n                          ({{ pinnedParents | translate }})\n                        </span>\n                      }\n                    </span>\n\n                    <!-- Position Badge -->\n                    <span class=\"bg-primary/10 text-primary shrink-0 rounded px-1.5 py-0.5 text-[0.625rem] font-medium\">\n                      {{\n                        isPinned === 'left'\n                          ? ('i18n_z_ui_table_left' | translate)\n                          : ('i18n_z_ui_table_right' | translate)\n                      }}\n                    </span>\n\n                    <!-- Unpin Button -->\n                    <button\n                      type=\"button\"\n                      (click)=\"onToggleColumnPin(columnId, isPinned === 'left' ? 'left' : 'right')\"\n                      class=\"text-muted-foreground hover:bg-muted hover:text-foreground cursor-pointer rounded p-1 text-xs transition-colors\"\n                      title=\"Unpin\">\n                      <z-icon zType=\"lucideX\" zSize=\"12\" />\n                    </button>\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        }\n      </div>\n    }\n  </div>\n</z-drawer>\n", styles: [".z-bulk-action-bar-origin{position:fixed;left:50%;bottom:1rem;width:1px;height:1px;pointer-events:none}:host ::ng-deep .z-bulk-action-bar-overlay{max-width:calc(100vw - 2rem);margin-bottom:1rem;transform-origin:center bottom}.z-bulk-action-bar-inner{border:thin solid color-mix(in srgb,var(--border) 88%,transparent);border-radius:.5rem;background:color-mix(in srgb,var(--card) 96%,var(--background));color:var(--foreground);box-shadow:0 1rem 2.5rem color-mix(in srgb,var(--foreground) 16%,transparent),0 .25rem .75rem color-mix(in srgb,var(--foreground) 8%,transparent),0 0 0 1px color-mix(in srgb,var(--background) 65%,transparent) inset;display:flex;align-items:center;width:max-content;min-height:2.25rem;max-width:calc(100vw - 2rem);overflow:hidden;transform-origin:center bottom;animation:z-bulk-action-bar-enter .18s cubic-bezier(.16,1,.3,1);will-change:opacity,transform}.z-bulk-action-bar-inner.z-leaving{pointer-events:none;animation:z-bulk-action-bar-exit .14s ease-in forwards}.z-bulk-action-bar-count{padding:0 .75rem;white-space:nowrap;font-size:.8125rem;font-weight:500;color:var(--foreground)}.z-bulk-action-bar-divider{width:1px;align-self:stretch;background:color-mix(in srgb,var(--border) 88%,transparent)}.z-bulk-action-bar-button{display:inline-flex;align-items:center;gap:.375rem;min-height:2.25rem;padding:0 .75rem;border-left:thin solid color-mix(in srgb,var(--border) 78%,transparent);color:var(--foreground);font-size:.8125rem;white-space:nowrap;cursor:pointer;transition:background-color .14s ease,color .14s ease}.z-bulk-action-bar-button:hover:not(:disabled){background:var(--muted)}.z-bulk-action-bar-button:disabled{cursor:not-allowed;opacity:.45}.z-bulk-action-bar-button.z-danger{color:var(--destructive)}.z-bulk-action-bar-button.z-danger:hover:not(:disabled){background:color-mix(in srgb,var(--destructive) 12%,transparent)}@keyframes z-bulk-action-bar-enter{0%{opacity:0;transform:translateY(.875rem)}to{opacity:1;transform:translateY(0)}}@keyframes z-bulk-action-bar-exit{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(.875rem)}}@media(prefers-reduced-motion:reduce){.z-bulk-action-bar-inner{animation:none}}:host ::ng-deep .z-table-cell-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;min-width:0;-webkit-user-select:text;user-select:text}:host ::ng-deep .z-table-cell-text>*,:host ::ng-deep .z-table-cell-text *{display:inline-block;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}.z-template-content{display:block;width:100%;min-width:0;max-width:100%;overflow:hidden}.z-template-content>*{min-width:0;max-width:100%}.z-template-content>[class*=flex]{min-width:0;max-width:100%}.z-template-content>[class*=flex]>*{min-width:0;flex-shrink:1}.z-template-content>[class*=grid]{min-width:0;max-width:100%}.z-thead-wrapper{flex-shrink:0;background:var(--muted);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.z-thead-wrapper::-webkit-scrollbar{display:none}.z-column-menu-item{line-height:1.25rem}.z-column-menu-item:focus-visible,.z-column-menu-item.z-popover-open{background-color:var(--muted);outline:none}.z-table-row-drag-preview{display:flex;align-items:stretch;overflow:hidden;border:1px solid var(--primary);border-radius:.5rem;background-color:var(--card);box-shadow:0 10px 24px #00000029}.z-table-row-drag-preview-cell{display:flex;min-width:0;align-items:center;padding:.5rem 12px;border-right:thin solid var(--border);background-color:var(--card);color:var(--foreground);font-size:.875rem}.z-table-row-drag-preview-cell:last-child{border-right:none}.z-table-row-drag-preview-cell>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.z-table-row-drag-preview-handle{justify-content:center}.z-table-row-drag-placeholder-row td{padding:0!important;border-top:none!important;border-left:none!important;border-right:none!important;border-bottom:thin solid transparent!important;background:transparent!important}.z-table-row-drag-placeholder-inner{width:100%;min-height:2.625rem;border:2px dashed var(--primary);border-radius:0;background-color:color-mix(in srgb,var(--primary) 10%,transparent);opacity:1!important;visibility:visible!important;box-sizing:border-box}.z-table-row-drag-placeholder-row.cdk-drag-placeholder *{opacity:1}.z-table-row-drag-placeholder-row.cdk-drag-placeholder .z-table-row-drag-placeholder-inner{opacity:1!important;visibility:visible!important}:host{display:flex;flex-direction:column;height:100%;--scrollbar-track-thickness: 7px;--scrollbar-track-color: transparent;--scrollbar-thumb-shape: 3px;--z-shadow-left-right: -1.875rem;--z-shadow-left-width: 1.875rem;--z-shadow-left-opacity: 0;--z-shadow-right-left: -1.875rem;--z-shadow-right-width: 1.875rem;--z-shadow-right-opacity: 0;--z-sticky-left-border-color: transparent;--z-sticky-right-border-color: var(--border)}.z-table-container{display:flex;flex-direction:column;position:relative;width:100%;height:100%;overflow:hidden;border-radius:.3125rem;border:thin solid var(--border);background-color:var(--card)}.z-table-container.z-table-borderless{border:none;border-radius:0;box-shadow:none!important;background-color:transparent}.z-table-container.z-hide-horizontal-border th,.z-table-container.z-hide-horizontal-border td{border-bottom:none!important;border-top:none!important}.z-table-container.z-hide-vertical-border th,.z-table-container.z-hide-vertical-border td{border-left:none!important}table{width:fit-content;min-width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:.875rem}.z-table-toolbar .z-settings-btn{transition:all .15s ease}.z-table-toolbar .z-settings-btn:hover{border-color:var(--muted-foreground)}.z-thead-wrapper{flex-shrink:0;background:var(--muted);overflow-x:hidden;overflow-y:hidden;touch-action:pan-y pinch-zoom}.z-thead-wrapper th{height:auto;padding:.5rem 12px;text-align:left;vertical-align:middle;font-weight:500;color:var(--foreground);white-space:nowrap;overflow:hidden;background:var(--muted);border-left:thin solid var(--border);border-bottom:thin solid var(--border);-webkit-user-select:none;user-select:none}.z-thead-wrapper th.z-at-left-edge{border-left:none}.z-thead-wrapper th[colspan]{text-align:center;background:var(--muted);font-weight:500;color:var(--foreground)}.z-thead-wrapper.z-shadow-header{box-shadow:0 1px 3px #00000014;position:relative;z-index:15}.z-thead-wrapper.z-shadow-header:where(.dark,.dark *){box-shadow:0 1px 3px #0000004d}.z-tbody-wrapper{flex:1;min-height:6.25rem;display:flex;flex-direction:column}.z-tbody-scrollbar{flex:1;height:100%}.z-empty-state,.z-loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:6.25rem;height:100%;color:var(--muted-foreground);font-size:.875rem;animation:z-fade-in .2s ease-out}.z-tbody-scrollbar,.z-tbody-scrollbar table{animation:z-fade-in .2s ease-out}@keyframes z-fade-in{0%{opacity:0;transform:translateY(.25rem)}to{opacity:1;transform:translateY(0)}}.z-tbody-wrapper tr{transition:background-color .15s ease}.z-tbody-wrapper tr:hover,.z-tbody-wrapper tr:hover td[style*=sticky]{background-color:var(--muted)}.z-tbody-wrapper tr.z-pinned-top td.z-sticky-left,.z-tbody-wrapper tr.z-pinned-top td.z-sticky-right,.z-tbody-wrapper tr.z-pinned-bottom td.z-sticky-left,.z-tbody-wrapper tr.z-pinned-bottom td.z-sticky-right{z-index:3}.z-tbody-wrapper tr.z-shadow-bottom{box-shadow:0 1px 3px #00000014!important;position:relative;z-index:15}.z-tbody-wrapper tr.z-shadow-bottom:where(.dark,.dark *){box-shadow:0 1px 3px #0000004d!important}.z-tbody-wrapper tr.z-shadow-top{box-shadow:0 -2px 4px #0000000d!important;position:relative;z-index:15}.z-tbody-wrapper tr.z-shadow-top:where(.dark,.dark *){box-shadow:0 -2px 4px #0003!important}.z-tbody-wrapper td{padding:.5rem 12px;height:2.5rem;vertical-align:middle;color:var(--foreground);white-space:nowrap;overflow:hidden;background:var(--card);border-left:thin solid var(--border);border-bottom:thin solid var(--border);box-sizing:border-box}.z-tbody-wrapper tbody.z-has-vertical-scroll td.z-at-bottom,.z-tbody-wrapper tbody.z-last-row-touches-bottom td.z-at-bottom{border-bottom:none}.z-tbody-wrapper td.z-at-left-edge{border-left:none}.z-tbody-wrapper td i{color:var(--muted-foreground);font-style:italic}.z-tbody-wrapper td[rowspan]{vertical-align:top;padding-top:.75rem}.z-tbody-wrapper td.z-row-hover{background-color:var(--muted)!important}.z-tbody-wrapper td.z-col-select,.z-tbody-wrapper td.z-col-expand,.z-tbody-wrapper td.z-col-actions{padding:.5rem 4px!important;text-align:center}.z-tbody-wrapper tr.z-child-row td.z-col-select:first-child,.z-tbody-wrapper tr.z-child-row td.z-col-expand:first-child,.z-tbody-wrapper tr.z-child-row td.z-col-actions:first-child{padding-left:0!important}.z-virtual-scroll-inner{position:relative;width:100%}.z-virtual-row{position:absolute;top:0;left:0;width:100%}tr.z-child-row td:first-child{padding-left:.75rem!important}tbody tr.z-selected,tbody tr.z-selected td{background-color:color-mix(in srgb,var(--primary) 15%,var(--background))!important}tbody tr.z-selected:hover,tbody tr.z-selected:hover td{background-color:color-mix(in srgb,var(--primary) 20%,var(--background))!important}tbody tr.z-indeterminate-selected,tbody tr.z-indeterminate-selected td{background-color:color-mix(in srgb,var(--primary) 10%,var(--background))!important}tbody tr.z-indeterminate-selected:hover,tbody tr.z-indeterminate-selected:hover td{background-color:color-mix(in srgb,var(--primary) 15%,var(--background))!important}tbody tr.z-pinned-top td{background-color:var(--card)!important}tbody tr.z-pinned-top:hover{background-color:var(--muted)}tbody tr.z-pinned-top:hover td{background-color:var(--muted)!important}tbody tr.z-pinned-bottom td{background-color:var(--card)!important}tbody tr.z-pinned-bottom:hover{background-color:var(--muted)}tbody tr.z-pinned-bottom:hover td,tr.z-expanded-row td{background-color:var(--muted)!important}thead th{position:relative}thead th .z-resizer{position:absolute;right:0;top:0;height:100%;width:.5rem;background:transparent;cursor:col-resize;-webkit-user-select:none;user-select:none;touch-action:none;z-index:5}thead th .z-resizer:after{content:\"\";position:absolute;right:0;top:0;height:100%;width:.1875rem;background:#0000001a;opacity:0;transition:opacity .2s ease}thead th .z-resizer:after:where(.dark,.dark *){background:#ffffff1a}thead th .z-resizer:hover:after{opacity:1;background:var(--primary);width:.1875rem}thead th .z-resizer.z-is-resizing:after{opacity:1;background:var(--primary);width:.1875rem}thead th .z-resizer.z-resizer-left{right:auto;left:0}thead th .z-resizer.z-resizer-left:after{right:auto;left:0}.z-thead-wrapper th.z-sticky-left,.z-thead-wrapper th.z-sticky-right,.z-tbody-wrapper th.z-sticky-left,.z-tbody-wrapper th.z-sticky-right,.z-tfoot-wrapper th.z-sticky-left,.z-tfoot-wrapper th.z-sticky-right{background-color:var(--muted);z-index:1;transform:translateZ(0);backface-visibility:hidden}.z-thead-wrapper td.z-sticky-left,.z-thead-wrapper td.z-sticky-right,.z-tbody-wrapper td.z-sticky-left,.z-tbody-wrapper td.z-sticky-right,.z-tfoot-wrapper td.z-sticky-left,.z-tfoot-wrapper td.z-sticky-right{background-color:var(--card);z-index:1;transform:translateZ(0);backface-visibility:hidden}.z-thead-wrapper th.z-sticky-left-last,.z-thead-wrapper td.z-sticky-left-last,.z-tbody-wrapper th.z-sticky-left-last,.z-tbody-wrapper td.z-sticky-left-last,.z-tfoot-wrapper th.z-sticky-left-last,.z-tfoot-wrapper td.z-sticky-left-last{position:relative;overflow:visible;border-right:thin solid var(--z-sticky-left-border-color)}.z-thead-wrapper th.z-sticky-left-last:after,.z-thead-wrapper td.z-sticky-left-last:after,.z-tbody-wrapper th.z-sticky-left-last:after,.z-tbody-wrapper td.z-sticky-left-last:after,.z-tfoot-wrapper th.z-sticky-left-last:after,.z-tfoot-wrapper td.z-sticky-left-last:after{content:\"\";position:absolute;top:0;bottom:0;right:var(--z-shadow-left-right);width:var(--z-shadow-left-width);pointer-events:none;box-shadow:inset 10px 0 8px -8px #0000001a;z-index:10;opacity:var(--z-shadow-left-opacity)}:host-context(.dark) .z-thead-wrapper th.z-sticky-left-last:after,:host-context(.dark) .z-thead-wrapper td.z-sticky-left-last:after,:host-context(.dark) .z-tbody-wrapper th.z-sticky-left-last:after,:host-context(.dark) .z-tbody-wrapper td.z-sticky-left-last:after,:host-context(.dark) .z-tfoot-wrapper th.z-sticky-left-last:after,:host-context(.dark) .z-tfoot-wrapper td.z-sticky-left-last:after{box-shadow:inset 10px 0 10px -8px #0000004d}.z-thead-wrapper.z-scroll-left,.z-tbody-wrapper.z-scroll-left,.z-tfoot-wrapper.z-scroll-left{--z-shadow-left-opacity: 1}.z-thead-wrapper.z-scroll-left:where(.dark,.dark *),.z-tbody-wrapper.z-scroll-left:where(.dark,.dark *),.z-tfoot-wrapper.z-scroll-left:where(.dark,.dark *){--z-sticky-left-border-color: var(--border)}.z-thead-wrapper th.z-sticky-right-first,.z-thead-wrapper td.z-sticky-right-first,.z-tbody-wrapper th.z-sticky-right-first,.z-tbody-wrapper td.z-sticky-right-first,.z-tfoot-wrapper th.z-sticky-right-first,.z-tfoot-wrapper td.z-sticky-right-first{position:relative;overflow:visible;border-left:thin solid var(--z-sticky-right-border-color)}.z-thead-wrapper th.z-sticky-right-first:before,.z-thead-wrapper td.z-sticky-right-first:before,.z-tbody-wrapper th.z-sticky-right-first:before,.z-tbody-wrapper td.z-sticky-right-first:before,.z-tfoot-wrapper th.z-sticky-right-first:before,.z-tfoot-wrapper td.z-sticky-right-first:before{content:\"\";position:absolute;top:0;bottom:0;left:var(--z-shadow-right-left);width:var(--z-shadow-right-width);pointer-events:none;box-shadow:inset -10px 0 8px -8px #0000001a;z-index:10;opacity:var(--z-shadow-right-opacity)}:host-context(.dark) .z-thead-wrapper th.z-sticky-right-first:before,:host-context(.dark) .z-thead-wrapper td.z-sticky-right-first:before,:host-context(.dark) .z-tbody-wrapper th.z-sticky-right-first:before,:host-context(.dark) .z-tbody-wrapper td.z-sticky-right-first:before,:host-context(.dark) .z-tfoot-wrapper th.z-sticky-right-first:before,:host-context(.dark) .z-tfoot-wrapper td.z-sticky-right-first:before{box-shadow:inset -10px 0 10px -8px #0000004d}.z-thead-wrapper.z-scroll-right,.z-tbody-wrapper.z-scroll-right,.z-tfoot-wrapper.z-scroll-right{--z-shadow-right-opacity: 1}.z-thead-wrapper.z-scroll-right:not(:where(.dark,.dark *)),.z-tbody-wrapper.z-scroll-right:not(:where(.dark,.dark *)),.z-tfoot-wrapper.z-scroll-right:not(:where(.dark,.dark *)){--z-sticky-right-border-color: transparent}.z-thead-wrapper th.z-sticky-right-last,.z-tfoot-wrapper th.z-sticky-right-last{position:relative}.z-thead-wrapper th.z-sticky-right-last:after,.z-tfoot-wrapper th.z-sticky-right-last:after{content:\"\";position:absolute;top:0;bottom:0;right:-1.875rem;width:1.875rem;background:var(--muted);pointer-events:none}.z-tfoot-wrapper{flex-shrink:0;background:var(--muted);overflow-x:hidden;overflow-y:hidden;touch-action:pan-y pinch-zoom}.z-tfoot-wrapper th{height:auto;padding:.5rem 12px;text-align:left;vertical-align:middle;font-weight:500;font-size:.75rem;color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.5px;background:var(--muted);border-left:thin solid var(--border);border-top:thin solid var(--border)}.z-tfoot-wrapper th.z-at-left-edge{border-left:none}.z-tfoot-wrapper.z-shadow-footer{box-shadow:0 -2px 4px #0000000d;position:relative;z-index:15}.z-tfoot-wrapper.z-shadow-footer:where(.dark,.dark *){box-shadow:0 -2px 4px #0003}.z-pin-btn{padding:.125rem 4px;border-radius:.25rem;color:var(--muted-foreground);transition:all .15s ease}.z-pin-btn:hover{background-color:var(--muted);color:var(--foreground)}.z-pin-btn.z-pin-btn-active{color:var(--primary);background-color:var(--primary)}.z-pin-btn.z-pin-btn-active:hover{background-color:var(--primary);opacity:.8}.z-row-pin-trigger{opacity:1}.z-row-pin-trigger.text-primary{color:var(--primary)}.z-header-pin-trigger{opacity:1}.z-header-pin-trigger.text-primary{color:var(--primary)}th{overflow:hidden}th .z-header-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}th .z-header-text-wrapper{transition:background-color .15s ease;border-radius:.25rem;min-width:0;overflow:hidden;flex-shrink:1}th .z-header-text-wrapper.z-has-options:hover,th .z-header-text-wrapper.z-has-options:focus-visible,th .z-header-text-wrapper.z-has-options.z-popover-open{background-color:color-mix(in srgb,var(--foreground) 8%,transparent);outline:none}th .z-header-text-wrapper.z-has-options:active{background-color:color-mix(in srgb,var(--foreground) 12%,transparent)}.cdk-drag-preview,.z-drag-preview{box-shadow:0 5px 20px #0003;box-sizing:border-box;border-radius:.375rem;background-color:var(--card);border:1px solid var(--primary);overflow:hidden;z-index:10000!important;pointer-events:none}.cdk-drag-preview:where(.dark,.dark *),.z-drag-preview:where(.dark,.dark *){box-shadow:0 5px 20px #00000080}.cdk-drag-placeholder{background-color:color-mix(in srgb,var(--primary) 10%,var(--background));border:2px dashed var(--primary);box-sizing:border-box;border-radius:.375rem}.cdk-drag-animating{transition:transform .1s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .cdk-drag:not(.cdk-drag-placeholder){transition:transform .1s cubic-bezier(0,0,.2,1)}.z-drag-item.cdk-drag-dragging{transition:none!important}.z-column-drop-list{min-height:3.125rem;overscroll-behavior:contain}.z-column-drop-list.cdk-drop-list-dragging{overflow:clip}.z-table-settings-drawer input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:1rem;height:1rem;border:thin solid var(--input);border-radius:.25rem;background-color:var(--background);cursor:pointer;position:relative;transition:all .2s ease}.z-table-settings-drawer input[type=checkbox]:hover{border-color:var(--primary)}.z-table-settings-drawer input[type=checkbox]:checked{background-color:var(--primary);border-color:var(--primary)}.z-table-settings-drawer input[type=checkbox]:checked:after{content:\"\";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:.375rem;height:.625rem;border:solid var(--primary-foreground);border-width:0 .125rem .125rem 0;transform:translate(-50%,-60%) rotate(45deg)}.z-table-settings-drawer input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: i1$1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "ngmodule", type: ScrollingModule }, { kind: "component", type: NgScrollbar, selector: "ng-scrollbar:not([externalViewport]), [ngScrollbar]", exportAs: ["ngScrollbar"] }, { kind: "directive", type: FlexRenderDirective, selector: "[flexRender]", inputs: ["flexRender", "flexRenderProps", "flexRenderInjector"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: ZCheckboxComponent, selector: "z-checkbox", inputs: ["class", "zType", "zSize", "zLabel", "zText", "zDisabled", "zIndeterminate", "zValue", "zOptions", "zOrientation", "zCheckAll", "zCheckAllText", "zChecked", "zGroupValue"], outputs: ["zChange", "zGroupChange", "zOnBlur", "zOnFocus", "zControl", "zEvent", "zCheckedChange", "zGroupValueChange"] }, { kind: "component", type: ZEmptyComponent, selector: "z-empty", inputs: ["class", "zType", "zIcon", "zIconSize", "zSize", "zMessage", "zDescription"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZInputComponent, selector: "z-input", inputs: ["class", "zType", "zSize", "zAlign", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zPrefix", "zSuffix", "zMin", "zMax", "zStep", "zShowArrows", "zMask", "zDecimalPlaces", "zAllowNegative", "zThousandSeparator", "zDecimalMarker", "zValidators", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zShowPasswordToggle", "zSearch", "zDebounce", "zAutofocus", "zAutoComplete", "zAllowClear", "zAutoSizeContent", "zRows", "zResize", "zMaxLength", "zAutoSuggest", "zColorConfig"], outputs: ["zOnSearch", "zOnChange", "zOnBlur", "zOnFocus", "zOnKeydown", "zOnEnter", "zOnColorCollapse", "zControl", "zEvent"], exportAs: ["zInput"] }, { kind: "component", type: ZLoadingComponent, selector: "z-loading", inputs: ["class", "zSpinner", "zSize", "zColor", "zText", "zOverlay", "zOverlayType", "zFullscreen", "zLoading"] }, { kind: "component", type: ZSkeletonComponent, selector: "z-skeleton", inputs: ["class", "zType", "zSize", "zWidth", "zHeight", "zRows", "zGap", "zAnimated", "zRadius"] }, { kind: "component", type: ZDrawerComponent, selector: "z-drawer", inputs: ["class", "zBodyClass", "zVisible", "zTitle", "zDescription", "zWidth", "zHeight", "zPlacement", "zClosable", "zMaskClosable", "zHideFooter", "zHideHeader", "zOkText", "zCancelText", "zOkDestructive", "zOkDisabled", "zLoading", "zOverlay", "zShadow", "zShape", "zContentLoading", "zSkeletonRows"], outputs: ["zOnOk", "zOnCancel", "zAfterClose", "zScrollbar", "zVisibleChange"], exportAs: ["zDrawer"] }, { kind: "component", type: ZPaginationComponent, selector: "z-pagination", inputs: ["zPageIndex", "zPageSize", "zTotal", "zPageSizeOptions", "zShowSizeChanger", "zShowQuickJumper", "zShowTotal", "zSimple", "zSize", "zDisabled", "zTotalLabel", "zPerPageLabel", "zGoToLabel"], outputs: ["zOnPageChange", "zPageIndexChange", "zPageSizeChange"] }, { kind: "component", type: ZTableFilterComponent, selector: "z-table-filter", inputs: ["zColumn", "zTable"] }, { kind: "component", type: ZTableEditCellComponent, selector: "z-table-edit-cell", inputs: ["zRow", "zRowId", "zRowIndex", "zColumnId", "zValue", "zEditConfig", "zRowUpdate"], outputs: ["zChange"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zTriggerRef", "zManualClose", "zOutsideClickClose", "zScrollClose", "zShowArrow"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange"], exportAs: ["zPopover"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTrigger", "zTooltipType", "zTooltipSize", "zClass", "zShowDelay", "zHideDelay", "zArrow", "zDisabled", "zOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "directive", type: ZTableResizeDirective, selector: "[z-table-resize],[zTableResize]", inputs: ["zTableResize"] }, { kind: "directive", type: ZTableRowHoverDirective, selector: "[z-table-row-hover], [zTableRowHover]", inputs: ["zTableRowHover"] }, { kind: "component", type: ZTableIconTextComponent, selector: "z-table-icon-text", inputs: ["zText", "zTooltip", "zTriggerElement"] }, { kind: "component", type: ZTableActionsComponent, selector: "z-table-actions", inputs: ["zConfig", "zRow", "zRowId", "zDropdownButtonSize"], outputs: ["zActionClick"] }, { kind: "pipe", type: ZTableIsTemplateRefPipe, name: "zTableIsTemplateRef" }, { kind: "pipe", type: ZTableHasIconPipe, name: "zTableHasIcon" }, { kind: "pipe", type: ZTableCellBottomPipe, name: "zTableCellBottom" }, { kind: "pipe", type: ZTableCellClickablePipe, name: "zTableCellClickable" }, { kind: "pipe", type: ZTableCellConfigPipe, name: "zTableCellConfig" }, { kind: "pipe", type: ZTableCellEditPipe, name: "zTableCellEdit" }, { kind: "pipe", type: ZTableCellOffsetPipe, name: "zTableCellOffset" }, { kind: "pipe", type: ZTableCellPinPipe, name: "zTableCellPin" }, { kind: "pipe", type: ZTableCellVisiblePipe, name: "zTableCellVisible" }, { kind: "pipe", type: ZTableColumnConfigPipe, name: "zTableColumnConfig" }, { kind: "pipe", type: ZTableColumnHeaderPipe, name: "zTableColumnHeader" }, { kind: "pipe", type: ZTableColumnParentsPipe, name: "zTableColumnParents" }, { kind: "pipe", type: ZTableFooterContentPipe, name: "zTableFooterContent" }, { kind: "pipe", type: ZTablePinningStylesPipe, name: "zTablePinningStyles" }, { kind: "pipe", type: ZTableRowPipe, name: "zTableRow" }, { kind: "pipe", type: ZTableSpanPipe, name: "zTableSpan" }, { kind: "pipe", type: ZTableCellRenderPipe, name: "zTableCellRender" }, { kind: "pipe", type: ZFormatNumPipe, name: "zFormatNum" }, { kind: "pipe", type: ZSafeHtmlPipe, name: "zSafeHtml" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZTableComponent, decorators: [{
             type: Component,
@@ -5525,7 +6368,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                         TranslatePipe,
                     ], standalone: true, providers: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'z-table block relative py-1',
-                    }, exportAs: 'zTable', template: "<!-- Toolbar: Search & Settings -->\n@if (isSearchEnabled() || zConfig().enableSettings) {\n  <div class=\"z-table-toolbar mb-2 flex items-center justify-between gap-4\">\n    <!-- Search -->\n    @if (isSearchEnabled()) {\n      @let config = searchConfig();\n      <z-input\n        [class]=\"config?.width ?? 'w-64'\"\n        [zSize]=\"config?.size ?? 'sm'\"\n        [zPlaceholder]=\"config?.placeholder ?? 'i18n_z_ui_table_search' | translate\"\n        [zSearch]=\"true\"\n        [zDebounce]=\"config?.debounceTime ?? 300\"\n        (zOnSearch)=\"onSearchChange($event)\" />\n    } @else {\n      <div></div>\n    }\n\n    <!-- Settings Button -->\n    @if (zConfig().enableSettings) {\n      <z-button zType=\"outline\" zSize=\"sm\" zTypeIcon=\"lucideSettings\" (click)=\"openSettingsDrawer()\">\n        {{ 'i18n_z_ui_table_settings' | translate }}\n      </z-button>\n    }\n  </div>\n}\n\n<div\n  [class]=\"classTable()\"\n  [class.z-hide-horizontal-border]=\"!showHorizontalBorder()\"\n  [class.z-hide-vertical-border]=\"!showVerticalBorder()\"\n  [style.max-height]=\"zConfig().maxHeight\"\n  [style.min-height]=\"zConfig().minHeight\">\n  <!-- Shared colgroup template -->\n  <ng-template #colGroupTpl>\n    <colgroup>\n      @if (canUseVirtualColumns()) {\n        @for (column of leftLeafColumns(); track column.id) {\n          @let customWidth = column.id | zTableColumnConfig: zConfig().columns : 'width';\n          <col [style.width]=\"customWidth || 'calc(var(--col-' + column.id + '-size) * 1px)'\" />\n        }\n        @if (virtualLeftSpacerWidth() > 0) {\n          <col [style.width.px]=\"virtualLeftSpacerWidth()\" />\n        }\n        @for (column of virtualCenterColumns(); track column.id) {\n          @let customWidth = column.id | zTableColumnConfig: zConfig().columns : 'width';\n          <col [style.width]=\"customWidth || 'calc(var(--col-' + column.id + '-size) * 1px)'\" />\n        }\n        @if (virtualRightSpacerWidth() > 0) {\n          <col [style.width.px]=\"virtualRightSpacerWidth()\" />\n        }\n        @for (column of rightLeafColumns(); track column.id) {\n          @let customWidth = column.id | zTableColumnConfig: zConfig().columns : 'width';\n          <col [style.width]=\"customWidth || 'calc(var(--col-' + column.id + '-size) * 1px)'\" />\n        }\n      } @else {\n        @for (column of orderedLeafColumns(); track column.id) {\n          @if (column.getIsVisible()) {\n            @let customWidth = column.id | zTableColumnConfig: zConfig().columns : 'width';\n            <col [style.width]=\"customWidth || 'calc(var(--col-' + column.id + '-size) * 1px)'\" />\n          }\n        }\n      }\n    </colgroup>\n  </ng-template>\n\n  <!-- Header table -->\n  <div\n    class=\"z-thead-wrapper shadow-card\"\n    [class.z-shadow-header]=\"shouldHeaderShowShadow()\"\n    [class.z-scroll-left]=\"hasScrollLeft()\"\n    [class.z-scroll-right]=\"hasScrollRight()\"\n    #theadWrapper>\n    <table [ngStyle]=\"columnSizeVars()\" [style.width.px]=\"table.getTotalSize()\">\n      <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n      <thead>\n        @if (canUseVirtualColumns()) {\n          <tr>\n            @for (header of leftHeaderRow(); track header.id) {\n              @let rowSpan = header | zTableSpan: zConfig().columns : 'headerRowSpan';\n              @let shouldRender = header | zTableCellRender: leftHeaderRow() : zConfig().columns : 'header';\n              @if (rowSpan && shouldRender) {\n                <th\n                  [attr.id]=\"header.column.id\"\n                  [ngStyle]=\"\n                    header.column\n                      | zTablePinningStyles: header : 'header' : table : zConfig().columns : columnSizingInfo()\n                  \"\n                  [class]=\"\n                    (header.column.id | zTableColumnConfig: zConfig().columns : 'headerClass') +\n                    ' ' +\n                    (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass')\n                  \"\n                  [style]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerStyle'\"\n                  [class.z-sticky-left]=\"header.column.getIsPinned() === 'left'\"\n                  [class.z-sticky-right]=\"header.column.getIsPinned() === 'right'\"\n                  [class.z-sticky-left-last]=\"header | zTableCellPin: 'isLastLeftPinned' : zConfig().columns\"\n                  [class.z-sticky-right-first]=\"header | zTableCellPin: 'isFirstRightPinned' : zConfig().columns\"\n                  [class.z-sticky-right-last]=\"header | zTableCellPin: 'isLastRightPinned' : zConfig().columns\"\n                  [class.z-at-left-edge]=\"header | zTableCellOffset: orderedLeafColumns()\"\n                  [class.z-col-drag]=\"header.column.id === 'rowDrag'\"\n                  [class.z-col-select]=\"header.column.id === 'select'\"\n                  [class.z-col-expand]=\"header.column.id === 'expand'\"\n                  [class.z-col-actions]=\"\n                    header.column.id === 'actions' || header.column.id === actionColumnInfo()?.columnId\n                  \"\n                  [attr.rowspan]=\"rowSpan\"\n                  [attr.colspan]=\"header | zTableSpan: zConfig().columns : 'headerColSpan'\">\n                  @if (header.column.id === 'rowDrag') {\n                    <div class=\"flex items-center justify-center\">\n                      <z-icon zType=\"lucideGripVertical\" zSize=\"14\" class=\"text-muted-foreground opacity-70\" />\n                    </div>\n                  } @else if (header.column.id === 'select') {\n                    <div class=\"flex items-center justify-center\">\n                      <z-checkbox\n                        [zChecked]=\"table.getIsAllRowsSelected()\"\n                        [zIndeterminate]=\"table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()\"\n                        (zChange)=\"table.toggleAllRowsSelected()\" />\n                    </div>\n                  } @else if (header.column.id === 'expand') {\n                    <div class=\"flex items-center justify-center\">\n                      <button\n                        type=\"button\"\n                        (click)=\"table.toggleAllRowsExpanded()\"\n                        class=\"hover:bg-muted flex h-6 w-6 cursor-pointer items-center justify-center rounded\">\n                        <z-icon\n                          zType=\"lucideChevronRight\"\n                          zSize=\"14\"\n                          class=\"transition-transform duration-200\"\n                          [class.rotate-90]=\"table.getIsSomeRowsExpanded()\" />\n                      </button>\n                    </div>\n                  } @else {\n                    <div\n                      class=\"flex w-full items-center gap-1\"\n                      [class.justify-center]=\"\n                        (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') ===\n                        'text-center'\n                      \"\n                      [class.justify-end]=\"\n                        (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') === 'text-right'\n                      \">\n                      @let columnEnableOrdering =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enableOrdering';\n                      @let columnEnablePinning =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enablePinning';\n                      @let effectiveEnableOrdering = columnEnableOrdering || zConfig().enableColumnOrdering;\n                      @let effectiveEnablePinning = columnEnablePinning || zConfig().enableColumnPinning;\n                      <ng-template #colOptionsPopoverContent>\n                        <div class=\"flex flex-col gap-0.5 p-0.5\">\n                          @if (effectiveEnableOrdering) {\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isFirstMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (click)=\"moveColumnLeft(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowLeft\" zSize=\"12\" />\n                              <span>{{ 'i18n_z_ui_table_move_left' | translate }}</span>\n                            </button>\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isLastMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (click)=\"moveColumnRight(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowRight\" zSize=\"12\" />\n                              <span>{{ 'i18n_z_ui_table_move_right' | translate }}</span>\n                            </button>\n                          }\n                          @if (effectiveEnableOrdering && header.column.getCanPin() && effectiveEnablePinning) {\n                            <div class=\"border-border my-0.5 border-t\"></div>\n                          }\n                          @if (header.column.getCanPin() && effectiveEnablePinning) {\n                            @if (header.column.getIsPinned() !== 'left') {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, 'left'); colOptionsPopover.hideImmediate()\"\n                                class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                <z-icon zType=\"lucidePin\" zSize=\"12\" class=\"rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_left' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned() !== 'right') {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, 'right'); colOptionsPopover.hideImmediate()\"\n                                class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                <z-icon zType=\"lucidePin\" zSize=\"12\" class=\"-rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_right' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned()) {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, false); colOptionsPopover.hideImmediate()\"\n                                class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                              </button>\n                            }\n                          }\n                        </div>\n                      </ng-template>\n\n                      @let hasColumnOptions =\n                        (header.column.getCanPin() && effectiveEnablePinning) || effectiveEnableOrdering;\n                      <div\n                        class=\"z-header-text-wrapper inline-flex max-w-full items-center gap-1 rounded px-1.5 py-1\"\n                        [class.cursor-pointer]=\"hasColumnOptions\"\n                        [class.z-has-options]=\"hasColumnOptions\"\n                        [attr.z-popover]=\"hasColumnOptions ? '' : null\"\n                        #colOptionsPopover=\"zPopover\"\n                        #headerTextWrapper\n                        z-popover\n                        [zPopoverContent]=\"hasColumnOptions ? colOptionsPopoverContent : null\"\n                        zTrigger=\"click\"\n                        zPosition=\"bottom\"\n                        [zOffset]=\"5\">\n                        <ng-container\n                          *flexRender=\"header.column.columnDef.header; props: header.getContext(); let headerContent\">\n                          @if (headerContent | zTableIsTemplateRef) {\n                            <div\n                              class=\"z-template-content\"\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \">\n                              <ng-container\n                                *ngTemplateOutlet=\"headerContent; context: { $implicit: header.getContext() }\" />\n                            </div>\n                          } @else if (headerContent | zTableHasIcon) {\n                            <z-table-icon-text\n                              class=\"min-w-0 truncate\"\n                              [zText]=\"headerContent\"\n                              [zTooltip]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerTooltip'\"\n                              [zTriggerElement]=\"headerTextWrapper\"\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \" />\n                          } @else {\n                            <span\n                              class=\"z-table-cell-text\"\n                              z-tooltip\n                              [zContent]=\"\n                                (header.column.id | zTableColumnConfig: zConfig().columns : 'headerTooltip') ||\n                                headerContent\n                              \"\n                              [zTriggerElement]=\"headerTextWrapper\"\n                              [innerHTML]=\"headerContent | translate | zSafeHtml\"\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \"></span>\n                          }\n                        </ng-container>\n                        @if (hasColumnOptions) {\n                          <z-icon zType=\"lucideChevronDown\" zSize=\"15\" class=\"text-muted-foreground shrink-0\" />\n                        }\n                      </div>\n                      @if (header.column.getCanSort() && !hasBodyRowSpan()) {\n                        <span\n                          class=\"z-sort-icon shrink-0 cursor-pointer text-gray-500 hover:text-gray-700\"\n                          (click)=\"handleSort($event, header.column.getToggleSortingHandler())\">\n                          @if (header.column.getIsSorted() === 'asc') {\n                            <z-icon zType=\"lucideArrowUp\" zSize=\"15\" />\n                          } @else if (header.column.getIsSorted() === 'desc') {\n                            <z-icon zType=\"lucideArrowDown\" zSize=\"15\" />\n                          } @else {\n                            <z-icon zType=\"lucideArrowDownUp\" zSize=\"15\" class=\"opacity-60\" />\n                          }\n                        </span>\n                      }\n                    </div>\n                  }\n                  @if (header.column.getCanFilter() && hasFiltering()) {\n                    <div class=\"mt-1\">\n                      <z-table-filter [zColumn]=\"$any(header.column)\" [zTable]=\"$any(table)\" />\n                    </div>\n                  }\n                  @if (\n                    header.column.id !== 'rowDrag' &&\n                    header.column.id !== 'select' &&\n                    header.column.id !== 'expand' &&\n                    zConfig().enableColumnResizing !== false\n                  ) {\n                    <div\n                      class=\"z-resizer\"\n                      [class.z-is-resizing]=\"header.column.getIsResizing()\"\n                      [class.z-resizer-left]=\"\n                        header.column.getIsPinned() === 'right' || header.column.getIsLastColumn()\n                      \"\n                      (dblclick)=\"header.column.resetSize()\"\n                      [zTableResize]=\"header\"></div>\n                  }\n                </th>\n              }\n            }\n            @if (virtualLeftSpacerWidth() > 0) {\n              <th class=\"pointer-events-none border-0 p-0\" [style.width.px]=\"virtualLeftSpacerWidth()\"></th>\n            }\n            @for (header of virtualCenterHeaderRow(); track header.id) {\n              @let rowSpan = header | zTableSpan: zConfig().columns : 'headerRowSpan';\n              @let shouldRender = header | zTableCellRender: virtualCenterHeaderRow() : zConfig().columns : 'header';\n              @if (rowSpan && shouldRender) {\n                <th\n                  [attr.id]=\"header.column.id\"\n                  [class]=\"\n                    (header.column.id | zTableColumnConfig: zConfig().columns : 'headerClass') +\n                    ' ' +\n                    (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass')\n                  \"\n                  [style]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerStyle'\"\n                  [class.z-col-drag]=\"header.column.id === 'rowDrag'\"\n                  [class.z-col-select]=\"header.column.id === 'select'\"\n                  [class.z-col-expand]=\"header.column.id === 'expand'\"\n                  [class.z-col-actions]=\"\n                    header.column.id === 'actions' || header.column.id === actionColumnInfo()?.columnId\n                  \"\n                  [attr.rowspan]=\"rowSpan\"\n                  [attr.colspan]=\"header | zTableSpan: zConfig().columns : 'headerColSpan'\">\n                  @if (header.column.id === 'rowDrag') {\n                    <div class=\"flex items-center justify-center\">\n                      <z-icon zType=\"lucideGripVertical\" zSize=\"14\" class=\"text-muted-foreground opacity-70\" />\n                    </div>\n                  } @else if (header.column.id === 'select') {\n                    <div class=\"flex items-center justify-center\">\n                      <z-checkbox\n                        [zChecked]=\"table.getIsAllRowsSelected()\"\n                        [zIndeterminate]=\"table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()\"\n                        (zChange)=\"table.toggleAllRowsSelected()\" />\n                    </div>\n                  } @else if (header.column.id === 'expand') {\n                    <div class=\"flex items-center justify-center\">\n                      <button\n                        type=\"button\"\n                        (click)=\"table.toggleAllRowsExpanded()\"\n                        class=\"hover:bg-muted flex h-6 w-6 cursor-pointer items-center justify-center rounded\">\n                        <z-icon\n                          zType=\"lucideChevronRight\"\n                          zSize=\"14\"\n                          class=\"transition-transform duration-200\"\n                          [class.rotate-90]=\"table.getIsSomeRowsExpanded()\" />\n                      </button>\n                    </div>\n                  } @else {\n                    <div\n                      class=\"flex w-full items-center gap-1\"\n                      [class.justify-center]=\"\n                        (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') ===\n                        'text-center'\n                      \"\n                      [class.justify-end]=\"\n                        (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') === 'text-right'\n                      \">\n                      @let columnEnableOrdering =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enableOrdering';\n                      @let columnEnablePinning =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enablePinning';\n                      @let effectiveEnableOrdering = columnEnableOrdering || zConfig().enableColumnOrdering;\n                      @let effectiveEnablePinning = columnEnablePinning || zConfig().enableColumnPinning;\n                      <ng-template #colOptionsPopoverContent>\n                        <div class=\"flex flex-col gap-0.5 p-0.5\">\n                          @if (effectiveEnableOrdering) {\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isFirstMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (click)=\"moveColumnLeft(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowLeft\" zSize=\"12\" />\n                              <span>{{ 'i18n_z_ui_table_move_left' | translate }}</span>\n                            </button>\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isLastMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (click)=\"moveColumnRight(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowRight\" zSize=\"12\" />\n                              <span>{{ 'i18n_z_ui_table_move_right' | translate }}</span>\n                            </button>\n                          }\n                          @if (effectiveEnableOrdering && header.column.getCanPin() && effectiveEnablePinning) {\n                            <div class=\"border-border my-0.5 border-t\"></div>\n                          }\n                          @if (header.column.getCanPin() && effectiveEnablePinning) {\n                            @if (header.column.getIsPinned() !== 'left') {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, 'left'); colOptionsPopover.hideImmediate()\"\n                                class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                <z-icon zType=\"lucidePin\" zSize=\"12\" class=\"rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_left' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned() !== 'right') {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, 'right'); colOptionsPopover.hideImmediate()\"\n                                class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                <z-icon zType=\"lucidePin\" zSize=\"12\" class=\"-rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_right' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned()) {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, false); colOptionsPopover.hideImmediate()\"\n                                class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                              </button>\n                            }\n                          }\n                        </div>\n                      </ng-template>\n\n                      @let hasColumnOptions =\n                        (header.column.getCanPin() && effectiveEnablePinning) || effectiveEnableOrdering;\n                      <div\n                        class=\"z-header-text-wrapper inline-flex max-w-full items-center gap-1 rounded px-1.5 py-1\"\n                        [class.cursor-pointer]=\"hasColumnOptions\"\n                        [class.z-has-options]=\"hasColumnOptions\"\n                        [attr.z-popover]=\"hasColumnOptions ? '' : null\"\n                        #colOptionsPopover=\"zPopover\"\n                        #headerTextWrapper\n                        z-popover\n                        [zPopoverContent]=\"hasColumnOptions ? colOptionsPopoverContent : null\"\n                        zTrigger=\"click\"\n                        zPosition=\"bottom\"\n                        [zOffset]=\"5\">\n                        <ng-container\n                          *flexRender=\"header.column.columnDef.header; props: header.getContext(); let headerContent\">\n                          @if (headerContent | zTableIsTemplateRef) {\n                            <div\n                              class=\"z-template-content\"\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \">\n                              <ng-container\n                                *ngTemplateOutlet=\"headerContent; context: { $implicit: header.getContext() }\" />\n                            </div>\n                          } @else if (headerContent | zTableHasIcon) {\n                            <z-table-icon-text\n                              class=\"min-w-0 truncate\"\n                              [zText]=\"headerContent\"\n                              [zTooltip]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerTooltip'\"\n                              [zTriggerElement]=\"headerTextWrapper\"\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \" />\n                          } @else {\n                            <span\n                              class=\"z-table-cell-text\"\n                              z-tooltip\n                              [zContent]=\"\n                                (header.column.id | zTableColumnConfig: zConfig().columns : 'headerTooltip') ||\n                                headerContent\n                              \"\n                              [zTriggerElement]=\"headerTextWrapper\"\n                              [innerHTML]=\"headerContent | translate | zSafeHtml\"\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \"></span>\n                          }\n                        </ng-container>\n                        @if (hasColumnOptions) {\n                          <z-icon zType=\"lucideChevronDown\" zSize=\"15\" class=\"text-muted-foreground shrink-0\" />\n                        }\n                      </div>\n                      @if (header.column.getCanSort() && !hasBodyRowSpan()) {\n                        <span\n                          class=\"z-sort-icon shrink-0 cursor-pointer text-gray-500 hover:text-gray-700\"\n                          (click)=\"handleSort($event, header.column.getToggleSortingHandler())\">\n                          @if (header.column.getIsSorted() === 'asc') {\n                            <z-icon zType=\"lucideArrowUp\" zSize=\"15\" />\n                          } @else if (header.column.getIsSorted() === 'desc') {\n                            <z-icon zType=\"lucideArrowDown\" zSize=\"15\" />\n                          } @else {\n                            <z-icon zType=\"lucideArrowDownUp\" zSize=\"15\" class=\"opacity-60\" />\n                          }\n                        </span>\n                      }\n                    </div>\n                  }\n                  @if (header.column.getCanFilter() && hasFiltering()) {\n                    <div class=\"mt-1\">\n                      <z-table-filter [zColumn]=\"$any(header.column)\" [zTable]=\"$any(table)\" />\n                    </div>\n                  }\n                  @if (\n                    header.column.id !== 'rowDrag' &&\n                    header.column.id !== 'select' &&\n                    header.column.id !== 'expand' &&\n                    zConfig().enableColumnResizing !== false\n                  ) {\n                    <div\n                      class=\"z-resizer\"\n                      [class.z-is-resizing]=\"header.column.getIsResizing()\"\n                      [class.z-resizer-left]=\"\n                        header.column.getIsPinned() === 'right' || header.column.getIsLastColumn()\n                      \"\n                      (dblclick)=\"header.column.resetSize()\"\n                      [zTableResize]=\"header\"></div>\n                  }\n                </th>\n              }\n            }\n            @if (virtualRightSpacerWidth() > 0) {\n              <th class=\"pointer-events-none border-0 p-0\" [style.width.px]=\"virtualRightSpacerWidth()\"></th>\n            }\n            @for (header of rightHeaderRow(); track header.id) {\n              @let rowSpan = header | zTableSpan: zConfig().columns : 'headerRowSpan';\n              @let shouldRender = header | zTableCellRender: rightHeaderRow() : zConfig().columns : 'header';\n              @if (rowSpan && shouldRender) {\n                <th\n                  [attr.id]=\"header.column.id\"\n                  [ngStyle]=\"\n                    header.column\n                      | zTablePinningStyles: header : 'header' : table : zConfig().columns : columnSizingInfo()\n                  \"\n                  [class]=\"\n                    (header.column.id | zTableColumnConfig: zConfig().columns : 'headerClass') +\n                    ' ' +\n                    (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass')\n                  \"\n                  [style]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerStyle'\"\n                  [class.z-sticky-left]=\"header.column.getIsPinned() === 'left'\"\n                  [class.z-sticky-right]=\"header.column.getIsPinned() === 'right'\"\n                  [class.z-sticky-left-last]=\"header | zTableCellPin: 'isLastLeftPinned' : zConfig().columns\"\n                  [class.z-sticky-right-first]=\"header | zTableCellPin: 'isFirstRightPinned' : zConfig().columns\"\n                  [class.z-sticky-right-last]=\"header | zTableCellPin: 'isLastRightPinned' : zConfig().columns\"\n                  [class.z-at-left-edge]=\"header | zTableCellOffset: orderedLeafColumns()\"\n                  [class.z-col-drag]=\"header.column.id === 'rowDrag'\"\n                  [class.z-col-select]=\"header.column.id === 'select'\"\n                  [class.z-col-expand]=\"header.column.id === 'expand'\"\n                  [class.z-col-actions]=\"\n                    header.column.id === 'actions' || header.column.id === actionColumnInfo()?.columnId\n                  \"\n                  [attr.rowspan]=\"rowSpan\"\n                  [attr.colspan]=\"header | zTableSpan: zConfig().columns : 'headerColSpan'\">\n                  @if (header.column.id === 'rowDrag') {\n                    <div class=\"flex items-center justify-center\">\n                      <z-icon zType=\"lucideGripVertical\" zSize=\"14\" class=\"text-muted-foreground opacity-70\" />\n                    </div>\n                  } @else if (header.column.id === 'select') {\n                    <!-- Header Checkbox -->\n                    <div class=\"flex items-center justify-center\">\n                      <z-checkbox\n                        [zChecked]=\"table.getIsAllRowsSelected()\"\n                        [zIndeterminate]=\"table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()\"\n                        (zChange)=\"table.toggleAllRowsSelected()\" />\n                    </div>\n                  } @else if (header.column.id === 'expand') {\n                    <!-- Expand All Button -->\n                    <div class=\"flex items-center justify-center\">\n                      <button\n                        type=\"button\"\n                        (click)=\"table.toggleAllRowsExpanded()\"\n                        class=\"hover:bg-muted flex h-6 w-6 cursor-pointer items-center justify-center rounded\">\n                        <z-icon\n                          zType=\"lucideChevronRight\"\n                          zSize=\"14\"\n                          class=\"transition-transform duration-200\"\n                          [class.rotate-90]=\"table.getIsSomeRowsExpanded()\" />\n                      </button>\n                    </div>\n                  } @else {\n                    <!-- Header Content with Sort and Pin -->\n                    <div\n                      class=\"flex w-full items-center gap-1\"\n                      [class.justify-center]=\"\n                        (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') ===\n                        'text-center'\n                      \"\n                      [class.justify-end]=\"\n                        (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') === 'text-right'\n                      \">\n                      <!-- Column Options Popover Template -->\n                      @let columnEnableOrdering =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enableOrdering';\n                      @let columnEnablePinning =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enablePinning';\n                      @let effectiveEnableOrdering = columnEnableOrdering || zConfig().enableColumnOrdering;\n                      @let effectiveEnablePinning = columnEnablePinning || zConfig().enableColumnPinning;\n                      <ng-template #colOptionsPopoverContent>\n                        <div class=\"flex flex-col gap-0.5 p-0.5\">\n                          @if (effectiveEnableOrdering) {\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isFirstMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (click)=\"moveColumnLeft(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowLeft\" zSize=\"12\" />\n                              <span>{{ 'i18n_z_ui_table_move_left' | translate }}</span>\n                            </button>\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isLastMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (click)=\"moveColumnRight(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowRight\" zSize=\"12\" />\n                              <span>{{ 'i18n_z_ui_table_move_right' | translate }}</span>\n                            </button>\n                          }\n                          @if (effectiveEnableOrdering && header.column.getCanPin() && effectiveEnablePinning) {\n                            <div class=\"border-border my-0.5 border-t\"></div>\n                          }\n                          @if (header.column.getCanPin() && effectiveEnablePinning) {\n                            @if (header.column.getIsPinned() !== 'left') {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, 'left'); colOptionsPopover.hideImmediate()\"\n                                class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                <z-icon zType=\"lucidePin\" zSize=\"12\" class=\"rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_left' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned() !== 'right') {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, 'right'); colOptionsPopover.hideImmediate()\"\n                                class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                <z-icon zType=\"lucidePin\" zSize=\"12\" class=\"-rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_right' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned()) {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, false); colOptionsPopover.hideImmediate()\"\n                                class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                              </button>\n                            }\n                          }\n                        </div>\n                      </ng-template>\n\n                      <!-- Header Text with Popover Trigger -->\n                      @let hasColumnOptions =\n                        (header.column.getCanPin() && effectiveEnablePinning) || effectiveEnableOrdering;\n                      <div\n                        class=\"z-header-text-wrapper inline-flex max-w-full items-center gap-1 rounded px-1.5 py-1\"\n                        [class.cursor-pointer]=\"hasColumnOptions\"\n                        [class.z-has-options]=\"hasColumnOptions\"\n                        [attr.z-popover]=\"hasColumnOptions ? '' : null\"\n                        #colOptionsPopover=\"zPopover\"\n                        #headerTextWrapper\n                        z-popover\n                        [zPopoverContent]=\"hasColumnOptions ? colOptionsPopoverContent : null\"\n                        zTrigger=\"click\"\n                        zPosition=\"bottom\"\n                        [zOffset]=\"5\">\n                        <ng-container\n                          *flexRender=\"header.column.columnDef.header; props: header.getContext(); let headerContent\">\n                          @if (headerContent | zTableIsTemplateRef) {\n                            <div\n                              class=\"z-template-content\"\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \">\n                              <ng-container\n                                *ngTemplateOutlet=\"headerContent; context: { $implicit: header.getContext() }\" />\n                            </div>\n                          } @else if (headerContent | zTableHasIcon) {\n                            <z-table-icon-text\n                              class=\"min-w-0 truncate\"\n                              [zText]=\"headerContent\"\n                              [zTooltip]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerTooltip'\"\n                              [zTriggerElement]=\"headerTextWrapper\"\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \" />\n                          } @else {\n                            <span\n                              class=\"z-table-cell-text\"\n                              z-tooltip\n                              [zContent]=\"\n                                (header.column.id | zTableColumnConfig: zConfig().columns : 'headerTooltip') ||\n                                headerContent\n                              \"\n                              [zTriggerElement]=\"headerTextWrapper\"\n                              [innerHTML]=\"headerContent | translate | zSafeHtml\"\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \"></span>\n                          }\n                        </ng-container>\n                        <!-- Dropdown indicator when has options (between text and sort icon) -->\n                        @if (hasColumnOptions) {\n                          <z-icon zType=\"lucideChevronDown\" zSize=\"15\" class=\"text-muted-foreground shrink-0\" />\n                        }\n                      </div>\n                      <!-- Sort Icon (outside wrapper, no hover background) -->\n                      @if (header.column.getCanSort() && !hasBodyRowSpan()) {\n                        <span\n                          class=\"z-sort-icon shrink-0 cursor-pointer text-gray-500 hover:text-gray-700\"\n                          (click)=\"handleSort($event, header.column.getToggleSortingHandler())\">\n                          @if (header.column.getIsSorted() === 'asc') {\n                            <z-icon zType=\"lucideArrowUp\" zSize=\"15\" />\n                          } @else if (header.column.getIsSorted() === 'desc') {\n                            <z-icon zType=\"lucideArrowDown\" zSize=\"15\" />\n                          } @else {\n                            <z-icon zType=\"lucideArrowDownUp\" zSize=\"15\" class=\"opacity-60\" />\n                          }\n                        </span>\n                      }\n                    </div>\n                  }\n                  <!-- Column Filter -->\n                  @if (header.column.getCanFilter() && hasFiltering()) {\n                    <div class=\"mt-1\">\n                      <z-table-filter [zColumn]=\"$any(header.column)\" [zTable]=\"$any(table)\" />\n                    </div>\n                  }\n                  <!-- Column Resizer -->\n                  @if (\n                    header.column.id !== 'rowDrag' &&\n                    header.column.id !== 'select' &&\n                    header.column.id !== 'expand' &&\n                    zConfig().enableColumnResizing !== false\n                  ) {\n                    <div\n                      class=\"z-resizer\"\n                      [class.z-is-resizing]=\"header.column.getIsResizing()\"\n                      [class.z-resizer-left]=\"\n                        header.column.getIsPinned() === 'right' || header.column.getIsLastColumn()\n                      \"\n                      (dblclick)=\"header.column.resetSize()\"\n                      [zTableResize]=\"header\"></div>\n                  }\n                </th>\n              }\n            }\n          </tr>\n        } @else {\n          @for (headerGroup of orderedHeaderGroups(); track headerGroup.id) {\n            <tr>\n              @for (header of headerGroup.headers; track header.id) {\n                @let rowSpan = header | zTableSpan: zConfig().columns : 'headerRowSpan';\n                @let shouldRender = header | zTableCellRender: headerGroup.headers : zConfig().columns : 'header';\n                @if (rowSpan && shouldRender) {\n                  <th\n                    [attr.id]=\"header.column.id\"\n                    [ngStyle]=\"\n                      header.column\n                        | zTablePinningStyles: header : 'header' : table : zConfig().columns : columnSizingInfo()\n                    \"\n                    [class]=\"\n                      (header.column.id | zTableColumnConfig: zConfig().columns : 'headerClass') +\n                      ' ' +\n                      (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass')\n                    \"\n                    [style]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerStyle'\"\n                    [class.z-sticky-left]=\"header.column.getIsPinned() === 'left'\"\n                    [class.z-sticky-right]=\"header.column.getIsPinned() === 'right'\"\n                    [class.z-sticky-left-last]=\"header | zTableCellPin: 'isLastLeftPinned' : zConfig().columns\"\n                    [class.z-sticky-right-first]=\"header | zTableCellPin: 'isFirstRightPinned' : zConfig().columns\"\n                    [class.z-sticky-right-last]=\"header | zTableCellPin: 'isLastRightPinned' : zConfig().columns\"\n                    [class.z-at-left-edge]=\"header | zTableCellOffset: orderedLeafColumns()\"\n                    [class.z-col-drag]=\"header.column.id === 'rowDrag'\"\n                    [class.z-col-select]=\"header.column.id === 'select'\"\n                    [class.z-col-expand]=\"header.column.id === 'expand'\"\n                    [class.z-col-actions]=\"\n                      header.column.id === 'actions' || header.column.id === actionColumnInfo()?.columnId\n                    \"\n                    [attr.rowspan]=\"rowSpan\"\n                    [attr.colspan]=\"header | zTableSpan: zConfig().columns : 'headerColSpan'\">\n                    @if (header.column.id === 'rowDrag') {\n                      <div class=\"flex items-center justify-center\">\n                        <z-icon zType=\"lucideGripVertical\" zSize=\"14\" class=\"text-muted-foreground opacity-70\" />\n                      </div>\n                    } @else if (header.column.id === 'select') {\n                      <div class=\"flex items-center justify-center\">\n                        <z-checkbox\n                          [zChecked]=\"table.getIsAllRowsSelected()\"\n                          [zIndeterminate]=\"table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()\"\n                          (zChange)=\"table.toggleAllRowsSelected()\" />\n                      </div>\n                    } @else if (header.column.id === 'expand') {\n                      <div class=\"flex items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          (click)=\"table.toggleAllRowsExpanded()\"\n                          class=\"hover:bg-muted flex h-6 w-6 cursor-pointer items-center justify-center rounded\">\n                          <z-icon\n                            zType=\"lucideChevronRight\"\n                            zSize=\"14\"\n                            class=\"transition-transform duration-200\"\n                            [class.rotate-90]=\"table.getIsSomeRowsExpanded()\" />\n                        </button>\n                      </div>\n                    } @else {\n                      <div\n                        class=\"flex w-full items-center gap-1\"\n                        [class.justify-center]=\"\n                          (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') ===\n                          'text-center'\n                        \"\n                        [class.justify-end]=\"\n                          (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') ===\n                          'text-right'\n                        \">\n                        @let columnEnableOrdering =\n                          header.column.id | zTableColumnConfig: zConfig().columns : 'enableOrdering';\n                        @let columnEnablePinning =\n                          header.column.id | zTableColumnConfig: zConfig().columns : 'enablePinning';\n                        @let effectiveEnableOrdering = columnEnableOrdering || zConfig().enableColumnOrdering;\n                        @let effectiveEnablePinning = columnEnablePinning || zConfig().enableColumnPinning;\n                        <ng-template #colOptionsPopoverContent>\n                          <div class=\"flex flex-col gap-0.5 p-0.5\">\n                            @if (effectiveEnableOrdering) {\n                              <button\n                                type=\"button\"\n                                [disabled]=\"isFirstMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                                (click)=\"moveColumnLeft(header.column.id); colOptionsPopover.hideImmediate()\"\n                                class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs disabled:pointer-events-none disabled:opacity-40\">\n                                <z-icon zType=\"lucideArrowLeft\" zSize=\"12\" />\n                                <span>{{ 'i18n_z_ui_table_move_left' | translate }}</span>\n                              </button>\n                              <button\n                                type=\"button\"\n                                [disabled]=\"isLastMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                                (click)=\"moveColumnRight(header.column.id); colOptionsPopover.hideImmediate()\"\n                                class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs disabled:pointer-events-none disabled:opacity-40\">\n                                <z-icon zType=\"lucideArrowRight\" zSize=\"12\" />\n                                <span>{{ 'i18n_z_ui_table_move_right' | translate }}</span>\n                              </button>\n                            }\n                            @if (effectiveEnableOrdering && header.column.getCanPin() && effectiveEnablePinning) {\n                              <div class=\"border-border my-0.5 border-t\"></div>\n                            }\n                            @if (header.column.getCanPin() && effectiveEnablePinning) {\n                              @if (header.column.getIsPinned() !== 'left') {\n                                <button\n                                  type=\"button\"\n                                  (click)=\"handleColumnPin(header.column.id, 'left'); colOptionsPopover.hideImmediate()\"\n                                  class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                  <z-icon zType=\"lucidePin\" zSize=\"12\" class=\"rotate-90\" />\n                                  <span>{{ 'i18n_z_ui_table_pin_left' | translate }}</span>\n                                </button>\n                              }\n                              @if (header.column.getIsPinned() !== 'right') {\n                                <button\n                                  type=\"button\"\n                                  (click)=\"\n                                    handleColumnPin(header.column.id, 'right'); colOptionsPopover.hideImmediate()\n                                  \"\n                                  class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                  <z-icon zType=\"lucidePin\" zSize=\"12\" class=\"-rotate-90\" />\n                                  <span>{{ 'i18n_z_ui_table_pin_right' | translate }}</span>\n                                </button>\n                              }\n                              @if (header.column.getIsPinned()) {\n                                <button\n                                  type=\"button\"\n                                  (click)=\"handleColumnPin(header.column.id, false); colOptionsPopover.hideImmediate()\"\n                                  class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                  <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                  <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                                </button>\n                              }\n                            }\n                          </div>\n                        </ng-template>\n\n                        @let hasColumnOptions =\n                          (header.column.getCanPin() && effectiveEnablePinning) || effectiveEnableOrdering;\n                        <div\n                          class=\"z-header-text-wrapper inline-flex max-w-full items-center gap-1 rounded px-1.5 py-1\"\n                          [class.cursor-pointer]=\"hasColumnOptions\"\n                          [class.z-has-options]=\"hasColumnOptions\"\n                          [attr.z-popover]=\"hasColumnOptions ? '' : null\"\n                          #colOptionsPopover=\"zPopover\"\n                          #headerTextWrapper\n                          z-popover\n                          [zPopoverContent]=\"hasColumnOptions ? colOptionsPopoverContent : null\"\n                          zTrigger=\"click\"\n                          zPosition=\"bottom\"\n                          [zOffset]=\"5\">\n                          <ng-container\n                            *flexRender=\"header.column.columnDef.header; props: header.getContext(); let headerContent\">\n                            @if (headerContent | zTableIsTemplateRef) {\n                              <div\n                                class=\"z-template-content\"\n                                [ngClass]=\"\n                                  header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                                \"\n                                [ngStyle]=\"\n                                  header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                                \">\n                                <ng-container\n                                  *ngTemplateOutlet=\"headerContent; context: { $implicit: header.getContext() }\" />\n                              </div>\n                            } @else if (headerContent | zTableHasIcon) {\n                              <z-table-icon-text\n                                class=\"min-w-0 truncate\"\n                                [zText]=\"headerContent\"\n                                [zTooltip]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerTooltip'\"\n                                [zTriggerElement]=\"headerTextWrapper\"\n                                [ngClass]=\"\n                                  header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                                \"\n                                [ngStyle]=\"\n                                  header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                                \" />\n                            } @else {\n                              <span\n                                class=\"z-table-cell-text\"\n                                z-tooltip\n                                [zContent]=\"\n                                  (header.column.id | zTableColumnConfig: zConfig().columns : 'headerTooltip') ||\n                                  headerContent\n                                \"\n                                [zTriggerElement]=\"headerTextWrapper\"\n                                [innerHTML]=\"headerContent | translate | zSafeHtml\"\n                                [ngClass]=\"\n                                  header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                                \"\n                                [ngStyle]=\"\n                                  header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                                \"></span>\n                            }\n                          </ng-container>\n                          @if (hasColumnOptions) {\n                            <z-icon zType=\"lucideChevronDown\" zSize=\"15\" class=\"text-muted-foreground shrink-0\" />\n                          }\n                        </div>\n                        @if (header.column.getCanSort() && !hasBodyRowSpan()) {\n                          <span\n                            class=\"z-sort-icon shrink-0 cursor-pointer text-gray-500 hover:text-gray-700\"\n                            (click)=\"handleSort($event, header.column.getToggleSortingHandler())\">\n                            @if (header.column.getIsSorted() === 'asc') {\n                              <z-icon zType=\"lucideArrowUp\" zSize=\"15\" />\n                            } @else if (header.column.getIsSorted() === 'desc') {\n                              <z-icon zType=\"lucideArrowDown\" zSize=\"15\" />\n                            } @else {\n                              <z-icon zType=\"lucideArrowDownUp\" zSize=\"15\" class=\"opacity-60\" />\n                            }\n                          </span>\n                        }\n                      </div>\n                    }\n                    @if (header.column.getCanFilter() && hasFiltering()) {\n                      <div class=\"mt-1\">\n                        <z-table-filter [zColumn]=\"$any(header.column)\" [zTable]=\"$any(table)\" />\n                      </div>\n                    }\n                    @if (\n                      header.column.id !== 'rowDrag' &&\n                      header.column.id !== 'select' &&\n                      header.column.id !== 'expand' &&\n                      zConfig().enableColumnResizing !== false\n                    ) {\n                      <div\n                        class=\"z-resizer\"\n                        [class.z-is-resizing]=\"header.column.getIsResizing()\"\n                        [class.z-resizer-left]=\"\n                          header.column.getIsPinned() === 'right' || header.column.getIsLastColumn()\n                        \"\n                        (dblclick)=\"header.column.resetSize()\"\n                        [zTableResize]=\"header\"></div>\n                    }\n                  </th>\n                }\n              }\n            </tr>\n          }\n        }\n      </thead>\n    </table>\n  </div>\n\n  <!-- Body table -->\n  <div\n    class=\"z-tbody-wrapper relative\"\n    #tbodyContainer\n    [class.z-scroll-left]=\"hasScrollLeft()\"\n    [class.z-scroll-right]=\"hasScrollRight()\">\n    @if (isLoading() || isProcessing()) {\n      <!-- Loading State -->\n      @if (zConfig().useSkeleton) {\n        <!-- Skeleton Loading -->\n        <div class=\"animate-in fade-in flex h-full flex-col duration-200\">\n          @for (i of skeletonRows(); track $index; let last = $last) {\n            <div\n              class=\"border-border box-border flex flex-1 flex-col items-start justify-center gap-1.5 px-2\"\n              [class.border-b]=\"!last\">\n              <z-skeleton zType=\"bar\" zWidth=\"100%\" zHeight=\"22px\" zRadius=\"4px\" />\n              <z-skeleton zType=\"bar\" zWidth=\"50%\" zHeight=\"14px\" zRadius=\"4px\" />\n            </div>\n          }\n        </div>\n      } @else {\n        <!-- Spinner Loading -->\n        <div class=\"z-loading-state\">\n          <z-loading [zLoading]=\"true\" zSize=\"lg\" [zText]=\"'i18n_z_ui_table_loading' | translate\" />\n        </div>\n      }\n    } @else if (isEmpty()) {\n      <div class=\"z-empty-state\">\n        @if (isNoSearchResults()) {\n          <z-empty zIcon=\"lucideSearchX\" zSize=\"sm\" [zMessage]=\"'i18n_z_ui_table_no_results' | translate\" />\n        } @else {\n          <z-empty zIcon=\"lucidePackageOpen\" zSize=\"sm\" [zMessage]=\"'i18n_z_ui_table_no_data' | translate\" />\n        }\n      </div>\n    } @else {\n      <ng-scrollbar class=\"z-tbody-scrollbar\" #tbodyWrapper track=\"all\" cdkScrollable (scroll)=\"onTbodyScroll($event)\">\n        @if (isVirtual()) {\n          <!-- Virtual Scroll Mode -->\n          <div\n            class=\"z-virtual-scroll-inner\"\n            cdkDropList\n            [cdkDropListData]=\"table.getRowModel().rows\"\n            [cdkDropListDisabled]=\"!isVirtualRowDragEnabled()\"\n            cdkDropListOrientation=\"vertical\"\n            [cdkDropListAutoScrollStep]=\"20\"\n            (cdkDropListDropped)=\"onRowDrop($event)\"\n            [style.height.px]=\"virtualizer.getTotalSize()\"\n            [style.min-width.px]=\"table.getTotalSize()\">\n            @for (virtualItem of virtualizer.getVirtualItems(); track virtualItem.index) {\n              @let groupRows = dynamicGroupRows()[virtualItem.index] || [];\n              <div\n                #virtualRow\n                class=\"z-virtual-row\"\n                cdkDrag\n                cdkDragLockAxis=\"y\"\n                cdkDragPreviewClass=\"z-table-row-drag-preview\"\n                cdkDragPlaceholderClass=\"z-table-row-drag-placeholder\"\n                [cdkDragData]=\"groupRows[0]\"\n                [cdkDragDisabled]=\"!isVirtualRowDragEnabled() || groupRows.length !== 1\"\n                (cdkDragStarted)=\"onRowDragStarted()\"\n                (cdkDragEnded)=\"onRowDragEnded($event)\"\n                [attr.data-index]=\"virtualItem.index\"\n                [style.height.px]=\"\n                  dynamicSize() ? null : (dynamicGroupHeights()[virtualItem.index] ?? groupSize() * virtualRowHeight())\n                \"\n                [style.transform]=\"'translate3d(0,' + virtualItem.start + 'px,0)'\">\n                <ng-template cdkDragPreview>\n                  @if (groupRows[0]; as previewRow) {\n                    <div class=\"z-table-row-drag-preview\" [style.width.px]=\"table.getTotalSize()\">\n                      @for (cell of previewRow.getVisibleCells(); track cell.id) {\n                        @let isPreviewCellVisible = cell | zTableCellVisible: zConfig().columns;\n                        @let shouldRenderPreviewColSpan =\n                          cell | zTableCellRender: previewRow.getVisibleCells() : zConfig().columns : 'body';\n                        @if (isPreviewCellVisible && shouldRenderPreviewColSpan) {\n                          <div\n                            class=\"z-table-row-drag-preview-cell\"\n                            [style.width.px]=\"cell.column.getSize()\"\n                            [class.z-table-row-drag-preview-handle]=\"cell.column.id === 'rowDrag'\">\n                            @if (cell.column.id === 'rowDrag') {\n                              <z-icon zType=\"lucideGripVertical\" zSize=\"14\" class=\"text-muted-foreground\" />\n                            } @else {\n                              <span class=\"truncate\">{{ cell.getValue() ?? '' }}</span>\n                            }\n                          </div>\n                        }\n                      }\n                    </div>\n                  }\n                </ng-template>\n\n                <ng-template cdkDragPlaceholder>\n                  <div class=\"z-table-row-drag-placeholder-inner\" [style.height.px]=\"virtualItem.size\"></div>\n                </ng-template>\n\n                <table [ngStyle]=\"columnSizeVars()\" [style.width.px]=\"table.getTotalSize()\">\n                  <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n                  <tbody\n                    [class.z-has-vertical-scroll]=\"hasVerticalScroll()\"\n                    [class.z-last-row-touches-bottom]=\"lastRowTouchesBottom()\">\n                    @for (row of groupRows; track row.id) {\n                      <tr\n                        z-table-row-hover\n                        [style.height.px]=\"dynamicSize() ? null : virtualRowHeight()\"\n                        [style.min-height.px]=\"dynamicSize() ? virtualRowHeight() : null\"\n                        [class.z-child-row]=\"row.depth > 0\"\n                        [class.z-selected]=\"row.getIsSelected()\"\n                        [class.z-indeterminate-selected]=\"row.getIsSomeSelected() && !row.getIsSelected()\">\n                        @for (cell of row.getVisibleCells(); track cell.id) {\n                          @if (\n                            canUseVirtualColumns() &&\n                            virtualLeftSpacerWidth() > 0 &&\n                            cell.column.id === firstVirtualCenterColumnId()\n                          ) {\n                            <td\n                              class=\"pointer-events-none border-0 p-0\"\n                              [style.width.px]=\"virtualLeftSpacerWidth()\"></td>\n                          }\n                          @let shouldRenderRowSpan =\n                            cell | zTableSpan: zConfig().columns : 'shouldRender' : table.getRowModel().rows;\n                          @let shouldRenderColSpan =\n                            cell | zTableCellRender: row.getVisibleCells() : zConfig().columns : 'body';\n                          @let isVirtualColumnVisible =\n                            !canUseVirtualColumns() ||\n                            cell.column.getIsPinned() !== false ||\n                            virtualCenterColumnVisibilityMap()[cell.column.id];\n                          @if (shouldRenderRowSpan && shouldRenderColSpan && isVirtualColumnVisible) {\n                            <td\n                              [ngStyle]=\"\n                                cell.column\n                                  | zTablePinningStyles\n                                    : cell\n                                    : 'body'\n                                    : row.getVisibleCells()\n                                    : zConfig().columns\n                                    : columnSizingInfo()\n                              \"\n                              [class.z-sticky-left]=\"cell.column.getIsPinned() === 'left'\"\n                              [class.z-sticky-right]=\"cell.column.getIsPinned() === 'right'\"\n                              [class.z-sticky-left-last]=\"\n                                cell.column.getIsPinned() === 'left' && cell.column.getIsLastColumn('left')\n                              \"\n                              [class.z-sticky-right-first]=\"\n                                cell.column.getIsPinned() === 'right' && cell.column.getIsFirstColumn('right')\n                              \"\n                              [class.z-sticky-right-last]=\"\n                                cell.column.getIsPinned() === 'right' && cell.column.getIsLastColumn('right')\n                              \"\n                              [class.z-at-left-edge]=\"cell | zTableCellOffset: orderedLeafColumns()\"\n                              [class.z-col-drag]=\"cell.column.id === 'rowDrag'\"\n                              [class.z-col-select]=\"cell.column.id === 'select'\"\n                              [class.z-col-expand]=\"cell.column.id === 'expand'\"\n                              [class.z-col-actions]=\"cell.column.id === actionColumnInfo()?.columnId\"\n                              [class.z-at-bottom]=\"\n                                cell | zTableCellBottom: zConfig().columns : table.getRowModel().rows\n                              \"\n                              [attr.rowspan]=\"\n                                cell | zTableSpan: zConfig().columns : 'cellRowSpan' : table.getRowModel().rows\n                              \"\n                              [attr.colspan]=\"cell | zTableSpan: zConfig().columns : 'cellColSpan'\"\n                              [class]=\"cell | zTableCellConfig: zConfig().columns : 'cellClass'\"\n                              [style]=\"cell | zTableCellConfig: zConfig().columns : 'cellStyle'\">\n                              @if (cell.column.id === 'rowDrag') {\n                                <div class=\"flex items-center justify-center\">\n                                  <button\n                                    cdkDragHandle\n                                    type=\"button\"\n                                    class=\"text-muted-foreground inline-flex size-7 items-center justify-center rounded-md\"\n                                    [class.cursor-grab]=\"isRowDragEnabled()\"\n                                    [class.opacity-40]=\"!isRowDragEnabled()\">\n                                    <z-icon zType=\"lucideGripVertical\" zSize=\"14\" />\n                                  </button>\n                                </div>\n                              } @else if (cell.column.id === 'select') {\n                                <!-- Row Checkbox -->\n                                <div class=\"flex items-center justify-center\">\n                                  <z-checkbox\n                                    [zChecked]=\"cell.row.getIsSelected()\"\n                                    [zIndeterminate]=\"cell.row.getIsSomeSelected() && !cell.row.getIsSelected()\"\n                                    [zDisabled]=\"!cell.row.getCanSelect()\"\n                                    (zChange)=\"cell.row.toggleSelected()\" />\n                                </div>\n                              } @else if (cell.column.id === 'expand') {\n                                <!-- Expand Button -->\n                                <div class=\"flex items-center justify-center\">\n                                  @if (cell.row.subRows && cell.row.subRows.length > 0) {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.toggleExpanded()\"\n                                      class=\"hover:bg-muted flex h-6 w-6 cursor-pointer items-center justify-center rounded\">\n                                      <z-icon\n                                        zType=\"lucideChevronRight\"\n                                        zSize=\"14\"\n                                        class=\"transition-transform duration-200\"\n                                        [class.rotate-90]=\"cell.row.getIsExpanded()\" />\n                                    </button>\n                                  }\n                                </div>\n                              } @else if (cell.column.id === actionColumnInfo()?.columnId && actionColumnInfo()) {\n                                <z-table-actions\n                                  [zConfig]=\"$any(actionColumnInfo()!.config)\"\n                                  [zRow]=\"cell.row.original\"\n                                  [zRowId]=\"cell.row.id\"\n                                  (zActionClick)=\"onActionClick($event)\" />\n                              } @else {\n                                @let isCellVisible = cell | zTableCellVisible: zConfig().columns;\n                                @if (isCellVisible) {\n                                  @let editInfoVirtual = cell.getContext() | zTableCellEdit: zConfig().columns;\n                                  @if (editInfoVirtual.enabled) {\n                                    <!-- Editable Cell (Virtual) -->\n                                    <z-table-edit-cell\n                                      [zRow]=\"cell.row.original\"\n                                      [zRowId]=\"cell.row.id\"\n                                      [zRowIndex]=\"cell.row.index\"\n                                      [zColumnId]=\"cell.column.id\"\n                                      [zValue]=\"cell.getValue()\"\n                                      [zRowUpdate]=\"_rowUpdate()\"\n                                      [zEditConfig]=\"$any(editInfoVirtual.config)\"\n                                      (zChange)=\"onCellEdit($any($event))\" />\n                                  } @else {\n                                    <ng-container\n                                      *flexRender=\"\n                                        cell.column.columnDef.cell;\n                                        props: cell.getContext();\n                                        let cellContent\n                                      \">\n                                      @if (cellContent | zTableIsTemplateRef) {\n                                        <!-- TemplateRef rendering -->\n                                        @let isClickable = cell.column.id | zTableCellClickable: zConfig().columns;\n                                        <div\n                                          class=\"z-template-content\"\n                                          [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                          [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\"\n                                          (click)=\"isClickable && onCellClick(row, cell.column.id, cell.getValue())\">\n                                          <ng-container\n                                            *ngTemplateOutlet=\"\n                                              cellContent;\n                                              context: { $implicit: cell.getContext() }\n                                            \" />\n                                        </div>\n                                      } @else if (cellContent | zTableHasIcon) {\n                                        <!-- Icon syntax rendering -->\n                                        @let isClickableIcon = cell.column.id | zTableCellClickable: zConfig().columns;\n                                        <z-table-icon-text\n                                          [zText]=\"cellContent\"\n                                          [zTooltip]=\"cell | zTableCellConfig: zConfig().columns : 'contentTooltip'\"\n                                          [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                          [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\"\n                                          (click)=\"\n                                            isClickableIcon && onCellClick(row, cell.column.id, cell.getValue())\n                                          \" />\n                                      } @else {\n                                        <!-- Default/innerHTML rendering -->\n                                        @let isClickableDefault =\n                                          cell.column.id | zTableCellClickable: zConfig().columns;\n                                        <div\n                                          class=\"z-table-cell-text\"\n                                          z-tooltip\n                                          [zContent]=\"\n                                            (cell | zTableCellConfig: zConfig().columns : 'contentTooltip') ||\n                                            cellContent\n                                          \"\n                                          [innerHTML]=\"cellContent | translate | zSafeHtml\"\n                                          [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                          [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\"\n                                          (click)=\"\n                                            isClickableDefault && onCellClick(row, cell.column.id, cell.getValue())\n                                          \"></div>\n                                      }\n                                    </ng-container>\n                                  }\n                                }\n                              }\n                            </td>\n                          }\n                          @if (\n                            canUseVirtualColumns() &&\n                            virtualRightSpacerWidth() > 0 &&\n                            cell.column.id === lastVirtualCenterColumnId()\n                          ) {\n                            <td\n                              class=\"pointer-events-none border-0 p-0\"\n                              [style.width.px]=\"virtualRightSpacerWidth()\"></td>\n                          }\n                        }\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n              </div>\n            }\n          </div>\n        } @else {\n          <!-- Normal Scroll Mode -->\n          <table [ngStyle]=\"columnSizeVars()\" [style.width.px]=\"table.getTotalSize()\">\n            <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n            <tbody\n              cdkDropList\n              class=\"z-table-drag-body\"\n              [cdkDropListData]=\"table.getRowModel().rows\"\n              [cdkDropListDisabled]=\"!isRowDragEnabled()\"\n              cdkDropListOrientation=\"vertical\"\n              [cdkDropListAutoScrollStep]=\"20\"\n              (cdkDropListDropped)=\"onRowDrop($event)\"\n              [class.z-has-vertical-scroll]=\"hasVerticalScroll()\"\n              [class.z-last-row-touches-bottom]=\"lastRowTouchesBottom()\">\n              <!-- Row Template -->\n              <ng-template #rowTemplate let-row>\n                <tr\n                  cdkDrag\n                  z-table-row-hover\n                  cdkDragLockAxis=\"y\"\n                  cdkDragPreviewClass=\"z-table-row-drag-preview\"\n                  cdkDragPlaceholderClass=\"z-table-row-drag-placeholder\"\n                  [cdkDragData]=\"row\"\n                  [cdkDragDisabled]=\"!isRowDragEnabled()\"\n                  (cdkDragStarted)=\"onRowDragStarted()\"\n                  (cdkDragEnded)=\"onRowDragEnded($event)\"\n                  [attr.data-row-id]=\"row.id\"\n                  [ngStyle]=\"row | zTableRow: table : 'pinningStyles' : pinnedRowHeights() : virtualRowHeight()\"\n                  [class.z-child-row]=\"row.depth > 0\"\n                  [class.z-selected]=\"row.getIsSelected()\"\n                  [class.z-indeterminate-selected]=\"row.getIsSomeSelected() && !row.getIsSelected()\"\n                  [class.z-pinned-top]=\"row.getIsPinned() === 'top'\"\n                  [class.z-pinned-bottom]=\"row.getIsPinned() === 'bottom'\"\n                  [class.z-shadow-bottom]=\"\n                    showHeaderFooterShadow() &&\n                    row.getIsPinned() === 'top' &&\n                    (row | zTableRow: table : 'isLastTopPinned')\n                  \"\n                  [class.z-shadow-top]=\"\n                    showHeaderFooterShadow() &&\n                    row.getIsPinned() === 'bottom' &&\n                    (row | zTableRow: table : 'isFirstBottomPinned')\n                  \"\n                  [attr.data-depth]=\"row.depth\">\n                  <ng-template cdkDragPreview>\n                    <div class=\"z-table-row-drag-preview\" [style.width.px]=\"table.getTotalSize()\">\n                      @for (cell of row.getVisibleCells(); track cell.id) {\n                        @let isPreviewCellVisible = cell | zTableCellVisible: zConfig().columns;\n                        @let shouldRenderPreviewColSpan =\n                          cell | zTableCellRender: row.getVisibleCells() : zConfig().columns : 'body';\n                        @if (isPreviewCellVisible && shouldRenderPreviewColSpan) {\n                          <div\n                            class=\"z-table-row-drag-preview-cell\"\n                            [style.width.px]=\"cell.column.getSize()\"\n                            [class.z-table-row-drag-preview-handle]=\"cell.column.id === 'rowDrag'\">\n                            @if (cell.column.id === 'rowDrag') {\n                              <z-icon zType=\"lucideGripVertical\" zSize=\"14\" class=\"text-muted-foreground\" />\n                            } @else {\n                              <span class=\"truncate\">{{ cell.getValue() ?? '' }}</span>\n                            }\n                          </div>\n                        }\n                      }\n                    </div>\n                  </ng-template>\n\n                  <ng-template cdkDragPlaceholder>\n                    <tr class=\"z-table-row-drag-placeholder-row\">\n                      <td [attr.colspan]=\"renderedColumnCount()\">\n                        <div class=\"z-table-row-drag-placeholder-inner\" [style.height.px]=\"virtualRowHeight()\"></div>\n                      </td>\n                    </tr>\n                  </ng-template>\n\n                  @for (cell of row.getVisibleCells(); track cell.id) {\n                    @if (\n                      canUseVirtualColumns() &&\n                      virtualLeftSpacerWidth() > 0 &&\n                      cell.column.id === firstVirtualCenterColumnId()\n                    ) {\n                      <td class=\"pointer-events-none border-0 p-0\" [style.width.px]=\"virtualLeftSpacerWidth()\"></td>\n                    }\n                    @let shouldRenderRowSpan =\n                      cell | zTableSpan: zConfig().columns : 'shouldRender' : table.getRowModel().rows;\n                    @let shouldRenderColSpan =\n                      cell | zTableCellRender: row.getVisibleCells() : zConfig().columns : 'body';\n                    @let isVirtualColumnVisible =\n                      !canUseVirtualColumns() ||\n                      cell.column.getIsPinned() !== false ||\n                      virtualCenterColumnVisibilityMap()[cell.column.id];\n                    @if (shouldRenderRowSpan && shouldRenderColSpan && isVirtualColumnVisible) {\n                      <td\n                        [ngStyle]=\"\n                          cell.column\n                            | zTablePinningStyles\n                              : cell\n                              : 'body'\n                              : row.getVisibleCells()\n                              : zConfig().columns\n                              : columnSizingInfo()\n                        \"\n                        [class]=\"cell | zTableCellConfig: zConfig().columns : 'cellClass'\"\n                        [style]=\"cell | zTableCellConfig: zConfig().columns : 'cellStyle'\"\n                        [class.z-sticky-left]=\"cell.column.getIsPinned() === 'left'\"\n                        [class.z-sticky-right]=\"cell.column.getIsPinned() === 'right'\"\n                        [class.z-sticky-left-last]=\"\n                          cell.column.getIsPinned() === 'left' && cell.column.getIsLastColumn('left')\n                        \"\n                        [class.z-sticky-right-first]=\"\n                          cell.column.getIsPinned() === 'right' && cell.column.getIsFirstColumn('right')\n                        \"\n                        [class.z-sticky-right-last]=\"\n                          cell.column.getIsPinned() === 'right' && cell.column.getIsLastColumn('right')\n                        \"\n                        [class.z-at-left-edge]=\"cell | zTableCellOffset: orderedLeafColumns()\"\n                        [class.z-col-drag]=\"cell.column.id === 'rowDrag'\"\n                        [class.z-col-select]=\"cell.column.id === 'select'\"\n                        [class.z-col-expand]=\"cell.column.id === 'expand'\"\n                        [class.z-col-actions]=\"\n                          cell.column.id === 'actions' || cell.column.id === actionColumnInfo()?.columnId\n                        \"\n                        [class.z-at-bottom]=\"cell | zTableCellBottom: zConfig().columns : table.getRowModel().rows\"\n                        [attr.rowspan]=\"cell | zTableSpan: zConfig().columns : 'cellRowSpan' : table.getRowModel().rows\"\n                        [attr.colspan]=\"cell | zTableSpan: zConfig().columns : 'cellColSpan'\">\n                        @if (cell.column.id === 'rowDrag') {\n                          <div class=\"flex items-center justify-center\">\n                            <button\n                              cdkDragHandle\n                              type=\"button\"\n                              class=\"text-muted-foreground hover:bg-muted hover:text-foreground inline-flex size-7 items-center justify-center rounded-md transition-colors\"\n                              [class.cursor-grab]=\"isRowDragEnabled()\"\n                              [class.cursor-not-allowed]=\"!isRowDragEnabled()\"\n                              [class.opacity-40]=\"!isRowDragEnabled()\">\n                              <z-icon zType=\"lucideGripVertical\" zSize=\"14\" />\n                            </button>\n                          </div>\n                        } @else if (cell.column.id === 'select') {\n                          <!-- Row Checkbox with Pin Button -->\n                          <div class=\"flex items-center justify-center gap-1\">\n                            <z-checkbox\n                              [zChecked]=\"cell.row.getIsSelected()\"\n                              [zIndeterminate]=\"cell.row.getIsSomeSelected() && !cell.row.getIsSelected()\"\n                              [zDisabled]=\"!cell.row.getCanSelect()\"\n                              (zChange)=\"cell.row.toggleSelected()\" />\n                            @if (zConfig().enableRowPinning && cell.row.depth === 0 && !hasBodyRowSpan()) {\n                              <ng-template #rowPinPopoverContent>\n                                <div class=\"flex flex-col gap-0.5 p-0.5\">\n                                  @if (cell.row.getIsPinned() !== 'top') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_top' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned() !== 'bottom') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('bottom'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_bottom' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned()) {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin(false); rowPinPopover.hideImmediate()\"\n                                      class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                                    </button>\n                                  }\n                                </div>\n                              </ng-template>\n                              <button\n                                type=\"button\"\n                                z-popover\n                                #rowPinPopover=\"zPopover\"\n                                [zPopoverContent]=\"rowPinPopoverContent\"\n                                zTrigger=\"click\"\n                                zPosition=\"bottom\"\n                                class=\"z-row-pin-trigger text-muted-foreground hover:bg-muted hover:text-foreground flex cursor-pointer items-center justify-center rounded p-1\"\n                                [class.text-primary]=\"cell.row.getIsPinned()\">\n                                <z-icon zType=\"lucideEllipsis\" zSize=\"14\" class=\"rotate-90\" />\n                              </button>\n                            }\n                          </div>\n                        } @else if (cell.column.id === 'expand') {\n                          <!-- Expand Button with Row Pin Popover -->\n                          <div class=\"flex items-center justify-center gap-1\">\n                            @if (cell.row.subRows && cell.row.subRows.length > 0) {\n                              <button\n                                type=\"button\"\n                                (click)=\"cell.row.toggleExpanded()\"\n                                class=\"hover:bg-muted flex h-6 w-6 cursor-pointer items-center justify-center rounded\">\n                                <z-icon\n                                  zType=\"lucideChevronRight\"\n                                  zSize=\"14\"\n                                  class=\"transition-transform duration-200\"\n                                  [class.rotate-90]=\"cell.row.getIsExpanded()\" />\n                              </button>\n                            }\n                            @if (\n                              zConfig().enableRowPinning &&\n                              cell.row.depth === 0 &&\n                              !(cell.row.subRows && cell.row.subRows.length > 0) &&\n                              !hasBodyRowSpan()\n                            ) {\n                              <ng-template #rowPinPopoverContent>\n                                <div class=\"flex flex-col gap-0.5 p-0.5\">\n                                  @if (cell.row.getIsPinned() !== 'top') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_top' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned() !== 'bottom') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('bottom'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_bottom' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned()) {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin(false); rowPinPopover.hideImmediate()\"\n                                      class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                                    </button>\n                                  }\n                                </div>\n                              </ng-template>\n                              <button\n                                type=\"button\"\n                                z-popover\n                                #rowPinPopover=\"zPopover\"\n                                [zPopoverContent]=\"rowPinPopoverContent\"\n                                zTrigger=\"click\"\n                                zPosition=\"bottom\"\n                                class=\"z-row-pin-trigger text-muted-foreground hover:bg-muted hover:text-foreground flex cursor-pointer items-center justify-center rounded p-1\"\n                                [class.text-primary]=\"cell.row.getIsPinned()\">\n                                <z-icon zType=\"lucideEllipsis\" zSize=\"14\" class=\"rotate-90\" />\n                              </button>\n                            }\n                          </div>\n                        } @else if (cell.column.id === 'actions') {\n                          <!-- Actions Column - Row Pin Only (for parent rows) -->\n                          @if (cell.row.depth === 0 && !hasBodyRowSpan()) {\n                            <div class=\"flex items-center justify-center\">\n                              <ng-template #rowPinPopoverContent>\n                                <div class=\"flex flex-col gap-0.5 p-0.5\">\n                                  @if (cell.row.getIsPinned() !== 'top') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_top' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned() !== 'bottom') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('bottom'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_bottom' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned()) {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin(false); rowPinPopover.hideImmediate()\"\n                                      class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                                    </button>\n                                  }\n                                </div>\n                              </ng-template>\n                              <button\n                                type=\"button\"\n                                z-popover\n                                #rowPinPopover=\"zPopover\"\n                                [zPopoverContent]=\"rowPinPopoverContent\"\n                                zTrigger=\"click\"\n                                zPosition=\"bottom\"\n                                class=\"z-row-pin-trigger text-muted-foreground hover:bg-muted hover:text-foreground flex cursor-pointer items-center justify-center rounded p-1\"\n                                [class.text-primary]=\"cell.row.getIsPinned()\">\n                                <z-icon zType=\"lucideEllipsis\" zSize=\"14\" class=\"rotate-90\" />\n                              </button>\n                            </div>\n                          }\n                        } @else if (cell.column.id === actionColumnInfo()?.columnId && actionColumnInfo()) {\n                          <z-table-actions\n                            [zConfig]=\"$any(actionColumnInfo()!.config)\"\n                            [zRow]=\"cell.row.original\"\n                            [zRowId]=\"cell.row.id\"\n                            (zActionClick)=\"onActionClick($event)\" />\n                        } @else {\n                          @let isCellVisibleNormal = cell | zTableCellVisible: zConfig().columns;\n                          @if (isCellVisibleNormal) {\n                            @let editInfo = cell.getContext() | zTableCellEdit: zConfig().columns;\n                            @if (editInfo.enabled) {\n                              <!-- Editable Cell -->\n                              <z-table-edit-cell\n                                [zRow]=\"cell.row.original\"\n                                [zRowId]=\"cell.row.id\"\n                                [zRowIndex]=\"cell.row.index\"\n                                [zColumnId]=\"cell.column.id\"\n                                [zValue]=\"cell.getValue()\"\n                                [zRowUpdate]=\"_rowUpdate()\"\n                                [zEditConfig]=\"$any(editInfo.config)\"\n                                (zChange)=\"onCellEdit($any($event))\" />\n                            } @else {\n                              <ng-container\n                                *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let cellContent\">\n                                @if (cellContent | zTableIsTemplateRef) {\n                                  <!-- TemplateRef rendering -->\n                                  @let isClickableTpl = cell.column.id | zTableCellClickable: zConfig().columns;\n                                  <div\n                                    class=\"z-template-content\"\n                                    [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                    [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\"\n                                    (click)=\"isClickableTpl && onCellClick(row, cell.column.id, cell.getValue())\">\n                                    <ng-container\n                                      *ngTemplateOutlet=\"cellContent; context: { $implicit: cell.getContext() }\" />\n                                  </div>\n                                } @else if (cellContent | zTableHasIcon) {\n                                  <!-- Icon syntax rendering -->\n                                  @let isClickableIconTpl = cell.column.id | zTableCellClickable: zConfig().columns;\n                                  <z-table-icon-text\n                                    [zText]=\"cellContent\"\n                                    [zTooltip]=\"cell | zTableCellConfig: zConfig().columns : 'contentTooltip'\"\n                                    [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                    [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\"\n                                    (click)=\"isClickableIconTpl && onCellClick(row, cell.column.id, cell.getValue())\" />\n                                } @else {\n                                  <!-- Default/innerHTML rendering -->\n                                  @let isClickableDefaultTpl = cell.column.id | zTableCellClickable: zConfig().columns;\n                                  <div\n                                    class=\"z-table-cell-text\"\n                                    z-tooltip\n                                    [zContent]=\"\n                                      (cell | zTableCellConfig: zConfig().columns : 'contentTooltip') || cellContent\n                                    \"\n                                    [innerHTML]=\"cellContent | translate | zSafeHtml\"\n                                    [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                    [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\"\n                                    (click)=\"\n                                      isClickableDefaultTpl && onCellClick(row, cell.column.id, cell.getValue())\n                                    \"></div>\n                                }\n                              </ng-container>\n                            }\n                          }\n                        }\n                      </td>\n                    }\n                    @if (\n                      canUseVirtualColumns() &&\n                      virtualRightSpacerWidth() > 0 &&\n                      cell.column.id === lastVirtualCenterColumnId()\n                    ) {\n                      <td class=\"pointer-events-none border-0 p-0\" [style.width.px]=\"virtualRightSpacerWidth()\"></td>\n                    }\n                  }\n                </tr>\n\n                <!-- Expanded Row Detail -->\n                @if (row.getIsExpanded() && row.depth === 0 && !row.subRows?.length && zConfig().expandedRowTemplate) {\n                  <tr class=\"z-expanded-row\">\n                    <td [attr.colspan]=\"renderedColumnCount()\" class=\"p-0\">\n                      <ng-container *ngTemplateOutlet=\"zConfig().expandedRowTemplate!; context: { $implicit: row }\" />\n                    </td>\n                  </tr>\n                }\n              </ng-template>\n\n              <!-- Render Top Pinned Rows (hidden when filtered data is empty) -->\n              @if (!isEmpty()) {\n                @for (row of table.getTopRows(); track row.id) {\n                  <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: row }\" />\n                }\n              }\n\n              <!-- Render Center Rows -->\n              @for (row of table.getCenterRows(); track row.id) {\n                <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: row }\" />\n              }\n\n              <!-- Render Bottom Pinned Rows (hidden when filtered data is empty) -->\n              @if (!isEmpty()) {\n                @for (row of bottomRowsReversed(); track row.id) {\n                  <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: row }\" />\n                }\n              }\n            </tbody>\n          </table>\n        }\n      </ng-scrollbar>\n    }\n    <!-- end @else -->\n  </div>\n\n  <!-- Footer table -->\n  @if (hasFooter()) {\n    <div\n      class=\"z-tfoot-wrapper\"\n      [class.z-shadow-footer]=\"shouldFooterShowShadow()\"\n      [class.z-scroll-left]=\"hasScrollLeft()\"\n      [class.z-scroll-right]=\"hasScrollRight()\"\n      #tfootWrapper>\n      <table [ngStyle]=\"columnSizeVars()\" [style.width.px]=\"table.getTotalSize()\">\n        <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n        <tfoot>\n          @for (footerGroup of orderedFooterGroups(); track footerGroup.id) {\n            @if (footerGroup | zTableFooterContent: zConfig().columns) {\n              <tr>\n                @for (footer of footerGroup.headers; track footer.id) {\n                  @if (\n                    canUseVirtualColumns() &&\n                    virtualLeftSpacerWidth() > 0 &&\n                    footer.column.id === firstVirtualCenterColumnId()\n                  ) {\n                    <th class=\"pointer-events-none border-0 p-0\" [style.width.px]=\"virtualLeftSpacerWidth()\"></th>\n                  }\n                  @let rowSpan = footer | zTableSpan: zConfig().columns : 'footerRowSpan';\n                  @let shouldRender = footer | zTableCellRender: footerGroup.headers : zConfig().columns : 'footer';\n                  @let isVirtualColumnVisible =\n                    !canUseVirtualColumns() ||\n                    footer.column.getIsPinned() !== false ||\n                    virtualCenterColumnVisibilityMap()[footer.column.id];\n                  @if (rowSpan && shouldRender && isVirtualColumnVisible) {\n                    <th\n                      [ngStyle]=\"\n                        footer.column\n                          | zTablePinningStyles: footer : 'footer' : table : zConfig().columns : columnSizingInfo()\n                      \"\n                      [class]=\"\n                        (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerClass') +\n                        ' ' +\n                        (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass')\n                      \"\n                      [style]=\"footer.column.id | zTableColumnConfig: zConfig().columns : 'footerStyle'\"\n                      [class.z-sticky-left]=\"footer.column.getIsPinned() === 'left'\"\n                      [class.z-sticky-right]=\"footer.column.getIsPinned() === 'right'\"\n                      [class.z-sticky-left-last]=\"\n                        footer | zTableCellPin: 'isLastLeftPinned' : zConfig().columns : 'footer'\n                      \"\n                      [class.z-sticky-right-first]=\"\n                        footer | zTableCellPin: 'isFirstRightPinned' : zConfig().columns : 'footer'\n                      \"\n                      [class.z-sticky-right-last]=\"\n                        footer | zTableCellPin: 'isLastRightPinned' : zConfig().columns : 'footer'\n                      \"\n                      [class.z-at-left-edge]=\"footer | zTableCellOffset: orderedLeafColumns()\"\n                      [attr.rowspan]=\"rowSpan\"\n                      [attr.colspan]=\"footer | zTableSpan: zConfig().columns : 'footerColSpan'\">\n                      @let configFooterContent =\n                        footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContent';\n                      @if (footer.column.columnDef.footer) {\n                        <ng-container\n                          *flexRender=\"footer.column.columnDef.footer; props: footer.getContext(); let footerContent\">\n                          <div\n                            class=\"flex w-full items-center\"\n                            [class.justify-center]=\"\n                              (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass') ===\n                              'text-center'\n                            \"\n                            [class.justify-end]=\"\n                              (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass') ===\n                              'text-right'\n                            \">\n                            @if (footerContent | zTableIsTemplateRef) {\n                              <!-- TemplateRef rendering -->\n                              <div\n                                class=\"z-template-content\"\n                                [ngClass]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentClass'\n                                \"\n                                [ngStyle]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentStyle'\n                                \">\n                                <ng-container\n                                  *ngTemplateOutlet=\"footerContent; context: { $implicit: footer.getContext() }\" />\n                              </div>\n                            } @else if (footerContent | zTableHasIcon) {\n                              <!-- Icon syntax rendering -->\n                              <z-table-icon-text\n                                [zText]=\"footerContent\"\n                                [zTooltip]=\"footer.column.id | zTableColumnConfig: zConfig().columns : 'footerTooltip'\"\n                                [ngClass]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentClass'\n                                \"\n                                [ngStyle]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentStyle'\n                                \" />\n                            } @else {\n                              <!-- Default/string rendering -->\n                              <span\n                                class=\"z-table-cell-text\"\n                                z-tooltip\n                                [zContent]=\"\n                                  (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerTooltip') ||\n                                  footerContent\n                                \"\n                                [ngClass]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentClass'\n                                \"\n                                [ngStyle]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentStyle'\n                                \">\n                                {{ footerContent | translate }}\n                              </span>\n                            }\n                          </div>\n                        </ng-container>\n                      } @else if (configFooterContent) {\n                        <!-- Fallback for group columns without TanStack footer -->\n                        <div\n                          class=\"flex w-full items-center\"\n                          [class.justify-center]=\"\n                            (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass') ===\n                            'text-center'\n                          \"\n                          [class.justify-end]=\"\n                            (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass') ===\n                            'text-right'\n                          \">\n                          <span\n                            class=\"z-table-cell-text\"\n                            z-tooltip\n                            [zContent]=\"\n                              (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerTooltip') ||\n                              $any(configFooterContent)\n                            \"\n                            [ngClass]=\"footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentClass'\"\n                            [ngStyle]=\"footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentStyle'\">\n                            {{ $any(configFooterContent) | translate }}\n                          </span>\n                        </div>\n                      }\n                    </th>\n                  }\n                  @if (\n                    canUseVirtualColumns() &&\n                    virtualRightSpacerWidth() > 0 &&\n                    footer.column.id === lastVirtualCenterColumnId()\n                  ) {\n                    <th class=\"pointer-events-none border-0 p-0\" [style.width.px]=\"virtualRightSpacerWidth()\"></th>\n                  }\n                }\n              </tr>\n            }\n          }\n        </tfoot>\n      </table>\n    </div>\n  }\n</div>\n\n<!-- Pagination -->\n@if (zConfig().pagination?.enabled !== false) {\n  <div class=\"mt-4 flex items-center justify-between gap-4\">\n    <div class=\"truncate text-sm text-gray-500\">\n      {{ 'i18n_z_ui_table_total_rows' | translate: { total: (paginationTotal() | zFormatNum) } }}\n    </div>\n    <z-pagination\n      [zTotal]=\"paginationTotal()\"\n      [(zPageIndex)]=\"pagination().pageIndex\"\n      [(zPageSize)]=\"pagination().pageSize\"\n      [zPageSizeOptions]=\"zConfig().pagination?.pageSizeOptions ?? [10, 20, 50, 100]\"\n      [zShowSizeChanger]=\"zConfig().pagination?.showSizeChanger ?? true\"\n      [zShowQuickJumper]=\"zConfig().pagination?.showQuickJumper ?? false\"\n      [zShowTotal]=\"false\"\n      [zDisabled]=\"zConfig().pagination?.disabled || isLoading() || isProcessing()\"\n      (zOnPageChange)=\"onPageChange($event)\" />\n  </div>\n}\n\n<!-- Floating Bulk Action Bar -->\n<div class=\"z-bulk-action-bar-origin\" cdkOverlayOrigin #bulkBarOrigin=\"cdkOverlayOrigin\"></div>\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"bulkBarOrigin\"\n  [cdkConnectedOverlayOpen]=\"bulkBarMounted()\"\n  [cdkConnectedOverlayPositions]=\"bulkBarPositions\"\n  [cdkConnectedOverlayHasBackdrop]=\"false\"\n  cdkConnectedOverlayPanelClass=\"z-bulk-action-bar-overlay\">\n  @if (bulkBarConfig(); as config) {\n    <div class=\"z-bulk-action-bar-inner\" [class.z-leaving]=\"bulkBarClosing()\">\n      <div class=\"z-bulk-action-bar-count\">\n        {{ bulkBarContext()?.selectedRowIds?.length ?? 0 | zFormatNum }}\n        {{ config.selectedLabel ?? ('i18n_z_ui_table_selected' | translate) }}\n      </div>\n\n      <div class=\"z-bulk-action-bar-divider\"></div>\n\n      @for (item of bulkBarItems(); track item.action.key) {\n        <button\n          type=\"button\"\n          class=\"z-bulk-action-bar-button\"\n          [class.z-danger]=\"item.action.type === 'outline-destructive-secondary'\"\n          [disabled]=\"item.disabled\"\n          (click)=\"onBulkActionClick(item.action)\">\n          @if (item.action.icon) {\n            <z-icon [zType]=\"item.action.icon\" [zSize]=\"item.action.iconSize ?? '14'\" />\n          }\n          @if (item.action.label) {\n            <span>{{ item.action.label | translate }}</span>\n          }\n        </button>\n      }\n    </div>\n  }\n</ng-template>\n\n<!-- Settings Drawer -->\n<z-drawer\n  [(zVisible)]=\"showSettingsDrawer\"\n  [zTitle]=\"'i18n_z_ui_table_settings_title' | translate\"\n  zPlacement=\"right\"\n  zWidth=\"500px\"\n  [zShadow]=\"true\"\n  [zOkText]=\"null\"\n  [zCancelText]=\"'i18n_z_ui_drawer_close' | translate\">\n  <div class=\"z-table-settings-drawer px-4\">\n    <!-- Display Settings -->\n    <div class=\"mb-4\">\n      <h4 class=\"text-foreground mb-2 text-sm font-semibold\">{{ 'i18n_z_ui_table_display_settings' | translate }}</h4>\n      <p class=\"text-muted-foreground mb-3 text-xs\">{{ 'i18n_z_ui_table_display_settings_desc' | translate }}</p>\n      <div class=\"grid grid-cols-2 gap-x-4 gap-y-3\">\n        <z-checkbox\n          [zChecked]=\"showHorizontalBorder()\"\n          [zText]=\"'i18n_z_ui_table_horizontal_border' | translate\"\n          (zChange)=\"showHorizontalBorder.set(!showHorizontalBorder())\" />\n        <z-checkbox\n          [zChecked]=\"showVerticalBorder()\"\n          [zText]=\"'i18n_z_ui_table_vertical_border' | translate\"\n          (zChange)=\"showVerticalBorder.set(!showVerticalBorder())\" />\n        <z-checkbox\n          [zChecked]=\"showHeaderFooterShadow()\"\n          [zText]=\"'i18n_z_ui_table_header_footer_shadow' | translate\"\n          (zChange)=\"showHeaderFooterShadow.set(!showHeaderFooterShadow())\" />\n      </div>\n    </div>\n\n    <!-- Divider -->\n    <div class=\"border-border my-4 border-t\"></div>\n\n    <!-- Unified Column Settings -->\n    @if (zConfig().enableSettings) {\n      <div class=\"mb-4\">\n        <h4 class=\"text-foreground mb-2 text-sm font-semibold\">{{ 'i18n_z_ui_table_column_settings' | translate }}</h4>\n        <p class=\"text-muted-foreground mb-3 text-xs\">{{ 'i18n_z_ui_table_column_settings_desc' | translate }}</p>\n\n        <!-- Unpinned Columns (Draggable) -->\n        <div\n          cdkDropList\n          #columnDropList=\"cdkDropList\"\n          [cdkDropListAutoScrollDisabled]=\"true\"\n          (cdkDropListDropped)=\"onPendingColumnDrop($event)\"\n          class=\"z-column-drop-list space-y-1.5\">\n          @for (columnId of columnOrder(); track columnId; let i = $index) {\n            @if (columnId !== 'expand' && columnId !== 'select' && columnId !== 'rowDrag') {\n              @let column = table.getColumn(columnId);\n              @let isPinned = column?.getIsPinned();\n              @let isVisible = columnVisibility()[columnId] !== false;\n              @let canPin = column?.getCanPin() !== false && zConfig().enableColumnPinning;\n              @if (!isPinned) {\n                <div\n                  cdkDrag\n                  [cdkDragData]=\"columnId\"\n                  cdkDragLockAxis=\"y\"\n                  cdkDragPreviewContainer=\"global\"\n                  cdkDragPreviewClass=\"z-drag-preview\"\n                  class=\"z-drag-item border-border bg-card hover:border-primary flex cursor-grab items-center gap-2 rounded border px-2 py-1.5 text-sm active:cursor-grabbing\"\n                  [class.opacity-60]=\"!isVisible\">\n                  <!-- Drag Handle -->\n                  <z-icon\n                    cdkDragHandle\n                    zType=\"lucideGripVertical\"\n                    zSize=\"14\"\n                    class=\"text-muted-foreground shrink-0 cursor-grab active:cursor-grabbing\" />\n\n                  <!-- Visibility Checkbox -->\n                  <input\n                    type=\"checkbox\"\n                    [checked]=\"isVisible\"\n                    (change)=\"onToggleColumnVisibility(columnId)\"\n                    (mousedown)=\"$event.stopPropagation()\"\n                    class=\"border-input h-4 w-4 shrink-0 cursor-pointer rounded\" />\n\n                  <!-- Column Name -->\n                  <span class=\"flex min-w-0 flex-1 flex-col\">\n                    <span class=\"truncate\" [class.text-muted-foreground]=\"!isVisible\">\n                      {{ columnId | zTableColumnHeader: zConfig().columns | translate }}\n                    </span>\n                    @let parents = columnId | zTableColumnParents: zConfig().columns;\n                    @if (parents) {\n                      <span class=\"text-muted-foreground truncate text-[0.625rem]\">({{ parents | translate }})</span>\n                    }\n                  </span>\n\n                  <!-- Pin Buttons -->\n                  @if (canPin) {\n                    <div class=\"flex shrink-0 items-center gap-0.5\" (mousedown)=\"$event.stopPropagation()\">\n                      <button\n                        type=\"button\"\n                        [disabled]=\"!isVisible\"\n                        (click)=\"onToggleColumnPin(columnId, 'left')\"\n                        class=\"text-muted-foreground hover:bg-muted cursor-pointer rounded p-1 text-xs transition-colors disabled:cursor-not-allowed disabled:opacity-40\"\n                        title=\"Pin Left\">\n                        <z-icon zType=\"lucideArrowLeft\" zSize=\"12\" />\n                      </button>\n                      <button\n                        type=\"button\"\n                        [disabled]=\"!isVisible\"\n                        (click)=\"onToggleColumnPin(columnId, 'right')\"\n                        class=\"text-muted-foreground hover:bg-muted cursor-pointer rounded p-1 text-xs transition-colors disabled:cursor-not-allowed disabled:opacity-40\"\n                        title=\"Pin Right\">\n                        <z-icon zType=\"lucideArrowRight\" zSize=\"12\" />\n                      </button>\n                    </div>\n                  }\n                </div>\n              }\n            }\n          }\n        </div>\n\n        <!-- Pinned Columns Section -->\n        @if (zConfig().enableColumnPinning) {\n          @if (pinnedColumnIds().length > 0) {\n            <div class=\"border-border mt-4 border-t pt-4\">\n              <h5 class=\"text-muted-foreground mb-2 text-xs font-medium\">\n                {{ 'i18n_z_ui_table_pinned_columns' | translate }}\n              </h5>\n              <div class=\"space-y-1.5\">\n                @for (columnId of pinnedColumnIds(); track columnId) {\n                  @let column = table.getColumn(columnId);\n                  @let isPinned = column?.getIsPinned();\n                  @let isVisible = columnVisibility()[columnId] !== false;\n                  <div\n                    class=\"border-border bg-muted/30 flex items-center gap-2 rounded border px-2 py-1.5 text-sm\"\n                    [class.opacity-60]=\"!isVisible\">\n                    <!-- Pin Icon -->\n                    <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"text-primary shrink-0\" />\n\n                    <!-- Visibility Checkbox -->\n                    <input\n                      type=\"checkbox\"\n                      [checked]=\"isVisible\"\n                      (change)=\"onToggleColumnVisibility(columnId)\"\n                      class=\"border-input h-4 w-4 shrink-0 cursor-pointer rounded\" />\n\n                    <!-- Column Name -->\n                    <span class=\"flex min-w-0 flex-1 flex-col\">\n                      <span class=\"truncate\" [class.text-muted-foreground]=\"!isVisible\">\n                        {{ columnId | zTableColumnHeader: zConfig().columns | translate }}\n                      </span>\n                      @let pinnedParents = columnId | zTableColumnParents: zConfig().columns;\n                      @if (pinnedParents) {\n                        <span class=\"text-muted-foreground truncate text-[0.625rem]\">\n                          ({{ pinnedParents | translate }})\n                        </span>\n                      }\n                    </span>\n\n                    <!-- Position Badge -->\n                    <span class=\"bg-primary/10 text-primary shrink-0 rounded px-1.5 py-0.5 text-[0.625rem] font-medium\">\n                      {{\n                        isPinned === 'left'\n                          ? ('i18n_z_ui_table_left' | translate)\n                          : ('i18n_z_ui_table_right' | translate)\n                      }}\n                    </span>\n\n                    <!-- Unpin Button -->\n                    <button\n                      type=\"button\"\n                      (click)=\"onToggleColumnPin(columnId, isPinned === 'left' ? 'left' : 'right')\"\n                      class=\"text-muted-foreground hover:bg-muted hover:text-foreground cursor-pointer rounded p-1 text-xs transition-colors\"\n                      title=\"Unpin\">\n                      <z-icon zType=\"lucideX\" zSize=\"12\" />\n                    </button>\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        }\n      </div>\n    }\n  </div>\n</z-drawer>\n", styles: [".z-bulk-action-bar-origin{position:fixed;left:50%;bottom:1rem;width:1px;height:1px;pointer-events:none}:host ::ng-deep .z-bulk-action-bar-overlay{max-width:calc(100vw - 2rem);margin-bottom:1rem;transform-origin:center bottom}.z-bulk-action-bar-inner{border:thin solid color-mix(in srgb,var(--border) 88%,transparent);border-radius:.5rem;background:color-mix(in srgb,var(--card) 96%,var(--background));color:var(--foreground);box-shadow:0 1rem 2.5rem color-mix(in srgb,var(--foreground) 16%,transparent),0 .25rem .75rem color-mix(in srgb,var(--foreground) 8%,transparent),0 0 0 1px color-mix(in srgb,var(--background) 65%,transparent) inset;display:flex;align-items:center;width:max-content;min-height:2.25rem;max-width:calc(100vw - 2rem);overflow:hidden;transform-origin:center bottom;animation:z-bulk-action-bar-enter .18s cubic-bezier(.16,1,.3,1);will-change:opacity,transform}.z-bulk-action-bar-inner.z-leaving{pointer-events:none;animation:z-bulk-action-bar-exit .14s ease-in forwards}.z-bulk-action-bar-count{padding:0 .75rem;white-space:nowrap;font-size:.8125rem;font-weight:500;color:var(--foreground)}.z-bulk-action-bar-divider{width:1px;align-self:stretch;background:color-mix(in srgb,var(--border) 88%,transparent)}.z-bulk-action-bar-button{display:inline-flex;align-items:center;gap:.375rem;min-height:2.25rem;padding:0 .75rem;border-left:thin solid color-mix(in srgb,var(--border) 78%,transparent);color:var(--foreground);font-size:.8125rem;white-space:nowrap;cursor:pointer;transition:background-color .14s ease,color .14s ease}.z-bulk-action-bar-button:hover:not(:disabled){background:var(--muted)}.z-bulk-action-bar-button:disabled{cursor:not-allowed;opacity:.45}.z-bulk-action-bar-button.z-danger{color:var(--destructive)}.z-bulk-action-bar-button.z-danger:hover:not(:disabled){background:color-mix(in srgb,var(--destructive) 12%,transparent)}@keyframes z-bulk-action-bar-enter{0%{opacity:0;transform:translateY(.875rem)}to{opacity:1;transform:translateY(0)}}@keyframes z-bulk-action-bar-exit{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(.875rem)}}@media(prefers-reduced-motion:reduce){.z-bulk-action-bar-inner{animation:none}}:host ::ng-deep .z-table-cell-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;min-width:0;-webkit-user-select:text;user-select:text}:host ::ng-deep .z-table-cell-text>*,:host ::ng-deep .z-table-cell-text *{display:inline-block;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}.z-template-content{display:block;width:100%;min-width:0;max-width:100%;overflow:hidden}.z-template-content>*{min-width:0;max-width:100%}.z-template-content>[class*=flex]{min-width:0;max-width:100%}.z-template-content>[class*=flex]>*{min-width:0;flex-shrink:1}.z-template-content>[class*=grid]{min-width:0;max-width:100%}.z-thead-wrapper{flex-shrink:0;background:var(--muted);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.z-thead-wrapper::-webkit-scrollbar{display:none}.z-table-row-drag-preview{display:flex;align-items:stretch;overflow:hidden;border:1px solid var(--primary);border-radius:.5rem;background-color:var(--card);box-shadow:0 10px 24px #00000029}.z-table-row-drag-preview-cell{display:flex;min-width:0;align-items:center;padding:.5rem 12px;border-right:thin solid var(--border);background-color:var(--card);color:var(--foreground);font-size:.875rem}.z-table-row-drag-preview-cell:last-child{border-right:none}.z-table-row-drag-preview-cell>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.z-table-row-drag-preview-handle{justify-content:center}.z-table-row-drag-placeholder-row td{padding:0!important;border-top:none!important;border-left:none!important;border-right:none!important;border-bottom:thin solid transparent!important;background:transparent!important}.z-table-row-drag-placeholder-inner{width:100%;min-height:2.625rem;border:2px dashed var(--primary);border-radius:0;background-color:color-mix(in srgb,var(--primary) 10%,transparent);opacity:1!important;visibility:visible!important;box-sizing:border-box}.z-table-row-drag-placeholder-row.cdk-drag-placeholder *{opacity:1}.z-table-row-drag-placeholder-row.cdk-drag-placeholder .z-table-row-drag-placeholder-inner{opacity:1!important;visibility:visible!important}:host{display:flex;flex-direction:column;height:100%;--scrollbar-track-thickness: 7px;--scrollbar-track-color: transparent;--scrollbar-thumb-shape: 3px;--z-shadow-left-right: -1.875rem;--z-shadow-left-width: 1.875rem;--z-shadow-left-opacity: 0;--z-shadow-right-left: -1.875rem;--z-shadow-right-width: 1.875rem;--z-shadow-right-opacity: 0;--z-sticky-left-border-color: transparent;--z-sticky-right-border-color: var(--border)}.z-table-container{display:flex;flex-direction:column;position:relative;width:100%;height:100%;overflow:hidden;border-radius:.3125rem;border:thin solid var(--border);background-color:var(--card)}.z-table-container.z-table-borderless{border:none;border-radius:0;box-shadow:none!important;background-color:transparent}.z-table-container.z-hide-horizontal-border th,.z-table-container.z-hide-horizontal-border td{border-bottom:none!important;border-top:none!important}.z-table-container.z-hide-vertical-border th,.z-table-container.z-hide-vertical-border td{border-left:none!important}table{width:fit-content;min-width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:.875rem}.z-table-toolbar .z-settings-btn{transition:all .15s ease}.z-table-toolbar .z-settings-btn:hover{border-color:var(--muted-foreground)}.z-thead-wrapper{flex-shrink:0;background:var(--muted);overflow-x:hidden;overflow-y:hidden;touch-action:pan-y pinch-zoom}.z-thead-wrapper th{height:auto;padding:.5rem 12px;text-align:left;vertical-align:middle;font-weight:500;color:var(--foreground);white-space:nowrap;overflow:hidden;background:var(--muted);border-left:thin solid var(--border);border-bottom:thin solid var(--border);-webkit-user-select:none;user-select:none}.z-thead-wrapper th.z-at-left-edge{border-left:none}.z-thead-wrapper th[colspan]{text-align:center;background:var(--muted);font-weight:500;color:var(--foreground)}.z-thead-wrapper.z-shadow-header{box-shadow:0 1px 3px #00000014;position:relative;z-index:15}.z-thead-wrapper.z-shadow-header:where(.dark,.dark *){box-shadow:0 1px 3px #0000004d}.z-tbody-wrapper{flex:1;min-height:6.25rem;display:flex;flex-direction:column}.z-tbody-scrollbar{flex:1;height:100%}.z-empty-state,.z-loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:6.25rem;height:100%;color:var(--muted-foreground);font-size:.875rem;animation:z-fade-in .2s ease-out}.z-tbody-scrollbar,.z-tbody-scrollbar table{animation:z-fade-in .2s ease-out}@keyframes z-fade-in{0%{opacity:0;transform:translateY(.25rem)}to{opacity:1;transform:translateY(0)}}.z-tbody-wrapper tr{transition:background-color .15s ease}.z-tbody-wrapper tr:hover,.z-tbody-wrapper tr:hover td[style*=sticky]{background-color:var(--muted)}.z-tbody-wrapper tr.z-pinned-top td.z-sticky-left,.z-tbody-wrapper tr.z-pinned-top td.z-sticky-right,.z-tbody-wrapper tr.z-pinned-bottom td.z-sticky-left,.z-tbody-wrapper tr.z-pinned-bottom td.z-sticky-right{z-index:3}.z-tbody-wrapper tr.z-shadow-bottom{box-shadow:0 1px 3px #00000014!important;position:relative;z-index:15}.z-tbody-wrapper tr.z-shadow-bottom:where(.dark,.dark *){box-shadow:0 1px 3px #0000004d!important}.z-tbody-wrapper tr.z-shadow-top{box-shadow:0 -2px 4px #0000000d!important;position:relative;z-index:15}.z-tbody-wrapper tr.z-shadow-top:where(.dark,.dark *){box-shadow:0 -2px 4px #0003!important}.z-tbody-wrapper td{padding:.5rem 12px;height:2.5rem;vertical-align:middle;color:var(--foreground);white-space:nowrap;overflow:hidden;background:var(--card);border-left:thin solid var(--border);border-bottom:thin solid var(--border);box-sizing:border-box}.z-tbody-wrapper tbody.z-has-vertical-scroll td.z-at-bottom,.z-tbody-wrapper tbody.z-last-row-touches-bottom td.z-at-bottom{border-bottom:none}.z-tbody-wrapper td.z-at-left-edge{border-left:none}.z-tbody-wrapper td i{color:var(--muted-foreground);font-style:italic}.z-tbody-wrapper td[rowspan]{vertical-align:top;padding-top:.75rem}.z-tbody-wrapper td.z-row-hover{background-color:var(--muted)!important}.z-tbody-wrapper td.z-col-select,.z-tbody-wrapper td.z-col-expand,.z-tbody-wrapper td.z-col-actions{padding:.5rem 4px!important;text-align:center}.z-tbody-wrapper tr.z-child-row td.z-col-select:first-child,.z-tbody-wrapper tr.z-child-row td.z-col-expand:first-child,.z-tbody-wrapper tr.z-child-row td.z-col-actions:first-child{padding-left:0!important}.z-virtual-scroll-inner{position:relative;width:100%}.z-virtual-row{position:absolute;top:0;left:0;width:100%}tr.z-child-row td:first-child{padding-left:.75rem!important}tbody tr.z-selected,tbody tr.z-selected td{background-color:color-mix(in srgb,var(--primary) 15%,var(--background))!important}tbody tr.z-selected:hover,tbody tr.z-selected:hover td{background-color:color-mix(in srgb,var(--primary) 20%,var(--background))!important}tbody tr.z-indeterminate-selected,tbody tr.z-indeterminate-selected td{background-color:color-mix(in srgb,var(--primary) 10%,var(--background))!important}tbody tr.z-indeterminate-selected:hover,tbody tr.z-indeterminate-selected:hover td{background-color:color-mix(in srgb,var(--primary) 15%,var(--background))!important}tbody tr.z-pinned-top td{background-color:var(--card)!important}tbody tr.z-pinned-top:hover{background-color:var(--muted)}tbody tr.z-pinned-top:hover td{background-color:var(--muted)!important}tbody tr.z-pinned-bottom td{background-color:var(--card)!important}tbody tr.z-pinned-bottom:hover{background-color:var(--muted)}tbody tr.z-pinned-bottom:hover td,tr.z-expanded-row td{background-color:var(--muted)!important}thead th{position:relative}thead th .z-resizer{position:absolute;right:0;top:0;height:100%;width:.5rem;background:transparent;cursor:col-resize;-webkit-user-select:none;user-select:none;touch-action:none;z-index:5}thead th .z-resizer:after{content:\"\";position:absolute;right:0;top:0;height:100%;width:.1875rem;background:#0000001a;opacity:0;transition:opacity .2s ease}thead th .z-resizer:after:where(.dark,.dark *){background:#ffffff1a}thead th .z-resizer:hover:after{opacity:1;background:var(--primary);width:.1875rem}thead th .z-resizer.z-is-resizing:after{opacity:1;background:var(--primary);width:.1875rem}thead th .z-resizer.z-resizer-left{right:auto;left:0}thead th .z-resizer.z-resizer-left:after{right:auto;left:0}.z-thead-wrapper th.z-sticky-left,.z-thead-wrapper th.z-sticky-right,.z-tbody-wrapper th.z-sticky-left,.z-tbody-wrapper th.z-sticky-right,.z-tfoot-wrapper th.z-sticky-left,.z-tfoot-wrapper th.z-sticky-right{background-color:var(--muted);z-index:1;transform:translateZ(0);backface-visibility:hidden}.z-thead-wrapper td.z-sticky-left,.z-thead-wrapper td.z-sticky-right,.z-tbody-wrapper td.z-sticky-left,.z-tbody-wrapper td.z-sticky-right,.z-tfoot-wrapper td.z-sticky-left,.z-tfoot-wrapper td.z-sticky-right{background-color:var(--card);z-index:1;transform:translateZ(0);backface-visibility:hidden}.z-thead-wrapper th.z-sticky-left-last,.z-thead-wrapper td.z-sticky-left-last,.z-tbody-wrapper th.z-sticky-left-last,.z-tbody-wrapper td.z-sticky-left-last,.z-tfoot-wrapper th.z-sticky-left-last,.z-tfoot-wrapper td.z-sticky-left-last{position:relative;overflow:visible;border-right:thin solid var(--z-sticky-left-border-color)}.z-thead-wrapper th.z-sticky-left-last:after,.z-thead-wrapper td.z-sticky-left-last:after,.z-tbody-wrapper th.z-sticky-left-last:after,.z-tbody-wrapper td.z-sticky-left-last:after,.z-tfoot-wrapper th.z-sticky-left-last:after,.z-tfoot-wrapper td.z-sticky-left-last:after{content:\"\";position:absolute;top:0;bottom:0;right:var(--z-shadow-left-right);width:var(--z-shadow-left-width);pointer-events:none;box-shadow:inset 10px 0 8px -8px #0000001a;z-index:10;opacity:var(--z-shadow-left-opacity)}:host-context(.dark) .z-thead-wrapper th.z-sticky-left-last:after,:host-context(.dark) .z-thead-wrapper td.z-sticky-left-last:after,:host-context(.dark) .z-tbody-wrapper th.z-sticky-left-last:after,:host-context(.dark) .z-tbody-wrapper td.z-sticky-left-last:after,:host-context(.dark) .z-tfoot-wrapper th.z-sticky-left-last:after,:host-context(.dark) .z-tfoot-wrapper td.z-sticky-left-last:after{box-shadow:inset 10px 0 10px -8px #0000004d}.z-thead-wrapper.z-scroll-left,.z-tbody-wrapper.z-scroll-left,.z-tfoot-wrapper.z-scroll-left{--z-shadow-left-opacity: 1}.z-thead-wrapper.z-scroll-left:where(.dark,.dark *),.z-tbody-wrapper.z-scroll-left:where(.dark,.dark *),.z-tfoot-wrapper.z-scroll-left:where(.dark,.dark *){--z-sticky-left-border-color: var(--border)}.z-thead-wrapper th.z-sticky-right-first,.z-thead-wrapper td.z-sticky-right-first,.z-tbody-wrapper th.z-sticky-right-first,.z-tbody-wrapper td.z-sticky-right-first,.z-tfoot-wrapper th.z-sticky-right-first,.z-tfoot-wrapper td.z-sticky-right-first{position:relative;overflow:visible;border-left:thin solid var(--z-sticky-right-border-color)}.z-thead-wrapper th.z-sticky-right-first:before,.z-thead-wrapper td.z-sticky-right-first:before,.z-tbody-wrapper th.z-sticky-right-first:before,.z-tbody-wrapper td.z-sticky-right-first:before,.z-tfoot-wrapper th.z-sticky-right-first:before,.z-tfoot-wrapper td.z-sticky-right-first:before{content:\"\";position:absolute;top:0;bottom:0;left:var(--z-shadow-right-left);width:var(--z-shadow-right-width);pointer-events:none;box-shadow:inset -10px 0 8px -8px #0000001a;z-index:10;opacity:var(--z-shadow-right-opacity)}:host-context(.dark) .z-thead-wrapper th.z-sticky-right-first:before,:host-context(.dark) .z-thead-wrapper td.z-sticky-right-first:before,:host-context(.dark) .z-tbody-wrapper th.z-sticky-right-first:before,:host-context(.dark) .z-tbody-wrapper td.z-sticky-right-first:before,:host-context(.dark) .z-tfoot-wrapper th.z-sticky-right-first:before,:host-context(.dark) .z-tfoot-wrapper td.z-sticky-right-first:before{box-shadow:inset -10px 0 10px -8px #0000004d}.z-thead-wrapper.z-scroll-right,.z-tbody-wrapper.z-scroll-right,.z-tfoot-wrapper.z-scroll-right{--z-shadow-right-opacity: 1}.z-thead-wrapper.z-scroll-right:not(:where(.dark,.dark *)),.z-tbody-wrapper.z-scroll-right:not(:where(.dark,.dark *)),.z-tfoot-wrapper.z-scroll-right:not(:where(.dark,.dark *)){--z-sticky-right-border-color: transparent}.z-thead-wrapper th.z-sticky-right-last,.z-tfoot-wrapper th.z-sticky-right-last{position:relative}.z-thead-wrapper th.z-sticky-right-last:after,.z-tfoot-wrapper th.z-sticky-right-last:after{content:\"\";position:absolute;top:0;bottom:0;right:-1.875rem;width:1.875rem;background:var(--muted);pointer-events:none}.z-tfoot-wrapper{flex-shrink:0;background:var(--muted);overflow-x:hidden;overflow-y:hidden;touch-action:pan-y pinch-zoom}.z-tfoot-wrapper th{height:auto;padding:.5rem 12px;text-align:left;vertical-align:middle;font-weight:500;font-size:.75rem;color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.5px;background:var(--muted);border-left:thin solid var(--border);border-top:thin solid var(--border)}.z-tfoot-wrapper th.z-at-left-edge{border-left:none}.z-tfoot-wrapper.z-shadow-footer{box-shadow:0 -2px 4px #0000000d;position:relative;z-index:15}.z-tfoot-wrapper.z-shadow-footer:where(.dark,.dark *){box-shadow:0 -2px 4px #0003}.z-pin-btn{padding:.125rem 4px;border-radius:.25rem;color:var(--muted-foreground);transition:all .15s ease}.z-pin-btn:hover{background-color:var(--muted);color:var(--foreground)}.z-pin-btn.z-pin-btn-active{color:var(--primary);background-color:var(--primary)}.z-pin-btn.z-pin-btn-active:hover{background-color:var(--primary);opacity:.8}.z-row-pin-trigger{opacity:1}.z-row-pin-trigger.text-primary{color:var(--primary)}.z-header-pin-trigger{opacity:1}.z-header-pin-trigger.text-primary{color:var(--primary)}th{overflow:hidden}th .z-header-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}th .z-header-text-wrapper{transition:background-color .15s ease;border-radius:.25rem;min-width:0;overflow:hidden;flex-shrink:1}th .z-header-text-wrapper.z-has-options:hover{background-color:color-mix(in srgb,var(--foreground) 8%,transparent)}th .z-header-text-wrapper.z-has-options:active{background-color:color-mix(in srgb,var(--foreground) 12%,transparent)}.cdk-drag-preview,.z-drag-preview{box-shadow:0 5px 20px #0003;box-sizing:border-box;border-radius:.375rem;background-color:var(--card);border:1px solid var(--primary);overflow:hidden;z-index:10000!important;pointer-events:none}.cdk-drag-preview:where(.dark,.dark *),.z-drag-preview:where(.dark,.dark *){box-shadow:0 5px 20px #00000080}.cdk-drag-placeholder{background-color:color-mix(in srgb,var(--primary) 10%,var(--background));border:2px dashed var(--primary);box-sizing:border-box;border-radius:.375rem}.cdk-drag-animating{transition:transform .1s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .cdk-drag:not(.cdk-drag-placeholder){transition:transform .1s cubic-bezier(0,0,.2,1)}.z-drag-item.cdk-drag-dragging{transition:none!important}.z-column-drop-list{min-height:3.125rem;overscroll-behavior:contain}.z-column-drop-list.cdk-drop-list-dragging{overflow:clip}.z-table-settings-drawer input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:1rem;height:1rem;border:thin solid var(--input);border-radius:.25rem;background-color:var(--background);cursor:pointer;position:relative;transition:all .2s ease}.z-table-settings-drawer input[type=checkbox]:hover{border-color:var(--primary)}.z-table-settings-drawer input[type=checkbox]:checked{background-color:var(--primary);border-color:var(--primary)}.z-table-settings-drawer input[type=checkbox]:checked:after{content:\"\";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:.375rem;height:.625rem;border:solid var(--primary-foreground);border-width:0 .125rem .125rem 0;transform:translate(-50%,-60%) rotate(45deg)}.z-table-settings-drawer input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed}\n"] }]
+                    }, exportAs: 'zTable', template: "<!-- Toolbar: Search & Settings -->\n@if (isSearchEnabled() || zConfig().enableSettings) {\n  <div class=\"z-table-toolbar mb-2 flex items-center justify-between gap-4\">\n    <!-- Search -->\n    @if (isSearchEnabled()) {\n      @let config = searchConfig();\n      <z-input\n        [class]=\"config?.width ?? 'w-64'\"\n        [zSize]=\"config?.size ?? 'sm'\"\n        [zPlaceholder]=\"config?.placeholder ?? 'i18n_z_ui_table_search' | translate\"\n        [zSearch]=\"true\"\n        [zDebounce]=\"config?.debounceTime ?? 300\"\n        (zOnSearch)=\"onSearchChange($event)\" />\n    } @else {\n      <div></div>\n    }\n\n    <!-- Settings Button -->\n    @if (zConfig().enableSettings) {\n      <z-button zType=\"outline\" zSize=\"sm\" zTypeIcon=\"lucideSettings\" (click)=\"openSettingsDrawer()\">\n        {{ 'i18n_z_ui_table_settings' | translate }}\n      </z-button>\n    }\n  </div>\n}\n\n<div\n  [class]=\"classTable()\"\n  [class.z-hide-horizontal-border]=\"!showHorizontalBorder()\"\n  [class.z-hide-vertical-border]=\"!showVerticalBorder()\"\n  [style.max-height]=\"zConfig().maxHeight\"\n  [style.min-height]=\"zConfig().minHeight\">\n  <!-- Shared colgroup template -->\n  <ng-template #colGroupTpl>\n    <colgroup>\n      @if (canUseVirtualColumns()) {\n        @for (column of leftLeafColumns(); track column.id) {\n          @let customWidth = column.id | zTableColumnConfig: zConfig().columns : 'width';\n          <col [style.width]=\"customWidth || 'calc(var(--col-' + column.id + '-size) * 1px)'\" />\n        }\n        @if (virtualLeftSpacerWidth() > 0) {\n          <col [style.width.px]=\"virtualLeftSpacerWidth()\" />\n        }\n        @for (column of virtualCenterColumns(); track column.id) {\n          @let customWidth = column.id | zTableColumnConfig: zConfig().columns : 'width';\n          <col [style.width]=\"customWidth || 'calc(var(--col-' + column.id + '-size) * 1px)'\" />\n        }\n        @if (virtualRightSpacerWidth() > 0) {\n          <col [style.width.px]=\"virtualRightSpacerWidth()\" />\n        }\n        @for (column of rightLeafColumns(); track column.id) {\n          @let customWidth = column.id | zTableColumnConfig: zConfig().columns : 'width';\n          <col [style.width]=\"customWidth || 'calc(var(--col-' + column.id + '-size) * 1px)'\" />\n        }\n      } @else {\n        @for (column of orderedLeafColumns(); track column.id) {\n          @if (column.getIsVisible()) {\n            @let customWidth = column.id | zTableColumnConfig: zConfig().columns : 'width';\n            <col [style.width]=\"customWidth || 'calc(var(--col-' + column.id + '-size) * 1px)'\" />\n          }\n        }\n      }\n    </colgroup>\n  </ng-template>\n\n  <!-- Header table -->\n  <div\n    class=\"z-thead-wrapper shadow-card\"\n    [class.z-shadow-header]=\"shouldHeaderShowShadow()\"\n    [class.z-scroll-left]=\"hasScrollLeft()\"\n    [class.z-scroll-right]=\"hasScrollRight()\"\n    #theadWrapper>\n    <table [ngStyle]=\"columnSizeVars()\" [style.width.px]=\"table.getTotalSize()\">\n      <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n      <thead>\n        @if (canUseVirtualColumns()) {\n          <tr>\n            @for (header of leftHeaderRow(); track header.id) {\n              @let rowSpan = header | zTableSpan: zConfig().columns : 'headerRowSpan';\n              @let shouldRender = header | zTableCellRender: leftHeaderRow() : zConfig().columns : 'header';\n              @if (rowSpan && shouldRender) {\n                <th\n                  [attr.id]=\"header.column.id\"\n                  [ngStyle]=\"\n                    header.column\n                      | zTablePinningStyles: header : 'header' : table : zConfig().columns : columnSizingInfo()\n                  \"\n                  [class]=\"\n                    (header.column.id | zTableColumnConfig: zConfig().columns : 'headerClass') +\n                    ' ' +\n                    (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass')\n                  \"\n                  [style]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerStyle'\"\n                  [class.z-sticky-left]=\"header.column.getIsPinned() === 'left'\"\n                  [class.z-sticky-right]=\"header.column.getIsPinned() === 'right'\"\n                  [class.z-sticky-left-last]=\"header | zTableCellPin: 'isLastLeftPinned' : zConfig().columns\"\n                  [class.z-sticky-right-first]=\"header | zTableCellPin: 'isFirstRightPinned' : zConfig().columns\"\n                  [class.z-sticky-right-last]=\"header | zTableCellPin: 'isLastRightPinned' : zConfig().columns\"\n                  [class.z-at-left-edge]=\"header | zTableCellOffset: orderedLeafColumns()\"\n                  [class.z-col-drag]=\"header.column.id === 'rowDrag'\"\n                  [class.z-col-select]=\"header.column.id === 'select'\"\n                  [class.z-col-expand]=\"header.column.id === 'expand'\"\n                  [class.z-col-actions]=\"\n                    header.column.id === 'actions' || header.column.id === actionColumnInfo()?.columnId\n                  \"\n                  [attr.rowspan]=\"rowSpan\"\n                  [attr.colspan]=\"header | zTableSpan: zConfig().columns : 'headerColSpan'\">\n                  @if (header.column.id === 'rowDrag') {\n                    <div class=\"flex items-center justify-center\">\n                      <z-icon zType=\"lucideGripVertical\" zSize=\"14\" class=\"text-muted-foreground opacity-70\" />\n                    </div>\n                  } @else if (header.column.id === 'select') {\n                    <div class=\"flex items-center justify-center\">\n                      <z-checkbox\n                        [zChecked]=\"table.getIsAllRowsSelected()\"\n                        [zIndeterminate]=\"table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()\"\n                        (zChange)=\"table.toggleAllRowsSelected()\" />\n                    </div>\n                  } @else if (header.column.id === 'expand') {\n                    <div class=\"flex items-center justify-center\">\n                      <button\n                        type=\"button\"\n                        (click)=\"table.toggleAllRowsExpanded()\"\n                        class=\"hover:bg-muted flex h-6 w-6 cursor-pointer items-center justify-center rounded\">\n                        <z-icon\n                          zType=\"lucideChevronRight\"\n                          zSize=\"14\"\n                          class=\"transition-transform duration-200\"\n                          [class.rotate-90]=\"table.getIsSomeRowsExpanded()\" />\n                      </button>\n                    </div>\n                  } @else {\n                    <div\n                      class=\"flex w-full items-center gap-1\"\n                      [class.justify-center]=\"\n                        (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') ===\n                        'text-center'\n                      \"\n                      [class.justify-end]=\"\n                        (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') === 'text-right'\n                      \">\n                      @let columnEnableOrdering =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enableOrdering';\n                      @let columnEnablePinning =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enablePinning';\n                      @let effectiveEnableOrdering = columnEnableOrdering || zConfig().enableColumnOrdering;\n                      @let effectiveEnablePinning = columnEnablePinning || zConfig().enableColumnPinning;\n                      <ng-template #colOptionsPopoverContent>\n                        <div class=\"flex flex-col gap-1 p-1\">\n                          @if (effectiveEnableOrdering) {\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isFirstMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (click)=\"moveColumnLeft(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowLeft\" zSize=\"14\" />\n                              <span>{{ 'i18n_z_ui_table_move_left' | translate }}</span>\n                            </button>\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isLastMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (click)=\"moveColumnRight(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowRight\" zSize=\"14\" />\n                              <span>{{ 'i18n_z_ui_table_move_right' | translate }}</span>\n                            </button>\n                          }\n                          @if (effectiveEnableOrdering && header.column.getCanPin() && effectiveEnablePinning) {\n                            <div class=\"border-border my-0.5 border-t\"></div>\n                          }\n                          @if (header.column.getCanPin() && effectiveEnablePinning) {\n                            @if (header.column.getIsPinned() !== 'left') {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, 'left'); colOptionsPopover.hideImmediate()\"\n                                class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm\">\n                                <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_left' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned() !== 'right') {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, 'right'); colOptionsPopover.hideImmediate()\"\n                                class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm\">\n                                <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"-rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_right' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned()) {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, false); colOptionsPopover.hideImmediate()\"\n                                class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm\">\n                                <z-icon zType=\"lucideX\" zSize=\"14\" />\n                                <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                              </button>\n                            }\n                          }\n                          @if (hideableColumns().length > 0) {\n                            @if (effectiveEnableOrdering || (header.column.getCanPin() && effectiveEnablePinning)) {\n                              <div class=\"border-border my-0.5 border-t\"></div>\n                            }\n                            <button\n                              type=\"button\"\n                              #colVisPopover=\"zPopover\"\n                              z-popover\n                              [zPopoverContent]=\"colVisPopoverContent\"\n                              zTrigger=\"hover\"\n                              [zShowDelay]=\"150\"\n                              [zHideDelay]=\"200\"\n                              [zManualClose]=\"true\"\n                              [zOutsideClickClose]=\"true\"\n                              zPosition=\"right\"\n                              [zOffset]=\"6\"\n                              class=\"text-foreground hover:bg-muted data-[state=open]:bg-muted flex w-full cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm outline-none\">\n                              <z-icon zType=\"lucideEye\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                              <span class=\"flex-1 text-left\">\n                                {{ 'i18n_z_ui_table_show_hide_columns' | translate }}\n                              </span>\n                              <z-icon zType=\"lucideChevronRight\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                            </button>\n                            <ng-template #colVisPopoverContent>\n                              <div class=\"flex max-h-72 flex-col gap-0.5 overflow-y-auto p-1\" style=\"min-width: 180px\">\n                                @for (col of hideableColumns(); track col.id) {\n                                  <button\n                                    type=\"button\"\n                                    (click)=\"\n                                      toggleColumnVisibility(col.id);\n                                      refreshColumnPopoverPositions(colOptionsPopover, colVisPopover)\n                                    \"\n                                    class=\"hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm\"\n                                    [class.text-foreground]=\"col.getIsVisible()\"\n                                    [class.text-muted-foreground]=\"!col.getIsVisible()\">\n                                    @if (col.getIsVisible()) {\n                                      <z-icon zType=\"lucideCheck\" zSize=\"14\" class=\"text-primary shrink-0\" />\n                                    } @else {\n                                      <span class=\"inline-flex w-3.5 shrink-0\"></span>\n                                    }\n                                    <span class=\"truncate\">{{ col.id | zTableColumnHeader: zConfig().columns }}</span>\n                                  </button>\n                                }\n                              </div>\n                            </ng-template>\n                          }\n                        </div>\n                      </ng-template>\n\n                      @let hasColumnOptions =\n                        (header.column.getCanPin() && effectiveEnablePinning) ||\n                        effectiveEnableOrdering ||\n                        hideableColumns().length > 0;\n                      <div\n                        class=\"z-header-text-wrapper inline-flex max-w-full items-center gap-1 rounded px-1.5 py-1\"\n                        [class.cursor-pointer]=\"hasColumnOptions\"\n                        [class.z-has-options]=\"hasColumnOptions\"\n                        [attr.z-popover]=\"hasColumnOptions ? '' : null\"\n                        #colOptionsPopover=\"zPopover\"\n                        #headerTextWrapper\n                        z-popover\n                        [zPopoverContent]=\"hasColumnOptions ? colOptionsPopoverContent : null\"\n                        zTrigger=\"click\"\n                        zPosition=\"bottom\"\n                        [zOffset]=\"5\"\n                        [attr.tabindex]=\"hasColumnOptions ? 0 : null\"\n                        [attr.role]=\"hasColumnOptions ? 'button' : null\"\n                        [attr.aria-haspopup]=\"hasColumnOptions ? 'menu' : null\">\n                        <ng-container\n                          *flexRender=\"header.column.columnDef.header; props: header.getContext(); let headerContent\">\n                          @if (headerContent | zTableIsTemplateRef) {\n                            <div\n                              class=\"z-template-content\"\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \">\n                              <ng-container\n                                *ngTemplateOutlet=\"headerContent; context: { $implicit: header.getContext() }\" />\n                            </div>\n                          } @else if (headerContent | zTableHasIcon) {\n                            <z-table-icon-text\n                              class=\"min-w-0 truncate\"\n                              [zText]=\"headerContent\"\n                              [zTooltip]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerTooltip'\"\n                              [zTriggerElement]=\"headerTextWrapper\"\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \" />\n                          } @else {\n                            <span\n                              class=\"z-table-cell-text\"\n                              z-tooltip\n                              [zContent]=\"\n                                (header.column.id | zTableColumnConfig: zConfig().columns : 'headerTooltip') ||\n                                headerContent\n                              \"\n                              [zTriggerElement]=\"headerTextWrapper\"\n                              [innerHTML]=\"headerContent | translate | zSafeHtml\"\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \"></span>\n                          }\n                        </ng-container>\n                        @if (hasColumnOptions) {\n                          <z-icon zType=\"lucideChevronDown\" zSize=\"15\" class=\"text-muted-foreground shrink-0\" />\n                        }\n                      </div>\n                      @if ((header.column.getCanSort() && !hasBodyRowSpan()) || header.column.getCanFilter()) {\n                        <z-table-filter [zColumn]=\"$any(header.column)\" [zTable]=\"$any(table)\" />\n                      }\n                    </div>\n                  }\n                  @if (\n                    header.column.id !== 'rowDrag' &&\n                    header.column.id !== 'select' &&\n                    header.column.id !== 'expand' &&\n                    zConfig().enableColumnResizing !== false\n                  ) {\n                    <div\n                      class=\"z-resizer\"\n                      [class.z-is-resizing]=\"header.column.getIsResizing()\"\n                      [class.z-resizer-left]=\"\n                        header.column.getIsPinned() === 'right' || header.column.getIsLastColumn()\n                      \"\n                      (dblclick)=\"header.column.resetSize()\"\n                      [zTableResize]=\"header\"></div>\n                  }\n                </th>\n              }\n            }\n            @if (virtualLeftSpacerWidth() > 0) {\n              <th class=\"pointer-events-none border-0 p-0\" [style.width.px]=\"virtualLeftSpacerWidth()\"></th>\n            }\n            @for (header of virtualCenterHeaderRow(); track header.id) {\n              @let rowSpan = header | zTableSpan: zConfig().columns : 'headerRowSpan';\n              @let shouldRender = header | zTableCellRender: virtualCenterHeaderRow() : zConfig().columns : 'header';\n              @if (rowSpan && shouldRender) {\n                <th\n                  [attr.id]=\"header.column.id\"\n                  [class]=\"\n                    (header.column.id | zTableColumnConfig: zConfig().columns : 'headerClass') +\n                    ' ' +\n                    (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass')\n                  \"\n                  [style]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerStyle'\"\n                  [class.z-col-drag]=\"header.column.id === 'rowDrag'\"\n                  [class.z-col-select]=\"header.column.id === 'select'\"\n                  [class.z-col-expand]=\"header.column.id === 'expand'\"\n                  [class.z-col-actions]=\"\n                    header.column.id === 'actions' || header.column.id === actionColumnInfo()?.columnId\n                  \"\n                  [attr.rowspan]=\"rowSpan\"\n                  [attr.colspan]=\"header | zTableSpan: zConfig().columns : 'headerColSpan'\">\n                  @if (header.column.id === 'rowDrag') {\n                    <div class=\"flex items-center justify-center\">\n                      <z-icon zType=\"lucideGripVertical\" zSize=\"14\" class=\"text-muted-foreground opacity-70\" />\n                    </div>\n                  } @else if (header.column.id === 'select') {\n                    <div class=\"flex items-center justify-center\">\n                      <z-checkbox\n                        [zChecked]=\"table.getIsAllRowsSelected()\"\n                        [zIndeterminate]=\"table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()\"\n                        (zChange)=\"table.toggleAllRowsSelected()\" />\n                    </div>\n                  } @else if (header.column.id === 'expand') {\n                    <div class=\"flex items-center justify-center\">\n                      <button\n                        type=\"button\"\n                        (click)=\"table.toggleAllRowsExpanded()\"\n                        class=\"hover:bg-muted flex h-6 w-6 cursor-pointer items-center justify-center rounded\">\n                        <z-icon\n                          zType=\"lucideChevronRight\"\n                          zSize=\"14\"\n                          class=\"transition-transform duration-200\"\n                          [class.rotate-90]=\"table.getIsSomeRowsExpanded()\" />\n                      </button>\n                    </div>\n                  } @else {\n                    <div\n                      class=\"flex w-full items-center gap-1\"\n                      [class.justify-center]=\"\n                        (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') ===\n                        'text-center'\n                      \"\n                      [class.justify-end]=\"\n                        (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') === 'text-right'\n                      \">\n                      @let columnEnableOrdering =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enableOrdering';\n                      @let columnEnablePinning =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enablePinning';\n                      @let effectiveEnableOrdering = columnEnableOrdering || zConfig().enableColumnOrdering;\n                      @let effectiveEnablePinning = columnEnablePinning || zConfig().enableColumnPinning;\n                      <ng-template #colOptionsPopoverContent>\n                        <div class=\"flex flex-col gap-1 p-1\">\n                          @if (effectiveEnableOrdering) {\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isFirstMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (click)=\"moveColumnLeft(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowLeft\" zSize=\"14\" />\n                              <span>{{ 'i18n_z_ui_table_move_left' | translate }}</span>\n                            </button>\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isLastMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (click)=\"moveColumnRight(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowRight\" zSize=\"14\" />\n                              <span>{{ 'i18n_z_ui_table_move_right' | translate }}</span>\n                            </button>\n                          }\n                          @if (effectiveEnableOrdering && header.column.getCanPin() && effectiveEnablePinning) {\n                            <div class=\"border-border my-0.5 border-t\"></div>\n                          }\n                          @if (header.column.getCanPin() && effectiveEnablePinning) {\n                            @if (header.column.getIsPinned() !== 'left') {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, 'left'); colOptionsPopover.hideImmediate()\"\n                                class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm\">\n                                <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_left' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned() !== 'right') {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, 'right'); colOptionsPopover.hideImmediate()\"\n                                class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm\">\n                                <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"-rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_right' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned()) {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, false); colOptionsPopover.hideImmediate()\"\n                                class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm\">\n                                <z-icon zType=\"lucideX\" zSize=\"14\" />\n                                <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                              </button>\n                            }\n                          }\n                          @if (hideableColumns().length > 0) {\n                            @if (effectiveEnableOrdering || (header.column.getCanPin() && effectiveEnablePinning)) {\n                              <div class=\"border-border my-0.5 border-t\"></div>\n                            }\n                            <button\n                              type=\"button\"\n                              #colVisPopover=\"zPopover\"\n                              z-popover\n                              [zPopoverContent]=\"colVisPopoverContent\"\n                              zTrigger=\"hover\"\n                              [zShowDelay]=\"150\"\n                              [zHideDelay]=\"200\"\n                              [zManualClose]=\"true\"\n                              [zOutsideClickClose]=\"true\"\n                              zPosition=\"right\"\n                              [zOffset]=\"6\"\n                              class=\"text-foreground hover:bg-muted data-[state=open]:bg-muted flex w-full cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm outline-none\">\n                              <z-icon zType=\"lucideEye\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                              <span class=\"flex-1 text-left\">\n                                {{ 'i18n_z_ui_table_show_hide_columns' | translate }}\n                              </span>\n                              <z-icon zType=\"lucideChevronRight\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                            </button>\n                            <ng-template #colVisPopoverContent>\n                              <div class=\"flex max-h-72 flex-col gap-0.5 overflow-y-auto p-1\" style=\"min-width: 180px\">\n                                @for (col of hideableColumns(); track col.id) {\n                                  <button\n                                    type=\"button\"\n                                    (click)=\"\n                                      toggleColumnVisibility(col.id);\n                                      refreshColumnPopoverPositions(colOptionsPopover, colVisPopover)\n                                    \"\n                                    class=\"hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm\"\n                                    [class.text-foreground]=\"col.getIsVisible()\"\n                                    [class.text-muted-foreground]=\"!col.getIsVisible()\">\n                                    @if (col.getIsVisible()) {\n                                      <z-icon zType=\"lucideCheck\" zSize=\"14\" class=\"text-primary shrink-0\" />\n                                    } @else {\n                                      <span class=\"inline-flex w-3.5 shrink-0\"></span>\n                                    }\n                                    <span class=\"truncate\">{{ col.id | zTableColumnHeader: zConfig().columns }}</span>\n                                  </button>\n                                }\n                              </div>\n                            </ng-template>\n                          }\n                        </div>\n                      </ng-template>\n\n                      @let hasColumnOptions =\n                        (header.column.getCanPin() && effectiveEnablePinning) ||\n                        effectiveEnableOrdering ||\n                        hideableColumns().length > 0;\n                      <div\n                        class=\"z-header-text-wrapper inline-flex max-w-full items-center gap-1 rounded px-1.5 py-1\"\n                        [class.cursor-pointer]=\"hasColumnOptions\"\n                        [class.z-has-options]=\"hasColumnOptions\"\n                        [attr.z-popover]=\"hasColumnOptions ? '' : null\"\n                        #colOptionsPopover=\"zPopover\"\n                        #headerTextWrapper\n                        z-popover\n                        [zPopoverContent]=\"hasColumnOptions ? colOptionsPopoverContent : null\"\n                        zTrigger=\"click\"\n                        zPosition=\"bottom\"\n                        [zOffset]=\"5\"\n                        [attr.tabindex]=\"hasColumnOptions ? 0 : null\"\n                        [attr.role]=\"hasColumnOptions ? 'button' : null\"\n                        [attr.aria-haspopup]=\"hasColumnOptions ? 'menu' : null\">\n                        <ng-container\n                          *flexRender=\"header.column.columnDef.header; props: header.getContext(); let headerContent\">\n                          @if (headerContent | zTableIsTemplateRef) {\n                            <div\n                              class=\"z-template-content\"\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \">\n                              <ng-container\n                                *ngTemplateOutlet=\"headerContent; context: { $implicit: header.getContext() }\" />\n                            </div>\n                          } @else if (headerContent | zTableHasIcon) {\n                            <z-table-icon-text\n                              class=\"min-w-0 truncate\"\n                              [zText]=\"headerContent\"\n                              [zTooltip]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerTooltip'\"\n                              [zTriggerElement]=\"headerTextWrapper\"\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \" />\n                          } @else {\n                            <span\n                              class=\"z-table-cell-text\"\n                              z-tooltip\n                              [zContent]=\"\n                                (header.column.id | zTableColumnConfig: zConfig().columns : 'headerTooltip') ||\n                                headerContent\n                              \"\n                              [zTriggerElement]=\"headerTextWrapper\"\n                              [innerHTML]=\"headerContent | translate | zSafeHtml\"\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \"></span>\n                          }\n                        </ng-container>\n                        @if (hasColumnOptions) {\n                          <z-icon zType=\"lucideChevronDown\" zSize=\"15\" class=\"text-muted-foreground shrink-0\" />\n                        }\n                      </div>\n                      @if ((header.column.getCanSort() && !hasBodyRowSpan()) || header.column.getCanFilter()) {\n                        <z-table-filter [zColumn]=\"$any(header.column)\" [zTable]=\"$any(table)\" />\n                      }\n                    </div>\n                  }\n                  @if (\n                    header.column.id !== 'rowDrag' &&\n                    header.column.id !== 'select' &&\n                    header.column.id !== 'expand' &&\n                    zConfig().enableColumnResizing !== false\n                  ) {\n                    <div\n                      class=\"z-resizer\"\n                      [class.z-is-resizing]=\"header.column.getIsResizing()\"\n                      [class.z-resizer-left]=\"\n                        header.column.getIsPinned() === 'right' || header.column.getIsLastColumn()\n                      \"\n                      (dblclick)=\"header.column.resetSize()\"\n                      [zTableResize]=\"header\"></div>\n                  }\n                </th>\n              }\n            }\n            @if (virtualRightSpacerWidth() > 0) {\n              <th class=\"pointer-events-none border-0 p-0\" [style.width.px]=\"virtualRightSpacerWidth()\"></th>\n            }\n            @for (header of rightHeaderRow(); track header.id) {\n              @let rowSpan = header | zTableSpan: zConfig().columns : 'headerRowSpan';\n              @let shouldRender = header | zTableCellRender: rightHeaderRow() : zConfig().columns : 'header';\n              @if (rowSpan && shouldRender) {\n                <th\n                  [attr.id]=\"header.column.id\"\n                  [ngStyle]=\"\n                    header.column\n                      | zTablePinningStyles: header : 'header' : table : zConfig().columns : columnSizingInfo()\n                  \"\n                  [class]=\"\n                    (header.column.id | zTableColumnConfig: zConfig().columns : 'headerClass') +\n                    ' ' +\n                    (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass')\n                  \"\n                  [style]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerStyle'\"\n                  [class.z-sticky-left]=\"header.column.getIsPinned() === 'left'\"\n                  [class.z-sticky-right]=\"header.column.getIsPinned() === 'right'\"\n                  [class.z-sticky-left-last]=\"header | zTableCellPin: 'isLastLeftPinned' : zConfig().columns\"\n                  [class.z-sticky-right-first]=\"header | zTableCellPin: 'isFirstRightPinned' : zConfig().columns\"\n                  [class.z-sticky-right-last]=\"header | zTableCellPin: 'isLastRightPinned' : zConfig().columns\"\n                  [class.z-at-left-edge]=\"header | zTableCellOffset: orderedLeafColumns()\"\n                  [class.z-col-drag]=\"header.column.id === 'rowDrag'\"\n                  [class.z-col-select]=\"header.column.id === 'select'\"\n                  [class.z-col-expand]=\"header.column.id === 'expand'\"\n                  [class.z-col-actions]=\"\n                    header.column.id === 'actions' || header.column.id === actionColumnInfo()?.columnId\n                  \"\n                  [attr.rowspan]=\"rowSpan\"\n                  [attr.colspan]=\"header | zTableSpan: zConfig().columns : 'headerColSpan'\">\n                  @if (header.column.id === 'rowDrag') {\n                    <div class=\"flex items-center justify-center\">\n                      <z-icon zType=\"lucideGripVertical\" zSize=\"14\" class=\"text-muted-foreground opacity-70\" />\n                    </div>\n                  } @else if (header.column.id === 'select') {\n                    <!-- Header Checkbox -->\n                    <div class=\"flex items-center justify-center\">\n                      <z-checkbox\n                        [zChecked]=\"table.getIsAllRowsSelected()\"\n                        [zIndeterminate]=\"table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()\"\n                        (zChange)=\"table.toggleAllRowsSelected()\" />\n                    </div>\n                  } @else if (header.column.id === 'expand') {\n                    <!-- Expand All Button -->\n                    <div class=\"flex items-center justify-center\">\n                      <button\n                        type=\"button\"\n                        (click)=\"table.toggleAllRowsExpanded()\"\n                        class=\"hover:bg-muted flex h-6 w-6 cursor-pointer items-center justify-center rounded\">\n                        <z-icon\n                          zType=\"lucideChevronRight\"\n                          zSize=\"14\"\n                          class=\"transition-transform duration-200\"\n                          [class.rotate-90]=\"table.getIsSomeRowsExpanded()\" />\n                      </button>\n                    </div>\n                  } @else {\n                    <!-- Header Content with Sort and Pin -->\n                    <div\n                      class=\"flex w-full items-center gap-1\"\n                      [class.justify-center]=\"\n                        (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') ===\n                        'text-center'\n                      \"\n                      [class.justify-end]=\"\n                        (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') === 'text-right'\n                      \">\n                      <!-- Column Options Popover Template -->\n                      @let columnEnableOrdering =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enableOrdering';\n                      @let columnEnablePinning =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enablePinning';\n                      @let effectiveEnableOrdering = columnEnableOrdering || zConfig().enableColumnOrdering;\n                      @let effectiveEnablePinning = columnEnablePinning || zConfig().enableColumnPinning;\n                      <ng-template #colOptionsPopoverContent>\n                        <div class=\"flex flex-col gap-1 p-1\">\n                          @if (effectiveEnableOrdering) {\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isFirstMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (click)=\"moveColumnLeft(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowLeft\" zSize=\"14\" />\n                              <span>{{ 'i18n_z_ui_table_move_left' | translate }}</span>\n                            </button>\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isLastMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (click)=\"moveColumnRight(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowRight\" zSize=\"14\" />\n                              <span>{{ 'i18n_z_ui_table_move_right' | translate }}</span>\n                            </button>\n                          }\n                          @if (effectiveEnableOrdering && header.column.getCanPin() && effectiveEnablePinning) {\n                            <div class=\"border-border my-0.5 border-t\"></div>\n                          }\n                          @if (header.column.getCanPin() && effectiveEnablePinning) {\n                            @if (header.column.getIsPinned() !== 'left') {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, 'left'); colOptionsPopover.hideImmediate()\"\n                                class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm\">\n                                <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_left' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned() !== 'right') {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, 'right'); colOptionsPopover.hideImmediate()\"\n                                class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm\">\n                                <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"-rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_right' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned()) {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, false); colOptionsPopover.hideImmediate()\"\n                                class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm\">\n                                <z-icon zType=\"lucideX\" zSize=\"14\" />\n                                <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                              </button>\n                            }\n                          }\n                          @if (hideableColumns().length > 0) {\n                            @if (effectiveEnableOrdering || (header.column.getCanPin() && effectiveEnablePinning)) {\n                              <div class=\"border-border my-0.5 border-t\"></div>\n                            }\n                            <button\n                              type=\"button\"\n                              #colVisPopover=\"zPopover\"\n                              z-popover\n                              [zPopoverContent]=\"colVisPopoverContent\"\n                              zTrigger=\"hover\"\n                              [zShowDelay]=\"150\"\n                              [zHideDelay]=\"200\"\n                              [zManualClose]=\"true\"\n                              [zOutsideClickClose]=\"true\"\n                              zPosition=\"right\"\n                              [zOffset]=\"6\"\n                              class=\"text-foreground hover:bg-muted data-[state=open]:bg-muted flex w-full cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm outline-none\">\n                              <z-icon zType=\"lucideEye\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                              <span class=\"flex-1 text-left\">\n                                {{ 'i18n_z_ui_table_show_hide_columns' | translate }}\n                              </span>\n                              <z-icon zType=\"lucideChevronRight\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                            </button>\n                            <ng-template #colVisPopoverContent>\n                              <div class=\"flex max-h-72 flex-col gap-0.5 overflow-y-auto p-1\" style=\"min-width: 180px\">\n                                @for (col of hideableColumns(); track col.id) {\n                                  <button\n                                    type=\"button\"\n                                    (click)=\"\n                                      toggleColumnVisibility(col.id);\n                                      refreshColumnPopoverPositions(colOptionsPopover, colVisPopover)\n                                    \"\n                                    class=\"hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm\"\n                                    [class.text-foreground]=\"col.getIsVisible()\"\n                                    [class.text-muted-foreground]=\"!col.getIsVisible()\">\n                                    @if (col.getIsVisible()) {\n                                      <z-icon zType=\"lucideCheck\" zSize=\"14\" class=\"text-primary shrink-0\" />\n                                    } @else {\n                                      <span class=\"inline-flex w-3.5 shrink-0\"></span>\n                                    }\n                                    <span class=\"truncate\">{{ col.id | zTableColumnHeader: zConfig().columns }}</span>\n                                  </button>\n                                }\n                              </div>\n                            </ng-template>\n                          }\n                        </div>\n                      </ng-template>\n\n                      @let hasColumnOptions =\n                        (header.column.getCanPin() && effectiveEnablePinning) ||\n                        effectiveEnableOrdering ||\n                        hideableColumns().length > 0;\n                      <div\n                        class=\"z-header-text-wrapper inline-flex max-w-full items-center gap-1 rounded px-1.5 py-1\"\n                        [class.cursor-pointer]=\"hasColumnOptions\"\n                        [class.z-has-options]=\"hasColumnOptions\"\n                        [attr.z-popover]=\"hasColumnOptions ? '' : null\"\n                        #colOptionsPopover=\"zPopover\"\n                        #headerTextWrapper\n                        z-popover\n                        [zPopoverContent]=\"hasColumnOptions ? colOptionsPopoverContent : null\"\n                        zTrigger=\"click\"\n                        zPosition=\"bottom\"\n                        [zOffset]=\"5\"\n                        [attr.tabindex]=\"hasColumnOptions ? 0 : null\"\n                        [attr.role]=\"hasColumnOptions ? 'button' : null\"\n                        [attr.aria-haspopup]=\"hasColumnOptions ? 'menu' : null\">\n                        <ng-container\n                          *flexRender=\"header.column.columnDef.header; props: header.getContext(); let headerContent\">\n                          @if (headerContent | zTableIsTemplateRef) {\n                            <div\n                              class=\"z-template-content\"\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerStyle'\">\n                              <ng-container\n                                *ngTemplateOutlet=\"headerContent; context: { $implicit: header.getContext() }\" />\n                            </div>\n                          } @else if (headerContent | zTableHasIcon) {\n                            <z-table-icon-text\n                              class=\"min-w-0 truncate\"\n                              [zText]=\"headerContent\"\n                              [zTooltip]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerTooltip'\"\n                              [zTriggerElement]=\"headerTextWrapper\"\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \" />\n                          } @else {\n                            <span\n                              class=\"z-table-cell-text\"\n                              z-tooltip\n                              [zContent]=\"\n                                (header.column.id | zTableColumnConfig: zConfig().columns : 'headerTooltip') ||\n                                headerContent\n                              \"\n                              [zTriggerElement]=\"headerTextWrapper\"\n                              [innerHTML]=\"headerContent | translate | zSafeHtml\"\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \"></span>\n                          }\n                        </ng-container>\n                        <!-- Dropdown indicator when has options (between text and sort icon) -->\n                        @if (hasColumnOptions) {\n                          <z-icon zType=\"lucideChevronDown\" zSize=\"15\" class=\"text-muted-foreground shrink-0\" />\n                        }\n                      </div>\n                      <!-- Sort Icon (outside wrapper, no hover background) -->\n                      @if ((header.column.getCanSort() && !hasBodyRowSpan()) || header.column.getCanFilter()) {\n                        <z-table-filter [zColumn]=\"$any(header.column)\" [zTable]=\"$any(table)\" />\n                      }\n                    </div>\n                  }\n                  <!-- Column Resizer -->\n                  @if (\n                    header.column.id !== 'rowDrag' &&\n                    header.column.id !== 'select' &&\n                    header.column.id !== 'expand' &&\n                    zConfig().enableColumnResizing !== false\n                  ) {\n                    <div\n                      class=\"z-resizer\"\n                      [class.z-is-resizing]=\"header.column.getIsResizing()\"\n                      [class.z-resizer-left]=\"\n                        header.column.getIsPinned() === 'right' || header.column.getIsLastColumn()\n                      \"\n                      (dblclick)=\"header.column.resetSize()\"\n                      [zTableResize]=\"header\"></div>\n                  }\n                </th>\n              }\n            }\n          </tr>\n        } @else {\n          @for (headerGroup of orderedHeaderGroups(); track headerGroup.id) {\n            <tr>\n              @for (header of headerGroup.headers; track header.id) {\n                @let rowSpan = header | zTableSpan: zConfig().columns : 'headerRowSpan';\n                @let shouldRender = header | zTableCellRender: headerGroup.headers : zConfig().columns : 'header';\n                @if (rowSpan && shouldRender) {\n                  <th\n                    [attr.id]=\"header.column.id\"\n                    [ngStyle]=\"\n                      header.column\n                        | zTablePinningStyles: header : 'header' : table : zConfig().columns : columnSizingInfo()\n                    \"\n                    [class]=\"\n                      (header.column.id | zTableColumnConfig: zConfig().columns : 'headerClass') +\n                      ' ' +\n                      (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass')\n                    \"\n                    [style]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerStyle'\"\n                    [class.z-sticky-left]=\"header.column.getIsPinned() === 'left'\"\n                    [class.z-sticky-right]=\"header.column.getIsPinned() === 'right'\"\n                    [class.z-sticky-left-last]=\"header | zTableCellPin: 'isLastLeftPinned' : zConfig().columns\"\n                    [class.z-sticky-right-first]=\"header | zTableCellPin: 'isFirstRightPinned' : zConfig().columns\"\n                    [class.z-sticky-right-last]=\"header | zTableCellPin: 'isLastRightPinned' : zConfig().columns\"\n                    [class.z-at-left-edge]=\"header | zTableCellOffset: orderedLeafColumns()\"\n                    [class.z-col-drag]=\"header.column.id === 'rowDrag'\"\n                    [class.z-col-select]=\"header.column.id === 'select'\"\n                    [class.z-col-expand]=\"header.column.id === 'expand'\"\n                    [class.z-col-actions]=\"\n                      header.column.id === 'actions' || header.column.id === actionColumnInfo()?.columnId\n                    \"\n                    [attr.rowspan]=\"rowSpan\"\n                    [attr.colspan]=\"header | zTableSpan: zConfig().columns : 'headerColSpan'\">\n                    @if (header.column.id === 'rowDrag') {\n                      <div class=\"flex items-center justify-center\">\n                        <z-icon zType=\"lucideGripVertical\" zSize=\"14\" class=\"text-muted-foreground opacity-70\" />\n                      </div>\n                    } @else if (header.column.id === 'select') {\n                      <div class=\"flex items-center justify-center\">\n                        <z-checkbox\n                          [zChecked]=\"table.getIsAllRowsSelected()\"\n                          [zIndeterminate]=\"table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()\"\n                          (zChange)=\"table.toggleAllRowsSelected()\" />\n                      </div>\n                    } @else if (header.column.id === 'expand') {\n                      <div class=\"flex items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          (click)=\"table.toggleAllRowsExpanded()\"\n                          class=\"hover:bg-muted flex h-6 w-6 cursor-pointer items-center justify-center rounded\">\n                          <z-icon\n                            zType=\"lucideChevronRight\"\n                            zSize=\"14\"\n                            class=\"transition-transform duration-200\"\n                            [class.rotate-90]=\"table.getIsSomeRowsExpanded()\" />\n                        </button>\n                      </div>\n                    } @else {\n                      <div\n                        class=\"flex w-full items-center gap-1\"\n                        [class.justify-center]=\"\n                          (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') ===\n                          'text-center'\n                        \"\n                        [class.justify-end]=\"\n                          (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') ===\n                          'text-right'\n                        \">\n                        @let columnEnableOrdering =\n                          header.column.id | zTableColumnConfig: zConfig().columns : 'enableOrdering';\n                        @let columnEnablePinning =\n                          header.column.id | zTableColumnConfig: zConfig().columns : 'enablePinning';\n                        @let effectiveEnableOrdering = columnEnableOrdering || zConfig().enableColumnOrdering;\n                        @let effectiveEnablePinning = columnEnablePinning || zConfig().enableColumnPinning;\n                        <ng-template #colOptionsPopoverContent>\n                          <div class=\"flex flex-col gap-1 p-1\">\n                            @if (effectiveEnableOrdering) {\n                              <button\n                                type=\"button\"\n                                [disabled]=\"isFirstMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                                (click)=\"moveColumnLeft(header.column.id); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted flex min-h-8 cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-[0.9375rem] outline-none disabled:pointer-events-none disabled:opacity-40\">\n                                <z-icon zType=\"lucideArrowLeft\" zSize=\"15\" />\n                                <span>{{ 'i18n_z_ui_table_move_left' | translate }}</span>\n                              </button>\n                              <button\n                                type=\"button\"\n                                [disabled]=\"isLastMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                                (click)=\"moveColumnRight(header.column.id); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted flex min-h-8 cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-[0.9375rem] outline-none disabled:pointer-events-none disabled:opacity-40\">\n                                <z-icon zType=\"lucideArrowRight\" zSize=\"15\" />\n                                <span>{{ 'i18n_z_ui_table_move_right' | translate }}</span>\n                              </button>\n                            }\n                            @if (effectiveEnableOrdering && header.column.getCanPin() && effectiveEnablePinning) {\n                              <div class=\"border-border my-0.5 border-t\"></div>\n                            }\n                            @if (header.column.getCanPin() && effectiveEnablePinning) {\n                              @if (header.column.getIsPinned() !== 'left') {\n                                <button\n                                  type=\"button\"\n                                  (click)=\"handleColumnPin(header.column.id, 'left'); colOptionsPopover.hideImmediate()\"\n                                  class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted flex min-h-8 cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-[0.9375rem] outline-none\">\n                                  <z-icon zType=\"lucidePin\" zSize=\"15\" class=\"rotate-90\" />\n                                  <span>{{ 'i18n_z_ui_table_pin_left' | translate }}</span>\n                                </button>\n                              }\n                              @if (header.column.getIsPinned() !== 'right') {\n                                <button\n                                  type=\"button\"\n                                  (click)=\"\n                                    handleColumnPin(header.column.id, 'right'); colOptionsPopover.hideImmediate()\n                                  \"\n                                  class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted flex min-h-8 cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-[0.9375rem] outline-none\">\n                                  <z-icon zType=\"lucidePin\" zSize=\"15\" class=\"-rotate-90\" />\n                                  <span>{{ 'i18n_z_ui_table_pin_right' | translate }}</span>\n                                </button>\n                              }\n                              @if (header.column.getIsPinned()) {\n                                <button\n                                  type=\"button\"\n                                  (click)=\"handleColumnPin(header.column.id, false); colOptionsPopover.hideImmediate()\"\n                                  class=\"z-column-menu-item text-destructive hover:bg-destructive/10 focus:bg-destructive/10 flex min-h-8 cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-[0.9375rem] outline-none\">\n                                  <z-icon zType=\"lucideX\" zSize=\"15\" />\n                                  <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                                </button>\n                              }\n                            }\n                            @if (hideableColumns().length > 0) {\n                              @if (effectiveEnableOrdering || (header.column.getCanPin() && effectiveEnablePinning)) {\n                                <div class=\"border-border my-0.5 border-t\"></div>\n                              }\n                              <button\n                                type=\"button\"\n                                #colVisPopover=\"zPopover\"\n                                z-popover\n                                [zPopoverContent]=\"colVisPopoverContent\"\n                                zTrigger=\"hover\"\n                                [zShowDelay]=\"150\"\n                                [zHideDelay]=\"200\"\n                                [zManualClose]=\"true\"\n                                [zOutsideClickClose]=\"true\"\n                                zPosition=\"right\"\n                                [zOffset]=\"6\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted data-[state=open]:bg-muted flex min-h-8 w-full cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-[0.9375rem] outline-none\">\n                                <z-icon zType=\"lucideEye\" zSize=\"15\" class=\"text-muted-foreground shrink-0\" />\n                                <span class=\"flex-1 text-left\">\n                                  {{ 'i18n_z_ui_table_show_hide_columns' | translate }}\n                                </span>\n                                <z-icon zType=\"lucideChevronRight\" zSize=\"15\" class=\"text-muted-foreground shrink-0\" />\n                              </button>\n                              <ng-template #colVisPopoverContent>\n                                <div\n                                  class=\"flex max-h-72 flex-col gap-0.5 overflow-y-auto p-1\"\n                                  style=\"min-width: 180px\">\n                                  @for (col of hideableColumns(); track col.id) {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"\n                                        toggleColumnVisibility(col.id);\n                                        refreshColumnPopoverPositions(colOptionsPopover, colVisPopover)\n                                      \"\n                                      class=\"z-column-menu-item hover:bg-muted focus:bg-muted flex min-h-8 cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-[0.9375rem] outline-none\"\n                                      [class.text-foreground]=\"col.getIsVisible()\"\n                                      [class.text-muted-foreground]=\"!col.getIsVisible()\">\n                                      @if (col.getIsVisible()) {\n                                        <z-icon zType=\"lucideCheck\" zSize=\"15\" class=\"text-primary shrink-0\" />\n                                      } @else {\n                                        <span class=\"inline-flex w-[15px] shrink-0\"></span>\n                                      }\n                                      <span class=\"truncate\">{{ col.id | zTableColumnHeader: zConfig().columns }}</span>\n                                    </button>\n                                  }\n                                </div>\n                              </ng-template>\n                            }\n                          </div>\n                        </ng-template>\n\n                        @let hasColumnOptions =\n                          (header.column.getCanPin() && effectiveEnablePinning) ||\n                          effectiveEnableOrdering ||\n                          hideableColumns().length > 0;\n                        <div\n                          class=\"z-header-text-wrapper inline-flex max-w-full items-center gap-1 rounded px-1.5 py-1\"\n                          [class.cursor-pointer]=\"hasColumnOptions\"\n                          [class.z-has-options]=\"hasColumnOptions\"\n                          [attr.z-popover]=\"hasColumnOptions ? '' : null\"\n                          #colOptionsPopover=\"zPopover\"\n                          #headerTextWrapper\n                          z-popover\n                          [zPopoverContent]=\"hasColumnOptions ? colOptionsPopoverContent : null\"\n                          zTrigger=\"click\"\n                          zPosition=\"bottom\"\n                          [zOffset]=\"5\"\n                          [attr.tabindex]=\"hasColumnOptions ? 0 : null\"\n                          [attr.role]=\"hasColumnOptions ? 'button' : null\"\n                          [attr.aria-haspopup]=\"hasColumnOptions ? 'menu' : null\">\n                          <ng-container\n                            *flexRender=\"header.column.columnDef.header; props: header.getContext(); let headerContent\">\n                            @if (headerContent | zTableIsTemplateRef) {\n                              <div\n                                class=\"z-template-content\"\n                                [ngClass]=\"\n                                  header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                                \"\n                                [ngStyle]=\"\n                                  header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                                \">\n                                <ng-container\n                                  *ngTemplateOutlet=\"headerContent; context: { $implicit: header.getContext() }\" />\n                              </div>\n                            } @else if (headerContent | zTableHasIcon) {\n                              <z-table-icon-text\n                                class=\"min-w-0 truncate\"\n                                [zText]=\"headerContent\"\n                                [zTooltip]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerTooltip'\"\n                                [zTriggerElement]=\"headerTextWrapper\"\n                                [ngClass]=\"\n                                  header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                                \"\n                                [ngStyle]=\"\n                                  header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                                \" />\n                            } @else {\n                              <span\n                                class=\"z-table-cell-text\"\n                                z-tooltip\n                                [zContent]=\"\n                                  (header.column.id | zTableColumnConfig: zConfig().columns : 'headerTooltip') ||\n                                  headerContent\n                                \"\n                                [zTriggerElement]=\"headerTextWrapper\"\n                                [innerHTML]=\"headerContent | translate | zSafeHtml\"\n                                [ngClass]=\"\n                                  header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                                \"\n                                [ngStyle]=\"\n                                  header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                                \"></span>\n                            }\n                          </ng-container>\n                          @if (hasColumnOptions) {\n                            <z-icon zType=\"lucideChevronDown\" zSize=\"15\" class=\"text-muted-foreground shrink-0\" />\n                          }\n                        </div>\n                        @if ((header.column.getCanSort() && !hasBodyRowSpan()) || header.column.getCanFilter()) {\n                          <z-table-filter [zColumn]=\"$any(header.column)\" [zTable]=\"$any(table)\" />\n                        }\n                      </div>\n                    }\n                    @if (\n                      header.column.id !== 'rowDrag' &&\n                      header.column.id !== 'select' &&\n                      header.column.id !== 'expand' &&\n                      zConfig().enableColumnResizing !== false\n                    ) {\n                      <div\n                        class=\"z-resizer\"\n                        [class.z-is-resizing]=\"header.column.getIsResizing()\"\n                        [class.z-resizer-left]=\"\n                          header.column.getIsPinned() === 'right' || header.column.getIsLastColumn()\n                        \"\n                        (dblclick)=\"header.column.resetSize()\"\n                        [zTableResize]=\"header\"></div>\n                    }\n                  </th>\n                }\n              }\n            </tr>\n          }\n        }\n      </thead>\n    </table>\n  </div>\n\n  <!-- Body table -->\n  <div\n    class=\"z-tbody-wrapper relative\"\n    #tbodyContainer\n    [class.z-scroll-left]=\"hasScrollLeft()\"\n    [class.z-scroll-right]=\"hasScrollRight()\">\n    @if (isLoading() || isProcessing()) {\n      <!-- Loading State -->\n      @if (zConfig().useSkeleton) {\n        <!-- Skeleton Loading -->\n        <div class=\"animate-in fade-in flex h-full flex-col duration-200\">\n          @for (i of skeletonRows(); track $index; let last = $last) {\n            <div\n              class=\"border-border box-border flex flex-1 flex-col items-start justify-center gap-1.5 px-2\"\n              [class.border-b]=\"!last\">\n              <z-skeleton zType=\"bar\" zWidth=\"100%\" zHeight=\"22px\" zRadius=\"4px\" />\n              <z-skeleton zType=\"bar\" zWidth=\"50%\" zHeight=\"14px\" zRadius=\"4px\" />\n            </div>\n          }\n        </div>\n      } @else {\n        <!-- Spinner Loading -->\n        <div class=\"z-loading-state\">\n          <z-loading [zLoading]=\"true\" zSize=\"lg\" [zText]=\"'i18n_z_ui_table_loading' | translate\" />\n        </div>\n      }\n    } @else if (isEmpty()) {\n      <div class=\"z-empty-state\">\n        @if (isNoSearchResults()) {\n          <z-empty zIcon=\"lucideSearchX\" zSize=\"sm\" [zMessage]=\"'i18n_z_ui_table_no_results' | translate\" />\n        } @else {\n          <z-empty zIcon=\"lucidePackageOpen\" zSize=\"sm\" [zMessage]=\"'i18n_z_ui_table_no_data' | translate\" />\n        }\n      </div>\n    } @else {\n      <ng-scrollbar class=\"z-tbody-scrollbar\" #tbodyWrapper track=\"all\" cdkScrollable (scroll)=\"onTbodyScroll($event)\">\n        @if (isVirtual()) {\n          <!-- Virtual Scroll Mode -->\n          <div\n            class=\"z-virtual-scroll-inner\"\n            cdkDropList\n            [cdkDropListData]=\"table.getRowModel().rows\"\n            [cdkDropListDisabled]=\"!isVirtualRowDragEnabled()\"\n            cdkDropListOrientation=\"vertical\"\n            [cdkDropListAutoScrollStep]=\"20\"\n            (cdkDropListDropped)=\"onRowDrop($event)\"\n            [style.height.px]=\"virtualizer.getTotalSize()\"\n            [style.min-width.px]=\"table.getTotalSize()\">\n            @for (virtualItem of virtualizer.getVirtualItems(); track virtualItem.index) {\n              @let groupRows = dynamicGroupRows()[virtualItem.index] || [];\n              <div\n                #virtualRow\n                class=\"z-virtual-row\"\n                cdkDrag\n                cdkDragLockAxis=\"y\"\n                cdkDragPreviewClass=\"z-table-row-drag-preview\"\n                cdkDragPlaceholderClass=\"z-table-row-drag-placeholder\"\n                [cdkDragData]=\"groupRows[0]\"\n                [cdkDragDisabled]=\"!isVirtualRowDragEnabled() || groupRows.length !== 1\"\n                (cdkDragStarted)=\"onRowDragStarted()\"\n                (cdkDragEnded)=\"onRowDragEnded($event)\"\n                [attr.data-index]=\"virtualItem.index\"\n                [style.height.px]=\"\n                  dynamicSize() ? null : (dynamicGroupHeights()[virtualItem.index] ?? groupSize() * virtualRowHeight())\n                \"\n                [style.transform]=\"'translate3d(0,' + virtualItem.start + 'px,0)'\">\n                <ng-template cdkDragPreview>\n                  @if (groupRows[0]; as previewRow) {\n                    <div class=\"z-table-row-drag-preview\" [style.width.px]=\"table.getTotalSize()\">\n                      @for (cell of previewRow.getVisibleCells(); track cell.id) {\n                        @let isPreviewCellVisible = cell | zTableCellVisible: zConfig().columns;\n                        @let shouldRenderPreviewColSpan =\n                          cell | zTableCellRender: previewRow.getVisibleCells() : zConfig().columns : 'body';\n                        @if (isPreviewCellVisible && shouldRenderPreviewColSpan) {\n                          <div\n                            class=\"z-table-row-drag-preview-cell\"\n                            [style.width.px]=\"cell.column.getSize()\"\n                            [class.z-table-row-drag-preview-handle]=\"cell.column.id === 'rowDrag'\">\n                            @if (cell.column.id === 'rowDrag') {\n                              <z-icon zType=\"lucideGripVertical\" zSize=\"14\" class=\"text-muted-foreground\" />\n                            } @else {\n                              <span class=\"truncate\">{{ cell.getValue() ?? '' }}</span>\n                            }\n                          </div>\n                        }\n                      }\n                    </div>\n                  }\n                </ng-template>\n\n                <ng-template cdkDragPlaceholder>\n                  <div class=\"z-table-row-drag-placeholder-inner\" [style.height.px]=\"virtualItem.size\"></div>\n                </ng-template>\n\n                <table [ngStyle]=\"columnSizeVars()\" [style.width.px]=\"table.getTotalSize()\">\n                  <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n                  <tbody\n                    [class.z-has-vertical-scroll]=\"hasVerticalScroll()\"\n                    [class.z-last-row-touches-bottom]=\"lastRowTouchesBottom()\">\n                    @for (row of groupRows; track row.id) {\n                      <tr\n                        z-table-row-hover\n                        [style.height.px]=\"dynamicSize() ? null : virtualRowHeight()\"\n                        [style.min-height.px]=\"dynamicSize() ? virtualRowHeight() : null\"\n                        [class.z-child-row]=\"row.depth > 0\"\n                        [class.z-selected]=\"row.getIsSelected()\"\n                        [class.z-indeterminate-selected]=\"row.getIsSomeSelected() && !row.getIsSelected()\">\n                        @for (cell of row.getVisibleCells(); track cell.id) {\n                          @if (\n                            canUseVirtualColumns() &&\n                            virtualLeftSpacerWidth() > 0 &&\n                            cell.column.id === firstVirtualCenterColumnId()\n                          ) {\n                            <td\n                              class=\"pointer-events-none border-0 p-0\"\n                              [style.width.px]=\"virtualLeftSpacerWidth()\"></td>\n                          }\n                          @let shouldRenderRowSpan =\n                            cell | zTableSpan: zConfig().columns : 'shouldRender' : table.getRowModel().rows;\n                          @let shouldRenderColSpan =\n                            cell | zTableCellRender: row.getVisibleCells() : zConfig().columns : 'body';\n                          @let isVirtualColumnVisible =\n                            !canUseVirtualColumns() ||\n                            cell.column.getIsPinned() !== false ||\n                            virtualCenterColumnVisibilityMap()[cell.column.id];\n                          @if (shouldRenderRowSpan && shouldRenderColSpan && isVirtualColumnVisible) {\n                            <td\n                              [ngStyle]=\"\n                                cell.column\n                                  | zTablePinningStyles\n                                    : cell\n                                    : 'body'\n                                    : row.getVisibleCells()\n                                    : zConfig().columns\n                                    : columnSizingInfo()\n                              \"\n                              [class.z-sticky-left]=\"cell.column.getIsPinned() === 'left'\"\n                              [class.z-sticky-right]=\"cell.column.getIsPinned() === 'right'\"\n                              [class.z-sticky-left-last]=\"\n                                cell.column.getIsPinned() === 'left' && cell.column.getIsLastColumn('left')\n                              \"\n                              [class.z-sticky-right-first]=\"\n                                cell.column.getIsPinned() === 'right' && cell.column.getIsFirstColumn('right')\n                              \"\n                              [class.z-sticky-right-last]=\"\n                                cell.column.getIsPinned() === 'right' && cell.column.getIsLastColumn('right')\n                              \"\n                              [class.z-at-left-edge]=\"cell | zTableCellOffset: orderedLeafColumns()\"\n                              [class.z-col-drag]=\"cell.column.id === 'rowDrag'\"\n                              [class.z-col-select]=\"cell.column.id === 'select'\"\n                              [class.z-col-expand]=\"cell.column.id === 'expand'\"\n                              [class.z-col-actions]=\"cell.column.id === actionColumnInfo()?.columnId\"\n                              [class.z-at-bottom]=\"\n                                cell | zTableCellBottom: zConfig().columns : table.getRowModel().rows\n                              \"\n                              [attr.rowspan]=\"\n                                cell | zTableSpan: zConfig().columns : 'cellRowSpan' : table.getRowModel().rows\n                              \"\n                              [attr.colspan]=\"cell | zTableSpan: zConfig().columns : 'cellColSpan'\"\n                              [class]=\"cell | zTableCellConfig: zConfig().columns : 'cellClass'\"\n                              [style]=\"cell | zTableCellConfig: zConfig().columns : 'cellStyle'\">\n                              @if (cell.column.id === 'rowDrag') {\n                                <div class=\"flex items-center justify-center\">\n                                  <button\n                                    cdkDragHandle\n                                    type=\"button\"\n                                    class=\"text-muted-foreground inline-flex size-7 items-center justify-center rounded-md\"\n                                    [class.cursor-grab]=\"isRowDragEnabled()\"\n                                    [class.opacity-40]=\"!isRowDragEnabled()\">\n                                    <z-icon zType=\"lucideGripVertical\" zSize=\"14\" />\n                                  </button>\n                                </div>\n                              } @else if (cell.column.id === 'select') {\n                                <!-- Row Checkbox -->\n                                <div class=\"flex items-center justify-center\">\n                                  <z-checkbox\n                                    [zChecked]=\"cell.row.getIsSelected()\"\n                                    [zIndeterminate]=\"cell.row.getIsSomeSelected() && !cell.row.getIsSelected()\"\n                                    [zDisabled]=\"!cell.row.getCanSelect()\"\n                                    (zChange)=\"cell.row.toggleSelected()\" />\n                                </div>\n                              } @else if (cell.column.id === 'expand') {\n                                <!-- Expand Button -->\n                                <div class=\"flex items-center justify-center\">\n                                  @if (cell.row.subRows && cell.row.subRows.length > 0) {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.toggleExpanded()\"\n                                      class=\"hover:bg-muted flex h-6 w-6 cursor-pointer items-center justify-center rounded\">\n                                      <z-icon\n                                        zType=\"lucideChevronRight\"\n                                        zSize=\"14\"\n                                        class=\"transition-transform duration-200\"\n                                        [class.rotate-90]=\"cell.row.getIsExpanded()\" />\n                                    </button>\n                                  }\n                                </div>\n                              } @else if (cell.column.id === actionColumnInfo()?.columnId && actionColumnInfo()) {\n                                <z-table-actions\n                                  [zConfig]=\"$any(actionColumnInfo()!.config)\"\n                                  [zRow]=\"cell.row.original\"\n                                  [zRowId]=\"cell.row.id\"\n                                  (zActionClick)=\"onActionClick($event)\" />\n                              } @else {\n                                @let isCellVisible = cell | zTableCellVisible: zConfig().columns;\n                                @if (isCellVisible) {\n                                  @let editInfoVirtual = cell.getContext() | zTableCellEdit: zConfig().columns;\n                                  @if (editInfoVirtual.enabled) {\n                                    <!-- Editable Cell (Virtual) -->\n                                    <z-table-edit-cell\n                                      [zRow]=\"cell.row.original\"\n                                      [zRowId]=\"cell.row.id\"\n                                      [zRowIndex]=\"cell.row.index\"\n                                      [zColumnId]=\"cell.column.id\"\n                                      [zValue]=\"cell.getValue()\"\n                                      [zRowUpdate]=\"_rowUpdate()\"\n                                      [zEditConfig]=\"$any(editInfoVirtual.config)\"\n                                      (zChange)=\"onCellEdit($any($event))\" />\n                                  } @else {\n                                    <ng-container\n                                      *flexRender=\"\n                                        cell.column.columnDef.cell;\n                                        props: cell.getContext();\n                                        let cellContent\n                                      \">\n                                      @if (cellContent | zTableIsTemplateRef) {\n                                        <!-- TemplateRef rendering -->\n                                        @let isClickable = cell.column.id | zTableCellClickable: zConfig().columns;\n                                        <div\n                                          class=\"z-template-content\"\n                                          [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                          [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\"\n                                          (click)=\"isClickable && onCellClick(row, cell.column.id, cell.getValue())\">\n                                          <ng-container\n                                            *ngTemplateOutlet=\"\n                                              cellContent;\n                                              context: { $implicit: cell.getContext() }\n                                            \" />\n                                        </div>\n                                      } @else if (cellContent | zTableHasIcon) {\n                                        <!-- Icon syntax rendering -->\n                                        @let isClickableIcon = cell.column.id | zTableCellClickable: zConfig().columns;\n                                        <z-table-icon-text\n                                          [zText]=\"cellContent\"\n                                          [zTooltip]=\"cell | zTableCellConfig: zConfig().columns : 'contentTooltip'\"\n                                          [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                          [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\"\n                                          (click)=\"\n                                            isClickableIcon && onCellClick(row, cell.column.id, cell.getValue())\n                                          \" />\n                                      } @else {\n                                        <!-- Default/innerHTML rendering -->\n                                        @let isClickableDefault =\n                                          cell.column.id | zTableCellClickable: zConfig().columns;\n                                        <div\n                                          class=\"z-table-cell-text\"\n                                          z-tooltip\n                                          [zContent]=\"\n                                            (cell | zTableCellConfig: zConfig().columns : 'contentTooltip') ||\n                                            cellContent\n                                          \"\n                                          [innerHTML]=\"cellContent | translate | zSafeHtml\"\n                                          [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                          [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\"\n                                          (click)=\"\n                                            isClickableDefault && onCellClick(row, cell.column.id, cell.getValue())\n                                          \"></div>\n                                      }\n                                    </ng-container>\n                                  }\n                                }\n                              }\n                            </td>\n                          }\n                          @if (\n                            canUseVirtualColumns() &&\n                            virtualRightSpacerWidth() > 0 &&\n                            cell.column.id === lastVirtualCenterColumnId()\n                          ) {\n                            <td\n                              class=\"pointer-events-none border-0 p-0\"\n                              [style.width.px]=\"virtualRightSpacerWidth()\"></td>\n                          }\n                        }\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n              </div>\n            }\n          </div>\n        } @else {\n          <!-- Normal Scroll Mode -->\n          <table [ngStyle]=\"columnSizeVars()\" [style.width.px]=\"table.getTotalSize()\">\n            <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n            <tbody\n              cdkDropList\n              class=\"z-table-drag-body\"\n              [cdkDropListData]=\"table.getRowModel().rows\"\n              [cdkDropListDisabled]=\"!isRowDragEnabled()\"\n              cdkDropListOrientation=\"vertical\"\n              [cdkDropListAutoScrollStep]=\"20\"\n              (cdkDropListDropped)=\"onRowDrop($event)\"\n              [class.z-has-vertical-scroll]=\"hasVerticalScroll()\"\n              [class.z-last-row-touches-bottom]=\"lastRowTouchesBottom()\">\n              <!-- Row Template -->\n              <ng-template #rowTemplate let-row>\n                <tr\n                  cdkDrag\n                  z-table-row-hover\n                  cdkDragLockAxis=\"y\"\n                  cdkDragPreviewClass=\"z-table-row-drag-preview\"\n                  cdkDragPlaceholderClass=\"z-table-row-drag-placeholder\"\n                  [cdkDragData]=\"row\"\n                  [cdkDragDisabled]=\"!isRowDragEnabled()\"\n                  (cdkDragStarted)=\"onRowDragStarted()\"\n                  (cdkDragEnded)=\"onRowDragEnded($event)\"\n                  [attr.data-row-id]=\"row.id\"\n                  [ngStyle]=\"row | zTableRow: table : 'pinningStyles' : pinnedRowHeights() : virtualRowHeight()\"\n                  [class.z-child-row]=\"row.depth > 0\"\n                  [class.z-selected]=\"row.getIsSelected()\"\n                  [class.z-indeterminate-selected]=\"row.getIsSomeSelected() && !row.getIsSelected()\"\n                  [class.z-pinned-top]=\"row.getIsPinned() === 'top'\"\n                  [class.z-pinned-bottom]=\"row.getIsPinned() === 'bottom'\"\n                  [class.z-shadow-bottom]=\"\n                    showHeaderFooterShadow() &&\n                    row.getIsPinned() === 'top' &&\n                    (row | zTableRow: table : 'isLastTopPinned')\n                  \"\n                  [class.z-shadow-top]=\"\n                    showHeaderFooterShadow() &&\n                    row.getIsPinned() === 'bottom' &&\n                    (row | zTableRow: table : 'isFirstBottomPinned')\n                  \"\n                  [attr.data-depth]=\"row.depth\">\n                  <ng-template cdkDragPreview>\n                    <div class=\"z-table-row-drag-preview\" [style.width.px]=\"table.getTotalSize()\">\n                      @for (cell of row.getVisibleCells(); track cell.id) {\n                        @let isPreviewCellVisible = cell | zTableCellVisible: zConfig().columns;\n                        @let shouldRenderPreviewColSpan =\n                          cell | zTableCellRender: row.getVisibleCells() : zConfig().columns : 'body';\n                        @if (isPreviewCellVisible && shouldRenderPreviewColSpan) {\n                          <div\n                            class=\"z-table-row-drag-preview-cell\"\n                            [style.width.px]=\"cell.column.getSize()\"\n                            [class.z-table-row-drag-preview-handle]=\"cell.column.id === 'rowDrag'\">\n                            @if (cell.column.id === 'rowDrag') {\n                              <z-icon zType=\"lucideGripVertical\" zSize=\"14\" class=\"text-muted-foreground\" />\n                            } @else {\n                              <span class=\"truncate\">{{ cell.getValue() ?? '' }}</span>\n                            }\n                          </div>\n                        }\n                      }\n                    </div>\n                  </ng-template>\n\n                  <ng-template cdkDragPlaceholder>\n                    <tr class=\"z-table-row-drag-placeholder-row\">\n                      <td [attr.colspan]=\"renderedColumnCount()\">\n                        <div class=\"z-table-row-drag-placeholder-inner\" [style.height.px]=\"virtualRowHeight()\"></div>\n                      </td>\n                    </tr>\n                  </ng-template>\n\n                  @for (cell of row.getVisibleCells(); track cell.id) {\n                    @if (\n                      canUseVirtualColumns() &&\n                      virtualLeftSpacerWidth() > 0 &&\n                      cell.column.id === firstVirtualCenterColumnId()\n                    ) {\n                      <td class=\"pointer-events-none border-0 p-0\" [style.width.px]=\"virtualLeftSpacerWidth()\"></td>\n                    }\n                    @let shouldRenderRowSpan =\n                      cell | zTableSpan: zConfig().columns : 'shouldRender' : table.getRowModel().rows;\n                    @let shouldRenderColSpan =\n                      cell | zTableCellRender: row.getVisibleCells() : zConfig().columns : 'body';\n                    @let isVirtualColumnVisible =\n                      !canUseVirtualColumns() ||\n                      cell.column.getIsPinned() !== false ||\n                      virtualCenterColumnVisibilityMap()[cell.column.id];\n                    @if (shouldRenderRowSpan && shouldRenderColSpan && isVirtualColumnVisible) {\n                      <td\n                        [ngStyle]=\"\n                          cell.column\n                            | zTablePinningStyles\n                              : cell\n                              : 'body'\n                              : row.getVisibleCells()\n                              : zConfig().columns\n                              : columnSizingInfo()\n                        \"\n                        [class]=\"cell | zTableCellConfig: zConfig().columns : 'cellClass'\"\n                        [style]=\"cell | zTableCellConfig: zConfig().columns : 'cellStyle'\"\n                        [class.z-sticky-left]=\"cell.column.getIsPinned() === 'left'\"\n                        [class.z-sticky-right]=\"cell.column.getIsPinned() === 'right'\"\n                        [class.z-sticky-left-last]=\"\n                          cell.column.getIsPinned() === 'left' && cell.column.getIsLastColumn('left')\n                        \"\n                        [class.z-sticky-right-first]=\"\n                          cell.column.getIsPinned() === 'right' && cell.column.getIsFirstColumn('right')\n                        \"\n                        [class.z-sticky-right-last]=\"\n                          cell.column.getIsPinned() === 'right' && cell.column.getIsLastColumn('right')\n                        \"\n                        [class.z-at-left-edge]=\"cell | zTableCellOffset: orderedLeafColumns()\"\n                        [class.z-col-drag]=\"cell.column.id === 'rowDrag'\"\n                        [class.z-col-select]=\"cell.column.id === 'select'\"\n                        [class.z-col-expand]=\"cell.column.id === 'expand'\"\n                        [class.z-col-actions]=\"\n                          cell.column.id === 'actions' || cell.column.id === actionColumnInfo()?.columnId\n                        \"\n                        [class.z-at-bottom]=\"cell | zTableCellBottom: zConfig().columns : table.getRowModel().rows\"\n                        [attr.rowspan]=\"cell | zTableSpan: zConfig().columns : 'cellRowSpan' : table.getRowModel().rows\"\n                        [attr.colspan]=\"cell | zTableSpan: zConfig().columns : 'cellColSpan'\">\n                        @if (cell.column.id === 'rowDrag') {\n                          <div class=\"flex items-center justify-center\">\n                            <button\n                              cdkDragHandle\n                              type=\"button\"\n                              class=\"text-muted-foreground hover:bg-muted hover:text-foreground inline-flex size-7 items-center justify-center rounded-md transition-colors\"\n                              [class.cursor-grab]=\"isRowDragEnabled()\"\n                              [class.cursor-not-allowed]=\"!isRowDragEnabled()\"\n                              [class.opacity-40]=\"!isRowDragEnabled()\">\n                              <z-icon zType=\"lucideGripVertical\" zSize=\"14\" />\n                            </button>\n                          </div>\n                        } @else if (cell.column.id === 'select') {\n                          <!-- Row Checkbox with Pin Button -->\n                          <div class=\"flex items-center justify-center gap-1\">\n                            <z-checkbox\n                              [zChecked]=\"cell.row.getIsSelected()\"\n                              [zIndeterminate]=\"cell.row.getIsSomeSelected() && !cell.row.getIsSelected()\"\n                              [zDisabled]=\"!cell.row.getCanSelect()\"\n                              (zChange)=\"cell.row.toggleSelected()\" />\n                            @if (zConfig().enableRowPinning && cell.row.depth === 0 && !hasBodyRowSpan()) {\n                              <ng-template #rowPinPopoverContent>\n                                <div class=\"flex flex-col gap-1 p-1\">\n                                  @if (cell.row.getIsPinned() !== 'top') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_top' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned() !== 'bottom') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('bottom'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_bottom' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned()) {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin(false); rowPinPopover.hideImmediate()\"\n                                      class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                                    </button>\n                                  }\n                                </div>\n                              </ng-template>\n                              <button\n                                type=\"button\"\n                                z-popover\n                                #rowPinPopover=\"zPopover\"\n                                [zPopoverContent]=\"rowPinPopoverContent\"\n                                zTrigger=\"click\"\n                                zPosition=\"bottom\"\n                                class=\"z-row-pin-trigger text-muted-foreground hover:bg-muted hover:text-foreground flex cursor-pointer items-center justify-center rounded p-1\"\n                                [class.text-primary]=\"cell.row.getIsPinned()\">\n                                <z-icon zType=\"lucideEllipsis\" zSize=\"14\" class=\"rotate-90\" />\n                              </button>\n                            }\n                          </div>\n                        } @else if (cell.column.id === 'expand') {\n                          <!-- Expand Button with Row Pin Popover -->\n                          <div class=\"flex items-center justify-center gap-1\">\n                            @if (cell.row.subRows && cell.row.subRows.length > 0) {\n                              <button\n                                type=\"button\"\n                                (click)=\"cell.row.toggleExpanded()\"\n                                class=\"hover:bg-muted flex h-6 w-6 cursor-pointer items-center justify-center rounded\">\n                                <z-icon\n                                  zType=\"lucideChevronRight\"\n                                  zSize=\"14\"\n                                  class=\"transition-transform duration-200\"\n                                  [class.rotate-90]=\"cell.row.getIsExpanded()\" />\n                              </button>\n                            }\n                            @if (\n                              zConfig().enableRowPinning &&\n                              cell.row.depth === 0 &&\n                              !(cell.row.subRows && cell.row.subRows.length > 0) &&\n                              !hasBodyRowSpan()\n                            ) {\n                              <ng-template #rowPinPopoverContent>\n                                <div class=\"flex flex-col gap-1 p-1\">\n                                  @if (cell.row.getIsPinned() !== 'top') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_top' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned() !== 'bottom') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('bottom'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_bottom' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned()) {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin(false); rowPinPopover.hideImmediate()\"\n                                      class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                                    </button>\n                                  }\n                                </div>\n                              </ng-template>\n                              <button\n                                type=\"button\"\n                                z-popover\n                                #rowPinPopover=\"zPopover\"\n                                [zPopoverContent]=\"rowPinPopoverContent\"\n                                zTrigger=\"click\"\n                                zPosition=\"bottom\"\n                                class=\"z-row-pin-trigger text-muted-foreground hover:bg-muted hover:text-foreground flex cursor-pointer items-center justify-center rounded p-1\"\n                                [class.text-primary]=\"cell.row.getIsPinned()\">\n                                <z-icon zType=\"lucideEllipsis\" zSize=\"14\" class=\"rotate-90\" />\n                              </button>\n                            }\n                          </div>\n                        } @else if (cell.column.id === 'actions') {\n                          <!-- Actions Column - Row Pin Only (for parent rows) -->\n                          @if (cell.row.depth === 0 && !hasBodyRowSpan()) {\n                            <div class=\"flex items-center justify-center\">\n                              <ng-template #rowPinPopoverContent>\n                                <div class=\"flex flex-col gap-1 p-1\">\n                                  @if (cell.row.getIsPinned() !== 'top') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_top' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned() !== 'bottom') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('bottom'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_bottom' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned()) {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin(false); rowPinPopover.hideImmediate()\"\n                                      class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                                    </button>\n                                  }\n                                </div>\n                              </ng-template>\n                              <button\n                                type=\"button\"\n                                z-popover\n                                #rowPinPopover=\"zPopover\"\n                                [zPopoverContent]=\"rowPinPopoverContent\"\n                                zTrigger=\"click\"\n                                zPosition=\"bottom\"\n                                class=\"z-row-pin-trigger text-muted-foreground hover:bg-muted hover:text-foreground flex cursor-pointer items-center justify-center rounded p-1\"\n                                [class.text-primary]=\"cell.row.getIsPinned()\">\n                                <z-icon zType=\"lucideEllipsis\" zSize=\"14\" class=\"rotate-90\" />\n                              </button>\n                            </div>\n                          }\n                        } @else if (cell.column.id === actionColumnInfo()?.columnId && actionColumnInfo()) {\n                          <z-table-actions\n                            [zConfig]=\"$any(actionColumnInfo()!.config)\"\n                            [zRow]=\"cell.row.original\"\n                            [zRowId]=\"cell.row.id\"\n                            (zActionClick)=\"onActionClick($event)\" />\n                        } @else {\n                          @let isCellVisibleNormal = cell | zTableCellVisible: zConfig().columns;\n                          @if (isCellVisibleNormal) {\n                            @let editInfo = cell.getContext() | zTableCellEdit: zConfig().columns;\n                            @if (editInfo.enabled) {\n                              <!-- Editable Cell -->\n                              <z-table-edit-cell\n                                [zRow]=\"cell.row.original\"\n                                [zRowId]=\"cell.row.id\"\n                                [zRowIndex]=\"cell.row.index\"\n                                [zColumnId]=\"cell.column.id\"\n                                [zValue]=\"cell.getValue()\"\n                                [zRowUpdate]=\"_rowUpdate()\"\n                                [zEditConfig]=\"$any(editInfo.config)\"\n                                (zChange)=\"onCellEdit($any($event))\" />\n                            } @else {\n                              <ng-container\n                                *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let cellContent\">\n                                @if (cellContent | zTableIsTemplateRef) {\n                                  <!-- TemplateRef rendering -->\n                                  @let isClickableTpl = cell.column.id | zTableCellClickable: zConfig().columns;\n                                  <div\n                                    class=\"z-template-content\"\n                                    [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                    [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\"\n                                    (click)=\"isClickableTpl && onCellClick(row, cell.column.id, cell.getValue())\">\n                                    <ng-container\n                                      *ngTemplateOutlet=\"cellContent; context: { $implicit: cell.getContext() }\" />\n                                  </div>\n                                } @else if (cellContent | zTableHasIcon) {\n                                  <!-- Icon syntax rendering -->\n                                  @let isClickableIconTpl = cell.column.id | zTableCellClickable: zConfig().columns;\n                                  <z-table-icon-text\n                                    [zText]=\"cellContent\"\n                                    [zTooltip]=\"cell | zTableCellConfig: zConfig().columns : 'contentTooltip'\"\n                                    [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                    [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\"\n                                    (click)=\"isClickableIconTpl && onCellClick(row, cell.column.id, cell.getValue())\" />\n                                } @else {\n                                  <!-- Default/innerHTML rendering -->\n                                  @let isClickableDefaultTpl = cell.column.id | zTableCellClickable: zConfig().columns;\n                                  <div\n                                    class=\"z-table-cell-text\"\n                                    z-tooltip\n                                    [zContent]=\"\n                                      (cell | zTableCellConfig: zConfig().columns : 'contentTooltip') || cellContent\n                                    \"\n                                    [innerHTML]=\"cellContent | translate | zSafeHtml\"\n                                    [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                    [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\"\n                                    (click)=\"\n                                      isClickableDefaultTpl && onCellClick(row, cell.column.id, cell.getValue())\n                                    \"></div>\n                                }\n                              </ng-container>\n                            }\n                          }\n                        }\n                      </td>\n                    }\n                    @if (\n                      canUseVirtualColumns() &&\n                      virtualRightSpacerWidth() > 0 &&\n                      cell.column.id === lastVirtualCenterColumnId()\n                    ) {\n                      <td class=\"pointer-events-none border-0 p-0\" [style.width.px]=\"virtualRightSpacerWidth()\"></td>\n                    }\n                  }\n                </tr>\n\n                <!-- Expanded Row Detail -->\n                @if (row.getIsExpanded() && row.depth === 0 && !row.subRows?.length && zConfig().expandedRowTemplate) {\n                  <tr class=\"z-expanded-row\">\n                    <td [attr.colspan]=\"renderedColumnCount()\" class=\"p-0\">\n                      <ng-container *ngTemplateOutlet=\"zConfig().expandedRowTemplate!; context: { $implicit: row }\" />\n                    </td>\n                  </tr>\n                }\n              </ng-template>\n\n              <!-- Render Top Pinned Rows (hidden when filtered data is empty) -->\n              @if (!isEmpty()) {\n                @for (row of table.getTopRows(); track row.id) {\n                  <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: row }\" />\n                }\n              }\n\n              <!-- Render Center Rows -->\n              @for (row of table.getCenterRows(); track row.id) {\n                <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: row }\" />\n              }\n\n              <!-- Render Bottom Pinned Rows (hidden when filtered data is empty) -->\n              @if (!isEmpty()) {\n                @for (row of bottomRowsReversed(); track row.id) {\n                  <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: row }\" />\n                }\n              }\n            </tbody>\n          </table>\n        }\n      </ng-scrollbar>\n    }\n    <!-- end @else -->\n  </div>\n\n  <!-- Footer table -->\n  @if (hasFooter()) {\n    <div\n      class=\"z-tfoot-wrapper\"\n      [class.z-shadow-footer]=\"shouldFooterShowShadow()\"\n      [class.z-scroll-left]=\"hasScrollLeft()\"\n      [class.z-scroll-right]=\"hasScrollRight()\"\n      #tfootWrapper>\n      <table [ngStyle]=\"columnSizeVars()\" [style.width.px]=\"table.getTotalSize()\">\n        <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n        <tfoot>\n          @for (footerGroup of orderedFooterGroups(); track footerGroup.id) {\n            @if (footerGroup | zTableFooterContent: zConfig().columns) {\n              <tr>\n                @for (footer of footerGroup.headers; track footer.id) {\n                  @if (\n                    canUseVirtualColumns() &&\n                    virtualLeftSpacerWidth() > 0 &&\n                    footer.column.id === firstVirtualCenterColumnId()\n                  ) {\n                    <th class=\"pointer-events-none border-0 p-0\" [style.width.px]=\"virtualLeftSpacerWidth()\"></th>\n                  }\n                  @let rowSpan = footer | zTableSpan: zConfig().columns : 'footerRowSpan';\n                  @let shouldRender = footer | zTableCellRender: footerGroup.headers : zConfig().columns : 'footer';\n                  @let isVirtualColumnVisible =\n                    !canUseVirtualColumns() ||\n                    footer.column.getIsPinned() !== false ||\n                    virtualCenterColumnVisibilityMap()[footer.column.id];\n                  @if (rowSpan && shouldRender && isVirtualColumnVisible) {\n                    <th\n                      [ngStyle]=\"\n                        footer.column\n                          | zTablePinningStyles: footer : 'footer' : table : zConfig().columns : columnSizingInfo()\n                      \"\n                      [class]=\"\n                        (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerClass') +\n                        ' ' +\n                        (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass')\n                      \"\n                      [style]=\"footer.column.id | zTableColumnConfig: zConfig().columns : 'footerStyle'\"\n                      [class.z-sticky-left]=\"footer.column.getIsPinned() === 'left'\"\n                      [class.z-sticky-right]=\"footer.column.getIsPinned() === 'right'\"\n                      [class.z-sticky-left-last]=\"\n                        footer | zTableCellPin: 'isLastLeftPinned' : zConfig().columns : 'footer'\n                      \"\n                      [class.z-sticky-right-first]=\"\n                        footer | zTableCellPin: 'isFirstRightPinned' : zConfig().columns : 'footer'\n                      \"\n                      [class.z-sticky-right-last]=\"\n                        footer | zTableCellPin: 'isLastRightPinned' : zConfig().columns : 'footer'\n                      \"\n                      [class.z-at-left-edge]=\"footer | zTableCellOffset: orderedLeafColumns()\"\n                      [attr.rowspan]=\"rowSpan\"\n                      [attr.colspan]=\"footer | zTableSpan: zConfig().columns : 'footerColSpan'\">\n                      @let configFooterContent =\n                        footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContent';\n                      @if (footer.column.columnDef.footer) {\n                        <ng-container\n                          *flexRender=\"footer.column.columnDef.footer; props: footer.getContext(); let footerContent\">\n                          <div\n                            class=\"flex w-full items-center\"\n                            [class.justify-center]=\"\n                              (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass') ===\n                              'text-center'\n                            \"\n                            [class.justify-end]=\"\n                              (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass') ===\n                              'text-right'\n                            \">\n                            @if (footerContent | zTableIsTemplateRef) {\n                              <!-- TemplateRef rendering -->\n                              <div\n                                class=\"z-template-content\"\n                                [ngClass]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentClass'\n                                \"\n                                [ngStyle]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentStyle'\n                                \">\n                                <ng-container\n                                  *ngTemplateOutlet=\"footerContent; context: { $implicit: footer.getContext() }\" />\n                              </div>\n                            } @else if (footerContent | zTableHasIcon) {\n                              <!-- Icon syntax rendering -->\n                              <z-table-icon-text\n                                [zText]=\"footerContent\"\n                                [zTooltip]=\"footer.column.id | zTableColumnConfig: zConfig().columns : 'footerTooltip'\"\n                                [ngClass]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentClass'\n                                \"\n                                [ngStyle]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentStyle'\n                                \" />\n                            } @else {\n                              <!-- Default/string rendering -->\n                              <span\n                                class=\"z-table-cell-text\"\n                                z-tooltip\n                                [zContent]=\"\n                                  (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerTooltip') ||\n                                  footerContent\n                                \"\n                                [ngClass]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentClass'\n                                \"\n                                [ngStyle]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentStyle'\n                                \">\n                                {{ footerContent | translate }}\n                              </span>\n                            }\n                          </div>\n                        </ng-container>\n                      } @else if (configFooterContent) {\n                        <!-- Fallback for group columns without TanStack footer -->\n                        <div\n                          class=\"flex w-full items-center\"\n                          [class.justify-center]=\"\n                            (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass') ===\n                            'text-center'\n                          \"\n                          [class.justify-end]=\"\n                            (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass') ===\n                            'text-right'\n                          \">\n                          <span\n                            class=\"z-table-cell-text\"\n                            z-tooltip\n                            [zContent]=\"\n                              (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerTooltip') ||\n                              $any(configFooterContent)\n                            \"\n                            [ngClass]=\"footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentClass'\"\n                            [ngStyle]=\"footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentStyle'\">\n                            {{ $any(configFooterContent) | translate }}\n                          </span>\n                        </div>\n                      }\n                    </th>\n                  }\n                  @if (\n                    canUseVirtualColumns() &&\n                    virtualRightSpacerWidth() > 0 &&\n                    footer.column.id === lastVirtualCenterColumnId()\n                  ) {\n                    <th class=\"pointer-events-none border-0 p-0\" [style.width.px]=\"virtualRightSpacerWidth()\"></th>\n                  }\n                }\n              </tr>\n            }\n          }\n        </tfoot>\n      </table>\n    </div>\n  }\n</div>\n\n<!-- Pagination -->\n@if (zConfig().pagination?.enabled !== false) {\n  <div class=\"mt-4 flex items-center justify-between gap-4\">\n    <div class=\"truncate text-sm text-gray-500\">\n      {{ 'i18n_z_ui_table_total_rows' | translate: { total: (paginationTotal() | zFormatNum) } }}\n    </div>\n    <z-pagination\n      [zTotal]=\"paginationTotal()\"\n      [(zPageIndex)]=\"pagination().pageIndex\"\n      [(zPageSize)]=\"pagination().pageSize\"\n      [zPageSizeOptions]=\"zConfig().pagination?.pageSizeOptions ?? [10, 20, 50, 100]\"\n      [zShowSizeChanger]=\"zConfig().pagination?.showSizeChanger ?? true\"\n      [zShowQuickJumper]=\"zConfig().pagination?.showQuickJumper ?? false\"\n      [zShowTotal]=\"false\"\n      [zDisabled]=\"zConfig().pagination?.disabled || isLoading() || isProcessing()\"\n      (zOnPageChange)=\"onPageChange($event)\" />\n  </div>\n}\n\n<!-- Floating Bulk Action Bar -->\n<div class=\"z-bulk-action-bar-origin\" cdkOverlayOrigin #bulkBarOrigin=\"cdkOverlayOrigin\"></div>\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"bulkBarOrigin\"\n  [cdkConnectedOverlayOpen]=\"bulkBarMounted()\"\n  [cdkConnectedOverlayPositions]=\"bulkBarPositions\"\n  [cdkConnectedOverlayHasBackdrop]=\"false\"\n  cdkConnectedOverlayPanelClass=\"z-bulk-action-bar-overlay\">\n  @if (bulkBarConfig(); as config) {\n    <div class=\"z-bulk-action-bar-inner\" [class.z-leaving]=\"bulkBarClosing()\">\n      <div class=\"z-bulk-action-bar-count\">\n        {{ bulkBarContext()?.selectedRowIds?.length ?? 0 | zFormatNum }}\n        {{ config.selectedLabel ?? ('i18n_z_ui_table_selected' | translate) }}\n      </div>\n\n      <div class=\"z-bulk-action-bar-divider\"></div>\n\n      @for (item of bulkBarItems(); track item.action.key) {\n        <button\n          type=\"button\"\n          class=\"z-bulk-action-bar-button\"\n          [class.z-danger]=\"item.action.type === 'outline-destructive-secondary'\"\n          [disabled]=\"item.disabled\"\n          (click)=\"onBulkActionClick(item.action)\">\n          @if (item.action.icon) {\n            <z-icon [zType]=\"item.action.icon\" [zSize]=\"item.action.iconSize ?? '14'\" />\n          }\n          @if (item.action.label) {\n            <span>{{ item.action.label | translate }}</span>\n          }\n        </button>\n      }\n    </div>\n  }\n</ng-template>\n\n<!-- Settings Drawer -->\n<z-drawer\n  [(zVisible)]=\"showSettingsDrawer\"\n  [zTitle]=\"'i18n_z_ui_table_settings_title' | translate\"\n  zPlacement=\"right\"\n  zWidth=\"500px\"\n  [zShadow]=\"true\"\n  [zOkText]=\"null\"\n  [zCancelText]=\"'i18n_z_ui_drawer_close' | translate\">\n  <div class=\"z-table-settings-drawer px-4\">\n    <!-- Display Settings -->\n    <div class=\"mb-4\">\n      <h4 class=\"text-foreground mb-2 text-sm font-semibold\">{{ 'i18n_z_ui_table_display_settings' | translate }}</h4>\n      <p class=\"text-muted-foreground mb-3 text-xs\">{{ 'i18n_z_ui_table_display_settings_desc' | translate }}</p>\n      <div class=\"grid grid-cols-2 gap-x-4 gap-y-3\">\n        <z-checkbox\n          [zChecked]=\"showHorizontalBorder()\"\n          [zText]=\"'i18n_z_ui_table_horizontal_border' | translate\"\n          (zChange)=\"showHorizontalBorder.set(!showHorizontalBorder())\" />\n        <z-checkbox\n          [zChecked]=\"showVerticalBorder()\"\n          [zText]=\"'i18n_z_ui_table_vertical_border' | translate\"\n          (zChange)=\"showVerticalBorder.set(!showVerticalBorder())\" />\n        <z-checkbox\n          [zChecked]=\"showHeaderFooterShadow()\"\n          [zText]=\"'i18n_z_ui_table_header_footer_shadow' | translate\"\n          (zChange)=\"showHeaderFooterShadow.set(!showHeaderFooterShadow())\" />\n      </div>\n    </div>\n\n    <!-- Divider -->\n    <div class=\"border-border my-4 border-t\"></div>\n\n    <!-- Unified Column Settings -->\n    @if (zConfig().enableSettings) {\n      <div class=\"mb-4\">\n        <h4 class=\"text-foreground mb-2 text-sm font-semibold\">{{ 'i18n_z_ui_table_column_settings' | translate }}</h4>\n        <p class=\"text-muted-foreground mb-3 text-xs\">{{ 'i18n_z_ui_table_column_settings_desc' | translate }}</p>\n\n        <!-- Unpinned Columns (Draggable) -->\n        <div\n          cdkDropList\n          #columnDropList=\"cdkDropList\"\n          [cdkDropListAutoScrollDisabled]=\"true\"\n          (cdkDropListDropped)=\"onPendingColumnDrop($event)\"\n          class=\"z-column-drop-list space-y-1.5\">\n          @for (columnId of columnOrder(); track columnId; let i = $index) {\n            @if (columnId !== 'expand' && columnId !== 'select' && columnId !== 'rowDrag') {\n              @let column = table.getColumn(columnId);\n              @let isPinned = column?.getIsPinned();\n              @let isVisible = columnVisibility()[columnId] !== false;\n              @let canPin = column?.getCanPin() !== false && zConfig().enableColumnPinning;\n              @if (!isPinned) {\n                <div\n                  cdkDrag\n                  [cdkDragData]=\"columnId\"\n                  cdkDragLockAxis=\"y\"\n                  cdkDragPreviewContainer=\"global\"\n                  cdkDragPreviewClass=\"z-drag-preview\"\n                  class=\"z-drag-item border-border bg-card hover:border-primary flex cursor-grab items-center gap-2 rounded border px-2 py-1.5 text-sm active:cursor-grabbing\"\n                  [class.opacity-60]=\"!isVisible\">\n                  <!-- Drag Handle -->\n                  <z-icon\n                    cdkDragHandle\n                    zType=\"lucideGripVertical\"\n                    zSize=\"14\"\n                    class=\"text-muted-foreground shrink-0 cursor-grab active:cursor-grabbing\" />\n\n                  <!-- Visibility Checkbox -->\n                  <input\n                    type=\"checkbox\"\n                    [checked]=\"isVisible\"\n                    (change)=\"onToggleColumnVisibility(columnId)\"\n                    (mousedown)=\"$event.stopPropagation()\"\n                    class=\"border-input h-4 w-4 shrink-0 cursor-pointer rounded\" />\n\n                  <!-- Column Name -->\n                  <span class=\"flex min-w-0 flex-1 flex-col\">\n                    <span class=\"truncate\" [class.text-muted-foreground]=\"!isVisible\">\n                      {{ columnId | zTableColumnHeader: zConfig().columns | translate }}\n                    </span>\n                    @let parents = columnId | zTableColumnParents: zConfig().columns;\n                    @if (parents) {\n                      <span class=\"text-muted-foreground truncate text-[0.625rem]\">({{ parents | translate }})</span>\n                    }\n                  </span>\n\n                  <!-- Pin Buttons -->\n                  @if (canPin) {\n                    <div class=\"flex shrink-0 items-center gap-0.5\" (mousedown)=\"$event.stopPropagation()\">\n                      <button\n                        type=\"button\"\n                        [disabled]=\"!isVisible\"\n                        (click)=\"onToggleColumnPin(columnId, 'left')\"\n                        class=\"text-muted-foreground hover:bg-muted cursor-pointer rounded p-1 text-xs transition-colors disabled:cursor-not-allowed disabled:opacity-40\"\n                        title=\"Pin Left\">\n                        <z-icon zType=\"lucideArrowLeft\" zSize=\"12\" />\n                      </button>\n                      <button\n                        type=\"button\"\n                        [disabled]=\"!isVisible\"\n                        (click)=\"onToggleColumnPin(columnId, 'right')\"\n                        class=\"text-muted-foreground hover:bg-muted cursor-pointer rounded p-1 text-xs transition-colors disabled:cursor-not-allowed disabled:opacity-40\"\n                        title=\"Pin Right\">\n                        <z-icon zType=\"lucideArrowRight\" zSize=\"12\" />\n                      </button>\n                    </div>\n                  }\n                </div>\n              }\n            }\n          }\n        </div>\n\n        <!-- Pinned Columns Section -->\n        @if (zConfig().enableColumnPinning) {\n          @if (pinnedColumnIds().length > 0) {\n            <div class=\"border-border mt-4 border-t pt-4\">\n              <h5 class=\"text-muted-foreground mb-2 text-xs font-medium\">\n                {{ 'i18n_z_ui_table_pinned_columns' | translate }}\n              </h5>\n              <div class=\"space-y-1.5\">\n                @for (columnId of pinnedColumnIds(); track columnId) {\n                  @let column = table.getColumn(columnId);\n                  @let isPinned = column?.getIsPinned();\n                  @let isVisible = columnVisibility()[columnId] !== false;\n                  <div\n                    class=\"border-border bg-muted/30 flex items-center gap-2 rounded border px-2 py-1.5 text-sm\"\n                    [class.opacity-60]=\"!isVisible\">\n                    <!-- Pin Icon -->\n                    <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"text-primary shrink-0\" />\n\n                    <!-- Visibility Checkbox -->\n                    <input\n                      type=\"checkbox\"\n                      [checked]=\"isVisible\"\n                      (change)=\"onToggleColumnVisibility(columnId)\"\n                      class=\"border-input h-4 w-4 shrink-0 cursor-pointer rounded\" />\n\n                    <!-- Column Name -->\n                    <span class=\"flex min-w-0 flex-1 flex-col\">\n                      <span class=\"truncate\" [class.text-muted-foreground]=\"!isVisible\">\n                        {{ columnId | zTableColumnHeader: zConfig().columns | translate }}\n                      </span>\n                      @let pinnedParents = columnId | zTableColumnParents: zConfig().columns;\n                      @if (pinnedParents) {\n                        <span class=\"text-muted-foreground truncate text-[0.625rem]\">\n                          ({{ pinnedParents | translate }})\n                        </span>\n                      }\n                    </span>\n\n                    <!-- Position Badge -->\n                    <span class=\"bg-primary/10 text-primary shrink-0 rounded px-1.5 py-0.5 text-[0.625rem] font-medium\">\n                      {{\n                        isPinned === 'left'\n                          ? ('i18n_z_ui_table_left' | translate)\n                          : ('i18n_z_ui_table_right' | translate)\n                      }}\n                    </span>\n\n                    <!-- Unpin Button -->\n                    <button\n                      type=\"button\"\n                      (click)=\"onToggleColumnPin(columnId, isPinned === 'left' ? 'left' : 'right')\"\n                      class=\"text-muted-foreground hover:bg-muted hover:text-foreground cursor-pointer rounded p-1 text-xs transition-colors\"\n                      title=\"Unpin\">\n                      <z-icon zType=\"lucideX\" zSize=\"12\" />\n                    </button>\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        }\n      </div>\n    }\n  </div>\n</z-drawer>\n", styles: [".z-bulk-action-bar-origin{position:fixed;left:50%;bottom:1rem;width:1px;height:1px;pointer-events:none}:host ::ng-deep .z-bulk-action-bar-overlay{max-width:calc(100vw - 2rem);margin-bottom:1rem;transform-origin:center bottom}.z-bulk-action-bar-inner{border:thin solid color-mix(in srgb,var(--border) 88%,transparent);border-radius:.5rem;background:color-mix(in srgb,var(--card) 96%,var(--background));color:var(--foreground);box-shadow:0 1rem 2.5rem color-mix(in srgb,var(--foreground) 16%,transparent),0 .25rem .75rem color-mix(in srgb,var(--foreground) 8%,transparent),0 0 0 1px color-mix(in srgb,var(--background) 65%,transparent) inset;display:flex;align-items:center;width:max-content;min-height:2.25rem;max-width:calc(100vw - 2rem);overflow:hidden;transform-origin:center bottom;animation:z-bulk-action-bar-enter .18s cubic-bezier(.16,1,.3,1);will-change:opacity,transform}.z-bulk-action-bar-inner.z-leaving{pointer-events:none;animation:z-bulk-action-bar-exit .14s ease-in forwards}.z-bulk-action-bar-count{padding:0 .75rem;white-space:nowrap;font-size:.8125rem;font-weight:500;color:var(--foreground)}.z-bulk-action-bar-divider{width:1px;align-self:stretch;background:color-mix(in srgb,var(--border) 88%,transparent)}.z-bulk-action-bar-button{display:inline-flex;align-items:center;gap:.375rem;min-height:2.25rem;padding:0 .75rem;border-left:thin solid color-mix(in srgb,var(--border) 78%,transparent);color:var(--foreground);font-size:.8125rem;white-space:nowrap;cursor:pointer;transition:background-color .14s ease,color .14s ease}.z-bulk-action-bar-button:hover:not(:disabled){background:var(--muted)}.z-bulk-action-bar-button:disabled{cursor:not-allowed;opacity:.45}.z-bulk-action-bar-button.z-danger{color:var(--destructive)}.z-bulk-action-bar-button.z-danger:hover:not(:disabled){background:color-mix(in srgb,var(--destructive) 12%,transparent)}@keyframes z-bulk-action-bar-enter{0%{opacity:0;transform:translateY(.875rem)}to{opacity:1;transform:translateY(0)}}@keyframes z-bulk-action-bar-exit{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(.875rem)}}@media(prefers-reduced-motion:reduce){.z-bulk-action-bar-inner{animation:none}}:host ::ng-deep .z-table-cell-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;min-width:0;-webkit-user-select:text;user-select:text}:host ::ng-deep .z-table-cell-text>*,:host ::ng-deep .z-table-cell-text *{display:inline-block;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}.z-template-content{display:block;width:100%;min-width:0;max-width:100%;overflow:hidden}.z-template-content>*{min-width:0;max-width:100%}.z-template-content>[class*=flex]{min-width:0;max-width:100%}.z-template-content>[class*=flex]>*{min-width:0;flex-shrink:1}.z-template-content>[class*=grid]{min-width:0;max-width:100%}.z-thead-wrapper{flex-shrink:0;background:var(--muted);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.z-thead-wrapper::-webkit-scrollbar{display:none}.z-column-menu-item{line-height:1.25rem}.z-column-menu-item:focus-visible,.z-column-menu-item.z-popover-open{background-color:var(--muted);outline:none}.z-table-row-drag-preview{display:flex;align-items:stretch;overflow:hidden;border:1px solid var(--primary);border-radius:.5rem;background-color:var(--card);box-shadow:0 10px 24px #00000029}.z-table-row-drag-preview-cell{display:flex;min-width:0;align-items:center;padding:.5rem 12px;border-right:thin solid var(--border);background-color:var(--card);color:var(--foreground);font-size:.875rem}.z-table-row-drag-preview-cell:last-child{border-right:none}.z-table-row-drag-preview-cell>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.z-table-row-drag-preview-handle{justify-content:center}.z-table-row-drag-placeholder-row td{padding:0!important;border-top:none!important;border-left:none!important;border-right:none!important;border-bottom:thin solid transparent!important;background:transparent!important}.z-table-row-drag-placeholder-inner{width:100%;min-height:2.625rem;border:2px dashed var(--primary);border-radius:0;background-color:color-mix(in srgb,var(--primary) 10%,transparent);opacity:1!important;visibility:visible!important;box-sizing:border-box}.z-table-row-drag-placeholder-row.cdk-drag-placeholder *{opacity:1}.z-table-row-drag-placeholder-row.cdk-drag-placeholder .z-table-row-drag-placeholder-inner{opacity:1!important;visibility:visible!important}:host{display:flex;flex-direction:column;height:100%;--scrollbar-track-thickness: 7px;--scrollbar-track-color: transparent;--scrollbar-thumb-shape: 3px;--z-shadow-left-right: -1.875rem;--z-shadow-left-width: 1.875rem;--z-shadow-left-opacity: 0;--z-shadow-right-left: -1.875rem;--z-shadow-right-width: 1.875rem;--z-shadow-right-opacity: 0;--z-sticky-left-border-color: transparent;--z-sticky-right-border-color: var(--border)}.z-table-container{display:flex;flex-direction:column;position:relative;width:100%;height:100%;overflow:hidden;border-radius:.3125rem;border:thin solid var(--border);background-color:var(--card)}.z-table-container.z-table-borderless{border:none;border-radius:0;box-shadow:none!important;background-color:transparent}.z-table-container.z-hide-horizontal-border th,.z-table-container.z-hide-horizontal-border td{border-bottom:none!important;border-top:none!important}.z-table-container.z-hide-vertical-border th,.z-table-container.z-hide-vertical-border td{border-left:none!important}table{width:fit-content;min-width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:.875rem}.z-table-toolbar .z-settings-btn{transition:all .15s ease}.z-table-toolbar .z-settings-btn:hover{border-color:var(--muted-foreground)}.z-thead-wrapper{flex-shrink:0;background:var(--muted);overflow-x:hidden;overflow-y:hidden;touch-action:pan-y pinch-zoom}.z-thead-wrapper th{height:auto;padding:.5rem 12px;text-align:left;vertical-align:middle;font-weight:500;color:var(--foreground);white-space:nowrap;overflow:hidden;background:var(--muted);border-left:thin solid var(--border);border-bottom:thin solid var(--border);-webkit-user-select:none;user-select:none}.z-thead-wrapper th.z-at-left-edge{border-left:none}.z-thead-wrapper th[colspan]{text-align:center;background:var(--muted);font-weight:500;color:var(--foreground)}.z-thead-wrapper.z-shadow-header{box-shadow:0 1px 3px #00000014;position:relative;z-index:15}.z-thead-wrapper.z-shadow-header:where(.dark,.dark *){box-shadow:0 1px 3px #0000004d}.z-tbody-wrapper{flex:1;min-height:6.25rem;display:flex;flex-direction:column}.z-tbody-scrollbar{flex:1;height:100%}.z-empty-state,.z-loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:6.25rem;height:100%;color:var(--muted-foreground);font-size:.875rem;animation:z-fade-in .2s ease-out}.z-tbody-scrollbar,.z-tbody-scrollbar table{animation:z-fade-in .2s ease-out}@keyframes z-fade-in{0%{opacity:0;transform:translateY(.25rem)}to{opacity:1;transform:translateY(0)}}.z-tbody-wrapper tr{transition:background-color .15s ease}.z-tbody-wrapper tr:hover,.z-tbody-wrapper tr:hover td[style*=sticky]{background-color:var(--muted)}.z-tbody-wrapper tr.z-pinned-top td.z-sticky-left,.z-tbody-wrapper tr.z-pinned-top td.z-sticky-right,.z-tbody-wrapper tr.z-pinned-bottom td.z-sticky-left,.z-tbody-wrapper tr.z-pinned-bottom td.z-sticky-right{z-index:3}.z-tbody-wrapper tr.z-shadow-bottom{box-shadow:0 1px 3px #00000014!important;position:relative;z-index:15}.z-tbody-wrapper tr.z-shadow-bottom:where(.dark,.dark *){box-shadow:0 1px 3px #0000004d!important}.z-tbody-wrapper tr.z-shadow-top{box-shadow:0 -2px 4px #0000000d!important;position:relative;z-index:15}.z-tbody-wrapper tr.z-shadow-top:where(.dark,.dark *){box-shadow:0 -2px 4px #0003!important}.z-tbody-wrapper td{padding:.5rem 12px;height:2.5rem;vertical-align:middle;color:var(--foreground);white-space:nowrap;overflow:hidden;background:var(--card);border-left:thin solid var(--border);border-bottom:thin solid var(--border);box-sizing:border-box}.z-tbody-wrapper tbody.z-has-vertical-scroll td.z-at-bottom,.z-tbody-wrapper tbody.z-last-row-touches-bottom td.z-at-bottom{border-bottom:none}.z-tbody-wrapper td.z-at-left-edge{border-left:none}.z-tbody-wrapper td i{color:var(--muted-foreground);font-style:italic}.z-tbody-wrapper td[rowspan]{vertical-align:top;padding-top:.75rem}.z-tbody-wrapper td.z-row-hover{background-color:var(--muted)!important}.z-tbody-wrapper td.z-col-select,.z-tbody-wrapper td.z-col-expand,.z-tbody-wrapper td.z-col-actions{padding:.5rem 4px!important;text-align:center}.z-tbody-wrapper tr.z-child-row td.z-col-select:first-child,.z-tbody-wrapper tr.z-child-row td.z-col-expand:first-child,.z-tbody-wrapper tr.z-child-row td.z-col-actions:first-child{padding-left:0!important}.z-virtual-scroll-inner{position:relative;width:100%}.z-virtual-row{position:absolute;top:0;left:0;width:100%}tr.z-child-row td:first-child{padding-left:.75rem!important}tbody tr.z-selected,tbody tr.z-selected td{background-color:color-mix(in srgb,var(--primary) 15%,var(--background))!important}tbody tr.z-selected:hover,tbody tr.z-selected:hover td{background-color:color-mix(in srgb,var(--primary) 20%,var(--background))!important}tbody tr.z-indeterminate-selected,tbody tr.z-indeterminate-selected td{background-color:color-mix(in srgb,var(--primary) 10%,var(--background))!important}tbody tr.z-indeterminate-selected:hover,tbody tr.z-indeterminate-selected:hover td{background-color:color-mix(in srgb,var(--primary) 15%,var(--background))!important}tbody tr.z-pinned-top td{background-color:var(--card)!important}tbody tr.z-pinned-top:hover{background-color:var(--muted)}tbody tr.z-pinned-top:hover td{background-color:var(--muted)!important}tbody tr.z-pinned-bottom td{background-color:var(--card)!important}tbody tr.z-pinned-bottom:hover{background-color:var(--muted)}tbody tr.z-pinned-bottom:hover td,tr.z-expanded-row td{background-color:var(--muted)!important}thead th{position:relative}thead th .z-resizer{position:absolute;right:0;top:0;height:100%;width:.5rem;background:transparent;cursor:col-resize;-webkit-user-select:none;user-select:none;touch-action:none;z-index:5}thead th .z-resizer:after{content:\"\";position:absolute;right:0;top:0;height:100%;width:.1875rem;background:#0000001a;opacity:0;transition:opacity .2s ease}thead th .z-resizer:after:where(.dark,.dark *){background:#ffffff1a}thead th .z-resizer:hover:after{opacity:1;background:var(--primary);width:.1875rem}thead th .z-resizer.z-is-resizing:after{opacity:1;background:var(--primary);width:.1875rem}thead th .z-resizer.z-resizer-left{right:auto;left:0}thead th .z-resizer.z-resizer-left:after{right:auto;left:0}.z-thead-wrapper th.z-sticky-left,.z-thead-wrapper th.z-sticky-right,.z-tbody-wrapper th.z-sticky-left,.z-tbody-wrapper th.z-sticky-right,.z-tfoot-wrapper th.z-sticky-left,.z-tfoot-wrapper th.z-sticky-right{background-color:var(--muted);z-index:1;transform:translateZ(0);backface-visibility:hidden}.z-thead-wrapper td.z-sticky-left,.z-thead-wrapper td.z-sticky-right,.z-tbody-wrapper td.z-sticky-left,.z-tbody-wrapper td.z-sticky-right,.z-tfoot-wrapper td.z-sticky-left,.z-tfoot-wrapper td.z-sticky-right{background-color:var(--card);z-index:1;transform:translateZ(0);backface-visibility:hidden}.z-thead-wrapper th.z-sticky-left-last,.z-thead-wrapper td.z-sticky-left-last,.z-tbody-wrapper th.z-sticky-left-last,.z-tbody-wrapper td.z-sticky-left-last,.z-tfoot-wrapper th.z-sticky-left-last,.z-tfoot-wrapper td.z-sticky-left-last{position:relative;overflow:visible;border-right:thin solid var(--z-sticky-left-border-color)}.z-thead-wrapper th.z-sticky-left-last:after,.z-thead-wrapper td.z-sticky-left-last:after,.z-tbody-wrapper th.z-sticky-left-last:after,.z-tbody-wrapper td.z-sticky-left-last:after,.z-tfoot-wrapper th.z-sticky-left-last:after,.z-tfoot-wrapper td.z-sticky-left-last:after{content:\"\";position:absolute;top:0;bottom:0;right:var(--z-shadow-left-right);width:var(--z-shadow-left-width);pointer-events:none;box-shadow:inset 10px 0 8px -8px #0000001a;z-index:10;opacity:var(--z-shadow-left-opacity)}:host-context(.dark) .z-thead-wrapper th.z-sticky-left-last:after,:host-context(.dark) .z-thead-wrapper td.z-sticky-left-last:after,:host-context(.dark) .z-tbody-wrapper th.z-sticky-left-last:after,:host-context(.dark) .z-tbody-wrapper td.z-sticky-left-last:after,:host-context(.dark) .z-tfoot-wrapper th.z-sticky-left-last:after,:host-context(.dark) .z-tfoot-wrapper td.z-sticky-left-last:after{box-shadow:inset 10px 0 10px -8px #0000004d}.z-thead-wrapper.z-scroll-left,.z-tbody-wrapper.z-scroll-left,.z-tfoot-wrapper.z-scroll-left{--z-shadow-left-opacity: 1}.z-thead-wrapper.z-scroll-left:where(.dark,.dark *),.z-tbody-wrapper.z-scroll-left:where(.dark,.dark *),.z-tfoot-wrapper.z-scroll-left:where(.dark,.dark *){--z-sticky-left-border-color: var(--border)}.z-thead-wrapper th.z-sticky-right-first,.z-thead-wrapper td.z-sticky-right-first,.z-tbody-wrapper th.z-sticky-right-first,.z-tbody-wrapper td.z-sticky-right-first,.z-tfoot-wrapper th.z-sticky-right-first,.z-tfoot-wrapper td.z-sticky-right-first{position:relative;overflow:visible;border-left:thin solid var(--z-sticky-right-border-color)}.z-thead-wrapper th.z-sticky-right-first:before,.z-thead-wrapper td.z-sticky-right-first:before,.z-tbody-wrapper th.z-sticky-right-first:before,.z-tbody-wrapper td.z-sticky-right-first:before,.z-tfoot-wrapper th.z-sticky-right-first:before,.z-tfoot-wrapper td.z-sticky-right-first:before{content:\"\";position:absolute;top:0;bottom:0;left:var(--z-shadow-right-left);width:var(--z-shadow-right-width);pointer-events:none;box-shadow:inset -10px 0 8px -8px #0000001a;z-index:10;opacity:var(--z-shadow-right-opacity)}:host-context(.dark) .z-thead-wrapper th.z-sticky-right-first:before,:host-context(.dark) .z-thead-wrapper td.z-sticky-right-first:before,:host-context(.dark) .z-tbody-wrapper th.z-sticky-right-first:before,:host-context(.dark) .z-tbody-wrapper td.z-sticky-right-first:before,:host-context(.dark) .z-tfoot-wrapper th.z-sticky-right-first:before,:host-context(.dark) .z-tfoot-wrapper td.z-sticky-right-first:before{box-shadow:inset -10px 0 10px -8px #0000004d}.z-thead-wrapper.z-scroll-right,.z-tbody-wrapper.z-scroll-right,.z-tfoot-wrapper.z-scroll-right{--z-shadow-right-opacity: 1}.z-thead-wrapper.z-scroll-right:not(:where(.dark,.dark *)),.z-tbody-wrapper.z-scroll-right:not(:where(.dark,.dark *)),.z-tfoot-wrapper.z-scroll-right:not(:where(.dark,.dark *)){--z-sticky-right-border-color: transparent}.z-thead-wrapper th.z-sticky-right-last,.z-tfoot-wrapper th.z-sticky-right-last{position:relative}.z-thead-wrapper th.z-sticky-right-last:after,.z-tfoot-wrapper th.z-sticky-right-last:after{content:\"\";position:absolute;top:0;bottom:0;right:-1.875rem;width:1.875rem;background:var(--muted);pointer-events:none}.z-tfoot-wrapper{flex-shrink:0;background:var(--muted);overflow-x:hidden;overflow-y:hidden;touch-action:pan-y pinch-zoom}.z-tfoot-wrapper th{height:auto;padding:.5rem 12px;text-align:left;vertical-align:middle;font-weight:500;font-size:.75rem;color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.5px;background:var(--muted);border-left:thin solid var(--border);border-top:thin solid var(--border)}.z-tfoot-wrapper th.z-at-left-edge{border-left:none}.z-tfoot-wrapper.z-shadow-footer{box-shadow:0 -2px 4px #0000000d;position:relative;z-index:15}.z-tfoot-wrapper.z-shadow-footer:where(.dark,.dark *){box-shadow:0 -2px 4px #0003}.z-pin-btn{padding:.125rem 4px;border-radius:.25rem;color:var(--muted-foreground);transition:all .15s ease}.z-pin-btn:hover{background-color:var(--muted);color:var(--foreground)}.z-pin-btn.z-pin-btn-active{color:var(--primary);background-color:var(--primary)}.z-pin-btn.z-pin-btn-active:hover{background-color:var(--primary);opacity:.8}.z-row-pin-trigger{opacity:1}.z-row-pin-trigger.text-primary{color:var(--primary)}.z-header-pin-trigger{opacity:1}.z-header-pin-trigger.text-primary{color:var(--primary)}th{overflow:hidden}th .z-header-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}th .z-header-text-wrapper{transition:background-color .15s ease;border-radius:.25rem;min-width:0;overflow:hidden;flex-shrink:1}th .z-header-text-wrapper.z-has-options:hover,th .z-header-text-wrapper.z-has-options:focus-visible,th .z-header-text-wrapper.z-has-options.z-popover-open{background-color:color-mix(in srgb,var(--foreground) 8%,transparent);outline:none}th .z-header-text-wrapper.z-has-options:active{background-color:color-mix(in srgb,var(--foreground) 12%,transparent)}.cdk-drag-preview,.z-drag-preview{box-shadow:0 5px 20px #0003;box-sizing:border-box;border-radius:.375rem;background-color:var(--card);border:1px solid var(--primary);overflow:hidden;z-index:10000!important;pointer-events:none}.cdk-drag-preview:where(.dark,.dark *),.z-drag-preview:where(.dark,.dark *){box-shadow:0 5px 20px #00000080}.cdk-drag-placeholder{background-color:color-mix(in srgb,var(--primary) 10%,var(--background));border:2px dashed var(--primary);box-sizing:border-box;border-radius:.375rem}.cdk-drag-animating{transition:transform .1s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .cdk-drag:not(.cdk-drag-placeholder){transition:transform .1s cubic-bezier(0,0,.2,1)}.z-drag-item.cdk-drag-dragging{transition:none!important}.z-column-drop-list{min-height:3.125rem;overscroll-behavior:contain}.z-column-drop-list.cdk-drop-list-dragging{overflow:clip}.z-table-settings-drawer input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:1rem;height:1rem;border:thin solid var(--input);border-radius:.25rem;background-color:var(--background);cursor:pointer;position:relative;transition:all .2s ease}.z-table-settings-drawer input[type=checkbox]:hover{border-color:var(--primary)}.z-table-settings-drawer input[type=checkbox]:checked{background-color:var(--primary);border-color:var(--primary)}.z-table-settings-drawer input[type=checkbox]:checked:after{content:\"\";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:.375rem;height:.625rem;border:solid var(--primary-foreground);border-width:0 .125rem .125rem 0;transform:translate(-50%,-60%) rotate(45deg)}.z-table-settings-drawer input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed}\n"] }]
         }], ctorParameters: () => [], propDecorators: { zChange: [{ type: i0.Output, args: ["zChange"] }], zControl: [{ type: i0.Output, args: ["zControl"] }], zClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "zClass", required: false }] }], zConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "zConfig", required: false }] }], zLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLoading", required: false }] }], zKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "zKey", required: false }] }], zVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "zVariant", required: false }] }], theadWrapper: [{ type: i0.ViewChild, args: ['theadWrapper', { isSignal: true }] }], tbodyContainer: [{ type: i0.ViewChild, args: ['tbodyContainer', { isSignal: true }] }], tbodyWrapper: [{ type: i0.ViewChild, args: ['tbodyWrapper', { isSignal: true }] }], tbodyScrollbar: [{ type: i0.ViewChild, args: ['tbodyWrapper', { isSignal: true }] }], tfootWrapper: [{ type: i0.ViewChild, args: ['tfootWrapper', { isSignal: true }] }], expandedRowTemplate: [{ type: i0.ViewChild, args: ['expandedRowTemplate', { isSignal: true }] }], virtualRowElements: [{ type: i0.ViewChildren, args: ['virtualRow', { isSignal: true }] }] } });
 
 /**