@aquera/ngx-smart-table 0.0.17-patch-0.1 → 0.0.17-patch-0.2

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

@@ -2573,10 +2573,38 @@ class Cell {
         return this.rowIndex;
     }
     /**
-     * Set loading state
+     * Link this cell to its replacement so future state mutations forward.
+     */
+    setReplacement(replacement) {
+        this.replacementCell = replacement;
+    }
+    onStateChange(callback) {
+        this.stateChangeCallback = callback;
+    }
+    /**
+     * Set loading state. Forwards to replacement cell if this cell was replaced.
      */
     setLoading(isLoading) {
+        if (this.replacementCell) {
+            this.replacementCell.setLoading(isLoading);
+            return;
+        }
         this.state.isLoading = isLoading;
+        try {
+            this.stateChangeCallback?.();
+        }
+        catch {
+            this.stateChangeCallback = undefined;
+        }
+    }
+    /**
+     * Set cell value (public API, forwards to replacement if replaced).
+     */
+    setValueExternal(value) {
+        if (this.replacementCell) {
+            return this.replacementCell.setValueExternal(value);
+        }
+        return this.setValue(value, true);
     }
     /**
      * Set disabled state
@@ -3649,17 +3677,28 @@ function injectDropdownStyles() {
     }
     /* Combobox styling using ::part() selector */
     nile-select.st-cell-editor::part(combobox) {
-      background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary)) !important;
+      background-color: transparent !important;
       border: solid 1px transparent !important;
-      margin: 1px 4px !important;
+      margin: 0px !important;
+      max-height: 28px;
     }
     nile-select.st-cell-editor::part(combobox):hover {
       border: solid 1px transparent !important;
     }
     .st-cell-editor::part(combobox) {
-      background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary)) !important;
+      background-color: transparent !important;
       border: solid 1px transparent !important;
-      margin: 1px 4px !important;
+      margin: 0px !important;
+      max-height: 28px;
+    }
+    /* Tag spacing */
+    nile-select.st-cell-editor::part(tag) {
+      margin-right: 0px;
+      padding: 1px 2px;
+    }
+    .st-cell-editor::part(tag) {
+      margin-right: 0px;
+      padding: 1px 2px;
     }
     /* Search input full width */
     .nile-select-portal-append .select__search {
@@ -4724,6 +4763,625 @@ class NileDatePickerEditor {
     }
 }
 
