@aquera/ngx-smart-table 0.0.26 → 0.0.28

package/fesm2022/aquera-ngx-smart-table.mjs

@@ -3890,15 +3890,128 @@ class NileSelectEditor {
         // Clear container and append select
         context.container.innerHTML = '';
         context.container.appendChild(this.select);
-        // Focus the select after render
+        // Focus after mount; open dropdown only once nile-popup exists (avoids null this.popup in nile-select)
+        const openOnEdit = this.options.openDropdownOnEdit !== false;
         setTimeout(() => {
+            void this.activateSelectAfterMount(openOnEdit);
+        }, 50);
+    }
+    async activateSelectAfterMount(openOnEdit) {
+        try {
+            this.select?.focus();
+        }
+        catch {
+            // ignore
+        }
+        if (!openOnEdit || !this.select || this.options.disabled) {
+            return;
+        }
+        await this.openNileSelectDropdownSafely();
+    }
+    /** Lit @query('nile-popup') / .select — must exist before handleOpenChange touches this.popup.popup */
+    isNileSelectPopupMounted(select) {
+        return !!select.shadowRoot?.querySelector('nile-popup');
+    }
+    async invokeShowHandlingPromise(host) {
+        if (typeof host.show !== 'function') {
+            return;
+        }
+        try {
+            const out = host.show();
+            if (out != null && typeof out.then === 'function') {
+                await out.catch(() => undefined);
+            }
+        }
+        catch {
+            // sync throw from show()
+        }
+    }
+    async openNileSelectDropdownSafely() {
+        const select = this.select;
+        if (!select) {
+            return;
+        }
+        try {
+            await customElements.whenDefined('nile-select');
+        }
+        catch {
+            // ignore
+        }
+        if (this.options.enableVirtualScroll) {
             try {
-                this.select?.focus();
+                await customElements.whenDefined('nile-virtual-select');
+            }
+            catch {
+                // ignore — not registered in all environments
+            }
+            // Same idea as nile-popup: inner host may not exist until Lit finishes a pass (or several).
+            const maxVirtualWaitPasses = 50;
+            for (let i = 0; i < maxVirtualWaitPasses; i++) {
+                const vs = select.shadowRoot?.querySelector('nile-virtual-select');
+                if (vs) {
+                    await this.invokeShowHandlingPromise(vs);
+                    return;
+                }
+                const lit = select;
+                if (lit.updateComplete?.then) {
+                    try {
+                        await lit.updateComplete;
+                    }
+                    catch {
+                        // ignore
+                    }
+                }
+                await new Promise(resolve => requestAnimationFrame(() => resolve()));
             }
-            catch (e) {
-                // Ignore errors
+            return;
+        }
+        const maxWaitPasses = 50;
+        for (let i = 0; i < maxWaitPasses; i++) {
+            if (this.isNileSelectPopupMounted(select)) {
+                break;
             }
-        }, 50);
+            const lit = select;
+            if (lit.updateComplete?.then) {
+                try {
+                    await lit.updateComplete;
+                }
+                catch {
+                    // ignore
+                }
+            }
+            await new Promise(resolve => requestAnimationFrame(() => resolve()));
+        }
+        if (!this.isNileSelectPopupMounted(select)) {
+            return;
+        }
+        const host = select;
+        for (let attempt = 0; attempt < 5; attempt++) {
+            if (!this.isNileSelectPopupMounted(select)) {
+                return;
+            }
+            try {
+                if (typeof host.show === 'function') {
+                    await this.invokeShowHandlingPromise(host);
+                }
+                else {
+                    host.open = true;
+                }
+                return;
+            }
+            catch {
+                // ignore
+            }
+            await new Promise(resolve => setTimeout(resolve, 40));
+            const lit = select;
+            if (lit.updateComplete?.then) {
+                try {
+                    await lit.updateComplete;
+                }
+                catch {
+                    // ignore
+                }
+            }
+        }
     }
     /**
      * Set the initial value for the select
@@ -4946,6 +5059,7 @@ class NileChipEditor {
         this.acceptsInitialKeypress = false;
         this.eventListeners = [];
         this.trackedValues = [];
+        this.hasChangeOccurred = false;
     }
     edit(context) {
         if (!context.container) {
@@ -5098,6 +5212,7 @@ class NileChipEditor {
             const detail = e.detail;
             const newValue = Array.isArray(detail?.value) ? [...detail.value] : (this.chip?.value ? [...this.chip.value] : []);
             this.trackedValues = newValue;
+            this.hasChangeOccurred = true;
             context.onChange(newValue);
         });
         // Keyboard handling on the chip element
@@ -5166,6 +5281,7 @@ class NileChipEditor {
         this.chip = undefined;
         this.cellContainer = undefined;
         this.trackedValues = [];
+        this.hasChangeOccurred = false;
     }
     focus() {
         try {
@@ -5174,7 +5290,7 @@ class NileChipEditor {
         catch { /* ignore */ }
     }
     getCurrentValue() {
-        if (this.trackedValues.length > 0) {
+        if (this.hasChangeOccurred) {
             return [...this.trackedValues];
         }
         if (!this.chip)
@@ -6381,7 +6497,16 @@ class StCellComponent {
         }
     }
     onCellClick() {
-        // Single click now only focuses, doesn't start editing
+        // First click: parent <td> focuses this cell (bubbles after this handler).
+        // Second click while already focused: enter edit (spreadsheet-style).
+        const cellValue = this.cell();
+        if (this.isEditable() &&
+            !this.cellLoading &&
+            cellValue &&
+            !cellValue.isEditing() &&
+            cellValue.isFocused()) {
+            this.startEdit();
+        }
     }
     onCellDoubleClick() {
         const cellValue = this.cell();
@@ -6560,10 +6685,10 @@ class StCellComponent {
             this.editorCleanup = undefined;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: StCellComponent, isStandalone: true, selector: "st-cell", inputs: { cell: { classPropertyName: "cell", publicName: "cell", isSignal: true, isRequired: true, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null }, tableState: { classPropertyName: "tableState", publicName: "tableState", isSignal: true, isRequired: false, transformFunction: null }, tableConfig: { classPropertyName: "tableConfig", publicName: "tableConfig", isSignal: true, isRequired: false, transformFunction: null }, columnIndex: { classPropertyName: "columnIndex", publicName: "columnIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cellChange: "cellChange", cellEdit: "cellEdit", cellSave: "cellSave", cellCancel: "cellCancel", cellSaveAndNavigate: "cellSaveAndNavigate" }, host: { listeners: { "keydown": "onCellKeyDown($event)" } }, viewQueries: [{ propertyName: "editorContainer", first: true, predicate: ["editorContainer"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"st-cell\" \n  [ngClass]=\"{\n    'editing': cell().isEditing(),\n    'dirty': cell().isDirty(),\n    'invalid': !cell().isValid(),\n    'readonly': !isEditable(),\n    'loading': cellLoading\n  }\"\n  (click)=\"onCellClick()\" \n  (dblclick)=\"onCellDoubleClick()\">\n\n  <!-- Loading Indicator -->\n  <div *ngIf=\"cellLoading\" class=\"cell-loading\">\n    <div class=\"cell-spinner\"></div>\n  </div>\n\n  <!-- Display Mode with Template Support -->\n  @if (!cell().isEditing() && !cellLoading) {\n    <!-- Custom Template -->\n    @if (hasCellTemplate()) {\n      <ng-container *ngTemplateOutlet=\"cellTemplate(); context: templateContext()\"></ng-container>\n    }\n\n    <!-- Default Text Rendering -->\n    @if (!hasCellTemplate()) {\n      <span class=\"cell-display\">\n        {{ cell().render() }}\n      </span>\n    }\n  }\n\n  <!-- Edit Mode -->\n  @if (cell().isEditing()) {\n    <div class=\"cell-editor\" #editorContainer>\n    </div>\n  }\n</div>\n", styles: [".st-cell{position:relative;cursor:pointer;transition:background-color .2s;min-height:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;box-sizing:border-box;max-height:28px}.st-cell.invalid{border-left:2px solid #e53e3e}.st-cell.readonly{cursor:default}.cell-display{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;align-content:center;width:100%;height:100%;padding-left:8px;padding-right:8px;font-size:12px;font-weight:300;letter-spacing:.2px;line-height:14px}.cell-editor{display:flex;height:100%;width:100%}.cell-editor input,.cell-editor select,.cell-editor textarea{width:100%;border:none;outline:none;font:inherit;padding:0;background:transparent;color:inherit}.cell-editor input[type=number]{text-align:inherit}.cell-editor nile-select::part(combobox){border:none!important;outline:none!important;box-shadow:none!important;max-height:28px;overflow:hidden;flex-wrap:nowrap}.cell-editor nile-select::part(tag){border:none!important;outline:none!important;margin-right:2px;padding:1px 2px;flex-shrink:0}.cell-editor nile-select::part(listbox){border:none!important}.st-cell.loading{pointer-events:none;opacity:.6}.cell-loading{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.cell-spinner{width:14px;height:14px;border:2px solid #e2e8f0;border-top-color:#4a90d9;border-radius:50%;animation:cell-spin .6s linear infinite}@keyframes cell-spin{to{transform:rotate(360deg)}}.cell-error{position:absolute;right:4px;top:50%;transform:translateY(-50%);color:#e53e3e;font-weight:700;cursor:help;font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: StCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: StCellComponent, isStandalone: true, selector: "st-cell", inputs: { cell: { classPropertyName: "cell", publicName: "cell", isSignal: true, isRequired: true, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null }, tableState: { classPropertyName: "tableState", publicName: "tableState", isSignal: true, isRequired: false, transformFunction: null }, tableConfig: { classPropertyName: "tableConfig", publicName: "tableConfig", isSignal: true, isRequired: false, transformFunction: null }, columnIndex: { classPropertyName: "columnIndex", publicName: "columnIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cellChange: "cellChange", cellEdit: "cellEdit", cellSave: "cellSave", cellCancel: "cellCancel", cellSaveAndNavigate: "cellSaveAndNavigate" }, host: { listeners: { "keydown": "onCellKeyDown($event)" } }, viewQueries: [{ propertyName: "editorContainer", first: true, predicate: ["editorContainer"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"st-cell\" \n  [ngClass]=\"{\n    'editing': cell().isEditing(),\n    'dirty': cell().isDirty(),\n    'invalid': !cell().isValid(),\n    'readonly': !isEditable(),\n    'loading': cellLoading\n  }\"\n  (click)=\"onCellClick()\" \n  (dblclick)=\"onCellDoubleClick()\">\n\n  <!-- Loading Indicator -->\n  <div *ngIf=\"cellLoading\" class=\"cell-loading\">\n    <div class=\"cell-spinner\"></div>\n  </div>\n\n  <!-- Display Mode with Template Support -->\n  @if (!cell().isEditing() && !cellLoading) {\n    <!-- Custom Template -->\n    @if (hasCellTemplate()) {\n      <ng-container *ngTemplateOutlet=\"cellTemplate(); context: templateContext()\"></ng-container>\n    }\n\n    <!-- Default Text Rendering -->\n    @if (!hasCellTemplate()) {\n      <span class=\"cell-display\">\n        {{ cell().render() }}\n      </span>\n    }\n  }\n\n  <!-- Edit Mode -->\n  @if (cell().isEditing()) {\n    <div class=\"cell-editor\" #editorContainer>\n    </div>\n  }\n</div>\n", styles: [".st-cell{position:relative;cursor:pointer;transition:background-color .2s;min-height:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;box-sizing:border-box;max-height:28px}.st-cell.invalid{border-left:2px solid #e53e3e}.st-cell.readonly{cursor:default}.cell-display{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;align-content:center;width:100%;height:100%;padding-left:8px;padding-right:8px;font-size:12px;font-weight:300;letter-spacing:.2px;line-height:14px}.cell-editor{display:flex;height:100%;width:100%}.cell-editor input,.cell-editor select,.cell-editor textarea{width:100%;border:none;outline:none;font:inherit;padding:0;background:transparent;color:inherit}.cell-editor input[type=number]{text-align:inherit}.cell-editor nile-select::part(combobox){border:none!important;outline:none!important;box-shadow:none!important;max-height:28px;overflow:hidden;flex-wrap:nowrap}.cell-editor nile-select::part(tag){border:none!important;outline:none!important;margin-right:2px;padding:1px 2px;flex-shrink:0}.cell-editor nile-select::part(listbox){border:none!important}.st-cell.loading{pointer-events:none;opacity:.6}.cell-loading{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.cell-spinner{width:14px;height:14px;border:2px solid #e2e8f0;border-top-color:#4a90d9;border-radius:50%;animation:cell-spin .6s linear infinite}@keyframes cell-spin{to{transform:rotate(360deg)}}.cell-error{position:absolute;right:4px;top:50%;transform:translateY(-50%);color:#e53e3e;font-weight:700;cursor:help;font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StCellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: StCellComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-cell', standalone: true, imports: [CommonModule], template: "<div class=\"st-cell\" \n  [ngClass]=\"{\n    'editing': cell().isEditing(),\n    'dirty': cell().isDirty(),\n    'invalid': !cell().isValid(),\n    'readonly': !isEditable(),\n    'loading': cellLoading\n  }\"\n  (click)=\"onCellClick()\" \n  (dblclick)=\"onCellDoubleClick()\">\n\n  <!-- Loading Indicator -->\n  <div *ngIf=\"cellLoading\" class=\"cell-loading\">\n    <div class=\"cell-spinner\"></div>\n  </div>\n\n  <!-- Display Mode with Template Support -->\n  @if (!cell().isEditing() && !cellLoading) {\n    <!-- Custom Template -->\n    @if (hasCellTemplate()) {\n      <ng-container *ngTemplateOutlet=\"cellTemplate(); context: templateContext()\"></ng-container>\n    }\n\n    <!-- Default Text Rendering -->\n    @if (!hasCellTemplate()) {\n      <span class=\"cell-display\">\n        {{ cell().render() }}\n      </span>\n    }\n  }\n\n  <!-- Edit Mode -->\n  @if (cell().isEditing()) {\n    <div class=\"cell-editor\" #editorContainer>\n    </div>\n  }\n</div>\n", styles: [".st-cell{position:relative;cursor:pointer;transition:background-color .2s;min-height:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;box-sizing:border-box;max-height:28px}.st-cell.invalid{border-left:2px solid #e53e3e}.st-cell.readonly{cursor:default}.cell-display{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;align-content:center;width:100%;height:100%;padding-left:8px;padding-right:8px;font-size:12px;font-weight:300;letter-spacing:.2px;line-height:14px}.cell-editor{display:flex;height:100%;width:100%}.cell-editor input,.cell-editor select,.cell-editor textarea{width:100%;border:none;outline:none;font:inherit;padding:0;background:transparent;color:inherit}.cell-editor input[type=number]{text-align:inherit}.cell-editor nile-select::part(combobox){border:none!important;outline:none!important;box-shadow:none!important;max-height:28px;overflow:hidden;flex-wrap:nowrap}.cell-editor nile-select::part(tag){border:none!important;outline:none!important;margin-right:2px;padding:1px 2px;flex-shrink:0}.cell-editor nile-select::part(listbox){border:none!important}.st-cell.loading{pointer-events:none;opacity:.6}.cell-loading{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.cell-spinner{width:14px;height:14px;border:2px solid #e2e8f0;border-top-color:#4a90d9;border-radius:50%;animation:cell-spin .6s linear infinite}@keyframes cell-spin{to{transform:rotate(360deg)}}.cell-error{position:absolute;right:4px;top:50%;transform:translateY(-50%);color:#e53e3e;font-weight:700;cursor:help;font-size:14px}\n"] }]
         }], propDecorators: { cell: [{ type: i0.Input, args: [{ isSignal: true, alias: "cell", required: true }] }], editMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editMode", required: false }] }], tableState: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableState", required: false }] }], tableConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableConfig", required: false }] }], columnIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnIndex", required: false }] }], cellChange: [{ type: i0.Output, args: ["cellChange"] }], cellEdit: [{ type: i0.Output, args: ["cellEdit"] }], cellSave: [{ type: i0.Output, args: ["cellSave"] }], cellCancel: [{ type: i0.Output, args: ["cellCancel"] }], cellSaveAndNavigate: [{ type: i0.Output, args: ["cellSaveAndNavigate"] }], editorContainer: [{
@@ -7335,10 +7460,10 @@ class ValidationLoggerService {
     getLogSize() {
         return this.logEntries.length;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ValidationLoggerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ValidationLoggerService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ValidationLoggerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ValidationLoggerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ValidationLoggerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ValidationLoggerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -7545,10 +7670,10 @@ class JsonSchemaValidatorService {
                 return error.message || `Field '${field}' is invalid`;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: JsonSchemaValidatorService, deps: [{ token: ValidationLoggerService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: JsonSchemaValidatorService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: JsonSchemaValidatorService, deps: [{ token: ValidationLoggerService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: JsonSchemaValidatorService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: JsonSchemaValidatorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: JsonSchemaValidatorService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -7596,10 +7721,10 @@ class VirtualScrollService {
         return fromEvent(element, 'scroll').pipe(map((event) => event.target.scrollTop), throttleTime(16, undefined, { leading: true, trailing: true }) // 60fps
         );
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: VirtualScrollService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: VirtualScrollService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: VirtualScrollService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: VirtualScrollService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: VirtualScrollService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: VirtualScrollService, decorators: [{
             type: Injectable
         }] });
 
@@ -7674,10 +7799,10 @@ class StPaginationComponent {
             this.tableState.setPageSize(newPageSize);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: StPaginationComponent, isStandalone: true, selector: "st-pagination", inputs: { tableState: "tableState", tableConfig: "tableConfig", position: "position" }, ngImport: i0, template: "<nile-pagination\n  [totalItems]=\"paginationState.totalItems\"\n  [currentPage]=\"getCurrentPageDisplay()\"\n  [pageSize]=\"paginationState.pageSize\"\n  [variant]=\"getVariant()\"\n  [pageSizeOptions]=\"getPageSizeOptions()\"\n  (pageChange)=\"onPageChange($event)\"\n  (pageSizeChange)=\"onPageSizeChange($event)\">\n</nile-pagination>\n", styles: [":host{display:block;width:100%}nile-pagination{display:block;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: StPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", type: StPaginationComponent, isStandalone: true, selector: "st-pagination", inputs: { tableState: "tableState", tableConfig: "tableConfig", position: "position" }, ngImport: i0, template: "<nile-pagination\n  [totalItems]=\"paginationState.totalItems\"\n  [currentPage]=\"getCurrentPageDisplay()\"\n  [pageSize]=\"paginationState.pageSize\"\n  [variant]=\"getVariant()\"\n  [pageSizeOptions]=\"getPageSizeOptions()\"\n  (pageChange)=\"onPageChange($event)\"\n  (pageSizeChange)=\"onPageSizeChange($event)\">\n</nile-pagination>\n", styles: [":host{display:block;width:100%}nile-pagination{display:block;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StPaginationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: StPaginationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-pagination', standalone: true, imports: [CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<nile-pagination\n  [totalItems]=\"paginationState.totalItems\"\n  [currentPage]=\"getCurrentPageDisplay()\"\n  [pageSize]=\"paginationState.pageSize\"\n  [variant]=\"getVariant()\"\n  [pageSizeOptions]=\"getPageSizeOptions()\"\n  (pageChange)=\"onPageChange($event)\"\n  (pageSizeChange)=\"onPageSizeChange($event)\">\n</nile-pagination>\n", styles: [":host{display:block;width:100%}nile-pagination{display:block;width:100%}\n"] }]
         }], propDecorators: { tableState: [{
@@ -7811,10 +7936,10 @@ class StHeaderComponent {
         };
         this.columnMoved.emit(moveEvent);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: StHeaderComponent, isStandalone: true, selector: "st-header", inputs: { column: "column", columnIndex: "columnIndex", isFirstColumn: "isFirstColumn", isLastColumn: "isLastColumn", tableState: "tableState", enableSorting: "enableSorting", enableFiltering: "enableFiltering" }, outputs: { sortToggle: "sortToggle", filterChange: "filterChange", columnMoved: "columnMoved", menuClick: "menuClick" }, ngImport: i0, template: "<div class=\"st-header\" [class.sortable]=\"isSortable()\" [class.sorted]=\"isSorted()\" [attr.aria-sort]=\"getAriaSort()\">\n  <div class=\"header-content\">\n    <span class=\"header-text\">{{ column.header || column.key }}</span>\n    @if (isMenuEnabled()) {\n      <button class=\"column-menu-trigger\" \n              (click)=\"onMenuClick($event)\"\n              type=\"button\" \n              aria-label=\"Column actions\">\n        <nile-icon name=\"options\"></nile-icon>\n      </button>\n    }\n  </div>\n</div>\n", styles: [".st-header{position:relative;text-align:left;padding-left:8px}.st-header.sortable{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .2s}.st-header.resizing{-webkit-user-select:none;user-select:none;cursor:col-resize}.st-header.align-center{text-align:center}.st-header.align-center .header-content{justify-content:center}.st-header.align-right{text-align:right}.st-header.align-right .header-content{justify-content:flex-end}.st-header .header-content{display:flex;align-items:center;gap:8px}.st-header .header-text{flex:1;font-size:12px;font-weight:500;letter-spacing:.2px;line-height:14px}.st-header .column-menu-trigger{background:none;border:none;padding:4px;cursor:pointer;border-radius:4px;display:flex;align-items:center;justify-content:center}.st-header .column-menu-trigger nile-icon{font-size:16px;pointer-events:none}.st-header .resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;z-index:10}.st-header .resize-handle:after{content:\"\";position:absolute;top:50%;right:3px;transform:translateY(-50%);width:2px;height:20px;background-color:#cbd5e0;opacity:0;transition:opacity .2s}.st-header .resize-handle:hover:after,.st-header .resize-handle:active:after{opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: StHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: StHeaderComponent, isStandalone: true, selector: "st-header", inputs: { column: "column", columnIndex: "columnIndex", isFirstColumn: "isFirstColumn", isLastColumn: "isLastColumn", tableState: "tableState", enableSorting: "enableSorting", enableFiltering: "enableFiltering" }, outputs: { sortToggle: "sortToggle", filterChange: "filterChange", columnMoved: "columnMoved", menuClick: "menuClick" }, ngImport: i0, template: "<div class=\"st-header\" [class.sortable]=\"isSortable()\" [class.sorted]=\"isSorted()\" [attr.aria-sort]=\"getAriaSort()\">\n  <div class=\"header-content\">\n    <span class=\"header-text\">{{ column.header || column.key }}</span>\n    @if (isMenuEnabled()) {\n      <button class=\"column-menu-trigger\" \n              (click)=\"onMenuClick($event)\"\n              type=\"button\" \n              aria-label=\"Column actions\">\n        <nile-icon name=\"options\"></nile-icon>\n      </button>\n    }\n  </div>\n</div>\n", styles: [".st-header{position:relative;text-align:left;padding-left:8px}.st-header.sortable{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .2s}.st-header.resizing{-webkit-user-select:none;user-select:none;cursor:col-resize}.st-header.align-center{text-align:center}.st-header.align-center .header-content{justify-content:center}.st-header.align-right{text-align:right}.st-header.align-right .header-content{justify-content:flex-end}.st-header .header-content{display:flex;align-items:center;gap:8px}.st-header .header-text{flex:1;font-size:12px;font-weight:500;letter-spacing:.2px;line-height:14px}.st-header .column-menu-trigger{background:none;border:none;padding:4px;cursor:pointer;border-radius:4px;display:flex;align-items:center;justify-content:center}.st-header .column-menu-trigger nile-icon{font-size:16px;pointer-events:none}.st-header .resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;z-index:10}.st-header .resize-handle:after{content:\"\";position:absolute;top:50%;right:3px;transform:translateY(-50%);width:2px;height:20px;background-color:#cbd5e0;opacity:0;transition:opacity .2s}.st-header .resize-handle:hover:after,.st-header .resize-handle:active:after{opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: StHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-header', standalone: true, imports: [CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"st-header\" [class.sortable]=\"isSortable()\" [class.sorted]=\"isSorted()\" [attr.aria-sort]=\"getAriaSort()\">\n  <div class=\"header-content\">\n    <span class=\"header-text\">{{ column.header || column.key }}</span>\n    @if (isMenuEnabled()) {\n      <button class=\"column-menu-trigger\" \n              (click)=\"onMenuClick($event)\"\n              type=\"button\" \n              aria-label=\"Column actions\">\n        <nile-icon name=\"options\"></nile-icon>\n      </button>\n    }\n  </div>\n</div>\n", styles: [".st-header{position:relative;text-align:left;padding-left:8px}.st-header.sortable{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .2s}.st-header.resizing{-webkit-user-select:none;user-select:none;cursor:col-resize}.st-header.align-center{text-align:center}.st-header.align-center .header-content{justify-content:center}.st-header.align-right{text-align:right}.st-header.align-right .header-content{justify-content:flex-end}.st-header .header-content{display:flex;align-items:center;gap:8px}.st-header .header-text{flex:1;font-size:12px;font-weight:500;letter-spacing:.2px;line-height:14px}.st-header .column-menu-trigger{background:none;border:none;padding:4px;cursor:pointer;border-radius:4px;display:flex;align-items:center;justify-content:center}.st-header .column-menu-trigger nile-icon{font-size:16px;pointer-events:none}.st-header .resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;z-index:10}.st-header .resize-handle:after{content:\"\";position:absolute;top:50%;right:3px;transform:translateY(-50%);width:2px;height:20px;background-color:#cbd5e0;opacity:0;transition:opacity .2s}.st-header .resize-handle:hover:after,.st-header .resize-handle:active:after{opacity:1}\n"] }]
         }], propDecorators: { column: [{
@@ -7992,10 +8117,10 @@ class StTableActionsComponent {
     isColumnHideable(column) {
         return column.hideable !== false; // Default to true if not set
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StTableActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: StTableActionsComponent, isStandalone: true, selector: "st-table-actions", inputs: { tableState: "tableState", allowAddColumn: "allowAddColumn" }, outputs: { addColumnClicked: "addColumnClicked" }, ngImport: i0, template: "<button \n  class=\"table-actions-button\"\n  (click)=\"toggleMenu($event)\"\n  type=\"button\"\n  title=\"Table Actions\"\n  aria-label=\"Table actions menu\"\n  [class.active]=\"isOpen\">\n  <nile-icon name=\"settings\"></nile-icon>\n</button>\n\n<!-- Dropdown container with shared pattern -->\n@if (isOpen) {\n  <div class=\"dropdown-container\">\n    <!-- Backdrop -->\n    <div class=\"dropdown-backdrop\" (click)=\"closeMenu()\"></div>\n    \n    <!-- Main Menu -->\n    @if (currentView === 'main') {\n      <div class=\"dropdown-menu\" [ngStyle]=\"dropdownStyle\">\n        <nile-menu>\n          <!-- Add Column -->\n          @if (allowAddColumn) {\n            <nile-menu-item (click)=\"onAddColumn($event)\">\n              <nile-icon slot=\"prefix\" name=\"plus\" size=\"12\"></nile-icon>\n              Add Column\n            </nile-menu-item>\n          }\n          \n          <!-- Show/Hide Columns -->\n          <nile-menu-item (click)=\"openColumnsSubmenu($event)\">\n            <nile-icon size=\"12\" slot=\"prefix\" name=\"eye\"></nile-icon>\n            Show/Hide Columns\n          </nile-menu-item>\n        </nile-menu>\n      </div>\n    }\n    \n    <!-- Column Visibility Submenu -->\n    @if (currentView === 'columns') {\n      <div class=\"dropdown-menu\" [ngStyle]=\"dropdownStyle\">\n        <nile-menu>\n          <!-- Back button -->\n          <nile-menu-item (click)=\"backToMain($event)\" class=\"back-item\">\n            <nile-icon size=\"12\" slot=\"prefix\" name=\"chevron-left\"></nile-icon>\n            Back\n          </nile-menu-item>\n          \n          <nile-divider></nile-divider>\n          \n          <!-- Column checkboxes -->\n          @for (column of columnsVisibility; track column.key) {\n            <nile-menu-item \n              [class.disabled]=\"!isColumnHideable(column)\"\n              (click)=\"onToggleColumn(column.key, $event)\">\n              <nile-checkbox \n                [checked]=\"isColumnVisible(column.key)\" \n                [disabled]=\"!isColumnHideable(column)\" \n                [label]=\"column.header || column.key\" \n                (nile-change)=\"onToggleColumn(column.key, $event)\">\n              </nile-checkbox>\n            </nile-menu-item>\n          }\n        </nile-menu>\n      </div>\n    }\n  </div>\n}\n", styles: [".table-actions-button{display:flex;align-items:center;justify-content:center;padding:6px;background:transparent;border:none;cursor:pointer;transition:background-color .15s}.table-actions-button:hover{background-color:#0000000d}.table-actions-button.active{background-color:#0000001a}.table-actions-button:focus{outline:none}.dropdown-container{position:fixed;inset:0;z-index:9996}.dropdown-backdrop{position:absolute;inset:0;background:transparent;pointer-events:auto;z-index:9996}.dropdown-menu{position:fixed;pointer-events:auto;z-index:9997;min-width:15rem}nile-menu{max-height:30rem;overflow-y:auto}nile-menu::part(base){width:fit-content;min-height:auto}nile-menu nile-menu-item::part(base){min-height:2.5rem}nile-menu nile-menu-item::part(label){font-size:12px}nile-menu nile-menu-item.back-item{font-weight:500}nile-menu nile-menu-item.disabled{opacity:.5;cursor:not-allowed}nile-menu nile-menu-item nile-checkbox::part(base){display:flex;align-items:center}nile-menu nile-menu-item nile-checkbox::part(label){font-size:12px;margin-top:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: StTableActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: StTableActionsComponent, isStandalone: true, selector: "st-table-actions", inputs: { tableState: "tableState", allowAddColumn: "allowAddColumn" }, outputs: { addColumnClicked: "addColumnClicked" }, ngImport: i0, template: "<button \n  class=\"table-actions-button\"\n  (click)=\"toggleMenu($event)\"\n  type=\"button\"\n  title=\"Table Actions\"\n  aria-label=\"Table actions menu\"\n  [class.active]=\"isOpen\">\n  <nile-icon name=\"settings\"></nile-icon>\n</button>\n\n<!-- Dropdown container with shared pattern -->\n@if (isOpen) {\n  <div class=\"dropdown-container\">\n    <!-- Backdrop -->\n    <div class=\"dropdown-backdrop\" (click)=\"closeMenu()\"></div>\n    \n    <!-- Main Menu -->\n    @if (currentView === 'main') {\n      <div class=\"dropdown-menu\" [ngStyle]=\"dropdownStyle\">\n        <nile-menu>\n          <!-- Add Column -->\n          @if (allowAddColumn) {\n            <nile-menu-item (click)=\"onAddColumn($event)\">\n              <nile-icon slot=\"prefix\" name=\"plus\" size=\"12\"></nile-icon>\n              Add Column\n            </nile-menu-item>\n          }\n          \n          <!-- Show/Hide Columns -->\n          <nile-menu-item (click)=\"openColumnsSubmenu($event)\">\n            <nile-icon size=\"12\" slot=\"prefix\" name=\"eye\"></nile-icon>\n            Show/Hide Columns\n          </nile-menu-item>\n        </nile-menu>\n      </div>\n    }\n    \n    <!-- Column Visibility Submenu -->\n    @if (currentView === 'columns') {\n      <div class=\"dropdown-menu\" [ngStyle]=\"dropdownStyle\">\n        <nile-menu>\n          <!-- Back button -->\n          <nile-menu-item (click)=\"backToMain($event)\" class=\"back-item\">\n            <nile-icon size=\"12\" slot=\"prefix\" name=\"chevron-left\"></nile-icon>\n            Back\n          </nile-menu-item>\n          \n          <nile-divider></nile-divider>\n          \n          <!-- Column checkboxes -->\n          @for (column of columnsVisibility; track column.key) {\n            <nile-menu-item \n              [class.disabled]=\"!isColumnHideable(column)\"\n              (click)=\"onToggleColumn(column.key, $event)\">\n              <nile-checkbox \n                [checked]=\"isColumnVisible(column.key)\" \n                [disabled]=\"!isColumnHideable(column)\" \n                [label]=\"column.header || column.key\" \n                (nile-change)=\"onToggleColumn(column.key, $event)\">\n              </nile-checkbox>\n            </nile-menu-item>\n          }\n        </nile-menu>\n      </div>\n    }\n  </div>\n}\n", styles: [".table-actions-button{display:flex;align-items:center;justify-content:center;padding:6px;background:transparent;border:none;cursor:pointer;transition:background-color .15s}.table-actions-button:hover{background-color:#0000000d}.table-actions-button.active{background-color:#0000001a}.table-actions-button:focus{outline:none}.dropdown-container{position:fixed;inset:0;z-index:9996}.dropdown-backdrop{position:absolute;inset:0;background:transparent;pointer-events:auto;z-index:9996}.dropdown-menu{position:fixed;pointer-events:auto;z-index:9997;min-width:15rem}nile-menu{max-height:30rem;overflow-y:auto}nile-menu::part(base){width:fit-content;min-height:auto}nile-menu nile-menu-item::part(base){min-height:2.5rem}nile-menu nile-menu-item::part(label){font-size:12px}nile-menu nile-menu-item.back-item{font-weight:500}nile-menu nile-menu-item.disabled{opacity:.5;cursor:not-allowed}nile-menu nile-menu-item nile-checkbox::part(base){display:flex;align-items:center}nile-menu nile-menu-item nile-checkbox::part(label){font-size:12px;margin-top:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StTableActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: StTableActionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-table-actions', standalone: true, imports: [CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<button \n  class=\"table-actions-button\"\n  (click)=\"toggleMenu($event)\"\n  type=\"button\"\n  title=\"Table Actions\"\n  aria-label=\"Table actions menu\"\n  [class.active]=\"isOpen\">\n  <nile-icon name=\"settings\"></nile-icon>\n</button>\n\n<!-- Dropdown container with shared pattern -->\n@if (isOpen) {\n  <div class=\"dropdown-container\">\n    <!-- Backdrop -->\n    <div class=\"dropdown-backdrop\" (click)=\"closeMenu()\"></div>\n    \n    <!-- Main Menu -->\n    @if (currentView === 'main') {\n      <div class=\"dropdown-menu\" [ngStyle]=\"dropdownStyle\">\n        <nile-menu>\n          <!-- Add Column -->\n          @if (allowAddColumn) {\n            <nile-menu-item (click)=\"onAddColumn($event)\">\n              <nile-icon slot=\"prefix\" name=\"plus\" size=\"12\"></nile-icon>\n              Add Column\n            </nile-menu-item>\n          }\n          \n          <!-- Show/Hide Columns -->\n          <nile-menu-item (click)=\"openColumnsSubmenu($event)\">\n            <nile-icon size=\"12\" slot=\"prefix\" name=\"eye\"></nile-icon>\n            Show/Hide Columns\n          </nile-menu-item>\n        </nile-menu>\n      </div>\n    }\n    \n    <!-- Column Visibility Submenu -->\n    @if (currentView === 'columns') {\n      <div class=\"dropdown-menu\" [ngStyle]=\"dropdownStyle\">\n        <nile-menu>\n          <!-- Back button -->\n          <nile-menu-item (click)=\"backToMain($event)\" class=\"back-item\">\n            <nile-icon size=\"12\" slot=\"prefix\" name=\"chevron-left\"></nile-icon>\n            Back\n          </nile-menu-item>\n          \n          <nile-divider></nile-divider>\n          \n          <!-- Column checkboxes -->\n          @for (column of columnsVisibility; track column.key) {\n            <nile-menu-item \n              [class.disabled]=\"!isColumnHideable(column)\"\n              (click)=\"onToggleColumn(column.key, $event)\">\n              <nile-checkbox \n                [checked]=\"isColumnVisible(column.key)\" \n                [disabled]=\"!isColumnHideable(column)\" \n                [label]=\"column.header || column.key\" \n                (nile-change)=\"onToggleColumn(column.key, $event)\">\n              </nile-checkbox>\n            </nile-menu-item>\n          }\n        </nile-menu>\n      </div>\n    }\n  </div>\n}\n", styles: [".table-actions-button{display:flex;align-items:center;justify-content:center;padding:6px;background:transparent;border:none;cursor:pointer;transition:background-color .15s}.table-actions-button:hover{background-color:#0000000d}.table-actions-button.active{background-color:#0000001a}.table-actions-button:focus{outline:none}.dropdown-container{position:fixed;inset:0;z-index:9996}.dropdown-backdrop{position:absolute;inset:0;background:transparent;pointer-events:auto;z-index:9996}.dropdown-menu{position:fixed;pointer-events:auto;z-index:9997;min-width:15rem}nile-menu{max-height:30rem;overflow-y:auto}nile-menu::part(base){width:fit-content;min-height:auto}nile-menu nile-menu-item::part(base){min-height:2.5rem}nile-menu nile-menu-item::part(label){font-size:12px}nile-menu nile-menu-item.back-item{font-weight:500}nile-menu nile-menu-item.disabled{opacity:.5;cursor:not-allowed}nile-menu nile-menu-item nile-checkbox::part(base){display:flex;align-items:center}nile-menu nile-menu-item nile-checkbox::part(label){font-size:12px;margin-top:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { tableState: [{
@@ -8353,10 +8478,10 @@ class StColumnFilterComponent {
         // Align left for first 2 columns to prevent clipping
         return this.columnIndex <= 1;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StColumnFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: StColumnFilterComponent, isStandalone: true, selector: "st-column-filter", inputs: { column: "column", tableState: "tableState", columnIndex: "columnIndex", isFirstColumn: "isFirstColumn", isLastColumn: "isLastColumn", isOpen: "isOpen", filterContext: "filterContext" }, outputs: { closed: "closed", filterApplied: "filterApplied", filterCleared: "filterCleared" }, viewQueries: [{ propertyName: "filterAnchor", first: true, predicate: ["filterAnchor"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Popover content -->\n<div class=\"filter-content\">\n  <!-- Operator Select -->\n  @if (availableOperators.length > 1) {\n    <nile-select \n      label=\"Operator\"\n      [value]=\"selectedOperator\"\n      (nile-change)=\"onOperatorChange($event)\"\n      class=\"filter-operator\">\n      @for (op of availableOperators; track op.value) {\n        <nile-option [value]=\"op.value\">\n          {{ op.label }}\n        </nile-option>\n      }\n    </nile-select>\n  }\n  \n  <!-- Input Field based on type -->\n  <div class=\"filter-value-section\">\n    \n    <!-- Text Input -->\n    @if (inputType === 'text') {\n      <nile-input \n        type=\"text\"\n        label=\"Value\"\n        [value]=\"filterValue\"\n        placeholder=\"Enter value...\"\n        (nile-input)=\"onValueInput($event)\"\n        class=\"filter-value-input\">\n      </nile-input>\n    }\n    \n    <!-- Number Input -->\n    @if (inputType === 'number') {\n      <nile-input \n        type=\"number\"\n        label=\"Value\"\n        [value]=\"filterValue\"\n        placeholder=\"Enter number...\"\n        (nile-input)=\"onValueInput($event)\"\n        class=\"filter-value-input\">\n      </nile-input>\n    }\n    \n    <!-- Date Input -->\n    @if (inputType === 'date') {\n      <nile-input \n        type=\"date\"\n        label=\"Value\"\n        [value]=\"filterValue\"\n        (nile-input)=\"onValueInput($event)\"\n        class=\"filter-value-input\">\n      </nile-input>\n    }\n    \n    <!-- Checkbox Input -->\n    @if (inputType === 'checkbox') {\n      <nile-checkbox\n        [checked]=\"filterValue\"\n        (nile-change)=\"onCheckboxChange($event)\"\n        class=\"filter-checkbox\">\n        {{ filterValue ? 'True' : 'False' }}\n      </nile-checkbox>\n    }\n    \n    <!-- Single Select Dropdown -->\n    @if (inputType === 'select') {\n      <nile-select \n        label=\"Value\"\n        [value]=\"filterValue\"\n        placeholder=\"-- Select --\"\n        (nile-change)=\"onSelectChange($event)\"\n        class=\"filter-value-select\">\n        @for (option of dropdownOptions; track option.value) {\n          <nile-option [value]=\"option.value\">\n            {{ option.label }}\n          </nile-option>\n        }\n      </nile-select>\n    }\n    \n    <!-- Multi-Select with Radio Group as example (or keep checkboxes) -->\n    @if (inputType === 'multiselect') {\n      <div class=\"filter-multiselect\">\n        <label class=\"multiselect-title\">Select Values</label>\n        <div class=\"multiselect-options\">\n          @for (option of dropdownOptions; track option.value) {\n            <nile-checkbox\n              [checked]=\"isValueSelected(option.value)\"\n              [value]=\"option.value\"\n              (nile-change)=\"onMultiselectCheckboxChange($event, option.value)\"\n              class=\"multiselect-checkbox\">\n              {{ option.label }}\n            </nile-checkbox>\n          }\n        </div>\n        @if (dropdownOptions.length === 0) {\n          <div class=\"empty-state\">\n            No options available\n          </div>\n        }\n      </div>\n    }\n  </div>\n  \n  <!-- Action Buttons -->\n  <div class=\"filter-actions\">\n    <nile-button \n      variant=\"primary\"\n      size=\"small\"\n      (click)=\"onApply()\">\n      Apply\n    </nile-button>\n    <nile-button \n      variant=\"default\"\n      size=\"small\"\n      (click)=\"onClear()\">\n      Clear\n    </nile-button>\n  </div>\n</div>\n", styles: [".filter-content{padding:16px;display:flex;flex-direction:column;gap:16px}.filter-content nile-select,.filter-content nile-input,.filter-content nile-checkbox{width:100%}.filter-content .filter-operator,.filter-content .filter-value-input,.filter-content .filter-value-select{margin-bottom:0}.filter-value-section{display:flex;flex-direction:column;gap:12px}.filter-value-section nile-checkbox{margin-top:8px}.filter-multiselect{display:flex;flex-direction:column;gap:8px}.filter-multiselect .multiselect-title{display:block;font-size:13px;font-weight:600;color:#2d3748;margin-bottom:8px}.filter-multiselect .multiselect-options{max-height:200px;overflow-y:auto;border:1px solid #cbd5e0;border-radius:4px;padding:8px;background-color:#f7fafc;display:flex;flex-direction:column;gap:6px}.filter-multiselect .multiselect-options nile-checkbox{width:100%}.filter-multiselect .multiselect-options nile-checkbox::part(base){padding:4px 8px;border-radius:4px;transition:background-color .15s}.filter-multiselect .multiselect-options nile-checkbox:hover::part(base){background-color:#edf2f7}.filter-multiselect .empty-state{padding:12px;text-align:center;color:#718096;font-size:13px}.filter-actions{display:flex;gap:8px;justify-content:flex-end;padding-top:12px;border-top:1px solid #e2e8f0;margin-top:4px}.filter-actions nile-button{flex:0 0 auto}.multiselect-options::-webkit-scrollbar{width:6px}.multiselect-options::-webkit-scrollbar-track{background:#edf2f7;border-radius:3px}.multiselect-options::-webkit-scrollbar-thumb{background:#cbd5e0;border-radius:3px}.multiselect-options::-webkit-scrollbar-thumb:hover{background:#a0aec0}nile-input::part(base){width:100%}nile-select::part(base){width:100%}nile-button::part(base){min-width:80px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: StColumnFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: StColumnFilterComponent, isStandalone: true, selector: "st-column-filter", inputs: { column: "column", tableState: "tableState", columnIndex: "columnIndex", isFirstColumn: "isFirstColumn", isLastColumn: "isLastColumn", isOpen: "isOpen", filterContext: "filterContext" }, outputs: { closed: "closed", filterApplied: "filterApplied", filterCleared: "filterCleared" }, viewQueries: [{ propertyName: "filterAnchor", first: true, predicate: ["filterAnchor"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Popover content -->\n<div class=\"filter-content\">\n  <!-- Operator Select -->\n  @if (availableOperators.length > 1) {\n    <nile-select \n      label=\"Operator\"\n      [value]=\"selectedOperator\"\n      (nile-change)=\"onOperatorChange($event)\"\n      class=\"filter-operator\">\n      @for (op of availableOperators; track op.value) {\n        <nile-option [value]=\"op.value\">\n          {{ op.label }}\n        </nile-option>\n      }\n    </nile-select>\n  }\n  \n  <!-- Input Field based on type -->\n  <div class=\"filter-value-section\">\n    \n    <!-- Text Input -->\n    @if (inputType === 'text') {\n      <nile-input \n        type=\"text\"\n        label=\"Value\"\n        [value]=\"filterValue\"\n        placeholder=\"Enter value...\"\n        (nile-input)=\"onValueInput($event)\"\n        class=\"filter-value-input\">\n      </nile-input>\n    }\n    \n    <!-- Number Input -->\n    @if (inputType === 'number') {\n      <nile-input \n        type=\"number\"\n        label=\"Value\"\n        [value]=\"filterValue\"\n        placeholder=\"Enter number...\"\n        (nile-input)=\"onValueInput($event)\"\n        class=\"filter-value-input\">\n      </nile-input>\n    }\n    \n    <!-- Date Input -->\n    @if (inputType === 'date') {\n      <nile-input \n        type=\"date\"\n        label=\"Value\"\n        [value]=\"filterValue\"\n        (nile-input)=\"onValueInput($event)\"\n        class=\"filter-value-input\">\n      </nile-input>\n    }\n    \n    <!-- Checkbox Input -->\n    @if (inputType === 'checkbox') {\n      <nile-checkbox\n        [checked]=\"filterValue\"\n        (nile-change)=\"onCheckboxChange($event)\"\n        class=\"filter-checkbox\">\n        {{ filterValue ? 'True' : 'False' }}\n      </nile-checkbox>\n    }\n    \n    <!-- Single Select Dropdown -->\n    @if (inputType === 'select') {\n      <nile-select \n        label=\"Value\"\n        [value]=\"filterValue\"\n        placeholder=\"-- Select --\"\n        (nile-change)=\"onSelectChange($event)\"\n        class=\"filter-value-select\">\n        @for (option of dropdownOptions; track option.value) {\n          <nile-option [value]=\"option.value\">\n            {{ option.label }}\n          </nile-option>\n        }\n      </nile-select>\n    }\n    \n    <!-- Multi-Select with Radio Group as example (or keep checkboxes) -->\n    @if (inputType === 'multiselect') {\n      <div class=\"filter-multiselect\">\n        <label class=\"multiselect-title\">Select Values</label>\n        <div class=\"multiselect-options\">\n          @for (option of dropdownOptions; track option.value) {\n            <nile-checkbox\n              [checked]=\"isValueSelected(option.value)\"\n              [value]=\"option.value\"\n              (nile-change)=\"onMultiselectCheckboxChange($event, option.value)\"\n              class=\"multiselect-checkbox\">\n              {{ option.label }}\n            </nile-checkbox>\n          }\n        </div>\n        @if (dropdownOptions.length === 0) {\n          <div class=\"empty-state\">\n            No options available\n          </div>\n        }\n      </div>\n    }\n  </div>\n  \n  <!-- Action Buttons -->\n  <div class=\"filter-actions\">\n    <nile-button \n      variant=\"primary\"\n      size=\"small\"\n      (click)=\"onApply()\">\n      Apply\n    </nile-button>\n    <nile-button \n      variant=\"default\"\n      size=\"small\"\n      (click)=\"onClear()\">\n      Clear\n    </nile-button>\n  </div>\n</div>\n", styles: [".filter-content{padding:16px;display:flex;flex-direction:column;gap:16px}.filter-content nile-select,.filter-content nile-input,.filter-content nile-checkbox{width:100%}.filter-content .filter-operator,.filter-content .filter-value-input,.filter-content .filter-value-select{margin-bottom:0}.filter-value-section{display:flex;flex-direction:column;gap:12px}.filter-value-section nile-checkbox{margin-top:8px}.filter-multiselect{display:flex;flex-direction:column;gap:8px}.filter-multiselect .multiselect-title{display:block;font-size:13px;font-weight:600;color:#2d3748;margin-bottom:8px}.filter-multiselect .multiselect-options{max-height:200px;overflow-y:auto;border:1px solid #cbd5e0;border-radius:4px;padding:8px;background-color:#f7fafc;display:flex;flex-direction:column;gap:6px}.filter-multiselect .multiselect-options nile-checkbox{width:100%}.filter-multiselect .multiselect-options nile-checkbox::part(base){padding:4px 8px;border-radius:4px;transition:background-color .15s}.filter-multiselect .multiselect-options nile-checkbox:hover::part(base){background-color:#edf2f7}.filter-multiselect .empty-state{padding:12px;text-align:center;color:#718096;font-size:13px}.filter-actions{display:flex;gap:8px;justify-content:flex-end;padding-top:12px;border-top:1px solid #e2e8f0;margin-top:4px}.filter-actions nile-button{flex:0 0 auto}.multiselect-options::-webkit-scrollbar{width:6px}.multiselect-options::-webkit-scrollbar-track{background:#edf2f7;border-radius:3px}.multiselect-options::-webkit-scrollbar-thumb{background:#cbd5e0;border-radius:3px}.multiselect-options::-webkit-scrollbar-thumb:hover{background:#a0aec0}nile-input::part(base){width:100%}nile-select::part(base){width:100%}nile-button::part(base){min-width:80px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StColumnFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: StColumnFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-column-filter', standalone: true, imports: [CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<!-- Popover content -->\n<div class=\"filter-content\">\n  <!-- Operator Select -->\n  @if (availableOperators.length > 1) {\n    <nile-select \n      label=\"Operator\"\n      [value]=\"selectedOperator\"\n      (nile-change)=\"onOperatorChange($event)\"\n      class=\"filter-operator\">\n      @for (op of availableOperators; track op.value) {\n        <nile-option [value]=\"op.value\">\n          {{ op.label }}\n        </nile-option>\n      }\n    </nile-select>\n  }\n  \n  <!-- Input Field based on type -->\n  <div class=\"filter-value-section\">\n    \n    <!-- Text Input -->\n    @if (inputType === 'text') {\n      <nile-input \n        type=\"text\"\n        label=\"Value\"\n        [value]=\"filterValue\"\n        placeholder=\"Enter value...\"\n        (nile-input)=\"onValueInput($event)\"\n        class=\"filter-value-input\">\n      </nile-input>\n    }\n    \n    <!-- Number Input -->\n    @if (inputType === 'number') {\n      <nile-input \n        type=\"number\"\n        label=\"Value\"\n        [value]=\"filterValue\"\n        placeholder=\"Enter number...\"\n        (nile-input)=\"onValueInput($event)\"\n        class=\"filter-value-input\">\n      </nile-input>\n    }\n    \n    <!-- Date Input -->\n    @if (inputType === 'date') {\n      <nile-input \n        type=\"date\"\n        label=\"Value\"\n        [value]=\"filterValue\"\n        (nile-input)=\"onValueInput($event)\"\n        class=\"filter-value-input\">\n      </nile-input>\n    }\n    \n    <!-- Checkbox Input -->\n    @if (inputType === 'checkbox') {\n      <nile-checkbox\n        [checked]=\"filterValue\"\n        (nile-change)=\"onCheckboxChange($event)\"\n        class=\"filter-checkbox\">\n        {{ filterValue ? 'True' : 'False' }}\n      </nile-checkbox>\n    }\n    \n    <!-- Single Select Dropdown -->\n    @if (inputType === 'select') {\n      <nile-select \n        label=\"Value\"\n        [value]=\"filterValue\"\n        placeholder=\"-- Select --\"\n        (nile-change)=\"onSelectChange($event)\"\n        class=\"filter-value-select\">\n        @for (option of dropdownOptions; track option.value) {\n          <nile-option [value]=\"option.value\">\n            {{ option.label }}\n          </nile-option>\n        }\n      </nile-select>\n    }\n    \n    <!-- Multi-Select with Radio Group as example (or keep checkboxes) -->\n    @if (inputType === 'multiselect') {\n      <div class=\"filter-multiselect\">\n        <label class=\"multiselect-title\">Select Values</label>\n        <div class=\"multiselect-options\">\n          @for (option of dropdownOptions; track option.value) {\n            <nile-checkbox\n              [checked]=\"isValueSelected(option.value)\"\n              [value]=\"option.value\"\n              (nile-change)=\"onMultiselectCheckboxChange($event, option.value)\"\n              class=\"multiselect-checkbox\">\n              {{ option.label }}\n            </nile-checkbox>\n          }\n        </div>\n        @if (dropdownOptions.length === 0) {\n          <div class=\"empty-state\">\n            No options available\n          </div>\n        }\n      </div>\n    }\n  </div>\n  \n  <!-- Action Buttons -->\n  <div class=\"filter-actions\">\n    <nile-button \n      variant=\"primary\"\n      size=\"small\"\n      (click)=\"onApply()\">\n      Apply\n    </nile-button>\n    <nile-button \n      variant=\"default\"\n      size=\"small\"\n      (click)=\"onClear()\">\n      Clear\n    </nile-button>\n  </div>\n</div>\n", styles: [".filter-content{padding:16px;display:flex;flex-direction:column;gap:16px}.filter-content nile-select,.filter-content nile-input,.filter-content nile-checkbox{width:100%}.filter-content .filter-operator,.filter-content .filter-value-input,.filter-content .filter-value-select{margin-bottom:0}.filter-value-section{display:flex;flex-direction:column;gap:12px}.filter-value-section nile-checkbox{margin-top:8px}.filter-multiselect{display:flex;flex-direction:column;gap:8px}.filter-multiselect .multiselect-title{display:block;font-size:13px;font-weight:600;color:#2d3748;margin-bottom:8px}.filter-multiselect .multiselect-options{max-height:200px;overflow-y:auto;border:1px solid #cbd5e0;border-radius:4px;padding:8px;background-color:#f7fafc;display:flex;flex-direction:column;gap:6px}.filter-multiselect .multiselect-options nile-checkbox{width:100%}.filter-multiselect .multiselect-options nile-checkbox::part(base){padding:4px 8px;border-radius:4px;transition:background-color .15s}.filter-multiselect .multiselect-options nile-checkbox:hover::part(base){background-color:#edf2f7}.filter-multiselect .empty-state{padding:12px;text-align:center;color:#718096;font-size:13px}.filter-actions{display:flex;gap:8px;justify-content:flex-end;padding-top:12px;border-top:1px solid #e2e8f0;margin-top:4px}.filter-actions nile-button{flex:0 0 auto}.multiselect-options::-webkit-scrollbar{width:6px}.multiselect-options::-webkit-scrollbar-track{background:#edf2f7;border-radius:3px}.multiselect-options::-webkit-scrollbar-thumb{background:#cbd5e0;border-radius:3px}.multiselect-options::-webkit-scrollbar-thumb:hover{background:#a0aec0}nile-input::part(base){width:100%}nile-select::part(base){width:100%}nile-button::part(base){min-width:80px}\n"] }]
         }], propDecorators: { filterAnchor: [{
@@ -8391,7 +8516,7 @@ class StColumnMenuDropdownComponent {
          */
         this.isOpen = false;
         /**
-         * Position of the dropdown (x, y coordinates)
+         * Position of the dropdown (x, y coordinates, triggerTop for flip positioning)
          */
         this.position = { x: 0, y: 0 };
         /**
@@ -8504,25 +8629,40 @@ class StColumnMenuDropdownComponent {
             this.dropdownStyle = {};
             return;
         }
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;
-        const dropdownWidth = 280; // Approximate dropdown width
-        const dropdownHeight = 300; // Approximate max dropdown height
         let { x, y } = this.position;
-        // Adjust horizontal position if dropdown would overflow
-        if (x + dropdownWidth > viewportWidth) {
-            x = Math.max(10, viewportWidth - dropdownWidth - 10);
-        }
-        // Adjust vertical position if dropdown would overflow
-        if (y + dropdownHeight > viewportHeight) {
-            y = Math.max(10, viewportHeight - dropdownHeight - 10);
-        }
+        // Render at initial position first (hidden until measured)
         this.dropdownStyle = {
             position: 'fixed',
             left: `${x}px`,
             top: `${y}px`,
-            'z-index': 9999
+            'z-index': 9999,
+            visibility: 'hidden'
         };
+        // After rendering, measure actual size and adjust if needed
+        requestAnimationFrame(() => {
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+            const el = this.dropdownPanel?.nativeElement;
+            const dropdownWidth = el?.offsetWidth || 280;
+            const dropdownHeight = el?.offsetHeight || 200;
+            // Adjust horizontal position if dropdown would overflow
+            if (x + dropdownWidth > viewportWidth) {
+                x = Math.max(10, viewportWidth - dropdownWidth - 10);
+            }
+            // Adjust vertical position — flip above the trigger if it overflows bottom
+            if (y + dropdownHeight > viewportHeight) {
+                const triggerTop = this.position.triggerTop ?? this.position.y;
+                y = triggerTop - dropdownHeight - 4;
+            }
+            // Clamp to viewport edges
+            x = Math.max(10, x);
+            y = Math.max(10, y);
+            if (el) {
+                el.style.left = `${x}px`;
+                el.style.top = `${y}px`;
+                el.style.visibility = 'visible';
+            }
+        });
     }
     /**
      * Check if an action is disabled
@@ -8587,12 +8727,12 @@ class StColumnMenuDropdownComponent {
         // Align left for first 2 columns to prevent clipping
         return (this.context?.columnIndex || 0) <= 1;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StColumnMenuDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: StColumnMenuDropdownComponent, isStandalone: true, selector: "st-column-menu-dropdown", inputs: { isOpen: "isOpen", position: "position", context: "context" }, outputs: { actionClicked: "actionClicked", closed: "closed" }, host: { listeners: { "click": "onBackdropClick($event)" } }, viewQueries: [{ propertyName: "filterPopup", first: true, predicate: ["filterPopup"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Dropdown container with backdrop -->\n@if (isOpen && context) {\n  <div class=\"dropdown-container\">\n    <!-- Backdrop -->\n    <div class=\"dropdown-backdrop\" (click)=\"closed.emit()\"></div>\n    \n    <!-- Dropdown menu -->\n    <div class=\"column-menu-dropdown\" [ngStyle]=\"dropdownStyle\">\n      <!-- Main menu with actions -->\n      @if (!isFilterOpen) {\n        <nile-menu>\n          <!-- Dynamically render all visible actions -->\n          @for (action of visibleActions; track action.id; let i = $index, last = $last) {\n            <nile-menu-item \n              (click)=\"onActionClick(action)\"\n              [class.disabled]=\"isActionDisabled(action)\"\n              [class.active]=\"isActionActive(action)\">\n              @if (isActionActive(action)) {\n                <span class=\"checkmark\">\u2713</span>\n              }\n              @if (action.icon && !isActionActive(action)) {\n                <nile-icon slot=\"prefix\" [name]=\"action.icon\"></nile-icon>\n              }\n              <span class=\"action-label\">{{ action.label }}</span>\n            </nile-menu-item>\n            \n            <!-- Add divider after action groups -->\n            @if (shouldShowDividerAfter(action, i, last)) {\n              <nile-divider></nile-divider>\n            }\n          }\n          \n          <!-- Fallback if no actions -->\n          @if (visibleActions.length === 0) {\n            <nile-menu-item>\n              No actions available\n            </nile-menu-item>\n          }\n        </nile-menu>\n      }\n      \n      <!-- Filter popup (conditionally rendered) -->\n      @if (isFilterOpen && context) {\n        <st-column-filter\n          #filterPopup\n          [column]=\"context.column\"\n          [tableState]=\"context.tableState\"\n          [columnIndex]=\"context.columnIndex\"\n          [isFirstColumn]=\"context.isFirstColumn\"\n          [isLastColumn]=\"context.isLastColumn\"\n          [isOpen]=\"isFilterOpen\"\n          (filterApplied)=\"onFilterApplied($event)\"\n          (filterCleared)=\"onFilterCleared()\"\n          (closed)=\"onFilterClosed()\">\n        </st-column-filter>\n      }\n    </div>\n  </div>\n}\n", styles: [".dropdown-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9998}.dropdown-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:auto;z-index:9998}.column-menu-dropdown{min-width:200px;max-width:300px;background-color:#fff;border-radius:8px;box-shadow:0 10px 25px #00000026;overflow:hidden;pointer-events:auto;z-index:9999}nile-menu nile-divider::part(divider){margin:0}nile-menu nile-menu-item::part(base){height:2.5rem;min-height:auto}nile-menu nile-menu-item .checkmark{margin-right:8px;color:#4299e1;font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: StColumnFilterComponent, selector: "st-column-filter", inputs: ["column", "tableState", "columnIndex", "isFirstColumn", "isLastColumn", "isOpen", "filterContext"], outputs: ["closed", "filterApplied", "filterCleared"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: StColumnMenuDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: StColumnMenuDropdownComponent, isStandalone: true, selector: "st-column-menu-dropdown", inputs: { isOpen: "isOpen", position: "position", context: "context" }, outputs: { actionClicked: "actionClicked", closed: "closed" }, host: { listeners: { "click": "onBackdropClick($event)" } }, viewQueries: [{ propertyName: "filterPopup", first: true, predicate: ["filterPopup"], descendants: true }, { propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Dropdown container with backdrop -->\n@if (isOpen && context) {\n  <div class=\"dropdown-container\">\n    <!-- Backdrop -->\n    <div class=\"dropdown-backdrop\" (click)=\"closed.emit()\"></div>\n    \n    <!-- Dropdown menu -->\n    <div class=\"column-menu-dropdown\" #dropdownPanel [ngStyle]=\"dropdownStyle\">\n      <!-- Main menu with actions -->\n      @if (!isFilterOpen) {\n        <nile-menu>\n          <!-- Dynamically render all visible actions -->\n          @for (action of visibleActions; track action.id; let i = $index, last = $last) {\n            <nile-menu-item \n              (click)=\"onActionClick(action)\"\n              [class.disabled]=\"isActionDisabled(action)\"\n              [class.active]=\"isActionActive(action)\">\n              @if (isActionActive(action)) {\n                <span class=\"checkmark\">\u2713</span>\n              }\n              @if (action.icon && !isActionActive(action)) {\n                <nile-icon slot=\"prefix\" [name]=\"action.icon\"></nile-icon>\n              }\n              <span class=\"action-label\">{{ action.label }}</span>\n            </nile-menu-item>\n            \n            <!-- Add divider after action groups -->\n            @if (shouldShowDividerAfter(action, i, last)) {\n              <nile-divider></nile-divider>\n            }\n          }\n          \n          <!-- Fallback if no actions -->\n          @if (visibleActions.length === 0) {\n            <nile-menu-item>\n              No actions available\n            </nile-menu-item>\n          }\n        </nile-menu>\n      }\n      \n      <!-- Filter popup (conditionally rendered) -->\n      @if (isFilterOpen && context) {\n        <st-column-filter\n          #filterPopup\n          [column]=\"context.column\"\n          [tableState]=\"context.tableState\"\n          [columnIndex]=\"context.columnIndex\"\n          [isFirstColumn]=\"context.isFirstColumn\"\n          [isLastColumn]=\"context.isLastColumn\"\n          [isOpen]=\"isFilterOpen\"\n          (filterApplied)=\"onFilterApplied($event)\"\n          (filterCleared)=\"onFilterCleared()\"\n          (closed)=\"onFilterClosed()\">\n        </st-column-filter>\n      }\n    </div>\n  </div>\n}\n", styles: [".dropdown-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9998}.dropdown-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:auto;z-index:9998}.column-menu-dropdown{min-width:200px;max-width:300px;background-color:#fff;border-radius:8px;box-shadow:0 10px 25px #00000026;overflow:hidden;pointer-events:auto;z-index:9999}nile-menu nile-divider::part(divider){margin:0}nile-menu nile-menu-item::part(base){height:2.5rem;min-height:auto}nile-menu nile-menu-item .checkmark{margin-right:8px;color:#4299e1;font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: StColumnFilterComponent, selector: "st-column-filter", inputs: ["column", "tableState", "columnIndex", "isFirstColumn", "isLastColumn", "isOpen", "filterContext"], outputs: ["closed", "filterApplied", "filterCleared"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StColumnMenuDropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: StColumnMenuDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-column-menu-dropdown', standalone: true, imports: [CommonModule, StColumnFilterComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<!-- Dropdown container with backdrop -->\n@if (isOpen && context) {\n  <div class=\"dropdown-container\">\n    <!-- Backdrop -->\n    <div class=\"dropdown-backdrop\" (click)=\"closed.emit()\"></div>\n    \n    <!-- Dropdown menu -->\n    <div class=\"column-menu-dropdown\" [ngStyle]=\"dropdownStyle\">\n      <!-- Main menu with actions -->\n      @if (!isFilterOpen) {\n        <nile-menu>\n          <!-- Dynamically render all visible actions -->\n          @for (action of visibleActions; track action.id; let i = $index, last = $last) {\n            <nile-menu-item \n              (click)=\"onActionClick(action)\"\n              [class.disabled]=\"isActionDisabled(action)\"\n              [class.active]=\"isActionActive(action)\">\n              @if (isActionActive(action)) {\n                <span class=\"checkmark\">\u2713</span>\n              }\n              @if (action.icon && !isActionActive(action)) {\n                <nile-icon slot=\"prefix\" [name]=\"action.icon\"></nile-icon>\n              }\n              <span class=\"action-label\">{{ action.label }}</span>\n            </nile-menu-item>\n            \n            <!-- Add divider after action groups -->\n            @if (shouldShowDividerAfter(action, i, last)) {\n              <nile-divider></nile-divider>\n            }\n          }\n          \n          <!-- Fallback if no actions -->\n          @if (visibleActions.length === 0) {\n            <nile-menu-item>\n              No actions available\n            </nile-menu-item>\n          }\n        </nile-menu>\n      }\n      \n      <!-- Filter popup (conditionally rendered) -->\n      @if (isFilterOpen && context) {\n        <st-column-filter\n          #filterPopup\n          [column]=\"context.column\"\n          [tableState]=\"context.tableState\"\n          [columnIndex]=\"context.columnIndex\"\n          [isFirstColumn]=\"context.isFirstColumn\"\n          [isLastColumn]=\"context.isLastColumn\"\n          [isOpen]=\"isFilterOpen\"\n          (filterApplied)=\"onFilterApplied($event)\"\n          (filterCleared)=\"onFilterCleared()\"\n          (closed)=\"onFilterClosed()\">\n        </st-column-filter>\n      }\n    </div>\n  </div>\n}\n", styles: [".dropdown-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9998}.dropdown-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:auto;z-index:9998}.column-menu-dropdown{min-width:200px;max-width:300px;background-color:#fff;border-radius:8px;box-shadow:0 10px 25px #00000026;overflow:hidden;pointer-events:auto;z-index:9999}nile-menu nile-divider::part(divider){margin:0}nile-menu nile-menu-item::part(base){height:2.5rem;min-height:auto}nile-menu nile-menu-item .checkmark{margin-right:8px;color:#4299e1;font-weight:700}\n"] }]
+            args: [{ selector: 'st-column-menu-dropdown', standalone: true, imports: [CommonModule, StColumnFilterComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<!-- Dropdown container with backdrop -->\n@if (isOpen && context) {\n  <div class=\"dropdown-container\">\n    <!-- Backdrop -->\n    <div class=\"dropdown-backdrop\" (click)=\"closed.emit()\"></div>\n    \n    <!-- Dropdown menu -->\n    <div class=\"column-menu-dropdown\" #dropdownPanel [ngStyle]=\"dropdownStyle\">\n      <!-- Main menu with actions -->\n      @if (!isFilterOpen) {\n        <nile-menu>\n          <!-- Dynamically render all visible actions -->\n          @for (action of visibleActions; track action.id; let i = $index, last = $last) {\n            <nile-menu-item \n              (click)=\"onActionClick(action)\"\n              [class.disabled]=\"isActionDisabled(action)\"\n              [class.active]=\"isActionActive(action)\">\n              @if (isActionActive(action)) {\n                <span class=\"checkmark\">\u2713</span>\n              }\n              @if (action.icon && !isActionActive(action)) {\n                <nile-icon slot=\"prefix\" [name]=\"action.icon\"></nile-icon>\n              }\n              <span class=\"action-label\">{{ action.label }}</span>\n            </nile-menu-item>\n            \n            <!-- Add divider after action groups -->\n            @if (shouldShowDividerAfter(action, i, last)) {\n              <nile-divider></nile-divider>\n            }\n          }\n          \n          <!-- Fallback if no actions -->\n          @if (visibleActions.length === 0) {\n            <nile-menu-item>\n              No actions available\n            </nile-menu-item>\n          }\n        </nile-menu>\n      }\n      \n      <!-- Filter popup (conditionally rendered) -->\n      @if (isFilterOpen && context) {\n        <st-column-filter\n          #filterPopup\n          [column]=\"context.column\"\n          [tableState]=\"context.tableState\"\n          [columnIndex]=\"context.columnIndex\"\n          [isFirstColumn]=\"context.isFirstColumn\"\n          [isLastColumn]=\"context.isLastColumn\"\n          [isOpen]=\"isFilterOpen\"\n          (filterApplied)=\"onFilterApplied($event)\"\n          (filterCleared)=\"onFilterCleared()\"\n          (closed)=\"onFilterClosed()\">\n        </st-column-filter>\n      }\n    </div>\n  </div>\n}\n", styles: [".dropdown-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9998}.dropdown-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:auto;z-index:9998}.column-menu-dropdown{min-width:200px;max-width:300px;background-color:#fff;border-radius:8px;box-shadow:0 10px 25px #00000026;overflow:hidden;pointer-events:auto;z-index:9999}nile-menu nile-divider::part(divider){margin:0}nile-menu nile-menu-item::part(base){height:2.5rem;min-height:auto}nile-menu nile-menu-item .checkmark{margin-right:8px;color:#4299e1;font-weight:700}\n"] }]
         }], propDecorators: { isOpen: [{
                 type: Input
             }], position: [{
@@ -8606,6 +8746,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
             }], filterPopup: [{
                 type: ViewChild,
                 args: ['filterPopup']
+            }], dropdownPanel: [{
+                type: ViewChild,
+                args: ['dropdownPanel']
             }], onBackdropClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
@@ -8618,7 +8761,7 @@ class StRowActionsDropdownComponent {
          */
         this.isOpen = false;
         /**
-         * Position of the dropdown (x, y coordinates)
+         * Position of the dropdown (x, y coordinates, triggerTop for flip positioning)
          */
         this.position = { x: 0, y: 0 };
         /**
@@ -8673,35 +8816,39 @@ class StRowActionsDropdownComponent {
             this.dropdownStyle = {};
             return;
         }
-        const DROPDOWN_WIDTH = 200; // Approximate width
-        const DROPDOWN_HEIGHT = this.visibleActions.length * 40 + 16; // Approximate height
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;
         let left = this.position.x;
         let top = this.position.y;
-        // Check if dropdown would overflow right edge
-        if (left + DROPDOWN_WIDTH > viewportWidth) {
-            left = viewportWidth - DROPDOWN_WIDTH - 10;
-        }
-        // Check if dropdown would overflow bottom edge
-        if (top + DROPDOWN_HEIGHT > viewportHeight) {
-            // Position above the trigger
-            top = this.position.y - DROPDOWN_HEIGHT;
-        }
-        // Ensure dropdown doesn't go off-screen on the left
-        if (left < 10) {
-            left = 10;
-        }
-        // Ensure dropdown doesn't go off-screen on the top
-        if (top < 10) {
-            top = 10;
-        }
+        // Render at initial position first (hidden until measured)
         this.dropdownStyle = {
             position: 'fixed',
             left: `${left}px`,
             top: `${top}px`,
-            zIndex: TableZIndex.ROW_ACTIONS_DROPDOWN
+            zIndex: TableZIndex.ROW_ACTIONS_DROPDOWN,
+            visibility: 'hidden'
         };
+        // After rendering, measure actual size and adjust position directly on the DOM
+        // (OnPush change detection won't pick up property changes inside requestAnimationFrame)
+        requestAnimationFrame(() => {
+            const el = this.dropdownPanel?.nativeElement;
+            if (!el)
+                return;
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+            const dropdownWidth = el.offsetWidth || 200;
+            const dropdownHeight = el.offsetHeight || (this.visibleActions.length * 40 + 16);
+            if (left + dropdownWidth > viewportWidth) {
+                left = viewportWidth - dropdownWidth - 10;
+            }
+            if (top + dropdownHeight > viewportHeight) {
+                const triggerTop = this.position.triggerTop ?? this.position.y;
+                top = triggerTop - dropdownHeight - 4;
+            }
+            left = Math.max(10, left);
+            top = Math.max(10, top);
+            el.style.left = `${left}px`;
+            el.style.top = `${top}px`;
+            el.style.visibility = 'visible';
+        });
     }
     /**
      * Handle action click
@@ -8753,12 +8900,12 @@ class StRowActionsDropdownComponent {
     onDropdownClick(event) {
         event.stopPropagation();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StRowActionsDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: StRowActionsDropdownComponent, isStandalone: true, selector: "st-row-actions-dropdown", inputs: { isOpen: "isOpen", position: "position", context: "context" }, outputs: { actionClicked: "actionClicked", closed: "closed" }, host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" } }, usesOnChanges: true, ngImport: i0, template: "@if (isOpen && context) {\n  <div class=\"dropdown-container\">\n    <!-- Backdrop -->\n    <div class=\"dropdown-overlay\" (click)=\"closed.emit()\"></div>\n    \n    <!-- Dropdown menu -->\n    <div class=\"dropdown-menu\" [ngStyle]=\"dropdownStyle\">\n      @if (isOpen) {\n        <nile-menu class=\"dropdown-menu\" [style.left.px]=\"dropdownStyle.left\" [style.top.px]=\"dropdownStyle.top\">\n          @for (action of visibleActions; track action.id) {\n            <nile-menu-item [class.disabled]=\"isActionDisabled(action)\" (click)=\"onActionClick(action)\" class=\"action-label\">\n              @if (action.icon) {\n                <nile-icon size=\"14\" slot=\"prefix\" [name]=\"action.icon\"></nile-icon>\n              }\n              {{ action.label }}\n            </nile-menu-item>\n          }\n        \n          @if (visibleActions.length === 0) {\n            <nile-menu-item>No actions available</nile-menu-item>\n          }\n        </nile-menu>\n      }\n    </div>\n  </div>\n}\n", styles: [".dropdown-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9998}.dropdown-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:transparent;pointer-events:auto;z-index:9998}.dropdown-menu{position:fixed;background-color:#fff;box-shadow:0 5px 15px #0000004d,0 0 0 1px #0000001a;overflow:hidden;pointer-events:auto;z-index:9999}.action-icon{display:flex;align-items:center;justify-content:center;font-size:16px;width:20px;flex-shrink:0}.action-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dropdown-empty{padding:16px;text-align:center;color:#a0aec0;font-size:14px;font-style:italic}nile-menu{height:fit-content}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: StRowActionsDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: StRowActionsDropdownComponent, isStandalone: true, selector: "st-row-actions-dropdown", inputs: { isOpen: "isOpen", position: "position", context: "context" }, outputs: { actionClicked: "actionClicked", closed: "closed" }, host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" } }, viewQueries: [{ propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (isOpen && context) {\n  <div class=\"dropdown-container\">\n    <!-- Backdrop -->\n    <div class=\"dropdown-overlay\" (click)=\"closed.emit()\"></div>\n    \n    <!-- Dropdown menu -->\n    <div class=\"dropdown-menu\" #dropdownPanel [ngStyle]=\"dropdownStyle\">\n      @if (isOpen) {\n        <nile-menu>\n          @for (action of visibleActions; track action.id) {\n            <nile-menu-item [class.disabled]=\"isActionDisabled(action)\" (click)=\"onActionClick(action)\" class=\"action-label\">\n              @if (action.icon) {\n                <nile-icon size=\"14\" slot=\"prefix\" [name]=\"action.icon\"></nile-icon>\n              }\n              {{ action.label }}\n            </nile-menu-item>\n          }\n        \n          @if (visibleActions.length === 0) {\n            <nile-menu-item>No actions available</nile-menu-item>\n          }\n        </nile-menu>\n      }\n    </div>\n  </div>\n}\n", styles: [".dropdown-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9998}.dropdown-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:transparent;pointer-events:auto;z-index:9998}.dropdown-menu{position:fixed;background-color:#fff;box-shadow:0 5px 15px #0000004d,0 0 0 1px #0000001a;overflow:hidden;pointer-events:auto;z-index:9999}.action-icon{display:flex;align-items:center;justify-content:center;font-size:16px;width:20px;flex-shrink:0}.action-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dropdown-empty{padding:16px;text-align:center;color:#a0aec0;font-size:14px;font-style:italic}nile-menu{height:fit-content}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StRowActionsDropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: StRowActionsDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-row-actions-dropdown', standalone: true, imports: [CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isOpen && context) {\n  <div class=\"dropdown-container\">\n    <!-- Backdrop -->\n    <div class=\"dropdown-overlay\" (click)=\"closed.emit()\"></div>\n    \n    <!-- Dropdown menu -->\n    <div class=\"dropdown-menu\" [ngStyle]=\"dropdownStyle\">\n      @if (isOpen) {\n        <nile-menu class=\"dropdown-menu\" [style.left.px]=\"dropdownStyle.left\" [style.top.px]=\"dropdownStyle.top\">\n          @for (action of visibleActions; track action.id) {\n            <nile-menu-item [class.disabled]=\"isActionDisabled(action)\" (click)=\"onActionClick(action)\" class=\"action-label\">\n              @if (action.icon) {\n                <nile-icon size=\"14\" slot=\"prefix\" [name]=\"action.icon\"></nile-icon>\n              }\n              {{ action.label }}\n            </nile-menu-item>\n          }\n        \n          @if (visibleActions.length === 0) {\n            <nile-menu-item>No actions available</nile-menu-item>\n          }\n        </nile-menu>\n      }\n    </div>\n  </div>\n}\n", styles: [".dropdown-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9998}.dropdown-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:transparent;pointer-events:auto;z-index:9998}.dropdown-menu{position:fixed;background-color:#fff;box-shadow:0 5px 15px #0000004d,0 0 0 1px #0000001a;overflow:hidden;pointer-events:auto;z-index:9999}.action-icon{display:flex;align-items:center;justify-content:center;font-size:16px;width:20px;flex-shrink:0}.action-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dropdown-empty{padding:16px;text-align:center;color:#a0aec0;font-size:14px;font-style:italic}nile-menu{height:fit-content}\n"] }]
+            args: [{ selector: 'st-row-actions-dropdown', standalone: true, imports: [CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isOpen && context) {\n  <div class=\"dropdown-container\">\n    <!-- Backdrop -->\n    <div class=\"dropdown-overlay\" (click)=\"closed.emit()\"></div>\n    \n    <!-- Dropdown menu -->\n    <div class=\"dropdown-menu\" #dropdownPanel [ngStyle]=\"dropdownStyle\">\n      @if (isOpen) {\n        <nile-menu>\n          @for (action of visibleActions; track action.id) {\n            <nile-menu-item [class.disabled]=\"isActionDisabled(action)\" (click)=\"onActionClick(action)\" class=\"action-label\">\n              @if (action.icon) {\n                <nile-icon size=\"14\" slot=\"prefix\" [name]=\"action.icon\"></nile-icon>\n              }\n              {{ action.label }}\n            </nile-menu-item>\n          }\n        \n          @if (visibleActions.length === 0) {\n            <nile-menu-item>No actions available</nile-menu-item>\n          }\n        </nile-menu>\n      }\n    </div>\n  </div>\n}\n", styles: [".dropdown-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9998}.dropdown-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:transparent;pointer-events:auto;z-index:9998}.dropdown-menu{position:fixed;background-color:#fff;box-shadow:0 5px 15px #0000004d,0 0 0 1px #0000001a;overflow:hidden;pointer-events:auto;z-index:9999}.action-icon{display:flex;align-items:center;justify-content:center;font-size:16px;width:20px;flex-shrink:0}.action-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dropdown-empty{padding:16px;text-align:center;color:#a0aec0;font-size:14px;font-style:italic}nile-menu{height:fit-content}\n"] }]
         }], propDecorators: { isOpen: [{
                 type: Input
             }], position: [{
@@ -8769,6 +8916,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                 type: Output
             }], closed: [{
                 type: Output
+            }], dropdownPanel: [{
+                type: ViewChild,
+                args: ['dropdownPanel']
             }], onEscapeKey: [{
                 type: HostListener,
                 args: ['document:keydown.escape', ['$event']]
@@ -8837,10 +8987,10 @@ class StKeyboardNavigationDirective {
         };
         return map[key];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StKeyboardNavigationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: StKeyboardNavigationDirective, isStandalone: true, selector: "[stKeyboardNavigation]", inputs: { tableState: "tableState", addRowOnNavigatePastEnd: "addRowOnNavigatePastEnd" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: StKeyboardNavigationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: StKeyboardNavigationDirective, isStandalone: true, selector: "[stKeyboardNavigation]", inputs: { tableState: "tableState", addRowOnNavigatePastEnd: "addRowOnNavigatePastEnd" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StKeyboardNavigationDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: StKeyboardNavigationDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[stKeyboardNavigation]',
@@ -8952,10 +9102,10 @@ class StColumnResizeDirective {
         document.removeEventListener('mousemove', this.onResizeMove);
         document.removeEventListener('mouseup', this.onResizeEnd);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StColumnResizeDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: StColumnResizeDirective, isStandalone: true, selector: "[stColumnResize]", inputs: { column: "column" }, outputs: { columnResized: "columnResized", columnResizing: "columnResizing" }, host: { listeners: { "mousedown": "onResizeStart($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: StColumnResizeDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: StColumnResizeDirective, isStandalone: true, selector: "[stColumnResize]", inputs: { column: "column" }, outputs: { columnResized: "columnResized", columnResizing: "columnResizing" }, host: { listeners: { "mousedown": "onResizeStart($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StColumnResizeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: StColumnResizeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[stColumnResize]',
@@ -9610,7 +9760,8 @@ class StTableComponent {
         const rect = target.getBoundingClientRect();
         const position = {
             x: rect.left,
-            y: rect.bottom + 4
+            y: rect.bottom + 4,
+            triggerTop: rect.top
         };
         const context = {
             rowData,
@@ -9649,7 +9800,8 @@ class StTableComponent {
         const rect = target.getBoundingClientRect();
         const position = {
             x: rect.left,
-            y: rect.bottom + 4
+            y: rect.bottom + 4,
+            triggerTop: rect.top
         };
         const context = {
             column,
@@ -10079,10 +10231,10 @@ class StTableComponent {
         this.visibleRows$.complete();
         this.internalData$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: StTableComponent, isStandalone: true, selector: "st-table", inputs: { tableConfig: { classPropertyName: "tableConfig", publicName: "tableConfig", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, data$: { classPropertyName: "data$", publicName: "data$", isSignal: true, isRequired: false, transformFunction: null }, tableState: { classPropertyName: "tableState", publicName: "tableState", isSignal: true, isRequired: false, transformFunction: null }, enableSorting: { classPropertyName: "enableSorting", publicName: "enableSorting", isSignal: true, isRequired: false, transformFunction: null }, enableFiltering: { classPropertyName: "enableFiltering", publicName: "enableFiltering", isSignal: true, isRequired: false, transformFunction: null }, validateConfig: { classPropertyName: "validateConfig", publicName: "validateConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stateChange: "stateChange", dataChange: "dataChange", cellEdit: "cellEdit", cellSave: "cellSave", cellCancel: "cellCancel", cellChange: "cellChange", columnResized: "columnResized", columnMoved: "columnMoved", configValidationErrors: "configValidationErrors", columnAdded: "columnAdded", rowAction: "rowAction", validationStateChange: "validationStateChange", requestAddRow: "requestAddRow" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "scrollViewport", first: true, predicate: ["scrollViewport"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<!-- Top pagination controls -->\n@if (showTopPagination() && !(mergedConfig()?.tableSkeleton?.enabled | async)) {\n  <st-pagination \n    [tableState]=\"getActiveTableState()\"\n    [tableConfig]=\"mergedConfig()!\"\n    position=\"top\">\n  </st-pagination>\n}\n\n@if (!(mergedConfig()?.tableSkeleton?.enabled | async)) {\n  <div class=\"st-table\"\n    [ngClass]=\"{\n      'virtual-scroll-enabled': isVirtualScrollEnabled(),\n      'keyboard-navigation-enabled': isKeyboardNavigationEnabled()\n    }\"\n    [ngStyle]=\"{\n      'max-height.px': !isVirtualScrollEnabled() ? mergedConfig()?.display?.maxHeight : null\n    }\"\n    stKeyboardNavigation\n    [tableState]=\"getActiveTableState()\"\n    [addRowOnNavigatePastEnd]=\"mergedConfig()?.features?.keyboardNavigation?.addRowOnNavigatePastEnd || false\"\n    [attr.tabindex]=\"isKeyboardNavigationEnabled() ? 0 : -1\"\n    (focus)=\"onTableContainerFocus($event)\"\n    [attr.title]=\"isKeyboardNavigationEnabled() ? 'Click a cell or press Tab to start keyboard navigation' : null\">\n    <!-- Unified Table Actions Menu -->\n\n    <!-- Virtual scroll viewport wrapper -->\n    @if (isVirtualScrollEnabled()) {\n      <div class=\"st-scroll-viewport\" #scrollViewport\n        [ngStyle]=\"{ 'height.px': getVirtualScrollViewportHeight() }\">\n\n        <!-- Spacer to create scrollable area -->\n        <div class=\"st-scroll-spacer\" [ngStyle]=\"{ 'height.px': virtualScrollTotalHeight() }\">\n        </div>\n\n        <!-- Table positioner with transform (instead of tbody) -->\n        <div class=\"st-table-positioner\" [ngStyle]=\"{ transform: 'translateY(' + virtualScrollOffsetY() + 'px)' }\">\n          <!-- Table with only visible rows -->\n          <ng-container *ngTemplateOutlet=\"tableTemplate; context: { \n            mode: 'virtual',\n            theadStyle: { top: virtualScrollOffsetYNeg() + 'px' }\n          }\"></ng-container>\n        </div>\n      </div>\n    }\n    \n    <!-- Standard table (when virtual scroll disabled) -->\n    @if (!isVirtualScrollEnabled()) {\n      <ng-container *ngTemplateOutlet=\"tableTemplate; context: { \n        mode: 'standard',\n        theadStyle: null\n      }\"></ng-container>\n    }\n\n    <!-- Shared Column Menu Dropdown -->\n    <st-column-menu-dropdown \n      [isOpen]=\"columnMenuState().isOpen\"\n      [position]=\"columnMenuState().position\"\n      [context]=\"columnMenuState().context\"\n      (actionClicked)=\"onColumnActionClicked($event)\"\n      (closed)=\"closeColumnMenu()\">\n    </st-column-menu-dropdown>\n  </div>\n}\n\n@if (mergedConfig()?.tableSkeleton?.enabled | async) {\n  <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\n}\n\n<!-- Shared Row Actions Dropdown -->\n<st-row-actions-dropdown [isOpen]=\"dropdownState().isOpen\" [position]=\"dropdownState().position\"\n  [context]=\"dropdownState().context\" (actionClicked)=\"onRowActionClicked($event)\" (closed)=\"closeRowActionsDropdown()\">\n</st-row-actions-dropdown>\n\n\n<!-- Bottom pagination controls -->\n@if (showBottomPagination() && !(mergedConfig()?.tableSkeleton?.enabled | async)) {\n  <st-pagination \n    [tableState]=\"getActiveTableState()\"\n    [tableConfig]=\"mergedConfig()!\"\n    position=\"bottom\">\n</st-pagination>\n}\n\n\n<!-- ========================================== -->\n<!-- REUSABLE TABLE TEMPLATE -->\n<!-- ========================================== -->\n<ng-template #tableTemplate let-mode=\"mode\" let-theadStyle=\"theadStyle\">\n  <table class=\"st-table-element\">\n    <!-- TABLE HEADER -->\n    <thead [ngClass]=\"{ 'sticky': mergedConfig()?.display?.stickyHeader }\" [ngStyle]=\"theadStyle\">\n      <tr>\n        <!-- Row Number Header -->\n        @if (mergedConfig()?.showRowNumber) {\n          <th class=\"row-number-header header-cell sticky-left\"\n              [ngStyle]=\"{\n                position: 'sticky',\n                'left.px': 0,\n                'z-index': ZIndex.STICKY_HEADER_CELL,\n                'width.px': 30\n              }\">\n            #\n          </th>\n        }\n        <!-- Column Headers -->\n        @for (column of visibleColumns(); track column.key; let colIndex = $index, isFirst = $first, isLast = $last) {\n          <th \n            [ngClass]=\"{\n              'header-cell': mode === 'standard',\n              'sticky-left': column.sticky === 'left',\n              'sticky-right': column.sticky === 'right',\n              'sticky-right-first': column.sticky === 'right' && isFirstStickyRight(column.key),\n              'resizable': column.resizable !== false\n            }\"\n            [ngStyle]=\"{\n              position: column.sticky ? 'sticky' : null,\n              'left.px': column.sticky === 'left' ? (column.stickyOffset || 0) : null,\n              'right.px': column.sticky === 'right' ? (column.stickyOffset || 0) : null,\n              'z-index': column.sticky ? ZIndex.STICKY_HEADER_CELL : null,\n              'width.px': column.width\n            }\">\n            \n            <st-header \n              [column]=\"column\"\n              [columnIndex]=\"colIndex\"\n              [isFirstColumn]=\"isFirst\"\n              [isLastColumn]=\"isLast\"\n              [tableState]=\"getActiveTableState()\"\n              [enableSorting]=\"mergedConfig()?.sorting?.enabled ?? enableSorting()\"\n              [enableFiltering]=\"mergedConfig()?.filtering?.enabled ?? enableFiltering()\"\n              (columnMoved)=\"onColumnMoved($event)\"\n              (menuClick)=\"openColumnMenu($event, column, colIndex, isFirst, isLast)\">\n            </st-header>\n\n            @if (column.resizable !== false) {\n              <div \n                class=\"resize-handle\" \n                stColumnResize\n                [column]=\"column\"\n                (columnResizing)=\"onColumnResizing($event)\"\n                (columnResized)=\"onColumnResized($event)\">\n              </div>\n            }\n          </th>\n        }\n        \n        <!-- Settings Column Header -->\n        <th \n          class=\"settings-column sticky-right\"\n          [ngClass]=\"{ 'header-cell': mode === 'standard' }\"\n          [ngStyle]=\"{ 'z-index': ZIndex.STICKY_HEADER_CELL }\">\n          <div [ngClass]=\"{ 'flex-center': mode === 'virtual', 'header-content': mode === 'standard' }\">\n            <st-table-actions \n              [tableState]=\"getActiveTableState()\"\n              [allowAddColumn]=\"mergedConfig()?.features?.columnManagement?.allowAdd || false\"\n              (addColumnClicked)=\"onAddColumnClick()\">\n            </st-table-actions>\n          </div>\n        </th>\n      </tr>\n    </thead>\n\n    <!-- TABLE BODY -->\n    <tbody>\n      <!-- Virtual Scroll Rows -->\n      @if (mode === 'virtual') {\n        @for (row of visibleRows(); track trackByRowIndex($index, row); let relativeIndex = $index) {\n          <tr [attr.data-row-index]=\"getAbsoluteRowIndex(relativeIndex)\">\n            <!-- Row Number Cell -->\n            @if (mergedConfig()?.showRowNumber) {\n              <td class=\"row-number-cell\" \n                [ngClass]=\"{ 'sticky-left': 'left' }\"\n                [ngStyle]=\"{\n                  'width.px': 30,\n                  position: 'sticky',\n                  'left.px': 0,\n                  'z-index': ZIndex.STICKY_BODY_CELL,\n                  'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null\n                }\">\n                {{getAbsoluteRowIndex(relativeIndex) + 1}}\n              </td>\n            }\n            <ng-container *ngTemplateOutlet=\"bodyCellTemplate; context: { \n              row: row,\n              rowIndex: getAbsoluteRowIndex(relativeIndex),\n              mode: 'virtual',\n              relativeIndex: relativeIndex\n            }\"></ng-container>\n          </tr>\n        }\n      }\n\n      <!-- Standard Rows -->\n      @if (mode === 'standard') {\n        @for (row of visibleCellGrid(); track $index; let rowIndex = $index) {\n          <tr [attr.data-row-index]=\"rowIndex\">\n            <!-- Row Number Cell -->\n            @if (mergedConfig()?.showRowNumber) {\n              <td class=\"row-number-cell\" \n                [ngClass]=\"{ 'sticky-left': 'left' }\"\n                [ngStyle]=\"{\n                  'width.px': 30,\n                  position: 'sticky',\n                  'left.px': 0,\n                  'z-index': ZIndex.STICKY_BODY_CELL,\n                  'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null\n                }\">\n                {{rowIndex + 1}}\n              </td>\n            }\n            <ng-container *ngTemplateOutlet=\"bodyCellTemplate; context: { \n              row: row,\n              rowIndex: rowIndex,\n              mode: 'standard'\n            }\"></ng-container>\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</ng-template>\n\n<!-- ========================================== -->\n<!-- REUSABLE BODY CELL TEMPLATE -->\n<!-- ========================================== -->\n<ng-template #bodyCellTemplate let-row=\"row\" let-rowIndex=\"rowIndex\" let-mode=\"mode\" let-relativeIndex=\"relativeIndex\">\n  <!-- Data Cells -->\n  @for (cell of row; track $index; let colIndex = $index) {\n    <td \n      [ngClass]=\"{\n        'sticky-left': visibleColumns()[colIndex]?.sticky === 'left',\n        'sticky-right': visibleColumns()[colIndex]?.sticky === 'right',\n        'sticky-right-first': visibleColumns()[colIndex]?.sticky === 'right' && visibleColumns()[colIndex]?.key && isFirstStickyRight(visibleColumns()[colIndex].key),\n        'align-center': visibleColumns()[colIndex]?.alignment === 'center',\n        'align-right': visibleColumns()[colIndex]?.alignment === 'right',\n        'cell-focused': cell.isFocused()\n      }\"\n      [ngStyle]=\"{\n        position: visibleColumns()[colIndex]?.sticky ? 'sticky' : null,\n        'left.px': visibleColumns()[colIndex]?.sticky === 'left' ? (visibleColumns()[colIndex]?.stickyOffset || 0) : null,\n        'right.px': visibleColumns()[colIndex]?.sticky === 'right' ? (visibleColumns()[colIndex]?.stickyOffset || 0) : null,\n        'z-index': visibleColumns()[colIndex]?.sticky ? ZIndex.STICKY_BODY_CELL : null,\n        'width.px': visibleColumns()[colIndex]?.width,\n        'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null\n      }\"\n      (click)=\"isKeyboardNavigationEnabled() ? onCellClick(rowIndex, colIndex) : null\">\n      \n      <!-- Virtual Scroll Cell -->\n      @if (mode === 'virtual') {\n        <st-cell \n          [cell]=\"cell\" \n          [attr.tabindex]=\"cell.isFocused() ? 0 : -1\" \n          [editMode]=\"getEditModeForCells()\"\n          [tableState]=\"getActiveTableState()\"\n          [tableConfig]=\"mergedConfig()!\"\n          [columnIndex]=\"colIndex\"\n          (cellEdit)=\"onCellEdit($event)\" \n          (cellSave)=\"onCellSave($event)\"\n          (cellSaveAndNavigate)=\"onCellSaveAndNavigate($event)\" \n          (cellCancel)=\"onCellCancel($event)\"\n          (cellChange)=\"cellChange.emit($event)\">\n        </st-cell>\n      }\n\n      <!-- Standard Cell -->\n      @if (mode === 'standard') {\n        <st-cell \n          [cell]=\"cell\"  \n          [attr.tabindex]=\"cell.isFocused() ? 0 : -1\"\n          [tableState]=\"getActiveTableState()\"\n          [tableConfig]=\"mergedConfig()!\"\n          [columnIndex]=\"colIndex\"\n          (cellSave)=\"onCellSave($event)\"\n          (cellChange)=\"cellChange.emit($event)\">\n        </st-cell>\n      }\n    </td>\n  }\n  \n  <!-- Row Actions Cell -->\n  <td class=\"settings-column\"\n    [ngClass]=\"{\n      'has-actions': hasRowActions()\n    }\"\n    [ngStyle]=\"{\n      position: hasRowActions() ? 'sticky' : null,\n      'right.px': hasRowActions() ? 0 : null,\n      'z-index': hasRowActions() ? ZIndex.STICKY_BODY_CELL : null\n    }\">\n    @if (hasRowActions()) {\n      <button \n        class=\"settings-trigger\"\n        (click)=\"openRowActionsDropdown($event, getRowData(rowIndex), rowIndex)\"\n        type=\"button\" \n        aria-label=\"Row actions\">\n        \u22EF\n      </button>\n    }\n  </td>\n</ng-template>\n\n<ng-template #skeletonLoader>\n  @if (mergedConfig()?.tableSkeleton?.enabled | async) {\n    <div class=\"list-row\">\n      @for (i of skeletonColumns; track $index) {\n        <div class=\"list-content\">\n          @for (j of skeletonRows; track $index) {\n            <nile-skeleton-loader variant=\"text\" width=\"90%\" height=\"18\"></nile-skeleton-loader>\n          }\n        </div>\n      }\n    </div>\n  }\n</ng-template>\n", styles: [".st-table{width:100%;overflow:auto;position:relative;height:100%;max-height:30rem;border-radius:4px;border:1px solid #E6E9EB}.st-table st-table-actions{position:sticky;right:0}.st-table.keyboard-navigation-enabled{cursor:pointer}.st-table.keyboard-navigation-enabled:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}.st-table.keyboard-navigation-enabled td.cell-focused{outline:2px solid #4299e1;outline-offset:-1px;position:relative;box-shadow:0 0 0 3px #3182ce1a}.st-table.keyboard-navigation-enabled td.cell-focused:focus{outline:2px solid #4299e1;outline-offset:-1px;box-shadow:0 0 0 3px #3182ce1a}.st-table.keyboard-navigation-enabled td.cell-focused:has(.st-cell.editing){box-shadow:0 0 0 4px #2563eb26}.st-table.virtual-scroll-enabled{overflow-x:visible;margin:0;border:1px solid #E6E9EB;border-collapse:separate;border-spacing:0}.st-table.virtual-scroll-enabled .st-scroll-viewport{position:relative;overflow-y:auto;overflow-x:auto;scroll-behavior:smooth}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-scroll-spacer{position:absolute;top:0;left:0;width:1px;pointer-events:none;z-index:-1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-positioner{position:absolute;top:0;left:0;right:0;will-change:transform}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element{position:relative;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead{background-color:#fff;border-bottom:1px solid #E6E9EB}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead.sticky{position:sticky;top:0;z-index:3;background-color:#fff;will-change:top;backface-visibility:hidden}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead.sticky:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:linear-gradient(to bottom,rgba(0,0,0,.1),transparent)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th{padding:0;vertical-align:middle;position:relative;border:none;background-color:#fff;will-change:top;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left{position:sticky;left:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~th.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~th.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right{position:sticky;right:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.settings-column{width:2rem;text-align:center;font-weight:600;font-size:12px;position:sticky;right:0;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;z-index:4;pointer-events:auto}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:after{content:\"\";position:absolute;top:50%;right:3px;transform:translateY(-50%);width:2px;height:20px;background-color:#cbd5e0;opacity:0;transition:opacity .2s}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:hover:after,.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:active:after{opacity:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.row-number-header{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~th.sticky-left)):after{content:\"\";position:absolute;right:-6px;top:0;bottom:-1px;width:5px;border-left:1px solid var(--borderColor);background:linear-gradient(90deg,#00000014,#0000)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-6px;top:0;bottom:-1px;width:5px;border-right:1px solid var(--borderColor);background:linear-gradient(90deg,#0000,#00000014)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody{will-change:transform;position:relative;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr{border-bottom:1px solid #E6E9EB;transition:background-color .15s;height:2rem;box-sizing:border-box}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr:last-child{border-bottom:none}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td{padding:0;vertical-align:middle;box-sizing:border-box;height:2rem;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb;border:none}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.align-center{text-align:center}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.align-right{text-align:right}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~td.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~td.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column{width:2rem;text-align:center;position:sticky;right:0;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column .settings-trigger{background:none;border:none;font-size:1rem;line-height:1;cursor:pointer;border-radius:4px;transition:all .15s ease}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column .settings-trigger:focus{outline:2px solid #4299e1;outline-offset:2px}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.row-number-cell{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~td.sticky-left)):after{content:\"\";position:absolute;right:-6px;top:0;bottom:-1px;width:5px;border-left:1px solid var(--borderColor);background:linear-gradient(90deg,#00000014,#0000)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right-first:before{content:\"\";position:absolute;left:-6px;top:0;bottom:-1px;width:5px;border-right:1px solid var(--borderColor);background:linear-gradient(90deg,#0000,#00000014)}.st-table:not(.virtual-scroll-enabled) .st-table-element{width:100%;height:100%;overflow:auto;border-collapse:separate;border-spacing:0;table-layout:fixed}.st-table:not(.virtual-scroll-enabled) .st-table-element thead{background-color:#fff;border-bottom:1px solid #E6E9EB}.st-table:not(.virtual-scroll-enabled) .st-table-element thead.sticky{position:sticky;top:0;z-index:3;background-color:#fff;will-change:top;backface-visibility:hidden}.st-table:not(.virtual-scroll-enabled) .st-table-element thead.sticky:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:linear-gradient(to bottom,rgba(0,0,0,.1),transparent)}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th{padding:0;vertical-align:middle;position:relative;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb;border:none}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left{position:sticky;left:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left:not(:has(~th.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left:not(:has(~th.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right{position:sticky;right:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.settings-column{width:2rem;text-align:center;font-weight:600;font-size:12px;position:sticky;right:0;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;z-index:4;pointer-events:auto}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:after{content:\"\";position:absolute;top:50%;right:3px;transform:translateY(-50%);width:2px;height:20px;background-color:#cbd5e0;opacity:0;transition:opacity .2s}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:hover:after,.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:active:after{opacity:1}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.row-number-header{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody{will-change:transform;position:relative;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr{height:2rem;box-sizing:border-box}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr:last-child{border-bottom:none}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td{padding:0;vertical-align:middle;height:2rem;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb;border:none}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.row-number-cell{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.align-center{text-align:center}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.align-right{text-align:right}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left:not(:has(~td.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left:not(:has(~td.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.settings-column{position:sticky;right:0;width:2rem;text-align:center;border-right:none;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.settings-column .settings-trigger{background:none;border:none;font-size:1rem;line-height:1;cursor:pointer;border-radius:4px;transition:all .15s ease}.st-table:not(.virtual-scroll-enabled) .st-table-element .header-content{display:flex;height:2rem;align-items:center}.st-table:not(.virtual-scroll-enabled) .st-table-element .header-content .table-header-text{flex-grow:1;padding-left:4px}.st-table:not(.virtual-scroll-enabled) .st-table-element .settings-column>.header-content{display:flex;align-items:center;justify-content:center}.flex-center{display:flex;align-items:center;justify-content:center}.list-row .list-content{display:flex;justify-content:space-evenly;gap:4px;margin-bottom:1rem}.list-row{padding:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: StPaginationComponent, selector: "st-pagination", inputs: ["tableState", "tableConfig", "position"] }, { kind: "component", type: StHeaderComponent, selector: "st-header", inputs: ["column", "columnIndex", "isFirstColumn", "isLastColumn", "tableState", "enableSorting", "enableFiltering"], outputs: ["sortToggle", "filterChange", "columnMoved", "menuClick"] }, { kind: "component", type: StCellComponent, selector: "st-cell", inputs: ["cell", "editMode", "tableState", "tableConfig", "columnIndex"], outputs: ["cellChange", "cellEdit", "cellSave", "cellCancel", "cellSaveAndNavigate"] }, { kind: "component", type: StTableActionsComponent, selector: "st-table-actions", inputs: ["tableState", "allowAddColumn"], outputs: ["addColumnClicked"] }, { kind: "component", type: StColumnMenuDropdownComponent, selector: "st-column-menu-dropdown", inputs: ["isOpen", "position", "context"], outputs: ["actionClicked", "closed"] }, { kind: "component", type: StRowActionsDropdownComponent, selector: "st-row-actions-dropdown", inputs: ["isOpen", "position", "context"], outputs: ["actionClicked", "closed"] }, { kind: "directive", type: StKeyboardNavigationDirective, selector: "[stKeyboardNavigation]", inputs: ["tableState", "addRowOnNavigatePastEnd"] }, { kind: "directive", type: StColumnResizeDirective, selector: "[stColumnResize]", inputs: ["column"], outputs: ["columnResized", "columnResizing"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: StTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: StTableComponent, isStandalone: true, selector: "st-table", inputs: { tableConfig: { classPropertyName: "tableConfig", publicName: "tableConfig", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, data$: { classPropertyName: "data$", publicName: "data$", isSignal: true, isRequired: false, transformFunction: null }, tableState: { classPropertyName: "tableState", publicName: "tableState", isSignal: true, isRequired: false, transformFunction: null }, enableSorting: { classPropertyName: "enableSorting", publicName: "enableSorting", isSignal: true, isRequired: false, transformFunction: null }, enableFiltering: { classPropertyName: "enableFiltering", publicName: "enableFiltering", isSignal: true, isRequired: false, transformFunction: null }, validateConfig: { classPropertyName: "validateConfig", publicName: "validateConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stateChange: "stateChange", dataChange: "dataChange", cellEdit: "cellEdit", cellSave: "cellSave", cellCancel: "cellCancel", cellChange: "cellChange", columnResized: "columnResized", columnMoved: "columnMoved", configValidationErrors: "configValidationErrors", columnAdded: "columnAdded", rowAction: "rowAction", validationStateChange: "validationStateChange", requestAddRow: "requestAddRow" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "scrollViewport", first: true, predicate: ["scrollViewport"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<!-- Top pagination controls -->\n@if (showTopPagination() && !(mergedConfig()?.tableSkeleton?.enabled | async)) {\n  <st-pagination \n    [tableState]=\"getActiveTableState()\"\n    [tableConfig]=\"mergedConfig()!\"\n    position=\"top\">\n  </st-pagination>\n}\n\n@if (!(mergedConfig()?.tableSkeleton?.enabled | async)) {\n  <div class=\"st-table\"\n    [ngClass]=\"{\n      'virtual-scroll-enabled': isVirtualScrollEnabled(),\n      'keyboard-navigation-enabled': isKeyboardNavigationEnabled()\n    }\"\n    [ngStyle]=\"{\n      'max-height.px': !isVirtualScrollEnabled() ? mergedConfig()?.display?.maxHeight : null\n    }\"\n    stKeyboardNavigation\n    [tableState]=\"getActiveTableState()\"\n    [addRowOnNavigatePastEnd]=\"mergedConfig()?.features?.keyboardNavigation?.addRowOnNavigatePastEnd || false\"\n    [attr.tabindex]=\"isKeyboardNavigationEnabled() ? 0 : -1\"\n    (focus)=\"onTableContainerFocus($event)\"\n    [attr.title]=\"isKeyboardNavigationEnabled() ? 'Click a cell or press Tab to start keyboard navigation' : null\">\n    <!-- Unified Table Actions Menu -->\n\n    <!-- Virtual scroll viewport wrapper -->\n    @if (isVirtualScrollEnabled()) {\n      <div class=\"st-scroll-viewport\" #scrollViewport\n        [ngStyle]=\"{ 'height.px': getVirtualScrollViewportHeight() }\">\n\n        <!-- Spacer to create scrollable area -->\n        <div class=\"st-scroll-spacer\" [ngStyle]=\"{ 'height.px': virtualScrollTotalHeight() }\">\n        </div>\n\n        <!-- Table positioner with transform (instead of tbody) -->\n        <div class=\"st-table-positioner\" [ngStyle]=\"{ transform: 'translateY(' + virtualScrollOffsetY() + 'px)' }\">\n          <!-- Table with only visible rows -->\n          <ng-container *ngTemplateOutlet=\"tableTemplate; context: { \n            mode: 'virtual',\n            theadStyle: { top: virtualScrollOffsetYNeg() + 'px' }\n          }\"></ng-container>\n        </div>\n      </div>\n    }\n    \n    <!-- Standard table (when virtual scroll disabled) -->\n    @if (!isVirtualScrollEnabled()) {\n      <ng-container *ngTemplateOutlet=\"tableTemplate; context: { \n        mode: 'standard',\n        theadStyle: null\n      }\"></ng-container>\n    }\n\n    <!-- Shared Column Menu Dropdown -->\n    <st-column-menu-dropdown \n      [isOpen]=\"columnMenuState().isOpen\"\n      [position]=\"columnMenuState().position\"\n      [context]=\"columnMenuState().context\"\n      (actionClicked)=\"onColumnActionClicked($event)\"\n      (closed)=\"closeColumnMenu()\">\n    </st-column-menu-dropdown>\n  </div>\n}\n\n@if (mergedConfig()?.tableSkeleton?.enabled | async) {\n  <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\n}\n\n<!-- Shared Row Actions Dropdown -->\n<st-row-actions-dropdown [isOpen]=\"dropdownState().isOpen\" [position]=\"dropdownState().position\"\n  [context]=\"dropdownState().context\" (actionClicked)=\"onRowActionClicked($event)\" (closed)=\"closeRowActionsDropdown()\">\n</st-row-actions-dropdown>\n\n\n<!-- Bottom pagination controls -->\n@if (showBottomPagination() && !(mergedConfig()?.tableSkeleton?.enabled | async)) {\n  <st-pagination \n    [tableState]=\"getActiveTableState()\"\n    [tableConfig]=\"mergedConfig()!\"\n    position=\"bottom\">\n</st-pagination>\n}\n\n\n<!-- ========================================== -->\n<!-- REUSABLE TABLE TEMPLATE -->\n<!-- ========================================== -->\n<ng-template #tableTemplate let-mode=\"mode\" let-theadStyle=\"theadStyle\">\n  <table class=\"st-table-element\">\n    <!-- TABLE HEADER -->\n    <thead [ngClass]=\"{ 'sticky': mergedConfig()?.display?.stickyHeader }\" [ngStyle]=\"theadStyle\">\n      <tr>\n        <!-- Row Number Header -->\n        @if (mergedConfig()?.showRowNumber) {\n          <th class=\"row-number-header header-cell sticky-left\"\n              [ngStyle]=\"{\n                position: 'sticky',\n                'left.px': 0,\n                'z-index': ZIndex.STICKY_HEADER_CELL,\n                'width.px': 30\n              }\">\n            #\n          </th>\n        }\n        <!-- Column Headers -->\n        @for (column of visibleColumns(); track column.key; let colIndex = $index, isFirst = $first, isLast = $last) {\n          <th \n            [ngClass]=\"{\n              'header-cell': mode === 'standard',\n              'sticky-left': column.sticky === 'left',\n              'sticky-right': column.sticky === 'right',\n              'sticky-right-first': column.sticky === 'right' && isFirstStickyRight(column.key),\n              'resizable': column.resizable !== false\n            }\"\n            [ngStyle]=\"{\n              position: column.sticky ? 'sticky' : null,\n              'left.px': column.sticky === 'left' ? (column.stickyOffset || 0) : null,\n              'right.px': column.sticky === 'right' ? (column.stickyOffset || 0) : null,\n              'z-index': column.sticky ? ZIndex.STICKY_HEADER_CELL : null,\n              'width.px': column.width\n            }\">\n            \n            <st-header \n              [column]=\"column\"\n              [columnIndex]=\"colIndex\"\n              [isFirstColumn]=\"isFirst\"\n              [isLastColumn]=\"isLast\"\n              [tableState]=\"getActiveTableState()\"\n              [enableSorting]=\"mergedConfig()?.sorting?.enabled ?? enableSorting()\"\n              [enableFiltering]=\"mergedConfig()?.filtering?.enabled ?? enableFiltering()\"\n              (columnMoved)=\"onColumnMoved($event)\"\n              (menuClick)=\"openColumnMenu($event, column, colIndex, isFirst, isLast)\">\n            </st-header>\n\n            @if (column.resizable !== false) {\n              <div \n                class=\"resize-handle\" \n                stColumnResize\n                [column]=\"column\"\n                (columnResizing)=\"onColumnResizing($event)\"\n                (columnResized)=\"onColumnResized($event)\">\n              </div>\n            }\n          </th>\n        }\n        \n        <!-- Settings Column Header -->\n        <th \n          class=\"settings-column sticky-right\"\n          [ngClass]=\"{ 'header-cell': mode === 'standard' }\"\n          [ngStyle]=\"{ 'z-index': ZIndex.STICKY_HEADER_CELL }\">\n          <div [ngClass]=\"{ 'flex-center': mode === 'virtual', 'header-content': mode === 'standard' }\">\n            <st-table-actions \n              [tableState]=\"getActiveTableState()\"\n              [allowAddColumn]=\"mergedConfig()?.features?.columnManagement?.allowAdd || false\"\n              (addColumnClicked)=\"onAddColumnClick()\">\n            </st-table-actions>\n          </div>\n        </th>\n      </tr>\n    </thead>\n\n    <!-- TABLE BODY -->\n    <tbody>\n      <!-- Virtual Scroll Rows -->\n      @if (mode === 'virtual') {\n        @for (row of visibleRows(); track trackByRowIndex($index, row); let relativeIndex = $index) {\n          <tr [attr.data-row-index]=\"getAbsoluteRowIndex(relativeIndex)\">\n            <!-- Row Number Cell -->\n            @if (mergedConfig()?.showRowNumber) {\n              <td class=\"row-number-cell\" \n                [ngClass]=\"{ 'sticky-left': 'left' }\"\n                [ngStyle]=\"{\n                  'width.px': 30,\n                  position: 'sticky',\n                  'left.px': 0,\n                  'z-index': ZIndex.STICKY_BODY_CELL,\n                  'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null\n                }\">\n                {{getAbsoluteRowIndex(relativeIndex) + 1}}\n              </td>\n            }\n            <ng-container *ngTemplateOutlet=\"bodyCellTemplate; context: { \n              row: row,\n              rowIndex: getAbsoluteRowIndex(relativeIndex),\n              mode: 'virtual',\n              relativeIndex: relativeIndex\n            }\"></ng-container>\n          </tr>\n        }\n      }\n\n      <!-- Standard Rows -->\n      @if (mode === 'standard') {\n        @for (row of visibleCellGrid(); track $index; let rowIndex = $index) {\n          <tr [attr.data-row-index]=\"rowIndex\">\n            <!-- Row Number Cell -->\n            @if (mergedConfig()?.showRowNumber) {\n              <td class=\"row-number-cell\" \n                [ngClass]=\"{ 'sticky-left': 'left' }\"\n                [ngStyle]=\"{\n                  'width.px': 30,\n                  position: 'sticky',\n                  'left.px': 0,\n                  'z-index': ZIndex.STICKY_BODY_CELL,\n                  'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null\n                }\">\n                {{rowIndex + 1}}\n              </td>\n            }\n            <ng-container *ngTemplateOutlet=\"bodyCellTemplate; context: { \n              row: row,\n              rowIndex: rowIndex,\n              mode: 'standard'\n            }\"></ng-container>\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</ng-template>\n\n<!-- ========================================== -->\n<!-- REUSABLE BODY CELL TEMPLATE -->\n<!-- ========================================== -->\n<ng-template #bodyCellTemplate let-row=\"row\" let-rowIndex=\"rowIndex\" let-mode=\"mode\" let-relativeIndex=\"relativeIndex\">\n  <!-- Data Cells -->\n  @for (cell of row; track $index; let colIndex = $index) {\n    <td \n      [ngClass]=\"{\n        'sticky-left': visibleColumns()[colIndex]?.sticky === 'left',\n        'sticky-right': visibleColumns()[colIndex]?.sticky === 'right',\n        'sticky-right-first': visibleColumns()[colIndex]?.sticky === 'right' && visibleColumns()[colIndex]?.key && isFirstStickyRight(visibleColumns()[colIndex].key),\n        'align-center': visibleColumns()[colIndex]?.alignment === 'center',\n        'align-right': visibleColumns()[colIndex]?.alignment === 'right',\n        'cell-focused': cell.isFocused()\n      }\"\n      [ngStyle]=\"{\n        position: visibleColumns()[colIndex]?.sticky ? 'sticky' : null,\n        'left.px': visibleColumns()[colIndex]?.sticky === 'left' ? (visibleColumns()[colIndex]?.stickyOffset || 0) : null,\n        'right.px': visibleColumns()[colIndex]?.sticky === 'right' ? (visibleColumns()[colIndex]?.stickyOffset || 0) : null,\n        'z-index': visibleColumns()[colIndex]?.sticky ? ZIndex.STICKY_BODY_CELL : null,\n        'width.px': visibleColumns()[colIndex]?.width,\n        'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null\n      }\"\n      (click)=\"isKeyboardNavigationEnabled() ? onCellClick(rowIndex, colIndex) : null\">\n      \n      <!-- Virtual Scroll Cell -->\n      @if (mode === 'virtual') {\n        <st-cell \n          [cell]=\"cell\" \n          [attr.tabindex]=\"cell.isFocused() ? 0 : -1\" \n          [editMode]=\"getEditModeForCells()\"\n          [tableState]=\"getActiveTableState()\"\n          [tableConfig]=\"mergedConfig()!\"\n          [columnIndex]=\"colIndex\"\n          (cellEdit)=\"onCellEdit($event)\" \n          (cellSave)=\"onCellSave($event)\"\n          (cellSaveAndNavigate)=\"onCellSaveAndNavigate($event)\" \n          (cellCancel)=\"onCellCancel($event)\"\n          (cellChange)=\"cellChange.emit($event)\">\n        </st-cell>\n      }\n\n      <!-- Standard Cell -->\n      @if (mode === 'standard') {\n        <st-cell \n          [cell]=\"cell\"  \n          [attr.tabindex]=\"cell.isFocused() ? 0 : -1\"\n          [tableState]=\"getActiveTableState()\"\n          [tableConfig]=\"mergedConfig()!\"\n          [columnIndex]=\"colIndex\"\n          (cellSave)=\"onCellSave($event)\"\n          (cellChange)=\"cellChange.emit($event)\">\n        </st-cell>\n      }\n    </td>\n  }\n  \n  <!-- Row Actions Cell -->\n  <td class=\"settings-column\"\n    [ngClass]=\"{\n      'has-actions': hasRowActions()\n    }\"\n    [ngStyle]=\"{\n      position: hasRowActions() ? 'sticky' : null,\n      'right.px': hasRowActions() ? 0 : null,\n      'z-index': hasRowActions() ? ZIndex.STICKY_BODY_CELL : null\n    }\">\n    @if (hasRowActions()) {\n      <button \n        class=\"settings-trigger\"\n        (click)=\"openRowActionsDropdown($event, getRowData(rowIndex), rowIndex)\"\n        type=\"button\" \n        aria-label=\"Row actions\">\n        \u22EF\n      </button>\n    }\n  </td>\n</ng-template>\n\n<ng-template #skeletonLoader>\n  @if (mergedConfig()?.tableSkeleton?.enabled | async) {\n    <div class=\"list-row\">\n      @for (i of skeletonColumns; track $index) {\n        <div class=\"list-content\">\n          @for (j of skeletonRows; track $index) {\n            <nile-skeleton-loader variant=\"text\" width=\"90%\" height=\"18\"></nile-skeleton-loader>\n          }\n        </div>\n      }\n    </div>\n  }\n</ng-template>\n", styles: [".st-table{width:100%;overflow:auto;position:relative;height:100%;max-height:30rem;border-radius:4px;border:1px solid #E6E9EB}.st-table st-table-actions{position:sticky;right:0}.st-table.keyboard-navigation-enabled{cursor:pointer}.st-table.keyboard-navigation-enabled:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}.st-table.keyboard-navigation-enabled td.cell-focused{outline:2px solid #4299e1;outline-offset:-1px;position:relative;box-shadow:0 0 0 3px #3182ce1a}.st-table.keyboard-navigation-enabled td.cell-focused:focus{outline:2px solid #4299e1;outline-offset:-1px;box-shadow:0 0 0 3px #3182ce1a}.st-table.keyboard-navigation-enabled td.cell-focused:has(.st-cell.editing){box-shadow:0 0 0 4px #2563eb26}.st-table.virtual-scroll-enabled{overflow-x:visible;margin:0;border:1px solid #E6E9EB;border-collapse:separate;border-spacing:0}.st-table.virtual-scroll-enabled .st-scroll-viewport{position:relative;overflow-y:auto;overflow-x:auto;scroll-behavior:smooth}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-scroll-spacer{position:absolute;top:0;left:0;width:1px;pointer-events:none;z-index:-1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-positioner{position:absolute;top:0;left:0;right:0;will-change:transform}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element{position:relative;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead{background-color:#fff;border-bottom:1px solid #E6E9EB}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead.sticky{position:sticky;top:0;z-index:3;background-color:#fff;will-change:top;backface-visibility:hidden}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead.sticky:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:linear-gradient(to bottom,rgba(0,0,0,.1),transparent)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th{padding:0;vertical-align:middle;position:relative;border:none;background-color:#fff;will-change:top;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left{position:sticky;left:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~th.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~th.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right{position:sticky;right:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.settings-column{width:2rem;text-align:center;font-weight:600;font-size:12px;position:sticky;right:0;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;z-index:4;pointer-events:auto}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:after{content:\"\";position:absolute;top:50%;right:3px;transform:translateY(-50%);width:2px;height:20px;background-color:#cbd5e0;opacity:0;transition:opacity .2s}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:hover:after,.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:active:after{opacity:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.row-number-header{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~th.sticky-left)):after{content:\"\";position:absolute;right:-6px;top:0;bottom:-1px;width:5px;border-left:1px solid var(--borderColor);background:linear-gradient(90deg,#00000014,#0000)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-6px;top:0;bottom:-1px;width:5px;border-right:1px solid var(--borderColor);background:linear-gradient(90deg,#0000,#00000014)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody{will-change:transform;position:relative;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr{border-bottom:1px solid #E6E9EB;transition:background-color .15s;height:2rem;box-sizing:border-box}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr:last-child{border-bottom:none}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td{padding:0;vertical-align:middle;box-sizing:border-box;height:2rem;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb;border:none}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.align-center{text-align:center}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.align-right{text-align:right}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~td.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~td.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column{width:2rem;text-align:center;position:sticky;right:0;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column .settings-trigger{background:none;border:none;font-size:1rem;line-height:1;cursor:pointer;border-radius:4px;transition:all .15s ease}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column .settings-trigger:focus{outline:2px solid #4299e1;outline-offset:2px}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.row-number-cell{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~td.sticky-left)):after{content:\"\";position:absolute;right:-6px;top:0;bottom:-1px;width:5px;border-left:1px solid var(--borderColor);background:linear-gradient(90deg,#00000014,#0000)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right-first:before{content:\"\";position:absolute;left:-6px;top:0;bottom:-1px;width:5px;border-right:1px solid var(--borderColor);background:linear-gradient(90deg,#0000,#00000014)}.st-table:not(.virtual-scroll-enabled) .st-table-element{width:100%;height:100%;overflow:auto;border-collapse:separate;border-spacing:0;table-layout:fixed}.st-table:not(.virtual-scroll-enabled) .st-table-element thead{background-color:#fff;border-bottom:1px solid #E6E9EB}.st-table:not(.virtual-scroll-enabled) .st-table-element thead.sticky{position:sticky;top:0;z-index:3;background-color:#fff;will-change:top;backface-visibility:hidden}.st-table:not(.virtual-scroll-enabled) .st-table-element thead.sticky:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:linear-gradient(to bottom,rgba(0,0,0,.1),transparent)}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th{padding:0;vertical-align:middle;position:relative;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb;border:none}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left{position:sticky;left:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left:not(:has(~th.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left:not(:has(~th.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right{position:sticky;right:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.settings-column{width:2rem;text-align:center;font-weight:600;font-size:12px;position:sticky;right:0;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;z-index:4;pointer-events:auto}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:after{content:\"\";position:absolute;top:50%;right:3px;transform:translateY(-50%);width:2px;height:20px;background-color:#cbd5e0;opacity:0;transition:opacity .2s}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:hover:after,.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:active:after{opacity:1}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.row-number-header{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody{will-change:transform;position:relative;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr{height:2rem;box-sizing:border-box}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr:last-child{border-bottom:none}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td{padding:0;vertical-align:middle;height:2rem;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb;border:none}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.row-number-cell{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.align-center{text-align:center}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.align-right{text-align:right}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left:not(:has(~td.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left:not(:has(~td.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.settings-column{position:sticky;right:0;width:2rem;text-align:center;border-right:none;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.settings-column .settings-trigger{background:none;border:none;font-size:1rem;line-height:1;cursor:pointer;border-radius:4px;transition:all .15s ease}.st-table:not(.virtual-scroll-enabled) .st-table-element .header-content{display:flex;height:2rem;align-items:center}.st-table:not(.virtual-scroll-enabled) .st-table-element .header-content .table-header-text{flex-grow:1;padding-left:4px}.st-table:not(.virtual-scroll-enabled) .st-table-element .settings-column>.header-content{display:flex;align-items:center;justify-content:center}.flex-center{display:flex;align-items:center;justify-content:center}.list-row .list-content{display:flex;justify-content:space-evenly;gap:4px;margin-bottom:1rem}.list-row{padding:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: StPaginationComponent, selector: "st-pagination", inputs: ["tableState", "tableConfig", "position"] }, { kind: "component", type: StHeaderComponent, selector: "st-header", inputs: ["column", "columnIndex", "isFirstColumn", "isLastColumn", "tableState", "enableSorting", "enableFiltering"], outputs: ["sortToggle", "filterChange", "columnMoved", "menuClick"] }, { kind: "component", type: StCellComponent, selector: "st-cell", inputs: ["cell", "editMode", "tableState", "tableConfig", "columnIndex"], outputs: ["cellChange", "cellEdit", "cellSave", "cellCancel", "cellSaveAndNavigate"] }, { kind: "component", type: StTableActionsComponent, selector: "st-table-actions", inputs: ["tableState", "allowAddColumn"], outputs: ["addColumnClicked"] }, { kind: "component", type: StColumnMenuDropdownComponent, selector: "st-column-menu-dropdown", inputs: ["isOpen", "position", "context"], outputs: ["actionClicked", "closed"] }, { kind: "component", type: StRowActionsDropdownComponent, selector: "st-row-actions-dropdown", inputs: ["isOpen", "position", "context"], outputs: ["actionClicked", "closed"] }, { kind: "directive", type: StKeyboardNavigationDirective, selector: "[stKeyboardNavigation]", inputs: ["tableState", "addRowOnNavigatePastEnd"] }, { kind: "directive", type: StColumnResizeDirective, selector: "[stColumnResize]", inputs: ["column"], outputs: ["columnResized", "columnResizing"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: StTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-table', standalone: true, imports: [
                         CommonModule,
@@ -10186,10 +10338,10 @@ class StColumnVisibilityComponent {
         const column = this.tableState.getColumns().find(col => col.key === columnKey);
         return column ? (column.visible !== false) : true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StColumnVisibilityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: StColumnVisibilityComponent, isStandalone: true, selector: "st-column-visibility", inputs: { tableState: "tableState" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"st-column-visibility\" (clickOutside)=\"closeMenu()\">\n  <button class=\"visibility-trigger\" \n          (click)=\"toggleMenu($event)\" \n          title=\"Show/Hide Columns\"\n          type=\"button\"\n          [class.active]=\"isOpen\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M2 2H14V14H2V2Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M5 2V14M8 2V14M11 2V14\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n    </svg>\n  </button>\n  \n  @if (isOpen) {\n    <div class=\"visibility-dropdown\">\n      <div class=\"dropdown-header\">Show/Hide Columns</div>\n      <div class=\"dropdown-content\">\n        @for (column of getColumnsVisibility(); track column.key) {\n          <label class=\"column-item\"\n                 [class.checked]=\"column.visible\"\n                 [class.disabled]=\"column.hideable === false\">\n            <input type=\"checkbox\" \n                   [checked]=\"column.visible\"\n                   [disabled]=\"column.hideable === false\"\n                   [title]=\"column.hideable === false ? 'This column cannot be hidden' : ''\"\n                   (change)=\"onToggleColumn(column.key, $event)\">\n            <span class=\"column-label\">{{ column.header }}</span>\n          </label>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [".st-column-visibility{position:absolute;top:8px;right:8px;z-index:1000;display:inline-block}.st-column-visibility .visibility-trigger{background:#fff;border:1px solid #e2e8f0;border-radius:4px;cursor:pointer;padding:6px 8px;color:#718096;line-height:1;transition:all .2s;box-shadow:0 1px 2px #0000000d}.st-column-visibility .visibility-trigger:hover{background-color:#f7fafc;border-color:#cbd5e0;color:#2d3748}.st-column-visibility .visibility-trigger.active{background-color:#ebf8ff;border-color:#2b6cb0;color:#2b6cb0}.st-column-visibility .visibility-trigger svg{display:block;width:16px;height:16px}.st-column-visibility .visibility-dropdown{position:absolute;top:100%;right:0;background:#fff;border:1px solid #e2e8f0;border-radius:6px;box-shadow:0 4px 6px #0000001a,0 2px 4px #0000000f;z-index:1001;min-width:200px;margin-top:4px;overflow:hidden}.st-column-visibility .visibility-dropdown .dropdown-header{padding:10px 14px;font-weight:600;font-size:13px;color:#2d3748;border-bottom:1px solid #e2e8f0;background-color:#f7fafc}.st-column-visibility .visibility-dropdown .dropdown-content{max-height:10rem;overflow-y:auto;overflow-x:hidden}.st-column-visibility .visibility-dropdown .dropdown-content .column-item{display:flex;align-items:center;padding:10px 14px;cursor:pointer;transition:background-color .2s;-webkit-user-select:none;user-select:none}.st-column-visibility .visibility-dropdown .dropdown-content .column-item:hover{background-color:#f7fafc}.st-column-visibility .visibility-dropdown .dropdown-content .column-item.checked{background-color:#ebf8ff}.st-column-visibility .visibility-dropdown .dropdown-content .column-item.disabled{opacity:.6;cursor:not-allowed}.st-column-visibility .visibility-dropdown .dropdown-content .column-item.disabled:hover{background-color:transparent;cursor:not-allowed}.st-column-visibility .visibility-dropdown .dropdown-content .column-item input[type=checkbox]{margin-right:10px;cursor:pointer;width:16px;height:16px;flex-shrink:0}.st-column-visibility .visibility-dropdown .dropdown-content .column-item input[type=checkbox]:disabled{cursor:not-allowed;opacity:.5}.st-column-visibility .visibility-dropdown .dropdown-content .column-item .column-label{font-size:14px;color:#2d3748;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: StColumnVisibilityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: StColumnVisibilityComponent, isStandalone: true, selector: "st-column-visibility", inputs: { tableState: "tableState" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"st-column-visibility\" (clickOutside)=\"closeMenu()\">\n  <button class=\"visibility-trigger\" \n          (click)=\"toggleMenu($event)\" \n          title=\"Show/Hide Columns\"\n          type=\"button\"\n          [class.active]=\"isOpen\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M2 2H14V14H2V2Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M5 2V14M8 2V14M11 2V14\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n    </svg>\n  </button>\n  \n  @if (isOpen) {\n    <div class=\"visibility-dropdown\">\n      <div class=\"dropdown-header\">Show/Hide Columns</div>\n      <div class=\"dropdown-content\">\n        @for (column of getColumnsVisibility(); track column.key) {\n          <label class=\"column-item\"\n                 [class.checked]=\"column.visible\"\n                 [class.disabled]=\"column.hideable === false\">\n            <input type=\"checkbox\" \n                   [checked]=\"column.visible\"\n                   [disabled]=\"column.hideable === false\"\n                   [title]=\"column.hideable === false ? 'This column cannot be hidden' : ''\"\n                   (change)=\"onToggleColumn(column.key, $event)\">\n            <span class=\"column-label\">{{ column.header }}</span>\n          </label>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [".st-column-visibility{position:absolute;top:8px;right:8px;z-index:1000;display:inline-block}.st-column-visibility .visibility-trigger{background:#fff;border:1px solid #e2e8f0;border-radius:4px;cursor:pointer;padding:6px 8px;color:#718096;line-height:1;transition:all .2s;box-shadow:0 1px 2px #0000000d}.st-column-visibility .visibility-trigger:hover{background-color:#f7fafc;border-color:#cbd5e0;color:#2d3748}.st-column-visibility .visibility-trigger.active{background-color:#ebf8ff;border-color:#2b6cb0;color:#2b6cb0}.st-column-visibility .visibility-trigger svg{display:block;width:16px;height:16px}.st-column-visibility .visibility-dropdown{position:absolute;top:100%;right:0;background:#fff;border:1px solid #e2e8f0;border-radius:6px;box-shadow:0 4px 6px #0000001a,0 2px 4px #0000000f;z-index:1001;min-width:200px;margin-top:4px;overflow:hidden}.st-column-visibility .visibility-dropdown .dropdown-header{padding:10px 14px;font-weight:600;font-size:13px;color:#2d3748;border-bottom:1px solid #e2e8f0;background-color:#f7fafc}.st-column-visibility .visibility-dropdown .dropdown-content{max-height:10rem;overflow-y:auto;overflow-x:hidden}.st-column-visibility .visibility-dropdown .dropdown-content .column-item{display:flex;align-items:center;padding:10px 14px;cursor:pointer;transition:background-color .2s;-webkit-user-select:none;user-select:none}.st-column-visibility .visibility-dropdown .dropdown-content .column-item:hover{background-color:#f7fafc}.st-column-visibility .visibility-dropdown .dropdown-content .column-item.checked{background-color:#ebf8ff}.st-column-visibility .visibility-dropdown .dropdown-content .column-item.disabled{opacity:.6;cursor:not-allowed}.st-column-visibility .visibility-dropdown .dropdown-content .column-item.disabled:hover{background-color:transparent;cursor:not-allowed}.st-column-visibility .visibility-dropdown .dropdown-content .column-item input[type=checkbox]{margin-right:10px;cursor:pointer;width:16px;height:16px;flex-shrink:0}.st-column-visibility .visibility-dropdown .dropdown-content .column-item input[type=checkbox]:disabled{cursor:not-allowed;opacity:.5}.st-column-visibility .visibility-dropdown .dropdown-content .column-item .column-label{font-size:14px;color:#2d3748;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StColumnVisibilityComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: StColumnVisibilityComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-column-visibility', standalone: true, imports: [CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"st-column-visibility\" (clickOutside)=\"closeMenu()\">\n  <button class=\"visibility-trigger\" \n          (click)=\"toggleMenu($event)\" \n          title=\"Show/Hide Columns\"\n          type=\"button\"\n          [class.active]=\"isOpen\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M2 2H14V14H2V2Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M5 2V14M8 2V14M11 2V14\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n    </svg>\n  </button>\n  \n  @if (isOpen) {\n    <div class=\"visibility-dropdown\">\n      <div class=\"dropdown-header\">Show/Hide Columns</div>\n      <div class=\"dropdown-content\">\n        @for (column of getColumnsVisibility(); track column.key) {\n          <label class=\"column-item\"\n                 [class.checked]=\"column.visible\"\n                 [class.disabled]=\"column.hideable === false\">\n            <input type=\"checkbox\" \n                   [checked]=\"column.visible\"\n                   [disabled]=\"column.hideable === false\"\n                   [title]=\"column.hideable === false ? 'This column cannot be hidden' : ''\"\n                   (change)=\"onToggleColumn(column.key, $event)\">\n            <span class=\"column-label\">{{ column.header }}</span>\n          </label>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [".st-column-visibility{position:absolute;top:8px;right:8px;z-index:1000;display:inline-block}.st-column-visibility .visibility-trigger{background:#fff;border:1px solid #e2e8f0;border-radius:4px;cursor:pointer;padding:6px 8px;color:#718096;line-height:1;transition:all .2s;box-shadow:0 1px 2px #0000000d}.st-column-visibility .visibility-trigger:hover{background-color:#f7fafc;border-color:#cbd5e0;color:#2d3748}.st-column-visibility .visibility-trigger.active{background-color:#ebf8ff;border-color:#2b6cb0;color:#2b6cb0}.st-column-visibility .visibility-trigger svg{display:block;width:16px;height:16px}.st-column-visibility .visibility-dropdown{position:absolute;top:100%;right:0;background:#fff;border:1px solid #e2e8f0;border-radius:6px;box-shadow:0 4px 6px #0000001a,0 2px 4px #0000000f;z-index:1001;min-width:200px;margin-top:4px;overflow:hidden}.st-column-visibility .visibility-dropdown .dropdown-header{padding:10px 14px;font-weight:600;font-size:13px;color:#2d3748;border-bottom:1px solid #e2e8f0;background-color:#f7fafc}.st-column-visibility .visibility-dropdown .dropdown-content{max-height:10rem;overflow-y:auto;overflow-x:hidden}.st-column-visibility .visibility-dropdown .dropdown-content .column-item{display:flex;align-items:center;padding:10px 14px;cursor:pointer;transition:background-color .2s;-webkit-user-select:none;user-select:none}.st-column-visibility .visibility-dropdown .dropdown-content .column-item:hover{background-color:#f7fafc}.st-column-visibility .visibility-dropdown .dropdown-content .column-item.checked{background-color:#ebf8ff}.st-column-visibility .visibility-dropdown .dropdown-content .column-item.disabled{opacity:.6;cursor:not-allowed}.st-column-visibility .visibility-dropdown .dropdown-content .column-item.disabled:hover{background-color:transparent;cursor:not-allowed}.st-column-visibility .visibility-dropdown .dropdown-content .column-item input[type=checkbox]{margin-right:10px;cursor:pointer;width:16px;height:16px;flex-shrink:0}.st-column-visibility .visibility-dropdown .dropdown-content .column-item input[type=checkbox]:disabled{cursor:not-allowed;opacity:.5}.st-column-visibility .visibility-dropdown .dropdown-content .column-item .column-label{font-size:14px;color:#2d3748;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
         }], ctorParameters: () => [], propDecorators: { tableState: [{
@@ -10205,10 +10357,10 @@ class StAddColumnButtonComponent {
         event.stopPropagation();
         this.addColumnClicked.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StAddColumnButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: StAddColumnButtonComponent, isStandalone: true, selector: "st-add-column-button", inputs: { enabled: "enabled" }, outputs: { addColumnClicked: "addColumnClicked" }, ngImport: i0, template: "@if (enabled) {\n  <button \n    class=\"st-add-column-button\"\n    (click)=\"onClick($event)\"\n    type=\"button\"\n    title=\"Add Column\"\n    aria-label=\"Add new column\">\n    <svg class=\"st-add-column-icon\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M12 5V19M5 12H19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </button>\n}\n", styles: [".st-add-column-button{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:50%;background-color:#1976d2;color:#fff;border:none;box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:1000}.st-add-column-button:hover{background-color:#1565c0;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;transform:scale(1.05)}.st-add-column-button:active{box-shadow:0 7px 8px -4px #0003,0 12px 17px 2px #00000024,0 5px 22px 4px #0000001f;transform:scale(.98)}.st-add-column-button:focus{outline:none;box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f,0 0 0 3px #1976d24d}.st-add-column-icon{width:24px;height:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: StAddColumnButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: StAddColumnButtonComponent, isStandalone: true, selector: "st-add-column-button", inputs: { enabled: "enabled" }, outputs: { addColumnClicked: "addColumnClicked" }, ngImport: i0, template: "@if (enabled) {\n  <button \n    class=\"st-add-column-button\"\n    (click)=\"onClick($event)\"\n    type=\"button\"\n    title=\"Add Column\"\n    aria-label=\"Add new column\">\n    <svg class=\"st-add-column-icon\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M12 5V19M5 12H19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </button>\n}\n", styles: [".st-add-column-button{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:50%;background-color:#1976d2;color:#fff;border:none;box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:1000}.st-add-column-button:hover{background-color:#1565c0;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;transform:scale(1.05)}.st-add-column-button:active{box-shadow:0 7px 8px -4px #0003,0 12px 17px 2px #00000024,0 5px 22px 4px #0000001f;transform:scale(.98)}.st-add-column-button:focus{outline:none;box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f,0 0 0 3px #1976d24d}.st-add-column-icon{width:24px;height:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StAddColumnButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: StAddColumnButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-add-column-button', standalone: true, imports: [CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@if (enabled) {\n  <button \n    class=\"st-add-column-button\"\n    (click)=\"onClick($event)\"\n    type=\"button\"\n    title=\"Add Column\"\n    aria-label=\"Add new column\">\n    <svg class=\"st-add-column-icon\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M12 5V19M5 12H19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </button>\n}\n", styles: [".st-add-column-button{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:50%;background-color:#1976d2;color:#fff;border:none;box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:1000}.st-add-column-button:hover{background-color:#1565c0;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;transform:scale(1.05)}.st-add-column-button:active{box-shadow:0 7px 8px -4px #0003,0 12px 17px 2px #00000024,0 5px 22px 4px #0000001f;transform:scale(.98)}.st-add-column-button:focus{outline:none;box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f,0 0 0 3px #1976d24d}.st-add-column-icon{width:24px;height:24px}\n"] }]
         }], propDecorators: { enabled: [{
@@ -10401,10 +10553,10 @@ class ColumnEditorComponent {
         const control = this.form.get(controlName);
         return !!(control && control.invalid && (control.dirty || control.touched));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ColumnEditorComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ColumnEditorComponent, isStandalone: true, selector: "st-column-editor", inputs: { column: "column", columnIndex: "columnIndex" }, outputs: { columnUpdated: "columnUpdated", cancel: "cancel" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"column-editor\">\n  <div class=\"editor-header\">\n    <h3>Column Editor</h3>\n    <div class=\"editor-actions\">\n      <button class=\"btn btn-secondary\" (click)=\"onCancel()\">Cancel</button>\n      <button class=\"btn btn-primary\" (click)=\"onSave()\">Save</button>\n    </div>\n  </div>\n\n  <form [formGroup]=\"form\" class=\"editor-form\">\n    <!-- Basic Properties -->\n    <div class=\"form-section\">\n      <h4>Basic Properties</h4>\n      <div class=\"form-group\">\n        <label for=\"key\">Key *</label>\n        <input\n          id=\"key\"\n          type=\"text\"\n          formControlName=\"key\"\n          class=\"form-control\"\n          [class.error]=\"hasError('key')\"\n          placeholder=\"columnKey\">\n        @if (hasError('key')) {\n          <span class=\"error-message\">\n            {{ getErrorMessage('key') }}\n          </span>\n        }\n      </div>\n\n      <div class=\"form-group\">\n        <label for=\"header\">Header</label>\n        <input\n          id=\"header\"\n          type=\"text\"\n          formControlName=\"header\"\n          class=\"form-control\"\n          placeholder=\"Column Header\">\n      </div>\n\n      <div class=\"form-group\">\n        <label for=\"dataType\">Data Type</label>\n        <select id=\"dataType\" formControlName=\"dataType\" class=\"form-control\">\n          @for (type of dataTypes; track type.value) {\n            <option [value]=\"type.value\">\n              {{ type.label }}\n            </option>\n          }\n        </select>\n      </div>\n    </div>\n\n    <!-- Features -->\n    <div class=\"form-section\">\n      <h4>Features</h4>\n      <div class=\"checkbox-group\">\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"editable\">\n          <span>Editable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"sortable\">\n          <span>Sortable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"filterable\">\n          <span>Filterable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"resizable\">\n          <span>Resizable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"hideable\">\n          <span>Hideable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"movable\">\n          <span>Movable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"pinnable\">\n          <span>Pinnable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"enableMenu\">\n          <span>Enable Menu</span>\n        </label>\n      </div>\n    </div>\n\n    <!-- Layout -->\n    <div class=\"form-section\">\n      <h4>Layout</h4>\n      <div class=\"form-row\">\n        <div class=\"form-group\">\n          <label for=\"width\">Width</label>\n          <input\n            id=\"width\"\n            type=\"text\"\n            formControlName=\"width\"\n            class=\"form-control\"\n            placeholder=\"150 or 'auto'\">\n        </div>\n        <div class=\"form-group\">\n          <label for=\"minWidth\">Min Width</label>\n          <input\n            id=\"minWidth\"\n            type=\"number\"\n            formControlName=\"minWidth\"\n            class=\"form-control\"\n            placeholder=\"50\">\n        </div>\n        <div class=\"form-group\">\n          <label for=\"maxWidth\">Max Width</label>\n          <input\n            id=\"maxWidth\"\n            type=\"number\"\n            formControlName=\"maxWidth\"\n            class=\"form-control\"\n            placeholder=\"500\">\n        </div>\n      </div>\n\n      <div class=\"form-row\">\n        <div class=\"form-group\">\n          <label for=\"sticky\">Sticky</label>\n          <select id=\"sticky\" formControlName=\"sticky\" class=\"form-control\">\n            @for (option of stickyOptions; track option.value) {\n              <option [value]=\"option.value\">\n                {{ option.label }}\n              </option>\n            }\n          </select>\n        </div>\n        <div class=\"form-group\">\n          <label for=\"alignment\">Alignment</label>\n          <select id=\"alignment\" formControlName=\"alignment\" class=\"form-control\">\n            @for (align of alignments; track align.value) {\n              <option [value]=\"align.value\">\n                {{ align.label }}\n              </option>\n            }\n          </select>\n        </div>\n        <div class=\"form-group\">\n          <label for=\"verticalAlignment\">Vertical Alignment</label>\n          <select id=\"verticalAlignment\" formControlName=\"verticalAlignment\" class=\"form-control\">\n            @for (align of verticalAlignments; track align.value) {\n              <option [value]=\"align.value\">\n                {{ align.label }}\n              </option>\n            }\n          </select>\n        </div>\n      </div>\n    </div>\n\n    <!-- Edit Mode -->\n    <div class=\"form-section\">\n      <h4>Edit Mode</h4>\n      <div class=\"form-group\">\n        <label for=\"editMode\">Edit Trigger</label>\n        <select id=\"editMode\" formControlName=\"editMode\" class=\"form-control\">\n          @for (mode of editModes; track mode.value) {\n            <option [value]=\"mode.value\">\n              {{ mode.label }}\n            </option>\n          }\n        </select>\n      </div>\n    </div>\n\n    <!-- Display -->\n    <div class=\"form-section\">\n      <h4>Display</h4>\n      <div class=\"checkbox-group\">\n        <label class=\"checkbox-label\" [class.disabled]=\"!form.get('hideable')?.value\">\n          <input type=\"checkbox\" \n                 formControlName=\"visible\"\n                 [disabled]=\"!form.get('hideable')?.value\"\n                 [title]=\"!form.get('hideable')?.value ? 'Column visibility cannot be changed when hideable is disabled' : ''\">\n          <span>Visible</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"truncate\">\n          <span>Truncate Text</span>\n        </label>\n      </div>\n    </div>\n  </form>\n</div>\n", styles: [".column-editor{display:flex;flex-direction:column;height:100%}.editor-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;background-color:#f8f8f8}.editor-header h3{margin:0;font-size:1.125rem;font-weight:600;color:#333}.editor-actions{display:flex;gap:.5rem}.btn{padding:.5rem 1rem;border:1px solid #d0d0d0;border-radius:4px;cursor:pointer;font-size:.875rem;transition:all .2s}.btn.btn-primary{background-color:#2196f3;color:#fff;border-color:#2196f3}.btn.btn-primary:hover{background-color:#1976d2;border-color:#1976d2}.btn.btn-secondary{background-color:#fff;color:#333}.btn.btn-secondary:hover{background-color:#f5f5f5}.editor-form{flex:1;overflow-y:auto;padding:1rem}.form-section{margin-bottom:2rem}.form-section h4{margin:0 0 1rem;font-size:.875rem;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:.5px}.form-group{margin-bottom:1rem}.form-group label{display:block;margin-bottom:.5rem;font-size:.875rem;font-weight:500;color:#333}.form-control{width:100%;padding:.5rem;border:1px solid #d0d0d0;border-radius:4px;font-size:.875rem;transition:border-color .2s}.form-control:focus{outline:none;border-color:#2196f3}.form-control.error{border-color:#f44336}.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}.checkbox-group{display:flex;row-gap:1rem;flex-wrap:wrap;gap:.75rem}.checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.875rem;color:#333}.checkbox-label input[type=checkbox]{width:18px;height:18px;cursor:pointer}.checkbox-label input[type=checkbox]:disabled{cursor:not-allowed;opacity:.5}.checkbox-label.disabled{opacity:.6;cursor:not-allowed}.checkbox-label.disabled span{color:#999}.error-message{display:block;margin-top:.25rem;font-size:.75rem;color:#f44336}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ColumnEditorComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: ColumnEditorComponent, isStandalone: true, selector: "st-column-editor", inputs: { column: "column", columnIndex: "columnIndex" }, outputs: { columnUpdated: "columnUpdated", cancel: "cancel" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"column-editor\">\n  <div class=\"editor-header\">\n    <h3>Column Editor</h3>\n    <div class=\"editor-actions\">\n      <button class=\"btn btn-secondary\" (click)=\"onCancel()\">Cancel</button>\n      <button class=\"btn btn-primary\" (click)=\"onSave()\">Save</button>\n    </div>\n  </div>\n\n  <form [formGroup]=\"form\" class=\"editor-form\">\n    <!-- Basic Properties -->\n    <div class=\"form-section\">\n      <h4>Basic Properties</h4>\n      <div class=\"form-group\">\n        <label for=\"key\">Key *</label>\n        <input\n          id=\"key\"\n          type=\"text\"\n          formControlName=\"key\"\n          class=\"form-control\"\n          [class.error]=\"hasError('key')\"\n          placeholder=\"columnKey\">\n        @if (hasError('key')) {\n          <span class=\"error-message\">\n            {{ getErrorMessage('key') }}\n          </span>\n        }\n      </div>\n\n      <div class=\"form-group\">\n        <label for=\"header\">Header</label>\n        <input\n          id=\"header\"\n          type=\"text\"\n          formControlName=\"header\"\n          class=\"form-control\"\n          placeholder=\"Column Header\">\n      </div>\n\n      <div class=\"form-group\">\n        <label for=\"dataType\">Data Type</label>\n        <select id=\"dataType\" formControlName=\"dataType\" class=\"form-control\">\n          @for (type of dataTypes; track type.value) {\n            <option [value]=\"type.value\">\n              {{ type.label }}\n            </option>\n          }\n        </select>\n      </div>\n    </div>\n\n    <!-- Features -->\n    <div class=\"form-section\">\n      <h4>Features</h4>\n      <div class=\"checkbox-group\">\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"editable\">\n          <span>Editable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"sortable\">\n          <span>Sortable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"filterable\">\n          <span>Filterable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"resizable\">\n          <span>Resizable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"hideable\">\n          <span>Hideable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"movable\">\n          <span>Movable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"pinnable\">\n          <span>Pinnable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"enableMenu\">\n          <span>Enable Menu</span>\n        </label>\n      </div>\n    </div>\n\n    <!-- Layout -->\n    <div class=\"form-section\">\n      <h4>Layout</h4>\n      <div class=\"form-row\">\n        <div class=\"form-group\">\n          <label for=\"width\">Width</label>\n          <input\n            id=\"width\"\n            type=\"text\"\n            formControlName=\"width\"\n            class=\"form-control\"\n            placeholder=\"150 or 'auto'\">\n        </div>\n        <div class=\"form-group\">\n          <label for=\"minWidth\">Min Width</label>\n          <input\n            id=\"minWidth\"\n            type=\"number\"\n            formControlName=\"minWidth\"\n            class=\"form-control\"\n            placeholder=\"50\">\n        </div>\n        <div class=\"form-group\">\n          <label for=\"maxWidth\">Max Width</label>\n          <input\n            id=\"maxWidth\"\n            type=\"number\"\n            formControlName=\"maxWidth\"\n            class=\"form-control\"\n            placeholder=\"500\">\n        </div>\n      </div>\n\n      <div class=\"form-row\">\n        <div class=\"form-group\">\n          <label for=\"sticky\">Sticky</label>\n          <select id=\"sticky\" formControlName=\"sticky\" class=\"form-control\">\n            @for (option of stickyOptions; track option.value) {\n              <option [value]=\"option.value\">\n                {{ option.label }}\n              </option>\n            }\n          </select>\n        </div>\n        <div class=\"form-group\">\n          <label for=\"alignment\">Alignment</label>\n          <select id=\"alignment\" formControlName=\"alignment\" class=\"form-control\">\n            @for (align of alignments; track align.value) {\n              <option [value]=\"align.value\">\n                {{ align.label }}\n              </option>\n            }\n          </select>\n        </div>\n        <div class=\"form-group\">\n          <label for=\"verticalAlignment\">Vertical Alignment</label>\n          <select id=\"verticalAlignment\" formControlName=\"verticalAlignment\" class=\"form-control\">\n            @for (align of verticalAlignments; track align.value) {\n              <option [value]=\"align.value\">\n                {{ align.label }}\n              </option>\n            }\n          </select>\n        </div>\n      </div>\n    </div>\n\n    <!-- Edit Mode -->\n    <div class=\"form-section\">\n      <h4>Edit Mode</h4>\n      <div class=\"form-group\">\n        <label for=\"editMode\">Edit Trigger</label>\n        <select id=\"editMode\" formControlName=\"editMode\" class=\"form-control\">\n          @for (mode of editModes; track mode.value) {\n            <option [value]=\"mode.value\">\n              {{ mode.label }}\n            </option>\n          }\n        </select>\n      </div>\n    </div>\n\n    <!-- Display -->\n    <div class=\"form-section\">\n      <h4>Display</h4>\n      <div class=\"checkbox-group\">\n        <label class=\"checkbox-label\" [class.disabled]=\"!form.get('hideable')?.value\">\n          <input type=\"checkbox\" \n                 formControlName=\"visible\"\n                 [disabled]=\"!form.get('hideable')?.value\"\n                 [title]=\"!form.get('hideable')?.value ? 'Column visibility cannot be changed when hideable is disabled' : ''\">\n          <span>Visible</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"truncate\">\n          <span>Truncate Text</span>\n        </label>\n      </div>\n    </div>\n  </form>\n</div>\n", styles: [".column-editor{display:flex;flex-direction:column;height:100%}.editor-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;background-color:#f8f8f8}.editor-header h3{margin:0;font-size:1.125rem;font-weight:600;color:#333}.editor-actions{display:flex;gap:.5rem}.btn{padding:.5rem 1rem;border:1px solid #d0d0d0;border-radius:4px;cursor:pointer;font-size:.875rem;transition:all .2s}.btn.btn-primary{background-color:#2196f3;color:#fff;border-color:#2196f3}.btn.btn-primary:hover{background-color:#1976d2;border-color:#1976d2}.btn.btn-secondary{background-color:#fff;color:#333}.btn.btn-secondary:hover{background-color:#f5f5f5}.editor-form{flex:1;overflow-y:auto;padding:1rem}.form-section{margin-bottom:2rem}.form-section h4{margin:0 0 1rem;font-size:.875rem;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:.5px}.form-group{margin-bottom:1rem}.form-group label{display:block;margin-bottom:.5rem;font-size:.875rem;font-weight:500;color:#333}.form-control{width:100%;padding:.5rem;border:1px solid #d0d0d0;border-radius:4px;font-size:.875rem;transition:border-color .2s}.form-control:focus{outline:none;border-color:#2196f3}.form-control.error{border-color:#f44336}.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}.checkbox-group{display:flex;row-gap:1rem;flex-wrap:wrap;gap:.75rem}.checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.875rem;color:#333}.checkbox-label input[type=checkbox]{width:18px;height:18px;cursor:pointer}.checkbox-label input[type=checkbox]:disabled{cursor:not-allowed;opacity:.5}.checkbox-label.disabled{opacity:.6;cursor:not-allowed}.checkbox-label.disabled span{color:#999}.error-message{display:block;margin-top:.25rem;font-size:.75rem;color:#f44336}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ColumnEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ColumnEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-column-editor', standalone: true, imports: [CommonModule, ReactiveFormsModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"column-editor\">\n  <div class=\"editor-header\">\n    <h3>Column Editor</h3>\n    <div class=\"editor-actions\">\n      <button class=\"btn btn-secondary\" (click)=\"onCancel()\">Cancel</button>\n      <button class=\"btn btn-primary\" (click)=\"onSave()\">Save</button>\n    </div>\n  </div>\n\n  <form [formGroup]=\"form\" class=\"editor-form\">\n    <!-- Basic Properties -->\n    <div class=\"form-section\">\n      <h4>Basic Properties</h4>\n      <div class=\"form-group\">\n        <label for=\"key\">Key *</label>\n        <input\n          id=\"key\"\n          type=\"text\"\n          formControlName=\"key\"\n          class=\"form-control\"\n          [class.error]=\"hasError('key')\"\n          placeholder=\"columnKey\">\n        @if (hasError('key')) {\n          <span class=\"error-message\">\n            {{ getErrorMessage('key') }}\n          </span>\n        }\n      </div>\n\n      <div class=\"form-group\">\n        <label for=\"header\">Header</label>\n        <input\n          id=\"header\"\n          type=\"text\"\n          formControlName=\"header\"\n          class=\"form-control\"\n          placeholder=\"Column Header\">\n      </div>\n\n      <div class=\"form-group\">\n        <label for=\"dataType\">Data Type</label>\n        <select id=\"dataType\" formControlName=\"dataType\" class=\"form-control\">\n          @for (type of dataTypes; track type.value) {\n            <option [value]=\"type.value\">\n              {{ type.label }}\n            </option>\n          }\n        </select>\n      </div>\n    </div>\n\n    <!-- Features -->\n    <div class=\"form-section\">\n      <h4>Features</h4>\n      <div class=\"checkbox-group\">\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"editable\">\n          <span>Editable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"sortable\">\n          <span>Sortable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"filterable\">\n          <span>Filterable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"resizable\">\n          <span>Resizable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"hideable\">\n          <span>Hideable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"movable\">\n          <span>Movable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"pinnable\">\n          <span>Pinnable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"enableMenu\">\n          <span>Enable Menu</span>\n        </label>\n      </div>\n    </div>\n\n    <!-- Layout -->\n    <div class=\"form-section\">\n      <h4>Layout</h4>\n      <div class=\"form-row\">\n        <div class=\"form-group\">\n          <label for=\"width\">Width</label>\n          <input\n            id=\"width\"\n            type=\"text\"\n            formControlName=\"width\"\n            class=\"form-control\"\n            placeholder=\"150 or 'auto'\">\n        </div>\n        <div class=\"form-group\">\n          <label for=\"minWidth\">Min Width</label>\n          <input\n            id=\"minWidth\"\n            type=\"number\"\n            formControlName=\"minWidth\"\n            class=\"form-control\"\n            placeholder=\"50\">\n        </div>\n        <div class=\"form-group\">\n          <label for=\"maxWidth\">Max Width</label>\n          <input\n            id=\"maxWidth\"\n            type=\"number\"\n            formControlName=\"maxWidth\"\n            class=\"form-control\"\n            placeholder=\"500\">\n        </div>\n      </div>\n\n      <div class=\"form-row\">\n        <div class=\"form-group\">\n          <label for=\"sticky\">Sticky</label>\n          <select id=\"sticky\" formControlName=\"sticky\" class=\"form-control\">\n            @for (option of stickyOptions; track option.value) {\n              <option [value]=\"option.value\">\n                {{ option.label }}\n              </option>\n            }\n          </select>\n        </div>\n        <div class=\"form-group\">\n          <label for=\"alignment\">Alignment</label>\n          <select id=\"alignment\" formControlName=\"alignment\" class=\"form-control\">\n            @for (align of alignments; track align.value) {\n              <option [value]=\"align.value\">\n                {{ align.label }}\n              </option>\n            }\n          </select>\n        </div>\n        <div class=\"form-group\">\n          <label for=\"verticalAlignment\">Vertical Alignment</label>\n          <select id=\"verticalAlignment\" formControlName=\"verticalAlignment\" class=\"form-control\">\n            @for (align of verticalAlignments; track align.value) {\n              <option [value]=\"align.value\">\n                {{ align.label }}\n              </option>\n            }\n          </select>\n        </div>\n      </div>\n    </div>\n\n    <!-- Edit Mode -->\n    <div class=\"form-section\">\n      <h4>Edit Mode</h4>\n      <div class=\"form-group\">\n        <label for=\"editMode\">Edit Trigger</label>\n        <select id=\"editMode\" formControlName=\"editMode\" class=\"form-control\">\n          @for (mode of editModes; track mode.value) {\n            <option [value]=\"mode.value\">\n              {{ mode.label }}\n            </option>\n          }\n        </select>\n      </div>\n    </div>\n\n    <!-- Display -->\n    <div class=\"form-section\">\n      <h4>Display</h4>\n      <div class=\"checkbox-group\">\n        <label class=\"checkbox-label\" [class.disabled]=\"!form.get('hideable')?.value\">\n          <input type=\"checkbox\" \n                 formControlName=\"visible\"\n                 [disabled]=\"!form.get('hideable')?.value\"\n                 [title]=\"!form.get('hideable')?.value ? 'Column visibility cannot be changed when hideable is disabled' : ''\">\n          <span>Visible</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"truncate\">\n          <span>Truncate Text</span>\n        </label>\n      </div>\n    </div>\n  </form>\n</div>\n", styles: [".column-editor{display:flex;flex-direction:column;height:100%}.editor-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;background-color:#f8f8f8}.editor-header h3{margin:0;font-size:1.125rem;font-weight:600;color:#333}.editor-actions{display:flex;gap:.5rem}.btn{padding:.5rem 1rem;border:1px solid #d0d0d0;border-radius:4px;cursor:pointer;font-size:.875rem;transition:all .2s}.btn.btn-primary{background-color:#2196f3;color:#fff;border-color:#2196f3}.btn.btn-primary:hover{background-color:#1976d2;border-color:#1976d2}.btn.btn-secondary{background-color:#fff;color:#333}.btn.btn-secondary:hover{background-color:#f5f5f5}.editor-form{flex:1;overflow-y:auto;padding:1rem}.form-section{margin-bottom:2rem}.form-section h4{margin:0 0 1rem;font-size:.875rem;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:.5px}.form-group{margin-bottom:1rem}.form-group label{display:block;margin-bottom:.5rem;font-size:.875rem;font-weight:500;color:#333}.form-control{width:100%;padding:.5rem;border:1px solid #d0d0d0;border-radius:4px;font-size:.875rem;transition:border-color .2s}.form-control:focus{outline:none;border-color:#2196f3}.form-control.error{border-color:#f44336}.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}.checkbox-group{display:flex;row-gap:1rem;flex-wrap:wrap;gap:.75rem}.checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.875rem;color:#333}.checkbox-label input[type=checkbox]{width:18px;height:18px;cursor:pointer}.checkbox-label input[type=checkbox]:disabled{cursor:not-allowed;opacity:.5}.checkbox-label.disabled{opacity:.6;cursor:not-allowed}.checkbox-label.disabled span{color:#999}.error-message{display:block;margin-top:.25rem;font-size:.75rem;color:#f44336}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.FormBuilder }], propDecorators: { column: [{
@@ -10499,10 +10651,10 @@ class StColumnEditorModalComponent {
     onModalContentClick(event) {
         event.stopPropagation();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StColumnEditorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: StColumnEditorModalComponent, isStandalone: true, selector: "st-column-editor-modal", outputs: { columnCreated: "columnCreated", cancelled: "cancelled" }, viewQueries: [{ propertyName: "columnEditor", first: true, predicate: ColumnEditorComponent, descendants: true }], ngImport: i0, template: "<div class=\"modal-backdrop\" (click)=\"onBackdropClick($event)\">\n  <div class=\"modal-content\" (click)=\"onModalContentClick($event)\">\n    <div class=\"modal-header\">\n      <h2>Add New Column</h2>\n      <button class=\"close-button\" (click)=\"onCancel()\" type=\"button\" aria-label=\"Close\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M18 6L6 18M6 6L18 18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </button>\n    </div>\n    <div class=\"modal-body\">\n      <!-- Now using the shared st-column-editor component from SharedTableComponentsModule -->\n      <st-column-editor\n        [column]=\"newColumn\"\n        [columnIndex]=\"columnIndex\"\n        (columnUpdated)=\"onColumnUpdated($event)\"\n        (cancel)=\"onCancel()\">\n      </st-column-editor>\n    </div>\n    <div class=\"modal-footer\">\n      <button type=\"button\" class=\"btn btn-secondary\" (click)=\"onCancel()\">Cancel</button>\n      <button type=\"button\" class=\"btn btn-primary\" (click)=\"onSave()\">Add Column</button>\n    </div>\n  </div>\n</div>\n", styles: [".modal-backdrop{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .2s ease-in-out}.modal-content{background:#fff;border-radius:8px;box-shadow:0 11px 15px -7px #0003,0 24px 38px 3px #00000024,0 9px 46px 8px #0000001f;max-width:600px;max-height:90vh;width:90%;display:flex;flex-direction:column;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #e0e0e0;flex-shrink:0}.modal-header h2{margin:0;font-size:20px;font-weight:500;color:#212121}.close-button{background:none;border:none;cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:#757575;transition:all .2s ease}.close-button:hover{background-color:#0000000a;color:#212121}.close-button:active{background-color:#00000014}.close-button:focus{outline:none;box-shadow:0 0 0 2px #1976d24d}.close-button svg{width:24px;height:24px}.modal-body{padding:0;overflow-y:auto;flex:1;min-height:0}.modal-body ::ng-deep st-column-editor{display:block}.modal-body ::ng-deep st-column-editor .column-editor{padding:0;border:none;box-shadow:none}.modal-body ::ng-deep st-column-editor .column-editor .editor-header{display:none}.modal-body ::ng-deep st-column-editor .column-editor .editor-actions{display:none}.modal-body ::ng-deep st-column-editor .column-editor .editor-form{padding:24px}.modal-footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid #e0e0e0;flex-shrink:0;background-color:#f5f5f5}.modal-footer .btn{padding:10px 20px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.modal-footer .btn:focus{outline:none;box-shadow:0 0 0 2px #0000001a}.modal-footer .btn.btn-secondary{background-color:#fff;color:#424242;border:1px solid #d0d0d0}.modal-footer .btn.btn-secondary:hover{background-color:#f5f5f5}.modal-footer .btn.btn-secondary:active{background-color:#eee}.modal-footer .btn.btn-primary{background-color:#1976d2;color:#fff}.modal-footer .btn.btn-primary:hover{background-color:#1565c0}.modal-footer .btn.btn-primary:active{background-color:#0d47a1}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ColumnEditorComponent, selector: "st-column-editor", inputs: ["column", "columnIndex"], outputs: ["columnUpdated", "cancel"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: StColumnEditorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", type: StColumnEditorModalComponent, isStandalone: true, selector: "st-column-editor-modal", outputs: { columnCreated: "columnCreated", cancelled: "cancelled" }, viewQueries: [{ propertyName: "columnEditor", first: true, predicate: ColumnEditorComponent, descendants: true }], ngImport: i0, template: "<div class=\"modal-backdrop\" (click)=\"onBackdropClick($event)\">\n  <div class=\"modal-content\" (click)=\"onModalContentClick($event)\">\n    <div class=\"modal-header\">\n      <h2>Add New Column</h2>\n      <button class=\"close-button\" (click)=\"onCancel()\" type=\"button\" aria-label=\"Close\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M18 6L6 18M6 6L18 18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </button>\n    </div>\n    <div class=\"modal-body\">\n      <!-- Now using the shared st-column-editor component from SharedTableComponentsModule -->\n      <st-column-editor\n        [column]=\"newColumn\"\n        [columnIndex]=\"columnIndex\"\n        (columnUpdated)=\"onColumnUpdated($event)\"\n        (cancel)=\"onCancel()\">\n      </st-column-editor>\n    </div>\n    <div class=\"modal-footer\">\n      <button type=\"button\" class=\"btn btn-secondary\" (click)=\"onCancel()\">Cancel</button>\n      <button type=\"button\" class=\"btn btn-primary\" (click)=\"onSave()\">Add Column</button>\n    </div>\n  </div>\n</div>\n", styles: [".modal-backdrop{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .2s ease-in-out}.modal-content{background:#fff;border-radius:8px;box-shadow:0 11px 15px -7px #0003,0 24px 38px 3px #00000024,0 9px 46px 8px #0000001f;max-width:600px;max-height:90vh;width:90%;display:flex;flex-direction:column;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #e0e0e0;flex-shrink:0}.modal-header h2{margin:0;font-size:20px;font-weight:500;color:#212121}.close-button{background:none;border:none;cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:#757575;transition:all .2s ease}.close-button:hover{background-color:#0000000a;color:#212121}.close-button:active{background-color:#00000014}.close-button:focus{outline:none;box-shadow:0 0 0 2px #1976d24d}.close-button svg{width:24px;height:24px}.modal-body{padding:0;overflow-y:auto;flex:1;min-height:0}.modal-body ::ng-deep st-column-editor{display:block}.modal-body ::ng-deep st-column-editor .column-editor{padding:0;border:none;box-shadow:none}.modal-body ::ng-deep st-column-editor .column-editor .editor-header{display:none}.modal-body ::ng-deep st-column-editor .column-editor .editor-actions{display:none}.modal-body ::ng-deep st-column-editor .column-editor .editor-form{padding:24px}.modal-footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid #e0e0e0;flex-shrink:0;background-color:#f5f5f5}.modal-footer .btn{padding:10px 20px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.modal-footer .btn:focus{outline:none;box-shadow:0 0 0 2px #0000001a}.modal-footer .btn.btn-secondary{background-color:#fff;color:#424242;border:1px solid #d0d0d0}.modal-footer .btn.btn-secondary:hover{background-color:#f5f5f5}.modal-footer .btn.btn-secondary:active{background-color:#eee}.modal-footer .btn.btn-primary{background-color:#1976d2;color:#fff}.modal-footer .btn.btn-primary:hover{background-color:#1565c0}.modal-footer .btn.btn-primary:active{background-color:#0d47a1}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ColumnEditorComponent, selector: "st-column-editor", inputs: ["column", "columnIndex"], outputs: ["columnUpdated", "cancel"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StColumnEditorModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: StColumnEditorModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-column-editor-modal', standalone: true, imports: [CommonModule, ColumnEditorComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"modal-backdrop\" (click)=\"onBackdropClick($event)\">\n  <div class=\"modal-content\" (click)=\"onModalContentClick($event)\">\n    <div class=\"modal-header\">\n      <h2>Add New Column</h2>\n      <button class=\"close-button\" (click)=\"onCancel()\" type=\"button\" aria-label=\"Close\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M18 6L6 18M6 6L18 18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </button>\n    </div>\n    <div class=\"modal-body\">\n      <!-- Now using the shared st-column-editor component from SharedTableComponentsModule -->\n      <st-column-editor\n        [column]=\"newColumn\"\n        [columnIndex]=\"columnIndex\"\n        (columnUpdated)=\"onColumnUpdated($event)\"\n        (cancel)=\"onCancel()\">\n      </st-column-editor>\n    </div>\n    <div class=\"modal-footer\">\n      <button type=\"button\" class=\"btn btn-secondary\" (click)=\"onCancel()\">Cancel</button>\n      <button type=\"button\" class=\"btn btn-primary\" (click)=\"onSave()\">Add Column</button>\n    </div>\n  </div>\n</div>\n", styles: [".modal-backdrop{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .2s ease-in-out}.modal-content{background:#fff;border-radius:8px;box-shadow:0 11px 15px -7px #0003,0 24px 38px 3px #00000024,0 9px 46px 8px #0000001f;max-width:600px;max-height:90vh;width:90%;display:flex;flex-direction:column;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #e0e0e0;flex-shrink:0}.modal-header h2{margin:0;font-size:20px;font-weight:500;color:#212121}.close-button{background:none;border:none;cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:#757575;transition:all .2s ease}.close-button:hover{background-color:#0000000a;color:#212121}.close-button:active{background-color:#00000014}.close-button:focus{outline:none;box-shadow:0 0 0 2px #1976d24d}.close-button svg{width:24px;height:24px}.modal-body{padding:0;overflow-y:auto;flex:1;min-height:0}.modal-body ::ng-deep st-column-editor{display:block}.modal-body ::ng-deep st-column-editor .column-editor{padding:0;border:none;box-shadow:none}.modal-body ::ng-deep st-column-editor .column-editor .editor-header{display:none}.modal-body ::ng-deep st-column-editor .column-editor .editor-actions{display:none}.modal-body ::ng-deep st-column-editor .column-editor .editor-form{padding:24px}.modal-footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid #e0e0e0;flex-shrink:0;background-color:#f5f5f5}.modal-footer .btn{padding:10px 20px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.modal-footer .btn:focus{outline:none;box-shadow:0 0 0 2px #0000001a}.modal-footer .btn.btn-secondary{background-color:#fff;color:#424242;border:1px solid #d0d0d0}.modal-footer .btn.btn-secondary:hover{background-color:#f5f5f5}.modal-footer .btn.btn-secondary:active{background-color:#eee}.modal-footer .btn.btn-primary{background-color:#1976d2;color:#fff}.modal-footer .btn.btn-primary:hover{background-color:#1565c0}.modal-footer .btn.btn-primary:active{background-color:#0d47a1}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}\n"] }]
         }], propDecorators: { columnCreated: [{
@@ -10609,10 +10761,10 @@ class StSheetActionsComponent {
             right: `${window.innerWidth - rect.right}px`
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StSheetActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: StSheetActionsComponent, isStandalone: true, selector: "st-sheet-actions", inputs: { actions: "actions", sheetId: "sheetId" }, outputs: { actionClicked: "actionClicked" }, usesOnChanges: true, ngImport: i0, template: "@if (visibleActions.length > 0) {\n  <button \n    class=\"sheet-actions-button\"\n    (click)=\"toggleMenu($event)\"\n    type=\"button\"\n    title=\"Sheet Actions\"\n    aria-label=\"Sheet actions menu\"\n    [class.active]=\"isOpen\">\n    <nile-icon name=\"arrowdown\" size=\"14\"></nile-icon>\n  </button>\n}\n\n<!-- Dropdown container -->\n@if (isOpen) {\n  <div class=\"dropdown-container\">\n    <!-- Backdrop -->\n    <div class=\"dropdown-backdrop\" (click)=\"closeMenu()\"></div>\n    \n    <!-- Dropdown menu -->\n    <div class=\"dropdown-menu\" [ngStyle]=\"dropdownStyle\">\n      <nile-menu>\n        @for (action of visibleActions; track action.id) {\n          <nile-menu-item \n            [class.disabled]=\"isActionDisabled(action)\"\n            (click)=\"onActionClick(action, $event)\">\n            @if (action.icon) {\n              <nile-icon size=\"14\" slot=\"prefix\" [name]=\"action.icon\"></nile-icon>\n            }\n            {{ action.label }}\n          </nile-menu-item>\n        }\n        \n        @if (visibleActions.length === 0) {\n          <nile-menu-item>\n            No actions available\n          </nile-menu-item>\n        }\n      </nile-menu>\n    </div>\n  </div>\n}\n", styles: [":host{display:inline-block}.sheet-actions-button{display:flex;align-items:center;justify-content:center;width:2rem;padding:0;background:transparent;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s ease;color:var(--nile-color-neutral-600)}.sheet-actions-button nile-icon{font-size:16px}.dropdown-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;pointer-events:none}.dropdown-container>*{pointer-events:auto}.dropdown-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:transparent;z-index:1000}.dropdown-menu{position:absolute;min-width:200px;background:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;z-index:1001;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: StSheetActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: StSheetActionsComponent, isStandalone: true, selector: "st-sheet-actions", inputs: { actions: "actions", sheetId: "sheetId" }, outputs: { actionClicked: "actionClicked" }, usesOnChanges: true, ngImport: i0, template: "@if (visibleActions.length > 0) {\n  <button \n    class=\"sheet-actions-button\"\n    (click)=\"toggleMenu($event)\"\n    type=\"button\"\n    title=\"Sheet Actions\"\n    aria-label=\"Sheet actions menu\"\n    [class.active]=\"isOpen\">\n    <nile-icon name=\"arrowdown\" size=\"14\"></nile-icon>\n  </button>\n}\n\n<!-- Dropdown container -->\n@if (isOpen) {\n  <div class=\"dropdown-container\">\n    <!-- Backdrop -->\n    <div class=\"dropdown-backdrop\" (click)=\"closeMenu()\"></div>\n    \n    <!-- Dropdown menu -->\n    <div class=\"dropdown-menu\" [ngStyle]=\"dropdownStyle\">\n      <nile-menu>\n        @for (action of visibleActions; track action.id) {\n          <nile-menu-item \n            [class.disabled]=\"isActionDisabled(action)\"\n            (click)=\"onActionClick(action, $event)\">\n            @if (action.icon) {\n              <nile-icon size=\"14\" slot=\"prefix\" [name]=\"action.icon\"></nile-icon>\n            }\n            {{ action.label }}\n          </nile-menu-item>\n        }\n        \n        @if (visibleActions.length === 0) {\n          <nile-menu-item>\n            No actions available\n          </nile-menu-item>\n        }\n      </nile-menu>\n    </div>\n  </div>\n}\n", styles: [":host{display:inline-block}.sheet-actions-button{display:flex;align-items:center;justify-content:center;width:2rem;padding:0;background:transparent;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s ease;color:var(--nile-color-neutral-600)}.sheet-actions-button nile-icon{font-size:16px}.dropdown-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;pointer-events:none}.dropdown-container>*{pointer-events:auto}.dropdown-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:transparent;z-index:1000}.dropdown-menu{position:absolute;min-width:200px;background:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;z-index:1001;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StSheetActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: StSheetActionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-sheet-actions', standalone: true, imports: [CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@if (visibleActions.length > 0) {\n  <button \n    class=\"sheet-actions-button\"\n    (click)=\"toggleMenu($event)\"\n    type=\"button\"\n    title=\"Sheet Actions\"\n    aria-label=\"Sheet actions menu\"\n    [class.active]=\"isOpen\">\n    <nile-icon name=\"arrowdown\" size=\"14\"></nile-icon>\n  </button>\n}\n\n<!-- Dropdown container -->\n@if (isOpen) {\n  <div class=\"dropdown-container\">\n    <!-- Backdrop -->\n    <div class=\"dropdown-backdrop\" (click)=\"closeMenu()\"></div>\n    \n    <!-- Dropdown menu -->\n    <div class=\"dropdown-menu\" [ngStyle]=\"dropdownStyle\">\n      <nile-menu>\n        @for (action of visibleActions; track action.id) {\n          <nile-menu-item \n            [class.disabled]=\"isActionDisabled(action)\"\n            (click)=\"onActionClick(action, $event)\">\n            @if (action.icon) {\n              <nile-icon size=\"14\" slot=\"prefix\" [name]=\"action.icon\"></nile-icon>\n            }\n            {{ action.label }}\n          </nile-menu-item>\n        }\n        \n        @if (visibleActions.length === 0) {\n          <nile-menu-item>\n            No actions available\n          </nile-menu-item>\n        }\n      </nile-menu>\n    </div>\n  </div>\n}\n", styles: [":host{display:inline-block}.sheet-actions-button{display:flex;align-items:center;justify-content:center;width:2rem;padding:0;background:transparent;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s ease;color:var(--nile-color-neutral-600)}.sheet-actions-button nile-icon{font-size:16px}.dropdown-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;pointer-events:none}.dropdown-container>*{pointer-events:auto}.dropdown-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:transparent;z-index:1000}.dropdown-menu{position:absolute;min-width:200px;background:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;z-index:1001;overflow:hidden}\n"] }]
         }], ctorParameters: () => [], propDecorators: { actions: [{
@@ -10756,10 +10908,10 @@ class StSheetComponent {
     get headerVariant() {
         return this.config?.display?.headerVariant || 'default';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: StSheetComponent, isStandalone: true, selector: "st-sheet", inputs: { config: "config", data: "data", data$: "data$", state: "state" }, outputs: { sheetActionClicked: "sheetActionClicked", stateChange: "stateChange", cellChange: "cellChange", tableStateChange: "tableStateChange", dataChange: "dataChange" }, usesOnChanges: true, ngImport: i0, template: "<nile-tab-group>\n  <nile-tab slot=\"nav\" panel=\"general\" [class.active]=\"activeTab === '1'\" (click)=\"activeTab = '1'\">\n    <div class=\"sheet-header\">\n      {{activeState?.name$ | async | titlecase}}\n      @if (visibleActions.length > 0) {\n        <st-sheet-actions \n          [actions]=\"visibleActions\" \n          [sheetId]=\"config.id\"\n          (actionClicked)=\"onActionClick($event)\">\n        </st-sheet-actions>\n      }\n    </div>\n  </nile-tab>\n  <nile-tab-panel name=\"general\">\n    @if (config && activeState) {\n      <st-table \n        [tableConfig]=\"config.tableConfig\"\n        [data]=\"data\"\n        [data$]=\"data$\"\n        [tableState]=\"activeState.tableState\"\n        (cellChange)=\"onCellChange($event)\"\n        (stateChange)=\"onTableStateChange($event)\"\n        (dataChange)=\"onDataChange($event)\">\n      </st-table>\n    }\n  </nile-tab-panel>\n</nile-tab-group>\n", styles: [":host{display:block;width:100%;height:100%}.sheet-container{display:flex;flex-direction:column;width:100%;height:100%}.sheet-header{display:flex;align-items:center;font-family:Colfax;color:#000}.sheet-table-wrapper{flex:1;overflow:auto;position:relative}nile-tab-group::part(nav){background-color:#fafafa}nile-tab-group::part(active-tab-indicator-path){background:none}nile-tab-group::part(active-tab-indicator){border-bottom:none}nile-tab-group::part(tabs){gap:0}nile-tab-group nile-tab{border:1px solid #e0e0e0;border-top-left-radius:6px;border-top-right-radius:6px}nile-tab-group nile-tab::part(base){padding-left:.5rem;padding-top:.5rem;padding-bottom:.5rem;border-bottom-left-radius:0;border-bottom-right-radius:0}nile-tab-group nile-tab.active{background-color:#fff}nile-tab-group nile-tab-panel::part(base){padding:0;max-height:30rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: StTableComponent, selector: "st-table", inputs: ["tableConfig", "data", "data$", "tableState", "enableSorting", "enableFiltering", "validateConfig"], outputs: ["stateChange", "dataChange", "cellEdit", "cellSave", "cellCancel", "cellChange", "columnResized", "columnMoved", "configValidationErrors", "columnAdded", "rowAction", "validationStateChange", "requestAddRow"] }, { kind: "component", type: StSheetActionsComponent, selector: "st-sheet-actions", inputs: ["actions", "sheetId"], outputs: ["actionClicked"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: StSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: StSheetComponent, isStandalone: true, selector: "st-sheet", inputs: { config: "config", data: "data", data$: "data$", state: "state" }, outputs: { sheetActionClicked: "sheetActionClicked", stateChange: "stateChange", cellChange: "cellChange", tableStateChange: "tableStateChange", dataChange: "dataChange" }, usesOnChanges: true, ngImport: i0, template: "<nile-tab-group>\n  <nile-tab slot=\"nav\" panel=\"general\" [class.active]=\"activeTab === '1'\" (click)=\"activeTab = '1'\">\n    <div class=\"sheet-header\">\n      {{activeState?.name$ | async | titlecase}}\n      @if (visibleActions.length > 0) {\n        <st-sheet-actions \n          [actions]=\"visibleActions\" \n          [sheetId]=\"config.id\"\n          (actionClicked)=\"onActionClick($event)\">\n        </st-sheet-actions>\n      }\n    </div>\n  </nile-tab>\n  <nile-tab-panel name=\"general\">\n    @if (config && activeState) {\n      <st-table \n        [tableConfig]=\"config.tableConfig\"\n        [data]=\"data\"\n        [data$]=\"data$\"\n        [tableState]=\"activeState.tableState\"\n        (cellChange)=\"onCellChange($event)\"\n        (stateChange)=\"onTableStateChange($event)\"\n        (dataChange)=\"onDataChange($event)\">\n      </st-table>\n    }\n  </nile-tab-panel>\n</nile-tab-group>\n", styles: [":host{display:block;width:100%;height:100%}.sheet-container{display:flex;flex-direction:column;width:100%;height:100%}.sheet-header{display:flex;align-items:center;font-family:Colfax;color:#000}.sheet-table-wrapper{flex:1;overflow:auto;position:relative}nile-tab-group::part(nav){background-color:#fafafa}nile-tab-group::part(active-tab-indicator-path){background:none}nile-tab-group::part(active-tab-indicator){border-bottom:none}nile-tab-group::part(tabs){gap:0}nile-tab-group nile-tab{border:1px solid #e0e0e0;border-top-left-radius:6px;border-top-right-radius:6px}nile-tab-group nile-tab::part(base){padding-left:.5rem;padding-top:.5rem;padding-bottom:.5rem;border-bottom-left-radius:0;border-bottom-right-radius:0}nile-tab-group nile-tab.active{background-color:#fff}nile-tab-group nile-tab-panel::part(base){padding:0;max-height:30rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: StTableComponent, selector: "st-table", inputs: ["tableConfig", "data", "data$", "tableState", "enableSorting", "enableFiltering", "validateConfig"], outputs: ["stateChange", "dataChange", "cellEdit", "cellSave", "cellCancel", "cellChange", "columnResized", "columnMoved", "configValidationErrors", "columnAdded", "rowAction", "validationStateChange", "requestAddRow"] }, { kind: "component", type: StSheetActionsComponent, selector: "st-sheet-actions", inputs: ["actions", "sheetId"], outputs: ["actionClicked"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StSheetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: StSheetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-sheet', standalone: true, imports: [CommonModule, StTableComponent, StSheetActionsComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<nile-tab-group>\n  <nile-tab slot=\"nav\" panel=\"general\" [class.active]=\"activeTab === '1'\" (click)=\"activeTab = '1'\">\n    <div class=\"sheet-header\">\n      {{activeState?.name$ | async | titlecase}}\n      @if (visibleActions.length > 0) {\n        <st-sheet-actions \n          [actions]=\"visibleActions\" \n          [sheetId]=\"config.id\"\n          (actionClicked)=\"onActionClick($event)\">\n        </st-sheet-actions>\n      }\n    </div>\n  </nile-tab>\n  <nile-tab-panel name=\"general\">\n    @if (config && activeState) {\n      <st-table \n        [tableConfig]=\"config.tableConfig\"\n        [data]=\"data\"\n        [data$]=\"data$\"\n        [tableState]=\"activeState.tableState\"\n        (cellChange)=\"onCellChange($event)\"\n        (stateChange)=\"onTableStateChange($event)\"\n        (dataChange)=\"onDataChange($event)\">\n      </st-table>\n    }\n  </nile-tab-panel>\n</nile-tab-group>\n", styles: [":host{display:block;width:100%;height:100%}.sheet-container{display:flex;flex-direction:column;width:100%;height:100%}.sheet-header{display:flex;align-items:center;font-family:Colfax;color:#000}.sheet-table-wrapper{flex:1;overflow:auto;position:relative}nile-tab-group::part(nav){background-color:#fafafa}nile-tab-group::part(active-tab-indicator-path){background:none}nile-tab-group::part(active-tab-indicator){border-bottom:none}nile-tab-group::part(tabs){gap:0}nile-tab-group nile-tab{border:1px solid #e0e0e0;border-top-left-radius:6px;border-top-right-radius:6px}nile-tab-group nile-tab::part(base){padding-left:.5rem;padding-top:.5rem;padding-bottom:.5rem;border-bottom-left-radius:0;border-bottom-right-radius:0}nile-tab-group nile-tab.active{background-color:#fff}nile-tab-group nile-tab-panel::part(base){padding:0;max-height:30rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{
@@ -10870,10 +11022,10 @@ class AutosaveService {
         this.dirtyState.clear();
         this.lastSaveTime.clear();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AutosaveService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AutosaveService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: AutosaveService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: AutosaveService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AutosaveService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: AutosaveService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -11247,10 +11399,10 @@ class StWorkbookComponent {
             this.tableComponent.scrollToLastRow(focusFirstCell);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StWorkbookComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: StWorkbookComponent, isStandalone: true, selector: "st-workbook", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, sheetsData: { classPropertyName: "sheetsData", publicName: "sheetsData", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sheetChanged: "sheetChanged", addSheet: "addSheet", sheetTabAction: "sheetTabAction", workbookAction: "workbookAction", cellChange: "cellChange", cellSave: "cellSave", tableStateChange: "tableStateChange", fullscreenToggle: "fullscreenToggle", requestAddRow: "requestAddRow" }, viewQueries: [{ propertyName: "tableComponent", first: true, predicate: StTableComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"workbook-container\" [class.fullscreen]=\"isFullscreen()\">\n  <nile-tab-group [activeIndex]=\"activeSheetIndex()\">\n    \n    <!-- Sheet Tabs (one per sheet) -->\n    @for (sheet of sheets(); track sheet.id; let i = $index) {\n      <nile-tab slot=\"nav\" \n                panel=\"shared-panel\"\n                [class.active]=\"i === activeSheetIndex()\"\n                (click)=\"onTabChange(i)\">\n        <div class=\"sheet-tab-content\">\n          <span class=\"sheet-name\">{{ sheet.name }}</span>\n          \n          <!-- Tab actions dropdown button -->\n          @if (hasTabActions(sheet)) {\n            <button class=\"tab-actions-button\"\n                    (click)=\"openTabActions($event, sheet, i)\">\n              <nile-icon name=\"arrowdown\" size=\"14\"></nile-icon>\n            </button>\n          }\n        </div>\n      </nile-tab>\n    }\n    \n    <!-- Toolbar Tab (for workbook controls) -->\n    <nile-tab slot=\"nav\" \n              panel=\"shared-panel\"\n              class=\"workbook-toolbar-tab\"\n              [disabled]=\"true\">\n      <div class=\"workbook-toolbar-content\">\n        <!-- Autosave Indicator -->\n        @if (autosaveEnabled()) {\n          <div class=\"autosave-indicator\">\n            @if (!isSaving() && lastSaveTime()) {\n              <nile-icon \n                name=\"save\" \n                size=\"14\"\n                [title]=\"'Saved at ' + (lastSaveTime() | date:'HH:mm:ss')\">\n              </nile-icon>\n            }\n            @if (isSaving()) {\n              <nile-icon \n                name=\"loader\" \n                size=\"14\"\n                title=\"Saving...\">\n              </nile-icon>\n            }\n          </div>\n        }\n\n        <!-- Toolbar Workbook Actions (shown as individual buttons) -->\n        @for (action of toolbarWorkbookActions(); track action.id) {\n          <button class=\"toolbar-action-button\"\n                  [class.disabled]=\"isActionDisabled(action)\"\n                  [title]=\"action.label\"\n                  (click)=\"onWorkbookActionClick(action, $event)\">\n            @if (action.icon) {\n              <nile-icon [name]=\"action.icon\"></nile-icon>\n            }\n            @if (!action.icon) {\n              <span>{{ action.label }}</span>\n            }\n          </button>\n        }\n\n        <!-- Workbook Actions Dropdown -->\n        @if (visibleWorkbookActions().length > 0) {\n          <button class=\"workbook-actions-button\"\n                  (click)=\"toggleWorkbookActions($event)\"\n                  title=\"Workbook Actions\">\n            <nile-icon name=\"settings\"></nile-icon>\n          </button>\n        }\n        \n        <!-- Add Sheet Button -->\n        @if (canAddSheet) {\n          <button class=\"add-sheet-button\"\n                  (click)=\"onAddSheet()\"\n                  title=\"Add Sheet\">\n            <nile-icon name=\"plus\"></nile-icon>\n          </button>\n        }\n        \n        <!-- Fullscreen Button -->\n        @if (config().display?.allowFullscreen !== false) {\n          <button class=\"fullscreen-button\"\n                  (click)=\"toggleFullscreen()\"\n                  [title]=\"isFullscreen() ? 'Exit Fullscreen' : 'Fullscreen'\">\n            <nile-icon [name]=\"isFullscreen() ? 'collapse' : 'expand-06'\"></nile-icon>\n          </button>\n        }\n      </div>\n    </nile-tab>\n    \n    <!-- Single Shared Tab Panel -->\n    <nile-tab-panel name=\"shared-panel\">\n      <!-- Lazy loading strategy: table is destroyed and recreated with new config/state when sheet changes -->\n      <!-- Using @for with track to force complete reinitialization when tableComponentKey changes -->\n      @for (key of [tableComponentKey()]; track key) {\n        @if (currentTableConfig() && currentTableState()) {\n          <st-table \n            [attr.data-sheet-key]=\"key\"\n            [tableConfig]=\"currentTableConfig()!\"\n            [data$]=\"currentTableData$\"\n            [tableState]=\"currentTableState()!\"\n            (cellChange)=\"onCellChange($event)\"\n            (cellSave)=\"onCellSave($event)\"\n            (stateChange)=\"onTableStateChange($event)\"\n            (requestAddRow)=\"onRequestAddRow($event)\">\n          </st-table>\n        }\n      }\n    </nile-tab-panel>\n    \n  </nile-tab-group>\n</div>\n\n<!-- Tab Actions Dropdown -->\n@if (tabActionsOpen()) {\n  <div class=\"tab-actions-dropdown\" [ngStyle]=\"tabActionsPosition()\">\n    <div class=\"dropdown-backdrop\" (click)=\"closeTabActions()\"></div>\n    <div class=\"dropdown-menu\">\n      <nile-menu>\n        @for (action of selectedSheet()?.tabActions; track action.id) {\n          <nile-menu-item (click)=\"onTabActionClick(action, $event)\">\n            @if (action.icon) {\n              <nile-icon slot=\"prefix\" size=\"14\" [name]=\"action.icon\"></nile-icon>\n            }\n            {{ action.label }}\n          </nile-menu-item>\n        }\n      </nile-menu>\n    </div>\n  </div>\n}\n\n<!-- Workbook Actions Dropdown -->\n@if (workbookActionsOpen()) {\n  <div class=\"workbook-actions-dropdown\" [ngStyle]=\"workbookActionsPosition()\">\n    <div class=\"dropdown-backdrop\" (click)=\"closeWorkbookActions()\"></div>\n    <div class=\"dropdown-menu\">\n      <nile-menu>\n        @for (action of visibleWorkbookActions(); track action.id) {\n          <nile-menu-item [class.disabled]=\"isActionDisabled(action)\"\n                          (click)=\"onWorkbookActionClick(action, $event)\">\n            @if (action.icon) {\n              <nile-icon slot=\"prefix\" size=\"14\" [name]=\"action.icon\"></nile-icon>\n            }\n            {{ action.label }}\n          </nile-menu-item>\n        }\n      </nile-menu>\n    </div>\n  </div>\n}\n\n<!-- Fullscreen Backdrop -->\n@if (isFullscreen()) {\n  <div class=\"fullscreen-backdrop\" (click)=\"toggleFullscreen()\">\n  </div>\n}\n", styles: [":host{display:block;width:100%;height:100%}.workbook-container{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--nile-color-neutral-200);border-radius:4px;overflow:hidden}.workbook-container.fullscreen{position:fixed;inset:0;z-index:2000;border:none;border-radius:0}.workbook-container nile-tab-group{height:100%;display:flex;flex-direction:column}.sheet-tab-content{display:flex;align-items:center;gap:8px;padding:0 4px}.sheet-tab-content .sheet-name{font-size:12px;font-weight:500;font-family:var(--nile-font-family-sans-serif);color:#000}.sheet-tab-content .tab-actions-button{width:20px;height:20px;padding:0;background:transparent;border:none;cursor:pointer}.workbook-toolbar-tab{margin-left:auto!important;pointer-events:auto!important;border-left:1px solid var(--nile-color-neutral-200)}.workbook-toolbar-tab .workbook-toolbar-content{display:flex;gap:4px;align-items:center;padding:0 8px}.workbook-toolbar-tab .workbook-toolbar-content .autosave-indicator{display:flex;align-items:center;margin-right:8px;color:var(--nile-color-success-500)}.workbook-toolbar-tab button{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;background:transparent;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s;color:var(--nile-color-neutral-600)}.workbook-toolbar-tab button:hover{background-color:var(--nile-color-neutral-100);color:var(--nile-color-neutral-900)}.workbook-toolbar-tab button:active{background-color:var(--nile-color-neutral-200)}.workbook-toolbar-tab button nile-icon{font-size:16px}.workbook-toolbar-tab button.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.tab-actions-dropdown{position:fixed;z-index:1001}.tab-actions-dropdown .dropdown-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:transparent;z-index:1000}.tab-actions-dropdown .dropdown-menu{position:relative;min-width:180px;background:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;z-index:1001;overflow:hidden}.tab-actions-dropdown .dropdown-menu nile-menu{display:block}.workbook-actions-dropdown{position:fixed;z-index:1001}.workbook-actions-dropdown .dropdown-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:transparent;z-index:1000}.workbook-actions-dropdown .dropdown-menu{position:relative;min-width:200px;background:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;z-index:1001;overflow:hidden}.workbook-actions-dropdown .dropdown-menu nile-menu{display:block}.fullscreen-backdrop{position:fixed;inset:0;background:#00000080;z-index:1999;cursor:pointer}nile-tab-group::part(nav){background-color:#fafafa}nile-tab-group::part(active-tab-indicator-path){background:none}nile-tab-group::part(active-tab-indicator){border-bottom:none}nile-tab-group::part(tabs){gap:0}nile-tab-group nile-tab{border:1px solid #e0e0e0;border-top-left-radius:6px;border-top-right-radius:6px}nile-tab-group nile-tab::part(base){padding-left:.5rem;padding-top:.5rem;padding-bottom:.5rem;border-bottom-left-radius:0;border-bottom-right-radius:0}nile-tab-group nile-tab.active{background-color:#fff;color:#000}nile-tab-group nile-tab.active .sheet-name{font-weight:600}nile-tab-group nile-tab-panel::part(base){padding:0;max-height:30rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: StTableComponent, selector: "st-table", inputs: ["tableConfig", "data", "data$", "tableState", "enableSorting", "enableFiltering", "validateConfig"], outputs: ["stateChange", "dataChange", "cellEdit", "cellSave", "cellCancel", "cellChange", "columnResized", "columnMoved", "configValidationErrors", "columnAdded", "rowAction", "validationStateChange", "requestAddRow"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: StWorkbookComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: StWorkbookComponent, isStandalone: true, selector: "st-workbook", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, sheetsData: { classPropertyName: "sheetsData", publicName: "sheetsData", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sheetChanged: "sheetChanged", addSheet: "addSheet", sheetTabAction: "sheetTabAction", workbookAction: "workbookAction", cellChange: "cellChange", cellSave: "cellSave", tableStateChange: "tableStateChange", fullscreenToggle: "fullscreenToggle", requestAddRow: "requestAddRow" }, viewQueries: [{ propertyName: "tableComponent", first: true, predicate: StTableComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"workbook-container\" [class.fullscreen]=\"isFullscreen()\">\n  <nile-tab-group [activeIndex]=\"activeSheetIndex()\">\n    \n    <!-- Sheet Tabs (one per sheet) -->\n    @for (sheet of sheets(); track sheet.id; let i = $index) {\n      <nile-tab slot=\"nav\" \n                panel=\"shared-panel\"\n                [class.active]=\"i === activeSheetIndex()\"\n                (click)=\"onTabChange(i)\">\n        <div class=\"sheet-tab-content\">\n          <span class=\"sheet-name\">{{ sheet.name }}</span>\n          \n          <!-- Tab actions dropdown button -->\n          @if (hasTabActions(sheet)) {\n            <button class=\"tab-actions-button\"\n                    (click)=\"openTabActions($event, sheet, i)\">\n              <nile-icon name=\"arrowdown\" size=\"14\"></nile-icon>\n            </button>\n          }\n        </div>\n      </nile-tab>\n    }\n    \n    <!-- Toolbar Tab (for workbook controls) -->\n    <nile-tab slot=\"nav\" \n              panel=\"shared-panel\"\n              class=\"workbook-toolbar-tab\"\n              [disabled]=\"true\">\n      <div class=\"workbook-toolbar-content\">\n        <!-- Autosave Indicator -->\n        @if (autosaveEnabled()) {\n          <div class=\"autosave-indicator\">\n            @if (!isSaving() && lastSaveTime()) {\n              <nile-icon \n                name=\"save\" \n                size=\"14\"\n                [title]=\"'Saved at ' + (lastSaveTime() | date:'HH:mm:ss')\">\n              </nile-icon>\n            }\n            @if (isSaving()) {\n              <nile-icon \n                name=\"loader\" \n                size=\"14\"\n                title=\"Saving...\">\n              </nile-icon>\n            }\n          </div>\n        }\n\n        <!-- Toolbar Workbook Actions (shown as individual buttons) -->\n        @for (action of toolbarWorkbookActions(); track action.id) {\n          <button class=\"toolbar-action-button\"\n                  [class.disabled]=\"isActionDisabled(action)\"\n                  [title]=\"action.label\"\n                  (click)=\"onWorkbookActionClick(action, $event)\">\n            @if (action.icon) {\n              <nile-icon [name]=\"action.icon\"></nile-icon>\n            }\n            @if (!action.icon) {\n              <span>{{ action.label }}</span>\n            }\n          </button>\n        }\n\n        <!-- Workbook Actions Dropdown -->\n        @if (visibleWorkbookActions().length > 0) {\n          <button class=\"workbook-actions-button\"\n                  (click)=\"toggleWorkbookActions($event)\"\n                  title=\"Workbook Actions\">\n            <nile-icon name=\"settings\"></nile-icon>\n          </button>\n        }\n        \n        <!-- Add Sheet Button -->\n        @if (canAddSheet) {\n          <button class=\"add-sheet-button\"\n                  (click)=\"onAddSheet()\"\n                  title=\"Add Sheet\">\n            <nile-icon name=\"plus\"></nile-icon>\n          </button>\n        }\n        \n        <!-- Fullscreen Button -->\n        @if (config().display?.allowFullscreen !== false) {\n          <button class=\"fullscreen-button\"\n                  (click)=\"toggleFullscreen()\"\n                  [title]=\"isFullscreen() ? 'Exit Fullscreen' : 'Fullscreen'\">\n            <nile-icon [name]=\"isFullscreen() ? 'collapse' : 'expand-06'\"></nile-icon>\n          </button>\n        }\n      </div>\n    </nile-tab>\n    \n    <!-- Single Shared Tab Panel -->\n    <nile-tab-panel name=\"shared-panel\">\n      <!-- Lazy loading strategy: table is destroyed and recreated with new config/state when sheet changes -->\n      <!-- Using @for with track to force complete reinitialization when tableComponentKey changes -->\n      @for (key of [tableComponentKey()]; track key) {\n        @if (currentTableConfig() && currentTableState()) {\n          <st-table \n            [attr.data-sheet-key]=\"key\"\n            [tableConfig]=\"currentTableConfig()!\"\n            [data$]=\"currentTableData$\"\n            [tableState]=\"currentTableState()!\"\n            (cellChange)=\"onCellChange($event)\"\n            (cellSave)=\"onCellSave($event)\"\n            (stateChange)=\"onTableStateChange($event)\"\n            (requestAddRow)=\"onRequestAddRow($event)\">\n          </st-table>\n        }\n      }\n    </nile-tab-panel>\n    \n  </nile-tab-group>\n</div>\n\n<!-- Tab Actions Dropdown -->\n@if (tabActionsOpen()) {\n  <div class=\"tab-actions-dropdown\" [ngStyle]=\"tabActionsPosition()\">\n    <div class=\"dropdown-backdrop\" (click)=\"closeTabActions()\"></div>\n    <div class=\"dropdown-menu\">\n      <nile-menu>\n        @for (action of selectedSheet()?.tabActions; track action.id) {\n          <nile-menu-item (click)=\"onTabActionClick(action, $event)\">\n            @if (action.icon) {\n              <nile-icon slot=\"prefix\" size=\"14\" [name]=\"action.icon\"></nile-icon>\n            }\n            {{ action.label }}\n          </nile-menu-item>\n        }\n      </nile-menu>\n    </div>\n  </div>\n}\n\n<!-- Workbook Actions Dropdown -->\n@if (workbookActionsOpen()) {\n  <div class=\"workbook-actions-dropdown\" [ngStyle]=\"workbookActionsPosition()\">\n    <div class=\"dropdown-backdrop\" (click)=\"closeWorkbookActions()\"></div>\n    <div class=\"dropdown-menu\">\n      <nile-menu>\n        @for (action of visibleWorkbookActions(); track action.id) {\n          <nile-menu-item [class.disabled]=\"isActionDisabled(action)\"\n                          (click)=\"onWorkbookActionClick(action, $event)\">\n            @if (action.icon) {\n              <nile-icon slot=\"prefix\" size=\"14\" [name]=\"action.icon\"></nile-icon>\n            }\n            {{ action.label }}\n          </nile-menu-item>\n        }\n      </nile-menu>\n    </div>\n  </div>\n}\n\n<!-- Fullscreen Backdrop -->\n@if (isFullscreen()) {\n  <div class=\"fullscreen-backdrop\" (click)=\"toggleFullscreen()\">\n  </div>\n}\n", styles: [":host{display:block;width:100%;height:100%}.workbook-container{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--nile-color-neutral-200);border-radius:4px;overflow:hidden}.workbook-container.fullscreen{position:fixed;inset:0;z-index:2000;border:none;border-radius:0}.workbook-container nile-tab-group{height:100%;display:flex;flex-direction:column}.sheet-tab-content{display:flex;align-items:center;gap:8px;padding:0 4px}.sheet-tab-content .sheet-name{font-size:12px;font-weight:500;font-family:var(--nile-font-family-sans-serif);color:#000}.sheet-tab-content .tab-actions-button{width:20px;height:20px;padding:0;background:transparent;border:none;cursor:pointer}.workbook-toolbar-tab{margin-left:auto!important;pointer-events:auto!important;border-left:1px solid var(--nile-color-neutral-200)}.workbook-toolbar-tab .workbook-toolbar-content{display:flex;gap:4px;align-items:center;padding:0 8px}.workbook-toolbar-tab .workbook-toolbar-content .autosave-indicator{display:flex;align-items:center;margin-right:8px;color:var(--nile-color-success-500)}.workbook-toolbar-tab button{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;background:transparent;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s;color:var(--nile-color-neutral-600)}.workbook-toolbar-tab button:hover{background-color:var(--nile-color-neutral-100);color:var(--nile-color-neutral-900)}.workbook-toolbar-tab button:active{background-color:var(--nile-color-neutral-200)}.workbook-toolbar-tab button nile-icon{font-size:16px}.workbook-toolbar-tab button.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.tab-actions-dropdown{position:fixed;z-index:1001}.tab-actions-dropdown .dropdown-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:transparent;z-index:1000}.tab-actions-dropdown .dropdown-menu{position:relative;min-width:180px;background:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;z-index:1001;overflow:hidden}.tab-actions-dropdown .dropdown-menu nile-menu{display:block}.workbook-actions-dropdown{position:fixed;z-index:1001}.workbook-actions-dropdown .dropdown-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:transparent;z-index:1000}.workbook-actions-dropdown .dropdown-menu{position:relative;min-width:200px;background:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;z-index:1001;overflow:hidden}.workbook-actions-dropdown .dropdown-menu nile-menu{display:block}.fullscreen-backdrop{position:fixed;inset:0;background:#00000080;z-index:1999;cursor:pointer}nile-tab-group::part(nav){background-color:#fafafa}nile-tab-group::part(active-tab-indicator-path){background:none}nile-tab-group::part(active-tab-indicator){border-bottom:none}nile-tab-group::part(tabs){gap:0}nile-tab-group nile-tab{border:1px solid #e0e0e0;border-top-left-radius:6px;border-top-right-radius:6px}nile-tab-group nile-tab::part(base){padding-left:.5rem;padding-top:.5rem;padding-bottom:.5rem;border-bottom-left-radius:0;border-bottom-right-radius:0}nile-tab-group nile-tab.active{background-color:#fff;color:#000}nile-tab-group nile-tab.active .sheet-name{font-weight:600}nile-tab-group nile-tab-panel::part(base){padding:0;max-height:30rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: StTableComponent, selector: "st-table", inputs: ["tableConfig", "data", "data$", "tableState", "enableSorting", "enableFiltering", "validateConfig"], outputs: ["stateChange", "dataChange", "cellEdit", "cellSave", "cellCancel", "cellChange", "columnResized", "columnMoved", "configValidationErrors", "columnAdded", "rowAction", "validationStateChange", "requestAddRow"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StWorkbookComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: StWorkbookComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-workbook', standalone: true, imports: [CommonModule, StTableComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"workbook-container\" [class.fullscreen]=\"isFullscreen()\">\n  <nile-tab-group [activeIndex]=\"activeSheetIndex()\">\n    \n    <!-- Sheet Tabs (one per sheet) -->\n    @for (sheet of sheets(); track sheet.id; let i = $index) {\n      <nile-tab slot=\"nav\" \n                panel=\"shared-panel\"\n                [class.active]=\"i === activeSheetIndex()\"\n                (click)=\"onTabChange(i)\">\n        <div class=\"sheet-tab-content\">\n          <span class=\"sheet-name\">{{ sheet.name }}</span>\n          \n          <!-- Tab actions dropdown button -->\n          @if (hasTabActions(sheet)) {\n            <button class=\"tab-actions-button\"\n                    (click)=\"openTabActions($event, sheet, i)\">\n              <nile-icon name=\"arrowdown\" size=\"14\"></nile-icon>\n            </button>\n          }\n        </div>\n      </nile-tab>\n    }\n    \n    <!-- Toolbar Tab (for workbook controls) -->\n    <nile-tab slot=\"nav\" \n              panel=\"shared-panel\"\n              class=\"workbook-toolbar-tab\"\n              [disabled]=\"true\">\n      <div class=\"workbook-toolbar-content\">\n        <!-- Autosave Indicator -->\n        @if (autosaveEnabled()) {\n          <div class=\"autosave-indicator\">\n            @if (!isSaving() && lastSaveTime()) {\n              <nile-icon \n                name=\"save\" \n                size=\"14\"\n                [title]=\"'Saved at ' + (lastSaveTime() | date:'HH:mm:ss')\">\n              </nile-icon>\n            }\n            @if (isSaving()) {\n              <nile-icon \n                name=\"loader\" \n                size=\"14\"\n                title=\"Saving...\">\n              </nile-icon>\n            }\n          </div>\n        }\n\n        <!-- Toolbar Workbook Actions (shown as individual buttons) -->\n        @for (action of toolbarWorkbookActions(); track action.id) {\n          <button class=\"toolbar-action-button\"\n                  [class.disabled]=\"isActionDisabled(action)\"\n                  [title]=\"action.label\"\n                  (click)=\"onWorkbookActionClick(action, $event)\">\n            @if (action.icon) {\n              <nile-icon [name]=\"action.icon\"></nile-icon>\n            }\n            @if (!action.icon) {\n              <span>{{ action.label }}</span>\n            }\n          </button>\n        }\n\n        <!-- Workbook Actions Dropdown -->\n        @if (visibleWorkbookActions().length > 0) {\n          <button class=\"workbook-actions-button\"\n                  (click)=\"toggleWorkbookActions($event)\"\n                  title=\"Workbook Actions\">\n            <nile-icon name=\"settings\"></nile-icon>\n          </button>\n        }\n        \n        <!-- Add Sheet Button -->\n        @if (canAddSheet) {\n          <button class=\"add-sheet-button\"\n                  (click)=\"onAddSheet()\"\n                  title=\"Add Sheet\">\n            <nile-icon name=\"plus\"></nile-icon>\n          </button>\n        }\n        \n        <!-- Fullscreen Button -->\n        @if (config().display?.allowFullscreen !== false) {\n          <button class=\"fullscreen-button\"\n                  (click)=\"toggleFullscreen()\"\n                  [title]=\"isFullscreen() ? 'Exit Fullscreen' : 'Fullscreen'\">\n            <nile-icon [name]=\"isFullscreen() ? 'collapse' : 'expand-06'\"></nile-icon>\n          </button>\n        }\n      </div>\n    </nile-tab>\n    \n    <!-- Single Shared Tab Panel -->\n    <nile-tab-panel name=\"shared-panel\">\n      <!-- Lazy loading strategy: table is destroyed and recreated with new config/state when sheet changes -->\n      <!-- Using @for with track to force complete reinitialization when tableComponentKey changes -->\n      @for (key of [tableComponentKey()]; track key) {\n        @if (currentTableConfig() && currentTableState()) {\n          <st-table \n            [attr.data-sheet-key]=\"key\"\n            [tableConfig]=\"currentTableConfig()!\"\n            [data$]=\"currentTableData$\"\n            [tableState]=\"currentTableState()!\"\n            (cellChange)=\"onCellChange($event)\"\n            (cellSave)=\"onCellSave($event)\"\n            (stateChange)=\"onTableStateChange($event)\"\n            (requestAddRow)=\"onRequestAddRow($event)\">\n          </st-table>\n        }\n      }\n    </nile-tab-panel>\n    \n  </nile-tab-group>\n</div>\n\n<!-- Tab Actions Dropdown -->\n@if (tabActionsOpen()) {\n  <div class=\"tab-actions-dropdown\" [ngStyle]=\"tabActionsPosition()\">\n    <div class=\"dropdown-backdrop\" (click)=\"closeTabActions()\"></div>\n    <div class=\"dropdown-menu\">\n      <nile-menu>\n        @for (action of selectedSheet()?.tabActions; track action.id) {\n          <nile-menu-item (click)=\"onTabActionClick(action, $event)\">\n            @if (action.icon) {\n              <nile-icon slot=\"prefix\" size=\"14\" [name]=\"action.icon\"></nile-icon>\n            }\n            {{ action.label }}\n          </nile-menu-item>\n        }\n      </nile-menu>\n    </div>\n  </div>\n}\n\n<!-- Workbook Actions Dropdown -->\n@if (workbookActionsOpen()) {\n  <div class=\"workbook-actions-dropdown\" [ngStyle]=\"workbookActionsPosition()\">\n    <div class=\"dropdown-backdrop\" (click)=\"closeWorkbookActions()\"></div>\n    <div class=\"dropdown-menu\">\n      <nile-menu>\n        @for (action of visibleWorkbookActions(); track action.id) {\n          <nile-menu-item [class.disabled]=\"isActionDisabled(action)\"\n                          (click)=\"onWorkbookActionClick(action, $event)\">\n            @if (action.icon) {\n              <nile-icon slot=\"prefix\" size=\"14\" [name]=\"action.icon\"></nile-icon>\n            }\n            {{ action.label }}\n          </nile-menu-item>\n        }\n      </nile-menu>\n    </div>\n  </div>\n}\n\n<!-- Fullscreen Backdrop -->\n@if (isFullscreen()) {\n  <div class=\"fullscreen-backdrop\" (click)=\"toggleFullscreen()\">\n  </div>\n}\n", styles: [":host{display:block;width:100%;height:100%}.workbook-container{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--nile-color-neutral-200);border-radius:4px;overflow:hidden}.workbook-container.fullscreen{position:fixed;inset:0;z-index:2000;border:none;border-radius:0}.workbook-container nile-tab-group{height:100%;display:flex;flex-direction:column}.sheet-tab-content{display:flex;align-items:center;gap:8px;padding:0 4px}.sheet-tab-content .sheet-name{font-size:12px;font-weight:500;font-family:var(--nile-font-family-sans-serif);color:#000}.sheet-tab-content .tab-actions-button{width:20px;height:20px;padding:0;background:transparent;border:none;cursor:pointer}.workbook-toolbar-tab{margin-left:auto!important;pointer-events:auto!important;border-left:1px solid var(--nile-color-neutral-200)}.workbook-toolbar-tab .workbook-toolbar-content{display:flex;gap:4px;align-items:center;padding:0 8px}.workbook-toolbar-tab .workbook-toolbar-content .autosave-indicator{display:flex;align-items:center;margin-right:8px;color:var(--nile-color-success-500)}.workbook-toolbar-tab button{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;background:transparent;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s;color:var(--nile-color-neutral-600)}.workbook-toolbar-tab button:hover{background-color:var(--nile-color-neutral-100);color:var(--nile-color-neutral-900)}.workbook-toolbar-tab button:active{background-color:var(--nile-color-neutral-200)}.workbook-toolbar-tab button nile-icon{font-size:16px}.workbook-toolbar-tab button.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.tab-actions-dropdown{position:fixed;z-index:1001}.tab-actions-dropdown .dropdown-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:transparent;z-index:1000}.tab-actions-dropdown .dropdown-menu{position:relative;min-width:180px;background:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;z-index:1001;overflow:hidden}.tab-actions-dropdown .dropdown-menu nile-menu{display:block}.workbook-actions-dropdown{position:fixed;z-index:1001}.workbook-actions-dropdown .dropdown-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:transparent;z-index:1000}.workbook-actions-dropdown .dropdown-menu{position:relative;min-width:200px;background:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;z-index:1001;overflow:hidden}.workbook-actions-dropdown .dropdown-menu nile-menu{display:block}.fullscreen-backdrop{position:fixed;inset:0;background:#00000080;z-index:1999;cursor:pointer}nile-tab-group::part(nav){background-color:#fafafa}nile-tab-group::part(active-tab-indicator-path){background:none}nile-tab-group::part(active-tab-indicator){border-bottom:none}nile-tab-group::part(tabs){gap:0}nile-tab-group nile-tab{border:1px solid #e0e0e0;border-top-left-radius:6px;border-top-right-radius:6px}nile-tab-group nile-tab::part(base){padding-left:.5rem;padding-top:.5rem;padding-bottom:.5rem;border-bottom-left-radius:0;border-bottom-right-radius:0}nile-tab-group nile-tab.active{background-color:#fff;color:#000}nile-tab-group nile-tab.active .sheet-name{font-weight:600}nile-tab-group nile-tab-panel::part(base){padding:0;max-height:30rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], sheetsData: [{ type: i0.Input, args: [{ isSignal: true, alias: "sheetsData", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], sheetChanged: [{ type: i0.Output, args: ["sheetChanged"] }], addSheet: [{ type: i0.Output, args: ["addSheet"] }], sheetTabAction: [{ type: i0.Output, args: ["sheetTabAction"] }], workbookAction: [{ type: i0.Output, args: ["workbookAction"] }], cellChange: [{ type: i0.Output, args: ["cellChange"] }], cellSave: [{ type: i0.Output, args: ["cellSave"] }], tableStateChange: [{ type: i0.Output, args: ["tableStateChange"] }], fullscreenToggle: [{ type: i0.Output, args: ["fullscreenToggle"] }], requestAddRow: [{ type: i0.Output, args: ["requestAddRow"] }], tableComponent: [{
@@ -11271,10 +11423,10 @@ class ClickOutsideDirective {
             this.clickOutside.emit();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: ClickOutsideDirective, isStandalone: true, selector: "[clickOutside]", outputs: { clickOutside: "clickOutside" }, host: { listeners: { "document:click": "onClick($event.target)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: ClickOutsideDirective, isStandalone: true, selector: "[clickOutside]", outputs: { clickOutside: "clickOutside" }, host: { listeners: { "document:click": "onClick($event.target)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ClickOutsideDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ClickOutsideDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clickOutside]',
@@ -11293,11 +11445,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * This module breaks the circular dependency between the two modules
  */
 class SharedTableComponentsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SharedTableComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: SharedTableComponentsModule, imports: [ColumnEditorComponent], exports: [ColumnEditorComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SharedTableComponentsModule, imports: [ColumnEditorComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SharedTableComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.6", ngImport: i0, type: SharedTableComponentsModule, imports: [ColumnEditorComponent], exports: [ColumnEditorComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SharedTableComponentsModule, imports: [ColumnEditorComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SharedTableComponentsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SharedTableComponentsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -11310,8 +11462,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
         }] });
 
 class SmartTableModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SmartTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: SmartTableModule, imports: [SharedTableComponentsModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SmartTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.6", ngImport: i0, type: SmartTableModule, imports: [SharedTableComponentsModule,
             StCellComponent,
             StTableComponent,
             StHeaderComponent,
@@ -11345,7 +11497,7 @@ class SmartTableModule {
             ClickOutsideDirective,
             StColumnResizeDirective,
             StKeyboardNavigationDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SmartTableModule, providers: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SmartTableModule, providers: [
             VirtualScrollService
         ], imports: [SharedTableComponentsModule,
             StCellComponent,
@@ -11363,7 +11515,7 @@ class SmartTableModule {
             StSheetActionsComponent,
             StWorkbookComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SmartTableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SmartTableModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -11647,10 +11799,10 @@ class DefinitionBuilderService {
         // Simple comparison - in production, use a deep equality library
         return JSON.stringify(config1) === JSON.stringify(config2);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DefinitionBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DefinitionBuilderService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: DefinitionBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: DefinitionBuilderService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DefinitionBuilderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: DefinitionBuilderService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -12016,10 +12168,10 @@ class DefinitionExportService {
         document.body.removeChild(link);
         URL.revokeObjectURL(url);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DefinitionExportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DefinitionExportService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: DefinitionExportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: DefinitionExportService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DefinitionExportService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: DefinitionExportService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -12368,10 +12520,10 @@ class DefinitionImportService {
             return errorResult;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DefinitionImportService, deps: [{ token: JsonSchemaValidatorService }, { token: ValidationLoggerService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DefinitionImportService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: DefinitionImportService, deps: [{ token: JsonSchemaValidatorService }, { token: ValidationLoggerService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: DefinitionImportService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DefinitionImportService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: DefinitionImportService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -12471,10 +12623,10 @@ class BuilderToolbarComponent {
     onTogglePreview() {
         this.previewToggled.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BuilderToolbarComponent, deps: [{ token: DefinitionBuilderService }, { token: DefinitionExportService }, { token: DefinitionImportService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: BuilderToolbarComponent, isStandalone: true, selector: "st-builder-toolbar", inputs: { hasUnsavedChanges: "hasUnsavedChanges" }, outputs: { newDefinition: "newDefinition", saved: "saved", previewToggled: "previewToggled" }, ngImport: i0, template: "<div class=\"builder-toolbar\">\n  <div class=\"toolbar-section\">\n    <button class=\"toolbar-btn\" (click)=\"onNewDefinition()\" title=\"New Definition\">\n      <span>New</span>\n    </button>\n    <button class=\"toolbar-btn\" (click)=\"onOpenFile()\" title=\"Open File\">\n      <span>Open</span>\n    </button>\n    <button class=\"toolbar-btn\" (click)=\"onSave()\" title=\"Save to LocalStorage\" [class.has-changes]=\"hasUnsavedChanges\">\n      <span>Save</span>\n      @if (hasUnsavedChanges) {\n        <span class=\"unsaved-indicator\">\u25CF</span>\n      }\n    </button>\n    <button class=\"toolbar-btn\" (click)=\"onLoad()\" title=\"Load from LocalStorage\">\n      <span>Load</span>\n    </button>\n  </div>\n\n  <div class=\"toolbar-section\">\n    <button class=\"toolbar-btn\" (click)=\"onImportJSON()\" title=\"Import JSON\">\n      <span>Import JSON</span>\n    </button>\n    <button class=\"toolbar-btn\" (click)=\"onExportJSON()\" title=\"Export JSON\">\n      <span>Export JSON</span>\n    </button>\n    <button class=\"toolbar-btn\" (click)=\"onExportTypeScript()\" title=\"Export TypeScript\">\n      <span>Export TS</span>\n    </button>\n  </div>\n\n  <div class=\"toolbar-section\">\n    <button class=\"toolbar-btn\" (click)=\"onTogglePreview()\" title=\"Toggle Preview\">\n      <span>Preview</span>\n    </button>\n  </div>\n</div>\n", styles: [".builder-toolbar{display:flex;align-items:center;gap:1rem;padding:.75rem 1rem;background-color:#fff;border-bottom:1px solid #e0e0e0;box-shadow:0 2px 4px #0000000d}.toolbar-section{display:flex;align-items:center;gap:.5rem}.toolbar-section:not(:last-child):after{content:\"\";width:1px;height:24px;background-color:#e0e0e0;margin-left:.5rem}.toolbar-btn{display:flex;align-items:center;gap:.25rem;padding:.5rem 1rem;border:1px solid #d0d0d0;border-radius:4px;background-color:#fff;color:#333;cursor:pointer;font-size:.875rem;transition:all .2s}.toolbar-btn:hover{background-color:#f5f5f5;border-color:#b0b0b0}.toolbar-btn:active{background-color:#e8e8e8}.toolbar-btn.has-changes{border-color:#ff9800;background-color:#fff3e0}.toolbar-btn .unsaved-indicator{color:#ff9800;font-size:.75rem;margin-left:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: BuilderToolbarComponent, deps: [{ token: DefinitionBuilderService }, { token: DefinitionExportService }, { token: DefinitionImportService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: BuilderToolbarComponent, isStandalone: true, selector: "st-builder-toolbar", inputs: { hasUnsavedChanges: "hasUnsavedChanges" }, outputs: { newDefinition: "newDefinition", saved: "saved", previewToggled: "previewToggled" }, ngImport: i0, template: "<div class=\"builder-toolbar\">\n  <div class=\"toolbar-section\">\n    <button class=\"toolbar-btn\" (click)=\"onNewDefinition()\" title=\"New Definition\">\n      <span>New</span>\n    </button>\n    <button class=\"toolbar-btn\" (click)=\"onOpenFile()\" title=\"Open File\">\n      <span>Open</span>\n    </button>\n    <button class=\"toolbar-btn\" (click)=\"onSave()\" title=\"Save to LocalStorage\" [class.has-changes]=\"hasUnsavedChanges\">\n      <span>Save</span>\n      @if (hasUnsavedChanges) {\n        <span class=\"unsaved-indicator\">\u25CF</span>\n      }\n    </button>\n    <button class=\"toolbar-btn\" (click)=\"onLoad()\" title=\"Load from LocalStorage\">\n      <span>Load</span>\n    </button>\n  </div>\n\n  <div class=\"toolbar-section\">\n    <button class=\"toolbar-btn\" (click)=\"onImportJSON()\" title=\"Import JSON\">\n      <span>Import JSON</span>\n    </button>\n    <button class=\"toolbar-btn\" (click)=\"onExportJSON()\" title=\"Export JSON\">\n      <span>Export JSON</span>\n    </button>\n    <button class=\"toolbar-btn\" (click)=\"onExportTypeScript()\" title=\"Export TypeScript\">\n      <span>Export TS</span>\n    </button>\n  </div>\n\n  <div class=\"toolbar-section\">\n    <button class=\"toolbar-btn\" (click)=\"onTogglePreview()\" title=\"Toggle Preview\">\n      <span>Preview</span>\n    </button>\n  </div>\n</div>\n", styles: [".builder-toolbar{display:flex;align-items:center;gap:1rem;padding:.75rem 1rem;background-color:#fff;border-bottom:1px solid #e0e0e0;box-shadow:0 2px 4px #0000000d}.toolbar-section{display:flex;align-items:center;gap:.5rem}.toolbar-section:not(:last-child):after{content:\"\";width:1px;height:24px;background-color:#e0e0e0;margin-left:.5rem}.toolbar-btn{display:flex;align-items:center;gap:.25rem;padding:.5rem 1rem;border:1px solid #d0d0d0;border-radius:4px;background-color:#fff;color:#333;cursor:pointer;font-size:.875rem;transition:all .2s}.toolbar-btn:hover{background-color:#f5f5f5;border-color:#b0b0b0}.toolbar-btn:active{background-color:#e8e8e8}.toolbar-btn.has-changes{border-color:#ff9800;background-color:#fff3e0}.toolbar-btn .unsaved-indicator{color:#ff9800;font-size:.75rem;margin-left:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BuilderToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: BuilderToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-builder-toolbar', standalone: true, imports: [CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"builder-toolbar\">\n  <div class=\"toolbar-section\">\n    <button class=\"toolbar-btn\" (click)=\"onNewDefinition()\" title=\"New Definition\">\n      <span>New</span>\n    </button>\n    <button class=\"toolbar-btn\" (click)=\"onOpenFile()\" title=\"Open File\">\n      <span>Open</span>\n    </button>\n    <button class=\"toolbar-btn\" (click)=\"onSave()\" title=\"Save to LocalStorage\" [class.has-changes]=\"hasUnsavedChanges\">\n      <span>Save</span>\n      @if (hasUnsavedChanges) {\n        <span class=\"unsaved-indicator\">\u25CF</span>\n      }\n    </button>\n    <button class=\"toolbar-btn\" (click)=\"onLoad()\" title=\"Load from LocalStorage\">\n      <span>Load</span>\n    </button>\n  </div>\n\n  <div class=\"toolbar-section\">\n    <button class=\"toolbar-btn\" (click)=\"onImportJSON()\" title=\"Import JSON\">\n      <span>Import JSON</span>\n    </button>\n    <button class=\"toolbar-btn\" (click)=\"onExportJSON()\" title=\"Export JSON\">\n      <span>Export JSON</span>\n    </button>\n    <button class=\"toolbar-btn\" (click)=\"onExportTypeScript()\" title=\"Export TypeScript\">\n      <span>Export TS</span>\n    </button>\n  </div>\n\n  <div class=\"toolbar-section\">\n    <button class=\"toolbar-btn\" (click)=\"onTogglePreview()\" title=\"Toggle Preview\">\n      <span>Preview</span>\n    </button>\n  </div>\n</div>\n", styles: [".builder-toolbar{display:flex;align-items:center;gap:1rem;padding:.75rem 1rem;background-color:#fff;border-bottom:1px solid #e0e0e0;box-shadow:0 2px 4px #0000000d}.toolbar-section{display:flex;align-items:center;gap:.5rem}.toolbar-section:not(:last-child):after{content:\"\";width:1px;height:24px;background-color:#e0e0e0;margin-left:.5rem}.toolbar-btn{display:flex;align-items:center;gap:.25rem;padding:.5rem 1rem;border:1px solid #d0d0d0;border-radius:4px;background-color:#fff;color:#333;cursor:pointer;font-size:.875rem;transition:all .2s}.toolbar-btn:hover{background-color:#f5f5f5;border-color:#b0b0b0}.toolbar-btn:active{background-color:#e8e8e8}.toolbar-btn.has-changes{border-color:#ff9800;background-color:#fff3e0}.toolbar-btn .unsaved-indicator{color:#ff9800;font-size:.75rem;margin-left:.25rem}\n"] }]
         }], ctorParameters: () => [{ type: DefinitionBuilderService }, { type: DefinitionExportService }, { type: DefinitionImportService }], propDecorators: { hasUnsavedChanges: [{
@@ -12587,10 +12739,10 @@ class ColumnListComponent {
         const type = this.dataTypes.find(dt => dt.value === column.dataType);
         return type?.label || 'Text';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ColumnListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ColumnListComponent, isStandalone: true, selector: "st-column-list", inputs: { columns: "columns", selectedIndex: "selectedIndex" }, outputs: { columnSelected: "columnSelected", columnAdded: "columnAdded", columnDeleted: "columnDeleted", columnReordered: "columnReordered" }, ngImport: i0, template: "<div class=\"column-list\" (clickOutside)=\"closeMenu()\">\n  <div class=\"column-list-header\">\n    <h3>Columns</h3>\n    <div class=\"add-column-menu\" [class.open]=\"showAddMenu\">\n      <button class=\"add-btn\" (click)=\"showAddMenu = !showAddMenu\" title=\"Add Column\">\n        <span>+ Add Column</span>\n      </button>\n      @if (showAddMenu) {\n        <div class=\"add-menu\">\n          @for (type of dataTypes; track type.value) {\n            <button\n              class=\"menu-item\"\n              (click)=\"onAddColumn(type.value)\">\n              {{ type.label }}\n            </button>\n          }\n        </div>\n      }\n    </div>\n  </div>\n\n  <div class=\"column-items\">\n    @for (column of columns; track column.key; let i = $index) {\n      <div\n        class=\"column-item\"\n        [class.selected]=\"selectedIndex === i\"\n        [class.dragging]=\"draggedIndex === i\"\n        [class.drag-over]=\"dragOverIndex === i\"\n        (click)=\"onColumnClick(i)\"\n        draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\"\n        (drop)=\"onDrop($event, i)\"\n        (dragend)=\"onDragEnd($event)\"\n        (dragleave)=\"dragOverIndex = null\">\n        <div class=\"drag-handle\">\n          <span>\u2630</span>\n        </div>\n        <div class=\"column-info\">\n          <div class=\"column-name\">{{ getColumnDisplayName(column) }}</div>\n          <div class=\"column-meta\">\n            <span class=\"column-type\">{{ getDataTypeLabel(column) }}</span>\n            <span class=\"column-key\">{{ column.key }}</span>\n          </div>\n        </div>\n        <button\n          class=\"delete-btn\"\n          (click)=\"onDelete(i, $event)\"\n          title=\"Delete Column\">\n          \u00D7\n        </button>\n      </div>\n    }\n\n    @if (columns.length === 0) {\n      <div class=\"empty-state\">\n        <p>No columns yet. Click \"Add Column\" to get started.</p>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".column-list{display:flex;flex-direction:column;background-color:#fff;border-radius:4px;box-shadow:0 2px 4px #0000001a;overflow:hidden}.column-list-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;background-color:#f8f8f8}.column-list-header h3{margin:0;font-size:1rem;font-weight:600;color:#333}.add-column-menu{position:relative}.add-column-menu.open .add-btn{background-color:#e3f2fd;border-color:#2196f3}.add-btn{padding:.5rem 1rem;border:1px solid #d0d0d0;border-radius:4px;background-color:#fff;color:#333;cursor:pointer;font-size:.875rem;transition:all .2s}.add-btn:hover{background-color:#f5f5f5}.add-menu{position:absolute;top:100%;right:0;margin-top:.25rem;background-color:#fff;border:1px solid #d0d0d0;border-radius:4px;box-shadow:0 4px 8px #0000001a;z-index:100;min-width:150px}.menu-item{display:block;width:100%;padding:.75rem 1rem;border:none;background:none;text-align:left;cursor:pointer;font-size:.875rem;color:#333;transition:background-color .2s}.menu-item:hover{background-color:#f5f5f5}.menu-item:first-child{border-top-left-radius:4px;border-top-right-radius:4px}.menu-item:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px}.column-items{max-height:400px;overflow-y:auto;padding:.5rem}.column-item{display:flex;align-items:center;gap:.5rem;padding:.75rem;margin-bottom:.5rem;border:1px solid #e0e0e0;border-radius:4px;background-color:#fff;cursor:pointer;transition:all .2s}.column-item:hover{border-color:#b0b0b0;background-color:#f8f8f8}.column-item.selected{border-color:#2196f3;background-color:#e3f2fd}.column-item.cdk-drag-preview{box-shadow:0 8px 16px #0003;opacity:.9}.column-item.cdk-drag-placeholder{opacity:.3}.drag-handle{cursor:move;color:#999;font-size:1.25rem;padding:.25rem;display:flex;align-items:center}.drag-handle:hover{color:#666}.column-info{flex:1;min-width:0}.column-name{font-weight:500;color:#333;margin-bottom:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.column-meta{display:flex;gap:.5rem;font-size:.75rem;color:#666}.column-type{padding:.125rem .5rem;background-color:#e8e8e8;border-radius:3px}.column-key{font-family:monospace;color:#999}.delete-btn{padding:.25rem .5rem;border:none;background:none;color:#999;cursor:pointer;font-size:1.5rem;line-height:1;transition:color .2s}.delete-btn:hover{color:#f44336}.empty-state{padding:2rem;text-align:center;color:#999;font-size:.875rem}.column-item.dragging{opacity:.5}.column-item.drag-over{border-color:#2196f3}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ColumnListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: ColumnListComponent, isStandalone: true, selector: "st-column-list", inputs: { columns: "columns", selectedIndex: "selectedIndex" }, outputs: { columnSelected: "columnSelected", columnAdded: "columnAdded", columnDeleted: "columnDeleted", columnReordered: "columnReordered" }, ngImport: i0, template: "<div class=\"column-list\" (clickOutside)=\"closeMenu()\">\n  <div class=\"column-list-header\">\n    <h3>Columns</h3>\n    <div class=\"add-column-menu\" [class.open]=\"showAddMenu\">\n      <button class=\"add-btn\" (click)=\"showAddMenu = !showAddMenu\" title=\"Add Column\">\n        <span>+ Add Column</span>\n      </button>\n      @if (showAddMenu) {\n        <div class=\"add-menu\">\n          @for (type of dataTypes; track type.value) {\n            <button\n              class=\"menu-item\"\n              (click)=\"onAddColumn(type.value)\">\n              {{ type.label }}\n            </button>\n          }\n        </div>\n      }\n    </div>\n  </div>\n\n  <div class=\"column-items\">\n    @for (column of columns; track column.key; let i = $index) {\n      <div\n        class=\"column-item\"\n        [class.selected]=\"selectedIndex === i\"\n        [class.dragging]=\"draggedIndex === i\"\n        [class.drag-over]=\"dragOverIndex === i\"\n        (click)=\"onColumnClick(i)\"\n        draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\"\n        (drop)=\"onDrop($event, i)\"\n        (dragend)=\"onDragEnd($event)\"\n        (dragleave)=\"dragOverIndex = null\">\n        <div class=\"drag-handle\">\n          <span>\u2630</span>\n        </div>\n        <div class=\"column-info\">\n          <div class=\"column-name\">{{ getColumnDisplayName(column) }}</div>\n          <div class=\"column-meta\">\n            <span class=\"column-type\">{{ getDataTypeLabel(column) }}</span>\n            <span class=\"column-key\">{{ column.key }}</span>\n          </div>\n        </div>\n        <button\n          class=\"delete-btn\"\n          (click)=\"onDelete(i, $event)\"\n          title=\"Delete Column\">\n          \u00D7\n        </button>\n      </div>\n    }\n\n    @if (columns.length === 0) {\n      <div class=\"empty-state\">\n        <p>No columns yet. Click \"Add Column\" to get started.</p>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".column-list{display:flex;flex-direction:column;background-color:#fff;border-radius:4px;box-shadow:0 2px 4px #0000001a;overflow:hidden}.column-list-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;background-color:#f8f8f8}.column-list-header h3{margin:0;font-size:1rem;font-weight:600;color:#333}.add-column-menu{position:relative}.add-column-menu.open .add-btn{background-color:#e3f2fd;border-color:#2196f3}.add-btn{padding:.5rem 1rem;border:1px solid #d0d0d0;border-radius:4px;background-color:#fff;color:#333;cursor:pointer;font-size:.875rem;transition:all .2s}.add-btn:hover{background-color:#f5f5f5}.add-menu{position:absolute;top:100%;right:0;margin-top:.25rem;background-color:#fff;border:1px solid #d0d0d0;border-radius:4px;box-shadow:0 4px 8px #0000001a;z-index:100;min-width:150px}.menu-item{display:block;width:100%;padding:.75rem 1rem;border:none;background:none;text-align:left;cursor:pointer;font-size:.875rem;color:#333;transition:background-color .2s}.menu-item:hover{background-color:#f5f5f5}.menu-item:first-child{border-top-left-radius:4px;border-top-right-radius:4px}.menu-item:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px}.column-items{max-height:400px;overflow-y:auto;padding:.5rem}.column-item{display:flex;align-items:center;gap:.5rem;padding:.75rem;margin-bottom:.5rem;border:1px solid #e0e0e0;border-radius:4px;background-color:#fff;cursor:pointer;transition:all .2s}.column-item:hover{border-color:#b0b0b0;background-color:#f8f8f8}.column-item.selected{border-color:#2196f3;background-color:#e3f2fd}.column-item.cdk-drag-preview{box-shadow:0 8px 16px #0003;opacity:.9}.column-item.cdk-drag-placeholder{opacity:.3}.drag-handle{cursor:move;color:#999;font-size:1.25rem;padding:.25rem;display:flex;align-items:center}.drag-handle:hover{color:#666}.column-info{flex:1;min-width:0}.column-name{font-weight:500;color:#333;margin-bottom:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.column-meta{display:flex;gap:.5rem;font-size:.75rem;color:#666}.column-type{padding:.125rem .5rem;background-color:#e8e8e8;border-radius:3px}.column-key{font-family:monospace;color:#999}.delete-btn{padding:.25rem .5rem;border:none;background:none;color:#999;cursor:pointer;font-size:1.5rem;line-height:1;transition:color .2s}.delete-btn:hover{color:#f44336}.empty-state{padding:2rem;text-align:center;color:#999;font-size:.875rem}.column-item.dragging{opacity:.5}.column-item.drag-over{border-color:#2196f3}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ColumnListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ColumnListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-column-list', standalone: true, imports: [CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"column-list\" (clickOutside)=\"closeMenu()\">\n  <div class=\"column-list-header\">\n    <h3>Columns</h3>\n    <div class=\"add-column-menu\" [class.open]=\"showAddMenu\">\n      <button class=\"add-btn\" (click)=\"showAddMenu = !showAddMenu\" title=\"Add Column\">\n        <span>+ Add Column</span>\n      </button>\n      @if (showAddMenu) {\n        <div class=\"add-menu\">\n          @for (type of dataTypes; track type.value) {\n            <button\n              class=\"menu-item\"\n              (click)=\"onAddColumn(type.value)\">\n              {{ type.label }}\n            </button>\n          }\n        </div>\n      }\n    </div>\n  </div>\n\n  <div class=\"column-items\">\n    @for (column of columns; track column.key; let i = $index) {\n      <div\n        class=\"column-item\"\n        [class.selected]=\"selectedIndex === i\"\n        [class.dragging]=\"draggedIndex === i\"\n        [class.drag-over]=\"dragOverIndex === i\"\n        (click)=\"onColumnClick(i)\"\n        draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\"\n        (drop)=\"onDrop($event, i)\"\n        (dragend)=\"onDragEnd($event)\"\n        (dragleave)=\"dragOverIndex = null\">\n        <div class=\"drag-handle\">\n          <span>\u2630</span>\n        </div>\n        <div class=\"column-info\">\n          <div class=\"column-name\">{{ getColumnDisplayName(column) }}</div>\n          <div class=\"column-meta\">\n            <span class=\"column-type\">{{ getDataTypeLabel(column) }}</span>\n            <span class=\"column-key\">{{ column.key }}</span>\n          </div>\n        </div>\n        <button\n          class=\"delete-btn\"\n          (click)=\"onDelete(i, $event)\"\n          title=\"Delete Column\">\n          \u00D7\n        </button>\n      </div>\n    }\n\n    @if (columns.length === 0) {\n      <div class=\"empty-state\">\n        <p>No columns yet. Click \"Add Column\" to get started.</p>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".column-list{display:flex;flex-direction:column;background-color:#fff;border-radius:4px;box-shadow:0 2px 4px #0000001a;overflow:hidden}.column-list-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;background-color:#f8f8f8}.column-list-header h3{margin:0;font-size:1rem;font-weight:600;color:#333}.add-column-menu{position:relative}.add-column-menu.open .add-btn{background-color:#e3f2fd;border-color:#2196f3}.add-btn{padding:.5rem 1rem;border:1px solid #d0d0d0;border-radius:4px;background-color:#fff;color:#333;cursor:pointer;font-size:.875rem;transition:all .2s}.add-btn:hover{background-color:#f5f5f5}.add-menu{position:absolute;top:100%;right:0;margin-top:.25rem;background-color:#fff;border:1px solid #d0d0d0;border-radius:4px;box-shadow:0 4px 8px #0000001a;z-index:100;min-width:150px}.menu-item{display:block;width:100%;padding:.75rem 1rem;border:none;background:none;text-align:left;cursor:pointer;font-size:.875rem;color:#333;transition:background-color .2s}.menu-item:hover{background-color:#f5f5f5}.menu-item:first-child{border-top-left-radius:4px;border-top-right-radius:4px}.menu-item:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px}.column-items{max-height:400px;overflow-y:auto;padding:.5rem}.column-item{display:flex;align-items:center;gap:.5rem;padding:.75rem;margin-bottom:.5rem;border:1px solid #e0e0e0;border-radius:4px;background-color:#fff;cursor:pointer;transition:all .2s}.column-item:hover{border-color:#b0b0b0;background-color:#f8f8f8}.column-item.selected{border-color:#2196f3;background-color:#e3f2fd}.column-item.cdk-drag-preview{box-shadow:0 8px 16px #0003;opacity:.9}.column-item.cdk-drag-placeholder{opacity:.3}.drag-handle{cursor:move;color:#999;font-size:1.25rem;padding:.25rem;display:flex;align-items:center}.drag-handle:hover{color:#666}.column-info{flex:1;min-width:0}.column-name{font-weight:500;color:#333;margin-bottom:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.column-meta{display:flex;gap:.5rem;font-size:.75rem;color:#666}.column-type{padding:.125rem .5rem;background-color:#e8e8e8;border-radius:3px}.column-key{font-family:monospace;color:#999}.delete-btn{padding:.25rem .5rem;border:none;background:none;color:#999;cursor:pointer;font-size:1.5rem;line-height:1;transition:color .2s}.delete-btn:hover{color:#f44336}.empty-state{padding:2rem;text-align:center;color:#999;font-size:.875rem}.column-item.dragging{opacity:.5}.column-item.drag-over{border-color:#2196f3}\n"] }]
         }], propDecorators: { columns: [{
@@ -12723,10 +12875,10 @@ class TableConfigEditorComponent {
             this.configUpdated.emit(updates);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TableConfigEditorComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: TableConfigEditorComponent, isStandalone: true, selector: "st-table-config-editor", inputs: { config: "config" }, outputs: { configUpdated: "configUpdated" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"table-config-editor\">\n  <h3>Table Configuration</h3>\n\n  <form [formGroup]=\"form\" class=\"config-form\">\n    <!-- Pagination -->\n    <div class=\"config-section\">\n      <h4>Pagination</h4>\n      <div formGroupName=\"pagination\">\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"enabled\">\n          <span>Enabled</span>\n        </label>\n        @if (form.get('pagination.enabled')?.value) {\n          <div class=\"form-group\">\n            <label>Page Size</label>\n            <select formControlName=\"pageSize\" class=\"form-control\">\n              @for (size of pageSizeOptions; track size) {\n                <option [value]=\"size\">\n                  {{ size }}\n                </option>\n              }\n            </select>\n          </div>\n        }\n        @if (form.get('pagination.enabled')?.value) {\n          <label class=\"checkbox-label\">\n            <input type=\"checkbox\" formControlName=\"showTopControls\">\n            <span>Show Top Controls</span>\n          </label>\n        }\n        @if (form.get('pagination.enabled')?.value) {\n          <label class=\"checkbox-label\">\n            <input type=\"checkbox\" formControlName=\"showBottomControls\">\n            <span>Show Bottom Controls</span>\n          </label>\n        }\n        @if (form.get('pagination.enabled')?.value) {\n          <div class=\"form-group\">\n            <label>Variant</label>\n            <select formControlName=\"variant\" class=\"form-control\">\n              <option value=\"fluid\">Fluid</option>\n              <option value=\"compact\">Compact</option>\n            </select>\n          </div>\n        }\n      </div>\n    </div>\n\n    <!-- Sorting -->\n    <div class=\"config-section\">\n      <h4>Sorting</h4>\n      <div formGroupName=\"sorting\">\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"enabled\">\n          <span>Enabled</span>\n        </label>\n        @if (form.get('sorting.enabled')?.value) {\n          <label class=\"checkbox-label\">\n            <input type=\"checkbox\" formControlName=\"multiColumn\">\n            <span>Multi-column</span>\n          </label>\n        }\n        @if (form.get('sorting.enabled')?.value) {\n          <div class=\"form-group\">\n            <label>Mode</label>\n            <select formControlName=\"mode\" class=\"form-control\">\n              <option value=\"local\">Local</option>\n              <option value=\"server\">Server</option>\n            </select>\n          </div>\n        }\n      </div>\n    </div>\n\n    <!-- Filtering -->\n    <div class=\"config-section\">\n      <h4>Filtering</h4>\n      <div formGroupName=\"filtering\">\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"enabled\">\n          <span>Enabled</span>\n        </label>\n        @if (form.get('filtering.enabled')?.value) {\n          <div class=\"form-group\">\n            <label>Mode</label>\n            <select formControlName=\"mode\" class=\"form-control\">\n              <option value=\"local\">Local</option>\n              <option value=\"server\">Server</option>\n            </select>\n          </div>\n        }\n      </div>\n    </div>\n\n    <!-- Display -->\n    <div class=\"config-section\">\n      <h4>Display</h4>\n      <div formGroupName=\"display\">\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"stickyHeader\">\n          <span>Sticky Header</span>\n        </label>\n        \n        <!-- Virtual Scroll Configuration -->\n        <div class=\"subsection\" formGroupName=\"virtualScroll\">\n          <h5>Virtual Scroll</h5>\n          <label class=\"checkbox-label\">\n            <input type=\"checkbox\" formControlName=\"enabled\">\n            <span>Enable Virtual Scrolling (for large datasets)</span>\n          </label>\n          \n          @if (form.get('display.virtualScroll.enabled')?.value) {\n            <div class=\"virtual-scroll-options\">\n              <div class=\"form-group\">\n                <label>Row Height (px)</label>\n                <input type=\"number\" formControlName=\"itemSize\" class=\"form-control\" min=\"20\" max=\"200\">\n                <small class=\"help-text\">Must be consistent for all rows</small>\n              </div>\n              \n              <div class=\"form-group\">\n                <label>Buffer Size (rows)</label>\n                <input type=\"number\" formControlName=\"bufferSize\" class=\"form-control\" min=\"0\" max=\"20\">\n                <small class=\"help-text\">Rows rendered above/below viewport</small>\n              </div>\n              \n              <div class=\"form-group\">\n                <label>Viewport Height (px)</label>\n                <input type=\"number\" formControlName=\"viewportHeight\" class=\"form-control\" min=\"200\" max=\"2000\">\n                <small class=\"help-text\">Height of scrollable container</small>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n\n    <!-- Keyboard Navigation -->\n    <div class=\"config-section\">\n      <h4>Keyboard Navigation</h4>\n      <div formGroupName=\"keyboardNavigation\">\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"enabled\">\n          <span>Enable Excel-like Navigation</span>\n        </label>\n      </div>\n    </div>\n  </form>\n</div>\n", styles: [".table-config-editor{background-color:#fff;border-radius:4px;box-shadow:0 2px 4px #0000001a;padding:1rem;overflow-y:auto;max-height:500px}.table-config-editor h3{margin:0 0 1rem;font-size:1rem;font-weight:600;color:#333}.config-form{display:flex;flex-direction:column;gap:1.5rem}.config-section h4{margin:0 0 .75rem;font-size:.875rem;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:.5px}.checkbox-label{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;cursor:pointer;font-size:.875rem;color:#333}.checkbox-label input[type=checkbox]{width:18px;height:18px;cursor:pointer}.form-group{margin-top:.75rem}.form-group label{display:block;margin-bottom:.5rem;font-size:.875rem;font-weight:500;color:#333}.form-control{width:100%;padding:.5rem;border:1px solid #d0d0d0;border-radius:4px;font-size:.875rem}.form-control:focus{outline:none;border-color:#2196f3}.subsection{margin-top:1rem;padding:.75rem;background-color:#f9f9f9;border-radius:4px;border-left:3px solid #2196f3}.subsection h5{margin:0 0 .75rem;font-size:.8rem;font-weight:600;color:#555;text-transform:uppercase;letter-spacing:.5px}.virtual-scroll-options{margin-top:.75rem;padding-left:.5rem}.help-text{display:block;margin-top:.25rem;font-size:.75rem;color:#666;font-style:italic}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TableConfigEditorComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: TableConfigEditorComponent, isStandalone: true, selector: "st-table-config-editor", inputs: { config: "config" }, outputs: { configUpdated: "configUpdated" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"table-config-editor\">\n  <h3>Table Configuration</h3>\n\n  <form [formGroup]=\"form\" class=\"config-form\">\n    <!-- Pagination -->\n    <div class=\"config-section\">\n      <h4>Pagination</h4>\n      <div formGroupName=\"pagination\">\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"enabled\">\n          <span>Enabled</span>\n        </label>\n        @if (form.get('pagination.enabled')?.value) {\n          <div class=\"form-group\">\n            <label>Page Size</label>\n            <select formControlName=\"pageSize\" class=\"form-control\">\n              @for (size of pageSizeOptions; track size) {\n                <option [value]=\"size\">\n                  {{ size }}\n                </option>\n              }\n            </select>\n          </div>\n        }\n        @if (form.get('pagination.enabled')?.value) {\n          <label class=\"checkbox-label\">\n            <input type=\"checkbox\" formControlName=\"showTopControls\">\n            <span>Show Top Controls</span>\n          </label>\n        }\n        @if (form.get('pagination.enabled')?.value) {\n          <label class=\"checkbox-label\">\n            <input type=\"checkbox\" formControlName=\"showBottomControls\">\n            <span>Show Bottom Controls</span>\n          </label>\n        }\n        @if (form.get('pagination.enabled')?.value) {\n          <div class=\"form-group\">\n            <label>Variant</label>\n            <select formControlName=\"variant\" class=\"form-control\">\n              <option value=\"fluid\">Fluid</option>\n              <option value=\"compact\">Compact</option>\n            </select>\n          </div>\n        }\n      </div>\n    </div>\n\n    <!-- Sorting -->\n    <div class=\"config-section\">\n      <h4>Sorting</h4>\n      <div formGroupName=\"sorting\">\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"enabled\">\n          <span>Enabled</span>\n        </label>\n        @if (form.get('sorting.enabled')?.value) {\n          <label class=\"checkbox-label\">\n            <input type=\"checkbox\" formControlName=\"multiColumn\">\n            <span>Multi-column</span>\n          </label>\n        }\n        @if (form.get('sorting.enabled')?.value) {\n          <div class=\"form-group\">\n            <label>Mode</label>\n            <select formControlName=\"mode\" class=\"form-control\">\n              <option value=\"local\">Local</option>\n              <option value=\"server\">Server</option>\n            </select>\n          </div>\n        }\n      </div>\n    </div>\n\n    <!-- Filtering -->\n    <div class=\"config-section\">\n      <h4>Filtering</h4>\n      <div formGroupName=\"filtering\">\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"enabled\">\n          <span>Enabled</span>\n        </label>\n        @if (form.get('filtering.enabled')?.value) {\n          <div class=\"form-group\">\n            <label>Mode</label>\n            <select formControlName=\"mode\" class=\"form-control\">\n              <option value=\"local\">Local</option>\n              <option value=\"server\">Server</option>\n            </select>\n          </div>\n        }\n      </div>\n    </div>\n\n    <!-- Display -->\n    <div class=\"config-section\">\n      <h4>Display</h4>\n      <div formGroupName=\"display\">\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"stickyHeader\">\n          <span>Sticky Header</span>\n        </label>\n        \n        <!-- Virtual Scroll Configuration -->\n        <div class=\"subsection\" formGroupName=\"virtualScroll\">\n          <h5>Virtual Scroll</h5>\n          <label class=\"checkbox-label\">\n            <input type=\"checkbox\" formControlName=\"enabled\">\n            <span>Enable Virtual Scrolling (for large datasets)</span>\n          </label>\n          \n          @if (form.get('display.virtualScroll.enabled')?.value) {\n            <div class=\"virtual-scroll-options\">\n              <div class=\"form-group\">\n                <label>Row Height (px)</label>\n                <input type=\"number\" formControlName=\"itemSize\" class=\"form-control\" min=\"20\" max=\"200\">\n                <small class=\"help-text\">Must be consistent for all rows</small>\n              </div>\n              \n              <div class=\"form-group\">\n                <label>Buffer Size (rows)</label>\n                <input type=\"number\" formControlName=\"bufferSize\" class=\"form-control\" min=\"0\" max=\"20\">\n                <small class=\"help-text\">Rows rendered above/below viewport</small>\n              </div>\n              \n              <div class=\"form-group\">\n                <label>Viewport Height (px)</label>\n                <input type=\"number\" formControlName=\"viewportHeight\" class=\"form-control\" min=\"200\" max=\"2000\">\n                <small class=\"help-text\">Height of scrollable container</small>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n\n    <!-- Keyboard Navigation -->\n    <div class=\"config-section\">\n      <h4>Keyboard Navigation</h4>\n      <div formGroupName=\"keyboardNavigation\">\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"enabled\">\n          <span>Enable Excel-like Navigation</span>\n        </label>\n      </div>\n    </div>\n  </form>\n</div>\n", styles: [".table-config-editor{background-color:#fff;border-radius:4px;box-shadow:0 2px 4px #0000001a;padding:1rem;overflow-y:auto;max-height:500px}.table-config-editor h3{margin:0 0 1rem;font-size:1rem;font-weight:600;color:#333}.config-form{display:flex;flex-direction:column;gap:1.5rem}.config-section h4{margin:0 0 .75rem;font-size:.875rem;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:.5px}.checkbox-label{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;cursor:pointer;font-size:.875rem;color:#333}.checkbox-label input[type=checkbox]{width:18px;height:18px;cursor:pointer}.form-group{margin-top:.75rem}.form-group label{display:block;margin-bottom:.5rem;font-size:.875rem;font-weight:500;color:#333}.form-control{width:100%;padding:.5rem;border:1px solid #d0d0d0;border-radius:4px;font-size:.875rem}.form-control:focus{outline:none;border-color:#2196f3}.subsection{margin-top:1rem;padding:.75rem;background-color:#f9f9f9;border-radius:4px;border-left:3px solid #2196f3}.subsection h5{margin:0 0 .75rem;font-size:.8rem;font-weight:600;color:#555;text-transform:uppercase;letter-spacing:.5px}.virtual-scroll-options{margin-top:.75rem;padding-left:.5rem}.help-text{display:block;margin-top:.25rem;font-size:.75rem;color:#666;font-style:italic}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TableConfigEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TableConfigEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-table-config-editor', standalone: true, imports: [CommonModule, ReactiveFormsModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"table-config-editor\">\n  <h3>Table Configuration</h3>\n\n  <form [formGroup]=\"form\" class=\"config-form\">\n    <!-- Pagination -->\n    <div class=\"config-section\">\n      <h4>Pagination</h4>\n      <div formGroupName=\"pagination\">\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"enabled\">\n          <span>Enabled</span>\n        </label>\n        @if (form.get('pagination.enabled')?.value) {\n          <div class=\"form-group\">\n            <label>Page Size</label>\n            <select formControlName=\"pageSize\" class=\"form-control\">\n              @for (size of pageSizeOptions; track size) {\n                <option [value]=\"size\">\n                  {{ size }}\n                </option>\n              }\n            </select>\n          </div>\n        }\n        @if (form.get('pagination.enabled')?.value) {\n          <label class=\"checkbox-label\">\n            <input type=\"checkbox\" formControlName=\"showTopControls\">\n            <span>Show Top Controls</span>\n          </label>\n        }\n        @if (form.get('pagination.enabled')?.value) {\n          <label class=\"checkbox-label\">\n            <input type=\"checkbox\" formControlName=\"showBottomControls\">\n            <span>Show Bottom Controls</span>\n          </label>\n        }\n        @if (form.get('pagination.enabled')?.value) {\n          <div class=\"form-group\">\n            <label>Variant</label>\n            <select formControlName=\"variant\" class=\"form-control\">\n              <option value=\"fluid\">Fluid</option>\n              <option value=\"compact\">Compact</option>\n            </select>\n          </div>\n        }\n      </div>\n    </div>\n\n    <!-- Sorting -->\n    <div class=\"config-section\">\n      <h4>Sorting</h4>\n      <div formGroupName=\"sorting\">\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"enabled\">\n          <span>Enabled</span>\n        </label>\n        @if (form.get('sorting.enabled')?.value) {\n          <label class=\"checkbox-label\">\n            <input type=\"checkbox\" formControlName=\"multiColumn\">\n            <span>Multi-column</span>\n          </label>\n        }\n        @if (form.get('sorting.enabled')?.value) {\n          <div class=\"form-group\">\n            <label>Mode</label>\n            <select formControlName=\"mode\" class=\"form-control\">\n              <option value=\"local\">Local</option>\n              <option value=\"server\">Server</option>\n            </select>\n          </div>\n        }\n      </div>\n    </div>\n\n    <!-- Filtering -->\n    <div class=\"config-section\">\n      <h4>Filtering</h4>\n      <div formGroupName=\"filtering\">\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"enabled\">\n          <span>Enabled</span>\n        </label>\n        @if (form.get('filtering.enabled')?.value) {\n          <div class=\"form-group\">\n            <label>Mode</label>\n            <select formControlName=\"mode\" class=\"form-control\">\n              <option value=\"local\">Local</option>\n              <option value=\"server\">Server</option>\n            </select>\n          </div>\n        }\n      </div>\n    </div>\n\n    <!-- Display -->\n    <div class=\"config-section\">\n      <h4>Display</h4>\n      <div formGroupName=\"display\">\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"stickyHeader\">\n          <span>Sticky Header</span>\n        </label>\n        \n        <!-- Virtual Scroll Configuration -->\n        <div class=\"subsection\" formGroupName=\"virtualScroll\">\n          <h5>Virtual Scroll</h5>\n          <label class=\"checkbox-label\">\n            <input type=\"checkbox\" formControlName=\"enabled\">\n            <span>Enable Virtual Scrolling (for large datasets)</span>\n          </label>\n          \n          @if (form.get('display.virtualScroll.enabled')?.value) {\n            <div class=\"virtual-scroll-options\">\n              <div class=\"form-group\">\n                <label>Row Height (px)</label>\n                <input type=\"number\" formControlName=\"itemSize\" class=\"form-control\" min=\"20\" max=\"200\">\n                <small class=\"help-text\">Must be consistent for all rows</small>\n              </div>\n              \n              <div class=\"form-group\">\n                <label>Buffer Size (rows)</label>\n                <input type=\"number\" formControlName=\"bufferSize\" class=\"form-control\" min=\"0\" max=\"20\">\n                <small class=\"help-text\">Rows rendered above/below viewport</small>\n              </div>\n              \n              <div class=\"form-group\">\n                <label>Viewport Height (px)</label>\n                <input type=\"number\" formControlName=\"viewportHeight\" class=\"form-control\" min=\"200\" max=\"2000\">\n                <small class=\"help-text\">Height of scrollable container</small>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n\n    <!-- Keyboard Navigation -->\n    <div class=\"config-section\">\n      <h4>Keyboard Navigation</h4>\n      <div formGroupName=\"keyboardNavigation\">\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"enabled\">\n          <span>Enable Excel-like Navigation</span>\n        </label>\n      </div>\n    </div>\n  </form>\n</div>\n", styles: [".table-config-editor{background-color:#fff;border-radius:4px;box-shadow:0 2px 4px #0000001a;padding:1rem;overflow-y:auto;max-height:500px}.table-config-editor h3{margin:0 0 1rem;font-size:1rem;font-weight:600;color:#333}.config-form{display:flex;flex-direction:column;gap:1.5rem}.config-section h4{margin:0 0 .75rem;font-size:.875rem;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:.5px}.checkbox-label{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;cursor:pointer;font-size:.875rem;color:#333}.checkbox-label input[type=checkbox]{width:18px;height:18px;cursor:pointer}.form-group{margin-top:.75rem}.form-group label{display:block;margin-bottom:.5rem;font-size:.875rem;font-weight:500;color:#333}.form-control{width:100%;padding:.5rem;border:1px solid #d0d0d0;border-radius:4px;font-size:.875rem}.form-control:focus{outline:none;border-color:#2196f3}.subsection{margin-top:1rem;padding:.75rem;background-color:#f9f9f9;border-radius:4px;border-left:3px solid #2196f3}.subsection h5{margin:0 0 .75rem;font-size:.8rem;font-weight:600;color:#555;text-transform:uppercase;letter-spacing:.5px}.virtual-scroll-options{margin-top:.75rem;padding-left:.5rem}.help-text{display:block;margin-top:.25rem;font-size:.75rem;color:#666;font-style:italic}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.FormBuilder }], propDecorators: { config: [{
@@ -12848,10 +13000,10 @@ class SampleDataGeneratorService {
     generateBooleanValue(rowIndex) {
         return rowIndex % 2 === 0;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SampleDataGeneratorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SampleDataGeneratorService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SampleDataGeneratorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SampleDataGeneratorService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SampleDataGeneratorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SampleDataGeneratorService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -12906,10 +13058,10 @@ class BuilderPreviewComponent {
         // But we can log them for debugging
         console.log('Preview state change:', event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BuilderPreviewComponent, deps: [{ token: SampleDataGeneratorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: BuilderPreviewComponent, isStandalone: true, selector: "st-builder-preview", inputs: { tableConfig: "tableConfig" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"builder-preview\">\n  <div class=\"preview-header\">\n    <h3>Live Preview</h3>\n    <button class=\"refresh-btn\" (click)=\"refreshPreview()\" title=\"Refresh Preview\">\n      \u21BB Refresh\n    </button>\n  </div>\n\n  <div class=\"preview-content\">\n    @if (isLoading) {\n      <div class=\"loading\">\n        <p>Generating preview...</p>\n      </div>\n    }\n\n    @if (!isLoading && tableConfig?.columns?.length === 0) {\n      <div class=\"empty-state\">\n        <p>Add columns to see preview</p>\n      </div>\n    }\n    @if (tableConfig) {\n      @if (!isLoading && tableConfig!.columns!.length > 0) {\n        <st-table\n          [tableConfig]=\"tableConfig\"\n          [data]=\"sampleData\"\n          (stateChange)=\"onStateChange($event)\">\n        </st-table>\n      }\n    }\n\n  </div>\n</div>\n", styles: [".builder-preview{height:100%}.preview-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;background-color:#f8f8f8}.preview-header h3{margin:0;font-size:1rem;font-weight:600;color:#333}.refresh-btn{padding:.5rem 1rem;border:1px solid #d0d0d0;border-radius:4px;background-color:#fff;color:#333;cursor:pointer;font-size:.875rem;transition:all .2s}.refresh-btn:hover{background-color:#f5f5f5}.preview-content{overflow:auto}.loading,.empty-state{display:flex;align-items:center;justify-content:center;height:200px;color:#999;font-size:.875rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: StTableComponent, selector: "st-table", inputs: ["tableConfig", "data", "data$", "tableState", "enableSorting", "enableFiltering", "validateConfig"], outputs: ["stateChange", "dataChange", "cellEdit", "cellSave", "cellCancel", "cellChange", "columnResized", "columnMoved", "configValidationErrors", "columnAdded", "rowAction", "validationStateChange", "requestAddRow"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: BuilderPreviewComponent, deps: [{ token: SampleDataGeneratorService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: BuilderPreviewComponent, isStandalone: true, selector: "st-builder-preview", inputs: { tableConfig: "tableConfig" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"builder-preview\">\n  <div class=\"preview-header\">\n    <h3>Live Preview</h3>\n    <button class=\"refresh-btn\" (click)=\"refreshPreview()\" title=\"Refresh Preview\">\n      \u21BB Refresh\n    </button>\n  </div>\n\n  <div class=\"preview-content\">\n    @if (isLoading) {\n      <div class=\"loading\">\n        <p>Generating preview...</p>\n      </div>\n    }\n\n    @if (!isLoading && tableConfig?.columns?.length === 0) {\n      <div class=\"empty-state\">\n        <p>Add columns to see preview</p>\n      </div>\n    }\n    @if (tableConfig) {\n      @if (!isLoading && tableConfig!.columns!.length > 0) {\n        <st-table\n          [tableConfig]=\"tableConfig\"\n          [data]=\"sampleData\"\n          (stateChange)=\"onStateChange($event)\">\n        </st-table>\n      }\n    }\n\n  </div>\n</div>\n", styles: [".builder-preview{height:100%}.preview-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;background-color:#f8f8f8}.preview-header h3{margin:0;font-size:1rem;font-weight:600;color:#333}.refresh-btn{padding:.5rem 1rem;border:1px solid #d0d0d0;border-radius:4px;background-color:#fff;color:#333;cursor:pointer;font-size:.875rem;transition:all .2s}.refresh-btn:hover{background-color:#f5f5f5}.preview-content{overflow:auto}.loading,.empty-state{display:flex;align-items:center;justify-content:center;height:200px;color:#999;font-size:.875rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: StTableComponent, selector: "st-table", inputs: ["tableConfig", "data", "data$", "tableState", "enableSorting", "enableFiltering", "validateConfig"], outputs: ["stateChange", "dataChange", "cellEdit", "cellSave", "cellCancel", "cellChange", "columnResized", "columnMoved", "configValidationErrors", "columnAdded", "rowAction", "validationStateChange", "requestAddRow"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BuilderPreviewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: BuilderPreviewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-builder-preview', standalone: true, imports: [CommonModule, StTableComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"builder-preview\">\n  <div class=\"preview-header\">\n    <h3>Live Preview</h3>\n    <button class=\"refresh-btn\" (click)=\"refreshPreview()\" title=\"Refresh Preview\">\n      \u21BB Refresh\n    </button>\n  </div>\n\n  <div class=\"preview-content\">\n    @if (isLoading) {\n      <div class=\"loading\">\n        <p>Generating preview...</p>\n      </div>\n    }\n\n    @if (!isLoading && tableConfig?.columns?.length === 0) {\n      <div class=\"empty-state\">\n        <p>Add columns to see preview</p>\n      </div>\n    }\n    @if (tableConfig) {\n      @if (!isLoading && tableConfig!.columns!.length > 0) {\n        <st-table\n          [tableConfig]=\"tableConfig\"\n          [data]=\"sampleData\"\n          (stateChange)=\"onStateChange($event)\">\n        </st-table>\n      }\n    }\n\n  </div>\n</div>\n", styles: [".builder-preview{height:100%}.preview-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;background-color:#f8f8f8}.preview-header h3{margin:0;font-size:1rem;font-weight:600;color:#333}.refresh-btn{padding:.5rem 1rem;border:1px solid #d0d0d0;border-radius:4px;background-color:#fff;color:#333;cursor:pointer;font-size:.875rem;transition:all .2s}.refresh-btn:hover{background-color:#f5f5f5}.preview-content{overflow:auto}.loading,.empty-state{display:flex;align-items:center;justify-content:center;height:200px;color:#999;font-size:.875rem}\n"] }]
         }], ctorParameters: () => [{ type: SampleDataGeneratorService }], propDecorators: { tableConfig: [{
@@ -13004,10 +13156,10 @@ class DefinitionBuilderComponent {
     onColumnCancel() {
         this.builderService.clearSelection();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DefinitionBuilderComponent, deps: [{ token: DefinitionBuilderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DefinitionBuilderComponent, isStandalone: true, selector: "st-definition-builder", ngImport: i0, template: "<div class=\"definition-builder\">\n  <!-- Toolbar -->\n  <st-builder-toolbar\n    [hasUnsavedChanges]=\"state.hasUnsavedChanges\"\n    (newDefinition)=\"onNewDefinition()\"\n    (saved)=\"onSaved()\"\n    (previewToggled)=\"onPreviewToggled()\">\n  </st-builder-toolbar>\n\n  <div class=\"builder-content\">\n    <!-- Left Panel: Column List and Table Config -->\n    <div class=\"left-panel\">\n      <!-- Column List -->\n      <st-column-list\n        [columns]=\"state.tableConfig.columns\"\n        [selectedIndex]=\"state.selectedColumnIndex\"\n        (columnSelected)=\"onColumnSelected($event)\"\n        (columnAdded)=\"onColumnAdded($event)\"\n        (columnDeleted)=\"onColumnDeleted($event)\"\n        (columnReordered)=\"onColumnReordered($event.fromIndex, $event.toIndex)\">\n      </st-column-list>\n\n      <!-- Table Config Editor -->\n      <st-table-config-editor\n        [config]=\"state.tableConfig\"\n        (configUpdated)=\"onTableConfigUpdated($event)\">\n      </st-table-config-editor>\n    </div>\n\n    <!-- Middle Panel: Column Editor -->\n    @if (state.selectedColumn) {\n      <div class=\"middle-panel\">\n        <st-column-editor\n          [column]=\"state.selectedColumn\"\n          [columnIndex]=\"state.selectedColumnIndex!\"\n          (columnUpdated)=\"onColumnUpdated(state.selectedColumnIndex!, $event)\"\n          (cancel)=\"onColumnCancel()\">\n        </st-column-editor>\n      </div>\n    }\n\n    <!-- Right Panel: Preview -->\n    @if (state.previewVisible) {\n      <div class=\"right-panel\">\n        <st-builder-preview\n          [tableConfig]=\"state.tableConfig\">\n        </st-builder-preview>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".definition-builder{display:flex;flex-direction:column;height:100%;width:100%;background-color:#f5f5f5}.builder-content{display:flex;flex:1;overflow:hidden;gap:1rem;padding:1rem}.left-panel{display:flex;flex-direction:column;width:300px;min-width:250px;gap:1rem;overflow-y:auto}.middle-panel{flex:1;min-width:400px;overflow-y:auto;background-color:#fff;border-radius:4px;padding:1rem;box-shadow:0 2px 4px #0000001a}.right-panel{min-width:400px;overflow-y:auto;background-color:#fff;border-radius:4px;padding:1rem;box-shadow:0 2px 4px #0000001a}@media(max-width:1200px){.right-panel{display:none}}@media(max-width:800px){.builder-content{flex-direction:column}.left-panel,.middle-panel,.right-panel{width:100%;min-width:unset}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: BuilderToolbarComponent, selector: "st-builder-toolbar", inputs: ["hasUnsavedChanges"], outputs: ["newDefinition", "saved", "previewToggled"] }, { kind: "component", type: ColumnListComponent, selector: "st-column-list", inputs: ["columns", "selectedIndex"], outputs: ["columnSelected", "columnAdded", "columnDeleted", "columnReordered"] }, { kind: "component", type: TableConfigEditorComponent, selector: "st-table-config-editor", inputs: ["config"], outputs: ["configUpdated"] }, { kind: "component", type: ColumnEditorComponent, selector: "st-column-editor", inputs: ["column", "columnIndex"], outputs: ["columnUpdated", "cancel"] }, { kind: "component", type: BuilderPreviewComponent, selector: "st-builder-preview", inputs: ["tableConfig"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: DefinitionBuilderComponent, deps: [{ token: DefinitionBuilderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: DefinitionBuilderComponent, isStandalone: true, selector: "st-definition-builder", ngImport: i0, template: "<div class=\"definition-builder\">\n  <!-- Toolbar -->\n  <st-builder-toolbar\n    [hasUnsavedChanges]=\"state.hasUnsavedChanges\"\n    (newDefinition)=\"onNewDefinition()\"\n    (saved)=\"onSaved()\"\n    (previewToggled)=\"onPreviewToggled()\">\n  </st-builder-toolbar>\n\n  <div class=\"builder-content\">\n    <!-- Left Panel: Column List and Table Config -->\n    <div class=\"left-panel\">\n      <!-- Column List -->\n      <st-column-list\n        [columns]=\"state.tableConfig.columns\"\n        [selectedIndex]=\"state.selectedColumnIndex\"\n        (columnSelected)=\"onColumnSelected($event)\"\n        (columnAdded)=\"onColumnAdded($event)\"\n        (columnDeleted)=\"onColumnDeleted($event)\"\n        (columnReordered)=\"onColumnReordered($event.fromIndex, $event.toIndex)\">\n      </st-column-list>\n\n      <!-- Table Config Editor -->\n      <st-table-config-editor\n        [config]=\"state.tableConfig\"\n        (configUpdated)=\"onTableConfigUpdated($event)\">\n      </st-table-config-editor>\n    </div>\n\n    <!-- Middle Panel: Column Editor -->\n    @if (state.selectedColumn) {\n      <div class=\"middle-panel\">\n        <st-column-editor\n          [column]=\"state.selectedColumn\"\n          [columnIndex]=\"state.selectedColumnIndex!\"\n          (columnUpdated)=\"onColumnUpdated(state.selectedColumnIndex!, $event)\"\n          (cancel)=\"onColumnCancel()\">\n        </st-column-editor>\n      </div>\n    }\n\n    <!-- Right Panel: Preview -->\n    @if (state.previewVisible) {\n      <div class=\"right-panel\">\n        <st-builder-preview\n          [tableConfig]=\"state.tableConfig\">\n        </st-builder-preview>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".definition-builder{display:flex;flex-direction:column;height:100%;width:100%;background-color:#f5f5f5}.builder-content{display:flex;flex:1;overflow:hidden;gap:1rem;padding:1rem}.left-panel{display:flex;flex-direction:column;width:300px;min-width:250px;gap:1rem;overflow-y:auto}.middle-panel{flex:1;min-width:400px;overflow-y:auto;background-color:#fff;border-radius:4px;padding:1rem;box-shadow:0 2px 4px #0000001a}.right-panel{min-width:400px;overflow-y:auto;background-color:#fff;border-radius:4px;padding:1rem;box-shadow:0 2px 4px #0000001a}@media(max-width:1200px){.right-panel{display:none}}@media(max-width:800px){.builder-content{flex-direction:column}.left-panel,.middle-panel,.right-panel{width:100%;min-width:unset}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: BuilderToolbarComponent, selector: "st-builder-toolbar", inputs: ["hasUnsavedChanges"], outputs: ["newDefinition", "saved", "previewToggled"] }, { kind: "component", type: ColumnListComponent, selector: "st-column-list", inputs: ["columns", "selectedIndex"], outputs: ["columnSelected", "columnAdded", "columnDeleted", "columnReordered"] }, { kind: "component", type: TableConfigEditorComponent, selector: "st-table-config-editor", inputs: ["config"], outputs: ["configUpdated"] }, { kind: "component", type: ColumnEditorComponent, selector: "st-column-editor", inputs: ["column", "columnIndex"], outputs: ["columnUpdated", "cancel"] }, { kind: "component", type: BuilderPreviewComponent, selector: "st-builder-preview", inputs: ["tableConfig"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DefinitionBuilderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: DefinitionBuilderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-definition-builder', standalone: true, imports: [
                         CommonModule,
@@ -13028,8 +13180,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * Module for the Visual UI Builder components
  */
 class DefinitionBuilderModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DefinitionBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: DefinitionBuilderModule, imports: [SmartTableModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: DefinitionBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.6", ngImport: i0, type: DefinitionBuilderModule, imports: [SmartTableModule,
             SharedTableComponentsModule,
             DefinitionBuilderComponent,
             BuilderToolbarComponent,
@@ -13041,7 +13193,7 @@ class DefinitionBuilderModule {
             TableConfigEditorComponent,
             BuilderPreviewComponent,
             SharedTableComponentsModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DefinitionBuilderModule, imports: [SmartTableModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: DefinitionBuilderModule, imports: [SmartTableModule,
             SharedTableComponentsModule,
             DefinitionBuilderComponent,
             BuilderToolbarComponent,
@@ -13049,7 +13201,7 @@ class DefinitionBuilderModule {
             TableConfigEditorComponent,
             BuilderPreviewComponent, SharedTableComponentsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DefinitionBuilderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: DefinitionBuilderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -13102,10 +13254,10 @@ class RowValidationService {
             };
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: RowValidationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: RowValidationService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: RowValidationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: RowValidationService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: RowValidationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: RowValidationService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'