@aquera/ngx-smart-table 0.0.17-patch-0.3 → 0.0.17-patch-0.4

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

@@ -4731,11 +4731,13 @@ function injectCodeEditorStyles() {
     const style = document.createElement('style');
     style.id = styleId;
     style.textContent = `
-    /* Nile Code Editor cell styling */
+    /* Nile Code Editor cell styling - constrained to cell height */
     nile-code-editor.st-cell-editor {
       display: block;
       width: 100%;
       height: 100%;
+      max-height: 32px;
+      overflow: hidden;
       font-size: inherit !important;
       font-family: inherit !important;
       line-height: inherit !important;
@@ -4743,19 +4745,31 @@ function injectCodeEditorStyles() {
     nile-code-editor.st-cell-editor::part(code-editor-base) {
       border: none !important;
       min-height: 100% !important;
+      max-height: 32px !important;
       background: transparent !important;
       font-size: inherit !important;
       font-family: inherit !important;
       line-height: inherit !important;
+      overflow: hidden !important;
     }
     /* Ensure proper sizing within table cell */
     .st-nile-code-editor {
       width: 100%;
       height: 100%;
+      max-height: 32px;
       min-height: 28px;
       font-size: inherit !important;
+      overflow: hidden;
+    }
+    /* CodeMirror content should inherit font size and be constrained */
+    nile-code-editor.st-cell-editor .cm-editor {
+      max-height: 32px !important;
+      overflow: hidden !important;
+    }
+    nile-code-editor.st-cell-editor .cm-scroller {
+      max-height: 32px !important;
+      overflow: hidden !important;
     }
-    /* CodeMirror content should inherit font size */
     nile-code-editor.st-cell-editor .cm-content,
     nile-code-editor.st-cell-editor .cm-line {
       font-size: inherit !important;
@@ -4768,12 +4782,15 @@ function injectCodeEditorStyles() {
       align-items: center;
       width: 100%;
       height: 100%;
+      max-height: 32px;
       gap: 4px;
     }
     .st-code-editor-wrapper .st-code-editor-input {
       flex: 1;
       min-width: 0;
       height: 100%;
+      max-height: 32px;
+      overflow: hidden;
     }
     .st-code-editor-wrapper .st-expand-button {
       display: flex;
@@ -4794,13 +4811,22 @@ function injectCodeEditorStyles() {
       background: var(--nile-color-neutral-100, #f3f4f6);
       color: var(--nile-color-neutral-700, #374151);
     }
-    /* Dialog code editor styling */
+    /* Dialog code editor styling - fixed header/footer, scrollable content */
     .st-code-editor-dialog::part(panel) {
       max-height: var(--max-height, 80vh) !important;
       overflow: hidden !important;
+      display: flex !important;
+      flex-direction: column !important;
+    }
+    .st-code-editor-dialog::part(header) {
+      flex-shrink: 0 !important;
     }
     .st-code-editor-dialog::part(body) {
-      overflow: auto !important;
+      overflow: hidden !important;
+      flex: 1 !important;
+      display: flex !important;
+      flex-direction: column !important;
+      padding: 0 !important;
     }
     .st-code-editor-dialog nile-code-editor {
       width: 100%;
@@ -4809,14 +4835,6 @@ function injectCodeEditorStyles() {
     .st-code-editor-dialog nile-code-editor::part(code-editor-base) {
       border: 1px solid var(--nile-color-neutral-200, #e5e7eb) !important;
       border-radius: 4px !important;
-      overflow: auto !important;
-      min-height: var(--dialog-editor-min-height, 300px) !important;
-    }
-    .st-code-editor-dialog nile-code-editor .cm-editor {
-      min-height: var(--dialog-editor-min-height, 300px) !important;
-    }
-    .st-code-editor-dialog nile-code-editor .cm-content {
-      min-height: var(--dialog-editor-min-height, 300px) !important;
     }
   `;
     document.head.appendChild(style);
@@ -4833,19 +4851,26 @@ class NileCodeEditor {
         this.dialogOpen = false;
         this.expandButtonClicked = false;
         this.trackedValue = null;
+        this.syncingFromDialog = false; // Flag to prevent inline editor from overwriting multiline content
+        this.userEditedInline = false; // Flag to track if user has typed in inline editor
+        this.dialogOriginalValue = ''; // Store original value when dialog opens
+        this.dialogCurrentValue = ''; // Track current value in dialog
     }
     edit(context) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         if (!context.container) {
             console.warn('NileCodeEditor requires a container element');
             return;
         }
         this.context = context;
-        this.trackedValue = null;
+        // Initialize tracked value from context
+        this.trackedValue = String((_a = context.value) !== null && _a !== void 0 ? _a : '');
+        this.syncingFromDialog = false;
+        this.userEditedInline = false;
         // Inject global styles once
         injectCodeEditorStyles();
         // Check if we should show expand button (default: true)
-        const showExpandButton = ((_a = this.options) === null || _a === void 0 ? void 0 : _a.showExpandButton) !== false;
+        const showExpandButton = ((_b = this.options) === null || _b === void 0 ? void 0 : _b.showExpandButton) !== false;
         if (showExpandButton) {
             // Create wrapper for editor + expand button
             this.wrapper = document.createElement('div');
@@ -4855,12 +4880,17 @@ class NileCodeEditor {
             editorContainer.className = 'st-code-editor-input';
             // Create NileCodeEditor custom element
             this.editor = document.createElement('nile-code-editor');
-            this.editor.value = String((_b = context.value) !== null && _b !== void 0 ? _b : '');
+            this.editor.value = String((_c = context.value) !== null && _c !== void 0 ? _c : '');
             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 = ((_c = this.options) === null || _c === void 0 ? void 0 : _c.noborder) !== false;
+            this.editor.noborder = ((_d = this.options) === null || _d === void 0 ? void 0 : _d.noborder) !== false;
+            // Enable multiline by default for inline editor to support paste and multiline content
+            this.editor.multiline = ((_e = this.options) === null || _e === void 0 ? void 0 : _e.multiline) !== false;
+            this.editor.hasScroller = true;
+            // No line numbers for inline editor
+            this.editor.lineNumbers = false;
             editorContainer.appendChild(this.editor);
             this.wrapper.appendChild(editorContainer);
             // Create expand button
@@ -4888,12 +4918,17 @@ class NileCodeEditor {
         else {
             // Create NileCodeEditor custom element without wrapper
             this.editor = document.createElement('nile-code-editor');
-            this.editor.value = String((_d = context.value) !== null && _d !== void 0 ? _d : '');
+            this.editor.value = String((_f = context.value) !== null && _f !== void 0 ? _f : '');
             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 = ((_e = this.options) === null || _e === void 0 ? void 0 : _e.noborder) !== false;
+            this.editor.noborder = ((_g = this.options) === null || _g === void 0 ? void 0 : _g.noborder) !== false;
+            // Enable multiline by default for inline editor to support paste and multiline content
+            this.editor.multiline = ((_h = this.options) === null || _h === void 0 ? void 0 : _h.multiline) !== false;
+            this.editor.hasScroller = true;
+            // No line numbers for inline editor
+            this.editor.lineNumbers = false;
             // Clear container and append editor
             context.container.innerHTML = '';
             context.container.appendChild(this.editor);
@@ -4903,7 +4938,7 @@ class NileCodeEditor {
         // Set up event listeners
         this.setupEventListeners(context);
         // Auto focus - need a slight delay for nile-code-editor to fully initialize
-        if (((_f = this.options) === null || _f === void 0 ? void 0 : _f.autoFocus) !== false) {
+        if (((_j = this.options) === null || _j === void 0 ? void 0 : _j.autoFocus) !== false) {
             // Listen for the nile-after-init event which fires when editor is ready
             const initHandler = () => {
                 var _a;
@@ -4945,9 +4980,18 @@ class NileCodeEditor {
     /**
      * Read the live value directly from CodeMirror's internal state,
      * bypassing debounced nile-change events and the possibly-stale .value property.
+     *
+     * Priority order:
+     * 1. trackedValue - always up to date from change events
+     * 2. CodeMirror internal state - for real-time reading
+     * 3. editor.value property - fallback
      */
     getLiveEditorValue() {
         var _a, _b;
+        // Use tracked value if available (updated by change events)
+        if (this.trackedValue !== null) {
+            return this.trackedValue;
+        }
         if (!this.editor)
             return '';
         try {
@@ -4962,19 +5006,19 @@ class NileCodeEditor {
         catch (_c) {
             // Fall through to other methods
         }
-        if (this.trackedValue !== null)
-            return this.trackedValue;
         return (_b = this.editor.value) !== null && _b !== void 0 ? _b : '';
     }
     /**
      * Open the full editor dialog
      */
     openDialog() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
         if (this.dialogOpen)
             return;
         this.dialogOpen = true;
         this.expandButtonClicked = false; // Reset flag now that dialog is opening
+        // Store original value for cancel functionality
+        this.dialogOriginalValue = this.getLiveEditorValue();
         // Create dialog with configurable dimensions
         const dialogWidth = ((_a = this.options) === null || _a === void 0 ? void 0 : _a.dialogWidth) || '600px';
         const dialogMaxHeight = ((_b = this.options) === null || _b === void 0 ? void 0 : _b.dialogMaxHeight) || '80vh';
@@ -4985,86 +5029,91 @@ class NileCodeEditor {
         this.dialog.label = dialogTitle;
         this.dialog.style.setProperty('--width', dialogWidth);
         this.dialog.style.setProperty('--max-height', dialogMaxHeight);
-        // Create dialog content
+        // Create dialog content wrapper - flex column to handle fixed header/footer
+        const contentWrapper = document.createElement('div');
+        contentWrapper.style.display = 'flex';
+        contentWrapper.style.flexDirection = 'column';
+        contentWrapper.style.height = `calc(${dialogMaxHeight} - 60px)`; // Account for dialog header
+        contentWrapper.style.maxHeight = `calc(${dialogMaxHeight} - 60px)`;
+        // Create editor content area - this is the scrollable part
         const content = document.createElement('div');
         content.style.padding = '16px';
-        content.style.maxHeight = `calc(${dialogMaxHeight} - 80px)`;
+        content.style.paddingBottom = '8px';
+        content.style.flex = '1';
         content.style.overflow = 'auto';
+        content.style.minHeight = '0'; // Important for flex shrinking
         // Create full editor
         this.dialogEditor = document.createElement('nile-code-editor');
-        const minLines = (_f = (_e = this.options) === null || _e === void 0 ? void 0 : _e.dialogMinLines) !== null && _f !== void 0 ? _f : 20;
-        const currentValue = this.getLiveEditorValue();
-        const currentLineCount = (currentValue.match(/\n/g) || []).length + 1;
-        const paddingLines = Math.max(0, minLines - currentLineCount);
-        this.dialogEditor.value = currentValue + '\n'.repeat(paddingLines);
+        this.dialogEditor.value = this.dialogOriginalValue;
         this.dialogEditor.multiline = true;
         this.dialogEditor.lineNumbersMultiline = true;
         this.dialogEditor.hasScroller = true;
-        const lineHeightPx = 20;
-        const minHeightFromLines = `${minLines * lineHeightPx}px`;
-        this.dialogEditor.style.minHeight = `max(${dialogEditorHeight}, ${minHeightFromLines})`;
-        this.dialogEditor.style.maxHeight = `calc(${dialogMaxHeight} - 120px)`;
-        content.style.setProperty('--dialog-editor-min-height', `max(${dialogEditorHeight}, ${minHeightFromLines})`);
+        this.dialogEditor.style.minHeight = dialogEditorHeight;
         // Apply same options to dialog editor
-        if ((_g = this.options) === null || _g === void 0 ? void 0 : _g.language) {
+        if ((_e = this.options) === null || _e === void 0 ? void 0 : _e.language) {
             this.dialogEditor.language = this.options.language;
         }
-        if ((_h = this.options) === null || _h === void 0 ? void 0 : _h.placeholder) {
+        if ((_f = this.options) === null || _f === void 0 ? void 0 : _f.placeholder) {
             this.dialogEditor.placeholder = this.options.placeholder;
         }
-        if (((_j = this.options) === null || _j === void 0 ? void 0 : _j.tabCompletion) !== undefined) {
+        if (((_g = this.options) === null || _g === void 0 ? void 0 : _g.tabCompletion) !== undefined) {
             this.dialogEditor.tabCompletion = this.options.tabCompletion;
         }
-        if (((_k = this.options) === null || _k === void 0 ? void 0 : _k.enableSearch) !== undefined) {
+        if (((_h = this.options) === null || _h === void 0 ? void 0 : _h.enableSearch) !== undefined) {
             this.dialogEditor.enableSearch = this.options.enableSearch;
         }
-        if (((_l = this.options) === null || _l === void 0 ? void 0 : _l.enableFoldGutters) !== undefined) {
+        if (((_j = this.options) === null || _j === void 0 ? void 0 : _j.enableFoldGutters) !== undefined) {
             this.dialogEditor.enableFoldGutters = this.options.enableFoldGutters;
         }
-        if ((_m = this.options) === null || _m === void 0 ? void 0 : _m.customAutoCompletions) {
+        if ((_k = this.options) === null || _k === void 0 ? void 0 : _k.customAutoCompletions) {
             this.dialogEditor.customAutoCompletions = this.options.customAutoCompletions;
         }
-        if ((_o = this.options) === null || _o === void 0 ? void 0 : _o.customCompletionsPaths) {
+        if ((_l = this.options) === null || _l === void 0 ? void 0 : _l.customCompletionsPaths) {
             this.dialogEditor.customCompletionsPaths = this.options.customCompletionsPaths;
         }
-        if ((_p = this.options) === null || _p === void 0 ? void 0 : _p.customThemeCSS) {
+        if ((_m = this.options) === null || _m === void 0 ? void 0 : _m.customThemeCSS) {
             this.dialogEditor.customThemeCSS = this.options.customThemeCSS;
         }
         this.dialogEditor.expandable = false;
-        // Real-time sync: Update cell editor whenever dialog editor changes
+        // Initialize dialog current value
+        this.dialogCurrentValue = this.dialogOriginalValue;
+        // Track changes in dialog editor
         this.dialogEditor.addEventListener('nile-change', (e) => {
-            var _a;
-            const dialogValue = ((_a = e.detail) === null || _a === void 0 ? void 0 : _a.value) || '';
-            this.trackedValue = dialogValue;
-            if (this.editor) {
-                this.editor.value = dialogValue;
-            }
-            if (this.context) {
-                this.context.onChange(dialogValue);
-            }
+            var _a, _b;
+            this.dialogCurrentValue = (_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';
         });
         content.appendChild(this.dialogEditor);
-        this.dialog.appendChild(content);
-        // Handle dialog close events (clicking X button - stay in edit mode)
+        contentWrapper.appendChild(content);
+        // Create footer with Ok button - fixed at bottom
+        const footer = document.createElement('div');
+        footer.style.display = 'flex';
+        footer.style.justifyContent = 'flex-end';
+        footer.style.padding = '12px 16px';
+        footer.style.borderTop = '1px solid var(--nile-color-neutral-200, #e5e7eb)';
+        footer.style.gap = '8px';
+        footer.style.flexShrink = '0'; // Prevent footer from shrinking
+        footer.style.backgroundColor = 'var(--nile-color-neutral-0, #ffffff)';
+        const okButton = document.createElement('nile-button');
+        okButton.setAttribute('variant', 'primary');
+        okButton.textContent = 'Ok';
+        okButton.addEventListener('click', () => {
+            this.applyDialogChanges();
+        });
+        footer.appendChild(okButton);
+        contentWrapper.appendChild(footer);
+        this.dialog.appendChild(contentWrapper);
+        // Handle dialog close events (clicking X button - cancel changes)
         this.dialog.addEventListener('nile-request-close', (e) => {
-            var _a;
-            const customEvent = e;
-            // Check if close was triggered by overlay click (clicking outside)
-            if (((_a = customEvent.detail) === null || _a === void 0 ? void 0 : _a.source) === 'overlay') {
-                // Clicking outside the dialog - save and exit edit mode
-                this.closeDialog(true);
-            }
-            else {
-                // Clicking X button - stay in edit mode
-                this.closeDialog(false);
-            }
+            e.preventDefault();
+            // X button or overlay click - cancel changes
+            this.cancelDialogChanges();
         });
-        // Handle Escape key in dialog - stay in edit mode
+        // Handle Escape key in dialog - cancel changes
         this.dialog.addEventListener('keydown', (e) => {
             if (e.key === 'Escape') {
                 e.preventDefault();
                 e.stopPropagation();
-                this.closeDialog(false);
+                this.cancelDialogChanges();
             }
         });
         // Append to body and show
@@ -5082,34 +5131,115 @@ class NileCodeEditor {
         }, 0);
     }
     /**
-     * Close the dialog and optionally save/exit edit mode
+     * Get the current value from the dialog editor
      */
-    closeDialog(saveAndExit = false) {
+    getDialogEditorValue() {
+        var _a;
+        // Use tracked value from change events (most reliable)
+        if (this.dialogCurrentValue) {
+            return this.dialogCurrentValue.replace(/\n+$/, '');
+        }
+        if (!this.dialogEditor)
+            return this.dialogOriginalValue;
+        // Try to get value from CodeMirror's internal state
+        try {
+            const shadowRoot = this.dialogEditor.shadowRoot;
+            if (shadowRoot) {
+                const cmEditor = shadowRoot.querySelector('.cm-editor');
+                if ((_a = cmEditor === null || cmEditor === void 0 ? void 0 : cmEditor.cmView) === null || _a === void 0 ? void 0 : _a.view) {
+                    const value = cmEditor.cmView.view.state.doc.toString();
+                    return value.replace(/\n+$/, '');
+                }
+            }
+        }
+        catch (_b) {
+            // Fall through to other methods
+        }
+        // Fallback to value property
+        const value = this.dialogEditor.value;
+        return (value !== null && value !== void 0 ? value : '').replace(/\n+$/, '');
+    }
+    /**
+     * Apply changes from dialog and close it
+     */
+    applyDialogChanges() {
+        var _a, _b;
+        if (!this.dialogOpen)
+            return;
+        // Get the value from dialog editor - try multiple sources
+        let dialogValue = this.dialogCurrentValue;
+        // If no tracked value, try reading directly from dialog editor
+        if (!dialogValue && this.dialogEditor) {
+            try {
+                const shadowRoot = this.dialogEditor.shadowRoot;
+                if (shadowRoot) {
+                    const cmEditor = shadowRoot.querySelector('.cm-editor');
+                    if ((_a = cmEditor === null || cmEditor === void 0 ? void 0 : cmEditor.cmView) === null || _a === void 0 ? void 0 : _a.view) {
+                        dialogValue = cmEditor.cmView.view.state.doc.toString();
+                    }
+                }
+            }
+            catch (_c) {
+                // Fall through
+            }
+            // Fallback to value property
+            if (!dialogValue) {
+                dialogValue = (_b = this.dialogEditor.value) !== null && _b !== void 0 ? _b : '';
+            }
+        }
+        // Strip trailing newlines
+        dialogValue = (dialogValue || '').replace(/\n+$/, '');
+        // Update tracked value and inline editor
+        this.trackedValue = dialogValue;
+        this.userEditedInline = false;
+        this.syncingFromDialog = true;
+        if (this.editor) {
+            this.editor.value = dialogValue;
+        }
+        setTimeout(() => {
+            this.syncingFromDialog = false;
+        }, 0);
+        // Notify context of the change
+        if (this.context) {
+            this.context.onChange(dialogValue);
+        }
+        // Close dialog
+        this.closeDialogUI();
+        // Refocus the cell editor to stay in edit mode
+        setTimeout(() => {
+            this.focusEditor();
+        }, 50);
+    }
+    /**
+     * Cancel dialog changes and revert to original value
+     */
+    cancelDialogChanges() {
         if (!this.dialogOpen)
             return;
-        // Reset flag immediately so document click handler works
+        // Revert to original value (don't change anything)
+        // trackedValue and inline editor remain as they were before dialog opened
+        // Close dialog
+        this.closeDialogUI();
+        // Refocus the cell editor to stay in edit mode
+        setTimeout(() => {
+            this.focusEditor();
+        }, 50);
+    }
+    /**
+     * Close and remove the dialog UI
+     */
+    closeDialogUI() {
         this.dialogOpen = false;
-        // Close and remove dialog
+        this.dialogCurrentValue = '';
         if (this.dialog) {
             this.dialog.open = false;
             const dialogRef = this.dialog;
-            const dialogEditorRef = this.dialogEditor;
             this.dialog = undefined;
             this.dialogEditor = undefined;
             // Remove from DOM after animation
             setTimeout(() => {
                 dialogRef === null || dialogRef === void 0 ? void 0 : 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);
-            }
         }
     }
     /**
@@ -5275,6 +5405,11 @@ class NileCodeEditor {
             var _a, _b;
             const customEvent = e;
             const newValue = (_b = (_a = customEvent.detail) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';
+            // Don't process if we're syncing from dialog (prevents feedback loop)
+            if (this.syncingFromDialog) {
+                return;
+            }
+            // Update tracked value
             this.trackedValue = newValue;
             context.onChange(newValue);
         };
@@ -5343,6 +5478,11 @@ class NileCodeEditor {
         this.expandButton = undefined;
         this.context = undefined;
         this.expandButtonClicked = false;
+        this.syncingFromDialog = false;
+        this.trackedValue = null;
+        this.userEditedInline = false;
+        this.dialogOriginalValue = '';
+        this.dialogCurrentValue = '';
     }
     focus() {
         var _a;