+/**
+ * Custom editor using NileCodeEditor from @aquera/nile-elements
+ * This provides code editing capabilities with syntax highlighting for table cells
+ */
+/**
+ * Inject global styles for nile-code-editor in table cells
+ */
+let codeEditorStylesInjected = false;
+function injectCodeEditorStyles() {
+    if (codeEditorStylesInjected)
+        return;
+    codeEditorStylesInjected = true;
+    const styleId = 'nile-code-editor-cell-styles';
+    if (document.getElementById(styleId))
+        return;
+    const style = document.createElement('style');
+    style.id = styleId;
+    style.textContent = `
+    /* Nile Code Editor cell styling */
+    nile-code-editor.st-cell-editor {
+      display: block;
+      width: 100%;
+      height: 100%;
+      font-size: inherit !important;
+      font-family: inherit !important;
+      line-height: inherit !important;
+    }
+    nile-code-editor.st-cell-editor::part(code-editor-base) {
+      border: none !important;
+      min-height: 100% !important;
+      background: transparent !important;
+      font-size: inherit !important;
+      font-family: inherit !important;
+      line-height: inherit !important;
+    }
+    /* Ensure proper sizing within table cell */
+    .st-nile-code-editor {
+      width: 100%;
+      height: 100%;
+      min-height: 28px;
+      font-size: inherit !important;
+    }
+    /* CodeMirror content should inherit font size */
+    nile-code-editor.st-cell-editor .cm-content,
+    nile-code-editor.st-cell-editor .cm-line {
+      font-size: inherit !important;
+      font-family: inherit !important;
+      line-height: inherit !important;
+    }
+    /* Container wrapper for editor + expand button */
+    .st-code-editor-wrapper {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+      gap: 4px;
+    }
+    .st-code-editor-wrapper .st-code-editor-input {
+      flex: 1;
+      min-width: 0;
+      height: 100%;
+    }
+    .st-code-editor-wrapper .st-expand-button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      min-width: 24px;
+      padding: 0;
+      border: none;
+      background: transparent;
+      cursor: pointer;
+      color: var(--nile-color-neutral-500, #6b7280);
+      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);
+    }
+    /* Dialog code editor styling */
+    .st-code-editor-dialog::part(panel) {
+      max-height: var(--max-height, 80vh) !important;
+      overflow: hidden !important;
+    }
+    .st-code-editor-dialog::part(body) {
+      overflow: auto !important;
+    }
+    .st-code-editor-dialog nile-code-editor {
+      width: 100%;
+      display: block;
+    }
+    .st-code-editor-dialog nile-code-editor::part(code-editor-base) {
+      border: 1px solid var(--nile-color-neutral-200, #e5e7eb) !important;
+      border-radius: 4px !important;
+      overflow: auto !important;
+      min-height: var(--dialog-editor-min-height, 300px) !important;
+    }
+    .st-code-editor-dialog nile-code-editor .cm-editor {
+      min-height: var(--dialog-editor-min-height, 300px) !important;
+    }
+    .st-code-editor-dialog nile-code-editor .cm-content {
+      min-height: var(--dialog-editor-min-height, 300px) !important;
+    }
+  `;
+    document.head.appendChild(style);
+}
+/**
+ * Custom editor that uses NileCodeEditor component
+ * Provides code editing with syntax highlighting for table cells
+ * @template T The value type (typically string)
+ */
+class NileCodeEditor {
+    constructor(options) {
+        this.options = options;
+        this.eventListeners = [];
+        this.dialogOpen = false;
+        this.expandButtonClicked = false;
+        this.trackedValue = null;
+    }
+    edit(context) {
+        if (!context.container) {
+            console.warn('NileCodeEditor requires a container element');
+            return;
+        }
+        this.context = context;
+        this.trackedValue = null;
+        // Inject global styles once
+        injectCodeEditorStyles();
+        // Check if we should show expand button (default: true)
+        const showExpandButton = this.options?.showExpandButton !== false;
+        if (showExpandButton) {
+            // Create wrapper for editor + expand button
+            this.wrapper = document.createElement('div');
+            this.wrapper.className = 'st-code-editor-wrapper';
+            // Create the editor container
+            const editorContainer = document.createElement('div');
+            editorContainer.className = 'st-code-editor-input';
+            // Create NileCodeEditor custom element
+            this.editor = document.createElement('nile-code-editor');
+            this.editor.value = String(context.value ?? '');
+            this.editor.className = 'st-cell-editor st-nile-code-editor';
+            this.editor.style.width = '100%';
+            this.editor.style.height = '100%';
+            this.editor.style.boxSizing = 'border-box';
+            this.editor.noborder = this.options?.noborder !== false;
+            editorContainer.appendChild(this.editor);
+            this.wrapper.appendChild(editorContainer);
+            // Create expand button
+            this.expandButton = document.createElement('button');
+            this.expandButton.className = 'st-expand-button';
+            this.expandButton.type = 'button';
+            this.expandButton.title = 'Expand editor';
+            this.expandButton.innerHTML = '<nile-icon name="expand-06" size="16"></nile-icon>';
+            // Use mousedown to set flag BEFORE blur event fires
+            this.expandButton.addEventListener('mousedown', (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                this.expandButtonClicked = true;
+            });
+            this.expandButton.addEventListener('click', (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                this.openDialog();
+            });
+            this.wrapper.appendChild(this.expandButton);
+            // Clear container and append wrapper
+            context.container.innerHTML = '';
+            context.container.appendChild(this.wrapper);
+        }
+        else {
+            // Create NileCodeEditor custom element without wrapper
+            this.editor = document.createElement('nile-code-editor');
+            this.editor.value = String(context.value ?? '');
+            this.editor.className = 'st-cell-editor st-nile-code-editor';
+            this.editor.style.width = '100%';
+            this.editor.style.height = '100%';
+            this.editor.style.boxSizing = 'border-box';
+            this.editor.noborder = this.options?.noborder !== false;
+            // Clear container and append editor
+            context.container.innerHTML = '';
+            context.container.appendChild(this.editor);
+        }
+        // Apply all configuration options
+        this.applyOptions();
+        // Set up event listeners
+        this.setupEventListeners(context);
+        // Auto focus - need a slight delay for nile-code-editor to fully initialize
+        if (this.options?.autoFocus !== false) {
+            // Listen for the nile-after-init event which fires when editor is ready
+            const initHandler = () => {
+                this.editor?.removeEventListener('nile-after-init', initHandler);
+                this.focusEditor();
+            };
+            this.editor.addEventListener('nile-after-init', initHandler);
+            // Fallback: also try after a delay in case the event already fired
+            setTimeout(() => {
+                this.focusEditor();
+            }, 100);
+        }
+    }
+    /**
+     * Focus the editor and place cursor
+     */
+    focusEditor() {
+        if (!this.editor)
+            return;
+        try {
+            // Call the component's focus method
+            this.editor.focus();
+            // Try to directly focus the CodeMirror content area
+            const shadowRoot = this.editor.shadowRoot;
+            if (shadowRoot) {
+                const cmContent = shadowRoot.querySelector('.cm-content');
+                if (cmContent) {
+                    cmContent.focus();
+                    // Dispatch a click event to ensure cursor placement
+                    cmContent.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
+                    cmContent.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }));
+                }
+            }
+        }
+        catch (e) {
+            // Silently handle any errors
+        }
+    }
+    /**
+     * Open the full editor dialog
+     */
+    openDialog() {
+        if (this.dialogOpen)
+            return;
+        this.dialogOpen = true;
+        this.expandButtonClicked = false; // Reset flag now that dialog is opening
+        // Create dialog with configurable dimensions
+        const dialogWidth = this.options?.dialogWidth || '600px';
+        const dialogMaxHeight = this.options?.dialogMaxHeight || '80vh';
+        const dialogEditorHeight = this.options?.dialogEditorHeight || '300px';
+        const dialogTitle = this.options?.dialogTitle || 'Edit Code';
+        this.dialog = document.createElement('nile-dialog');
+        this.dialog.className = 'st-code-editor-dialog';
+        this.dialog.label = dialogTitle;
+        this.dialog.style.setProperty('--width', dialogWidth);
+        this.dialog.style.setProperty('--max-height', dialogMaxHeight);
+        // Create dialog content
+        const content = document.createElement('div');
+        content.style.padding = '16px';
+        content.style.maxHeight = `calc(${dialogMaxHeight} - 80px)`;
+        content.style.overflow = 'auto';
+        // Create full editor
+        this.dialogEditor = document.createElement('nile-code-editor');
+        const minLines = this.options?.dialogMinLines ?? 20;
+        const currentValue = this.editor?.value || '';
+        const currentLineCount = (currentValue.match(/\n/g) || []).length + 1;
+        const paddingLines = Math.max(0, minLines - currentLineCount);
+        this.dialogEditor.value = currentValue + '\n'.repeat(paddingLines);
+        this.dialogEditor.multiline = true;
+        this.dialogEditor.lineNumbersMultiline = true;
+        this.dialogEditor.hasScroller = true;
+        const lineHeightPx = 20;
+        const minHeightFromLines = `${minLines * lineHeightPx}px`;
+        this.dialogEditor.style.minHeight = `max(${dialogEditorHeight}, ${minHeightFromLines})`;
+        this.dialogEditor.style.maxHeight = `calc(${dialogMaxHeight} - 120px)`;
+        content.style.setProperty('--dialog-editor-min-height', `max(${dialogEditorHeight}, ${minHeightFromLines})`);
+        // Apply same options to dialog editor
+        if (this.options?.language) {
+            this.dialogEditor.language = this.options.language;
+        }
+        if (this.options?.placeholder) {
+            this.dialogEditor.placeholder = this.options.placeholder;
+        }
+        if (this.options?.tabCompletion !== undefined) {
+            this.dialogEditor.tabCompletion = this.options.tabCompletion;
+        }
+        if (this.options?.enableSearch !== undefined) {
+            this.dialogEditor.enableSearch = this.options.enableSearch;
+        }
+        if (this.options?.enableFoldGutters !== undefined) {
+            this.dialogEditor.enableFoldGutters = this.options.enableFoldGutters;
+        }
+        if (this.options?.customAutoCompletions) {
+            this.dialogEditor.customAutoCompletions = this.options.customAutoCompletions;
+        }
+        if (this.options?.customCompletionsPaths) {
+            this.dialogEditor.customCompletionsPaths = this.options.customCompletionsPaths;
+        }
+        if (this.options?.customThemeCSS) {
+            this.dialogEditor.customThemeCSS = this.options.customThemeCSS;
+        }
+        this.dialogEditor.expandable = false;
+        // Real-time sync: Update cell editor whenever dialog editor changes
+        this.dialogEditor.addEventListener('nile-change', (e) => {
+            const dialogValue = e.detail?.value || '';
+            this.trackedValue = dialogValue;
+            if (this.editor) {
+                this.editor.value = dialogValue;
+            }
+            if (this.context) {
+                this.context.onChange(dialogValue);
+            }
+        });
+        content.appendChild(this.dialogEditor);
+        this.dialog.appendChild(content);
+        // Handle dialog close events (clicking X button - stay in edit mode)
+        this.dialog.addEventListener('nile-request-close', (e) => {
+            const customEvent = e;
+            // Check if close was triggered by overlay click (clicking outside)
+            if (customEvent.detail?.source === 'overlay') {
+                // Clicking outside the dialog - save and exit edit mode
+                this.closeDialog(true);
+            }
+            else {
+                // Clicking X button - stay in edit mode
+                this.closeDialog(false);
+            }
+        });
+        // Handle Escape key in dialog - stay in edit mode
+        this.dialog.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                e.stopPropagation();
+                this.closeDialog(false);
+            }
+        });
+        // Append to body and show
+        document.body.appendChild(this.dialog);
+        // Open dialog after a tick to ensure it's in the DOM
+        setTimeout(() => {
+            if (this.dialog) {
+                this.dialog.open = true;
+                // Focus the dialog editor
+                setTimeout(() => {
+                    this.dialogEditor?.focus();
+                }, 100);
+            }
+        }, 0);
+    }
+    /**
+     * Close the dialog and optionally save/exit edit mode
+     */
+    closeDialog(saveAndExit = false) {
+        if (!this.dialogOpen)
+            return;
+        // Reset flag immediately so document click handler works
+        this.dialogOpen = false;
+        // Close and remove dialog
+        if (this.dialog) {
+            this.dialog.open = false;
+            const dialogRef = this.dialog;
+            const dialogEditorRef = this.dialogEditor;
+            this.dialog = undefined;
+            this.dialogEditor = undefined;
+            // Remove from DOM after animation
+            setTimeout(() => {
+                dialogRef?.remove();
+            }, 200);
+            if (saveAndExit && this.context) {
+                // Save and exit edit mode
+                this.context.onSave(this.getCurrentValue());
+            }
+            else {
+                // Refocus the cell editor to stay in edit mode
+                setTimeout(() => {
+                    this.focusEditor();
+                }, 50);
+            }
+        }
+    }
+    /**
+     * Apply all configuration options to the NileCodeEditor element
+     */
+    applyOptions() {
+        if (!this.editor)
+            return;
+        // Language and syntax
+        if (this.options?.language) {
+            this.editor.language = this.options.language;
+        }
+        if (this.options?.disableSyntaxHighlighting) {
+            this.editor.disableSyntaxHighlighting = this.options.disableSyntaxHighlighting;
+        }
+        // Editor appearance
+        if (this.options?.placeholder) {
+            this.editor.placeholder = this.options.placeholder;
+        }
+        if (this.options?.lineNumbers !== undefined) {
+            this.editor.lineNumbers = this.options.lineNumbers;
+        }
+        if (this.options?.lineNumbersMultiline !== undefined) {
+            this.editor.lineNumbersMultiline = this.options.lineNumbersMultiline;
+        }
+        if (this.options?.multiline !== undefined) {
+            this.editor.multiline = this.options.multiline;
+        }
+        if (this.options?.defaultFont !== undefined) {
+            this.editor.defaultFont = this.options.defaultFont;
+        }
+        // Editor behavior
+        if (this.options?.readonly !== undefined) {
+            this.editor.readonly = this.options.readonly;
+        }
+        if (this.options?.disabled !== undefined) {
+            this.editor.disabled = this.options.disabled;
+        }
+        if (this.options?.tabCompletion !== undefined) {
+            this.editor.tabCompletion = this.options.tabCompletion;
+        }
+        if (this.options?.enableSearch !== undefined) {
+            this.editor.enableSearch = this.options.enableSearch;
+        }
+        if (this.options?.enableFoldGutters !== undefined) {
+            this.editor.enableFoldGutters = this.options.enableFoldGutters;
+        }
+        if (this.options?.hasScroller !== undefined) {
+            this.editor.hasScroller = this.options.hasScroller;
+        }
+        // Expandable - default to false for cell editing
+        this.editor.expandable = this.options?.expandable ?? false;
+        if (this.options?.expandIcon) {
+            this.editor.expandIcon = this.options.expandIcon;
+        }
+        // Autocompletion
+        if (this.options?.customAutoCompletions) {
+            this.editor.customAutoCompletions = this.options.customAutoCompletions;
+        }
+        if (this.options?.customCompletionsPaths) {
+            this.editor.customCompletionsPaths = this.options.customCompletionsPaths;
+        }
+        if (this.options?.allowVariableInCustomSuggestion !== undefined) {
+            this.editor.allowVariableInCustomSuggestion = this.options.allowVariableInCustomSuggestion;
+        }
+        if (this.options?.aboveCursor !== undefined) {
+            this.editor.aboveCursor = this.options.aboveCursor;
+        }
+        if (this.options?.autoCompleteStyle) {
+            this.editor.autoCompleteStyle = this.options.autoCompleteStyle;
+        }
+        // Change handling
+        if (this.options?.debounce !== undefined) {
+            this.editor.debounce = this.options.debounce;
+        }
+        if (this.options?.debounceTimeout !== undefined) {
+            this.editor.debounceTimeout = this.options.debounceTimeout;
+        }
+        // Visual states
+        if (this.options?.error !== undefined) {
+            this.editor.error = this.options.error;
+        }
+        if (this.options?.errorMessage) {
+            this.editor.errorMessage = this.options.errorMessage;
+        }
+        // Custom theme
+        if (this.options?.customThemeCSS) {
+            this.editor.customThemeCSS = this.options.customThemeCSS;
+        }
+    }
+    /**
+     * Set up all event listeners with proper cleanup tracking
+     */
+    setupEventListeners(context) {
+        if (!this.editor)
+            return;
+        const validateOnSave = this.options?.validateOnSave !== false;
+        // Handle keyboard events
+        const keydownHandler = (e) => {
+            const keyEvent = e;
+            // For single-line mode, Enter saves
+            if (!this.options?.multiline && keyEvent.key === 'Enter') {
+                keyEvent.preventDefault();
+                keyEvent.stopPropagation();
+                this.saveValue(context, validateOnSave);
+            }
+            // Escape cancels
+            if (keyEvent.key === 'Escape') {
+                keyEvent.preventDefault();
+                keyEvent.stopPropagation();
+                context.onCancel();
+            }
+        };
+        this.editor.addEventListener('keydown', keydownHandler);
+        this.eventListeners.push({ event: 'keydown', handler: keydownHandler });
+        // Use nile-blur event for saving on blur
+        const blurHandler = () => {
+            // Don't save if dialog is open
+            if (this.dialogOpen) {
+                return;
+            }
+            // Don't save if expand button was clicked (mousedown sets this flag)
+            if (this.expandButtonClicked) {
+                // Reset flag - the click handler will open the dialog
+                this.expandButtonClicked = false;
+                return;
+            }
+            // Save and exit edit mode
+            this.saveValue(context, validateOnSave);
+        };
+        this.editor.addEventListener('nile-blur', blurHandler);
+        this.eventListeners.push({ event: 'nile-blur', handler: blurHandler });
+        // Document-level mousedown handler to detect clicks outside the editor
+        this.documentClickHandler = (e) => {
+            // Don't process if dialog is open or expand button was clicked
+            if (this.dialogOpen || this.expandButtonClicked) {
+                return;
+            }
+            // Use composedPath to handle Shadow DOM boundaries
+            const path = e.composedPath();
+            // 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) {
+                    return;
+                }
+                // Also check if it's the container (the cell)
+                if (element === context.container) {
+                    return;
+                }
+            }
+            // Click is outside - save and exit
+            this.saveValue(context, validateOnSave);
+        };
+        // Add with a small delay to avoid capturing the initial click that opened the editor
+        setTimeout(() => {
+            document.addEventListener('mousedown', this.documentClickHandler, true);
+        }, 50);
+        // Real-time value updates using nile-change
+        const changeHandler = (e) => {
+            const customEvent = e;
+            const newValue = customEvent.detail?.value ?? '';
+            this.trackedValue = newValue;
+            context.onChange(newValue);
+        };
+        this.editor.addEventListener('nile-change', changeHandler);
+        this.eventListeners.push({ event: 'nile-change', handler: changeHandler });
+        // Handle expand event if expandable
+        if (this.options?.expandable) {
+            const expandHandler = () => {
+                // Emit a custom event that the parent can listen to
+                const expandEvent = new CustomEvent('st-code-editor-expand', {
+                    bubbles: true,
+                    detail: { value: this.getCurrentValue() }
+                });
+                this.editor?.dispatchEvent(expandEvent);
+            };
+            this.editor.addEventListener('nile-expand', expandHandler);
+            this.eventListeners.push({ event: 'nile-expand', handler: expandHandler });
+        }
+    }
+    /**
+     * Save value with optional validation
+     */
+    saveValue(context, validate) {
+        if (!this.editor)
+            return;
+        // Code editor doesn't have built-in validation like input
+        // But we can check for error state
+        if (validate && this.options?.error) {
+            return;
+        }
+        const value = this.getCurrentValue();
+        context.onSave(value);
+    }
+    destroy() {
+        // Remove document click handler
+        if (this.documentClickHandler) {
+            document.removeEventListener('mousedown', this.documentClickHandler, true);
+            this.documentClickHandler = undefined;
+        }
+        // Close dialog if open
+        if (this.dialogOpen && this.dialog) {
+            this.dialog.open = false;
+            this.dialog.remove();
+            this.dialog = undefined;
+            this.dialogEditor = undefined;
+            this.dialogOpen = false;
+        }
+        // Remove all event listeners
+        if (this.editor) {
+            this.eventListeners.forEach(({ event, handler }) => {
+                this.editor?.removeEventListener(event, handler);
+            });
+            this.eventListeners = [];
+            this.editor.remove();
+            this.editor = undefined;
+        }
+        // Remove wrapper if exists
+        if (this.wrapper) {
+            this.wrapper.remove();
+            this.wrapper = undefined;
+        }
+        // Clear expand button reference
+        this.expandButton = undefined;
+        this.context = undefined;
+        this.expandButtonClicked = false;
+    }
+    focus() {
+        this.editor?.focus();
+    }
+    getCurrentValue() {
+        if (!this.editor)
+            return '';
+        const value = (this.trackedValue !== null ? this.trackedValue : this.editor.value ?? '');
+        return value.replace(/\n+$/, '');
+    }
+    /**
+     * Set value programmatically
+     */
+    setValue(value) {
+        if (this.editor) {
+            this.editor.value = String(value ?? '');
+        }
+    }
+    /**
+     * Get the CodeMirror instance (if needed for advanced usage)
+     */
+    getEditorInstance() {
+        return this.editor;
+    }
+}
+
 /**
  * Custom cell editors for ngx-smart-table
  */
