@shival99/z-ui 2.1.28 → 2.1.30

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

@@ -58,754 +58,272 @@ const Z_TABLE_DEFAULT_MAX_VISIBLE_ACTIONS = 3;
 /** Default size variant for the overflow dropdown trigger button */
 const Z_TABLE_DEFAULT_DROPDOWN_BUTTON_SIZE = 'sm';
 
-class ZTableActionsComponent {
-    zConfig = input.required(...(ngDevMode ? [{ debugName: "zConfig" }] : []));
-    zRow = input.required(...(ngDevMode ? [{ debugName: "zRow" }] : []));
-    zRowId = input.required(...(ngDevMode ? [{ debugName: "zRowId" }] : []));
-    zDropdownButtonSize = input(Z_TABLE_DEFAULT_DROPDOWN_BUTTON_SIZE, ...(ngDevMode ? [{ debugName: "zDropdownButtonSize" }] : []));
-    zActionClick = output();
-    allActions = computed(() => {
-        const config = this.zConfig();
-        const row = this.zRow();
-        const { actions } = config;
-        const resolvedActions = typeof actions === 'function' ? actions(row) : actions;
-        return resolvedActions.filter(action => {
-            if (typeof action.hidden === 'function') {
-                return !action.hidden(row);
-            }
-            return !action.hidden;
-        });
-    }, ...(ngDevMode ? [{ debugName: "allActions" }] : []));
-    shouldShowAsButtons = computed(() => {
-        const actions = this.allActions();
-        const maxVisible = this.zConfig().maxVisible ?? Z_TABLE_DEFAULT_MAX_VISIBLE_ACTIONS;
-        return actions.length <= maxVisible;
-    }, ...(ngDevMode ? [{ debugName: "shouldShowAsButtons" }] : []));
-    actionStates = computed(() => {
-        const row = this.zRow();
-        const actions = this.allActions();
-        const states = {};
-        for (const action of actions) {
-            const isHidden = typeof action.hidden === 'function' ? action.hidden(row) : (action.hidden ?? false);
-            const isDisabled = typeof action.disabled === 'function' ? action.disabled(row) : (action.disabled ?? false);
-            const isLoading = typeof action.loading === 'function' ? action.loading(row) : (action.loading ?? false);
-            states[action.key] = {
-                visible: !isHidden,
-                loading: isLoading,
-                disabled: isDisabled || isLoading,
-                tooltipState: this._getTooltipState(action.tooltip),
-            };
-        }
-        return states;
-    }, ...(ngDevMode ? [{ debugName: "actionStates" }] : []));
-    dropdownItems = computed(() => {
-        const row = this.zRow();
-        return this.allActions().map(action => {
-            const isDisabled = typeof action.disabled === 'function' ? action.disabled(row) : (action.disabled ?? false);
-            const isLoading = typeof action.loading === 'function' ? action.loading(row) : (action.loading ?? false);
-            return {
-                label: action.label ?? action.key,
-                icon: action.icon,
-                iconSize: action?.iconSize || '18',
-                loading: isLoading,
-                disabled: isDisabled || isLoading,
-                class: action.class,
-                divide: action.divide,
-                onClick: () => {
-                    if (isDisabled || isLoading) {
-                        return;
-                    }
-                    this._emitActionClick(action);
-                },
-            };
-        });
-    }, ...(ngDevMode ? [{ debugName: "dropdownItems" }] : []));
-    _getTooltipState(tooltip) {
-        if (!tooltip) {
-            return { content: '', alwaysShow: false };
-        }
-        if (typeof tooltip === 'string') {
-            return { content: tooltip, alwaysShow: true };
-        }
+// ─── Column Visibility Pre-filter ────────────────────────────────────────────
+/**
+ * Recursively filters columns based on their `visible` property.
+ * This runs BEFORE TanStack table creation — columns excluded here
+ * won't generate ColumnDef entries at all (unlike columnVisibility state
+ * which hides columns but keeps them in the column model).
+ */
+const filterVisibleColumns = (columns) => columns
+    .filter(col => {
+    const { visible } = col;
+    if (visible === undefined) {
+        return true;
+    }
+    return typeof visible === 'function' ? visible() : visible;
+})
+    .map(col => {
+    if (col.columns && col.columns.length > 0) {
         return {
-            content: tooltip.content ?? '',
-            alwaysShow: tooltip.alwaysShow ?? true,
-            position: tooltip.position,
-            arrow: tooltip.arrow,
-            offset: tooltip.offset,
-            maxWidth: tooltip.maxWidth,
+            ...col,
+            columns: filterVisibleColumns(col.columns),
         };
     }
-    _onActionClick(action, event) {
-        event.stopPropagation();
-        const states = this.actionStates();
-        if (states[action.key]?.disabled) {
-            return;
-        }
-        this._emitActionClick(action);
+    return col;
+});
+// ─── Config Type Guards ──────────────────────────────────────────────────────
+/**
+ * Checks if a config value is a plain object (config struct) vs a primitive/template.
+ * Used to distinguish shorthand content (string/TemplateRef) from full config objects
+ * like ZTableHeaderColumnConfig, ZTableBodyColumnConfig, etc.
+ */
+const isObjectConfig = (config) => {
+    if (!config || typeof config !== 'object') {
+        return false;
     }
-    _onDropdownItemClick(item) {
-        const action = this.allActions().find(a => (a.label ?? a.key) === item.label);
-        if (!action || this.actionStates()[action.key]?.disabled) {
-            return;
-        }
-        this._emitActionClick(action);
+    return config.constructor === Object;
+};
+/** Type guard: is this a full header config object (not just content shorthand)? */
+const isHeaderConfig = (config) => isObjectConfig(config);
+/** Type guard: is this a full body config object (not just content shorthand)? */
+const isBodyConfig = (config) => isObjectConfig(config);
+/** Type guard: is this a full footer config object (not just content shorthand)? */
+const isFooterConfig = (config) => isObjectConfig(config);
+// ─── Config Extractors ───────────────────────────────────────────────────────
+/**
+ * Internal helper that normalizes header/footer config into a consistent shape.
+ * Handles both shorthand (just content) and full config objects.
+ */
+const getHeaderOrFooterConfigInternal = (col, type, footerRowIndex = 0) => {
+    const empty = {
+        content: undefined,
+        class: undefined,
+        style: undefined,
+        align: undefined,
+        tooltip: undefined,
+        rowSpan: undefined,
+        colSpan: undefined,
+        contentClass: undefined,
+        contentStyle: undefined,
+    };
+    if (!col) {
+        return empty;
     }
-    _emitActionClick(action) {
-        this.zActionClick.emit({
-            key: action.key,
-            row: this.zRow(),
-            rowId: this.zRowId(),
-            action,
-        });
+    const footer = Array.isArray(col.footer) ? col.footer[footerRowIndex] : col.footer;
+    const config = type === 'header' ? col.header : footer;
+    const isConfigFn = type === 'header' ? isHeaderConfig : isFooterConfig;
+    if (!isConfigFn(config)) {
+        return { ...empty, content: config };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZTableActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZTableActionsComponent, isStandalone: true, selector: "z-table-actions", inputs: { zConfig: { classPropertyName: "zConfig", publicName: "zConfig", isSignal: true, isRequired: true, transformFunction: null }, zRow: { classPropertyName: "zRow", publicName: "zRow", isSignal: true, isRequired: true, transformFunction: null }, zRowId: { classPropertyName: "zRowId", publicName: "zRowId", isSignal: true, isRequired: true, transformFunction: null }, zDropdownButtonSize: { classPropertyName: "zDropdownButtonSize", publicName: "zDropdownButtonSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zActionClick: "zActionClick" }, ngImport: i0, template: `
-    <div class="z-table-actions flex items-center justify-center gap-1">
-      @if (shouldShowAsButtons()) {
-        @for (action of allActions(); track action.key) {
-          @if (actionStates()[action.key].visible) {
-            <button
-              type="button"
-              z-button
-              z-tooltip
-              [zType]="action.type ?? 'outline'"
-              [zSize]="action.size ?? 'sm'"
-              [zTypeIcon]="action.icon"
-              zSizeIcon="14"
-              [zLabel]="action.label ?? ''"
-              [zLoading]="actionStates()[action.key].loading"
-              [zDisabled]="actionStates()[action.key].disabled"
-              [class]="action.class ?? ''"
-              [zContent]="actionStates()[action.key].tooltipState.content"
-              [zAlwaysShow]="actionStates()[action.key].tooltipState.alwaysShow"
-              [zArrow]="actionStates()[action.key].tooltipState.arrow ?? true"
-              [zOffset]="actionStates()[action.key].tooltipState.offset ?? 8"
-              [zMaxWidth]="actionStates()[action.key].tooltipState.maxWidth ?? '250px'"
-              (click)="_onActionClick(action, $event)"
-            ></button>
-          }
-        }
-      } @else {
-        <z-dropdown-menu
-          [zItems]="dropdownItems()"
-          zPosition="bottom-right"
-          [zButtonSize]="zDropdownButtonSize()"
-          [zMinWidth]="160"
-          (zOnItemClick)="_onDropdownItemClick($event)"
-        >
-          <button
-            type="button"
-            z-button
-            zTypeIcon="lucideEllipsis"
-            [zSize]="zDropdownButtonSize()"
-            zType="outline"
-            [zWave]="false"
-          ></button>
-        </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", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTooltipPosition", "zTrigger", "zTooltipTrigger", "zTooltipType", "zTooltipSize", "zClass", "zTooltipClass", "zShowDelay", "zTooltipShowDelay", "zHideDelay", "zTooltipHideDelay", "zArrow", "zTooltipArrow", "zDisabled", "zTooltipDisabled", "zOffset", "zTooltipOffset", "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", "zWave"], outputs: ["zOnItemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZTableActionsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'z-table-actions', imports: [ZButtonComponent, ZTooltipDirective, ZDropdownMenuComponent], standalone: true, template: `
-    <div class="z-table-actions flex items-center justify-center gap-1">
-      @if (shouldShowAsButtons()) {
-        @for (action of allActions(); track action.key) {
-          @if (actionStates()[action.key].visible) {
-            <button
-              type="button"
-              z-button
-              z-tooltip
-              [zType]="action.type ?? 'outline'"
-              [zSize]="action.size ?? 'sm'"
-              [zTypeIcon]="action.icon"
-              zSizeIcon="14"
-              [zLabel]="action.label ?? ''"
-              [zLoading]="actionStates()[action.key].loading"
-              [zDisabled]="actionStates()[action.key].disabled"
-              [class]="action.class ?? ''"
-              [zContent]="actionStates()[action.key].tooltipState.content"
-              [zAlwaysShow]="actionStates()[action.key].tooltipState.alwaysShow"
-              [zArrow]="actionStates()[action.key].tooltipState.arrow ?? true"
-              [zOffset]="actionStates()[action.key].tooltipState.offset ?? 8"
-              [zMaxWidth]="actionStates()[action.key].tooltipState.maxWidth ?? '250px'"
-              (click)="_onActionClick(action, $event)"
-            ></button>
-          }
-        }
-      } @else {
-        <z-dropdown-menu
-          [zItems]="dropdownItems()"
-          zPosition="bottom-right"
-          [zButtonSize]="zDropdownButtonSize()"
-          [zMinWidth]="160"
-          (zOnItemClick)="_onDropdownItemClick($event)"
-        >
-          <button
-            type="button"
-            z-button
-            zTypeIcon="lucideEllipsis"
-            [zSize]="zDropdownButtonSize()"
-            zType="outline"
-            [zWave]="false"
-          ></button>
-        </z-dropdown-menu>
-      }
-    </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}\n"] }]
-        }], propDecorators: { zConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "zConfig", required: true }] }], zRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRow", required: true }] }], zRowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRowId", required: true }] }], zDropdownButtonSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDropdownButtonSize", required: false }] }], zActionClick: [{ type: i0.Output, args: ["zActionClick"] }] } });
-
-class ZTableContentEditorComponent {
-    zValue = input(...(ngDevMode ? [undefined, { debugName: "zValue" }] : []));
-    zConfig = input.required(...(ngDevMode ? [{ debugName: "zConfig" }] : []));
-    zCommit = output();
-    zCancel = output();
-    draftValue = signal(null, ...(ngDevMode ? [{ debugName: "draftValue" }] : []));
-    controlClass = computed(() => zMergeClasses('z-table-embedded-control', this.zConfig().class), ...(ngDevMode ? [{ debugName: "controlClass" }] : []));
-    inputType = computed(() => this.zConfig().type === 'number' ? 'number' : 'text', ...(ngDevMode ? [{ debugName: "inputType" }] : []));
-    _host = inject(ElementRef);
-    _finished = false;
-    _inputControl = null;
-    _selectControl = null;
-    _calendarControl = null;
-    _activated = false;
-    _ignoreNextCalendarChange = false;
-    constructor() {
-        effect(() => {
-            const value = this.zValue();
-            this.draftValue.set(value ?? null);
-        });
-        afterNextRender(() => this._activateControl());
+    const typedConfig = config;
+    return {
+        content: typedConfig.content,
+        class: typedConfig.class,
+        style: typedConfig.style,
+        align: typedConfig.align,
+        tooltip: typedConfig.tooltip,
+        rowSpan: typedConfig.rowSpan,
+        colSpan: typedConfig.colSpan,
+        contentClass: typedConfig.contentClass,
+        contentStyle: typedConfig.contentStyle,
+    };
+};
+/** Extract and normalize header config from a column definition */
+const getHeaderConfig = (col) => getHeaderOrFooterConfigInternal(col, 'header');
+/**
+ * Extract and normalize body config from a column definition.
+ * Resolves dynamic properties (class, style, rowSpan, etc.) when CellContext is provided.
+ */
+const getBodyConfig = (col, ctx) => {
+    const empty = {
+        content: undefined,
+        type: 'default',
+        tagColor: 'primary',
+        class: undefined,
+        style: undefined,
+        align: undefined,
+        rowSpan: undefined,
+        colSpan: undefined,
+        contentClass: undefined,
+        contentStyle: undefined,
+        tooltip: undefined,
+        popover: undefined,
+    };
+    if (!col) {
+        return empty;
     }
-    onInputControl(control) {
-        this._inputControl = control;
-        queueMicrotask(() => this._activateControl());
+    if (!isBodyConfig(col.body)) {
+        return { ...empty, content: col.body };
     }
-    onSelectControl(control) {
-        this._selectControl = control;
-        queueMicrotask(() => this._activateControl());
+    const { body } = col;
+    const rowSpan = typeof body.rowSpan === 'function' && ctx ? body.rowSpan(ctx) : body.rowSpan;
+    const colSpan = typeof body.colSpan === 'function' && ctx ? body.colSpan(ctx) : body.colSpan;
+    const classValue = typeof body.class === 'function' && ctx ? body.class(ctx) : body.class;
+    const styleValue = typeof body.style === 'function' && ctx ? body.style(ctx) : body.style;
+    const contentClass = typeof body.contentClass === 'function' && ctx ? body.contentClass(ctx) : body.contentClass;
+    const contentStyle = typeof body.contentStyle === 'function' && ctx ? body.contentStyle(ctx) : body.contentStyle;
+    const tooltip = typeof body.tooltip === 'function' && ctx ? body.tooltip(ctx) : body.tooltip;
+    const popover = typeof body.popover === 'function' && ctx ? body.popover(ctx) : body.popover;
+    const tagColor = typeof body.tagColor === 'function' && ctx ? body.tagColor(ctx) : body.tagColor;
+    return {
+        content: body.content,
+        type: body.type || 'default',
+        tagColor: tagColor || 'primary',
+        class: classValue,
+        style: styleValue,
+        align: body.align,
+        rowSpan: typeof rowSpan === 'number' ? rowSpan : undefined,
+        colSpan: typeof colSpan === 'number' ? colSpan : undefined,
+        contentClass,
+        contentStyle: contentStyle,
+        tooltip,
+        popover,
+    };
+};
+const getFooterConfig = (col, footerRowIndex = 0) => getHeaderOrFooterConfigInternal(col, 'footer', footerRowIndex);
+/** Ưu tiên label riêng, sau đó dùng tooltip dạng chuỗi cho action trong dropdown. */
+const getZTableActionDropdownLabel = (action) => action.label ?? (typeof action.tooltip === 'string' ? action.tooltip : action.key);
+// ─── Shortcut Accessors ──────────────────────────────────────────────────────
+// These convenience functions extract a single property from the relevant config.
+const getHeaderContent = (col) => getHeaderConfig(col).content;
+const getBodyContent = (col) => {
+    if (!col?.body) {
+        return undefined;
     }
-    onCalendarControl(control) {
-        this._calendarControl = control;
-        queueMicrotask(() => this._activateControl());
+    return isBodyConfig(col.body) ? col.body.content : col.body;
+};
+const getFooterContent = (col, footerRowIndex = 0) => getFooterConfig(col, footerRowIndex).content;
+const getBodyRowSpan = (col, ctx) => getBodyConfig(col, ctx).rowSpan;
+const getBodyColSpan = (col, ctx) => getBodyConfig(col, ctx).colSpan;
+const getHeaderRowSpan = (col) => getHeaderConfig(col).rowSpan;
+const getHeaderColSpan = (col) => getHeaderConfig(col).colSpan;
+const getFooterRowSpan = (col, footerRowIndex = 0) => getFooterConfig(col, footerRowIndex).rowSpan;
+const getFooterColSpan = (col, footerRowIndex = 0) => getFooterConfig(col, footerRowIndex).colSpan;
+// ─── Icon Syntax Parsing ─────────────────────────────────────────────────────
+/**
+ * Parses inline icon syntax: `"Total [icon:lucideTrendingUp|size:16|class:text-green] Revenue"`
+ * Returns an array of text and icon segments for rendering by ZTableIconTextComponent.
+ */
+function parseIconString(content) {
+    if (!content || typeof content !== 'string') {
+        return [{ type: 'text', value: content || '' }];
     }
-    onSelectChange(value) {
-        if (this.zConfig().selectMode !== 'single') {
-            this.draftValue.set(value);
-            return;
+    const parts = [];
+    const iconRegex = /\[icon:([^\]]+)\]/g;
+    let lastIndex = 0;
+    let match;
+    while ((match = iconRegex.exec(content)) !== null) {
+        if (match.index > lastIndex) {
+            const textPart = content.slice(lastIndex, match.index);
+            if (textPart) {
+                parts.push({ type: 'text', value: textPart });
+            }
         }
-        this._commit(value);
-    }
-    onCalendarChange(value) {
-        if (this._ignoreNextCalendarChange) {
-            this._ignoreNextCalendarChange = false;
-            return;
+        const iconContent = match[1];
+        const attrs = iconContent.split('|');
+        const iconName = attrs[0];
+        const iconPart = { type: 'icon', value: iconName };
+        for (let i = 1; i < attrs.length; i++) {
+            const [key, val] = attrs[i].split(':');
+            if (key === 'size') {
+                iconPart.size = parseInt(val, 10);
+            }
+            if (key === 'class') {
+                iconPart.class = val;
+            }
+            if (key === 'strokeWidth') {
+                iconPart.strokeWidth = parseFloat(val);
+            }
         }
-        this._commit(value);
+        parts.push(iconPart);
+        lastIndex = match.index + match[0].length;
     }
-    commitDraft() {
-        this._commit(this.draftValue());
+    if (lastIndex < content.length) {
+        parts.push({ type: 'text', value: content.slice(lastIndex) });
     }
-    onEditorKeydown(event) {
-        if (event.key !== 'Escape') {
-            return;
-        }
-        event.preventDefault();
-        event.stopPropagation();
-        if (this._finished) {
-            return;
-        }
-        this._finished = true;
-        this.zCancel.emit();
+    return parts.length > 0 ? parts : [{ type: 'text', value: content }];
+}
+/** Removes all `[icon:...]` syntax from a string, returning plain text */
+function stripIconSyntax(content) {
+    if (!content || typeof content !== 'string') {
+        return content || '';
     }
-    _commit(value) {
-        if (this._finished) {
-            return;
-        }
-        this._finished = true;
-        this.zCommit.emit(value);
+    return content.replace(/\[icon:[^\]]+\]/g, '').trim();
+}
+/** Returns true if the content string contains at least one `[icon:...]` segment */
+function hasIconSyntax(content) {
+    if (!content || typeof content !== 'string') {
+        return false;
     }
-    _activateControl() {
-        if (this._activated) {
-            return;
-        }
-        const { type } = this.zConfig();
-        if (type === 'select') {
-            const trigger = this._host.nativeElement.querySelector('.z-select-trigger');
-            if (!this._selectControl || !trigger) {
-                return;
-            }
-            this._activated = true;
-            this._selectControl?.focus();
-            trigger.click();
-            return;
+    return /\[icon:[^\]]+\]/.test(content);
+}
+// ─── Column Lookup ───────────────────────────────────────────────────────────
+/** Recursively search for a column config by ID within a (possibly nested) column array */
+const findColumnConfig = (columnId, columns) => {
+    for (const col of columns) {
+        if (col.id === columnId) {
+            return col;
         }
-        if (type === 'date') {
-            if (!this._calendarControl) {
-                return;
+        if (col.columns) {
+            const found = findColumnConfig(columnId, col.columns);
+            if (found) {
+                return found;
             }
-            this._activated = true;
-            this._ignoreNextCalendarChange = true;
-            this._calendarControl?.open();
-            requestAnimationFrame(() => this._focusCalendarInput());
-            return;
-        }
-        if (!this._inputControl) {
-            return;
         }
-        this._activated = true;
-        this._inputControl?.focus();
     }
-    _focusCalendarInput() {
-        const input = this._host.nativeElement.querySelector('.z-calendar-wrapper input');
-        input?.focus();
+    return undefined;
+};
+const getZTableColumnType = (column, columnId) => {
+    if (column?.type) {
+        return column.type;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZTableContentEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZTableContentEditorComponent, isStandalone: true, selector: "z-table-content-editor", inputs: { zValue: { classPropertyName: "zValue", publicName: "zValue", isSignal: true, isRequired: false, transformFunction: null }, zConfig: { classPropertyName: "zConfig", publicName: "zConfig", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { zCommit: "zCommit", zCancel: "zCancel" }, ngImport: i0, template: `
-    @switch (zConfig().type) {
-      @case ('select') {
-        <z-select
-          #embeddedControl
-          [class]="controlClass()"
-          [style]="zConfig().style"
-          [zSize]="zConfig().size"
-          [zMode]="zConfig().selectMode"
-          [zConfig]="zConfig().selectConfig"
-          [zShowSearch]="zConfig().selectShowSearch"
-          [zAllowClear]="zConfig().allowClear"
-          [zWrap]="zConfig().selectWrap"
-          [zLoading]="zConfig().loading"
-          [zLoadingOutline]="true"
-          [zDisabled]="zConfig().disabled"
-          [zReadonly]="zConfig().readonly"
-          [zMaxTagCount]="zConfig().maxTagCount"
-          [zPlaceholder]="zConfig().placeholder"
-          [zOptions]="zConfig().options"
-          [ngModel]="zValue()"
-          [ngModelOptions]="{ standalone: true }"
-          (ngModelChange)="onSelectChange($event)"
-          (zOnBlur)="commitDraft()"
-          (keydown)="onEditorKeydown($event)"
-          (zControl)="onSelectControl($event)"
-        />
-      }
-      @case ('date') {
-        <z-calendar
-          #embeddedControl
-          [class]="controlClass()"
-          [style]="zConfig().style"
-          [zSize]="zConfig().size"
-          zMode="single"
-          [zFormat]="zConfig().dateFormat"
-          [zValueType]="zConfig().dateValueType"
-          [zMinDate]="zConfig().minDate"
-          [zMaxDate]="zConfig().maxDate"
-          [zAllowClear]="zConfig().allowClear"
-          [zLoading]="zConfig().loading"
-          [zLoadingOutline]="true"
-          [zDisabled]="zConfig().disabled"
-          [zReadonly]="zConfig().readonly"
-          [ngModel]="$any(zValue())"
-          [ngModelOptions]="{ standalone: true }"
-          (zChange)="onCalendarChange($event)"
-          (keydown)="onEditorKeydown($event)"
-          (zControl)="onCalendarControl($event)"
-        />
-      }
-      @default {
-        <z-input
-          #embeddedControl
-          [class]="controlClass()"
-          [style]="zConfig().style"
-          [zSize]="zConfig().size"
-          [zType]="inputType()"
-          [zAlign]="zConfig().align"
-          [zPlaceholder]="zConfig().placeholder"
-          [zPrefix]="zConfig().prefix"
-          [zSuffix]="zConfig().suffix"
-          [zMin]="zConfig().min"
-          [zMax]="zConfig().max"
-          [zStep]="zConfig().step ?? 1"
-          [zShowArrows]="zConfig().type === 'number'"
-          [zMask]="zConfig().mask"
-          [zDecimalPlaces]="zConfig().decimalPlaces"
-          [zAllowNegative]="zConfig().allowNegative"
-          [zThousandSeparator]="zConfig().thousandSeparator"
-          [zDecimalMarker]="zConfig().decimalMarker"
-          [zAllowClear]="zConfig().allowClear"
-          [zLoading]="zConfig().loading"
-          [zLoadingOutline]="true"
-          [zDisabled]="zConfig().disabled"
-          [zReadonly]="zConfig().readonly"
-          [ngModel]="$any(zValue())"
-          [ngModelOptions]="{ standalone: true }"
-          (ngModelChange)="draftValue.set($event)"
-          (zOnBlur)="commitDraft()"
-          (zOnEnter)="commitDraft()"
-          (zOnKeydown)="onEditorKeydown($event)"
-          (zControl)="onInputControl($event)"
-        />
-      }
+    if (column && isBodyConfig(column.body) && column.body.actions) {
+        return 'actions';
     }
-  `, isInline: true, styles: [":host{position:absolute;z-index:2;inset:0;display:block;min-width:0;overflow:hidden;background:var(--background);box-shadow:inset 0 0 0 1px var(--primary)}:host ::ng-deep z-input,:host ::ng-deep z-select,:host ::ng-deep z-calendar,:host ::ng-deep .z-input-wrapper,:host ::ng-deep .z-select-wrapper,:host ::ng-deep .z-calendar-wrapper,:host ::ng-deep .z-input-wrapper>div,:host ::ng-deep .z-select-wrapper>div,:host ::ng-deep .z-calendar-wrapper>div{width:100%;height:100%;min-height:0}:host ::ng-deep .z-input-container,:host ::ng-deep .z-select-trigger,:host ::ng-deep .z-calendar-wrapper>div>div{width:100%;height:100%!important;min-height:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;outline:0!important;--tw-ring-shadow: 0 0 #0000 !important}:host ::ng-deep .z-input-container,:host ::ng-deep .z-select-trigger,:host ::ng-deep .z-calendar-wrapper>div>div{gap:0!important;padding:0 12px!important;color:inherit;font:inherit;line-height:inherit}:host ::ng-deep .z-loading-outline-active{box-shadow:0 0 0 3px color-mix(in oklab,var(--ring) 50%,transparent)!important}:host ::ng-deep .z-input-native,:host ::ng-deep .z-select-trigger,:host ::ng-deep .z-calendar-wrapper input{color:inherit;font:inherit;line-height:inherit}:host ::ng-deep .z-calendar-wrapper>div>div>z-icon{display:none}\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: ZCalendarComponent, selector: "z-calendar", inputs: ["class", "zMode", "zSize", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zLoading", "zLoadingOutline", "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: ZInputComponent, selector: "z-input", inputs: ["class", "zType", "zSize", "zAlign", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zLoading", "zLoadingOutline", "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", "zClassSelect", "zMode", "zSize", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zLoading", "zLoadingOutline", "zPrefix", "zAllowClear", "zShowCheck", "zWrap", "zShowSearch", "zPlaceholderSearch", "zDebounce", "zNotFoundText", "zEmptyText", "zEmptyIcon", "zMaxTagCount", "zDropdownMaxHeight", "zOptionHeight", "zVirtualScroll", "zDynamicSize", "zShowAction", "zOptions", "zConfig", "zTranslateLabels", "zKey", "zSearchServer", "zLoadingMore", "zEnableLoadMore", "zScrollDistance", "zMaxVisible", "zScrollClose", "zSticky", "zPosition", "zSelectedTemplate", "zOptionTemplate", "zActionTemplate", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zValidators"], outputs: ["zOnSearch", "zOnLoadMore", "zOnBlur", "zOnFocus", "zControl", "zEvent"], exportAs: ["zSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZTableContentEditorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'z-table-content-editor', imports: [FormsModule, ZCalendarComponent, ZInputComponent, ZSelectComponent], standalone: true, template: `
-    @switch (zConfig().type) {
-      @case ('select') {
-        <z-select
-          #embeddedControl
-          [class]="controlClass()"
-          [style]="zConfig().style"
-          [zSize]="zConfig().size"
-          [zMode]="zConfig().selectMode"
-          [zConfig]="zConfig().selectConfig"
-          [zShowSearch]="zConfig().selectShowSearch"
-          [zAllowClear]="zConfig().allowClear"
-          [zWrap]="zConfig().selectWrap"
-          [zLoading]="zConfig().loading"
-          [zLoadingOutline]="true"
-          [zDisabled]="zConfig().disabled"
-          [zReadonly]="zConfig().readonly"
-          [zMaxTagCount]="zConfig().maxTagCount"
-          [zPlaceholder]="zConfig().placeholder"
-          [zOptions]="zConfig().options"
-          [ngModel]="zValue()"
-          [ngModelOptions]="{ standalone: true }"
-          (ngModelChange)="onSelectChange($event)"
-          (zOnBlur)="commitDraft()"
-          (keydown)="onEditorKeydown($event)"
-          (zControl)="onSelectControl($event)"
-        />
-      }
-      @case ('date') {
-        <z-calendar
-          #embeddedControl
-          [class]="controlClass()"
-          [style]="zConfig().style"
-          [zSize]="zConfig().size"
-          zMode="single"
-          [zFormat]="zConfig().dateFormat"
-          [zValueType]="zConfig().dateValueType"
-          [zMinDate]="zConfig().minDate"
-          [zMaxDate]="zConfig().maxDate"
-          [zAllowClear]="zConfig().allowClear"
-          [zLoading]="zConfig().loading"
-          [zLoadingOutline]="true"
-          [zDisabled]="zConfig().disabled"
-          [zReadonly]="zConfig().readonly"
-          [ngModel]="$any(zValue())"
-          [ngModelOptions]="{ standalone: true }"
-          (zChange)="onCalendarChange($event)"
-          (keydown)="onEditorKeydown($event)"
-          (zControl)="onCalendarControl($event)"
-        />
-      }
-      @default {
-        <z-input
-          #embeddedControl
-          [class]="controlClass()"
-          [style]="zConfig().style"
-          [zSize]="zConfig().size"
-          [zType]="inputType()"
-          [zAlign]="zConfig().align"
-          [zPlaceholder]="zConfig().placeholder"
-          [zPrefix]="zConfig().prefix"
-          [zSuffix]="zConfig().suffix"
-          [zMin]="zConfig().min"
-          [zMax]="zConfig().max"
-          [zStep]="zConfig().step ?? 1"
-          [zShowArrows]="zConfig().type === 'number'"
-          [zMask]="zConfig().mask"
-          [zDecimalPlaces]="zConfig().decimalPlaces"
-          [zAllowNegative]="zConfig().allowNegative"
-          [zThousandSeparator]="zConfig().thousandSeparator"
-          [zDecimalMarker]="zConfig().decimalMarker"
-          [zAllowClear]="zConfig().allowClear"
-          [zLoading]="zConfig().loading"
-          [zLoadingOutline]="true"
-          [zDisabled]="zConfig().disabled"
-          [zReadonly]="zConfig().readonly"
-          [ngModel]="$any(zValue())"
-          [ngModelOptions]="{ standalone: true }"
-          (ngModelChange)="draftValue.set($event)"
-          (zOnBlur)="commitDraft()"
-          (zOnEnter)="commitDraft()"
-          (zOnKeydown)="onEditorKeydown($event)"
-          (zControl)="onInputControl($event)"
-        />
-      }
+    const id = column?.id ?? columnId;
+    if (id === 'select') {
+        return 'select';
     }
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{position:absolute;z-index:2;inset:0;display:block;min-width:0;overflow:hidden;background:var(--background);box-shadow:inset 0 0 0 1px var(--primary)}:host ::ng-deep z-input,:host ::ng-deep z-select,:host ::ng-deep z-calendar,:host ::ng-deep .z-input-wrapper,:host ::ng-deep .z-select-wrapper,:host ::ng-deep .z-calendar-wrapper,:host ::ng-deep .z-input-wrapper>div,:host ::ng-deep .z-select-wrapper>div,:host ::ng-deep .z-calendar-wrapper>div{width:100%;height:100%;min-height:0}:host ::ng-deep .z-input-container,:host ::ng-deep .z-select-trigger,:host ::ng-deep .z-calendar-wrapper>div>div{width:100%;height:100%!important;min-height:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;outline:0!important;--tw-ring-shadow: 0 0 #0000 !important}:host ::ng-deep .z-input-container,:host ::ng-deep .z-select-trigger,:host ::ng-deep .z-calendar-wrapper>div>div{gap:0!important;padding:0 12px!important;color:inherit;font:inherit;line-height:inherit}:host ::ng-deep .z-loading-outline-active{box-shadow:0 0 0 3px color-mix(in oklab,var(--ring) 50%,transparent)!important}:host ::ng-deep .z-input-native,:host ::ng-deep .z-select-trigger,:host ::ng-deep .z-calendar-wrapper input{color:inherit;font:inherit;line-height:inherit}:host ::ng-deep .z-calendar-wrapper>div>div>z-icon{display:none}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { zValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "zValue", required: false }] }], zConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "zConfig", required: true }] }], zCommit: [{ type: i0.Output, args: ["zCommit"] }], zCancel: [{ type: i0.Output, args: ["zCancel"] }] } });
-
-// ─── Column Visibility Pre-filter ────────────────────────────────────────────
-/**
- * Recursively filters columns based on their `visible` property.
- * This runs BEFORE TanStack table creation — columns excluded here
- * won't generate ColumnDef entries at all (unlike columnVisibility state
- * which hides columns but keeps them in the column model).
- */
-const filterVisibleColumns = (columns) => columns
-    .filter(col => {
-    const { visible } = col;
-    if (visible === undefined) {
-        return true;
+    if (id === 'expand') {
+        return 'expand';
     }
-    return typeof visible === 'function' ? visible() : visible;
-})
-    .map(col => {
-    if (col.columns && col.columns.length > 0) {
-        return {
-            ...col,
-            columns: filterVisibleColumns(col.columns),
-        };
+    if (id === 'rowDrag') {
+        return 'rowDrag';
     }
-    return col;
-});
-// ─── Config Type Guards ──────────────────────────────────────────────────────
-/**
- * Checks if a config value is a plain object (config struct) vs a primitive/template.
- * Used to distinguish shorthand content (string/TemplateRef) from full config objects
- * like ZTableHeaderColumnConfig, ZTableBodyColumnConfig, etc.
- */
-const isObjectConfig = (config) => {
-    if (!config || typeof config !== 'object') {
-        return false;
+    if (id === 'actionRowPin' || id === 'actions') {
+        return 'rowPin';
     }
-    return config.constructor === Object;
+    return 'data';
 };
-/** Type guard: is this a full header config object (not just content shorthand)? */
-const isHeaderConfig = (config) => isObjectConfig(config);
-/** Type guard: is this a full body config object (not just content shorthand)? */
-const isBodyConfig = (config) => isObjectConfig(config);
-/** Type guard: is this a full footer config object (not just content shorthand)? */
-const isFooterConfig = (config) => isObjectConfig(config);
-// ─── Config Extractors ───────────────────────────────────────────────────────
+const getZTableColumnTypeById = (columnId, columns) => getZTableColumnType(findColumnConfig(columnId, columns), columnId);
+const isZTableColumnType = (column, type) => getZTableColumnType(column) === type;
+const isZTableColumnTypeById = (columnId, columns, type) => getZTableColumnTypeById(columnId, columns) === type;
+// ─── Span Calculation ────────────────────────────────────────────────────────
 /**
- * Internal helper that normalizes header/footer config into a consistent shape.
- * Handles both shorthand (just content) and full config objects.
+ * Walk down a chain of placeholder headers to find the deepest real header.
+ * Used to calculate how many rows a header cell should span in multi-level headers.
+ * Returns null if the header is already the deepest (no spanning needed).
  */
-const getHeaderOrFooterConfigInternal = (col, type, footerRowIndex = 0) => {
-    const empty = {
-        content: undefined,
-        class: undefined,
-        style: undefined,
-        align: undefined,
-        tooltip: undefined,
-        rowSpan: undefined,
-        colSpan: undefined,
-        contentClass: undefined,
-        contentStyle: undefined,
-    };
-    if (!col) {
-        return empty;
-    }
-    const footer = Array.isArray(col.footer) ? col.footer[footerRowIndex] : col.footer;
-    const config = type === 'header' ? col.header : footer;
-    const isConfigFn = type === 'header' ? isHeaderConfig : isFooterConfig;
-    if (!isConfigFn(config)) {
-        return { ...empty, content: config };
-    }
-    const typedConfig = config;
-    return {
-        content: typedConfig.content,
-        class: typedConfig.class,
-        style: typedConfig.style,
-        align: typedConfig.align,
-        tooltip: typedConfig.tooltip,
-        rowSpan: typedConfig.rowSpan,
-        colSpan: typedConfig.colSpan,
-        contentClass: typedConfig.contentClass,
-        contentStyle: typedConfig.contentStyle,
-    };
-};
-/** Extract and normalize header config from a column definition */
-const getHeaderConfig = (col) => getHeaderOrFooterConfigInternal(col, 'header');
-/**
- * Extract and normalize body config from a column definition.
- * Resolves dynamic properties (class, style, rowSpan, etc.) when CellContext is provided.
- */
-const getBodyConfig = (col, ctx) => {
-    const empty = {
-        content: undefined,
-        type: 'default',
-        tagColor: 'primary',
-        class: undefined,
-        style: undefined,
-        align: undefined,
-        rowSpan: undefined,
-        colSpan: undefined,
-        contentClass: undefined,
-        contentStyle: undefined,
-        tooltip: undefined,
-        popover: undefined,
-    };
-    if (!col) {
-        return empty;
-    }
-    if (!isBodyConfig(col.body)) {
-        return { ...empty, content: col.body };
-    }
-    const { body } = col;
-    const rowSpan = typeof body.rowSpan === 'function' && ctx ? body.rowSpan(ctx) : body.rowSpan;
-    const colSpan = typeof body.colSpan === 'function' && ctx ? body.colSpan(ctx) : body.colSpan;
-    const classValue = typeof body.class === 'function' && ctx ? body.class(ctx) : body.class;
-    const styleValue = typeof body.style === 'function' && ctx ? body.style(ctx) : body.style;
-    const contentClass = typeof body.contentClass === 'function' && ctx ? body.contentClass(ctx) : body.contentClass;
-    const contentStyle = typeof body.contentStyle === 'function' && ctx ? body.contentStyle(ctx) : body.contentStyle;
-    const tooltip = typeof body.tooltip === 'function' && ctx ? body.tooltip(ctx) : body.tooltip;
-    const popover = typeof body.popover === 'function' && ctx ? body.popover(ctx) : body.popover;
-    const tagColor = typeof body.tagColor === 'function' && ctx ? body.tagColor(ctx) : body.tagColor;
-    return {
-        content: body.content,
-        type: body.type || 'default',
-        tagColor: tagColor || 'primary',
-        class: classValue,
-        style: styleValue,
-        align: body.align,
-        rowSpan: typeof rowSpan === 'number' ? rowSpan : undefined,
-        colSpan: typeof colSpan === 'number' ? colSpan : undefined,
-        contentClass,
-        contentStyle: contentStyle,
-        tooltip,
-        popover,
-    };
-};
-const getFooterConfig = (col, footerRowIndex = 0) => getHeaderOrFooterConfigInternal(col, 'footer', footerRowIndex);
-// ─── Shortcut Accessors ──────────────────────────────────────────────────────
-// These convenience functions extract a single property from the relevant config.
-const getHeaderContent = (col) => getHeaderConfig(col).content;
-const getBodyContent = (col) => {
-    if (!col?.body) {
-        return undefined;
-    }
-    return isBodyConfig(col.body) ? col.body.content : col.body;
-};
-const getFooterContent = (col, footerRowIndex = 0) => getFooterConfig(col, footerRowIndex).content;
-const getBodyRowSpan = (col, ctx) => getBodyConfig(col, ctx).rowSpan;
-const getBodyColSpan = (col, ctx) => getBodyConfig(col, ctx).colSpan;
-const getHeaderRowSpan = (col) => getHeaderConfig(col).rowSpan;
-const getHeaderColSpan = (col) => getHeaderConfig(col).colSpan;
-const getFooterRowSpan = (col, footerRowIndex = 0) => getFooterConfig(col, footerRowIndex).rowSpan;
-const getFooterColSpan = (col, footerRowIndex = 0) => getFooterConfig(col, footerRowIndex).colSpan;
-// ─── Icon Syntax Parsing ─────────────────────────────────────────────────────
-/**
- * Parses inline icon syntax: `"Total [icon:lucideTrendingUp|size:16|class:text-green] Revenue"`
- * Returns an array of text and icon segments for rendering by ZTableIconTextComponent.
- */
-function parseIconString(content) {
-    if (!content || typeof content !== 'string') {
-        return [{ type: 'text', value: content || '' }];
-    }
-    const parts = [];
-    const iconRegex = /\[icon:([^\]]+)\]/g;
-    let lastIndex = 0;
-    let match;
-    while ((match = iconRegex.exec(content)) !== null) {
-        if (match.index > lastIndex) {
-            const textPart = content.slice(lastIndex, match.index);
-            if (textPart) {
-                parts.push({ type: 'text', value: textPart });
-            }
-        }
-        const iconContent = match[1];
-        const attrs = iconContent.split('|');
-        const iconName = attrs[0];
-        const iconPart = { type: 'icon', value: iconName };
-        for (let i = 1; i < attrs.length; i++) {
-            const [key, val] = attrs[i].split(':');
-            if (key === 'size') {
-                iconPart.size = parseInt(val, 10);
-            }
-            if (key === 'class') {
-                iconPart.class = val;
-            }
-            if (key === 'strokeWidth') {
-                iconPart.strokeWidth = parseFloat(val);
-            }
-        }
-        parts.push(iconPart);
-        lastIndex = match.index + match[0].length;
-    }
-    if (lastIndex < content.length) {
-        parts.push({ type: 'text', value: content.slice(lastIndex) });
-    }
-    return parts.length > 0 ? parts : [{ type: 'text', value: content }];
-}
-/** Removes all `[icon:...]` syntax from a string, returning plain text */
-function stripIconSyntax(content) {
-    if (!content || typeof content !== 'string') {
-        return content || '';
-    }
-    return content.replace(/\[icon:[^\]]+\]/g, '').trim();
-}
-/** Returns true if the content string contains at least one `[icon:...]` segment */
-function hasIconSyntax(content) {
-    if (!content || typeof content !== 'string') {
-        return false;
-    }
-    return /\[icon:[^\]]+\]/.test(content);
-}
-// ─── Column Lookup ───────────────────────────────────────────────────────────
-/** Recursively search for a column config by ID within a (possibly nested) column array */
-const findColumnConfig = (columnId, columns) => {
-    for (const col of columns) {
-        if (col.id === columnId) {
-            return col;
-        }
-        if (col.columns) {
-            const found = findColumnConfig(columnId, col.columns);
-            if (found) {
-                return found;
-            }
-        }
-    }
-    return undefined;
-};
-const getZTableColumnType = (column, columnId) => {
-    if (column?.type) {
-        return column.type;
-    }
-    if (column && isBodyConfig(column.body) && column.body.actions) {
-        return 'actions';
-    }
-    const id = column?.id ?? columnId;
-    if (id === 'select') {
-        return 'select';
-    }
-    if (id === 'expand') {
-        return 'expand';
-    }
-    if (id === 'rowDrag') {
-        return 'rowDrag';
-    }
-    if (id === 'actionRowPin' || id === 'actions') {
-        return 'rowPin';
-    }
-    return 'data';
-};
-const getZTableColumnTypeById = (columnId, columns) => getZTableColumnType(findColumnConfig(columnId, columns), columnId);
-const isZTableColumnType = (column, type) => getZTableColumnType(column) === type;
-const isZTableColumnTypeById = (columnId, columns, type) => getZTableColumnTypeById(columnId, columns) === type;
-// ─── Span Calculation ────────────────────────────────────────────────────────
-/**
- * Walk down a chain of placeholder headers to find the deepest real header.
- * Used to calculate how many rows a header cell should span in multi-level headers.
- * Returns null if the header is already the deepest (no spanning needed).
- */
-const deepestHeader = (header) => {
-    let last = header;
-    while (true) {
-        // Follow single-child placeholder chains (placeholders with colSpan=1)
-        const next = last.isPlaceholder && last.colSpan === 1 && last.subHeaders.length === 1 ? last.subHeaders[0] : null;
-        if (!next) {
-            return last === header ? null : last;
-        }
-        last = next;
+const deepestHeader = (header) => {
+    let last = header;
+    while (true) {
+        // Follow single-child placeholder chains (placeholders with colSpan=1)
+        const next = last.isPlaceholder && last.colSpan === 1 && last.subHeaders.length === 1 ? last.subHeaders[0] : null;
+        if (!next) {
+            return last === header ? null : last;
+        }
+        last = next;
     }
 };
 /** Calculate rowSpan for a TanStack header based on its depth vs deepest sub-header */
@@ -1435,6 +953,490 @@ function isFixedLeadingColumn(columnId) {
     return columnId === 'expand' || columnId === 'select' || columnId === 'rowDrag';
 }
 
+class ZTableActionsComponent {
+    zConfig = input.required(...(ngDevMode ? [{ debugName: "zConfig" }] : []));
+    zRow = input.required(...(ngDevMode ? [{ debugName: "zRow" }] : []));
+    zRowId = input.required(...(ngDevMode ? [{ debugName: "zRowId" }] : []));
+    zDropdownButtonSize = input(Z_TABLE_DEFAULT_DROPDOWN_BUTTON_SIZE, ...(ngDevMode ? [{ debugName: "zDropdownButtonSize" }] : []));
+    zActionClick = output();
+    allActions = computed(() => {
+        const config = this.zConfig();
+        const row = this.zRow();
+        const { actions } = config;
+        const resolvedActions = typeof actions === 'function' ? actions(row) : actions;
+        return resolvedActions.filter(action => {
+            if (typeof action.hidden === 'function') {
+                return !action.hidden(row);
+            }
+            return !action.hidden;
+        });
+    }, ...(ngDevMode ? [{ debugName: "allActions" }] : []));
+    shouldShowAsButtons = computed(() => {
+        const actions = this.allActions();
+        const maxVisible = this.zConfig().maxVisible ?? Z_TABLE_DEFAULT_MAX_VISIBLE_ACTIONS;
+        return actions.length <= maxVisible;
+    }, ...(ngDevMode ? [{ debugName: "shouldShowAsButtons" }] : []));
+    actionStates = computed(() => {
+        const row = this.zRow();
+        const actions = this.allActions();
+        const states = {};
+        for (const action of actions) {
+            const isHidden = typeof action.hidden === 'function' ? action.hidden(row) : (action.hidden ?? false);
+            const isDisabled = typeof action.disabled === 'function' ? action.disabled(row) : (action.disabled ?? false);
+            const isLoading = typeof action.loading === 'function' ? action.loading(row) : (action.loading ?? false);
+            states[action.key] = {
+                visible: !isHidden,
+                loading: isLoading,
+                disabled: isDisabled || isLoading,
+                tooltipState: this._getTooltipState(action.tooltip),
+            };
+        }
+        return states;
+    }, ...(ngDevMode ? [{ debugName: "actionStates" }] : []));
+    dropdownItems = computed(() => {
+        const row = this.zRow();
+        return this.allActions().map(action => {
+            const isDisabled = typeof action.disabled === 'function' ? action.disabled(row) : (action.disabled ?? false);
+            const isLoading = typeof action.loading === 'function' ? action.loading(row) : (action.loading ?? false);
+            return {
+                label: getZTableActionDropdownLabel(action),
+                icon: action.icon,
+                iconSize: action?.iconSize || '18',
+                loading: isLoading,
+                disabled: isDisabled || isLoading,
+                class: action.class,
+                divide: action.divide,
+                onClick: () => {
+                    if (isDisabled || isLoading) {
+                        return;
+                    }
+                    this._emitActionClick(action);
+                },
+            };
+        });
+    }, ...(ngDevMode ? [{ debugName: "dropdownItems" }] : []));
+    _getTooltipState(tooltip) {
+        if (!tooltip) {
+            return { content: '', alwaysShow: false };
+        }
+        if (typeof tooltip === 'string') {
+            return { content: tooltip, alwaysShow: true };
+        }
+        return {
+            content: tooltip.content ?? '',
+            alwaysShow: tooltip.alwaysShow ?? true,
+            position: tooltip.position,
+            arrow: tooltip.arrow,
+            offset: tooltip.offset,
+            maxWidth: tooltip.maxWidth,
+        };
+    }
+    _onActionClick(action, event) {
+        event.stopPropagation();
+        const states = this.actionStates();
+        if (states[action.key]?.disabled) {
+            return;
+        }
+        this._emitActionClick(action);
+    }
+    _onDropdownItemClick(item) {
+        const action = this.allActions().find(candidate => getZTableActionDropdownLabel(candidate) === item.label);
+        if (!action || this.actionStates()[action.key]?.disabled) {
+            return;
+        }
+        this._emitActionClick(action);
+    }
+    _emitActionClick(action) {
+        this.zActionClick.emit({
+            key: action.key,
+            row: this.zRow(),
+            rowId: this.zRowId(),
+            action,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZTableActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZTableActionsComponent, isStandalone: true, selector: "z-table-actions", inputs: { zConfig: { classPropertyName: "zConfig", publicName: "zConfig", isSignal: true, isRequired: true, transformFunction: null }, zRow: { classPropertyName: "zRow", publicName: "zRow", isSignal: true, isRequired: true, transformFunction: null }, zRowId: { classPropertyName: "zRowId", publicName: "zRowId", isSignal: true, isRequired: true, transformFunction: null }, zDropdownButtonSize: { classPropertyName: "zDropdownButtonSize", publicName: "zDropdownButtonSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zActionClick: "zActionClick" }, ngImport: i0, template: `
+    <div class="z-table-actions flex items-center justify-center gap-1">
+      @if (shouldShowAsButtons()) {
+        @for (action of allActions(); track action.key) {
+          @if (actionStates()[action.key].visible) {
+            <button
+              type="button"
+              z-button
+              z-tooltip
+              [zType]="action.type ?? 'outline'"
+              [zSize]="action.size ?? 'sm'"
+              [zTypeIcon]="action.icon"
+              zSizeIcon="14"
+              [zLabel]="action.label ?? ''"
+              [zLoading]="actionStates()[action.key].loading"
+              [zDisabled]="actionStates()[action.key].disabled"
+              [class]="action.class ?? ''"
+              [zContent]="actionStates()[action.key].tooltipState.content"
+              [zAlwaysShow]="actionStates()[action.key].tooltipState.alwaysShow"
+              [zArrow]="actionStates()[action.key].tooltipState.arrow ?? true"
+              [zOffset]="actionStates()[action.key].tooltipState.offset ?? 8"
+              [zMaxWidth]="actionStates()[action.key].tooltipState.maxWidth ?? '250px'"
+              (click)="_onActionClick(action, $event)"
+            ></button>
+          }
+        }
+      } @else {
+        <z-dropdown-menu
+          [zItems]="dropdownItems()"
+          zPosition="bottom-right"
+          [zButtonSize]="zDropdownButtonSize()"
+          [zMinWidth]="160"
+          (zOnItemClick)="_onDropdownItemClick($event)"
+        >
+          <button
+            type="button"
+            z-button
+            zTypeIcon="lucideEllipsis"
+            [zSize]="zDropdownButtonSize()"
+            zType="outline"
+            [zWave]="false"
+          ></button>
+        </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", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTooltipPosition", "zTrigger", "zTooltipTrigger", "zTooltipType", "zTooltipSize", "zClass", "zTooltipClass", "zShowDelay", "zTooltipShowDelay", "zHideDelay", "zTooltipHideDelay", "zArrow", "zTooltipArrow", "zDisabled", "zTooltipDisabled", "zOffset", "zTooltipOffset", "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", "zWave"], outputs: ["zOnItemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZTableActionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'z-table-actions', imports: [ZButtonComponent, ZTooltipDirective, ZDropdownMenuComponent], standalone: true, template: `
+    <div class="z-table-actions flex items-center justify-center gap-1">
+      @if (shouldShowAsButtons()) {
+        @for (action of allActions(); track action.key) {
+          @if (actionStates()[action.key].visible) {
+            <button
+              type="button"
+              z-button
+              z-tooltip
+              [zType]="action.type ?? 'outline'"
+              [zSize]="action.size ?? 'sm'"
+              [zTypeIcon]="action.icon"
+              zSizeIcon="14"
+              [zLabel]="action.label ?? ''"
+              [zLoading]="actionStates()[action.key].loading"
+              [zDisabled]="actionStates()[action.key].disabled"
+              [class]="action.class ?? ''"
+              [zContent]="actionStates()[action.key].tooltipState.content"
+              [zAlwaysShow]="actionStates()[action.key].tooltipState.alwaysShow"
+              [zArrow]="actionStates()[action.key].tooltipState.arrow ?? true"
+              [zOffset]="actionStates()[action.key].tooltipState.offset ?? 8"
+              [zMaxWidth]="actionStates()[action.key].tooltipState.maxWidth ?? '250px'"
+              (click)="_onActionClick(action, $event)"
+            ></button>
+          }
+        }
+      } @else {
+        <z-dropdown-menu
+          [zItems]="dropdownItems()"
+          zPosition="bottom-right"
+          [zButtonSize]="zDropdownButtonSize()"
+          [zMinWidth]="160"
+          (zOnItemClick)="_onDropdownItemClick($event)"
+        >
+          <button
+            type="button"
+            z-button
+            zTypeIcon="lucideEllipsis"
+            [zSize]="zDropdownButtonSize()"
+            zType="outline"
+            [zWave]="false"
+          ></button>
+        </z-dropdown-menu>
+      }
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}\n"] }]
+        }], propDecorators: { zConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "zConfig", required: true }] }], zRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRow", required: true }] }], zRowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRowId", required: true }] }], zDropdownButtonSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDropdownButtonSize", required: false }] }], zActionClick: [{ type: i0.Output, args: ["zActionClick"] }] } });
+
+class ZTableContentEditorComponent {
+    zValue = input(...(ngDevMode ? [undefined, { debugName: "zValue" }] : []));
+    zConfig = input.required(...(ngDevMode ? [{ debugName: "zConfig" }] : []));
+    zCommit = output();
+    zCancel = output();
+    draftValue = signal(null, ...(ngDevMode ? [{ debugName: "draftValue" }] : []));
+    controlClass = computed(() => zMergeClasses('z-table-embedded-control', this.zConfig().class), ...(ngDevMode ? [{ debugName: "controlClass" }] : []));
+    inputType = computed(() => this.zConfig().type === 'number' ? 'number' : 'text', ...(ngDevMode ? [{ debugName: "inputType" }] : []));
+    _host = inject(ElementRef);
+    _finished = false;
+    _inputControl = null;
+    _selectControl = null;
+    _calendarControl = null;
+    _activated = false;
+    _ignoreNextCalendarChange = false;
+    constructor() {
+        effect(() => {
+            const value = this.zValue();
+            this.draftValue.set(value ?? null);
+        });
+        afterNextRender(() => this._activateControl());
+    }
+    onInputControl(control) {
+        this._inputControl = control;
+        queueMicrotask(() => this._activateControl());
+    }
+    onSelectControl(control) {
+        this._selectControl = control;
+        queueMicrotask(() => this._activateControl());
+    }
+    onCalendarControl(control) {
+        this._calendarControl = control;
+        queueMicrotask(() => this._activateControl());
+    }
+    onSelectChange(value) {
+        if (this.zConfig().selectMode !== 'single') {
+            this.draftValue.set(value);
+            return;
+        }
+        this._commit(value);
+    }
+    onCalendarChange(value) {
+        if (this._ignoreNextCalendarChange) {
+            this._ignoreNextCalendarChange = false;
+            return;
+        }
+        this._commit(value);
+    }
+    commitDraft() {
+        this._commit(this.draftValue());
+    }
+    onEditorKeydown(event) {
+        if (event.key !== 'Escape') {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        if (this._finished) {
+            return;
+        }
+        this._finished = true;
+        this.zCancel.emit();
+    }
+    _commit(value) {
+        if (this._finished) {
+            return;
+        }
+        this._finished = true;
+        this.zCommit.emit(value);
+    }
+    _activateControl() {
+        if (this._activated) {
+            return;
+        }
+        const { type } = this.zConfig();
+        if (type === 'select') {
+            const trigger = this._host.nativeElement.querySelector('.z-select-trigger');
+            if (!this._selectControl || !trigger) {
+                return;
+            }
+            this._activated = true;
+            this._selectControl?.focus();
+            trigger.click();
+            return;
+        }
+        if (type === 'date') {
+            if (!this._calendarControl) {
+                return;
+            }
+            this._activated = true;
+            this._ignoreNextCalendarChange = true;
+            this._calendarControl?.open();
+            requestAnimationFrame(() => this._focusCalendarInput());
+            return;
+        }
+        if (!this._inputControl) {
+            return;
+        }
+        this._activated = true;
+        this._inputControl?.focus();
+    }
+    _focusCalendarInput() {
+        const input = this._host.nativeElement.querySelector('.z-calendar-wrapper input');
+        input?.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZTableContentEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZTableContentEditorComponent, isStandalone: true, selector: "z-table-content-editor", inputs: { zValue: { classPropertyName: "zValue", publicName: "zValue", isSignal: true, isRequired: false, transformFunction: null }, zConfig: { classPropertyName: "zConfig", publicName: "zConfig", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { zCommit: "zCommit", zCancel: "zCancel" }, ngImport: i0, template: `
+    @switch (zConfig().type) {
+      @case ('select') {
+        <z-select
+          #embeddedControl
+          [class]="controlClass()"
+          [style]="zConfig().style"
+          [zSize]="zConfig().size"
+          [zMode]="zConfig().selectMode"
+          [zConfig]="zConfig().selectConfig"
+          [zShowSearch]="zConfig().selectShowSearch"
+          [zAllowClear]="zConfig().allowClear"
+          [zWrap]="zConfig().selectWrap"
+          [zLoading]="zConfig().loading"
+          [zLoadingOutline]="true"
+          [zDisabled]="zConfig().disabled"
+          [zReadonly]="zConfig().readonly"
+          [zMaxTagCount]="zConfig().maxTagCount"
+          [zPlaceholder]="zConfig().placeholder"
+          [zOptions]="zConfig().options"
+          [ngModel]="zValue()"
+          [ngModelOptions]="{ standalone: true }"
+          (ngModelChange)="onSelectChange($event)"
+          (zOnBlur)="commitDraft()"
+          (keydown)="onEditorKeydown($event)"
+          (zControl)="onSelectControl($event)"
+        />
+      }
+      @case ('date') {
+        <z-calendar
+          #embeddedControl
+          [class]="controlClass()"
+          [style]="zConfig().style"
+          [zSize]="zConfig().size"
+          zMode="single"
+          [zFormat]="zConfig().dateFormat"
+          [zValueType]="zConfig().dateValueType"
+          [zMinDate]="zConfig().minDate"
+          [zMaxDate]="zConfig().maxDate"
+          [zAllowClear]="zConfig().allowClear"
+          [zLoading]="zConfig().loading"
+          [zLoadingOutline]="true"
+          [zDisabled]="zConfig().disabled"
+          [zReadonly]="zConfig().readonly"
+          [ngModel]="$any(zValue())"
+          [ngModelOptions]="{ standalone: true }"
+          (zChange)="onCalendarChange($event)"
+          (keydown)="onEditorKeydown($event)"
+          (zControl)="onCalendarControl($event)"
+        />
+      }
+      @default {
+        <z-input
+          #embeddedControl
+          [class]="controlClass()"
+          [style]="zConfig().style"
+          [zSize]="zConfig().size"
+          [zType]="inputType()"
+          [zAlign]="zConfig().align"
+          [zPlaceholder]="zConfig().placeholder"
+          [zPrefix]="zConfig().prefix"
+          [zSuffix]="zConfig().suffix"
+          [zMin]="zConfig().min"
+          [zMax]="zConfig().max"
+          [zStep]="zConfig().step ?? 1"
+          [zShowArrows]="zConfig().type === 'number'"
+          [zMask]="zConfig().mask"
+          [zDecimalPlaces]="zConfig().decimalPlaces"
+          [zAllowNegative]="zConfig().allowNegative"
+          [zThousandSeparator]="zConfig().thousandSeparator"
+          [zDecimalMarker]="zConfig().decimalMarker"
+          [zAllowClear]="zConfig().allowClear"
+          [zLoading]="zConfig().loading"
+          [zLoadingOutline]="true"
+          [zDisabled]="zConfig().disabled"
+          [zReadonly]="zConfig().readonly"
+          [ngModel]="$any(zValue())"
+          [ngModelOptions]="{ standalone: true }"
+          (ngModelChange)="draftValue.set($event)"
+          (zOnBlur)="commitDraft()"
+          (zOnEnter)="commitDraft()"
+          (zOnKeydown)="onEditorKeydown($event)"
+          (zControl)="onInputControl($event)"
+        />
+      }
+    }
+  `, isInline: true, styles: [":host{position:absolute;z-index:2;inset:0;display:block;min-width:0;overflow:hidden;background:var(--background);box-shadow:inset 0 0 0 1px var(--primary)}:host ::ng-deep z-input,:host ::ng-deep z-select,:host ::ng-deep z-calendar,:host ::ng-deep .z-input-wrapper,:host ::ng-deep .z-select-wrapper,:host ::ng-deep .z-calendar-wrapper,:host ::ng-deep .z-input-wrapper>div,:host ::ng-deep .z-select-wrapper>div,:host ::ng-deep .z-calendar-wrapper>div{width:100%;height:100%;min-height:0}:host ::ng-deep .z-input-container,:host ::ng-deep .z-select-trigger,:host ::ng-deep .z-calendar-wrapper>div>div{width:100%;height:100%!important;min-height:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;outline:0!important;--tw-ring-shadow: 0 0 #0000 !important}:host ::ng-deep .z-input-container,:host ::ng-deep .z-select-trigger,:host ::ng-deep .z-calendar-wrapper>div>div{gap:0!important;padding:0 12px!important;color:inherit;font:inherit;line-height:inherit}:host ::ng-deep .z-loading-outline-active{box-shadow:0 0 0 3px color-mix(in oklab,var(--ring) 50%,transparent)!important}:host ::ng-deep .z-input-native,:host ::ng-deep .z-select-trigger,:host ::ng-deep .z-calendar-wrapper input{color:inherit;font:inherit;line-height:inherit}:host ::ng-deep .z-calendar-wrapper>div>div>z-icon{display:none}\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: ZCalendarComponent, selector: "z-calendar", inputs: ["class", "zMode", "zSize", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zLoading", "zLoadingOutline", "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: ZInputComponent, selector: "z-input", inputs: ["class", "zType", "zSize", "zAlign", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zLoading", "zLoadingOutline", "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", "zClassSelect", "zMode", "zSize", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zLoading", "zLoadingOutline", "zPrefix", "zAllowClear", "zShowCheck", "zWrap", "zShowSearch", "zPlaceholderSearch", "zDebounce", "zNotFoundText", "zEmptyText", "zEmptyIcon", "zMaxTagCount", "zDropdownMaxHeight", "zOptionHeight", "zVirtualScroll", "zDynamicSize", "zShowAction", "zOptions", "zConfig", "zTranslateLabels", "zKey", "zSearchServer", "zLoadingMore", "zEnableLoadMore", "zScrollDistance", "zMaxVisible", "zScrollClose", "zSticky", "zPosition", "zSelectedTemplate", "zOptionTemplate", "zActionTemplate", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zValidators"], outputs: ["zOnSearch", "zOnLoadMore", "zOnBlur", "zOnFocus", "zControl", "zEvent"], exportAs: ["zSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZTableContentEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'z-table-content-editor', imports: [FormsModule, ZCalendarComponent, ZInputComponent, ZSelectComponent], standalone: true, template: `
+    @switch (zConfig().type) {
+      @case ('select') {
+        <z-select
+          #embeddedControl
+          [class]="controlClass()"
+          [style]="zConfig().style"
+          [zSize]="zConfig().size"
+          [zMode]="zConfig().selectMode"
+          [zConfig]="zConfig().selectConfig"
+          [zShowSearch]="zConfig().selectShowSearch"
+          [zAllowClear]="zConfig().allowClear"
+          [zWrap]="zConfig().selectWrap"
+          [zLoading]="zConfig().loading"
+          [zLoadingOutline]="true"
+          [zDisabled]="zConfig().disabled"
+          [zReadonly]="zConfig().readonly"
+          [zMaxTagCount]="zConfig().maxTagCount"
+          [zPlaceholder]="zConfig().placeholder"
+          [zOptions]="zConfig().options"
+          [ngModel]="zValue()"
+          [ngModelOptions]="{ standalone: true }"
+          (ngModelChange)="onSelectChange($event)"
+          (zOnBlur)="commitDraft()"
+          (keydown)="onEditorKeydown($event)"
+          (zControl)="onSelectControl($event)"
+        />
+      }
+      @case ('date') {
+        <z-calendar
+          #embeddedControl
+          [class]="controlClass()"
+          [style]="zConfig().style"
+          [zSize]="zConfig().size"
+          zMode="single"
+          [zFormat]="zConfig().dateFormat"
+          [zValueType]="zConfig().dateValueType"
+          [zMinDate]="zConfig().minDate"
+          [zMaxDate]="zConfig().maxDate"
+          [zAllowClear]="zConfig().allowClear"
+          [zLoading]="zConfig().loading"
+          [zLoadingOutline]="true"
+          [zDisabled]="zConfig().disabled"
+          [zReadonly]="zConfig().readonly"
+          [ngModel]="$any(zValue())"
+          [ngModelOptions]="{ standalone: true }"
+          (zChange)="onCalendarChange($event)"
+          (keydown)="onEditorKeydown($event)"
+          (zControl)="onCalendarControl($event)"
+        />
+      }
+      @default {
+        <z-input
+          #embeddedControl
+          [class]="controlClass()"
+          [style]="zConfig().style"
+          [zSize]="zConfig().size"
+          [zType]="inputType()"
+          [zAlign]="zConfig().align"
+          [zPlaceholder]="zConfig().placeholder"
+          [zPrefix]="zConfig().prefix"
+          [zSuffix]="zConfig().suffix"
+          [zMin]="zConfig().min"
+          [zMax]="zConfig().max"
+          [zStep]="zConfig().step ?? 1"
+          [zShowArrows]="zConfig().type === 'number'"
+          [zMask]="zConfig().mask"
+          [zDecimalPlaces]="zConfig().decimalPlaces"
+          [zAllowNegative]="zConfig().allowNegative"
+          [zThousandSeparator]="zConfig().thousandSeparator"
+          [zDecimalMarker]="zConfig().decimalMarker"
+          [zAllowClear]="zConfig().allowClear"
+          [zLoading]="zConfig().loading"
+          [zLoadingOutline]="true"
+          [zDisabled]="zConfig().disabled"
+          [zReadonly]="zConfig().readonly"
+          [ngModel]="$any(zValue())"
+          [ngModelOptions]="{ standalone: true }"
+          (ngModelChange)="draftValue.set($event)"
+          (zOnBlur)="commitDraft()"
+          (zOnEnter)="commitDraft()"
+          (zOnKeydown)="onEditorKeydown($event)"
+          (zControl)="onInputControl($event)"
+        />
+      }
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{position:absolute;z-index:2;inset:0;display:block;min-width:0;overflow:hidden;background:var(--background);box-shadow:inset 0 0 0 1px var(--primary)}:host ::ng-deep z-input,:host ::ng-deep z-select,:host ::ng-deep z-calendar,:host ::ng-deep .z-input-wrapper,:host ::ng-deep .z-select-wrapper,:host ::ng-deep .z-calendar-wrapper,:host ::ng-deep .z-input-wrapper>div,:host ::ng-deep .z-select-wrapper>div,:host ::ng-deep .z-calendar-wrapper>div{width:100%;height:100%;min-height:0}:host ::ng-deep .z-input-container,:host ::ng-deep .z-select-trigger,:host ::ng-deep .z-calendar-wrapper>div>div{width:100%;height:100%!important;min-height:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;outline:0!important;--tw-ring-shadow: 0 0 #0000 !important}:host ::ng-deep .z-input-container,:host ::ng-deep .z-select-trigger,:host ::ng-deep .z-calendar-wrapper>div>div{gap:0!important;padding:0 12px!important;color:inherit;font:inherit;line-height:inherit}:host ::ng-deep .z-loading-outline-active{box-shadow:0 0 0 3px color-mix(in oklab,var(--ring) 50%,transparent)!important}:host ::ng-deep .z-input-native,:host ::ng-deep .z-select-trigger,:host ::ng-deep .z-calendar-wrapper input{color:inherit;font:inherit;line-height:inherit}:host ::ng-deep .z-calendar-wrapper>div>div>z-icon{display:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { zValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "zValue", required: false }] }], zConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "zConfig", required: true }] }], zCommit: [{ type: i0.Output, args: ["zCommit"] }], zCancel: [{ type: i0.Output, args: ["zCancel"] }] } });
+
 class ZTableEditCellComponent {
     _destroyRef = inject(DestroyRef);
     zRow = input.required(...(ngDevMode ? [{ debugName: "zRow" }] : []));