@aquera/ngx-smart-table 0.0.27 → 0.0.31

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

@@ -1,7 +1,7 @@
 import { BehaviorSubject, Subject, isObservable, fromEvent, merge } from 'rxjs';
 import { distinctUntilChanged, map, throttleTime } from 'rxjs/operators';
 import * as i0 from '@angular/core';
-import { inject, DestroyRef, input, output, ChangeDetectorRef, computed, ElementRef, HostListener, ViewChild, Component, Injectable, Input, CUSTOM_ELEMENTS_SCHEMA, EventEmitter, Output, ChangeDetectionStrategy, Directive, signal, effect, NgModule } from '@angular/core';
+import { inject, DestroyRef, input, output, ChangeDetectorRef, computed, ElementRef, HostListener, ViewChild, CUSTOM_ELEMENTS_SCHEMA, Component, Injectable, Input, EventEmitter, Output, ChangeDetectionStrategy, Directive, Injector, signal, effect, afterNextRender, NgModule } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
@@ -1922,6 +1922,7 @@ const DEFAULT_TABLE_CONFIG = {
     display: {
         stickyHeader: true,
         maxHeight: 300,
+        stickyColumnBackgroundFullRow: false,
         virtualScroll: {
             enabled: false,
             itemSize: 48,
@@ -1974,6 +1975,10 @@ function mergeTableConfig(userConfig) {
             virtualScroll: {
                 ...DEFAULT_TABLE_CONFIG.display?.virtualScroll,
                 ...userConfig.display?.virtualScroll
+            },
+            focusedCell: {
+                ...DEFAULT_TABLE_CONFIG.display?.focusedCell,
+                ...userConfig.display?.focusedCell
             }
         },
         features: {
@@ -2583,6 +2588,48 @@ class Cell {
         }
         return true;
     }
+    /**
+     * Apply a new value from an inline display control (e.g. `nile-checkbox`) without entering edit mode.
+     * Runs the same validation, dirty-state, history, and save hooks as {@link saveEdit}.
+     */
+    commitDisplayValue(newValue) {
+        if (!this.canEdit()) {
+            return false;
+        }
+        const valueBeforeAttempt = this.state.value;
+        if (this.columnConfig.hooks?.beforeSave) {
+            this.columnConfig.hooks.beforeSave(this.createEvent(newValue, valueBeforeAttempt));
+        }
+        let parsedValue = newValue;
+        if (this.columnConfig.parser) {
+            try {
+                parsedValue = this.columnConfig.parser.parse(newValue);
+            }
+            catch (error) {
+                this.state.error = `Failed to parse value: ${error}`;
+                return false;
+            }
+        }
+        const previousValue = this.state.value;
+        this.state.value = parsedValue;
+        const validationResult = this.validate();
+        if (!validationResult.valid) {
+            this.state.value = previousValue;
+            return false;
+        }
+        this.state.isDirty = this.state.value !== this.state.originalValue;
+        this.state.isEditing = false;
+        this.state.lifecycleState = CellLifecycleState.DISPLAY;
+        this.state.lastModified = new Date();
+        this.saveToHistory();
+        if (this.columnConfig.hooks?.onSave) {
+            this.columnConfig.hooks.onSave(this.createEvent(parsedValue, previousValue));
+        }
+        if (this.columnConfig.hooks?.afterEdit) {
+            this.columnConfig.hooks.afterEdit(this.createEvent(parsedValue));
+        }
+        return true;
+    }
     /**
      * Cancel edit and revert to previous value
      */
@@ -3890,15 +3937,128 @@ class NileSelectEditor {
         // Clear container and append select
         context.container.innerHTML = '';
         context.container.appendChild(this.select);
-        // Focus the select after render
+        // Focus after mount; open dropdown only once nile-popup exists (avoids null this.popup in nile-select)
+        const openOnEdit = this.options.openDropdownOnEdit !== false;
         setTimeout(() => {
+            void this.activateSelectAfterMount(openOnEdit);
+        }, 50);
+    }
+    async activateSelectAfterMount(openOnEdit) {
+        try {
+            this.select?.focus();
+        }
+        catch {
+            // ignore
+        }
+        if (!openOnEdit || !this.select || this.options.disabled) {
+            return;
+        }
+        await this.openNileSelectDropdownSafely();
+    }
+    /** Lit @query('nile-popup') / .select — must exist before handleOpenChange touches this.popup.popup */
+    isNileSelectPopupMounted(select) {
+        return !!select.shadowRoot?.querySelector('nile-popup');
+    }
+    async invokeShowHandlingPromise(host) {
+        if (typeof host.show !== 'function') {
+            return;
+        }
+        try {
+            const out = host.show();
+            if (out != null && typeof out.then === 'function') {
+                await out.catch(() => undefined);
+            }
+        }
+        catch {
+            // sync throw from show()
+        }
+    }
+    async openNileSelectDropdownSafely() {
+        const select = this.select;
+        if (!select) {
+            return;
+        }
+        try {
+            await customElements.whenDefined('nile-select');
+        }
+        catch {
+            // ignore
+        }
+        if (this.options.enableVirtualScroll) {
             try {
-                this.select?.focus();
+                await customElements.whenDefined('nile-virtual-select');
             }
-            catch (e) {
-                // Ignore errors
+            catch {
+                // ignore — not registered in all environments
+            }
+            // Same idea as nile-popup: inner host may not exist until Lit finishes a pass (or several).
+            const maxVirtualWaitPasses = 50;
+            for (let i = 0; i < maxVirtualWaitPasses; i++) {
+                const vs = select.shadowRoot?.querySelector('nile-virtual-select');
+                if (vs) {
+                    await this.invokeShowHandlingPromise(vs);
+                    return;
+                }
+                const lit = select;
+                if (lit.updateComplete?.then) {
+                    try {
+                        await lit.updateComplete;
+                    }
+                    catch {
+                        // ignore
+                    }
+                }
+                await new Promise(resolve => requestAnimationFrame(() => resolve()));
             }
-        }, 50);
+            return;
+        }
+        const maxWaitPasses = 50;
+        for (let i = 0; i < maxWaitPasses; i++) {
+            if (this.isNileSelectPopupMounted(select)) {
+                break;
+            }
+            const lit = select;
+            if (lit.updateComplete?.then) {
+                try {
+                    await lit.updateComplete;
+                }
+                catch {
+                    // ignore
+                }
+            }
+            await new Promise(resolve => requestAnimationFrame(() => resolve()));
+        }
+        if (!this.isNileSelectPopupMounted(select)) {
+            return;
+        }
+        const host = select;
+        for (let attempt = 0; attempt < 5; attempt++) {
+            if (!this.isNileSelectPopupMounted(select)) {
+                return;
+            }
+            try {
+                if (typeof host.show === 'function') {
+                    await this.invokeShowHandlingPromise(host);
+                }
+                else {
+                    host.open = true;
+                }
+                return;
+            }
+            catch {
+                // ignore
+            }
+            await new Promise(resolve => setTimeout(resolve, 40));
+            const lit = select;
+            if (lit.updateComplete?.then) {
+                try {
+                    await lit.updateComplete;
+                }
+                catch {
+                    // ignore
+                }
+            }
+        }
     }
     /**
      * Set the initial value for the select
@@ -5191,6 +5351,11 @@ class NileChipEditor {
  * Custom editor using NileCodeEditor from @aquera/nile-elements
  * This provides code editing capabilities with syntax highlighting for table cells
  */
+/**
+ * Completion UI should sit above sticky table UI, workbook tabs, and row/column dropdowns
+ * (see `TableZIndex`, max ~9999). Tooltip mount target is configured at runtime (no extra package deps).
+ */
+const CODE_MIRROR_AUTOCOMPLETE_Z_INDEX = 2_147_483_646;
 /**
  * Inject global styles for nile-code-editor in table cells
  */
@@ -5211,7 +5376,8 @@ function injectCodeEditorStyles() {
       width: 100%;
       height: 100%;
       max-height: 32px;
-      overflow: hidden;
+      overflow-x: hidden;
+      overflow-y: visible;
       font-size: inherit !important;
       font-family: inherit !important;
       line-height: inherit !important;
@@ -5224,7 +5390,8 @@ function injectCodeEditorStyles() {
       font-size: inherit !important;
       font-family: inherit !important;
       line-height: inherit !important;
-      overflow: hidden !important;
+      overflow-x: hidden !important;
+      overflow-y: visible !important;
     }
     /* Ensure proper sizing within table cell */
     .st-nile-code-editor {
@@ -5233,12 +5400,13 @@ function injectCodeEditorStyles() {
       max-height: 32px;
       min-height: 28px;
       font-size: inherit !important;
-      overflow: hidden;
+      overflow-x: hidden;
+      overflow-y: visible;
     }
-    /* CodeMirror content should inherit font size and be constrained */
+    /* Clip scrollable text in the scroller only; .cm-editor hosts tooltips and must not clip them */
     nile-code-editor.st-cell-editor .cm-editor {
-      max-height: 32px !important;
-      overflow: hidden !important;
+      max-height: none !important;
+      overflow: visible !important;
     }
     nile-code-editor.st-cell-editor .cm-scroller {
       max-height: 32px !important;
@@ -5264,7 +5432,8 @@ function injectCodeEditorStyles() {
       min-width: 0;
       height: 100%;
       max-height: 32px;
-      overflow: hidden;
+      overflow-x: hidden;
+      overflow-y: visible;
     }
     .st-code-editor-wrapper .st-expand-button {
       display: flex;
@@ -5277,13 +5446,13 @@ function injectCodeEditorStyles() {
       border: none;
       background: transparent;
       cursor: pointer;
-      color: var(--nile-color-neutral-500, #6b7280);
+      color: var(--nile-color-neutral-500);
       border-radius: 4px;
       transition: all 0.2s;
     }
     .st-code-editor-wrapper .st-expand-button:hover {
-      background: var(--nile-color-neutral-100, #f3f4f6);
-      color: var(--nile-color-neutral-700, #374151);
+      background: var(--nile-color-neutral-100);
+      color: var(--nile-color-neutral-700);
     }
     /* Dialog code editor styling - fixed header/footer, scrollable content */
     .st-code-editor-dialog::part(panel) {
@@ -5307,12 +5476,119 @@ function injectCodeEditorStyles() {
       display: block;
     }
     .st-code-editor-dialog nile-code-editor::part(code-editor-base) {
-      border: 1px solid var(--nile-color-neutral-200, #e5e7eb) !important;
+      border: 1px solid var(--nile-color-neutral-200) !important;
       border-radius: 4px !important;
     }
+    /* Autocomplete — CodeMirror-style panel (often on document.body when portaled) */
+    .cm-tooltip.cm-tooltip-autocomplete,
+    .cm-tooltip-autocomplete {
+      z-index: ${CODE_MIRROR_AUTOCOMPLETE_Z_INDEX} !important;
+      max-height: min(40vh, 320px);
+      overflow-y: auto;
+      overflow-x: hidden;
+      box-sizing: border-box;
+      padding: 4px 0;
+      box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.06);
+      border-radius: 8px;
+      border: 1px solid var(--nile-color-neutral-200);
+      background: var(--nile-color-neutral-0);
+      font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+    }
+    .cm-tooltip.cm-tooltip-autocomplete ul,
+    .cm-tooltip-autocomplete ul {
+      margin: 0;
+      padding: 2px 0;
+      list-style: none;
+    }
+    .cm-tooltip.cm-tooltip-autocomplete completion-section,
+    .cm-tooltip-autocomplete completion-section {
+      display: block;
+      padding: 6px 12px 4px;
+      font-size: 11px;
+      font-weight: 600;
+      letter-spacing: 0.02em;
+      color: var(--nile-color-neutral-500);
+      text-transform: uppercase;
+    }
+    .cm-tooltip.cm-tooltip-autocomplete li,
+    .cm-tooltip-autocomplete li {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 8px;
+      padding: 6px 12px;
+      margin: 0 4px;
+      border-radius: 6px;
+      cursor: default;
+      font-size: 13px;
+      line-height: 1.4;
+      color: var(--nile-color-neutral-800);
+    }
+    .cm-tooltip.cm-tooltip-autocomplete li:hover:not([aria-selected="true"]),
+    .cm-tooltip-autocomplete li:hover:not([aria-selected="true"]) {
+      background: var(--nile-color-neutral-50);
+    }
+    .cm-tooltip.cm-tooltip-autocomplete li[aria-selected="true"],
+    .cm-tooltip-autocomplete li[aria-selected="true"] {
+      background: rgba(59, 130, 246, 0.12);
+      color: var(--nile-color-neutral-900);
+    }
+    .cm-tooltip.cm-tooltip-autocomplete .cm-completionIcon,
+    .cm-tooltip-autocomplete .cm-completionIcon {
+      flex-shrink: 0;
+      opacity: 0.75;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .cm-tooltip.cm-tooltip-autocomplete .cm-completionLabel,
+    .cm-tooltip-autocomplete .cm-completionLabel {
+      flex: 0 1 auto;
+      font-weight: 500;
+    }
+    .cm-tooltip.cm-tooltip-autocomplete .cm-completionMatchedText,
+    .cm-tooltip-autocomplete .cm-completionMatchedText {
+      font-weight: 600;
+      color: var(--nile-color-primary-600);
+    }
+    .cm-tooltip.cm-tooltip-autocomplete li[aria-selected="true"] .cm-completionMatchedText,
+    .cm-tooltip-autocomplete li[aria-selected="true"] .cm-completionMatchedText {
+      color: var(--nile-color-primary-700);
+    }
+    .cm-tooltip.cm-tooltip-autocomplete .cm-completionDetail,
+    .cm-tooltip-autocomplete .cm-completionDetail {
+      flex: 1 1 auto;
+      margin-left: 0.25em;
+      font-size: 12px;
+      font-weight: 400;
+      font-style: italic;
+      color: var(--nile-color-neutral-500);
+      text-align: right;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .cm-tooltip.cm-tooltip-autocomplete li[aria-selected="true"] .cm-completionDetail,
+    .cm-tooltip-autocomplete li[aria-selected="true"] .cm-completionDetail {
+      color: var(--nile-color-neutral-600);
+    }
+    .cm-tooltip.cm-tooltip-autocomplete.cm-tooltip-autocomplete-disabled,
+    .cm-tooltip-autocomplete.cm-tooltip-autocomplete-disabled {
+      opacity: 0.6;
+      pointer-events: none;
+    }
   `;
     document.head.appendChild(style);
 }
+/** True if the event path includes a CodeMirror tooltip (completion / hover — often under document.body). */
+function eventPathTouchesCodeMirrorTooltip(path) {
+    for (const element of path) {
+        if (element instanceof Element && element.closest?.('.cm-tooltip')) {
+            return true;
+        }
+    }
+    return false;
+}
 /**
  * Custom editor that uses NileCodeEditor component
  * Provides code editing with syntax highlighting for table cells
@@ -5324,11 +5600,40 @@ class NileCodeEditor {
         this.eventListeners = [];
         this.dialogOpen = false;
         this.expandButtonClicked = false;
+        /** Pointer is down on a CodeMirror tooltip — skip blur-save so completion clicks are not treated as leaving the cell */
+        this.codeMirrorUiPointerDown = 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 = null; // Track current value in dialog
+        this.onNileCodeMirrorAfterUpdate = (e) => {
+            const detail = e.detail;
+            this.attachCodeMirrorTooltipsToBody(detail?.codeMirrorInstance);
+        };
+    }
+    /**
+     * Parent CodeMirror tooltips to `document.body` so autocomplete is not clipped by the table/cell
+     * overflow chain. Uses runtime `import()` only — no extra entries in this library's package.json;
+     * modules resolve from the app via `@aquera/nile-elements` / `codemirror` (unchanged consumer graph).
+     */
+    attachCodeMirrorTooltipsToBody(view) {
+        if (!view?.dispatch)
+            return;
+        void Promise.all([import('@codemirror/state'), import('@codemirror/view')])
+            .then(([{ StateEffect }, { tooltips }]) => {
+            try {
+                view.dispatch({
+                    effects: StateEffect.appendConfig.of([tooltips({ parent: document.body })]),
+                });
+            }
+            catch {
+                // View may be tearing down
+            }
+        })
+            .catch(() => {
+            /* optional: app bundle without codemirror split chunks */
+        });
     }
     edit(context) {
         if (!context.container) {
@@ -5545,6 +5850,7 @@ class NileCodeEditor {
             this.dialogEditor.customThemeCSS = this.options.customThemeCSS;
         }
         this.dialogEditor.expandable = false;
+        this.dialogEditor.addEventListener('nile-after-update', this.onNileCodeMirrorAfterUpdate);
         // Initialize dialog current value
         this.dialogCurrentValue = this.dialogOriginalValue;
         // Track changes in dialog editor
@@ -5558,10 +5864,10 @@ class NileCodeEditor {
         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.borderTop = '1px solid var(--nile-color-neutral-200)';
         footer.style.gap = '8px';
         footer.style.flexShrink = '0'; // Prevent footer from shrinking
-        footer.style.backgroundColor = 'var(--nile-color-neutral-0, #ffffff)';
+        footer.style.backgroundColor = 'var(--nile-color-neutral-0)';
         const okButton = document.createElement('nile-button');
         okButton.setAttribute('variant', 'primary');
         okButton.textContent = 'Ok';
@@ -5697,6 +6003,7 @@ class NileCodeEditor {
         this.dialogOpen = false;
         this.dialogCurrentValue = null;
         if (this.dialog) {
+            this.dialogEditor?.removeEventListener('nile-after-update', this.onNileCodeMirrorAfterUpdate);
             this.dialog.open = false;
             const dialogRef = this.dialog;
             this.dialog = undefined;
@@ -5801,6 +6108,8 @@ class NileCodeEditor {
     setupEventListeners(context) {
         if (!this.editor)
             return;
+        this.editor.addEventListener('nile-after-update', this.onNileCodeMirrorAfterUpdate);
+        this.eventListeners.push({ event: 'nile-after-update', handler: this.onNileCodeMirrorAfterUpdate });
         const validateOnSave = this.options?.validateOnSave !== false;
         // Handle keyboard events
         const keydownHandler = (e) => {
@@ -5832,6 +6141,10 @@ class NileCodeEditor {
                 this.expandButtonClicked = false;
                 return;
             }
+            // Completion / hover UI is on document.body; blur can fire before the completion applies
+            if (this.codeMirrorUiPointerDown) {
+                return;
+            }
             // Save and exit edit mode
             this.saveValue(context, validateOnSave);
         };
@@ -5845,6 +6158,19 @@ class NileCodeEditor {
             }
             // Use composedPath to handle Shadow DOM boundaries
             const path = e.composedPath();
+            // CodeMirror tooltips are portaled to body; our capture listener runs before CM's mousedown.
+            // Do not save/close the cell — let the completion list handle the click.
+            if (eventPathTouchesCodeMirrorTooltip(path)) {
+                this.codeMirrorUiPointerDown = true;
+                const clearCmUi = () => {
+                    this.codeMirrorUiPointerDown = false;
+                    document.removeEventListener('mouseup', clearCmUi, true);
+                    document.removeEventListener('pointerup', clearCmUi, true);
+                };
+                document.addEventListener('mouseup', clearCmUi, true);
+                document.addEventListener('pointerup', clearCmUi, true);
+                return;
+            }
             // Check if any element in the path is our wrapper, editor, or expand button
             for (const element of path) {
                 if (element === this.wrapper || element === this.editor || element === this.expandButton) {
@@ -5912,6 +6238,7 @@ class NileCodeEditor {
         }
         // Close dialog if open
         if (this.dialogOpen && this.dialog) {
+            this.dialogEditor?.removeEventListener('nile-after-update', this.onNileCodeMirrorAfterUpdate);
             this.dialog.open = false;
             this.dialog.remove();
             this.dialog = undefined;
@@ -5967,6 +6294,93 @@ class NileCodeEditor {
     }
 }
 
+/**
+ * Boolean cell editor using `<nile-checkbox>` from @aquera/nile-elements`.
+ *
+ * For display (inline checkbox vs Yes/No text), set `booleanDisplayAsCheckbox` on the column config
+ * (`Columns.nileCheckbox` defaults it to `true`; pass `booleanDisplayAsCheckbox: false` for text until edit).
+ */
+/**
+ * Uses Nile checkbox styling/behavior instead of a native `<input type="checkbox">`.
+ */
+class NileCheckboxEditor {
+    constructor(options) {
+        this.options = options;
+        this.acceptsInitialKeypress = false;
+        this.listeners = [];
+    }
+    edit(context) {
+        if (!context.container) {
+            console.warn('NileCheckboxEditor requires a container element');
+            return;
+        }
+        const el = document.createElement('nile-checkbox');
+        el.checked = !!context.value;
+        el.size = this.options?.size ?? 'small';
+        el.disabled = !!this.options?.disabled;
+        if (this.options?.label != null) {
+            el.label = this.options.label;
+        }
+        el.className = 'st-cell-editor st-nile-checkbox-editor';
+        el.style.margin = '0 auto';
+        el.style.display = 'flex';
+        el.style.alignItems = 'center';
+        el.style.justifyContent = 'center';
+        el.style.width = '100%';
+        el.style.boxSizing = 'border-box';
+        const saveOnChange = this.options?.saveOnChange !== false;
+        const changeHandler = (event) => {
+            const detail = event.detail;
+            const checked = detail?.checked ?? el.checked;
+            if (saveOnChange) {
+                context.onSave(checked);
+            }
+            else {
+                context.onChange(checked);
+            }
+        };
+        el.addEventListener('nile-change', changeHandler);
+        this.listeners.push({ type: 'nile-change', handler: changeHandler });
+        const keydownHandler = (e) => {
+            const keyEvent = e;
+            if (keyEvent.key === 'Escape') {
+                keyEvent.preventDefault();
+                keyEvent.stopPropagation();
+                context.onCancel();
+            }
+            else if (keyEvent.key === 'Enter') {
+                keyEvent.preventDefault();
+                keyEvent.stopPropagation();
+                context.onSave(el.checked);
+            }
+        };
+        el.addEventListener('keydown', keydownHandler);
+        this.listeners.push({ type: 'keydown', handler: keydownHandler });
+        context.container.innerHTML = '';
+        context.container.appendChild(el);
+        this.checkbox = el;
+        if (this.options?.autoFocus !== false) {
+            setTimeout(() => el.focus(), 0);
+        }
+    }
+    destroy() {
+        if (this.checkbox) {
+            this.listeners.forEach(({ type, handler }) => {
+                this.checkbox?.removeEventListener(type, handler);
+            });
+            this.listeners.length = 0;
+            this.checkbox.remove();
+            this.checkbox = undefined;
+        }
+    }
+    focus() {
+        this.checkbox?.focus();
+    }
+    getCurrentValue() {
+        return !!this.checkbox?.checked;
+    }
+}
+
 /**
  * Custom cell editors for ngx-smart-table
  */
@@ -6088,6 +6502,35 @@ class ColumnConfigFactory {
             }
         };
     }
+    /**
+     * Boolean column using {@link NileCheckboxEditor} (`<nile-checkbox>`) instead of a native checkbox.
+     *
+     * Display mode:
+     * - `booleanDisplayAsCheckbox` omitted or `true` — inline `nile-checkbox` in the cell (toggle without opening editor).
+     * - `booleanDisplayAsCheckbox: false` — show formatted text (`trueValue` / `falseValue`, default Yes/No) until the user edits the cell.
+     */
+    static nileCheckbox(key, options) {
+        const trueValue = options?.trueValue ?? 'Yes';
+        const falseValue = options?.falseValue ?? 'No';
+        const nileCheckbox = options?.nileCheckbox;
+        const booleanDisplayAsCheckbox = options?.booleanDisplayAsCheckbox !== false;
+        const config = deepMergeColumnConfig(DEFAULT_COLUMN_CONFIG, {
+            key,
+            header: key.charAt(0).toUpperCase() + key.slice(1),
+            dataType: CellDataType.BOOLEAN,
+            formatter: new BooleanFormatter({ trueValue, falseValue }),
+            editor: new NileCheckboxEditor(nileCheckbox),
+            booleanDisplayAsCheckbox,
+        }, options || {});
+        return {
+            ...config,
+            createCell(rowData, rowIndex) {
+                const valueGetter = options?.valueGetter || ((data) => data[key]);
+                const value = valueGetter(rowData);
+                return new Cell(this, value, rowData, rowIndex);
+            }
+        };
+    }
     /**
      * Create a select/dropdown column
      */
@@ -6260,6 +6703,15 @@ class StCellComponent {
                 rowIndex: cellValue.getRowIndex()
             };
         }, ...(ngDevMode ? [{ debugName: "templateContext" }] : /* istanbul ignore next */ []));
+        /** Boolean column: show `nile-checkbox` in display mode instead of Yes/No text */
+        this.showBooleanCheckboxDisplay = computed(() => {
+            const cellValue = this.cell();
+            if (!cellValue)
+                return false;
+            const config = cellValue.getColumnConfig();
+            return config.dataType === CellDataType.BOOLEAN && !!config.booleanDisplayAsCheckbox;
+        }, ...(ngDevMode ? [{ debugName: "showBooleanCheckboxDisplay" }] : /* istanbul ignore next */ []));
+        this.booleanCheckboxChecked = computed(() => !!this.cell().getValue(), ...(ngDevMode ? [{ debugName: "booleanCheckboxChecked" }] : /* istanbul ignore next */ []));
     }
     ngOnInit() {
         const cellValue = this.cell();
@@ -6336,6 +6788,9 @@ class StCellComponent {
                 }
                 break;
             default:
+                if (this.showBooleanCheckboxDisplay()) {
+                    break;
+                }
                 if (!cellValue.isEditing() && this.isAlphanumericKey(event)) {
                     if (this.canEditViaKeyboard()) {
                         event.preventDefault();
@@ -6384,14 +6839,78 @@ class StCellComponent {
         }
     }
     onCellClick() {
-        // Single click now only focuses, doesn't start editing
+        if (this.showBooleanCheckboxDisplay()) {
+            return;
+        }
+        // First click: parent <td> focuses this cell (bubbles after this handler).
+        // Second click while already focused: enter edit (spreadsheet-style).
+        const cellValue = this.cell();
+        if (this.isEditable() &&
+            !this.cellLoading &&
+            cellValue &&
+            !cellValue.isEditing() &&
+            cellValue.isFocused()) {
+            this.startEdit();
+        }
     }
     onCellDoubleClick() {
+        if (this.showBooleanCheckboxDisplay()) {
+            return;
+        }
         const cellValue = this.cell();
         if (this.isEditable() && cellValue && !cellValue.isEditing()) {
             this.startEdit();
         }
     }
+    onBooleanCheckboxDisplayChange(event) {
+        event.stopPropagation();
+        const cellValue = this.cell();
+        if (!cellValue || !this.isEditable()) {
+            return;
+        }
+        const custom = event;
+        const checked = !!custom.detail?.checked;
+        const previousValue = cellValue.getValue();
+        if (checked === previousValue) {
+            return;
+        }
+        const wasValid = cellValue.isValid();
+        const success = cellValue.commitDisplayValue(checked);
+        if (!success) {
+            return;
+        }
+        const column = cellValue.getColumnConfig();
+        const cellState = cellValue.getState();
+        const isValid = cellValue.isValid();
+        const saveEvent = {
+            cell: cellValue,
+            newValue: checked,
+            previousValue,
+            rowData: cellValue.getRowData(),
+            columnKey: column.key,
+            rowIndex: cellValue.getRowIndex(),
+            isValid,
+            validationErrors: cellState.error ? [cellState.error] : undefined,
+            cellState
+        };
+        this.cellSave.emit(saveEvent);
+        const changeEvent = {
+            cell: cellValue,
+            oldValue: previousValue,
+            newValue: checked,
+            rowData: cellValue.getRowData(),
+            columnKey: column.key,
+            rowIndex: cellValue.getRowIndex(),
+            wasValid,
+            isValid,
+            cellState
+        };
+        this.cellChange.emit(changeEvent);
+        const tableStateValue = this.tableState();
+        if (tableStateValue) {
+            this.updateValidationState();
+        }
+    }
     startEdit() {
         const cellValue = this.cell();
         if (!cellValue)
@@ -6563,12 +7082,12 @@ class StCellComponent {
             this.editorCleanup = undefined;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: StCellComponent, isStandalone: true, selector: "st-cell", inputs: { cell: { classPropertyName: "cell", publicName: "cell", isSignal: true, isRequired: true, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null }, tableState: { classPropertyName: "tableState", publicName: "tableState", isSignal: true, isRequired: false, transformFunction: null }, tableConfig: { classPropertyName: "tableConfig", publicName: "tableConfig", isSignal: true, isRequired: false, transformFunction: null }, columnIndex: { classPropertyName: "columnIndex", publicName: "columnIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cellChange: "cellChange", cellEdit: "cellEdit", cellSave: "cellSave", cellCancel: "cellCancel", cellSaveAndNavigate: "cellSaveAndNavigate" }, host: { listeners: { "keydown": "onCellKeyDown($event)" } }, viewQueries: [{ propertyName: "editorContainer", first: true, predicate: ["editorContainer"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"st-cell\" \n  [ngClass]=\"{\n    'editing': cell().isEditing(),\n    'dirty': cell().isDirty(),\n    'invalid': !cell().isValid(),\n    'readonly': !isEditable(),\n    'loading': cellLoading\n  }\"\n  (click)=\"onCellClick()\" \n  (dblclick)=\"onCellDoubleClick()\">\n\n  <!-- Loading Indicator -->\n  <div *ngIf=\"cellLoading\" class=\"cell-loading\">\n    <div class=\"cell-spinner\"></div>\n  </div>\n\n  <!-- Display Mode with Template Support -->\n  @if (!cell().isEditing() && !cellLoading) {\n    <!-- Custom Template -->\n    @if (hasCellTemplate()) {\n      <ng-container *ngTemplateOutlet=\"cellTemplate(); context: templateContext()\"></ng-container>\n    }\n\n    <!-- Default Text Rendering -->\n    @if (!hasCellTemplate()) {\n      <span class=\"cell-display\">\n        {{ cell().render() }}\n      </span>\n    }\n  }\n\n  <!-- Edit Mode -->\n  @if (cell().isEditing()) {\n    <div class=\"cell-editor\" #editorContainer>\n    </div>\n  }\n</div>\n", styles: [".st-cell{position:relative;cursor:pointer;transition:background-color .2s;min-height:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;box-sizing:border-box;max-height:28px}.st-cell.invalid{border-left:2px solid #e53e3e}.st-cell.readonly{cursor:default}.cell-display{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;align-content:center;width:100%;height:100%;padding-left:8px;padding-right:8px;font-size:12px;font-weight:300;letter-spacing:.2px;line-height:14px}.cell-editor{display:flex;height:100%;width:100%}.cell-editor input,.cell-editor select,.cell-editor textarea{width:100%;border:none;outline:none;font:inherit;padding:0;background:transparent;color:inherit}.cell-editor input[type=number]{text-align:inherit}.cell-editor nile-select::part(combobox){border:none!important;outline:none!important;box-shadow:none!important;max-height:28px;overflow:hidden;flex-wrap:nowrap}.cell-editor nile-select::part(tag){border:none!important;outline:none!important;margin-right:2px;padding:1px 2px;flex-shrink:0}.cell-editor nile-select::part(listbox){border:none!important}.st-cell.loading{pointer-events:none;opacity:.6}.cell-loading{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.cell-spinner{width:14px;height:14px;border:2px solid #e2e8f0;border-top-color:#4a90d9;border-radius:50%;animation:cell-spin .6s linear infinite}@keyframes cell-spin{to{transform:rotate(360deg)}}.cell-error{position:absolute;right:4px;top:50%;transform:translateY(-50%);color:#e53e3e;font-weight:700;cursor:help;font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: StCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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    @if (hasCellTemplate()) {\n      <ng-container *ngTemplateOutlet=\"cellTemplate(); context: templateContext()\"></ng-container>\n    } @else if (showBooleanCheckboxDisplay()) {\n      <div class=\"cell-display cell-display--boolean-checkbox\" (click)=\"$event.stopPropagation()\">\n        <nile-checkbox\n          size=\"small\"\n          [checked]=\"booleanCheckboxChecked()\"\n          [disabled]=\"!isEditable()\"\n          (nile-change)=\"onBooleanCheckboxDisplayChange($event)\">\n        </nile-checkbox>\n      </div>\n    } @else {\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.editing{max-height:none;overflow:visible;z-index:1}.st-cell.editing .cell-editor{overflow:visible;position:relative;z-index:2}.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-display--boolean-checkbox{display:flex;align-items:center;justify-content:center;white-space:normal;padding-left:4px;padding-right:4px}.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}.cell-editor nile-checkbox.st-nile-checkbox-editor{max-width:100%;overflow:hidden}.st-cell.loading{pointer-events:none;opacity:.6}.cell-loading{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.cell-spinner{width:14px;height:14px;border:2px solid #e2e8f0;border-top-color:#4a90d9;border-radius:50%;animation:cell-spin .6s linear infinite}@keyframes cell-spin{to{transform:rotate(360deg)}}.cell-error{position:absolute;right:4px;top:50%;transform:translateY(-50%);color:#e53e3e;font-weight:700;cursor:help;font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StCellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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"] }]
+            args: [{ selector: 'st-cell', standalone: true, imports: [CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], 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    @if (hasCellTemplate()) {\n      <ng-container *ngTemplateOutlet=\"cellTemplate(); context: templateContext()\"></ng-container>\n    } @else if (showBooleanCheckboxDisplay()) {\n      <div class=\"cell-display cell-display--boolean-checkbox\" (click)=\"$event.stopPropagation()\">\n        <nile-checkbox\n          size=\"small\"\n          [checked]=\"booleanCheckboxChecked()\"\n          [disabled]=\"!isEditable()\"\n          (nile-change)=\"onBooleanCheckboxDisplayChange($event)\">\n        </nile-checkbox>\n      </div>\n    } @else {\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.editing{max-height:none;overflow:visible;z-index:1}.st-cell.editing .cell-editor{overflow:visible;position:relative;z-index:2}.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-display--boolean-checkbox{display:flex;align-items:center;justify-content:center;white-space:normal;padding-left:4px;padding-right:4px}.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}.cell-editor nile-checkbox.st-nile-checkbox-editor{max-width:100%;overflow:hidden}.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: [{
                 type: ViewChild,
                 args: ['editorContainer', { read: ElementRef }]
@@ -6715,6 +7234,10 @@ const tableConfigSchema = {
                     "type": "boolean",
                     "description": "Whether to show shadow indicator on sticky columns"
                 },
+                "stickyBackground": {
+                    "type": "string",
+                    "description": "Background for sticky cells in this column (overrides display.stickyColumnBackground)"
+                },
                 "alignment": {
                     "type": "string",
                     "enum": ["left", "center", "right"],
@@ -6927,9 +7450,52 @@ const tableConfigSchema = {
                     "type": "boolean",
                     "description": "Make table header sticky on scroll"
                 },
+                "hover": {
+                    "type": "boolean",
+                    "description": "Highlight row on hover"
+                },
                 "maxHeight": {
                     "type": "number",
-                    "description": "Maximum height of the table in pixels"
+                    "description": "Maximum height of the table in pixels (ignored for wrapper sizing when visibleBodyRows is set)"
+                },
+                "visibleBodyRows": {
+                    "type": "integer",
+                    "minimum": 0,
+                    "description": "Number of data rows to show before vertical scroll (standard mode); 0 = show all rows (no row viewport cap on the table wrapper)"
+                },
+                "stickyColumnBackground": {
+                    "type": "string",
+                    "description": "Default background for sticky columns and row number column (CSS color)"
+                },
+                "stickyColumnBackgroundFullRow": {
+                    "type": "boolean",
+                    "description": "When true, apply stickyColumnBackground (and per-column stickyBackground) to every cell in each row"
+                },
+                "rowBackground": {
+                    "description": "Callback (rowData, { rowIndex }) => CSS background color for the row. TypeScript-only; schema accepts any value when provided from code."
+                },
+                "focusedCell": {
+                    "type": "object",
+                    "description": "Keyboard-focused cell outline (when keyboard navigation is enabled)",
+                    "properties": {
+                        "outlineColor": {
+                            "type": "string",
+                            "description": "CSS outline color for the focused cell"
+                        },
+                        "outlineWidth": {
+                            "type": "string",
+                            "description": "CSS outline width (e.g. 2px)"
+                        },
+                        "boxShadow": {
+                            "type": "string",
+                            "description": "Box shadow when the cell is focused (not editing)"
+                        },
+                        "editingBoxShadow": {
+                            "type": "string",
+                            "description": "Box shadow when the cell has an editor open"
+                        }
+                    },
+                    "additionalProperties": false
                 },
                 "virtualScroll": {
                     "$ref": "#/definitions/VirtualScrollConfig"
@@ -7338,10 +7904,10 @@ class ValidationLoggerService {
     getLogSize() {
         return this.logEntries.length;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ValidationLoggerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ValidationLoggerService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ValidationLoggerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ValidationLoggerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ValidationLoggerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ValidationLoggerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -7548,10 +8114,10 @@ class JsonSchemaValidatorService {
                 return error.message || `Field '${field}' is invalid`;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: JsonSchemaValidatorService, deps: [{ token: ValidationLoggerService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: JsonSchemaValidatorService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: JsonSchemaValidatorService, deps: [{ token: ValidationLoggerService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: JsonSchemaValidatorService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: JsonSchemaValidatorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: JsonSchemaValidatorService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -7599,10 +8165,10 @@ class VirtualScrollService {
         return fromEvent(element, 'scroll').pipe(map((event) => event.target.scrollTop), throttleTime(16, undefined, { leading: true, trailing: true }) // 60fps
         );
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: VirtualScrollService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: VirtualScrollService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VirtualScrollService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VirtualScrollService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: VirtualScrollService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VirtualScrollService, decorators: [{
             type: Injectable
         }] });
 
@@ -7677,10 +8243,10 @@ class StPaginationComponent {
             this.tableState.setPageSize(newPageSize);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: StPaginationComponent, isStandalone: true, selector: "st-pagination", inputs: { tableState: "tableState", tableConfig: "tableConfig", position: "position" }, ngImport: i0, template: "<nile-pagination\n  [totalItems]=\"paginationState.totalItems\"\n  [currentPage]=\"getCurrentPageDisplay()\"\n  [pageSize]=\"paginationState.pageSize\"\n  [variant]=\"getVariant()\"\n  [pageSizeOptions]=\"getPageSizeOptions()\"\n  (pageChange)=\"onPageChange($event)\"\n  (pageSizeChange)=\"onPageSizeChange($event)\">\n</nile-pagination>\n", styles: [":host{display:block;width:100%}nile-pagination{display:block;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: StPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: StPaginationComponent, isStandalone: true, selector: "st-pagination", inputs: { tableState: "tableState", tableConfig: "tableConfig", position: "position" }, ngImport: i0, template: "<nile-pagination\n  [totalItems]=\"paginationState.totalItems\"\n  [currentPage]=\"getCurrentPageDisplay()\"\n  [pageSize]=\"paginationState.pageSize\"\n  [variant]=\"getVariant()\"\n  [pageSizeOptions]=\"getPageSizeOptions()\"\n  (pageChange)=\"onPageChange($event)\"\n  (pageSizeChange)=\"onPageSizeChange($event)\">\n</nile-pagination>\n", styles: [":host{display:block;width:100%}nile-pagination{display:block;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StPaginationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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: [{
@@ -7814,10 +8380,10 @@ class StHeaderComponent {
         };
         this.columnMoved.emit(moveEvent);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: StHeaderComponent, isStandalone: true, selector: "st-header", inputs: { column: "column", columnIndex: "columnIndex", isFirstColumn: "isFirstColumn", isLastColumn: "isLastColumn", tableState: "tableState", enableSorting: "enableSorting", enableFiltering: "enableFiltering" }, outputs: { sortToggle: "sortToggle", filterChange: "filterChange", columnMoved: "columnMoved", menuClick: "menuClick" }, ngImport: i0, template: "<div class=\"st-header\" [class.sortable]=\"isSortable()\" [class.sorted]=\"isSorted()\" [attr.aria-sort]=\"getAriaSort()\">\n  <div class=\"header-content\">\n    <span class=\"header-text\">{{ column.header || column.key }}</span>\n    @if (isMenuEnabled()) {\n      <button class=\"column-menu-trigger\" \n              (click)=\"onMenuClick($event)\"\n              type=\"button\" \n              aria-label=\"Column actions\">\n        <nile-icon name=\"options\"></nile-icon>\n      </button>\n    }\n  </div>\n</div>\n", styles: [".st-header{position:relative;text-align:left;padding-left:8px}.st-header.sortable{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .2s}.st-header.resizing{-webkit-user-select:none;user-select:none;cursor:col-resize}.st-header.align-center{text-align:center}.st-header.align-center .header-content{justify-content:center}.st-header.align-right{text-align:right}.st-header.align-right .header-content{justify-content:flex-end}.st-header .header-content{display:flex;align-items:center;gap:8px}.st-header .header-text{flex:1;font-size:12px;font-weight:500;letter-spacing:.2px;line-height:14px}.st-header .column-menu-trigger{background:none;border:none;padding:4px;cursor:pointer;border-radius:4px;display:flex;align-items:center;justify-content:center}.st-header .column-menu-trigger nile-icon{font-size:16px;pointer-events:none}.st-header .resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;z-index:10}.st-header .resize-handle:after{content:\"\";position:absolute;top:50%;right:3px;transform:translateY(-50%);width:2px;height:20px;background-color:#cbd5e0;opacity:0;transition:opacity .2s}.st-header .resize-handle:hover:after,.st-header .resize-handle:active:after{opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: StHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: StHeaderComponent, isStandalone: true, selector: "st-header", inputs: { column: "column", columnIndex: "columnIndex", isFirstColumn: "isFirstColumn", isLastColumn: "isLastColumn", tableState: "tableState", enableSorting: "enableSorting", enableFiltering: "enableFiltering" }, outputs: { sortToggle: "sortToggle", filterChange: "filterChange", columnMoved: "columnMoved", menuClick: "menuClick" }, ngImport: i0, template: "<div class=\"st-header\" [class.sortable]=\"isSortable()\" [class.sorted]=\"isSorted()\" [attr.aria-sort]=\"getAriaSort()\">\n  <div class=\"header-content\">\n    <span class=\"header-text\">{{ column.header || column.key }}</span>\n    @if (isMenuEnabled()) {\n      <button class=\"column-menu-trigger\" \n              (click)=\"onMenuClick($event)\"\n              type=\"button\" \n              aria-label=\"Column actions\">\n        <nile-icon name=\"options\"></nile-icon>\n      </button>\n    }\n  </div>\n</div>\n", styles: [".st-header{position:relative;text-align:left;padding-left:8px}.st-header.sortable{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .2s}.st-header.resizing{-webkit-user-select:none;user-select:none;cursor:col-resize}.st-header.align-center{text-align:center}.st-header.align-center .header-content{justify-content:center}.st-header.align-right{text-align:right}.st-header.align-right .header-content{justify-content:flex-end}.st-header .header-content{display:flex;align-items:center;gap:8px}.st-header .header-text{flex:1;font-size:12px;font-weight:500;letter-spacing:.2px;line-height:14px}.st-header .column-menu-trigger{background:none;border:none;padding:4px;cursor:pointer;border-radius:4px;display:flex;align-items:center;justify-content:center}.st-header .column-menu-trigger nile-icon{font-size:16px;pointer-events:none}.st-header .resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;z-index:10}.st-header .resize-handle:after{content:\"\";position:absolute;top:50%;right:3px;transform:translateY(-50%);width:2px;height:20px;background-color:#cbd5e0;opacity:0;transition:opacity .2s}.st-header .resize-handle:hover:after,.st-header .resize-handle:active:after{opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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: [{
@@ -7995,10 +8561,10 @@ class StTableActionsComponent {
     isColumnHideable(column) {
         return column.hideable !== false; // Default to true if not set
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StTableActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: StTableActionsComponent, isStandalone: true, selector: "st-table-actions", inputs: { tableState: "tableState", allowAddColumn: "allowAddColumn" }, outputs: { addColumnClicked: "addColumnClicked" }, ngImport: i0, template: "<button \n  class=\"table-actions-button\"\n  (click)=\"toggleMenu($event)\"\n  type=\"button\"\n  title=\"Table Actions\"\n  aria-label=\"Table actions menu\"\n  [class.active]=\"isOpen\">\n  <nile-icon name=\"settings\"></nile-icon>\n</button>\n\n<!-- Dropdown container with shared pattern -->\n@if (isOpen) {\n  <div class=\"dropdown-container\">\n    <!-- Backdrop -->\n    <div class=\"dropdown-backdrop\" (click)=\"closeMenu()\"></div>\n    \n    <!-- Main Menu -->\n    @if (currentView === 'main') {\n      <div class=\"dropdown-menu\" [ngStyle]=\"dropdownStyle\">\n        <nile-menu>\n          <!-- Add Column -->\n          @if (allowAddColumn) {\n            <nile-menu-item (click)=\"onAddColumn($event)\">\n              <nile-icon slot=\"prefix\" name=\"plus\" size=\"12\"></nile-icon>\n              Add Column\n            </nile-menu-item>\n          }\n          \n          <!-- Show/Hide Columns -->\n          <nile-menu-item (click)=\"openColumnsSubmenu($event)\">\n            <nile-icon size=\"12\" slot=\"prefix\" name=\"eye\"></nile-icon>\n            Show/Hide Columns\n          </nile-menu-item>\n        </nile-menu>\n      </div>\n    }\n    \n    <!-- Column Visibility Submenu -->\n    @if (currentView === 'columns') {\n      <div class=\"dropdown-menu\" [ngStyle]=\"dropdownStyle\">\n        <nile-menu>\n          <!-- Back button -->\n          <nile-menu-item (click)=\"backToMain($event)\" class=\"back-item\">\n            <nile-icon size=\"12\" slot=\"prefix\" name=\"chevron-left\"></nile-icon>\n            Back\n          </nile-menu-item>\n          \n          <nile-divider></nile-divider>\n          \n          <!-- Column checkboxes -->\n          @for (column of columnsVisibility; track column.key) {\n            <nile-menu-item \n              [class.disabled]=\"!isColumnHideable(column)\"\n              (click)=\"onToggleColumn(column.key, $event)\">\n              <nile-checkbox \n                [checked]=\"isColumnVisible(column.key)\" \n                [disabled]=\"!isColumnHideable(column)\" \n                [label]=\"column.header || column.key\" \n                (nile-change)=\"onToggleColumn(column.key, $event)\">\n              </nile-checkbox>\n            </nile-menu-item>\n          }\n        </nile-menu>\n      </div>\n    }\n  </div>\n}\n", styles: [".table-actions-button{display:flex;align-items:center;justify-content:center;padding:6px;background:transparent;border:none;cursor:pointer;transition:background-color .15s}.table-actions-button:hover{background-color:#0000000d}.table-actions-button.active{background-color:#0000001a}.table-actions-button:focus{outline:none}.dropdown-container{position:fixed;inset:0;z-index:9996}.dropdown-backdrop{position:absolute;inset:0;background:transparent;pointer-events:auto;z-index:9996}.dropdown-menu{position:fixed;pointer-events:auto;z-index:9997;min-width:15rem}nile-menu{max-height:30rem;overflow-y:auto}nile-menu::part(base){width:fit-content;min-height:auto}nile-menu nile-menu-item::part(base){min-height:2.5rem}nile-menu nile-menu-item::part(label){font-size:12px}nile-menu nile-menu-item.back-item{font-weight:500}nile-menu nile-menu-item.disabled{opacity:.5;cursor:not-allowed}nile-menu nile-menu-item nile-checkbox::part(base){display:flex;align-items:center}nile-menu nile-menu-item nile-checkbox::part(label){font-size:12px;margin-top:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: StTableActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: StTableActionsComponent, isStandalone: true, selector: "st-table-actions", inputs: { tableState: "tableState", allowAddColumn: "allowAddColumn" }, outputs: { addColumnClicked: "addColumnClicked" }, ngImport: i0, template: "<button \n  class=\"table-actions-button\"\n  (click)=\"toggleMenu($event)\"\n  type=\"button\"\n  title=\"Table Actions\"\n  aria-label=\"Table actions menu\"\n  [class.active]=\"isOpen\">\n  <nile-icon name=\"settings\"></nile-icon>\n</button>\n\n<!-- Dropdown container with shared pattern -->\n@if (isOpen) {\n  <div class=\"dropdown-container\">\n    <!-- Backdrop -->\n    <div class=\"dropdown-backdrop\" (click)=\"closeMenu()\"></div>\n    \n    <!-- Main Menu -->\n    @if (currentView === 'main') {\n      <div class=\"dropdown-menu\" [ngStyle]=\"dropdownStyle\">\n        <nile-menu>\n          <!-- Add Column -->\n          @if (allowAddColumn) {\n            <nile-menu-item (click)=\"onAddColumn($event)\">\n              <nile-icon slot=\"prefix\" name=\"plus\" size=\"12\"></nile-icon>\n              Add Column\n            </nile-menu-item>\n          }\n          \n          <!-- Show/Hide Columns -->\n          <nile-menu-item (click)=\"openColumnsSubmenu($event)\">\n            <nile-icon size=\"12\" slot=\"prefix\" name=\"eye\"></nile-icon>\n            Show/Hide Columns\n          </nile-menu-item>\n        </nile-menu>\n      </div>\n    }\n    \n    <!-- Column Visibility Submenu -->\n    @if (currentView === 'columns') {\n      <div class=\"dropdown-menu\" [ngStyle]=\"dropdownStyle\">\n        <nile-menu>\n          <!-- Back button -->\n          <nile-menu-item (click)=\"backToMain($event)\" class=\"back-item\">\n            <nile-icon size=\"12\" slot=\"prefix\" name=\"chevron-left\"></nile-icon>\n            Back\n          </nile-menu-item>\n          \n          <nile-divider></nile-divider>\n          \n          <!-- Column checkboxes -->\n          @for (column of columnsVisibility; track column.key) {\n            <nile-menu-item \n              [class.disabled]=\"!isColumnHideable(column)\"\n              (click)=\"onToggleColumn(column.key, $event)\">\n              <nile-checkbox \n                [checked]=\"isColumnVisible(column.key)\" \n                [disabled]=\"!isColumnHideable(column)\" \n                [label]=\"column.header || column.key\" \n                (nile-change)=\"onToggleColumn(column.key, $event)\">\n              </nile-checkbox>\n            </nile-menu-item>\n          }\n        </nile-menu>\n      </div>\n    }\n  </div>\n}\n", styles: [".table-actions-button{display:flex;align-items:center;justify-content:center;padding:6px;background:transparent;border:none;cursor:pointer;transition:background-color .15s}.table-actions-button:hover{background-color:#0000000d}.table-actions-button.active{background-color:#0000001a}.table-actions-button:focus{outline:none}.dropdown-container{position:fixed;inset:0;z-index:9996}.dropdown-backdrop{position:absolute;inset:0;background:transparent;pointer-events:auto;z-index:9996}.dropdown-menu{position:fixed;pointer-events:auto;z-index:9997;min-width:15rem}nile-menu{max-height:30rem;overflow-y:auto}nile-menu::part(base){width:fit-content;min-height:auto}nile-menu nile-menu-item::part(base){min-height:2.5rem}nile-menu nile-menu-item::part(label){font-size:12px}nile-menu nile-menu-item.back-item{font-weight:500}nile-menu nile-menu-item.disabled{opacity:.5;cursor:not-allowed}nile-menu nile-menu-item nile-checkbox::part(base){display:flex;align-items:center}nile-menu nile-menu-item nile-checkbox::part(label){font-size:12px;margin-top:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StTableActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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: [{
@@ -8356,10 +8922,10 @@ class StColumnFilterComponent {
         // Align left for first 2 columns to prevent clipping
         return this.columnIndex <= 1;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StColumnFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: StColumnFilterComponent, isStandalone: true, selector: "st-column-filter", inputs: { column: "column", tableState: "tableState", columnIndex: "columnIndex", isFirstColumn: "isFirstColumn", isLastColumn: "isLastColumn", isOpen: "isOpen", filterContext: "filterContext" }, outputs: { closed: "closed", filterApplied: "filterApplied", filterCleared: "filterCleared" }, viewQueries: [{ propertyName: "filterAnchor", first: true, predicate: ["filterAnchor"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Popover content -->\n<div class=\"filter-content\">\n  <!-- Operator Select -->\n  @if (availableOperators.length > 1) {\n    <nile-select \n      label=\"Operator\"\n      [value]=\"selectedOperator\"\n      (nile-change)=\"onOperatorChange($event)\"\n      class=\"filter-operator\">\n      @for (op of availableOperators; track op.value) {\n        <nile-option [value]=\"op.value\">\n          {{ op.label }}\n        </nile-option>\n      }\n    </nile-select>\n  }\n  \n  <!-- Input Field based on type -->\n  <div class=\"filter-value-section\">\n    \n    <!-- Text Input -->\n    @if (inputType === 'text') {\n      <nile-input \n        type=\"text\"\n        label=\"Value\"\n        [value]=\"filterValue\"\n        placeholder=\"Enter value...\"\n        (nile-input)=\"onValueInput($event)\"\n        class=\"filter-value-input\">\n      </nile-input>\n    }\n    \n    <!-- Number Input -->\n    @if (inputType === 'number') {\n      <nile-input \n        type=\"number\"\n        label=\"Value\"\n        [value]=\"filterValue\"\n        placeholder=\"Enter number...\"\n        (nile-input)=\"onValueInput($event)\"\n        class=\"filter-value-input\">\n      </nile-input>\n    }\n    \n    <!-- Date Input -->\n    @if (inputType === 'date') {\n      <nile-input \n        type=\"date\"\n        label=\"Value\"\n        [value]=\"filterValue\"\n        (nile-input)=\"onValueInput($event)\"\n        class=\"filter-value-input\">\n      </nile-input>\n    }\n    \n    <!-- Checkbox Input -->\n    @if (inputType === 'checkbox') {\n      <nile-checkbox\n        [checked]=\"filterValue\"\n        (nile-change)=\"onCheckboxChange($event)\"\n        class=\"filter-checkbox\">\n        {{ filterValue ? 'True' : 'False' }}\n      </nile-checkbox>\n    }\n    \n    <!-- Single Select Dropdown -->\n    @if (inputType === 'select') {\n      <nile-select \n        label=\"Value\"\n        [value]=\"filterValue\"\n        placeholder=\"-- Select --\"\n        (nile-change)=\"onSelectChange($event)\"\n        class=\"filter-value-select\">\n        @for (option of dropdownOptions; track option.value) {\n          <nile-option [value]=\"option.value\">\n            {{ option.label }}\n          </nile-option>\n        }\n      </nile-select>\n    }\n    \n    <!-- Multi-Select with Radio Group as example (or keep checkboxes) -->\n    @if (inputType === 'multiselect') {\n      <div class=\"filter-multiselect\">\n        <label class=\"multiselect-title\">Select Values</label>\n        <div class=\"multiselect-options\">\n          @for (option of dropdownOptions; track option.value) {\n            <nile-checkbox\n              [checked]=\"isValueSelected(option.value)\"\n              [value]=\"option.value\"\n              (nile-change)=\"onMultiselectCheckboxChange($event, option.value)\"\n              class=\"multiselect-checkbox\">\n              {{ option.label }}\n            </nile-checkbox>\n          }\n        </div>\n        @if (dropdownOptions.length === 0) {\n          <div class=\"empty-state\">\n            No options available\n          </div>\n        }\n      </div>\n    }\n  </div>\n  \n  <!-- Action Buttons -->\n  <div class=\"filter-actions\">\n    <nile-button \n      variant=\"primary\"\n      size=\"small\"\n      (click)=\"onApply()\">\n      Apply\n    </nile-button>\n    <nile-button \n      variant=\"default\"\n      size=\"small\"\n      (click)=\"onClear()\">\n      Clear\n    </nile-button>\n  </div>\n</div>\n", styles: [".filter-content{padding:16px;display:flex;flex-direction:column;gap:16px}.filter-content nile-select,.filter-content nile-input,.filter-content nile-checkbox{width:100%}.filter-content .filter-operator,.filter-content .filter-value-input,.filter-content .filter-value-select{margin-bottom:0}.filter-value-section{display:flex;flex-direction:column;gap:12px}.filter-value-section nile-checkbox{margin-top:8px}.filter-multiselect{display:flex;flex-direction:column;gap:8px}.filter-multiselect .multiselect-title{display:block;font-size:13px;font-weight:600;color:#2d3748;margin-bottom:8px}.filter-multiselect .multiselect-options{max-height:200px;overflow-y:auto;border:1px solid #cbd5e0;border-radius:4px;padding:8px;background-color:#f7fafc;display:flex;flex-direction:column;gap:6px}.filter-multiselect .multiselect-options nile-checkbox{width:100%}.filter-multiselect .multiselect-options nile-checkbox::part(base){padding:4px 8px;border-radius:4px;transition:background-color .15s}.filter-multiselect .multiselect-options nile-checkbox:hover::part(base){background-color:#edf2f7}.filter-multiselect .empty-state{padding:12px;text-align:center;color:#718096;font-size:13px}.filter-actions{display:flex;gap:8px;justify-content:flex-end;padding-top:12px;border-top:1px solid #e2e8f0;margin-top:4px}.filter-actions nile-button{flex:0 0 auto}.multiselect-options::-webkit-scrollbar{width:6px}.multiselect-options::-webkit-scrollbar-track{background:#edf2f7;border-radius:3px}.multiselect-options::-webkit-scrollbar-thumb{background:#cbd5e0;border-radius:3px}.multiselect-options::-webkit-scrollbar-thumb:hover{background:#a0aec0}nile-input::part(base){width:100%}nile-select::part(base){width:100%}nile-button::part(base){min-width:80px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: StColumnFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: StColumnFilterComponent, isStandalone: true, selector: "st-column-filter", inputs: { column: "column", tableState: "tableState", columnIndex: "columnIndex", isFirstColumn: "isFirstColumn", isLastColumn: "isLastColumn", isOpen: "isOpen", filterContext: "filterContext" }, outputs: { closed: "closed", filterApplied: "filterApplied", filterCleared: "filterCleared" }, viewQueries: [{ propertyName: "filterAnchor", first: true, predicate: ["filterAnchor"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Popover content -->\n<div class=\"filter-content\">\n  <!-- Operator Select -->\n  @if (availableOperators.length > 1) {\n    <nile-select \n      label=\"Operator\"\n      [value]=\"selectedOperator\"\n      (nile-change)=\"onOperatorChange($event)\"\n      class=\"filter-operator\">\n      @for (op of availableOperators; track op.value) {\n        <nile-option [value]=\"op.value\">\n          {{ op.label }}\n        </nile-option>\n      }\n    </nile-select>\n  }\n  \n  <!-- Input Field based on type -->\n  <div class=\"filter-value-section\">\n    \n    <!-- Text Input -->\n    @if (inputType === 'text') {\n      <nile-input \n        type=\"text\"\n        label=\"Value\"\n        [value]=\"filterValue\"\n        placeholder=\"Enter value...\"\n        (nile-input)=\"onValueInput($event)\"\n        class=\"filter-value-input\">\n      </nile-input>\n    }\n    \n    <!-- Number Input -->\n    @if (inputType === 'number') {\n      <nile-input \n        type=\"number\"\n        label=\"Value\"\n        [value]=\"filterValue\"\n        placeholder=\"Enter number...\"\n        (nile-input)=\"onValueInput($event)\"\n        class=\"filter-value-input\">\n      </nile-input>\n    }\n    \n    <!-- Date Input -->\n    @if (inputType === 'date') {\n      <nile-input \n        type=\"date\"\n        label=\"Value\"\n        [value]=\"filterValue\"\n        (nile-input)=\"onValueInput($event)\"\n        class=\"filter-value-input\">\n      </nile-input>\n    }\n    \n    <!-- Checkbox Input -->\n    @if (inputType === 'checkbox') {\n      <nile-checkbox\n        [checked]=\"filterValue\"\n        (nile-change)=\"onCheckboxChange($event)\"\n        class=\"filter-checkbox\">\n        {{ filterValue ? 'True' : 'False' }}\n      </nile-checkbox>\n    }\n    \n    <!-- Single Select Dropdown -->\n    @if (inputType === 'select') {\n      <nile-select \n        label=\"Value\"\n        [value]=\"filterValue\"\n        placeholder=\"-- Select --\"\n        (nile-change)=\"onSelectChange($event)\"\n        class=\"filter-value-select\">\n        @for (option of dropdownOptions; track option.value) {\n          <nile-option [value]=\"option.value\">\n            {{ option.label }}\n          </nile-option>\n        }\n      </nile-select>\n    }\n    \n    <!-- Multi-Select with Radio Group as example (or keep checkboxes) -->\n    @if (inputType === 'multiselect') {\n      <div class=\"filter-multiselect\">\n        <label class=\"multiselect-title\">Select Values</label>\n        <div class=\"multiselect-options\">\n          @for (option of dropdownOptions; track option.value) {\n            <nile-checkbox\n              [checked]=\"isValueSelected(option.value)\"\n              [value]=\"option.value\"\n              (nile-change)=\"onMultiselectCheckboxChange($event, option.value)\"\n              class=\"multiselect-checkbox\">\n              {{ option.label }}\n            </nile-checkbox>\n          }\n        </div>\n        @if (dropdownOptions.length === 0) {\n          <div class=\"empty-state\">\n            No options available\n          </div>\n        }\n      </div>\n    }\n  </div>\n  \n  <!-- Action Buttons -->\n  <div class=\"filter-actions\">\n    <nile-button \n      variant=\"primary\"\n      size=\"small\"\n      (click)=\"onApply()\">\n      Apply\n    </nile-button>\n    <nile-button \n      variant=\"default\"\n      size=\"small\"\n      (click)=\"onClear()\">\n      Clear\n    </nile-button>\n  </div>\n</div>\n", styles: [".filter-content{padding:16px;display:flex;flex-direction:column;gap:16px}.filter-content nile-select,.filter-content nile-input,.filter-content nile-checkbox{width:100%}.filter-content .filter-operator,.filter-content .filter-value-input,.filter-content .filter-value-select{margin-bottom:0}.filter-value-section{display:flex;flex-direction:column;gap:12px}.filter-value-section nile-checkbox{margin-top:8px}.filter-multiselect{display:flex;flex-direction:column;gap:8px}.filter-multiselect .multiselect-title{display:block;font-size:13px;font-weight:600;color:#2d3748;margin-bottom:8px}.filter-multiselect .multiselect-options{max-height:200px;overflow-y:auto;border:1px solid #cbd5e0;border-radius:4px;padding:8px;background-color:#f7fafc;display:flex;flex-direction:column;gap:6px}.filter-multiselect .multiselect-options nile-checkbox{width:100%}.filter-multiselect .multiselect-options nile-checkbox::part(base){padding:4px 8px;border-radius:4px;transition:background-color .15s}.filter-multiselect .multiselect-options nile-checkbox:hover::part(base){background-color:#edf2f7}.filter-multiselect .empty-state{padding:12px;text-align:center;color:#718096;font-size:13px}.filter-actions{display:flex;gap:8px;justify-content:flex-end;padding-top:12px;border-top:1px solid #e2e8f0;margin-top:4px}.filter-actions nile-button{flex:0 0 auto}.multiselect-options::-webkit-scrollbar{width:6px}.multiselect-options::-webkit-scrollbar-track{background:#edf2f7;border-radius:3px}.multiselect-options::-webkit-scrollbar-thumb{background:#cbd5e0;border-radius:3px}.multiselect-options::-webkit-scrollbar-thumb:hover{background:#a0aec0}nile-input::part(base){width:100%}nile-select::part(base){width:100%}nile-button::part(base){min-width:80px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StColumnFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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: [{
@@ -8605,10 +9171,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.5", ngImport: i0, type: StColumnMenuDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: StColumnMenuDropdownComponent, isStandalone: true, selector: "st-column-menu-dropdown", inputs: { isOpen: "isOpen", position: "position", context: "context" }, outputs: { actionClicked: "actionClicked", closed: "closed" }, host: { listeners: { "click": "onBackdropClick($event)" } }, viewQueries: [{ propertyName: "filterPopup", first: true, predicate: ["filterPopup"], descendants: true }, { propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Dropdown container with backdrop -->\n@if (isOpen && context) {\n  <div class=\"dropdown-container\">\n    <!-- Backdrop -->\n    <div class=\"dropdown-backdrop\" (click)=\"closed.emit()\"></div>\n    \n    <!-- Dropdown menu -->\n    <div class=\"column-menu-dropdown\" #dropdownPanel [ngStyle]=\"dropdownStyle\">\n      <!-- Main menu with actions -->\n      @if (!isFilterOpen) {\n        <nile-menu>\n          <!-- Dynamically render all visible actions -->\n          @for (action of visibleActions; track action.id; let i = $index, last = $last) {\n            <nile-menu-item \n              (click)=\"onActionClick(action)\"\n              [class.disabled]=\"isActionDisabled(action)\"\n              [class.active]=\"isActionActive(action)\">\n              @if (isActionActive(action)) {\n                <span class=\"checkmark\">\u2713</span>\n              }\n              @if (action.icon && !isActionActive(action)) {\n                <nile-icon slot=\"prefix\" [name]=\"action.icon\"></nile-icon>\n              }\n              <span class=\"action-label\">{{ action.label }}</span>\n            </nile-menu-item>\n            \n            <!-- Add divider after action groups -->\n            @if (shouldShowDividerAfter(action, i, last)) {\n              <nile-divider></nile-divider>\n            }\n          }\n          \n          <!-- Fallback if no actions -->\n          @if (visibleActions.length === 0) {\n            <nile-menu-item>\n              No actions available\n            </nile-menu-item>\n          }\n        </nile-menu>\n      }\n      \n      <!-- Filter popup (conditionally rendered) -->\n      @if (isFilterOpen && context) {\n        <st-column-filter\n          #filterPopup\n          [column]=\"context.column\"\n          [tableState]=\"context.tableState\"\n          [columnIndex]=\"context.columnIndex\"\n          [isFirstColumn]=\"context.isFirstColumn\"\n          [isLastColumn]=\"context.isLastColumn\"\n          [isOpen]=\"isFilterOpen\"\n          (filterApplied)=\"onFilterApplied($event)\"\n          (filterCleared)=\"onFilterCleared()\"\n          (closed)=\"onFilterClosed()\">\n        </st-column-filter>\n      }\n    </div>\n  </div>\n}\n", styles: [".dropdown-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9998}.dropdown-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:auto;z-index:9998}.column-menu-dropdown{min-width:200px;max-width:300px;background-color:#fff;border-radius:8px;box-shadow:0 10px 25px #00000026;overflow:hidden;pointer-events:auto;z-index:9999}nile-menu nile-divider::part(divider){margin:0}nile-menu nile-menu-item::part(base){height:2.5rem;min-height:auto}nile-menu nile-menu-item .checkmark{margin-right:8px;color:#4299e1;font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: StColumnFilterComponent, selector: "st-column-filter", inputs: ["column", "tableState", "columnIndex", "isFirstColumn", "isLastColumn", "isOpen", "filterContext"], outputs: ["closed", "filterApplied", "filterCleared"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: StColumnMenuDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: StColumnMenuDropdownComponent, isStandalone: true, selector: "st-column-menu-dropdown", inputs: { isOpen: "isOpen", position: "position", context: "context" }, outputs: { actionClicked: "actionClicked", closed: "closed" }, host: { listeners: { "click": "onBackdropClick($event)" } }, viewQueries: [{ propertyName: "filterPopup", first: true, predicate: ["filterPopup"], descendants: true }, { propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Dropdown container with backdrop -->\n@if (isOpen && context) {\n  <div class=\"dropdown-container\">\n    <!-- Backdrop -->\n    <div class=\"dropdown-backdrop\" (click)=\"closed.emit()\"></div>\n    \n    <!-- Dropdown menu -->\n    <div class=\"column-menu-dropdown\" #dropdownPanel [ngStyle]=\"dropdownStyle\">\n      <!-- Main menu with actions -->\n      @if (!isFilterOpen) {\n        <nile-menu>\n          <!-- Dynamically render all visible actions -->\n          @for (action of visibleActions; track action.id; let i = $index, last = $last) {\n            <nile-menu-item \n              (click)=\"onActionClick(action)\"\n              [class.disabled]=\"isActionDisabled(action)\"\n              [class.active]=\"isActionActive(action)\">\n              @if (isActionActive(action)) {\n                <span class=\"checkmark\">\u2713</span>\n              }\n              @if (action.icon && !isActionActive(action)) {\n                <nile-icon slot=\"prefix\" [name]=\"action.icon\"></nile-icon>\n              }\n              <span class=\"action-label\">{{ action.label }}</span>\n            </nile-menu-item>\n            \n            <!-- Add divider after action groups -->\n            @if (shouldShowDividerAfter(action, i, last)) {\n              <nile-divider></nile-divider>\n            }\n          }\n          \n          <!-- Fallback if no actions -->\n          @if (visibleActions.length === 0) {\n            <nile-menu-item>\n              No actions available\n            </nile-menu-item>\n          }\n        </nile-menu>\n      }\n      \n      <!-- Filter popup (conditionally rendered) -->\n      @if (isFilterOpen && context) {\n        <st-column-filter\n          #filterPopup\n          [column]=\"context.column\"\n          [tableState]=\"context.tableState\"\n          [columnIndex]=\"context.columnIndex\"\n          [isFirstColumn]=\"context.isFirstColumn\"\n          [isLastColumn]=\"context.isLastColumn\"\n          [isOpen]=\"isFilterOpen\"\n          (filterApplied)=\"onFilterApplied($event)\"\n          (filterCleared)=\"onFilterCleared()\"\n          (closed)=\"onFilterClosed()\">\n        </st-column-filter>\n      }\n    </div>\n  </div>\n}\n", styles: [".dropdown-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9998}.dropdown-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:auto;z-index:9998}.column-menu-dropdown{min-width:200px;max-width:300px;background-color:#fff;border-radius:8px;box-shadow:0 10px 25px #00000026;overflow:hidden;pointer-events:auto;z-index:9999}nile-menu nile-divider::part(divider){margin:0}nile-menu nile-menu-item::part(base){height:2.5rem;min-height:auto}nile-menu nile-menu-item .checkmark{margin-right:8px;color:#4299e1;font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: StColumnFilterComponent, selector: "st-column-filter", inputs: ["column", "tableState", "columnIndex", "isFirstColumn", "isLastColumn", "isOpen", "filterContext"], outputs: ["closed", "filterApplied", "filterCleared"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StColumnMenuDropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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\" #dropdownPanel [ngStyle]=\"dropdownStyle\">\n      <!-- Main menu with actions -->\n      @if (!isFilterOpen) {\n        <nile-menu>\n          <!-- Dynamically render all visible actions -->\n          @for (action of visibleActions; track action.id; let i = $index, last = $last) {\n            <nile-menu-item \n              (click)=\"onActionClick(action)\"\n              [class.disabled]=\"isActionDisabled(action)\"\n              [class.active]=\"isActionActive(action)\">\n              @if (isActionActive(action)) {\n                <span class=\"checkmark\">\u2713</span>\n              }\n              @if (action.icon && !isActionActive(action)) {\n                <nile-icon slot=\"prefix\" [name]=\"action.icon\"></nile-icon>\n              }\n              <span class=\"action-label\">{{ action.label }}</span>\n            </nile-menu-item>\n            \n            <!-- Add divider after action groups -->\n            @if (shouldShowDividerAfter(action, i, last)) {\n              <nile-divider></nile-divider>\n            }\n          }\n          \n          <!-- Fallback if no actions -->\n          @if (visibleActions.length === 0) {\n            <nile-menu-item>\n              No actions available\n            </nile-menu-item>\n          }\n        </nile-menu>\n      }\n      \n      <!-- Filter popup (conditionally rendered) -->\n      @if (isFilterOpen && context) {\n        <st-column-filter\n          #filterPopup\n          [column]=\"context.column\"\n          [tableState]=\"context.tableState\"\n          [columnIndex]=\"context.columnIndex\"\n          [isFirstColumn]=\"context.isFirstColumn\"\n          [isLastColumn]=\"context.isLastColumn\"\n          [isOpen]=\"isFilterOpen\"\n          (filterApplied)=\"onFilterApplied($event)\"\n          (filterCleared)=\"onFilterCleared()\"\n          (closed)=\"onFilterClosed()\">\n        </st-column-filter>\n      }\n    </div>\n  </div>\n}\n", styles: [".dropdown-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9998}.dropdown-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:auto;z-index:9998}.column-menu-dropdown{min-width:200px;max-width:300px;background-color:#fff;border-radius:8px;box-shadow:0 10px 25px #00000026;overflow:hidden;pointer-events:auto;z-index:9999}nile-menu nile-divider::part(divider){margin:0}nile-menu nile-menu-item::part(base){height:2.5rem;min-height:auto}nile-menu nile-menu-item .checkmark{margin-right:8px;color:#4299e1;font-weight:700}\n"] }]
         }], propDecorators: { isOpen: [{
@@ -8778,10 +9344,10 @@ class StRowActionsDropdownComponent {
     onDropdownClick(event) {
         event.stopPropagation();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StRowActionsDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: StRowActionsDropdownComponent, isStandalone: true, selector: "st-row-actions-dropdown", inputs: { isOpen: "isOpen", position: "position", context: "context" }, outputs: { actionClicked: "actionClicked", closed: "closed" }, host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" } }, viewQueries: [{ propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (isOpen && context) {\n  <div class=\"dropdown-container\">\n    <!-- Backdrop -->\n    <div class=\"dropdown-overlay\" (click)=\"closed.emit()\"></div>\n    \n    <!-- Dropdown menu -->\n    <div class=\"dropdown-menu\" #dropdownPanel [ngStyle]=\"dropdownStyle\">\n      @if (isOpen) {\n        <nile-menu>\n          @for (action of visibleActions; track action.id) {\n            <nile-menu-item [class.disabled]=\"isActionDisabled(action)\" (click)=\"onActionClick(action)\" class=\"action-label\">\n              @if (action.icon) {\n                <nile-icon size=\"14\" slot=\"prefix\" [name]=\"action.icon\"></nile-icon>\n              }\n              {{ action.label }}\n            </nile-menu-item>\n          }\n        \n          @if (visibleActions.length === 0) {\n            <nile-menu-item>No actions available</nile-menu-item>\n          }\n        </nile-menu>\n      }\n    </div>\n  </div>\n}\n", styles: [".dropdown-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9998}.dropdown-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:transparent;pointer-events:auto;z-index:9998}.dropdown-menu{position:fixed;background-color:#fff;box-shadow:0 5px 15px #0000004d,0 0 0 1px #0000001a;overflow:hidden;pointer-events:auto;z-index:9999}.action-icon{display:flex;align-items:center;justify-content:center;font-size:16px;width:20px;flex-shrink:0}.action-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dropdown-empty{padding:16px;text-align:center;color:#a0aec0;font-size:14px;font-style:italic}nile-menu{height:fit-content}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: StRowActionsDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: StRowActionsDropdownComponent, isStandalone: true, selector: "st-row-actions-dropdown", inputs: { isOpen: "isOpen", position: "position", context: "context" }, outputs: { actionClicked: "actionClicked", closed: "closed" }, host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" } }, viewQueries: [{ propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (isOpen && context) {\n  <div class=\"dropdown-container\">\n    <!-- Backdrop -->\n    <div class=\"dropdown-overlay\" (click)=\"closed.emit()\"></div>\n    \n    <!-- Dropdown menu -->\n    <div class=\"dropdown-menu\" #dropdownPanel [ngStyle]=\"dropdownStyle\">\n      @if (isOpen) {\n        <nile-menu>\n          @for (action of visibleActions; track action.id) {\n            <nile-menu-item [class.disabled]=\"isActionDisabled(action)\" (click)=\"onActionClick(action)\" class=\"action-label\">\n              @if (action.icon) {\n                <nile-icon size=\"14\" slot=\"prefix\" [name]=\"action.icon\"></nile-icon>\n              }\n              {{ action.label }}\n            </nile-menu-item>\n          }\n        \n          @if (visibleActions.length === 0) {\n            <nile-menu-item>No actions available</nile-menu-item>\n          }\n        </nile-menu>\n      }\n    </div>\n  </div>\n}\n", styles: [".dropdown-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9998}.dropdown-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:transparent;pointer-events:auto;z-index:9998}.dropdown-menu{position:fixed;background-color:#fff;box-shadow:0 5px 15px #0000004d,0 0 0 1px #0000001a;overflow:hidden;pointer-events:auto;z-index:9999}.action-icon{display:flex;align-items:center;justify-content:center;font-size:16px;width:20px;flex-shrink:0}.action-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dropdown-empty{padding:16px;text-align:center;color:#a0aec0;font-size:14px;font-style:italic}nile-menu{height:fit-content}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StRowActionsDropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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\" #dropdownPanel [ngStyle]=\"dropdownStyle\">\n      @if (isOpen) {\n        <nile-menu>\n          @for (action of visibleActions; track action.id) {\n            <nile-menu-item [class.disabled]=\"isActionDisabled(action)\" (click)=\"onActionClick(action)\" class=\"action-label\">\n              @if (action.icon) {\n                <nile-icon size=\"14\" slot=\"prefix\" [name]=\"action.icon\"></nile-icon>\n              }\n              {{ action.label }}\n            </nile-menu-item>\n          }\n        \n          @if (visibleActions.length === 0) {\n            <nile-menu-item>No actions available</nile-menu-item>\n          }\n        </nile-menu>\n      }\n    </div>\n  </div>\n}\n", styles: [".dropdown-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9998}.dropdown-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:transparent;pointer-events:auto;z-index:9998}.dropdown-menu{position:fixed;background-color:#fff;box-shadow:0 5px 15px #0000004d,0 0 0 1px #0000001a;overflow:hidden;pointer-events:auto;z-index:9999}.action-icon{display:flex;align-items:center;justify-content:center;font-size:16px;width:20px;flex-shrink:0}.action-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dropdown-empty{padding:16px;text-align:center;color:#a0aec0;font-size:14px;font-style:italic}nile-menu{height:fit-content}\n"] }]
         }], propDecorators: { isOpen: [{
@@ -8865,10 +9431,10 @@ class StKeyboardNavigationDirective {
         };
         return map[key];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StKeyboardNavigationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: StKeyboardNavigationDirective, isStandalone: true, selector: "[stKeyboardNavigation]", inputs: { tableState: "tableState", addRowOnNavigatePastEnd: "addRowOnNavigatePastEnd" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: StKeyboardNavigationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: StKeyboardNavigationDirective, isStandalone: true, selector: "[stKeyboardNavigation]", inputs: { tableState: "tableState", addRowOnNavigatePastEnd: "addRowOnNavigatePastEnd" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StKeyboardNavigationDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: StKeyboardNavigationDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[stKeyboardNavigation]',
@@ -8980,10 +9546,10 @@ class StColumnResizeDirective {
         document.removeEventListener('mousemove', this.onResizeMove);
         document.removeEventListener('mouseup', this.onResizeEnd);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StColumnResizeDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: StColumnResizeDirective, isStandalone: true, selector: "[stColumnResize]", inputs: { column: "column" }, outputs: { columnResized: "columnResized", columnResizing: "columnResizing" }, host: { listeners: { "mousedown": "onResizeStart($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: StColumnResizeDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: StColumnResizeDirective, isStandalone: true, selector: "[stColumnResize]", inputs: { column: "column" }, outputs: { columnResized: "columnResized", columnResizing: "columnResizing" }, host: { listeners: { "mousedown": "onResizeStart($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StColumnResizeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: StColumnResizeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[stColumnResize]',
@@ -9003,6 +9569,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
 class StTableComponent {
     constructor() {
         this.destroyRef = inject(DestroyRef);
+        this.injector = inject(Injector);
         this.schemaValidator = inject(JsonSchemaValidatorService);
         this.logger = inject(ValidationLoggerService);
         this.virtualScrollService = inject(VirtualScrollService);
@@ -9078,6 +9645,12 @@ class StTableComponent {
         this.visibleRows$ = new BehaviorSubject([]);
         this.internalData$ = new BehaviorSubject([]);
         this.previousData = [];
+        /** Pixel height for `.st-table` when `display.visibleBodyRows` is set (measured from DOM). */
+        this.scrollViewportHeightPx = signal(null, ...(ngDevMode ? [{ debugName: "scrollViewportHeightPx" }] : /* istanbul ignore next */ []));
+        this.viewportMeasureRaf = 0;
+        this.tableResizeObserver = null;
+        this.observedTableElement = null;
+        this.fallbackBodyRowPx = 32;
         this.trackByRowIndex = (index, row) => {
             return this.getAbsoluteRowIndex(index);
         };
@@ -9089,6 +9662,20 @@ class StTableComponent {
             this.virtualScrollOffsetYNeg$.next((state?.offsetY ?? 0) * -1);
             this.visibleRows$.next(this.visibleRows());
         });
+        // Recompute scroll viewport when config/data grid changes (standard mode + visibleBodyRows)
+        effect(() => {
+            this.mergedConfig();
+            this.visibleCellGrid();
+            const merged = this.mergedConfig();
+            const vrb = merged?.display?.visibleBodyRows;
+            const vsOn = merged?.display?.virtualScroll?.enabled === true;
+            if (vsOn || vrb == null || Number(vrb) <= 0) {
+                this.scrollViewportHeightPx.set(null);
+                this.detachTableResizeObserver();
+                return;
+            }
+            afterNextRender(() => this.scheduleScrollViewportMeasure(), { injector: this.injector });
+        });
     }
     ngOnInit() {
         const config = this.tableConfig();
@@ -9133,6 +9720,10 @@ class StTableComponent {
         if (this.isVirtualScrollEnabled() && this.scrollViewport) {
             this.setupVirtualScrollListener();
         }
+        const vrb0 = this.mergedConfig()?.display?.visibleBodyRows;
+        if (!this.isVirtualScrollEnabled() && vrb0 != null && Number(vrb0) > 0) {
+            afterNextRender(() => this.scheduleScrollViewportMeasure(), { injector: this.injector });
+        }
     }
     ngOnChanges(changes) {
         const config = this.tableConfig();
@@ -10018,6 +10609,209 @@ class StTableComponent {
         rightStickyWidth += settingsColumnWidth;
         return { leftStickyWidth, rightStickyWidth };
     }
+    /**
+     * Resolved CSS color from `display.rowBackground` for this row index, if any.
+     */
+    resolveRowBackground(rowIndex) {
+        const fn = this.mergedConfig()?.display?.rowBackground;
+        if (!fn) {
+            return undefined;
+        }
+        const rowData = this.getRowData(rowIndex);
+        const raw = fn(rowData, { rowIndex });
+        if (raw == null || raw === '') {
+            return undefined;
+        }
+        return String(raw);
+    }
+    /**
+     * Body cell background: `rowBackground` wins when set; otherwise sticky / full-row tint via `stickyColumnBackground`.
+     */
+    bodyCellBackground(column, rowIndex) {
+        const rowBg = this.resolveRowBackground(rowIndex);
+        if (rowBg) {
+            return rowBg;
+        }
+        return this.stickyColumnBackground(column);
+    }
+    /**
+     * Row-number cell background: conditional row color, else table sticky row-number tint.
+     */
+    rowNumberCellBackground(rowIndex) {
+        const rowBg = this.resolveRowBackground(rowIndex);
+        if (rowBg) {
+            return rowBg;
+        }
+        return this.rowNumberStickyBackground();
+    }
+    /**
+     * Trailing settings / row-actions body cell background.
+     */
+    settingsColumnBodyBackground(rowIndex) {
+        const rowBg = this.resolveRowBackground(rowIndex);
+        if (rowBg) {
+            return rowBg;
+        }
+        if (this.mergedConfig()?.display?.stickyColumnBackgroundFullRow) {
+            return this.stickyColumnBackground(undefined);
+        }
+        return undefined;
+    }
+    /**
+     * Cell background from sticky styling: per-column `stickyBackground`, else `display.stickyColumnBackground`.
+     * When `display.stickyColumnBackgroundFullRow` is true, applies to every data cell (not only sticky columns).
+     */
+    stickyColumnBackground(column) {
+        const display = this.mergedConfig()?.display;
+        const fullRow = display?.stickyColumnBackgroundFullRow === true;
+        const tableBg = display?.stickyColumnBackground;
+        if (fullRow) {
+            if (!column) {
+                return tableBg ?? undefined;
+            }
+            return column.stickyBackground ?? tableBg ?? undefined;
+        }
+        if (!column?.sticky) {
+            return undefined;
+        }
+        return column.stickyBackground ?? tableBg ?? undefined;
+    }
+    /** Row # column is sticky-left; uses table-level `display.stickyColumnBackground` only. */
+    rowNumberStickyBackground() {
+        return this.mergedConfig()?.display?.stickyColumnBackground ?? undefined;
+    }
+    /** Positive row counts only (caller must ensure `raw > 0`). */
+    clampPositiveVisibleBodyRows(raw) {
+        const n = Math.floor(Number(raw));
+        if (!Number.isFinite(n) || n < 1) {
+            return 1;
+        }
+        return Math.min(10_000, n);
+    }
+    fallbackViewportPxForRowCount(visibleBodyRows) {
+        if (visibleBodyRows < 1) {
+            return Math.ceil(2 * this.fallbackBodyRowPx);
+        }
+        return Math.ceil((1 + visibleBodyRows) * this.fallbackBodyRowPx);
+    }
+    /** Effective body rows for viewport math: never more than rows actually rendered. */
+    effectiveVisibleBodyRows(requested, actualBodyRowCount) {
+        if (actualBodyRowCount < 1) {
+            return 0;
+        }
+        return Math.min(requested, actualBodyRowCount);
+    }
+    scheduleScrollViewportMeasure() {
+        if (this.viewportMeasureRaf !== 0) {
+            cancelAnimationFrame(this.viewportMeasureRaf);
+        }
+        this.viewportMeasureRaf = requestAnimationFrame(() => {
+            this.viewportMeasureRaf = 0;
+            this.updateScrollViewportMeasurement();
+        });
+    }
+    /**
+     * Sets `scrollViewportHeightPx` from measured thead/tbody row heights so `visibleBodyRows` maps to real pixels.
+     */
+    updateScrollViewportMeasurement() {
+        const merged = this.mergedConfig();
+        const raw = merged?.display?.visibleBodyRows;
+        if (merged?.display?.virtualScroll?.enabled === true || raw == null || Number(raw) <= 0) {
+            this.scrollViewportHeightPx.set(null);
+            this.detachTableResizeObserver();
+            return;
+        }
+        const requestedRows = this.clampPositiveVisibleBodyRows(Number(raw));
+        const root = this.elementRef.nativeElement;
+        const table = root.querySelector('table.st-table-element');
+        const gridRowCount = this.visibleCellGrid().length;
+        if (!table) {
+            const eff = this.effectiveVisibleBodyRows(requestedRows, gridRowCount);
+            this.scrollViewportHeightPx.set(eff < 1 ? Math.ceil(2 * this.fallbackBodyRowPx) : this.fallbackViewportPxForRowCount(eff));
+            return;
+        }
+        const theadTr = table.querySelector('thead tr');
+        let headerH = theadTr?.getBoundingClientRect().height ?? 0;
+        const bodyRows = table.querySelectorAll('tbody tr');
+        const actualCount = bodyRows.length;
+        const effectiveRows = this.effectiveVisibleBodyRows(requestedRows, actualCount);
+        // Sum measured heights for the first `effectiveRows` rows. If the consumer asks for more rows than
+        // exist, we clamp to actualCount (sum all body rows) — no extrapolation, which inflated the viewport
+        // and broke layout / scroll behavior.
+        let bodyBlockHeight = 0;
+        if (effectiveRows < 1) {
+            bodyBlockHeight = 0;
+        }
+        else {
+            for (let i = 0; i < effectiveRows; i++) {
+                bodyBlockHeight += bodyRows[i].getBoundingClientRect().height;
+            }
+        }
+        if (headerH < 1) {
+            const sampleBody = bodyRows.length > 0 ? bodyRows[0].getBoundingClientRect().height : this.fallbackBodyRowPx;
+            headerH = sampleBody > 0 ? sampleBody : this.fallbackBodyRowPx;
+        }
+        this.scrollViewportHeightPx.set(Math.ceil(headerH + bodyBlockHeight));
+        this.ensureTableResizeObserver(table);
+    }
+    ensureTableResizeObserver(table) {
+        const merged = this.mergedConfig();
+        const vrb = merged?.display?.visibleBodyRows;
+        if (merged?.display?.virtualScroll?.enabled === true || vrb == null || Number(vrb) <= 0) {
+            this.detachTableResizeObserver();
+            return;
+        }
+        if (this.observedTableElement === table && this.tableResizeObserver) {
+            return;
+        }
+        this.detachTableResizeObserver();
+        this.observedTableElement = table;
+        this.tableResizeObserver = new ResizeObserver(() => this.scheduleScrollViewportMeasure());
+        this.tableResizeObserver.observe(table);
+    }
+    detachTableResizeObserver() {
+        this.tableResizeObserver?.disconnect();
+        this.tableResizeObserver = null;
+        this.observedTableElement = null;
+    }
+    /** Host styles: max-height plus CSS variables for keyboard-focused cell (see `display.focusedCell`). */
+    tableWrapperStyle() {
+        const merged = this.mergedConfig();
+        const style = {};
+        const vrb = merged?.display?.visibleBodyRows;
+        // `visibleBodyRows <= 0`: show full table — do not cap `.st-table` with row viewport or merged maxHeight
+        // (avoids inner scroll when user means "all rows"; use positive N or omit visibleBodyRows to use maxHeight).
+        if (!this.isVirtualScrollEnabled() && vrb != null && Number(vrb) <= 0) {
+            // no max-height / height from row viewport or display.maxHeight
+        }
+        else if (!this.isVirtualScrollEnabled() && vrb != null && Number(vrb) > 0) {
+            const requested = this.clampPositiveVisibleBodyRows(Number(vrb));
+            const measured = this.scrollViewportHeightPx();
+            const dataRows = this.visibleCellGrid().length;
+            const eff = this.effectiveVisibleBodyRows(requested, dataRows);
+            const px = measured ??
+                (eff < 1 ? Math.ceil(2 * this.fallbackBodyRowPx) : this.fallbackViewportPxForRowCount(eff));
+            style['max-height.px'] = px;
+            style['height.px'] = px;
+        }
+        else if (!this.isVirtualScrollEnabled() && merged?.display?.maxHeight != null) {
+            style['max-height.px'] = merged.display.maxHeight;
+        }
+        const fc = merged?.display?.focusedCell;
+        if (fc?.outlineColor) {
+            style['--st-focused-cell-outline-color'] = fc.outlineColor;
+        }
+        if (fc?.outlineWidth) {
+            style['--st-focused-cell-outline-width'] = fc.outlineWidth;
+        }
+        if (fc?.boxShadow) {
+            style['--st-focused-cell-box-shadow'] = fc.boxShadow;
+        }
+        if (fc?.editingBoxShadow) {
+            style['--st-focused-cell-editing-box-shadow'] = fc.editingBoxShadow;
+        }
+        return style;
+    }
     onCellClick(rowIndex, columnIndex) {
         if (!this.isKeyboardNavigationEnabled())
             return;
@@ -10091,12 +10885,19 @@ class StTableComponent {
             }
             return false;
         });
-        if (!tableElement && !portalElement && !isInsideNileElement) {
+        // CodeMirror completion/hover layers are often on document.body (not under .st-table)
+        const isInsideCodeMirrorTooltip = composedPath.some((el) => el instanceof Element && !!el.closest?.('.cm-tooltip'));
+        if (!tableElement && !portalElement && !isInsideNileElement && !isInsideCodeMirrorTooltip) {
             this.getActiveTableState().clearFocus();
             this.getActiveTableState().clearEditingCell();
         }
     }
     ngOnDestroy() {
+        if (this.viewportMeasureRaf !== 0) {
+            cancelAnimationFrame(this.viewportMeasureRaf);
+            this.viewportMeasureRaf = 0;
+        }
+        this.detachTableResizeObserver();
         this.stateSubscription?.unsubscribe();
         this.scrollSubscription?.unsubscribe();
         this.focusSubscription?.unsubscribe();
@@ -10109,10 +10910,10 @@ class StTableComponent {
         this.visibleRows$.complete();
         this.internalData$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: StTableComponent, isStandalone: true, selector: "st-table", inputs: { tableConfig: { classPropertyName: "tableConfig", publicName: "tableConfig", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, data$: { classPropertyName: "data$", publicName: "data$", isSignal: true, isRequired: false, transformFunction: null }, tableState: { classPropertyName: "tableState", publicName: "tableState", isSignal: true, isRequired: false, transformFunction: null }, enableSorting: { classPropertyName: "enableSorting", publicName: "enableSorting", isSignal: true, isRequired: false, transformFunction: null }, enableFiltering: { classPropertyName: "enableFiltering", publicName: "enableFiltering", isSignal: true, isRequired: false, transformFunction: null }, validateConfig: { classPropertyName: "validateConfig", publicName: "validateConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stateChange: "stateChange", dataChange: "dataChange", cellEdit: "cellEdit", cellSave: "cellSave", cellCancel: "cellCancel", cellChange: "cellChange", columnResized: "columnResized", columnMoved: "columnMoved", configValidationErrors: "configValidationErrors", columnAdded: "columnAdded", rowAction: "rowAction", validationStateChange: "validationStateChange", requestAddRow: "requestAddRow" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "scrollViewport", first: true, predicate: ["scrollViewport"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<!-- Top pagination controls -->\n@if (showTopPagination() && !(mergedConfig()?.tableSkeleton?.enabled | async)) {\n  <st-pagination \n    [tableState]=\"getActiveTableState()\"\n    [tableConfig]=\"mergedConfig()!\"\n    position=\"top\">\n  </st-pagination>\n}\n\n@if (!(mergedConfig()?.tableSkeleton?.enabled | async)) {\n  <div class=\"st-table\"\n    [ngClass]=\"{\n      'virtual-scroll-enabled': isVirtualScrollEnabled(),\n      'keyboard-navigation-enabled': isKeyboardNavigationEnabled()\n    }\"\n    [ngStyle]=\"{\n      'max-height.px': !isVirtualScrollEnabled() ? mergedConfig()?.display?.maxHeight : null\n    }\"\n    stKeyboardNavigation\n    [tableState]=\"getActiveTableState()\"\n    [addRowOnNavigatePastEnd]=\"mergedConfig()?.features?.keyboardNavigation?.addRowOnNavigatePastEnd || false\"\n    [attr.tabindex]=\"isKeyboardNavigationEnabled() ? 0 : -1\"\n    (focus)=\"onTableContainerFocus($event)\"\n    [attr.title]=\"isKeyboardNavigationEnabled() ? 'Click a cell or press Tab to start keyboard navigation' : null\">\n    <!-- Unified Table Actions Menu -->\n\n    <!-- Virtual scroll viewport wrapper -->\n    @if (isVirtualScrollEnabled()) {\n      <div class=\"st-scroll-viewport\" #scrollViewport\n        [ngStyle]=\"{ 'height.px': getVirtualScrollViewportHeight() }\">\n\n        <!-- Spacer to create scrollable area -->\n        <div class=\"st-scroll-spacer\" [ngStyle]=\"{ 'height.px': virtualScrollTotalHeight() }\">\n        </div>\n\n        <!-- Table positioner with transform (instead of tbody) -->\n        <div class=\"st-table-positioner\" [ngStyle]=\"{ transform: 'translateY(' + virtualScrollOffsetY() + 'px)' }\">\n          <!-- Table with only visible rows -->\n          <ng-container *ngTemplateOutlet=\"tableTemplate; context: { \n            mode: 'virtual',\n            theadStyle: { top: virtualScrollOffsetYNeg() + 'px' }\n          }\"></ng-container>\n        </div>\n      </div>\n    }\n    \n    <!-- Standard table (when virtual scroll disabled) -->\n    @if (!isVirtualScrollEnabled()) {\n      <ng-container *ngTemplateOutlet=\"tableTemplate; context: { \n        mode: 'standard',\n        theadStyle: null\n      }\"></ng-container>\n    }\n\n    <!-- Shared Column Menu Dropdown -->\n    <st-column-menu-dropdown \n      [isOpen]=\"columnMenuState().isOpen\"\n      [position]=\"columnMenuState().position\"\n      [context]=\"columnMenuState().context\"\n      (actionClicked)=\"onColumnActionClicked($event)\"\n      (closed)=\"closeColumnMenu()\">\n    </st-column-menu-dropdown>\n  </div>\n}\n\n@if (mergedConfig()?.tableSkeleton?.enabled | async) {\n  <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\n}\n\n<!-- Shared Row Actions Dropdown -->\n<st-row-actions-dropdown [isOpen]=\"dropdownState().isOpen\" [position]=\"dropdownState().position\"\n  [context]=\"dropdownState().context\" (actionClicked)=\"onRowActionClicked($event)\" (closed)=\"closeRowActionsDropdown()\">\n</st-row-actions-dropdown>\n\n\n<!-- Bottom pagination controls -->\n@if (showBottomPagination() && !(mergedConfig()?.tableSkeleton?.enabled | async)) {\n  <st-pagination \n    [tableState]=\"getActiveTableState()\"\n    [tableConfig]=\"mergedConfig()!\"\n    position=\"bottom\">\n</st-pagination>\n}\n\n\n<!-- ========================================== -->\n<!-- REUSABLE TABLE TEMPLATE -->\n<!-- ========================================== -->\n<ng-template #tableTemplate let-mode=\"mode\" let-theadStyle=\"theadStyle\">\n  <table class=\"st-table-element\">\n    <!-- TABLE HEADER -->\n    <thead [ngClass]=\"{ 'sticky': mergedConfig()?.display?.stickyHeader }\" [ngStyle]=\"theadStyle\">\n      <tr>\n        <!-- Row Number Header -->\n        @if (mergedConfig()?.showRowNumber) {\n          <th class=\"row-number-header header-cell sticky-left\"\n              [ngStyle]=\"{\n                position: 'sticky',\n                'left.px': 0,\n                'z-index': ZIndex.STICKY_HEADER_CELL,\n                'width.px': 30\n              }\">\n            #\n          </th>\n        }\n        <!-- Column Headers -->\n        @for (column of visibleColumns(); track column.key; let colIndex = $index, isFirst = $first, isLast = $last) {\n          <th \n            [ngClass]=\"{\n              'header-cell': mode === 'standard',\n              'sticky-left': column.sticky === 'left',\n              'sticky-right': column.sticky === 'right',\n              'sticky-right-first': column.sticky === 'right' && isFirstStickyRight(column.key),\n              'resizable': column.resizable !== false\n            }\"\n            [ngStyle]=\"{\n              position: column.sticky ? 'sticky' : null,\n              'left.px': column.sticky === 'left' ? (column.stickyOffset || 0) : null,\n              'right.px': column.sticky === 'right' ? (column.stickyOffset || 0) : null,\n              'z-index': column.sticky ? ZIndex.STICKY_HEADER_CELL : null,\n              'width.px': column.width\n            }\">\n            \n            <st-header \n              [column]=\"column\"\n              [columnIndex]=\"colIndex\"\n              [isFirstColumn]=\"isFirst\"\n              [isLastColumn]=\"isLast\"\n              [tableState]=\"getActiveTableState()\"\n              [enableSorting]=\"mergedConfig()?.sorting?.enabled ?? enableSorting()\"\n              [enableFiltering]=\"mergedConfig()?.filtering?.enabled ?? enableFiltering()\"\n              (columnMoved)=\"onColumnMoved($event)\"\n              (menuClick)=\"openColumnMenu($event, column, colIndex, isFirst, isLast)\">\n            </st-header>\n\n            @if (column.resizable !== false) {\n              <div \n                class=\"resize-handle\" \n                stColumnResize\n                [column]=\"column\"\n                (columnResizing)=\"onColumnResizing($event)\"\n                (columnResized)=\"onColumnResized($event)\">\n              </div>\n            }\n          </th>\n        }\n        \n        <!-- Settings Column Header -->\n        <th \n          class=\"settings-column sticky-right\"\n          [ngClass]=\"{ 'header-cell': mode === 'standard' }\"\n          [ngStyle]=\"{ 'z-index': ZIndex.STICKY_HEADER_CELL }\">\n          <div [ngClass]=\"{ 'flex-center': mode === 'virtual', 'header-content': mode === 'standard' }\">\n            <st-table-actions \n              [tableState]=\"getActiveTableState()\"\n              [allowAddColumn]=\"mergedConfig()?.features?.columnManagement?.allowAdd || false\"\n              (addColumnClicked)=\"onAddColumnClick()\">\n            </st-table-actions>\n          </div>\n        </th>\n      </tr>\n    </thead>\n\n    <!-- TABLE BODY -->\n    <tbody>\n      <!-- Virtual Scroll Rows -->\n      @if (mode === 'virtual') {\n        @for (row of visibleRows(); track trackByRowIndex($index, row); let relativeIndex = $index) {\n          <tr [attr.data-row-index]=\"getAbsoluteRowIndex(relativeIndex)\">\n            <!-- Row Number Cell -->\n            @if (mergedConfig()?.showRowNumber) {\n              <td class=\"row-number-cell\" \n                [ngClass]=\"{ 'sticky-left': 'left' }\"\n                [ngStyle]=\"{\n                  'width.px': 30,\n                  position: 'sticky',\n                  'left.px': 0,\n                  'z-index': ZIndex.STICKY_BODY_CELL,\n                  'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null\n                }\">\n                {{getAbsoluteRowIndex(relativeIndex) + 1}}\n              </td>\n            }\n            <ng-container *ngTemplateOutlet=\"bodyCellTemplate; context: { \n              row: row,\n              rowIndex: getAbsoluteRowIndex(relativeIndex),\n              mode: 'virtual',\n              relativeIndex: relativeIndex\n            }\"></ng-container>\n          </tr>\n        }\n      }\n\n      <!-- Standard Rows -->\n      @if (mode === 'standard') {\n        @for (row of visibleCellGrid(); track $index; let rowIndex = $index) {\n          <tr [attr.data-row-index]=\"rowIndex\">\n            <!-- Row Number Cell -->\n            @if (mergedConfig()?.showRowNumber) {\n              <td class=\"row-number-cell\" \n                [ngClass]=\"{ 'sticky-left': 'left' }\"\n                [ngStyle]=\"{\n                  'width.px': 30,\n                  position: 'sticky',\n                  'left.px': 0,\n                  'z-index': ZIndex.STICKY_BODY_CELL,\n                  'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null\n                }\">\n                {{rowIndex + 1}}\n              </td>\n            }\n            <ng-container *ngTemplateOutlet=\"bodyCellTemplate; context: { \n              row: row,\n              rowIndex: rowIndex,\n              mode: 'standard'\n            }\"></ng-container>\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</ng-template>\n\n<!-- ========================================== -->\n<!-- REUSABLE BODY CELL TEMPLATE -->\n<!-- ========================================== -->\n<ng-template #bodyCellTemplate let-row=\"row\" let-rowIndex=\"rowIndex\" let-mode=\"mode\" let-relativeIndex=\"relativeIndex\">\n  <!-- Data Cells -->\n  @for (cell of row; track $index; let colIndex = $index) {\n    <td \n      [ngClass]=\"{\n        'sticky-left': visibleColumns()[colIndex]?.sticky === 'left',\n        'sticky-right': visibleColumns()[colIndex]?.sticky === 'right',\n        'sticky-right-first': visibleColumns()[colIndex]?.sticky === 'right' && visibleColumns()[colIndex]?.key && isFirstStickyRight(visibleColumns()[colIndex].key),\n        'align-center': visibleColumns()[colIndex]?.alignment === 'center',\n        'align-right': visibleColumns()[colIndex]?.alignment === 'right',\n        'cell-focused': cell.isFocused()\n      }\"\n      [ngStyle]=\"{\n        position: visibleColumns()[colIndex]?.sticky ? 'sticky' : null,\n        'left.px': visibleColumns()[colIndex]?.sticky === 'left' ? (visibleColumns()[colIndex]?.stickyOffset || 0) : null,\n        'right.px': visibleColumns()[colIndex]?.sticky === 'right' ? (visibleColumns()[colIndex]?.stickyOffset || 0) : null,\n        'z-index': visibleColumns()[colIndex]?.sticky ? ZIndex.STICKY_BODY_CELL : null,\n        'width.px': visibleColumns()[colIndex]?.width,\n        'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null\n      }\"\n      (click)=\"isKeyboardNavigationEnabled() ? onCellClick(rowIndex, colIndex) : null\">\n      \n      <!-- Virtual Scroll Cell -->\n      @if (mode === 'virtual') {\n        <st-cell \n          [cell]=\"cell\" \n          [attr.tabindex]=\"cell.isFocused() ? 0 : -1\" \n          [editMode]=\"getEditModeForCells()\"\n          [tableState]=\"getActiveTableState()\"\n          [tableConfig]=\"mergedConfig()!\"\n          [columnIndex]=\"colIndex\"\n          (cellEdit)=\"onCellEdit($event)\" \n          (cellSave)=\"onCellSave($event)\"\n          (cellSaveAndNavigate)=\"onCellSaveAndNavigate($event)\" \n          (cellCancel)=\"onCellCancel($event)\"\n          (cellChange)=\"cellChange.emit($event)\">\n        </st-cell>\n      }\n\n      <!-- Standard Cell -->\n      @if (mode === 'standard') {\n        <st-cell \n          [cell]=\"cell\"  \n          [attr.tabindex]=\"cell.isFocused() ? 0 : -1\"\n          [tableState]=\"getActiveTableState()\"\n          [tableConfig]=\"mergedConfig()!\"\n          [columnIndex]=\"colIndex\"\n          (cellSave)=\"onCellSave($event)\"\n          (cellChange)=\"cellChange.emit($event)\">\n        </st-cell>\n      }\n    </td>\n  }\n  \n  <!-- Row Actions Cell -->\n  <td class=\"settings-column\"\n    [ngClass]=\"{\n      'has-actions': hasRowActions()\n    }\"\n    [ngStyle]=\"{\n      position: hasRowActions() ? 'sticky' : null,\n      'right.px': hasRowActions() ? 0 : null,\n      'z-index': hasRowActions() ? ZIndex.STICKY_BODY_CELL : null\n    }\">\n    @if (hasRowActions()) {\n      <button \n        class=\"settings-trigger\"\n        (click)=\"openRowActionsDropdown($event, getRowData(rowIndex), rowIndex)\"\n        type=\"button\" \n        aria-label=\"Row actions\">\n        \u22EF\n      </button>\n    }\n  </td>\n</ng-template>\n\n<ng-template #skeletonLoader>\n  @if (mergedConfig()?.tableSkeleton?.enabled | async) {\n    <div class=\"list-row\">\n      @for (i of skeletonColumns; track $index) {\n        <div class=\"list-content\">\n          @for (j of skeletonRows; track $index) {\n            <nile-skeleton-loader variant=\"text\" width=\"90%\" height=\"18\"></nile-skeleton-loader>\n          }\n        </div>\n      }\n    </div>\n  }\n</ng-template>\n", styles: [".st-table{width:100%;overflow:auto;position:relative;height:100%;max-height:30rem;border-radius:4px;border:1px solid #E6E9EB}.st-table st-table-actions{position:sticky;right:0}.st-table.keyboard-navigation-enabled{cursor:pointer}.st-table.keyboard-navigation-enabled:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}.st-table.keyboard-navigation-enabled td.cell-focused{outline:2px solid #4299e1;outline-offset:-1px;position:relative;box-shadow:0 0 0 3px #3182ce1a}.st-table.keyboard-navigation-enabled td.cell-focused:focus{outline:2px solid #4299e1;outline-offset:-1px;box-shadow:0 0 0 3px #3182ce1a}.st-table.keyboard-navigation-enabled td.cell-focused:has(.st-cell.editing){box-shadow:0 0 0 4px #2563eb26}.st-table.virtual-scroll-enabled{overflow-x:visible;margin:0;border:1px solid #E6E9EB;border-collapse:separate;border-spacing:0}.st-table.virtual-scroll-enabled .st-scroll-viewport{position:relative;overflow-y:auto;overflow-x:auto;scroll-behavior:smooth}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-scroll-spacer{position:absolute;top:0;left:0;width:1px;pointer-events:none;z-index:-1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-positioner{position:absolute;top:0;left:0;right:0;will-change:transform}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element{position:relative;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead{background-color:#fff;border-bottom:1px solid #E6E9EB}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead.sticky{position:sticky;top:0;z-index:3;background-color:#fff;will-change:top;backface-visibility:hidden}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead.sticky:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:linear-gradient(to bottom,rgba(0,0,0,.1),transparent)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th{padding:0;vertical-align:middle;position:relative;border:none;background-color:#fff;will-change:top;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left{position:sticky;left:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~th.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~th.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right{position:sticky;right:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.settings-column{width:2rem;text-align:center;font-weight:600;font-size:12px;position:sticky;right:0;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;z-index:4;pointer-events:auto}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:after{content:\"\";position:absolute;top:50%;right:3px;transform:translateY(-50%);width:2px;height:20px;background-color:#cbd5e0;opacity:0;transition:opacity .2s}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:hover:after,.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:active:after{opacity:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.row-number-header{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~th.sticky-left)):after{content:\"\";position:absolute;right:-6px;top:0;bottom:-1px;width:5px;border-left:1px solid var(--borderColor);background:linear-gradient(90deg,#00000014,#0000)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-6px;top:0;bottom:-1px;width:5px;border-right:1px solid var(--borderColor);background:linear-gradient(90deg,#0000,#00000014)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody{will-change:transform;position:relative;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr{border-bottom:1px solid #E6E9EB;transition:background-color .15s;height:2rem;box-sizing:border-box}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr:last-child{border-bottom:none}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td{padding:0;vertical-align:middle;box-sizing:border-box;height:2rem;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb;border:none}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.align-center{text-align:center}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.align-right{text-align:right}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~td.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~td.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column{width:2rem;text-align:center;position:sticky;right:0;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column .settings-trigger{background:none;border:none;font-size:1rem;line-height:1;cursor:pointer;border-radius:4px;transition:all .15s ease}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column .settings-trigger:focus{outline:2px solid #4299e1;outline-offset:2px}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.row-number-cell{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~td.sticky-left)):after{content:\"\";position:absolute;right:-6px;top:0;bottom:-1px;width:5px;border-left:1px solid var(--borderColor);background:linear-gradient(90deg,#00000014,#0000)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right-first:before{content:\"\";position:absolute;left:-6px;top:0;bottom:-1px;width:5px;border-right:1px solid var(--borderColor);background:linear-gradient(90deg,#0000,#00000014)}.st-table:not(.virtual-scroll-enabled) .st-table-element{width:100%;height:100%;overflow:auto;border-collapse:separate;border-spacing:0;table-layout:fixed}.st-table:not(.virtual-scroll-enabled) .st-table-element thead{background-color:#fff;border-bottom:1px solid #E6E9EB}.st-table:not(.virtual-scroll-enabled) .st-table-element thead.sticky{position:sticky;top:0;z-index:3;background-color:#fff;will-change:top;backface-visibility:hidden}.st-table:not(.virtual-scroll-enabled) .st-table-element thead.sticky:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:linear-gradient(to bottom,rgba(0,0,0,.1),transparent)}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th{padding:0;vertical-align:middle;position:relative;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb;border:none}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left{position:sticky;left:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left:not(:has(~th.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left:not(:has(~th.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right{position:sticky;right:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.settings-column{width:2rem;text-align:center;font-weight:600;font-size:12px;position:sticky;right:0;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;z-index:4;pointer-events:auto}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:after{content:\"\";position:absolute;top:50%;right:3px;transform:translateY(-50%);width:2px;height:20px;background-color:#cbd5e0;opacity:0;transition:opacity .2s}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:hover:after,.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:active:after{opacity:1}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.row-number-header{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody{will-change:transform;position:relative;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr{height:2rem;box-sizing:border-box}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr:last-child{border-bottom:none}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td{padding:0;vertical-align:middle;height:2rem;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb;border:none}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.row-number-cell{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.align-center{text-align:center}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.align-right{text-align:right}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left:not(:has(~td.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left:not(:has(~td.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.settings-column{position:sticky;right:0;width:2rem;text-align:center;border-right:none;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.settings-column .settings-trigger{background:none;border:none;font-size:1rem;line-height:1;cursor:pointer;border-radius:4px;transition:all .15s ease}.st-table:not(.virtual-scroll-enabled) .st-table-element .header-content{display:flex;height:2rem;align-items:center}.st-table:not(.virtual-scroll-enabled) .st-table-element .header-content .table-header-text{flex-grow:1;padding-left:4px}.st-table:not(.virtual-scroll-enabled) .st-table-element .settings-column>.header-content{display:flex;align-items:center;justify-content:center}.flex-center{display:flex;align-items:center;justify-content:center}.list-row .list-content{display:flex;justify-content:space-evenly;gap:4px;margin-bottom:1rem}.list-row{padding:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: StPaginationComponent, selector: "st-pagination", inputs: ["tableState", "tableConfig", "position"] }, { kind: "component", type: StHeaderComponent, selector: "st-header", inputs: ["column", "columnIndex", "isFirstColumn", "isLastColumn", "tableState", "enableSorting", "enableFiltering"], outputs: ["sortToggle", "filterChange", "columnMoved", "menuClick"] }, { kind: "component", type: StCellComponent, selector: "st-cell", inputs: ["cell", "editMode", "tableState", "tableConfig", "columnIndex"], outputs: ["cellChange", "cellEdit", "cellSave", "cellCancel", "cellSaveAndNavigate"] }, { kind: "component", type: StTableActionsComponent, selector: "st-table-actions", inputs: ["tableState", "allowAddColumn"], outputs: ["addColumnClicked"] }, { kind: "component", type: StColumnMenuDropdownComponent, selector: "st-column-menu-dropdown", inputs: ["isOpen", "position", "context"], outputs: ["actionClicked", "closed"] }, { kind: "component", type: StRowActionsDropdownComponent, selector: "st-row-actions-dropdown", inputs: ["isOpen", "position", "context"], outputs: ["actionClicked", "closed"] }, { kind: "directive", type: StKeyboardNavigationDirective, selector: "[stKeyboardNavigation]", inputs: ["tableState", "addRowOnNavigatePastEnd"] }, { kind: "directive", type: StColumnResizeDirective, selector: "[stColumnResize]", inputs: ["column"], outputs: ["columnResized", "columnResizing"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: StTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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]=\"tableWrapperStyle()\"\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                'background-color': rowNumberStickyBackground()\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              'background-color': stickyColumnBackground(column)\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]=\"{\n            'z-index': ZIndex.STICKY_HEADER_CELL,\n            'background-color': rowNumberStickyBackground()\n          }\">\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                  'background-color': rowNumberCellBackground(getAbsoluteRowIndex(relativeIndex))\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                  'background-color': rowNumberCellBackground(rowIndex)\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        'background-color': bodyCellBackground(visibleColumns()[colIndex], rowIndex)\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      'background-color': settingsColumnBodyBackground(rowIndex)\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: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}:host>st-pagination{flex-shrink:0}.st-table{width:100%;overflow:auto;position:relative;flex:1 1 auto;min-height:0;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:var(--st-focused-cell-outline-width, 2px) solid var(--st-focused-cell-outline-color, #4299e1);outline-offset:-1px;position:relative;box-shadow:var(--st-focused-cell-box-shadow, 0 0 0 3px rgba(49, 130, 206, .1))}.st-table.keyboard-navigation-enabled td.cell-focused:focus{outline:var(--st-focused-cell-outline-width, 2px) solid var(--st-focused-cell-outline-color, #4299e1);outline-offset:-1px;box-shadow:var(--st-focused-cell-box-shadow, 0 0 0 3px rgba(49, 130, 206, .1))}.st-table.keyboard-navigation-enabled td.cell-focused:has(.st-cell.editing){box-shadow:var(--st-focused-cell-editing-box-shadow, 0 0 0 4px rgba(37, 99, 235, .15))}.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:has(.st-cell.editing){position:relative;z-index:20}.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:has(.st-cell.editing){overflow:visible}.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:var(--st-focused-cell-outline-width, 2px) solid var(--st-focused-cell-outline-color, #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:has(.st-cell.editing){position:relative;z-index:20}.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:has(.st-cell.editing){overflow:visible}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.row-number-cell{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.align-center{text-align:center}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.align-right{text-align:right}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left:not(:has(~td.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left:not(:has(~td.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.settings-column{position:sticky;right:0;width:2rem;text-align:center;border-right:none;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.settings-column .settings-trigger{background:none;border:none;font-size:1rem;line-height:1;cursor:pointer;border-radius:4px;transition:all .15s ease}.st-table:not(.virtual-scroll-enabled) .st-table-element .header-content{display:flex;height:2rem;align-items:center}.st-table:not(.virtual-scroll-enabled) .st-table-element .header-content .table-header-text{flex-grow:1;padding-left:4px}.st-table:not(.virtual-scroll-enabled) .st-table-element .settings-column>.header-content{display:flex;align-items:center;justify-content:center}.flex-center{display:flex;align-items:center;justify-content:center}.list-row .list-content{display:flex;justify-content:space-evenly;gap:4px;margin-bottom:1rem}.list-row{padding:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: StPaginationComponent, selector: "st-pagination", inputs: ["tableState", "tableConfig", "position"] }, { kind: "component", type: StHeaderComponent, selector: "st-header", inputs: ["column", "columnIndex", "isFirstColumn", "isLastColumn", "tableState", "enableSorting", "enableFiltering"], outputs: ["sortToggle", "filterChange", "columnMoved", "menuClick"] }, { kind: "component", type: StCellComponent, selector: "st-cell", inputs: ["cell", "editMode", "tableState", "tableConfig", "columnIndex"], outputs: ["cellChange", "cellEdit", "cellSave", "cellCancel", "cellSaveAndNavigate"] }, { kind: "component", type: StTableActionsComponent, selector: "st-table-actions", inputs: ["tableState", "allowAddColumn"], outputs: ["addColumnClicked"] }, { kind: "component", type: StColumnMenuDropdownComponent, selector: "st-column-menu-dropdown", inputs: ["isOpen", "position", "context"], outputs: ["actionClicked", "closed"] }, { kind: "component", type: StRowActionsDropdownComponent, selector: "st-row-actions-dropdown", inputs: ["isOpen", "position", "context"], outputs: ["actionClicked", "closed"] }, { kind: "directive", type: StKeyboardNavigationDirective, selector: "[stKeyboardNavigation]", inputs: ["tableState", "addRowOnNavigatePastEnd"] }, { kind: "directive", type: StColumnResizeDirective, selector: "[stColumnResize]", inputs: ["column"], outputs: ["columnResized", "columnResizing"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: StTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-table', standalone: true, imports: [
                         CommonModule,
@@ -10124,7 +10925,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                         StRowActionsDropdownComponent,
                         StKeyboardNavigationDirective,
                         StColumnResizeDirective
-                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], 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"] }]
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], 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]=\"tableWrapperStyle()\"\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                'background-color': rowNumberStickyBackground()\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              'background-color': stickyColumnBackground(column)\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]=\"{\n            'z-index': ZIndex.STICKY_HEADER_CELL,\n            'background-color': rowNumberStickyBackground()\n          }\">\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                  'background-color': rowNumberCellBackground(getAbsoluteRowIndex(relativeIndex))\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                  'background-color': rowNumberCellBackground(rowIndex)\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        'background-color': bodyCellBackground(visibleColumns()[colIndex], rowIndex)\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      'background-color': settingsColumnBodyBackground(rowIndex)\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: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}:host>st-pagination{flex-shrink:0}.st-table{width:100%;overflow:auto;position:relative;flex:1 1 auto;min-height:0;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:var(--st-focused-cell-outline-width, 2px) solid var(--st-focused-cell-outline-color, #4299e1);outline-offset:-1px;position:relative;box-shadow:var(--st-focused-cell-box-shadow, 0 0 0 3px rgba(49, 130, 206, .1))}.st-table.keyboard-navigation-enabled td.cell-focused:focus{outline:var(--st-focused-cell-outline-width, 2px) solid var(--st-focused-cell-outline-color, #4299e1);outline-offset:-1px;box-shadow:var(--st-focused-cell-box-shadow, 0 0 0 3px rgba(49, 130, 206, .1))}.st-table.keyboard-navigation-enabled td.cell-focused:has(.st-cell.editing){box-shadow:var(--st-focused-cell-editing-box-shadow, 0 0 0 4px rgba(37, 99, 235, .15))}.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:has(.st-cell.editing){position:relative;z-index:20}.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:has(.st-cell.editing){overflow:visible}.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:var(--st-focused-cell-outline-width, 2px) solid var(--st-focused-cell-outline-color, #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:has(.st-cell.editing){position:relative;z-index:20}.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:has(.st-cell.editing){overflow:visible}.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"] }]
         }], ctorParameters: () => [], propDecorators: { tableConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableConfig", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], data$: [{ type: i0.Input, args: [{ isSignal: true, alias: "data$", required: false }] }], tableState: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableState", required: false }] }], enableSorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSorting", required: false }] }], enableFiltering: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableFiltering", required: false }] }], validateConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "validateConfig", required: false }] }], stateChange: [{ type: i0.Output, args: ["stateChange"] }], dataChange: [{ type: i0.Output, args: ["dataChange"] }], cellEdit: [{ type: i0.Output, args: ["cellEdit"] }], cellSave: [{ type: i0.Output, args: ["cellSave"] }], cellCancel: [{ type: i0.Output, args: ["cellCancel"] }], cellChange: [{ type: i0.Output, args: ["cellChange"] }], columnResized: [{ type: i0.Output, args: ["columnResized"] }], columnMoved: [{ type: i0.Output, args: ["columnMoved"] }], configValidationErrors: [{ type: i0.Output, args: ["configValidationErrors"] }], columnAdded: [{ type: i0.Output, args: ["columnAdded"] }], rowAction: [{ type: i0.Output, args: ["rowAction"] }], validationStateChange: [{ type: i0.Output, args: ["validationStateChange"] }], requestAddRow: [{ type: i0.Output, args: ["requestAddRow"] }], scrollViewport: [{
                 type: ViewChild,
                 args: ['scrollViewport', { read: ElementRef }]
@@ -10216,10 +11017,10 @@ class StColumnVisibilityComponent {
         const column = this.tableState.getColumns().find(col => col.key === columnKey);
         return column ? (column.visible !== false) : true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StColumnVisibilityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: StColumnVisibilityComponent, isStandalone: true, selector: "st-column-visibility", inputs: { tableState: "tableState" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"st-column-visibility\" (clickOutside)=\"closeMenu()\">\n  <button class=\"visibility-trigger\" \n          (click)=\"toggleMenu($event)\" \n          title=\"Show/Hide Columns\"\n          type=\"button\"\n          [class.active]=\"isOpen\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M2 2H14V14H2V2Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M5 2V14M8 2V14M11 2V14\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n    </svg>\n  </button>\n  \n  @if (isOpen) {\n    <div class=\"visibility-dropdown\">\n      <div class=\"dropdown-header\">Show/Hide Columns</div>\n      <div class=\"dropdown-content\">\n        @for (column of getColumnsVisibility(); track column.key) {\n          <label class=\"column-item\"\n                 [class.checked]=\"column.visible\"\n                 [class.disabled]=\"column.hideable === false\">\n            <input type=\"checkbox\" \n                   [checked]=\"column.visible\"\n                   [disabled]=\"column.hideable === false\"\n                   [title]=\"column.hideable === false ? 'This column cannot be hidden' : ''\"\n                   (change)=\"onToggleColumn(column.key, $event)\">\n            <span class=\"column-label\">{{ column.header }}</span>\n          </label>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [".st-column-visibility{position:absolute;top:8px;right:8px;z-index:1000;display:inline-block}.st-column-visibility .visibility-trigger{background:#fff;border:1px solid #e2e8f0;border-radius:4px;cursor:pointer;padding:6px 8px;color:#718096;line-height:1;transition:all .2s;box-shadow:0 1px 2px #0000000d}.st-column-visibility .visibility-trigger:hover{background-color:#f7fafc;border-color:#cbd5e0;color:#2d3748}.st-column-visibility .visibility-trigger.active{background-color:#ebf8ff;border-color:#2b6cb0;color:#2b6cb0}.st-column-visibility .visibility-trigger svg{display:block;width:16px;height:16px}.st-column-visibility .visibility-dropdown{position:absolute;top:100%;right:0;background:#fff;border:1px solid #e2e8f0;border-radius:6px;box-shadow:0 4px 6px #0000001a,0 2px 4px #0000000f;z-index:1001;min-width:200px;margin-top:4px;overflow:hidden}.st-column-visibility .visibility-dropdown .dropdown-header{padding:10px 14px;font-weight:600;font-size:13px;color:#2d3748;border-bottom:1px solid #e2e8f0;background-color:#f7fafc}.st-column-visibility .visibility-dropdown .dropdown-content{max-height:10rem;overflow-y:auto;overflow-x:hidden}.st-column-visibility .visibility-dropdown .dropdown-content .column-item{display:flex;align-items:center;padding:10px 14px;cursor:pointer;transition:background-color .2s;-webkit-user-select:none;user-select:none}.st-column-visibility .visibility-dropdown .dropdown-content .column-item:hover{background-color:#f7fafc}.st-column-visibility .visibility-dropdown .dropdown-content .column-item.checked{background-color:#ebf8ff}.st-column-visibility .visibility-dropdown .dropdown-content .column-item.disabled{opacity:.6;cursor:not-allowed}.st-column-visibility .visibility-dropdown .dropdown-content .column-item.disabled:hover{background-color:transparent;cursor:not-allowed}.st-column-visibility .visibility-dropdown .dropdown-content .column-item input[type=checkbox]{margin-right:10px;cursor:pointer;width:16px;height:16px;flex-shrink:0}.st-column-visibility .visibility-dropdown .dropdown-content .column-item input[type=checkbox]:disabled{cursor:not-allowed;opacity:.5}.st-column-visibility .visibility-dropdown .dropdown-content .column-item .column-label{font-size:14px;color:#2d3748;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: StColumnVisibilityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: StColumnVisibilityComponent, isStandalone: true, selector: "st-column-visibility", inputs: { tableState: "tableState" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"st-column-visibility\" (clickOutside)=\"closeMenu()\">\n  <button class=\"visibility-trigger\" \n          (click)=\"toggleMenu($event)\" \n          title=\"Show/Hide Columns\"\n          type=\"button\"\n          [class.active]=\"isOpen\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M2 2H14V14H2V2Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M5 2V14M8 2V14M11 2V14\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n    </svg>\n  </button>\n  \n  @if (isOpen) {\n    <div class=\"visibility-dropdown\">\n      <div class=\"dropdown-header\">Show/Hide Columns</div>\n      <div class=\"dropdown-content\">\n        @for (column of getColumnsVisibility(); track column.key) {\n          <label class=\"column-item\"\n                 [class.checked]=\"column.visible\"\n                 [class.disabled]=\"column.hideable === false\">\n            <input type=\"checkbox\" \n                   [checked]=\"column.visible\"\n                   [disabled]=\"column.hideable === false\"\n                   [title]=\"column.hideable === false ? 'This column cannot be hidden' : ''\"\n                   (change)=\"onToggleColumn(column.key, $event)\">\n            <span class=\"column-label\">{{ column.header }}</span>\n          </label>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [".st-column-visibility{position:absolute;top:8px;right:8px;z-index:1000;display:inline-block}.st-column-visibility .visibility-trigger{background:#fff;border:1px solid #e2e8f0;border-radius:4px;cursor:pointer;padding:6px 8px;color:#718096;line-height:1;transition:all .2s;box-shadow:0 1px 2px #0000000d}.st-column-visibility .visibility-trigger:hover{background-color:#f7fafc;border-color:#cbd5e0;color:#2d3748}.st-column-visibility .visibility-trigger.active{background-color:#ebf8ff;border-color:#2b6cb0;color:#2b6cb0}.st-column-visibility .visibility-trigger svg{display:block;width:16px;height:16px}.st-column-visibility .visibility-dropdown{position:absolute;top:100%;right:0;background:#fff;border:1px solid #e2e8f0;border-radius:6px;box-shadow:0 4px 6px #0000001a,0 2px 4px #0000000f;z-index:1001;min-width:200px;margin-top:4px;overflow:hidden}.st-column-visibility .visibility-dropdown .dropdown-header{padding:10px 14px;font-weight:600;font-size:13px;color:#2d3748;border-bottom:1px solid #e2e8f0;background-color:#f7fafc}.st-column-visibility .visibility-dropdown .dropdown-content{max-height:10rem;overflow-y:auto;overflow-x:hidden}.st-column-visibility .visibility-dropdown .dropdown-content .column-item{display:flex;align-items:center;padding:10px 14px;cursor:pointer;transition:background-color .2s;-webkit-user-select:none;user-select:none}.st-column-visibility .visibility-dropdown .dropdown-content .column-item:hover{background-color:#f7fafc}.st-column-visibility .visibility-dropdown .dropdown-content .column-item.checked{background-color:#ebf8ff}.st-column-visibility .visibility-dropdown .dropdown-content .column-item.disabled{opacity:.6;cursor:not-allowed}.st-column-visibility .visibility-dropdown .dropdown-content .column-item.disabled:hover{background-color:transparent;cursor:not-allowed}.st-column-visibility .visibility-dropdown .dropdown-content .column-item input[type=checkbox]{margin-right:10px;cursor:pointer;width:16px;height:16px;flex-shrink:0}.st-column-visibility .visibility-dropdown .dropdown-content .column-item input[type=checkbox]:disabled{cursor:not-allowed;opacity:.5}.st-column-visibility .visibility-dropdown .dropdown-content .column-item .column-label{font-size:14px;color:#2d3748;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StColumnVisibilityComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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: [{
@@ -10235,10 +11036,10 @@ class StAddColumnButtonComponent {
         event.stopPropagation();
         this.addColumnClicked.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StAddColumnButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: StAddColumnButtonComponent, isStandalone: true, selector: "st-add-column-button", inputs: { enabled: "enabled" }, outputs: { addColumnClicked: "addColumnClicked" }, ngImport: i0, template: "@if (enabled) {\n  <button \n    class=\"st-add-column-button\"\n    (click)=\"onClick($event)\"\n    type=\"button\"\n    title=\"Add Column\"\n    aria-label=\"Add new column\">\n    <svg class=\"st-add-column-icon\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M12 5V19M5 12H19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </button>\n}\n", styles: [".st-add-column-button{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:50%;background-color:#1976d2;color:#fff;border:none;box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:1000}.st-add-column-button:hover{background-color:#1565c0;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;transform:scale(1.05)}.st-add-column-button:active{box-shadow:0 7px 8px -4px #0003,0 12px 17px 2px #00000024,0 5px 22px 4px #0000001f;transform:scale(.98)}.st-add-column-button:focus{outline:none;box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f,0 0 0 3px #1976d24d}.st-add-column-icon{width:24px;height:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: StAddColumnButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: StAddColumnButtonComponent, isStandalone: true, selector: "st-add-column-button", inputs: { enabled: "enabled" }, outputs: { addColumnClicked: "addColumnClicked" }, ngImport: i0, template: "@if (enabled) {\n  <button \n    class=\"st-add-column-button\"\n    (click)=\"onClick($event)\"\n    type=\"button\"\n    title=\"Add Column\"\n    aria-label=\"Add new column\">\n    <svg class=\"st-add-column-icon\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M12 5V19M5 12H19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </button>\n}\n", styles: [".st-add-column-button{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:50%;background-color:#1976d2;color:#fff;border:none;box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:1000}.st-add-column-button:hover{background-color:#1565c0;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;transform:scale(1.05)}.st-add-column-button:active{box-shadow:0 7px 8px -4px #0003,0 12px 17px 2px #00000024,0 5px 22px 4px #0000001f;transform:scale(.98)}.st-add-column-button:focus{outline:none;box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f,0 0 0 3px #1976d24d}.st-add-column-icon{width:24px;height:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StAddColumnButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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: [{
@@ -10431,10 +11232,10 @@ class ColumnEditorComponent {
         const control = this.form.get(controlName);
         return !!(control && control.invalid && (control.dirty || control.touched));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ColumnEditorComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ColumnEditorComponent, isStandalone: true, selector: "st-column-editor", inputs: { column: "column", columnIndex: "columnIndex" }, outputs: { columnUpdated: "columnUpdated", cancel: "cancel" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"column-editor\">\n  <div class=\"editor-header\">\n    <h3>Column Editor</h3>\n    <div class=\"editor-actions\">\n      <button class=\"btn btn-secondary\" (click)=\"onCancel()\">Cancel</button>\n      <button class=\"btn btn-primary\" (click)=\"onSave()\">Save</button>\n    </div>\n  </div>\n\n  <form [formGroup]=\"form\" class=\"editor-form\">\n    <!-- Basic Properties -->\n    <div class=\"form-section\">\n      <h4>Basic Properties</h4>\n      <div class=\"form-group\">\n        <label for=\"key\">Key *</label>\n        <input\n          id=\"key\"\n          type=\"text\"\n          formControlName=\"key\"\n          class=\"form-control\"\n          [class.error]=\"hasError('key')\"\n          placeholder=\"columnKey\">\n        @if (hasError('key')) {\n          <span class=\"error-message\">\n            {{ getErrorMessage('key') }}\n          </span>\n        }\n      </div>\n\n      <div class=\"form-group\">\n        <label for=\"header\">Header</label>\n        <input\n          id=\"header\"\n          type=\"text\"\n          formControlName=\"header\"\n          class=\"form-control\"\n          placeholder=\"Column Header\">\n      </div>\n\n      <div class=\"form-group\">\n        <label for=\"dataType\">Data Type</label>\n        <select id=\"dataType\" formControlName=\"dataType\" class=\"form-control\">\n          @for (type of dataTypes; track type.value) {\n            <option [value]=\"type.value\">\n              {{ type.label }}\n            </option>\n          }\n        </select>\n      </div>\n    </div>\n\n    <!-- Features -->\n    <div class=\"form-section\">\n      <h4>Features</h4>\n      <div class=\"checkbox-group\">\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"editable\">\n          <span>Editable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"sortable\">\n          <span>Sortable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"filterable\">\n          <span>Filterable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"resizable\">\n          <span>Resizable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"hideable\">\n          <span>Hideable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"movable\">\n          <span>Movable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"pinnable\">\n          <span>Pinnable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"enableMenu\">\n          <span>Enable Menu</span>\n        </label>\n      </div>\n    </div>\n\n    <!-- Layout -->\n    <div class=\"form-section\">\n      <h4>Layout</h4>\n      <div class=\"form-row\">\n        <div class=\"form-group\">\n          <label for=\"width\">Width</label>\n          <input\n            id=\"width\"\n            type=\"text\"\n            formControlName=\"width\"\n            class=\"form-control\"\n            placeholder=\"150 or 'auto'\">\n        </div>\n        <div class=\"form-group\">\n          <label for=\"minWidth\">Min Width</label>\n          <input\n            id=\"minWidth\"\n            type=\"number\"\n            formControlName=\"minWidth\"\n            class=\"form-control\"\n            placeholder=\"50\">\n        </div>\n        <div class=\"form-group\">\n          <label for=\"maxWidth\">Max Width</label>\n          <input\n            id=\"maxWidth\"\n            type=\"number\"\n            formControlName=\"maxWidth\"\n            class=\"form-control\"\n            placeholder=\"500\">\n        </div>\n      </div>\n\n      <div class=\"form-row\">\n        <div class=\"form-group\">\n          <label for=\"sticky\">Sticky</label>\n          <select id=\"sticky\" formControlName=\"sticky\" class=\"form-control\">\n            @for (option of stickyOptions; track option.value) {\n              <option [value]=\"option.value\">\n                {{ option.label }}\n              </option>\n            }\n          </select>\n        </div>\n        <div class=\"form-group\">\n          <label for=\"alignment\">Alignment</label>\n          <select id=\"alignment\" formControlName=\"alignment\" class=\"form-control\">\n            @for (align of alignments; track align.value) {\n              <option [value]=\"align.value\">\n                {{ align.label }}\n              </option>\n            }\n          </select>\n        </div>\n        <div class=\"form-group\">\n          <label for=\"verticalAlignment\">Vertical Alignment</label>\n          <select id=\"verticalAlignment\" formControlName=\"verticalAlignment\" class=\"form-control\">\n            @for (align of verticalAlignments; track align.value) {\n              <option [value]=\"align.value\">\n                {{ align.label }}\n              </option>\n            }\n          </select>\n        </div>\n      </div>\n    </div>\n\n    <!-- Edit Mode -->\n    <div class=\"form-section\">\n      <h4>Edit Mode</h4>\n      <div class=\"form-group\">\n        <label for=\"editMode\">Edit Trigger</label>\n        <select id=\"editMode\" formControlName=\"editMode\" class=\"form-control\">\n          @for (mode of editModes; track mode.value) {\n            <option [value]=\"mode.value\">\n              {{ mode.label }}\n            </option>\n          }\n        </select>\n      </div>\n    </div>\n\n    <!-- Display -->\n    <div class=\"form-section\">\n      <h4>Display</h4>\n      <div class=\"checkbox-group\">\n        <label class=\"checkbox-label\" [class.disabled]=\"!form.get('hideable')?.value\">\n          <input type=\"checkbox\" \n                 formControlName=\"visible\"\n                 [disabled]=\"!form.get('hideable')?.value\"\n                 [title]=\"!form.get('hideable')?.value ? 'Column visibility cannot be changed when hideable is disabled' : ''\">\n          <span>Visible</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"truncate\">\n          <span>Truncate Text</span>\n        </label>\n      </div>\n    </div>\n  </form>\n</div>\n", styles: [".column-editor{display:flex;flex-direction:column;height:100%}.editor-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;background-color:#f8f8f8}.editor-header h3{margin:0;font-size:1.125rem;font-weight:600;color:#333}.editor-actions{display:flex;gap:.5rem}.btn{padding:.5rem 1rem;border:1px solid #d0d0d0;border-radius:4px;cursor:pointer;font-size:.875rem;transition:all .2s}.btn.btn-primary{background-color:#2196f3;color:#fff;border-color:#2196f3}.btn.btn-primary:hover{background-color:#1976d2;border-color:#1976d2}.btn.btn-secondary{background-color:#fff;color:#333}.btn.btn-secondary:hover{background-color:#f5f5f5}.editor-form{flex:1;overflow-y:auto;padding:1rem}.form-section{margin-bottom:2rem}.form-section h4{margin:0 0 1rem;font-size:.875rem;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:.5px}.form-group{margin-bottom:1rem}.form-group label{display:block;margin-bottom:.5rem;font-size:.875rem;font-weight:500;color:#333}.form-control{width:100%;padding:.5rem;border:1px solid #d0d0d0;border-radius:4px;font-size:.875rem;transition:border-color .2s}.form-control:focus{outline:none;border-color:#2196f3}.form-control.error{border-color:#f44336}.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}.checkbox-group{display:flex;row-gap:1rem;flex-wrap:wrap;gap:.75rem}.checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.875rem;color:#333}.checkbox-label input[type=checkbox]{width:18px;height:18px;cursor:pointer}.checkbox-label input[type=checkbox]:disabled{cursor:not-allowed;opacity:.5}.checkbox-label.disabled{opacity:.6;cursor:not-allowed}.checkbox-label.disabled span{color:#999}.error-message{display:block;margin-top:.25rem;font-size:.75rem;color:#f44336}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", 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.9", type: ColumnEditorComponent, isStandalone: true, selector: "st-column-editor", inputs: { column: "column", columnIndex: "columnIndex" }, outputs: { columnUpdated: "columnUpdated", cancel: "cancel" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"column-editor\">\n  <div class=\"editor-header\">\n    <h3>Column Editor</h3>\n    <div class=\"editor-actions\">\n      <button class=\"btn btn-secondary\" (click)=\"onCancel()\">Cancel</button>\n      <button class=\"btn btn-primary\" (click)=\"onSave()\">Save</button>\n    </div>\n  </div>\n\n  <form [formGroup]=\"form\" class=\"editor-form\">\n    <!-- Basic Properties -->\n    <div class=\"form-section\">\n      <h4>Basic Properties</h4>\n      <div class=\"form-group\">\n        <label for=\"key\">Key *</label>\n        <input\n          id=\"key\"\n          type=\"text\"\n          formControlName=\"key\"\n          class=\"form-control\"\n          [class.error]=\"hasError('key')\"\n          placeholder=\"columnKey\">\n        @if (hasError('key')) {\n          <span class=\"error-message\">\n            {{ getErrorMessage('key') }}\n          </span>\n        }\n      </div>\n\n      <div class=\"form-group\">\n        <label for=\"header\">Header</label>\n        <input\n          id=\"header\"\n          type=\"text\"\n          formControlName=\"header\"\n          class=\"form-control\"\n          placeholder=\"Column Header\">\n      </div>\n\n      <div class=\"form-group\">\n        <label for=\"dataType\">Data Type</label>\n        <select id=\"dataType\" formControlName=\"dataType\" class=\"form-control\">\n          @for (type of dataTypes; track type.value) {\n            <option [value]=\"type.value\">\n              {{ type.label }}\n            </option>\n          }\n        </select>\n      </div>\n    </div>\n\n    <!-- Features -->\n    <div class=\"form-section\">\n      <h4>Features</h4>\n      <div class=\"checkbox-group\">\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"editable\">\n          <span>Editable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"sortable\">\n          <span>Sortable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"filterable\">\n          <span>Filterable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"resizable\">\n          <span>Resizable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"hideable\">\n          <span>Hideable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"movable\">\n          <span>Movable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"pinnable\">\n          <span>Pinnable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"enableMenu\">\n          <span>Enable Menu</span>\n        </label>\n      </div>\n    </div>\n\n    <!-- Layout -->\n    <div class=\"form-section\">\n      <h4>Layout</h4>\n      <div class=\"form-row\">\n        <div class=\"form-group\">\n          <label for=\"width\">Width</label>\n          <input\n            id=\"width\"\n            type=\"text\"\n            formControlName=\"width\"\n            class=\"form-control\"\n            placeholder=\"150 or 'auto'\">\n        </div>\n        <div class=\"form-group\">\n          <label for=\"minWidth\">Min Width</label>\n          <input\n            id=\"minWidth\"\n            type=\"number\"\n            formControlName=\"minWidth\"\n            class=\"form-control\"\n            placeholder=\"50\">\n        </div>\n        <div class=\"form-group\">\n          <label for=\"maxWidth\">Max Width</label>\n          <input\n            id=\"maxWidth\"\n            type=\"number\"\n            formControlName=\"maxWidth\"\n            class=\"form-control\"\n            placeholder=\"500\">\n        </div>\n      </div>\n\n      <div class=\"form-row\">\n        <div class=\"form-group\">\n          <label for=\"sticky\">Sticky</label>\n          <select id=\"sticky\" formControlName=\"sticky\" class=\"form-control\">\n            @for (option of stickyOptions; track option.value) {\n              <option [value]=\"option.value\">\n                {{ option.label }}\n              </option>\n            }\n          </select>\n        </div>\n        <div class=\"form-group\">\n          <label for=\"alignment\">Alignment</label>\n          <select id=\"alignment\" formControlName=\"alignment\" class=\"form-control\">\n            @for (align of alignments; track align.value) {\n              <option [value]=\"align.value\">\n                {{ align.label }}\n              </option>\n            }\n          </select>\n        </div>\n        <div class=\"form-group\">\n          <label for=\"verticalAlignment\">Vertical Alignment</label>\n          <select id=\"verticalAlignment\" formControlName=\"verticalAlignment\" class=\"form-control\">\n            @for (align of verticalAlignments; track align.value) {\n              <option [value]=\"align.value\">\n                {{ align.label }}\n              </option>\n            }\n          </select>\n        </div>\n      </div>\n    </div>\n\n    <!-- Edit Mode -->\n    <div class=\"form-section\">\n      <h4>Edit Mode</h4>\n      <div class=\"form-group\">\n        <label for=\"editMode\">Edit Trigger</label>\n        <select id=\"editMode\" formControlName=\"editMode\" class=\"form-control\">\n          @for (mode of editModes; track mode.value) {\n            <option [value]=\"mode.value\">\n              {{ mode.label }}\n            </option>\n          }\n        </select>\n      </div>\n    </div>\n\n    <!-- Display -->\n    <div class=\"form-section\">\n      <h4>Display</h4>\n      <div class=\"checkbox-group\">\n        <label class=\"checkbox-label\" [class.disabled]=\"!form.get('hideable')?.value\">\n          <input type=\"checkbox\" \n                 formControlName=\"visible\"\n                 [disabled]=\"!form.get('hideable')?.value\"\n                 [title]=\"!form.get('hideable')?.value ? 'Column visibility cannot be changed when hideable is disabled' : ''\">\n          <span>Visible</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"truncate\">\n          <span>Truncate Text</span>\n        </label>\n      </div>\n    </div>\n  </form>\n</div>\n", styles: [".column-editor{display:flex;flex-direction:column;height:100%}.editor-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;background-color:#f8f8f8}.editor-header h3{margin:0;font-size:1.125rem;font-weight:600;color:#333}.editor-actions{display:flex;gap:.5rem}.btn{padding:.5rem 1rem;border:1px solid #d0d0d0;border-radius:4px;cursor:pointer;font-size:.875rem;transition:all .2s}.btn.btn-primary{background-color:#2196f3;color:#fff;border-color:#2196f3}.btn.btn-primary:hover{background-color:#1976d2;border-color:#1976d2}.btn.btn-secondary{background-color:#fff;color:#333}.btn.btn-secondary:hover{background-color:#f5f5f5}.editor-form{flex:1;overflow-y:auto;padding:1rem}.form-section{margin-bottom:2rem}.form-section h4{margin:0 0 1rem;font-size:.875rem;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:.5px}.form-group{margin-bottom:1rem}.form-group label{display:block;margin-bottom:.5rem;font-size:.875rem;font-weight:500;color:#333}.form-control{width:100%;padding:.5rem;border:1px solid #d0d0d0;border-radius:4px;font-size:.875rem;transition:border-color .2s}.form-control:focus{outline:none;border-color:#2196f3}.form-control.error{border-color:#f44336}.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}.checkbox-group{display:flex;row-gap:1rem;flex-wrap:wrap;gap:.75rem}.checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.875rem;color:#333}.checkbox-label input[type=checkbox]{width:18px;height:18px;cursor:pointer}.checkbox-label input[type=checkbox]:disabled{cursor:not-allowed;opacity:.5}.checkbox-label.disabled{opacity:.6;cursor:not-allowed}.checkbox-label.disabled span{color:#999}.error-message{display:block;margin-top:.25rem;font-size:.75rem;color:#f44336}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ColumnEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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: [{
@@ -10529,10 +11330,10 @@ class StColumnEditorModalComponent {
     onModalContentClick(event) {
         event.stopPropagation();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StColumnEditorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: StColumnEditorModalComponent, isStandalone: true, selector: "st-column-editor-modal", outputs: { columnCreated: "columnCreated", cancelled: "cancelled" }, viewQueries: [{ propertyName: "columnEditor", first: true, predicate: ColumnEditorComponent, descendants: true }], ngImport: i0, template: "<div class=\"modal-backdrop\" (click)=\"onBackdropClick($event)\">\n  <div class=\"modal-content\" (click)=\"onModalContentClick($event)\">\n    <div class=\"modal-header\">\n      <h2>Add New Column</h2>\n      <button class=\"close-button\" (click)=\"onCancel()\" type=\"button\" aria-label=\"Close\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M18 6L6 18M6 6L18 18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </button>\n    </div>\n    <div class=\"modal-body\">\n      <!-- Now using the shared st-column-editor component from SharedTableComponentsModule -->\n      <st-column-editor\n        [column]=\"newColumn\"\n        [columnIndex]=\"columnIndex\"\n        (columnUpdated)=\"onColumnUpdated($event)\"\n        (cancel)=\"onCancel()\">\n      </st-column-editor>\n    </div>\n    <div class=\"modal-footer\">\n      <button type=\"button\" class=\"btn btn-secondary\" (click)=\"onCancel()\">Cancel</button>\n      <button type=\"button\" class=\"btn btn-primary\" (click)=\"onSave()\">Add Column</button>\n    </div>\n  </div>\n</div>\n", styles: [".modal-backdrop{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .2s ease-in-out}.modal-content{background:#fff;border-radius:8px;box-shadow:0 11px 15px -7px #0003,0 24px 38px 3px #00000024,0 9px 46px 8px #0000001f;max-width:600px;max-height:90vh;width:90%;display:flex;flex-direction:column;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #e0e0e0;flex-shrink:0}.modal-header h2{margin:0;font-size:20px;font-weight:500;color:#212121}.close-button{background:none;border:none;cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:#757575;transition:all .2s ease}.close-button:hover{background-color:#0000000a;color:#212121}.close-button:active{background-color:#00000014}.close-button:focus{outline:none;box-shadow:0 0 0 2px #1976d24d}.close-button svg{width:24px;height:24px}.modal-body{padding:0;overflow-y:auto;flex:1;min-height:0}.modal-body ::ng-deep st-column-editor{display:block}.modal-body ::ng-deep st-column-editor .column-editor{padding:0;border:none;box-shadow:none}.modal-body ::ng-deep st-column-editor .column-editor .editor-header{display:none}.modal-body ::ng-deep st-column-editor .column-editor .editor-actions{display:none}.modal-body ::ng-deep st-column-editor .column-editor .editor-form{padding:24px}.modal-footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid #e0e0e0;flex-shrink:0;background-color:#f5f5f5}.modal-footer .btn{padding:10px 20px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.modal-footer .btn:focus{outline:none;box-shadow:0 0 0 2px #0000001a}.modal-footer .btn.btn-secondary{background-color:#fff;color:#424242;border:1px solid #d0d0d0}.modal-footer .btn.btn-secondary:hover{background-color:#f5f5f5}.modal-footer .btn.btn-secondary:active{background-color:#eee}.modal-footer .btn.btn-primary{background-color:#1976d2;color:#fff}.modal-footer .btn.btn-primary:hover{background-color:#1565c0}.modal-footer .btn.btn-primary:active{background-color:#0d47a1}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ColumnEditorComponent, selector: "st-column-editor", inputs: ["column", "columnIndex"], outputs: ["columnUpdated", "cancel"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: StColumnEditorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: StColumnEditorModalComponent, isStandalone: true, selector: "st-column-editor-modal", outputs: { columnCreated: "columnCreated", cancelled: "cancelled" }, viewQueries: [{ propertyName: "columnEditor", first: true, predicate: ColumnEditorComponent, descendants: true }], ngImport: i0, template: "<div class=\"modal-backdrop\" (click)=\"onBackdropClick($event)\">\n  <div class=\"modal-content\" (click)=\"onModalContentClick($event)\">\n    <div class=\"modal-header\">\n      <h2>Add New Column</h2>\n      <button class=\"close-button\" (click)=\"onCancel()\" type=\"button\" aria-label=\"Close\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M18 6L6 18M6 6L18 18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </button>\n    </div>\n    <div class=\"modal-body\">\n      <!-- Now using the shared st-column-editor component from SharedTableComponentsModule -->\n      <st-column-editor\n        [column]=\"newColumn\"\n        [columnIndex]=\"columnIndex\"\n        (columnUpdated)=\"onColumnUpdated($event)\"\n        (cancel)=\"onCancel()\">\n      </st-column-editor>\n    </div>\n    <div class=\"modal-footer\">\n      <button type=\"button\" class=\"btn btn-secondary\" (click)=\"onCancel()\">Cancel</button>\n      <button type=\"button\" class=\"btn btn-primary\" (click)=\"onSave()\">Add Column</button>\n    </div>\n  </div>\n</div>\n", styles: [".modal-backdrop{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .2s ease-in-out}.modal-content{background:#fff;border-radius:8px;box-shadow:0 11px 15px -7px #0003,0 24px 38px 3px #00000024,0 9px 46px 8px #0000001f;max-width:600px;max-height:90vh;width:90%;display:flex;flex-direction:column;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #e0e0e0;flex-shrink:0}.modal-header h2{margin:0;font-size:20px;font-weight:500;color:#212121}.close-button{background:none;border:none;cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:#757575;transition:all .2s ease}.close-button:hover{background-color:#0000000a;color:#212121}.close-button:active{background-color:#00000014}.close-button:focus{outline:none;box-shadow:0 0 0 2px #1976d24d}.close-button svg{width:24px;height:24px}.modal-body{padding:0;overflow-y:auto;flex:1;min-height:0}.modal-body ::ng-deep st-column-editor{display:block}.modal-body ::ng-deep st-column-editor .column-editor{padding:0;border:none;box-shadow:none}.modal-body ::ng-deep st-column-editor .column-editor .editor-header{display:none}.modal-body ::ng-deep st-column-editor .column-editor .editor-actions{display:none}.modal-body ::ng-deep st-column-editor .column-editor .editor-form{padding:24px}.modal-footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid #e0e0e0;flex-shrink:0;background-color:#f5f5f5}.modal-footer .btn{padding:10px 20px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.modal-footer .btn:focus{outline:none;box-shadow:0 0 0 2px #0000001a}.modal-footer .btn.btn-secondary{background-color:#fff;color:#424242;border:1px solid #d0d0d0}.modal-footer .btn.btn-secondary:hover{background-color:#f5f5f5}.modal-footer .btn.btn-secondary:active{background-color:#eee}.modal-footer .btn.btn-primary{background-color:#1976d2;color:#fff}.modal-footer .btn.btn-primary:hover{background-color:#1565c0}.modal-footer .btn.btn-primary:active{background-color:#0d47a1}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ColumnEditorComponent, selector: "st-column-editor", inputs: ["column", "columnIndex"], outputs: ["columnUpdated", "cancel"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StColumnEditorModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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: [{
@@ -10639,10 +11440,10 @@ class StSheetActionsComponent {
             right: `${window.innerWidth - rect.right}px`
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StSheetActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: StSheetActionsComponent, isStandalone: true, selector: "st-sheet-actions", inputs: { actions: "actions", sheetId: "sheetId" }, outputs: { actionClicked: "actionClicked" }, usesOnChanges: true, ngImport: i0, template: "@if (visibleActions.length > 0) {\n  <button \n    class=\"sheet-actions-button\"\n    (click)=\"toggleMenu($event)\"\n    type=\"button\"\n    title=\"Sheet Actions\"\n    aria-label=\"Sheet actions menu\"\n    [class.active]=\"isOpen\">\n    <nile-icon name=\"arrowdown\" size=\"14\"></nile-icon>\n  </button>\n}\n\n<!-- Dropdown container -->\n@if (isOpen) {\n  <div class=\"dropdown-container\">\n    <!-- Backdrop -->\n    <div class=\"dropdown-backdrop\" (click)=\"closeMenu()\"></div>\n    \n    <!-- Dropdown menu -->\n    <div class=\"dropdown-menu\" [ngStyle]=\"dropdownStyle\">\n      <nile-menu>\n        @for (action of visibleActions; track action.id) {\n          <nile-menu-item \n            [class.disabled]=\"isActionDisabled(action)\"\n            (click)=\"onActionClick(action, $event)\">\n            @if (action.icon) {\n              <nile-icon size=\"14\" slot=\"prefix\" [name]=\"action.icon\"></nile-icon>\n            }\n            {{ action.label }}\n          </nile-menu-item>\n        }\n        \n        @if (visibleActions.length === 0) {\n          <nile-menu-item>\n            No actions available\n          </nile-menu-item>\n        }\n      </nile-menu>\n    </div>\n  </div>\n}\n", styles: [":host{display:inline-block}.sheet-actions-button{display:flex;align-items:center;justify-content:center;width:2rem;padding:0;background:transparent;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s ease;color:var(--nile-color-neutral-600)}.sheet-actions-button nile-icon{font-size:16px}.dropdown-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;pointer-events:none}.dropdown-container>*{pointer-events:auto}.dropdown-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:transparent;z-index:1000}.dropdown-menu{position:absolute;min-width:200px;background:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;z-index:1001;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: StSheetActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: StSheetActionsComponent, isStandalone: true, selector: "st-sheet-actions", inputs: { actions: "actions", sheetId: "sheetId" }, outputs: { actionClicked: "actionClicked" }, usesOnChanges: true, ngImport: i0, template: "@if (visibleActions.length > 0) {\n  <button \n    class=\"sheet-actions-button\"\n    (click)=\"toggleMenu($event)\"\n    type=\"button\"\n    title=\"Sheet Actions\"\n    aria-label=\"Sheet actions menu\"\n    [class.active]=\"isOpen\">\n    <nile-icon name=\"arrowdown\" size=\"14\"></nile-icon>\n  </button>\n}\n\n<!-- Dropdown container -->\n@if (isOpen) {\n  <div class=\"dropdown-container\">\n    <!-- Backdrop -->\n    <div class=\"dropdown-backdrop\" (click)=\"closeMenu()\"></div>\n    \n    <!-- Dropdown menu -->\n    <div class=\"dropdown-menu\" [ngStyle]=\"dropdownStyle\">\n      <nile-menu>\n        @for (action of visibleActions; track action.id) {\n          <nile-menu-item \n            [class.disabled]=\"isActionDisabled(action)\"\n            (click)=\"onActionClick(action, $event)\">\n            @if (action.icon) {\n              <nile-icon size=\"14\" slot=\"prefix\" [name]=\"action.icon\"></nile-icon>\n            }\n            {{ action.label }}\n          </nile-menu-item>\n        }\n        \n        @if (visibleActions.length === 0) {\n          <nile-menu-item>\n            No actions available\n          </nile-menu-item>\n        }\n      </nile-menu>\n    </div>\n  </div>\n}\n", styles: [":host{display:inline-block}.sheet-actions-button{display:flex;align-items:center;justify-content:center;width:2rem;padding:0;background:transparent;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s ease;color:var(--nile-color-neutral-600)}.sheet-actions-button nile-icon{font-size:16px}.dropdown-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;pointer-events:none}.dropdown-container>*{pointer-events:auto}.dropdown-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:transparent;z-index:1000}.dropdown-menu{position:absolute;min-width:200px;background:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;z-index:1001;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StSheetActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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: [{
@@ -10786,12 +11587,12 @@ class StSheetComponent {
     get headerVariant() {
         return this.config?.display?.headerVariant || 'default';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: StSheetComponent, isStandalone: true, selector: "st-sheet", inputs: { config: "config", data: "data", data$: "data$", state: "state" }, outputs: { sheetActionClicked: "sheetActionClicked", stateChange: "stateChange", cellChange: "cellChange", tableStateChange: "tableStateChange", dataChange: "dataChange" }, usesOnChanges: true, ngImport: i0, template: "<nile-tab-group>\n  <nile-tab slot=\"nav\" panel=\"general\" [class.active]=\"activeTab === '1'\" (click)=\"activeTab = '1'\">\n    <div class=\"sheet-header\">\n      {{activeState?.name$ | async | titlecase}}\n      @if (visibleActions.length > 0) {\n        <st-sheet-actions \n          [actions]=\"visibleActions\" \n          [sheetId]=\"config.id\"\n          (actionClicked)=\"onActionClick($event)\">\n        </st-sheet-actions>\n      }\n    </div>\n  </nile-tab>\n  <nile-tab-panel name=\"general\">\n    @if (config && activeState) {\n      <st-table \n        [tableConfig]=\"config.tableConfig\"\n        [data]=\"data\"\n        [data$]=\"data$\"\n        [tableState]=\"activeState.tableState\"\n        (cellChange)=\"onCellChange($event)\"\n        (stateChange)=\"onTableStateChange($event)\"\n        (dataChange)=\"onDataChange($event)\">\n      </st-table>\n    }\n  </nile-tab-panel>\n</nile-tab-group>\n", styles: [":host{display:block;width:100%;height:100%}.sheet-container{display:flex;flex-direction:column;width:100%;height:100%}.sheet-header{display:flex;align-items:center;font-family:Colfax;color:#000}.sheet-table-wrapper{flex:1;overflow:auto;position:relative}nile-tab-group::part(nav){background-color:#fafafa}nile-tab-group::part(active-tab-indicator-path){background:none}nile-tab-group::part(active-tab-indicator){border-bottom:none}nile-tab-group::part(tabs){gap:0}nile-tab-group nile-tab{border:1px solid #e0e0e0;border-top-left-radius:6px;border-top-right-radius:6px}nile-tab-group nile-tab::part(base){padding-left:.5rem;padding-top:.5rem;padding-bottom:.5rem;border-bottom-left-radius:0;border-bottom-right-radius:0}nile-tab-group nile-tab.active{background-color:#fff}nile-tab-group nile-tab-panel::part(base){padding:0;max-height:30rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: StTableComponent, selector: "st-table", inputs: ["tableConfig", "data", "data$", "tableState", "enableSorting", "enableFiltering", "validateConfig"], outputs: ["stateChange", "dataChange", "cellEdit", "cellSave", "cellCancel", "cellChange", "columnResized", "columnMoved", "configValidationErrors", "columnAdded", "rowAction", "validationStateChange", "requestAddRow"] }, { kind: "component", type: StSheetActionsComponent, selector: "st-sheet-actions", inputs: ["actions", "sheetId"], outputs: ["actionClicked"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: StSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: StTableComponent, selector: "st-table", inputs: ["tableConfig", "data", "data$", "tableState", "enableSorting", "enableFiltering", "validateConfig"], outputs: ["stateChange", "dataChange", "cellEdit", "cellSave", "cellCancel", "cellChange", "columnResized", "columnMoved", "configValidationErrors", "columnAdded", "rowAction", "validationStateChange", "requestAddRow"] }, { kind: "component", type: StSheetActionsComponent, selector: "st-sheet-actions", inputs: ["actions", "sheetId"], outputs: ["actionClicked"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StSheetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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"] }]
+            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;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input
             }], data: [{
@@ -10900,10 +11701,10 @@ class AutosaveService {
         this.dirtyState.clear();
         this.lastSaveTime.clear();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AutosaveService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AutosaveService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AutosaveService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AutosaveService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AutosaveService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AutosaveService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -10915,6 +11716,7 @@ class StWorkbookComponent {
         this.destroyRef = inject(DestroyRef);
         this.autosaveService = inject(AutosaveService);
         this.cdr = inject(ChangeDetectorRef);
+        this.injector = inject(Injector);
         // Signal-based inputs
         this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
         this.sheetsData = input(new BehaviorSubject(new Map()), ...(ngDevMode ? [{ debugName: "sheetsData" }] : /* istanbul ignore next */ []));
@@ -10996,12 +11798,14 @@ class StWorkbookComponent {
         const previousSheetCount = this.sheets().length;
         this.sheets.set([...configValue.sheets]);
         const newSheetCount = this.sheets().length;
+        let addedSheet = false;
         if (isFirstInit) {
             this.activeSheetIndex.set(configValue.initialActiveSheetIndex || 0);
         }
         else {
             if (newSheetCount > previousSheetCount) {
                 this.activeSheetIndex.set(newSheetCount - 1);
+                addedSheet = true;
             }
             else if (this.activeSheetIndex() >= this.sheets().length) {
                 this.activeSheetIndex.set(Math.max(0, this.sheets().length - 1));
@@ -11017,6 +11821,9 @@ class StWorkbookComponent {
         }
         this.updateVisibleWorkbookActions();
         this.updateActiveSheet();
+        if (addedSheet) {
+            this.scheduleScrollAndFocusNewSheetTab();
+        }
     }
     get activeState() {
         return this.state() || this.internalState;
@@ -11030,6 +11837,9 @@ class StWorkbookComponent {
         this.activeState.setActiveSheetIndex(newIndex);
         this.updateActiveSheet();
         this.sheetChanged.emit(this.activeSheetIndex());
+        if (newIndex === this.sheets().length - 1) {
+            this.queueScrollActiveSheetTabClearOfToolbar(false);
+        }
     }
     updateActiveSheet() {
         const sheetsValue = this.sheets();
@@ -11050,6 +11860,60 @@ class StWorkbookComponent {
         this.tableComponentKey.set(`${sheet.id}-${Date.now()}`);
         this.activeState.setSheetTableState(sheet.id, tableState);
     }
+    /**
+     * After a new sheet is appended, scroll the tab strip so the new tab clears the sticky toolbar overlay
+     * and move keyboard focus to that tab.
+     */
+    scheduleScrollAndFocusNewSheetTab() {
+        afterNextRender(() => {
+            this.queueScrollActiveSheetTabClearOfToolbar(true);
+        }, { injector: this.injector });
+    }
+    /**
+     * Scroll the active sheet tab into the visible part of the nav (left of the sticky toolbar).
+     * No extra flex margin — avoids a permanent gap between the last sheet tab and the toolbar.
+     */
+    queueScrollActiveSheetTabClearOfToolbar(focusTab) {
+        requestAnimationFrame(() => {
+            const host = this.workbookTabGroup?.nativeElement;
+            if (!host?.shadowRoot) {
+                return;
+            }
+            const nav = host.shadowRoot.querySelector('.tab-group__nav');
+            if (!nav) {
+                return;
+            }
+            const sheetTabs = host.querySelectorAll('nile-tab.workbook-sheet-tab');
+            const index = this.activeSheetIndex();
+            const tab = sheetTabs[index];
+            if (!tab) {
+                return;
+            }
+            const toolbar = host.querySelector('nile-tab.workbook-toolbar-tab');
+            const toolbarW = toolbar?.getBoundingClientRect().width ?? 0;
+            const reserveRight = Math.max(toolbarW + 6, 48);
+            this.scrollSheetTabIntoNav(tab, nav, reserveRight, 'auto');
+            if (focusTab) {
+                const tabEl = tab;
+                tabEl.focus({ preventScroll: true });
+            }
+        });
+    }
+    scrollSheetTabIntoNav(tab, nav, reserveRight, behavior) {
+        const tabRect = tab.getBoundingClientRect();
+        const navRect = nav.getBoundingClientRect();
+        const tabLeft = tabRect.left - navRect.left + nav.scrollLeft;
+        const tabRight = tabLeft + tabRect.width;
+        const viewLeft = nav.scrollLeft;
+        const visibleWidth = Math.max(0, nav.clientWidth - reserveRight);
+        const viewRight = viewLeft + visibleWidth;
+        if (tabLeft < viewLeft) {
+            nav.scrollTo({ left: tabLeft, behavior });
+        }
+        else if (tabRight > viewRight) {
+            nav.scrollTo({ left: tabRight - visibleWidth, behavior });
+        }
+    }
     onAddSheet() {
         this.addSheet.emit();
     }
@@ -11157,6 +12021,10 @@ class StWorkbookComponent {
         this.isFullscreen.set(newValue);
         this.fullscreenToggle.emit(newValue);
     }
+    /**
+     * Keeps `sheetsData` in sync with the grid: patches `row[columnKey]` from the cell event then `next()`s the map.
+     * Initial rows still come from the host (e.g. demo `loadSheetsData`); edits persist here in memory.
+     */
     onCellChange(event) {
         const selected = this.selectedSheet();
         const sheetsValue = this.sheets();
@@ -11180,6 +12048,7 @@ class StWorkbookComponent {
         }
         this.cellChange.emit(event);
     }
+    /** Same row patch as {@link onCellChange}; host apps receive this output after data is updated. */
     onCellSave(event) {
         const selected = this.selectedSheet();
         const sheetsDataValue = this.sheetsData();
@@ -11277,15 +12146,18 @@ class StWorkbookComponent {
             this.tableComponent.scrollToLastRow(focusFirstCell);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StWorkbookComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: StWorkbookComponent, isStandalone: true, selector: "st-workbook", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, sheetsData: { classPropertyName: "sheetsData", publicName: "sheetsData", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sheetChanged: "sheetChanged", addSheet: "addSheet", sheetTabAction: "sheetTabAction", workbookAction: "workbookAction", cellChange: "cellChange", cellSave: "cellSave", tableStateChange: "tableStateChange", fullscreenToggle: "fullscreenToggle", requestAddRow: "requestAddRow" }, viewQueries: [{ propertyName: "tableComponent", first: true, predicate: StTableComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"workbook-container\" [class.fullscreen]=\"isFullscreen()\">\n  <nile-tab-group [activeIndex]=\"activeSheetIndex()\">\n    \n    <!-- Sheet Tabs (one per sheet) -->\n    @for (sheet of sheets(); track sheet.id; let i = $index) {\n      <nile-tab slot=\"nav\" \n                panel=\"shared-panel\"\n                [class.active]=\"i === activeSheetIndex()\"\n                (click)=\"onTabChange(i)\">\n        <div class=\"sheet-tab-content\">\n          <span class=\"sheet-name\">{{ sheet.name }}</span>\n          \n          <!-- Tab actions dropdown button -->\n          @if (hasTabActions(sheet)) {\n            <button class=\"tab-actions-button\"\n                    (click)=\"openTabActions($event, sheet, i)\">\n              <nile-icon name=\"arrowdown\" size=\"14\"></nile-icon>\n            </button>\n          }\n        </div>\n      </nile-tab>\n    }\n    \n    <!-- Toolbar Tab (for workbook controls) -->\n    <nile-tab slot=\"nav\" \n              panel=\"shared-panel\"\n              class=\"workbook-toolbar-tab\"\n              [disabled]=\"true\">\n      <div class=\"workbook-toolbar-content\">\n        <!-- Autosave Indicator -->\n        @if (autosaveEnabled()) {\n          <div class=\"autosave-indicator\">\n            @if (!isSaving() && lastSaveTime()) {\n              <nile-icon \n                name=\"save\" \n                size=\"14\"\n                [title]=\"'Saved at ' + (lastSaveTime() | date:'HH:mm:ss')\">\n              </nile-icon>\n            }\n            @if (isSaving()) {\n              <nile-icon \n                name=\"loader\" \n                size=\"14\"\n                title=\"Saving...\">\n              </nile-icon>\n            }\n          </div>\n        }\n\n        <!-- Toolbar Workbook Actions (shown as individual buttons) -->\n        @for (action of toolbarWorkbookActions(); track action.id) {\n          <button class=\"toolbar-action-button\"\n                  [class.disabled]=\"isActionDisabled(action)\"\n                  [title]=\"action.label\"\n                  (click)=\"onWorkbookActionClick(action, $event)\">\n            @if (action.icon) {\n              <nile-icon [name]=\"action.icon\"></nile-icon>\n            }\n            @if (!action.icon) {\n              <span>{{ action.label }}</span>\n            }\n          </button>\n        }\n\n        <!-- Workbook Actions Dropdown -->\n        @if (visibleWorkbookActions().length > 0) {\n          <button class=\"workbook-actions-button\"\n                  (click)=\"toggleWorkbookActions($event)\"\n                  title=\"Workbook Actions\">\n            <nile-icon name=\"settings\"></nile-icon>\n          </button>\n        }\n        \n        <!-- Add Sheet Button -->\n        @if (canAddSheet) {\n          <button class=\"add-sheet-button\"\n                  (click)=\"onAddSheet()\"\n                  title=\"Add Sheet\">\n            <nile-icon name=\"plus\"></nile-icon>\n          </button>\n        }\n        \n        <!-- Fullscreen Button -->\n        @if (config().display?.allowFullscreen !== false) {\n          <button class=\"fullscreen-button\"\n                  (click)=\"toggleFullscreen()\"\n                  [title]=\"isFullscreen() ? 'Exit Fullscreen' : 'Fullscreen'\">\n            <nile-icon [name]=\"isFullscreen() ? 'collapse' : 'expand-06'\"></nile-icon>\n          </button>\n        }\n      </div>\n    </nile-tab>\n    \n    <!-- Single Shared Tab Panel -->\n    <nile-tab-panel name=\"shared-panel\">\n      <!-- Lazy loading strategy: table is destroyed and recreated with new config/state when sheet changes -->\n      <!-- Using @for with track to force complete reinitialization when tableComponentKey changes -->\n      @for (key of [tableComponentKey()]; track key) {\n        @if (currentTableConfig() && currentTableState()) {\n          <st-table \n            [attr.data-sheet-key]=\"key\"\n            [tableConfig]=\"currentTableConfig()!\"\n            [data$]=\"currentTableData$\"\n            [tableState]=\"currentTableState()!\"\n            (cellChange)=\"onCellChange($event)\"\n            (cellSave)=\"onCellSave($event)\"\n            (stateChange)=\"onTableStateChange($event)\"\n            (requestAddRow)=\"onRequestAddRow($event)\">\n          </st-table>\n        }\n      }\n    </nile-tab-panel>\n    \n  </nile-tab-group>\n</div>\n\n<!-- Tab Actions Dropdown -->\n@if (tabActionsOpen()) {\n  <div class=\"tab-actions-dropdown\" [ngStyle]=\"tabActionsPosition()\">\n    <div class=\"dropdown-backdrop\" (click)=\"closeTabActions()\"></div>\n    <div class=\"dropdown-menu\">\n      <nile-menu>\n        @for (action of selectedSheet()?.tabActions; track action.id) {\n          <nile-menu-item (click)=\"onTabActionClick(action, $event)\">\n            @if (action.icon) {\n              <nile-icon slot=\"prefix\" size=\"14\" [name]=\"action.icon\"></nile-icon>\n            }\n            {{ action.label }}\n          </nile-menu-item>\n        }\n      </nile-menu>\n    </div>\n  </div>\n}\n\n<!-- Workbook Actions Dropdown -->\n@if (workbookActionsOpen()) {\n  <div class=\"workbook-actions-dropdown\" [ngStyle]=\"workbookActionsPosition()\">\n    <div class=\"dropdown-backdrop\" (click)=\"closeWorkbookActions()\"></div>\n    <div class=\"dropdown-menu\">\n      <nile-menu>\n        @for (action of visibleWorkbookActions(); track action.id) {\n          <nile-menu-item [class.disabled]=\"isActionDisabled(action)\"\n                          (click)=\"onWorkbookActionClick(action, $event)\">\n            @if (action.icon) {\n              <nile-icon slot=\"prefix\" size=\"14\" [name]=\"action.icon\"></nile-icon>\n            }\n            {{ action.label }}\n          </nile-menu-item>\n        }\n      </nile-menu>\n    </div>\n  </div>\n}\n\n<!-- Fullscreen Backdrop -->\n@if (isFullscreen()) {\n  <div class=\"fullscreen-backdrop\" (click)=\"toggleFullscreen()\">\n  </div>\n}\n", styles: [":host{display:block;width:100%;height:100%}.workbook-container{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--nile-color-neutral-200);border-radius:4px;overflow:hidden}.workbook-container.fullscreen{position:fixed;inset:0;z-index:2000;border:none;border-radius:0}.workbook-container nile-tab-group{height:100%;display:flex;flex-direction:column}.sheet-tab-content{display:flex;align-items:center;gap:8px;padding:0 4px}.sheet-tab-content .sheet-name{font-size:12px;font-weight:500;font-family:var(--nile-font-family-sans-serif);color:#000}.sheet-tab-content .tab-actions-button{width:20px;height:20px;padding:0;background:transparent;border:none;cursor:pointer}.workbook-toolbar-tab{margin-left:auto!important;pointer-events:auto!important;border-left:1px solid var(--nile-color-neutral-200)}.workbook-toolbar-tab .workbook-toolbar-content{display:flex;gap:4px;align-items:center;padding:0 8px}.workbook-toolbar-tab .workbook-toolbar-content .autosave-indicator{display:flex;align-items:center;margin-right:8px;color:var(--nile-color-success-500)}.workbook-toolbar-tab button{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;background:transparent;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s;color:var(--nile-color-neutral-600)}.workbook-toolbar-tab button:hover{background-color:var(--nile-color-neutral-100);color:var(--nile-color-neutral-900)}.workbook-toolbar-tab button:active{background-color:var(--nile-color-neutral-200)}.workbook-toolbar-tab button nile-icon{font-size:16px}.workbook-toolbar-tab button.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.tab-actions-dropdown{position:fixed;z-index:1001}.tab-actions-dropdown .dropdown-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:transparent;z-index:1000}.tab-actions-dropdown .dropdown-menu{position:relative;min-width:180px;background:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;z-index:1001;overflow:hidden}.tab-actions-dropdown .dropdown-menu nile-menu{display:block}.workbook-actions-dropdown{position:fixed;z-index:1001}.workbook-actions-dropdown .dropdown-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:transparent;z-index:1000}.workbook-actions-dropdown .dropdown-menu{position:relative;min-width:200px;background:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;z-index:1001;overflow:hidden}.workbook-actions-dropdown .dropdown-menu nile-menu{display:block}.fullscreen-backdrop{position:fixed;inset:0;background:#00000080;z-index:1999;cursor:pointer}nile-tab-group::part(nav){background-color:#fafafa}nile-tab-group::part(active-tab-indicator-path){background:none}nile-tab-group::part(active-tab-indicator){border-bottom:none}nile-tab-group::part(tabs){gap:0}nile-tab-group nile-tab{border:1px solid #e0e0e0;border-top-left-radius:6px;border-top-right-radius:6px}nile-tab-group nile-tab::part(base){padding-left:.5rem;padding-top:.5rem;padding-bottom:.5rem;border-bottom-left-radius:0;border-bottom-right-radius:0}nile-tab-group nile-tab.active{background-color:#fff;color:#000}nile-tab-group nile-tab.active .sheet-name{font-weight:600}nile-tab-group nile-tab-panel::part(base){padding:0;max-height:30rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: StTableComponent, selector: "st-table", inputs: ["tableConfig", "data", "data$", "tableState", "enableSorting", "enableFiltering", "validateConfig"], outputs: ["stateChange", "dataChange", "cellEdit", "cellSave", "cellCancel", "cellChange", "columnResized", "columnMoved", "configValidationErrors", "columnAdded", "rowAction", "validationStateChange", "requestAddRow"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: StWorkbookComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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 }, { propertyName: "workbookTabGroup", first: true, predicate: ["workbookTabGroup"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"workbook-container\" [class.fullscreen]=\"isFullscreen()\">\n  <nile-tab-group #workbookTabGroup [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=\"workbook-sheet-tab\"\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);flex-shrink:0;position:sticky;right:0;z-index:3;align-self:stretch;background-color:#fafafa;box-shadow:-8px 0 12px -8px #0000001f}.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;flex-wrap:nowrap;width:max-content;min-width:100%;box-sizing:border-box}nile-tab-group nile-tab.workbook-sheet-tab{flex-shrink: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;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: StTableComponent, selector: "st-table", inputs: ["tableConfig", "data", "data$", "tableState", "enableSorting", "enableFiltering", "validateConfig"], outputs: ["stateChange", "dataChange", "cellEdit", "cellSave", "cellCancel", "cellChange", "columnResized", "columnMoved", "configValidationErrors", "columnAdded", "rowAction", "validationStateChange", "requestAddRow"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StWorkbookComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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"] }]
+            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 #workbookTabGroup [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=\"workbook-sheet-tab\"\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);flex-shrink:0;position:sticky;right:0;z-index:3;align-self:stretch;background-color:#fafafa;box-shadow:-8px 0 12px -8px #0000001f}.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;flex-wrap:nowrap;width:max-content;min-width:100%;box-sizing:border-box}nile-tab-group nile-tab.workbook-sheet-tab{flex-shrink: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;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}\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: [{
                 type: ViewChild,
                 args: [StTableComponent]
+            }], workbookTabGroup: [{
+                type: ViewChild,
+                args: ['workbookTabGroup', { read: ElementRef }]
             }] } });
 
 class ClickOutsideDirective {
@@ -11301,10 +12173,10 @@ class ClickOutsideDirective {
             this.clickOutside.emit();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: ClickOutsideDirective, isStandalone: true, selector: "[clickOutside]", outputs: { clickOutside: "clickOutside" }, host: { listeners: { "document:click": "onClick($event.target)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: ClickOutsideDirective, isStandalone: true, selector: "[clickOutside]", outputs: { clickOutside: "clickOutside" }, host: { listeners: { "document:click": "onClick($event.target)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ClickOutsideDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ClickOutsideDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clickOutside]',
@@ -11323,11 +12195,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * This module breaks the circular dependency between the two modules
  */
 class SharedTableComponentsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SharedTableComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: SharedTableComponentsModule, imports: [ColumnEditorComponent], exports: [ColumnEditorComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SharedTableComponentsModule, imports: [ColumnEditorComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SharedTableComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: SharedTableComponentsModule, imports: [ColumnEditorComponent], exports: [ColumnEditorComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SharedTableComponentsModule, imports: [ColumnEditorComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SharedTableComponentsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SharedTableComponentsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -11340,8 +12212,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
         }] });
 
 class SmartTableModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SmartTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: SmartTableModule, imports: [SharedTableComponentsModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SmartTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: SmartTableModule, imports: [SharedTableComponentsModule,
             StCellComponent,
             StTableComponent,
             StHeaderComponent,
@@ -11375,7 +12247,7 @@ class SmartTableModule {
             ClickOutsideDirective,
             StColumnResizeDirective,
             StKeyboardNavigationDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SmartTableModule, providers: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SmartTableModule, providers: [
             VirtualScrollService
         ], imports: [SharedTableComponentsModule,
             StCellComponent,
@@ -11393,7 +12265,7 @@ class SmartTableModule {
             StSheetActionsComponent,
             StWorkbookComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SmartTableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SmartTableModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -11677,10 +12549,10 @@ class DefinitionBuilderService {
         // Simple comparison - in production, use a deep equality library
         return JSON.stringify(config1) === JSON.stringify(config2);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DefinitionBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DefinitionBuilderService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DefinitionBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DefinitionBuilderService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DefinitionBuilderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DefinitionBuilderService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -12046,10 +12918,10 @@ class DefinitionExportService {
         document.body.removeChild(link);
         URL.revokeObjectURL(url);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DefinitionExportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DefinitionExportService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DefinitionExportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DefinitionExportService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DefinitionExportService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DefinitionExportService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -12398,10 +13270,10 @@ class DefinitionImportService {
             return errorResult;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DefinitionImportService, deps: [{ token: JsonSchemaValidatorService }, { token: ValidationLoggerService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DefinitionImportService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", 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.9", ngImport: i0, type: DefinitionImportService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DefinitionImportService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DefinitionImportService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -12501,10 +13373,10 @@ class BuilderToolbarComponent {
     onTogglePreview() {
         this.previewToggled.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BuilderToolbarComponent, deps: [{ token: DefinitionBuilderService }, { token: DefinitionExportService }, { token: DefinitionImportService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: BuilderToolbarComponent, isStandalone: true, selector: "st-builder-toolbar", inputs: { hasUnsavedChanges: "hasUnsavedChanges" }, outputs: { newDefinition: "newDefinition", saved: "saved", previewToggled: "previewToggled" }, ngImport: i0, template: "<div class=\"builder-toolbar\">\n  <div class=\"toolbar-section\">\n    <button class=\"toolbar-btn\" (click)=\"onNewDefinition()\" title=\"New Definition\">\n      <span>New</span>\n    </button>\n    <button class=\"toolbar-btn\" (click)=\"onOpenFile()\" title=\"Open File\">\n      <span>Open</span>\n    </button>\n    <button class=\"toolbar-btn\" (click)=\"onSave()\" title=\"Save to LocalStorage\" [class.has-changes]=\"hasUnsavedChanges\">\n      <span>Save</span>\n      @if (hasUnsavedChanges) {\n        <span class=\"unsaved-indicator\">\u25CF</span>\n      }\n    </button>\n    <button class=\"toolbar-btn\" (click)=\"onLoad()\" title=\"Load from LocalStorage\">\n      <span>Load</span>\n    </button>\n  </div>\n\n  <div class=\"toolbar-section\">\n    <button class=\"toolbar-btn\" (click)=\"onImportJSON()\" title=\"Import JSON\">\n      <span>Import JSON</span>\n    </button>\n    <button class=\"toolbar-btn\" (click)=\"onExportJSON()\" title=\"Export JSON\">\n      <span>Export JSON</span>\n    </button>\n    <button class=\"toolbar-btn\" (click)=\"onExportTypeScript()\" title=\"Export TypeScript\">\n      <span>Export TS</span>\n    </button>\n  </div>\n\n  <div class=\"toolbar-section\">\n    <button class=\"toolbar-btn\" (click)=\"onTogglePreview()\" title=\"Toggle Preview\">\n      <span>Preview</span>\n    </button>\n  </div>\n</div>\n", styles: [".builder-toolbar{display:flex;align-items:center;gap:1rem;padding:.75rem 1rem;background-color:#fff;border-bottom:1px solid #e0e0e0;box-shadow:0 2px 4px #0000000d}.toolbar-section{display:flex;align-items:center;gap:.5rem}.toolbar-section:not(:last-child):after{content:\"\";width:1px;height:24px;background-color:#e0e0e0;margin-left:.5rem}.toolbar-btn{display:flex;align-items:center;gap:.25rem;padding:.5rem 1rem;border:1px solid #d0d0d0;border-radius:4px;background-color:#fff;color:#333;cursor:pointer;font-size:.875rem;transition:all .2s}.toolbar-btn:hover{background-color:#f5f5f5;border-color:#b0b0b0}.toolbar-btn:active{background-color:#e8e8e8}.toolbar-btn.has-changes{border-color:#ff9800;background-color:#fff3e0}.toolbar-btn .unsaved-indicator{color:#ff9800;font-size:.75rem;margin-left:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", 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.9", type: BuilderToolbarComponent, isStandalone: true, selector: "st-builder-toolbar", inputs: { hasUnsavedChanges: "hasUnsavedChanges" }, outputs: { newDefinition: "newDefinition", saved: "saved", previewToggled: "previewToggled" }, ngImport: i0, template: "<div class=\"builder-toolbar\">\n  <div class=\"toolbar-section\">\n    <button class=\"toolbar-btn\" (click)=\"onNewDefinition()\" title=\"New Definition\">\n      <span>New</span>\n    </button>\n    <button class=\"toolbar-btn\" (click)=\"onOpenFile()\" title=\"Open File\">\n      <span>Open</span>\n    </button>\n    <button class=\"toolbar-btn\" (click)=\"onSave()\" title=\"Save to LocalStorage\" [class.has-changes]=\"hasUnsavedChanges\">\n      <span>Save</span>\n      @if (hasUnsavedChanges) {\n        <span class=\"unsaved-indicator\">\u25CF</span>\n      }\n    </button>\n    <button class=\"toolbar-btn\" (click)=\"onLoad()\" title=\"Load from LocalStorage\">\n      <span>Load</span>\n    </button>\n  </div>\n\n  <div class=\"toolbar-section\">\n    <button class=\"toolbar-btn\" (click)=\"onImportJSON()\" title=\"Import JSON\">\n      <span>Import JSON</span>\n    </button>\n    <button class=\"toolbar-btn\" (click)=\"onExportJSON()\" title=\"Export JSON\">\n      <span>Export JSON</span>\n    </button>\n    <button class=\"toolbar-btn\" (click)=\"onExportTypeScript()\" title=\"Export TypeScript\">\n      <span>Export TS</span>\n    </button>\n  </div>\n\n  <div class=\"toolbar-section\">\n    <button class=\"toolbar-btn\" (click)=\"onTogglePreview()\" title=\"Toggle Preview\">\n      <span>Preview</span>\n    </button>\n  </div>\n</div>\n", styles: [".builder-toolbar{display:flex;align-items:center;gap:1rem;padding:.75rem 1rem;background-color:#fff;border-bottom:1px solid #e0e0e0;box-shadow:0 2px 4px #0000000d}.toolbar-section{display:flex;align-items:center;gap:.5rem}.toolbar-section:not(:last-child):after{content:\"\";width:1px;height:24px;background-color:#e0e0e0;margin-left:.5rem}.toolbar-btn{display:flex;align-items:center;gap:.25rem;padding:.5rem 1rem;border:1px solid #d0d0d0;border-radius:4px;background-color:#fff;color:#333;cursor:pointer;font-size:.875rem;transition:all .2s}.toolbar-btn:hover{background-color:#f5f5f5;border-color:#b0b0b0}.toolbar-btn:active{background-color:#e8e8e8}.toolbar-btn.has-changes{border-color:#ff9800;background-color:#fff3e0}.toolbar-btn .unsaved-indicator{color:#ff9800;font-size:.75rem;margin-left:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BuilderToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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: [{
@@ -12617,10 +13489,10 @@ class ColumnListComponent {
         const type = this.dataTypes.find(dt => dt.value === column.dataType);
         return type?.label || 'Text';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ColumnListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ColumnListComponent, isStandalone: true, selector: "st-column-list", inputs: { columns: "columns", selectedIndex: "selectedIndex" }, outputs: { columnSelected: "columnSelected", columnAdded: "columnAdded", columnDeleted: "columnDeleted", columnReordered: "columnReordered" }, ngImport: i0, template: "<div class=\"column-list\" (clickOutside)=\"closeMenu()\">\n  <div class=\"column-list-header\">\n    <h3>Columns</h3>\n    <div class=\"add-column-menu\" [class.open]=\"showAddMenu\">\n      <button class=\"add-btn\" (click)=\"showAddMenu = !showAddMenu\" title=\"Add Column\">\n        <span>+ Add Column</span>\n      </button>\n      @if (showAddMenu) {\n        <div class=\"add-menu\">\n          @for (type of dataTypes; track type.value) {\n            <button\n              class=\"menu-item\"\n              (click)=\"onAddColumn(type.value)\">\n              {{ type.label }}\n            </button>\n          }\n        </div>\n      }\n    </div>\n  </div>\n\n  <div class=\"column-items\">\n    @for (column of columns; track column.key; let i = $index) {\n      <div\n        class=\"column-item\"\n        [class.selected]=\"selectedIndex === i\"\n        [class.dragging]=\"draggedIndex === i\"\n        [class.drag-over]=\"dragOverIndex === i\"\n        (click)=\"onColumnClick(i)\"\n        draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\"\n        (drop)=\"onDrop($event, i)\"\n        (dragend)=\"onDragEnd($event)\"\n        (dragleave)=\"dragOverIndex = null\">\n        <div class=\"drag-handle\">\n          <span>\u2630</span>\n        </div>\n        <div class=\"column-info\">\n          <div class=\"column-name\">{{ getColumnDisplayName(column) }}</div>\n          <div class=\"column-meta\">\n            <span class=\"column-type\">{{ getDataTypeLabel(column) }}</span>\n            <span class=\"column-key\">{{ column.key }}</span>\n          </div>\n        </div>\n        <button\n          class=\"delete-btn\"\n          (click)=\"onDelete(i, $event)\"\n          title=\"Delete Column\">\n          \u00D7\n        </button>\n      </div>\n    }\n\n    @if (columns.length === 0) {\n      <div class=\"empty-state\">\n        <p>No columns yet. Click \"Add Column\" to get started.</p>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".column-list{display:flex;flex-direction:column;background-color:#fff;border-radius:4px;box-shadow:0 2px 4px #0000001a;overflow:hidden}.column-list-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;background-color:#f8f8f8}.column-list-header h3{margin:0;font-size:1rem;font-weight:600;color:#333}.add-column-menu{position:relative}.add-column-menu.open .add-btn{background-color:#e3f2fd;border-color:#2196f3}.add-btn{padding:.5rem 1rem;border:1px solid #d0d0d0;border-radius:4px;background-color:#fff;color:#333;cursor:pointer;font-size:.875rem;transition:all .2s}.add-btn:hover{background-color:#f5f5f5}.add-menu{position:absolute;top:100%;right:0;margin-top:.25rem;background-color:#fff;border:1px solid #d0d0d0;border-radius:4px;box-shadow:0 4px 8px #0000001a;z-index:100;min-width:150px}.menu-item{display:block;width:100%;padding:.75rem 1rem;border:none;background:none;text-align:left;cursor:pointer;font-size:.875rem;color:#333;transition:background-color .2s}.menu-item:hover{background-color:#f5f5f5}.menu-item:first-child{border-top-left-radius:4px;border-top-right-radius:4px}.menu-item:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px}.column-items{max-height:400px;overflow-y:auto;padding:.5rem}.column-item{display:flex;align-items:center;gap:.5rem;padding:.75rem;margin-bottom:.5rem;border:1px solid #e0e0e0;border-radius:4px;background-color:#fff;cursor:pointer;transition:all .2s}.column-item:hover{border-color:#b0b0b0;background-color:#f8f8f8}.column-item.selected{border-color:#2196f3;background-color:#e3f2fd}.column-item.cdk-drag-preview{box-shadow:0 8px 16px #0003;opacity:.9}.column-item.cdk-drag-placeholder{opacity:.3}.drag-handle{cursor:move;color:#999;font-size:1.25rem;padding:.25rem;display:flex;align-items:center}.drag-handle:hover{color:#666}.column-info{flex:1;min-width:0}.column-name{font-weight:500;color:#333;margin-bottom:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.column-meta{display:flex;gap:.5rem;font-size:.75rem;color:#666}.column-type{padding:.125rem .5rem;background-color:#e8e8e8;border-radius:3px}.column-key{font-family:monospace;color:#999}.delete-btn{padding:.25rem .5rem;border:none;background:none;color:#999;cursor:pointer;font-size:1.5rem;line-height:1;transition:color .2s}.delete-btn:hover{color:#f44336}.empty-state{padding:2rem;text-align:center;color:#999;font-size:.875rem}.column-item.dragging{opacity:.5}.column-item.drag-over{border-color:#2196f3}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ColumnListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ColumnListComponent, isStandalone: true, selector: "st-column-list", inputs: { columns: "columns", selectedIndex: "selectedIndex" }, outputs: { columnSelected: "columnSelected", columnAdded: "columnAdded", columnDeleted: "columnDeleted", columnReordered: "columnReordered" }, ngImport: i0, template: "<div class=\"column-list\" (clickOutside)=\"closeMenu()\">\n  <div class=\"column-list-header\">\n    <h3>Columns</h3>\n    <div class=\"add-column-menu\" [class.open]=\"showAddMenu\">\n      <button class=\"add-btn\" (click)=\"showAddMenu = !showAddMenu\" title=\"Add Column\">\n        <span>+ Add Column</span>\n      </button>\n      @if (showAddMenu) {\n        <div class=\"add-menu\">\n          @for (type of dataTypes; track type.value) {\n            <button\n              class=\"menu-item\"\n              (click)=\"onAddColumn(type.value)\">\n              {{ type.label }}\n            </button>\n          }\n        </div>\n      }\n    </div>\n  </div>\n\n  <div class=\"column-items\">\n    @for (column of columns; track column.key; let i = $index) {\n      <div\n        class=\"column-item\"\n        [class.selected]=\"selectedIndex === i\"\n        [class.dragging]=\"draggedIndex === i\"\n        [class.drag-over]=\"dragOverIndex === i\"\n        (click)=\"onColumnClick(i)\"\n        draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\"\n        (drop)=\"onDrop($event, i)\"\n        (dragend)=\"onDragEnd($event)\"\n        (dragleave)=\"dragOverIndex = null\">\n        <div class=\"drag-handle\">\n          <span>\u2630</span>\n        </div>\n        <div class=\"column-info\">\n          <div class=\"column-name\">{{ getColumnDisplayName(column) }}</div>\n          <div class=\"column-meta\">\n            <span class=\"column-type\">{{ getDataTypeLabel(column) }}</span>\n            <span class=\"column-key\">{{ column.key }}</span>\n          </div>\n        </div>\n        <button\n          class=\"delete-btn\"\n          (click)=\"onDelete(i, $event)\"\n          title=\"Delete Column\">\n          \u00D7\n        </button>\n      </div>\n    }\n\n    @if (columns.length === 0) {\n      <div class=\"empty-state\">\n        <p>No columns yet. Click \"Add Column\" to get started.</p>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".column-list{display:flex;flex-direction:column;background-color:#fff;border-radius:4px;box-shadow:0 2px 4px #0000001a;overflow:hidden}.column-list-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;background-color:#f8f8f8}.column-list-header h3{margin:0;font-size:1rem;font-weight:600;color:#333}.add-column-menu{position:relative}.add-column-menu.open .add-btn{background-color:#e3f2fd;border-color:#2196f3}.add-btn{padding:.5rem 1rem;border:1px solid #d0d0d0;border-radius:4px;background-color:#fff;color:#333;cursor:pointer;font-size:.875rem;transition:all .2s}.add-btn:hover{background-color:#f5f5f5}.add-menu{position:absolute;top:100%;right:0;margin-top:.25rem;background-color:#fff;border:1px solid #d0d0d0;border-radius:4px;box-shadow:0 4px 8px #0000001a;z-index:100;min-width:150px}.menu-item{display:block;width:100%;padding:.75rem 1rem;border:none;background:none;text-align:left;cursor:pointer;font-size:.875rem;color:#333;transition:background-color .2s}.menu-item:hover{background-color:#f5f5f5}.menu-item:first-child{border-top-left-radius:4px;border-top-right-radius:4px}.menu-item:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px}.column-items{max-height:400px;overflow-y:auto;padding:.5rem}.column-item{display:flex;align-items:center;gap:.5rem;padding:.75rem;margin-bottom:.5rem;border:1px solid #e0e0e0;border-radius:4px;background-color:#fff;cursor:pointer;transition:all .2s}.column-item:hover{border-color:#b0b0b0;background-color:#f8f8f8}.column-item.selected{border-color:#2196f3;background-color:#e3f2fd}.column-item.cdk-drag-preview{box-shadow:0 8px 16px #0003;opacity:.9}.column-item.cdk-drag-placeholder{opacity:.3}.drag-handle{cursor:move;color:#999;font-size:1.25rem;padding:.25rem;display:flex;align-items:center}.drag-handle:hover{color:#666}.column-info{flex:1;min-width:0}.column-name{font-weight:500;color:#333;margin-bottom:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.column-meta{display:flex;gap:.5rem;font-size:.75rem;color:#666}.column-type{padding:.125rem .5rem;background-color:#e8e8e8;border-radius:3px}.column-key{font-family:monospace;color:#999}.delete-btn{padding:.25rem .5rem;border:none;background:none;color:#999;cursor:pointer;font-size:1.5rem;line-height:1;transition:color .2s}.delete-btn:hover{color:#f44336}.empty-state{padding:2rem;text-align:center;color:#999;font-size:.875rem}.column-item.dragging{opacity:.5}.column-item.drag-over{border-color:#2196f3}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ColumnListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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: [{
@@ -12753,10 +13625,10 @@ class TableConfigEditorComponent {
             this.configUpdated.emit(updates);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TableConfigEditorComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: TableConfigEditorComponent, isStandalone: true, selector: "st-table-config-editor", inputs: { config: "config" }, outputs: { configUpdated: "configUpdated" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"table-config-editor\">\n  <h3>Table Configuration</h3>\n\n  <form [formGroup]=\"form\" class=\"config-form\">\n    <!-- Pagination -->\n    <div class=\"config-section\">\n      <h4>Pagination</h4>\n      <div formGroupName=\"pagination\">\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"enabled\">\n          <span>Enabled</span>\n        </label>\n        @if (form.get('pagination.enabled')?.value) {\n          <div class=\"form-group\">\n            <label>Page Size</label>\n            <select formControlName=\"pageSize\" class=\"form-control\">\n              @for (size of pageSizeOptions; track size) {\n                <option [value]=\"size\">\n                  {{ size }}\n                </option>\n              }\n            </select>\n          </div>\n        }\n        @if (form.get('pagination.enabled')?.value) {\n          <label class=\"checkbox-label\">\n            <input type=\"checkbox\" formControlName=\"showTopControls\">\n            <span>Show Top Controls</span>\n          </label>\n        }\n        @if (form.get('pagination.enabled')?.value) {\n          <label class=\"checkbox-label\">\n            <input type=\"checkbox\" formControlName=\"showBottomControls\">\n            <span>Show Bottom Controls</span>\n          </label>\n        }\n        @if (form.get('pagination.enabled')?.value) {\n          <div class=\"form-group\">\n            <label>Variant</label>\n            <select formControlName=\"variant\" class=\"form-control\">\n              <option value=\"fluid\">Fluid</option>\n              <option value=\"compact\">Compact</option>\n            </select>\n          </div>\n        }\n      </div>\n    </div>\n\n    <!-- Sorting -->\n    <div class=\"config-section\">\n      <h4>Sorting</h4>\n      <div formGroupName=\"sorting\">\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"enabled\">\n          <span>Enabled</span>\n        </label>\n        @if (form.get('sorting.enabled')?.value) {\n          <label class=\"checkbox-label\">\n            <input type=\"checkbox\" formControlName=\"multiColumn\">\n            <span>Multi-column</span>\n          </label>\n        }\n        @if (form.get('sorting.enabled')?.value) {\n          <div class=\"form-group\">\n            <label>Mode</label>\n            <select formControlName=\"mode\" class=\"form-control\">\n              <option value=\"local\">Local</option>\n              <option value=\"server\">Server</option>\n            </select>\n          </div>\n        }\n      </div>\n    </div>\n\n    <!-- Filtering -->\n    <div class=\"config-section\">\n      <h4>Filtering</h4>\n      <div formGroupName=\"filtering\">\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"enabled\">\n          <span>Enabled</span>\n        </label>\n        @if (form.get('filtering.enabled')?.value) {\n          <div class=\"form-group\">\n            <label>Mode</label>\n            <select formControlName=\"mode\" class=\"form-control\">\n              <option value=\"local\">Local</option>\n              <option value=\"server\">Server</option>\n            </select>\n          </div>\n        }\n      </div>\n    </div>\n\n    <!-- Display -->\n    <div class=\"config-section\">\n      <h4>Display</h4>\n      <div formGroupName=\"display\">\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"stickyHeader\">\n          <span>Sticky Header</span>\n        </label>\n        \n        <!-- Virtual Scroll Configuration -->\n        <div class=\"subsection\" formGroupName=\"virtualScroll\">\n          <h5>Virtual Scroll</h5>\n          <label class=\"checkbox-label\">\n            <input type=\"checkbox\" formControlName=\"enabled\">\n            <span>Enable Virtual Scrolling (for large datasets)</span>\n          </label>\n          \n          @if (form.get('display.virtualScroll.enabled')?.value) {\n            <div class=\"virtual-scroll-options\">\n              <div class=\"form-group\">\n                <label>Row Height (px)</label>\n                <input type=\"number\" formControlName=\"itemSize\" class=\"form-control\" min=\"20\" max=\"200\">\n                <small class=\"help-text\">Must be consistent for all rows</small>\n              </div>\n              \n              <div class=\"form-group\">\n                <label>Buffer Size (rows)</label>\n                <input type=\"number\" formControlName=\"bufferSize\" class=\"form-control\" min=\"0\" max=\"20\">\n                <small class=\"help-text\">Rows rendered above/below viewport</small>\n              </div>\n              \n              <div class=\"form-group\">\n                <label>Viewport Height (px)</label>\n                <input type=\"number\" formControlName=\"viewportHeight\" class=\"form-control\" min=\"200\" max=\"2000\">\n                <small class=\"help-text\">Height of scrollable container</small>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n\n    <!-- Keyboard Navigation -->\n    <div class=\"config-section\">\n      <h4>Keyboard Navigation</h4>\n      <div formGroupName=\"keyboardNavigation\">\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"enabled\">\n          <span>Enable Excel-like Navigation</span>\n        </label>\n      </div>\n    </div>\n  </form>\n</div>\n", styles: [".table-config-editor{background-color:#fff;border-radius:4px;box-shadow:0 2px 4px #0000001a;padding:1rem;overflow-y:auto;max-height:500px}.table-config-editor h3{margin:0 0 1rem;font-size:1rem;font-weight:600;color:#333}.config-form{display:flex;flex-direction:column;gap:1.5rem}.config-section h4{margin:0 0 .75rem;font-size:.875rem;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:.5px}.checkbox-label{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;cursor:pointer;font-size:.875rem;color:#333}.checkbox-label input[type=checkbox]{width:18px;height:18px;cursor:pointer}.form-group{margin-top:.75rem}.form-group label{display:block;margin-bottom:.5rem;font-size:.875rem;font-weight:500;color:#333}.form-control{width:100%;padding:.5rem;border:1px solid #d0d0d0;border-radius:4px;font-size:.875rem}.form-control:focus{outline:none;border-color:#2196f3}.subsection{margin-top:1rem;padding:.75rem;background-color:#f9f9f9;border-radius:4px;border-left:3px solid #2196f3}.subsection h5{margin:0 0 .75rem;font-size:.8rem;font-weight:600;color:#555;text-transform:uppercase;letter-spacing:.5px}.virtual-scroll-options{margin-top:.75rem;padding-left:.5rem}.help-text{display:block;margin-top:.25rem;font-size:.75rem;color:#666;font-style:italic}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", 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.9", type: TableConfigEditorComponent, isStandalone: true, selector: "st-table-config-editor", inputs: { config: "config" }, outputs: { configUpdated: "configUpdated" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"table-config-editor\">\n  <h3>Table Configuration</h3>\n\n  <form [formGroup]=\"form\" class=\"config-form\">\n    <!-- Pagination -->\n    <div class=\"config-section\">\n      <h4>Pagination</h4>\n      <div formGroupName=\"pagination\">\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"enabled\">\n          <span>Enabled</span>\n        </label>\n        @if (form.get('pagination.enabled')?.value) {\n          <div class=\"form-group\">\n            <label>Page Size</label>\n            <select formControlName=\"pageSize\" class=\"form-control\">\n              @for (size of pageSizeOptions; track size) {\n                <option [value]=\"size\">\n                  {{ size }}\n                </option>\n              }\n            </select>\n          </div>\n        }\n        @if (form.get('pagination.enabled')?.value) {\n          <label class=\"checkbox-label\">\n            <input type=\"checkbox\" formControlName=\"showTopControls\">\n            <span>Show Top Controls</span>\n          </label>\n        }\n        @if (form.get('pagination.enabled')?.value) {\n          <label class=\"checkbox-label\">\n            <input type=\"checkbox\" formControlName=\"showBottomControls\">\n            <span>Show Bottom Controls</span>\n          </label>\n        }\n        @if (form.get('pagination.enabled')?.value) {\n          <div class=\"form-group\">\n            <label>Variant</label>\n            <select formControlName=\"variant\" class=\"form-control\">\n              <option value=\"fluid\">Fluid</option>\n              <option value=\"compact\">Compact</option>\n            </select>\n          </div>\n        }\n      </div>\n    </div>\n\n    <!-- Sorting -->\n    <div class=\"config-section\">\n      <h4>Sorting</h4>\n      <div formGroupName=\"sorting\">\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"enabled\">\n          <span>Enabled</span>\n        </label>\n        @if (form.get('sorting.enabled')?.value) {\n          <label class=\"checkbox-label\">\n            <input type=\"checkbox\" formControlName=\"multiColumn\">\n            <span>Multi-column</span>\n          </label>\n        }\n        @if (form.get('sorting.enabled')?.value) {\n          <div class=\"form-group\">\n            <label>Mode</label>\n            <select formControlName=\"mode\" class=\"form-control\">\n              <option value=\"local\">Local</option>\n              <option value=\"server\">Server</option>\n            </select>\n          </div>\n        }\n      </div>\n    </div>\n\n    <!-- Filtering -->\n    <div class=\"config-section\">\n      <h4>Filtering</h4>\n      <div formGroupName=\"filtering\">\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"enabled\">\n          <span>Enabled</span>\n        </label>\n        @if (form.get('filtering.enabled')?.value) {\n          <div class=\"form-group\">\n            <label>Mode</label>\n            <select formControlName=\"mode\" class=\"form-control\">\n              <option value=\"local\">Local</option>\n              <option value=\"server\">Server</option>\n            </select>\n          </div>\n        }\n      </div>\n    </div>\n\n    <!-- Display -->\n    <div class=\"config-section\">\n      <h4>Display</h4>\n      <div formGroupName=\"display\">\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"stickyHeader\">\n          <span>Sticky Header</span>\n        </label>\n        \n        <!-- Virtual Scroll Configuration -->\n        <div class=\"subsection\" formGroupName=\"virtualScroll\">\n          <h5>Virtual Scroll</h5>\n          <label class=\"checkbox-label\">\n            <input type=\"checkbox\" formControlName=\"enabled\">\n            <span>Enable Virtual Scrolling (for large datasets)</span>\n          </label>\n          \n          @if (form.get('display.virtualScroll.enabled')?.value) {\n            <div class=\"virtual-scroll-options\">\n              <div class=\"form-group\">\n                <label>Row Height (px)</label>\n                <input type=\"number\" formControlName=\"itemSize\" class=\"form-control\" min=\"20\" max=\"200\">\n                <small class=\"help-text\">Must be consistent for all rows</small>\n              </div>\n              \n              <div class=\"form-group\">\n                <label>Buffer Size (rows)</label>\n                <input type=\"number\" formControlName=\"bufferSize\" class=\"form-control\" min=\"0\" max=\"20\">\n                <small class=\"help-text\">Rows rendered above/below viewport</small>\n              </div>\n              \n              <div class=\"form-group\">\n                <label>Viewport Height (px)</label>\n                <input type=\"number\" formControlName=\"viewportHeight\" class=\"form-control\" min=\"200\" max=\"2000\">\n                <small class=\"help-text\">Height of scrollable container</small>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n\n    <!-- Keyboard Navigation -->\n    <div class=\"config-section\">\n      <h4>Keyboard Navigation</h4>\n      <div formGroupName=\"keyboardNavigation\">\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"enabled\">\n          <span>Enable Excel-like Navigation</span>\n        </label>\n      </div>\n    </div>\n  </form>\n</div>\n", styles: [".table-config-editor{background-color:#fff;border-radius:4px;box-shadow:0 2px 4px #0000001a;padding:1rem;overflow-y:auto;max-height:500px}.table-config-editor h3{margin:0 0 1rem;font-size:1rem;font-weight:600;color:#333}.config-form{display:flex;flex-direction:column;gap:1.5rem}.config-section h4{margin:0 0 .75rem;font-size:.875rem;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:.5px}.checkbox-label{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;cursor:pointer;font-size:.875rem;color:#333}.checkbox-label input[type=checkbox]{width:18px;height:18px;cursor:pointer}.form-group{margin-top:.75rem}.form-group label{display:block;margin-bottom:.5rem;font-size:.875rem;font-weight:500;color:#333}.form-control{width:100%;padding:.5rem;border:1px solid #d0d0d0;border-radius:4px;font-size:.875rem}.form-control:focus{outline:none;border-color:#2196f3}.subsection{margin-top:1rem;padding:.75rem;background-color:#f9f9f9;border-radius:4px;border-left:3px solid #2196f3}.subsection h5{margin:0 0 .75rem;font-size:.8rem;font-weight:600;color:#555;text-transform:uppercase;letter-spacing:.5px}.virtual-scroll-options{margin-top:.75rem;padding-left:.5rem}.help-text{display:block;margin-top:.25rem;font-size:.75rem;color:#666;font-style:italic}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TableConfigEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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: [{
@@ -12878,10 +13750,10 @@ class SampleDataGeneratorService {
     generateBooleanValue(rowIndex) {
         return rowIndex % 2 === 0;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SampleDataGeneratorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SampleDataGeneratorService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SampleDataGeneratorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SampleDataGeneratorService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SampleDataGeneratorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SampleDataGeneratorService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -12936,10 +13808,10 @@ class BuilderPreviewComponent {
         // But we can log them for debugging
         console.log('Preview state change:', event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BuilderPreviewComponent, deps: [{ token: SampleDataGeneratorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: BuilderPreviewComponent, isStandalone: true, selector: "st-builder-preview", inputs: { tableConfig: "tableConfig" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"builder-preview\">\n  <div class=\"preview-header\">\n    <h3>Live Preview</h3>\n    <button class=\"refresh-btn\" (click)=\"refreshPreview()\" title=\"Refresh Preview\">\n      \u21BB Refresh\n    </button>\n  </div>\n\n  <div class=\"preview-content\">\n    @if (isLoading) {\n      <div class=\"loading\">\n        <p>Generating preview...</p>\n      </div>\n    }\n\n    @if (!isLoading && tableConfig?.columns?.length === 0) {\n      <div class=\"empty-state\">\n        <p>Add columns to see preview</p>\n      </div>\n    }\n    @if (tableConfig) {\n      @if (!isLoading && tableConfig!.columns!.length > 0) {\n        <st-table\n          [tableConfig]=\"tableConfig\"\n          [data]=\"sampleData\"\n          (stateChange)=\"onStateChange($event)\">\n        </st-table>\n      }\n    }\n\n  </div>\n</div>\n", styles: [".builder-preview{height:100%}.preview-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;background-color:#f8f8f8}.preview-header h3{margin:0;font-size:1rem;font-weight:600;color:#333}.refresh-btn{padding:.5rem 1rem;border:1px solid #d0d0d0;border-radius:4px;background-color:#fff;color:#333;cursor:pointer;font-size:.875rem;transition:all .2s}.refresh-btn:hover{background-color:#f5f5f5}.preview-content{overflow:auto}.loading,.empty-state{display:flex;align-items:center;justify-content:center;height:200px;color:#999;font-size:.875rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: StTableComponent, selector: "st-table", inputs: ["tableConfig", "data", "data$", "tableState", "enableSorting", "enableFiltering", "validateConfig"], outputs: ["stateChange", "dataChange", "cellEdit", "cellSave", "cellCancel", "cellChange", "columnResized", "columnMoved", "configValidationErrors", "columnAdded", "rowAction", "validationStateChange", "requestAddRow"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BuilderPreviewComponent, deps: [{ token: SampleDataGeneratorService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: BuilderPreviewComponent, isStandalone: true, selector: "st-builder-preview", inputs: { tableConfig: "tableConfig" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"builder-preview\">\n  <div class=\"preview-header\">\n    <h3>Live Preview</h3>\n    <button class=\"refresh-btn\" (click)=\"refreshPreview()\" title=\"Refresh Preview\">\n      \u21BB Refresh\n    </button>\n  </div>\n\n  <div class=\"preview-content\">\n    @if (isLoading) {\n      <div class=\"loading\">\n        <p>Generating preview...</p>\n      </div>\n    }\n\n    @if (!isLoading && tableConfig?.columns?.length === 0) {\n      <div class=\"empty-state\">\n        <p>Add columns to see preview</p>\n      </div>\n    }\n    @if (tableConfig) {\n      @if (!isLoading && tableConfig!.columns!.length > 0) {\n        <st-table\n          [tableConfig]=\"tableConfig\"\n          [data]=\"sampleData\"\n          (stateChange)=\"onStateChange($event)\">\n        </st-table>\n      }\n    }\n\n  </div>\n</div>\n", styles: [".builder-preview{height:100%}.preview-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;background-color:#f8f8f8}.preview-header h3{margin:0;font-size:1rem;font-weight:600;color:#333}.refresh-btn{padding:.5rem 1rem;border:1px solid #d0d0d0;border-radius:4px;background-color:#fff;color:#333;cursor:pointer;font-size:.875rem;transition:all .2s}.refresh-btn:hover{background-color:#f5f5f5}.preview-content{overflow:auto}.loading,.empty-state{display:flex;align-items:center;justify-content:center;height:200px;color:#999;font-size:.875rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: StTableComponent, selector: "st-table", inputs: ["tableConfig", "data", "data$", "tableState", "enableSorting", "enableFiltering", "validateConfig"], outputs: ["stateChange", "dataChange", "cellEdit", "cellSave", "cellCancel", "cellChange", "columnResized", "columnMoved", "configValidationErrors", "columnAdded", "rowAction", "validationStateChange", "requestAddRow"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BuilderPreviewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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: [{
@@ -13034,10 +13906,10 @@ class DefinitionBuilderComponent {
     onColumnCancel() {
         this.builderService.clearSelection();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DefinitionBuilderComponent, deps: [{ token: DefinitionBuilderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DefinitionBuilderComponent, isStandalone: true, selector: "st-definition-builder", ngImport: i0, template: "<div class=\"definition-builder\">\n  <!-- Toolbar -->\n  <st-builder-toolbar\n    [hasUnsavedChanges]=\"state.hasUnsavedChanges\"\n    (newDefinition)=\"onNewDefinition()\"\n    (saved)=\"onSaved()\"\n    (previewToggled)=\"onPreviewToggled()\">\n  </st-builder-toolbar>\n\n  <div class=\"builder-content\">\n    <!-- Left Panel: Column List and Table Config -->\n    <div class=\"left-panel\">\n      <!-- Column List -->\n      <st-column-list\n        [columns]=\"state.tableConfig.columns\"\n        [selectedIndex]=\"state.selectedColumnIndex\"\n        (columnSelected)=\"onColumnSelected($event)\"\n        (columnAdded)=\"onColumnAdded($event)\"\n        (columnDeleted)=\"onColumnDeleted($event)\"\n        (columnReordered)=\"onColumnReordered($event.fromIndex, $event.toIndex)\">\n      </st-column-list>\n\n      <!-- Table Config Editor -->\n      <st-table-config-editor\n        [config]=\"state.tableConfig\"\n        (configUpdated)=\"onTableConfigUpdated($event)\">\n      </st-table-config-editor>\n    </div>\n\n    <!-- Middle Panel: Column Editor -->\n    @if (state.selectedColumn) {\n      <div class=\"middle-panel\">\n        <st-column-editor\n          [column]=\"state.selectedColumn\"\n          [columnIndex]=\"state.selectedColumnIndex!\"\n          (columnUpdated)=\"onColumnUpdated(state.selectedColumnIndex!, $event)\"\n          (cancel)=\"onColumnCancel()\">\n        </st-column-editor>\n      </div>\n    }\n\n    <!-- Right Panel: Preview -->\n    @if (state.previewVisible) {\n      <div class=\"right-panel\">\n        <st-builder-preview\n          [tableConfig]=\"state.tableConfig\">\n        </st-builder-preview>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".definition-builder{display:flex;flex-direction:column;height:100%;width:100%;background-color:#f5f5f5}.builder-content{display:flex;flex:1;overflow:hidden;gap:1rem;padding:1rem}.left-panel{display:flex;flex-direction:column;width:300px;min-width:250px;gap:1rem;overflow-y:auto}.middle-panel{flex:1;min-width:400px;overflow-y:auto;background-color:#fff;border-radius:4px;padding:1rem;box-shadow:0 2px 4px #0000001a}.right-panel{min-width:400px;overflow-y:auto;background-color:#fff;border-radius:4px;padding:1rem;box-shadow:0 2px 4px #0000001a}@media(max-width:1200px){.right-panel{display:none}}@media(max-width:800px){.builder-content{flex-direction:column}.left-panel,.middle-panel,.right-panel{width:100%;min-width:unset}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: BuilderToolbarComponent, selector: "st-builder-toolbar", inputs: ["hasUnsavedChanges"], outputs: ["newDefinition", "saved", "previewToggled"] }, { kind: "component", type: ColumnListComponent, selector: "st-column-list", inputs: ["columns", "selectedIndex"], outputs: ["columnSelected", "columnAdded", "columnDeleted", "columnReordered"] }, { kind: "component", type: TableConfigEditorComponent, selector: "st-table-config-editor", inputs: ["config"], outputs: ["configUpdated"] }, { kind: "component", type: ColumnEditorComponent, selector: "st-column-editor", inputs: ["column", "columnIndex"], outputs: ["columnUpdated", "cancel"] }, { kind: "component", type: BuilderPreviewComponent, selector: "st-builder-preview", inputs: ["tableConfig"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DefinitionBuilderComponent, deps: [{ token: DefinitionBuilderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DefinitionBuilderComponent, isStandalone: true, selector: "st-definition-builder", ngImport: i0, template: "<div class=\"definition-builder\">\n  <!-- Toolbar -->\n  <st-builder-toolbar\n    [hasUnsavedChanges]=\"state.hasUnsavedChanges\"\n    (newDefinition)=\"onNewDefinition()\"\n    (saved)=\"onSaved()\"\n    (previewToggled)=\"onPreviewToggled()\">\n  </st-builder-toolbar>\n\n  <div class=\"builder-content\">\n    <!-- Left Panel: Column List and Table Config -->\n    <div class=\"left-panel\">\n      <!-- Column List -->\n      <st-column-list\n        [columns]=\"state.tableConfig.columns\"\n        [selectedIndex]=\"state.selectedColumnIndex\"\n        (columnSelected)=\"onColumnSelected($event)\"\n        (columnAdded)=\"onColumnAdded($event)\"\n        (columnDeleted)=\"onColumnDeleted($event)\"\n        (columnReordered)=\"onColumnReordered($event.fromIndex, $event.toIndex)\">\n      </st-column-list>\n\n      <!-- Table Config Editor -->\n      <st-table-config-editor\n        [config]=\"state.tableConfig\"\n        (configUpdated)=\"onTableConfigUpdated($event)\">\n      </st-table-config-editor>\n    </div>\n\n    <!-- Middle Panel: Column Editor -->\n    @if (state.selectedColumn) {\n      <div class=\"middle-panel\">\n        <st-column-editor\n          [column]=\"state.selectedColumn\"\n          [columnIndex]=\"state.selectedColumnIndex!\"\n          (columnUpdated)=\"onColumnUpdated(state.selectedColumnIndex!, $event)\"\n          (cancel)=\"onColumnCancel()\">\n        </st-column-editor>\n      </div>\n    }\n\n    <!-- Right Panel: Preview -->\n    @if (state.previewVisible) {\n      <div class=\"right-panel\">\n        <st-builder-preview\n          [tableConfig]=\"state.tableConfig\">\n        </st-builder-preview>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".definition-builder{display:flex;flex-direction:column;height:100%;width:100%;background-color:#f5f5f5}.builder-content{display:flex;flex:1;overflow:hidden;gap:1rem;padding:1rem}.left-panel{display:flex;flex-direction:column;width:300px;min-width:250px;gap:1rem;overflow-y:auto}.middle-panel{flex:1;min-width:400px;overflow-y:auto;background-color:#fff;border-radius:4px;padding:1rem;box-shadow:0 2px 4px #0000001a}.right-panel{min-width:400px;overflow-y:auto;background-color:#fff;border-radius:4px;padding:1rem;box-shadow:0 2px 4px #0000001a}@media(max-width:1200px){.right-panel{display:none}}@media(max-width:800px){.builder-content{flex-direction:column}.left-panel,.middle-panel,.right-panel{width:100%;min-width:unset}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: BuilderToolbarComponent, selector: "st-builder-toolbar", inputs: ["hasUnsavedChanges"], outputs: ["newDefinition", "saved", "previewToggled"] }, { kind: "component", type: ColumnListComponent, selector: "st-column-list", inputs: ["columns", "selectedIndex"], outputs: ["columnSelected", "columnAdded", "columnDeleted", "columnReordered"] }, { kind: "component", type: TableConfigEditorComponent, selector: "st-table-config-editor", inputs: ["config"], outputs: ["configUpdated"] }, { kind: "component", type: ColumnEditorComponent, selector: "st-column-editor", inputs: ["column", "columnIndex"], outputs: ["columnUpdated", "cancel"] }, { kind: "component", type: BuilderPreviewComponent, selector: "st-builder-preview", inputs: ["tableConfig"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DefinitionBuilderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DefinitionBuilderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-definition-builder', standalone: true, imports: [
                         CommonModule,
@@ -13058,8 +13930,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * Module for the Visual UI Builder components
  */
 class DefinitionBuilderModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DefinitionBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: DefinitionBuilderModule, imports: [SmartTableModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DefinitionBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: DefinitionBuilderModule, imports: [SmartTableModule,
             SharedTableComponentsModule,
             DefinitionBuilderComponent,
             BuilderToolbarComponent,
@@ -13071,7 +13943,7 @@ class DefinitionBuilderModule {
             TableConfigEditorComponent,
             BuilderPreviewComponent,
             SharedTableComponentsModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DefinitionBuilderModule, imports: [SmartTableModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DefinitionBuilderModule, imports: [SmartTableModule,
             SharedTableComponentsModule,
             DefinitionBuilderComponent,
             BuilderToolbarComponent,
@@ -13079,7 +13951,7 @@ class DefinitionBuilderModule {
             TableConfigEditorComponent,
             BuilderPreviewComponent, SharedTableComponentsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DefinitionBuilderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DefinitionBuilderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -13132,10 +14004,10 @@ class RowValidationService {
             };
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: RowValidationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: RowValidationService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RowValidationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RowValidationService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: RowValidationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RowValidationService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -13154,5 +14026,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ArrayFormatter, AutosaveService, BaseColumnConfig, BooleanEditor, BooleanFormatter, BuilderPreviewComponent, BuilderToolbarComponent, Cell, CellAlignment, CellDataType, CellLifecycleState, CellVerticalAlignment, ChainValidator, ClickOutsideDirective, ColumnConfigFactory, ColumnEditorComponent, ColumnListComponent, Columns, CurrencyFormatter, DEFAULT_AUTOSAVE_CONFIG, DEFAULT_COLUMN_CONFIG, DEFAULT_TABLE_CONFIG, DateEditor, DateFormatter, DateRangeValidator, DefaultFormatter, DefinitionBuilderComponent, DefinitionBuilderModule, DefinitionBuilderService, DefinitionExportService, DefinitionImportService, EditMode, EmailValidator, FilterOperator, FunctionFormatter, FunctionValidator, JsonSchemaValidatorService, LengthValidator, NavigationDirection, NavigationKey, NileAutoCompleteEditor, NileCalendarEditor, NileChipEditor, NileCodeEditor, NileDatePickerEditor, NileInputEditor, NileSelectEditor, NumberEditor, NumberFormatter, OUFormatter, PatternValidators, PercentageFormatter, RangeValidator, RegexValidator, RequiredValidator, RowValidationService, SampleDataGeneratorService, SelectEditor, SharedTableComponentsModule, SheetState, SimpleColumnConfig, SmartTableModule, SortDirection, StAddColumnButtonComponent, StCellComponent, StColumnEditorModalComponent, StColumnFilterComponent, StColumnMenuDropdownComponent, StColumnResizeDirective, StColumnVisibilityComponent, StHeaderComponent, StKeyboardNavigationDirective, StPaginationComponent, StRowActionsDropdownComponent, StSheetActionsComponent, StSheetComponent, StTableActionsComponent, StTableComponent, StWorkbookComponent, StringFormatter, TableConfigEditorComponent, TableState, TableZIndex, TemplateFormatter, TextAreaEditor, TextEditor, UrlValidator, ValidationLoggerService, VirtualScrollService, WorkbookState, canEdit, createCellState, createMemento, dnToHumanReadable, isCellValid, isDisplayMode, isNullOrUndefined, isValidDate, isValidationSuccess, mergeTableConfig, registerFormatter, resolveFormatter, restoreFromMemento };
+export { ArrayFormatter, AutosaveService, BaseColumnConfig, BooleanEditor, BooleanFormatter, BuilderPreviewComponent, BuilderToolbarComponent, Cell, CellAlignment, CellDataType, CellLifecycleState, CellVerticalAlignment, ChainValidator, ClickOutsideDirective, ColumnConfigFactory, ColumnEditorComponent, ColumnListComponent, Columns, CurrencyFormatter, DEFAULT_AUTOSAVE_CONFIG, DEFAULT_COLUMN_CONFIG, DEFAULT_TABLE_CONFIG, DateEditor, DateFormatter, DateRangeValidator, DefaultFormatter, DefinitionBuilderComponent, DefinitionBuilderModule, DefinitionBuilderService, DefinitionExportService, DefinitionImportService, EditMode, EmailValidator, FilterOperator, FunctionFormatter, FunctionValidator, JsonSchemaValidatorService, LengthValidator, NavigationDirection, NavigationKey, NileAutoCompleteEditor, NileCalendarEditor, NileCheckboxEditor, NileChipEditor, NileCodeEditor, NileDatePickerEditor, NileInputEditor, NileSelectEditor, NumberEditor, NumberFormatter, OUFormatter, PatternValidators, PercentageFormatter, RangeValidator, RegexValidator, RequiredValidator, RowValidationService, SampleDataGeneratorService, SelectEditor, SharedTableComponentsModule, SheetState, SimpleColumnConfig, SmartTableModule, SortDirection, StAddColumnButtonComponent, StCellComponent, StColumnEditorModalComponent, StColumnFilterComponent, StColumnMenuDropdownComponent, StColumnResizeDirective, StColumnVisibilityComponent, StHeaderComponent, StKeyboardNavigationDirective, StPaginationComponent, StRowActionsDropdownComponent, StSheetActionsComponent, StSheetComponent, StTableActionsComponent, StTableComponent, StWorkbookComponent, StringFormatter, TableConfigEditorComponent, TableState, TableZIndex, TemplateFormatter, TextAreaEditor, TextEditor, UrlValidator, ValidationLoggerService, VirtualScrollService, WorkbookState, canEdit, createCellState, createMemento, dnToHumanReadable, isCellValid, isDisplayMode, isNullOrUndefined, isValidDate, isValidationSuccess, mergeTableConfig, registerFormatter, resolveFormatter, restoreFromMemento };
 //# sourceMappingURL=aquera-ngx-smart-table.mjs.map