@@ -4953,15 +5611,28 @@ class ColumnConfigFactory {
 const Columns = ColumnConfigFactory;
 
 class StCellComponent {
-    constructor() {
+    constructor(cdr) {
+        this.cdr = cdr;
         this.editMode = EditMode.CLICK;
         this.cellChange = new EventEmitter();
         this.cellEdit = new EventEmitter();
         this.cellSave = new EventEmitter();
         this.cellCancel = new EventEmitter();
         this.cellSaveAndNavigate = new EventEmitter();
+        this.cellLoading = false;
     }
     ngOnInit() {
+        this.cell.onStateChange(() => {
+            this.cellLoading = !!this.cell.getState().isLoading;
+            try {
+                this.cdr.detectChanges();
+            }
+            catch {
+                // View may have been destroyed; safely ignore
+            }
+        });
+        // Pick up loading state that was set before this component was created
+        this.cellLoading = !!this.cell.getState().isLoading;
         // Subscribe to editing position changes
         // When another cell starts editing, save this cell if it's currently editing
         if (this.tableState && this.columnIndex !== undefined) {
@@ -5312,12 +5983,12 @@ class StCellComponent {
         }
     }
 }
-StCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-StCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StCellComponent, selector: "st-cell", inputs: { cell: "cell", editMode: "editMode", tableState: "tableState", tableConfig: "tableConfig", columnIndex: "columnIndex" }, 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  }\"\n  (click)=\"onCellClick()\" \n  (dblclick)=\"onCellDoubleClick()\">\n\n  <!-- Display Mode with Template Support -->\n  <ng-container *ngIf=\"!cell.isEditing()\">\n    <!-- Custom Template -->\n    <ng-container *ngIf=\"hasCellTemplate\">\n      <ng-container *ngTemplateOutlet=\"cellTemplate; context: templateContext\"></ng-container>\n    </ng-container>\n\n    <!-- Default Text Rendering -->\n    <span *ngIf=\"!hasCellTemplate\" class=\"cell-display\">\n      {{ cell.render() }}\n    </span>\n  </ng-container>\n\n  <!-- Edit Mode -->\n  <div *ngIf=\"cell.isEditing()\" class=\"cell-editor\" #editorContainer>\n  </div>\n</div>", 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}.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}.cell-editor nile-select::part(tag){border:none!important;outline:none!important}.cell-editor nile-select::part(listbox){border:none!important}.cell-error{position:absolute;right:4px;top:50%;transform:translateY(-50%);color:#e53e3e;font-weight:700;cursor:help;font-size:14px}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+StCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StCellComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+StCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StCellComponent, selector: "st-cell", inputs: { cell: "cell", editMode: "editMode", tableState: "tableState", tableConfig: "tableConfig", columnIndex: "columnIndex" }, 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  <ng-container *ngIf=\"!cell.isEditing() && !cellLoading\">\n    <!-- Custom Template -->\n    <ng-container *ngIf=\"hasCellTemplate\">\n      <ng-container *ngTemplateOutlet=\"cellTemplate; context: templateContext\"></ng-container>\n    </ng-container>\n\n    <!-- Default Text Rendering -->\n    <span *ngIf=\"!hasCellTemplate\" class=\"cell-display\">\n      {{ cell.render() }}\n    </span>\n  </ng-container>\n\n  <!-- Edit Mode -->\n  <div *ngIf=\"cell.isEditing()\" class=\"cell-editor\" #editorContainer>\n  </div>\n</div>", 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"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-cell', template: "<div class=\"st-cell\" \n  [ngClass]=\"{\n    'editing': cell.isEditing(),\n    'dirty': cell.isDirty(),\n    'invalid': !cell.isValid(),\n    'readonly': !isEditable\n  }\"\n  (click)=\"onCellClick()\" \n  (dblclick)=\"onCellDoubleClick()\">\n\n  <!-- Display Mode with Template Support -->\n  <ng-container *ngIf=\"!cell.isEditing()\">\n    <!-- Custom Template -->\n    <ng-container *ngIf=\"hasCellTemplate\">\n      <ng-container *ngTemplateOutlet=\"cellTemplate; context: templateContext\"></ng-container>\n    </ng-container>\n\n    <!-- Default Text Rendering -->\n    <span *ngIf=\"!hasCellTemplate\" class=\"cell-display\">\n      {{ cell.render() }}\n    </span>\n  </ng-container>\n\n  <!-- Edit Mode -->\n  <div *ngIf=\"cell.isEditing()\" class=\"cell-editor\" #editorContainer>\n  </div>\n</div>", 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}.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}.cell-editor nile-select::part(tag){border:none!important;outline:none!important}.cell-editor nile-select::part(listbox){border:none!important}.cell-error{position:absolute;right:4px;top:50%;transform:translateY(-50%);color:#e53e3e;font-weight:700;cursor:help;font-size:14px}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { cell: [{
+            args: [{ selector: 'st-cell', 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  <ng-container *ngIf=\"!cell.isEditing() && !cellLoading\">\n    <!-- Custom Template -->\n    <ng-container *ngIf=\"hasCellTemplate\">\n      <ng-container *ngTemplateOutlet=\"cellTemplate; context: templateContext\"></ng-container>\n    </ng-container>\n\n    <!-- Default Text Rendering -->\n    <span *ngIf=\"!hasCellTemplate\" class=\"cell-display\">\n      {{ cell.render() }}\n    </span>\n  </ng-container>\n\n  <!-- Edit Mode -->\n  <div *ngIf=\"cell.isEditing()\" class=\"cell-editor\" #editorContainer>\n  </div>\n</div>", 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"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { cell: [{
                 type: Input
             }], editMode: [{
                 type: Input
@@ -7991,7 +8662,20 @@ class StTableComponent {
         if (!this.data)
             return;
         const columns = this.getActiveColumns();
-        this.internalCellGrid = this.data.map((rowData, rowIndex) => columns.map(column => new Cell(column, rowData[column.key], rowData, rowIndex)));
+        const oldGrid = this.internalCellGrid;
+        this.internalCellGrid = this.data.map((rowData, rowIndex) => columns.map((column, colIndex) => {
+            const newCell = new Cell(column, rowData[column.key], rowData, rowIndex);
+            const oldCell = oldGrid?.[rowIndex]?.[colIndex];
+            if (oldCell && oldCell.getColumnConfig().key === column.key) {
+                oldCell.setReplacement(newCell);
+                // Carry over transient state (e.g. loading) that was set on the old cell
+                const oldState = oldCell.getState();
+                if (oldState.isLoading) {
+                    newCell.setLoading(true);
+                }
+            }
+            return newCell;
+        }));
     }
     /**
      * Setup data source - either sync array or async Observable
@@ -12377,5 +13061,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", 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, NileDatePickerEditor, NileInputEditor, NileSelectEditor, NumberEditor, NumberFormatter, 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, isCellValid, isDisplayMode, isNullOrUndefined, isValidDate, isValidationSuccess, mergeTableConfig, 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, NileCodeEditor, NileDatePickerEditor, NileInputEditor, NileSelectEditor, NumberEditor, NumberFormatter, 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, isCellValid, isDisplayMode, isNullOrUndefined, isValidDate, isValidationSuccess, mergeTableConfig, restoreFromMemento };
 //# sourceMappingURL=aquera-ngx-smart-table.mjs.map