@aquera/ngx-smart-table 0.0.23 → 0.0.24

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

@@ -4782,11 +4782,13 @@ function injectCodeEditorStyles() {
     const style = document.createElement('style');
     style.id = styleId;
     style.textContent = `
-    /* Nile Code Editor cell styling */
+    /* Nile Code Editor cell styling - constrained to cell height */
     nile-code-editor.st-cell-editor {
       display: block;
       width: 100%;
       height: 100%;
+      max-height: 32px;
+      overflow: hidden;
       font-size: inherit !important;
       font-family: inherit !important;
       line-height: inherit !important;
@@ -4794,19 +4796,31 @@ function injectCodeEditorStyles() {
     nile-code-editor.st-cell-editor::part(code-editor-base) {
       border: none !important;
       min-height: 100% !important;
+      max-height: 32px !important;
       background: transparent !important;
       font-size: inherit !important;
       font-family: inherit !important;
       line-height: inherit !important;
+      overflow: hidden !important;
     }
     /* Ensure proper sizing within table cell */
     .st-nile-code-editor {
       width: 100%;
       height: 100%;
+      max-height: 32px;
       min-height: 28px;
       font-size: inherit !important;
+      overflow: hidden;
+    }
+    /* CodeMirror content should inherit font size and be constrained */
+    nile-code-editor.st-cell-editor .cm-editor {
+      max-height: 32px !important;
+      overflow: hidden !important;
+    }
+    nile-code-editor.st-cell-editor .cm-scroller {
+      max-height: 32px !important;
+      overflow: hidden !important;
     }
-    /* CodeMirror content should inherit font size */
     nile-code-editor.st-cell-editor .cm-content,
     nile-code-editor.st-cell-editor .cm-line {
       font-size: inherit !important;
@@ -4819,12 +4833,15 @@ function injectCodeEditorStyles() {
       align-items: center;
       width: 100%;
       height: 100%;
+      max-height: 32px;
       gap: 4px;
     }
     .st-code-editor-wrapper .st-code-editor-input {
       flex: 1;
       min-width: 0;
       height: 100%;
+      max-height: 32px;
+      overflow: hidden;
     }
     .st-code-editor-wrapper .st-expand-button {
       display: flex;
@@ -4845,13 +4862,22 @@ function injectCodeEditorStyles() {
       background: var(--nile-color-neutral-100, #f3f4f6);
       color: var(--nile-color-neutral-700, #374151);
     }
-    /* Dialog code editor styling */
+    /* Dialog code editor styling - fixed header/footer, scrollable content */
     .st-code-editor-dialog::part(panel) {
       max-height: var(--max-height, 80vh) !important;
       overflow: hidden !important;
+      display: flex !important;
+      flex-direction: column !important;
+    }
+    .st-code-editor-dialog::part(header) {
+      flex-shrink: 0 !important;
     }
     .st-code-editor-dialog::part(body) {
-      overflow: auto !important;
+      overflow: hidden !important;
+      flex: 1 !important;
+      display: flex !important;
+      flex-direction: column !important;
+      padding: 0 !important;
     }
     .st-code-editor-dialog nile-code-editor {
       width: 100%;
@@ -4860,14 +4886,6 @@ function injectCodeEditorStyles() {
     .st-code-editor-dialog nile-code-editor::part(code-editor-base) {
       border: 1px solid var(--nile-color-neutral-200, #e5e7eb) !important;
       border-radius: 4px !important;
-      overflow: auto !important;
-      min-height: var(--dialog-editor-min-height, 300px) !important;
-    }
-    .st-code-editor-dialog nile-code-editor .cm-editor {
-      min-height: var(--dialog-editor-min-height, 300px) !important;
-    }
-    .st-code-editor-dialog nile-code-editor .cm-content {
-      min-height: var(--dialog-editor-min-height, 300px) !important;
     }
   `;
     document.head.appendChild(style);
@@ -4884,6 +4902,10 @@ class NileCodeEditor {
         this.dialogOpen = false;
         this.expandButtonClicked = false;
         this.trackedValue = null;
+        this.syncingFromDialog = false; // Flag to prevent inline editor from overwriting multiline content
+        this.userEditedInline = false; // Flag to track if user has typed in inline editor
+        this.dialogOriginalValue = ''; // Store original value when dialog opens
+        this.dialogCurrentValue = ''; // Track current value in dialog
     }
     edit(context) {
         if (!context.container) {
@@ -4891,7 +4913,10 @@ class NileCodeEditor {
             return;
         }
         this.context = context;
-        this.trackedValue = null;
+        // Initialize tracked value from context
+        this.trackedValue = String(context.value ?? '');
+        this.syncingFromDialog = false;
+        this.userEditedInline = false;
         // Inject global styles once
         injectCodeEditorStyles();
         // Check if we should show expand button (default: true)
@@ -4911,6 +4936,11 @@ class NileCodeEditor {
             this.editor.style.height = '100%';
             this.editor.style.boxSizing = 'border-box';
             this.editor.noborder = this.options?.noborder !== false;
+            // Enable multiline by default for inline editor to support paste and multiline content
+            this.editor.multiline = this.options?.multiline !== false;
+            this.editor.hasScroller = true;
+            // No line numbers for inline editor
+            this.editor.lineNumbers = false;
             editorContainer.appendChild(this.editor);
             this.wrapper.appendChild(editorContainer);
             // Create expand button
@@ -4944,6 +4974,11 @@ class NileCodeEditor {
             this.editor.style.height = '100%';
             this.editor.style.boxSizing = 'border-box';
             this.editor.noborder = this.options?.noborder !== false;
+            // Enable multiline by default for inline editor to support paste and multiline content
+            this.editor.multiline = this.options?.multiline !== false;
+            this.editor.hasScroller = true;
+            // No line numbers for inline editor
+            this.editor.lineNumbers = false;
             // Clear container and append editor
             context.container.innerHTML = '';
             context.container.appendChild(this.editor);
@@ -4994,8 +5029,17 @@ class NileCodeEditor {
     /**
      * Read the live value directly from CodeMirror's internal state,
      * bypassing debounced nile-change events and the possibly-stale .value property.
+     *
+     * Priority order:
+     * 1. trackedValue - always up to date from change events
+     * 2. CodeMirror internal state - for real-time reading
+     * 3. editor.value property - fallback
      */
     getLiveEditorValue() {
+        // Use tracked value if available (updated by change events)
+        if (this.trackedValue !== null) {
+            return this.trackedValue;
+        }
         if (!this.editor)
             return '';
         try {
@@ -5010,8 +5054,6 @@ class NileCodeEditor {
         catch {
             // Fall through to other methods
         }
-        if (this.trackedValue !== null)
-            return this.trackedValue;
         return this.editor.value ?? '';
     }
     /**
@@ -5022,6 +5064,8 @@ class NileCodeEditor {
             return;
         this.dialogOpen = true;
         this.expandButtonClicked = false; // Reset flag now that dialog is opening
+        // Store original value for cancel functionality
+        this.dialogOriginalValue = this.getLiveEditorValue();
         // Create dialog with configurable dimensions
         const dialogWidth = this.options?.dialogWidth || '600px';
         const dialogMaxHeight = this.options?.dialogMaxHeight || '80vh';
@@ -5032,26 +5076,26 @@ class NileCodeEditor {
         this.dialog.label = dialogTitle;
         this.dialog.style.setProperty('--width', dialogWidth);
         this.dialog.style.setProperty('--max-height', dialogMaxHeight);
-        // Create dialog content
+        // Create dialog content wrapper - flex column to handle fixed header/footer
+        const contentWrapper = document.createElement('div');
+        contentWrapper.style.display = 'flex';
+        contentWrapper.style.flexDirection = 'column';
+        contentWrapper.style.height = `calc(${dialogMaxHeight} - 60px)`; // Account for dialog header
+        contentWrapper.style.maxHeight = `calc(${dialogMaxHeight} - 60px)`;
+        // Create editor content area - this is the scrollable part
         const content = document.createElement('div');
         content.style.padding = '16px';
-        content.style.maxHeight = `calc(${dialogMaxHeight} - 80px)`;
+        content.style.paddingBottom = '8px';
+        content.style.flex = '1';
         content.style.overflow = 'auto';
+        content.style.minHeight = '0'; // Important for flex shrinking
         // Create full editor
         this.dialogEditor = document.createElement('nile-code-editor');
-        const minLines = this.options?.dialogMinLines ?? 20;
-        const currentValue = this.getLiveEditorValue();
-        const currentLineCount = (currentValue.match(/\n/g) || []).length + 1;
-        const paddingLines = Math.max(0, minLines - currentLineCount);
-        this.dialogEditor.value = currentValue + '\n'.repeat(paddingLines);
+        this.dialogEditor.value = this.dialogOriginalValue;
         this.dialogEditor.multiline = true;
         this.dialogEditor.lineNumbersMultiline = true;
         this.dialogEditor.hasScroller = true;
-        const lineHeightPx = 20;
-        const minHeightFromLines = `${minLines * lineHeightPx}px`;
-        this.dialogEditor.style.minHeight = `max(${dialogEditorHeight}, ${minHeightFromLines})`;
-        this.dialogEditor.style.maxHeight = `calc(${dialogMaxHeight} - 120px)`;
-        content.style.setProperty('--dialog-editor-min-height', `max(${dialogEditorHeight}, ${minHeightFromLines})`);
+        this.dialogEditor.style.minHeight = dialogEditorHeight;
         // Apply same options to dialog editor
         if (this.options?.language) {
             this.dialogEditor.language = this.options.language;
@@ -5078,38 +5122,44 @@ class NileCodeEditor {
             this.dialogEditor.customThemeCSS = this.options.customThemeCSS;
         }
         this.dialogEditor.expandable = false;
-        // Real-time sync: Update cell editor whenever dialog editor changes
+        // Initialize dialog current value
+        this.dialogCurrentValue = this.dialogOriginalValue;
+        // Track changes in dialog editor
         this.dialogEditor.addEventListener('nile-change', (e) => {
-            const dialogValue = e.detail?.value || '';
-            this.trackedValue = dialogValue;
-            if (this.editor) {
-                this.editor.value = dialogValue;
-            }
-            if (this.context) {
-                this.context.onChange(dialogValue);
-            }
+            this.dialogCurrentValue = e.detail?.value ?? '';
         });
         content.appendChild(this.dialogEditor);
-        this.dialog.appendChild(content);
-        // Handle dialog close events (clicking X button - stay in edit mode)
+        contentWrapper.appendChild(content);
+        // Create footer with Ok button - fixed at bottom
+        const footer = document.createElement('div');
+        footer.style.display = 'flex';
+        footer.style.justifyContent = 'flex-end';
+        footer.style.padding = '12px 16px';
+        footer.style.borderTop = '1px solid var(--nile-color-neutral-200, #e5e7eb)';
+        footer.style.gap = '8px';
+        footer.style.flexShrink = '0'; // Prevent footer from shrinking
+        footer.style.backgroundColor = 'var(--nile-color-neutral-0, #ffffff)';
+        const okButton = document.createElement('nile-button');
+        okButton.setAttribute('variant', 'primary');
+        okButton.textContent = 'Ok';
+        okButton.addEventListener('click', () => {
+            this.applyDialogChanges();
+        });
+        footer.appendChild(okButton);
+        contentWrapper.appendChild(footer);
+        this.dialog.appendChild(contentWrapper);
+        // Handle dialog close events (clicking X button - cancel changes)
         this.dialog.addEventListener('nile-request-close', (e) => {
-            const customEvent = e;
-            // Check if close was triggered by overlay click (clicking outside)
-            if (customEvent.detail?.source === 'overlay') {
-                // Clicking outside the dialog - save and exit edit mode
-                this.closeDialog(true);
-            }
-            else {
-                // Clicking X button - stay in edit mode
-                this.closeDialog(false);
-            }
+            e.preventDefault();
+            // X button or overlay click - cancel changes
+            this.cancelDialogChanges();
         });
-        // Handle Escape key in dialog - stay in edit mode
+        // Handle Escape key in dialog - cancel changes
         this.dialog.addEventListener('keydown', (e) => {
             if (e.key === 'Escape') {
                 e.preventDefault();
                 e.stopPropagation();
-                this.closeDialog(false);
+                this.cancelDialogChanges();
             }
         });
         // Append to body and show
@@ -5126,34 +5176,113 @@ class NileCodeEditor {
         }, 0);
     }
     /**
-     * Close the dialog and optionally save/exit edit mode
+     * Get the current value from the dialog editor
      */
-    closeDialog(saveAndExit = false) {
+    getDialogEditorValue() {
+        // Use tracked value from change events (most reliable)
+        if (this.dialogCurrentValue) {
+            return this.dialogCurrentValue.replace(/\n+$/, '');
+        }
+        if (!this.dialogEditor)
+            return this.dialogOriginalValue;
+        // Try to get value from CodeMirror's internal state
+        try {
+            const shadowRoot = this.dialogEditor.shadowRoot;
+            if (shadowRoot) {
+                const cmEditor = shadowRoot.querySelector('.cm-editor');
+                if (cmEditor?.cmView?.view) {
+                    const value = cmEditor.cmView.view.state.doc.toString();
+                    return value.replace(/\n+$/, '');
+                }
+            }
+        }
+        catch {
+            // Fall through to other methods
+        }
+        // Fallback to value property
+        const value = this.dialogEditor.value;
+        return (value ?? '').replace(/\n+$/, '');
+    }
+    /**
+     * Apply changes from dialog and close it
+     */
+    applyDialogChanges() {
+        if (!this.dialogOpen)
+            return;
+        // Get the value from dialog editor - try multiple sources
+        let dialogValue = this.dialogCurrentValue;
+        // If no tracked value, try reading directly from dialog editor
+        if (!dialogValue && this.dialogEditor) {
+            try {
+                const shadowRoot = this.dialogEditor.shadowRoot;
+                if (shadowRoot) {
+                    const cmEditor = shadowRoot.querySelector('.cm-editor');
+                    if (cmEditor?.cmView?.view) {
+                        dialogValue = cmEditor.cmView.view.state.doc.toString();
+                    }
+                }
+            }
+            catch {
+                // Fall through
+            }
+            // Fallback to value property
+            if (!dialogValue) {
+                dialogValue = this.dialogEditor.value ?? '';
+            }
+        }
+        // Strip trailing newlines
+        dialogValue = (dialogValue || '').replace(/\n+$/, '');
+        // Update tracked value and inline editor
+        this.trackedValue = dialogValue;
+        this.userEditedInline = false;
+        this.syncingFromDialog = true;
+        if (this.editor) {
+            this.editor.value = dialogValue;
+        }
+        setTimeout(() => {
+            this.syncingFromDialog = false;
+        }, 0);
+        // Notify context of the change
+        if (this.context) {
+            this.context.onChange(dialogValue);
+        }
+        // Close dialog
+        this.closeDialogUI();
+        // Refocus the cell editor to stay in edit mode
+        setTimeout(() => {
+            this.focusEditor();
+        }, 50);
+    }
+    /**
+     * Cancel dialog changes and revert to original value
+     */
+    cancelDialogChanges() {
         if (!this.dialogOpen)
             return;
-        // Reset flag immediately so document click handler works
+        // Revert to original value (don't change anything)
+        // trackedValue and inline editor remain as they were before dialog opened
+        // Close dialog
+        this.closeDialogUI();
+        // Refocus the cell editor to stay in edit mode
+        setTimeout(() => {
+            this.focusEditor();
+        }, 50);
+    }
+    /**
+     * Close and remove the dialog UI
+     */
+    closeDialogUI() {
         this.dialogOpen = false;
-        // Close and remove dialog
+        this.dialogCurrentValue = '';
         if (this.dialog) {
             this.dialog.open = false;
             const dialogRef = this.dialog;
-            const dialogEditorRef = this.dialogEditor;
             this.dialog = undefined;
             this.dialogEditor = undefined;
             // Remove from DOM after animation
             setTimeout(() => {
                 dialogRef?.remove();
             }, 200);
-            if (saveAndExit && this.context) {
-                // Save and exit edit mode
-                this.context.onSave(this.getCurrentValue());
-            }
-            else {
-                // Refocus the cell editor to stay in edit mode
-                setTimeout(() => {
-                    this.focusEditor();
-                }, 50);
-            }
         }
     }
     /**
@@ -5315,6 +5444,11 @@ class NileCodeEditor {
         const changeHandler = (e) => {
             const customEvent = e;
             const newValue = customEvent.detail?.value ?? '';
+            // Don't process if we're syncing from dialog (prevents feedback loop)
+            if (this.syncingFromDialog) {
+                return;
+            }
+            // Update tracked value
             this.trackedValue = newValue;
             context.onChange(newValue);
         };
@@ -5380,6 +5514,11 @@ class NileCodeEditor {
         this.expandButton = undefined;
         this.context = undefined;
         this.expandButtonClicked = false;
+        this.syncingFromDialog = false;
+        this.trackedValue = null;
+        this.userEditedInline = false;
+        this.dialogOriginalValue = '';
+        this.dialogCurrentValue = '';
     }
     focus() {
         this.editor?.focus();
@@ -6002,10 +6141,10 @@ class StCellComponent {
             this.editorCleanup = undefined;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: StCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", 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.4", ngImport: i0, type: StCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", 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.3", ngImport: i0, type: StCellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", 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: [{
@@ -6777,10 +6916,10 @@ class ValidationLoggerService {
     getLogSize() {
         return this.logEntries.length;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: ValidationLoggerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: ValidationLoggerService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ValidationLoggerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ValidationLoggerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: ValidationLoggerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ValidationLoggerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -6987,10 +7126,10 @@ class JsonSchemaValidatorService {
                 return error.message || `Field '${field}' is invalid`;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: JsonSchemaValidatorService, deps: [{ token: ValidationLoggerService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: JsonSchemaValidatorService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: JsonSchemaValidatorService, deps: [{ token: ValidationLoggerService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: JsonSchemaValidatorService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: JsonSchemaValidatorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: JsonSchemaValidatorService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -7038,10 +7177,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.3", ngImport: i0, type: VirtualScrollService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: VirtualScrollService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VirtualScrollService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VirtualScrollService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: VirtualScrollService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VirtualScrollService, decorators: [{
             type: Injectable
         }] });
 
@@ -7116,10 +7255,10 @@ class StPaginationComponent {
             this.tableState.setPageSize(newPageSize);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: StPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.3", 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.4", ngImport: i0, type: StPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", 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.3", ngImport: i0, type: StPaginationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", 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: [{
@@ -7253,10 +7392,10 @@ class StHeaderComponent {
         };
         this.columnMoved.emit(moveEvent);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: StHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", 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.4", ngImport: i0, type: StHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", 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.3", ngImport: i0, type: StHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", 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: [{
@@ -7434,10 +7573,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.3", ngImport: i0, type: StTableActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", 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.4", ngImport: i0, type: StTableActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", 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.3", ngImport: i0, type: StTableActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", 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: [{
@@ -7795,10 +7934,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.3", ngImport: i0, type: StColumnFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", 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.4", ngImport: i0, type: StColumnFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", 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.3", ngImport: i0, type: StColumnFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", 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: [{
@@ -8029,10 +8168,10 @@ 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.3", ngImport: i0, type: StColumnMenuDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", 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.4", ngImport: i0, type: StColumnMenuDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", 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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: StColumnMenuDropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", 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"] }]
         }], propDecorators: { isOpen: [{
@@ -8195,10 +8334,10 @@ class StRowActionsDropdownComponent {
     onDropdownClick(event) {
         event.stopPropagation();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: StRowActionsDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", 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.4", ngImport: i0, type: StRowActionsDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: StRowActionsDropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", 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"] }]
         }], propDecorators: { isOpen: [{
@@ -8279,10 +8418,10 @@ class StKeyboardNavigationDirective {
         };
         return map[key];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: StKeyboardNavigationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.3", 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.4", ngImport: i0, type: StKeyboardNavigationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", 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.3", ngImport: i0, type: StKeyboardNavigationDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: StKeyboardNavigationDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[stKeyboardNavigation]',
@@ -8394,10 +8533,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.3", ngImport: i0, type: StColumnResizeDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.3", 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.4", ngImport: i0, type: StColumnResizeDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", 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.3", ngImport: i0, type: StColumnResizeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: StColumnResizeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[stColumnResize]',
@@ -9521,10 +9660,10 @@ class StTableComponent {
         this.visibleRows$.complete();
         this.internalData$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: StTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", 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.4", ngImport: i0, type: StTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", 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.3", ngImport: i0, type: StTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: StTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-table', standalone: true, imports: [
                         CommonModule,
@@ -9628,10 +9767,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.3", ngImport: i0, type: StColumnVisibilityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", 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.4", ngImport: i0, type: StColumnVisibilityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", 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.3", ngImport: i0, type: StColumnVisibilityComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", 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: [{
@@ -9647,10 +9786,10 @@ class StAddColumnButtonComponent {
         event.stopPropagation();
         this.addColumnClicked.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: StAddColumnButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", 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.4", ngImport: i0, type: StAddColumnButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", 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.3", ngImport: i0, type: StAddColumnButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", 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: [{
@@ -9843,10 +9982,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.3", 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.3", 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.4", 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.4", 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.3", ngImport: i0, type: ColumnEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", 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: [{
@@ -9941,10 +10080,10 @@ class StColumnEditorModalComponent {
     onModalContentClick(event) {
         event.stopPropagation();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: StColumnEditorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.3", 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.4", ngImport: i0, type: StColumnEditorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", 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.3", ngImport: i0, type: StColumnEditorModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", 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: [{
@@ -10051,10 +10190,10 @@ class StSheetActionsComponent {
             right: `${window.innerWidth - rect.right}px`
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: StSheetActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", 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.4", ngImport: i0, type: StSheetActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", 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.3", ngImport: i0, type: StSheetActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", 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: [{
@@ -10198,10 +10337,10 @@ class StSheetComponent {
     get headerVariant() {
         return this.config?.display?.headerVariant || 'default';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: StSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", 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.4", ngImport: i0, type: StSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", 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.3", ngImport: i0, type: StSheetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", 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: [{
@@ -10312,10 +10451,10 @@ class AutosaveService {
         this.dirtyState.clear();
         this.lastSaveTime.clear();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: AutosaveService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: AutosaveService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AutosaveService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AutosaveService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: AutosaveService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AutosaveService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -10689,10 +10828,10 @@ class StWorkbookComponent {
             this.tableComponent.scrollToLastRow(focusFirstCell);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: StWorkbookComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", 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.4", ngImport: i0, type: StWorkbookComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", 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.3", ngImport: i0, type: StWorkbookComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", 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: [{
@@ -10713,10 +10852,10 @@ class ClickOutsideDirective {
             this.clickOutside.emit();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.3", 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.4", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", 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.3", ngImport: i0, type: ClickOutsideDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ClickOutsideDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clickOutside]',
@@ -10735,11 +10874,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", 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.3", ngImport: i0, type: SharedTableComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.3", ngImport: i0, type: SharedTableComponentsModule, imports: [ColumnEditorComponent], exports: [ColumnEditorComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: SharedTableComponentsModule, imports: [ColumnEditorComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SharedTableComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: SharedTableComponentsModule, imports: [ColumnEditorComponent], exports: [ColumnEditorComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SharedTableComponentsModule, imports: [ColumnEditorComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: SharedTableComponentsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SharedTableComponentsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -10752,8 +10891,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
         }] });
 
 class SmartTableModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: SmartTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.3", ngImport: i0, type: SmartTableModule, imports: [SharedTableComponentsModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SmartTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: SmartTableModule, imports: [SharedTableComponentsModule,
             StCellComponent,
             StTableComponent,
             StHeaderComponent,
@@ -10787,7 +10926,7 @@ class SmartTableModule {
             ClickOutsideDirective,
             StColumnResizeDirective,
             StKeyboardNavigationDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: SmartTableModule, providers: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SmartTableModule, providers: [
             VirtualScrollService
         ], imports: [SharedTableComponentsModule,
             StCellComponent,
@@ -10805,7 +10944,7 @@ class SmartTableModule {
             StSheetActionsComponent,
             StWorkbookComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: SmartTableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SmartTableModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -11089,10 +11228,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.3", ngImport: i0, type: DefinitionBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DefinitionBuilderService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DefinitionBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DefinitionBuilderService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DefinitionBuilderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DefinitionBuilderService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -11458,10 +11597,10 @@ class DefinitionExportService {
         document.body.removeChild(link);
         URL.revokeObjectURL(url);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DefinitionExportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DefinitionExportService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DefinitionExportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DefinitionExportService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DefinitionExportService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DefinitionExportService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -11810,10 +11949,10 @@ class DefinitionImportService {
             return errorResult;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", 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.3", ngImport: i0, type: DefinitionImportService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", 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.4", ngImport: i0, type: DefinitionImportService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DefinitionImportService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DefinitionImportService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -11913,10 +12052,10 @@ class BuilderToolbarComponent {
     onTogglePreview() {
         this.previewToggled.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", 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.3", 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.4", 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.4", 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.3", ngImport: i0, type: BuilderToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", 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: [{
@@ -12029,10 +12168,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.3", ngImport: i0, type: ColumnListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", 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.4", ngImport: i0, type: ColumnListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", 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.3", ngImport: i0, type: ColumnListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", 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: [{
@@ -12165,10 +12304,10 @@ class TableConfigEditorComponent {
             this.configUpdated.emit(updates);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", 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.3", 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.4", 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.4", 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.3", ngImport: i0, type: TableConfigEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", 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: [{
@@ -12290,10 +12429,10 @@ class SampleDataGeneratorService {
     generateBooleanValue(rowIndex) {
         return rowIndex % 2 === 0;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: SampleDataGeneratorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: SampleDataGeneratorService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SampleDataGeneratorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SampleDataGeneratorService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: SampleDataGeneratorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SampleDataGeneratorService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -12348,10 +12487,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.3", ngImport: i0, type: BuilderPreviewComponent, deps: [{ token: SampleDataGeneratorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", 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.4", ngImport: i0, type: BuilderPreviewComponent, deps: [{ token: SampleDataGeneratorService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", 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.3", ngImport: i0, type: BuilderPreviewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", 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: [{
@@ -12446,10 +12585,10 @@ class DefinitionBuilderComponent {
     onColumnCancel() {
         this.builderService.clearSelection();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DefinitionBuilderComponent, deps: [{ token: DefinitionBuilderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", 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.4", ngImport: i0, type: DefinitionBuilderComponent, deps: [{ token: DefinitionBuilderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", 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.3", ngImport: i0, type: DefinitionBuilderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DefinitionBuilderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-definition-builder', standalone: true, imports: [
                         CommonModule,
@@ -12470,8 +12609,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
  * Module for the Visual UI Builder components
  */
 class DefinitionBuilderModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DefinitionBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.3", ngImport: i0, type: DefinitionBuilderModule, imports: [SmartTableModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DefinitionBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: DefinitionBuilderModule, imports: [SmartTableModule,
             SharedTableComponentsModule,
             DefinitionBuilderComponent,
             BuilderToolbarComponent,
@@ -12483,7 +12622,7 @@ class DefinitionBuilderModule {
             TableConfigEditorComponent,
             BuilderPreviewComponent,
             SharedTableComponentsModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DefinitionBuilderModule, imports: [SmartTableModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DefinitionBuilderModule, imports: [SmartTableModule,
             SharedTableComponentsModule,
             DefinitionBuilderComponent,
             BuilderToolbarComponent,
@@ -12491,7 +12630,7 @@ class DefinitionBuilderModule {
             TableConfigEditorComponent,
             BuilderPreviewComponent, SharedTableComponentsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DefinitionBuilderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DefinitionBuilderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -12544,10 +12683,10 @@ class RowValidationService {
             };
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: RowValidationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: RowValidationService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: RowValidationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: RowValidationService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: RowValidationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: RowValidationService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'