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

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

@@ -4781,11 +4781,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;
@@ -4793,19 +4795,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;
@@ -4818,12 +4832,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;
@@ -4844,13 +4861,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%;
@@ -4859,14 +4885,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);
@@ -4883,6 +4901,10 @@ class NileCodeEditor {
         this.dialogOpen = false;
         this.expandButtonClicked = false;
         this.trackedValue = null;
+        this.syncingFromDialog = false; // Flag to prevent inline editor from overwriting multiline content
+        this.userEditedInline = false; // Flag to track if user has typed in inline editor
+        this.dialogOriginalValue = ''; // Store original value when dialog opens
+        this.dialogCurrentValue = ''; // Track current value in dialog
     }
     edit(context) {
         if (!context.container) {
@@ -4890,7 +4912,10 @@ class NileCodeEditor {
             return;
         }
         this.context = context;
-        this.trackedValue = null;
+        // Initialize tracked value from context
+        this.trackedValue = String(context.value ?? '');
+        this.syncingFromDialog = false;
+        this.userEditedInline = false;
         // Inject global styles once
         injectCodeEditorStyles();
         // Check if we should show expand button (default: true)
@@ -4910,6 +4935,11 @@ class NileCodeEditor {
             this.editor.style.height = '100%';
             this.editor.style.boxSizing = 'border-box';
             this.editor.noborder = this.options?.noborder !== false;
+            // Enable multiline by default for inline editor to support paste and multiline content
+            this.editor.multiline = this.options?.multiline !== false;
+            this.editor.hasScroller = true;
+            // No line numbers for inline editor
+            this.editor.lineNumbers = false;
             editorContainer.appendChild(this.editor);
             this.wrapper.appendChild(editorContainer);
             // Create expand button
@@ -4943,6 +4973,11 @@ class NileCodeEditor {
             this.editor.style.height = '100%';
             this.editor.style.boxSizing = 'border-box';
             this.editor.noborder = this.options?.noborder !== false;
+            // Enable multiline by default for inline editor to support paste and multiline content
+            this.editor.multiline = this.options?.multiline !== false;
+            this.editor.hasScroller = true;
+            // No line numbers for inline editor
+            this.editor.lineNumbers = false;
             // Clear container and append editor
             context.container.innerHTML = '';
             context.container.appendChild(this.editor);
@@ -4993,8 +5028,17 @@ class NileCodeEditor {
     /**
      * Read the live value directly from CodeMirror's internal state,
      * bypassing debounced nile-change events and the possibly-stale .value property.
+     *
+     * Priority order:
+     * 1. trackedValue - always up to date from change events
+     * 2. CodeMirror internal state - for real-time reading
+     * 3. editor.value property - fallback
      */
     getLiveEditorValue() {
+        // Use tracked value if available (updated by change events)
+        if (this.trackedValue !== null) {
+            return this.trackedValue;
+        }
         if (!this.editor)
             return '';
         try {
@@ -5009,8 +5053,6 @@ class NileCodeEditor {
         catch {
             // Fall through to other methods
         }
-        if (this.trackedValue !== null)
-            return this.trackedValue;
         return this.editor.value ?? '';
     }
     /**
@@ -5021,6 +5063,8 @@ class NileCodeEditor {
             return;
         this.dialogOpen = true;
         this.expandButtonClicked = false; // Reset flag now that dialog is opening
+        // Store original value for cancel functionality
+        this.dialogOriginalValue = this.getLiveEditorValue();
         // Create dialog with configurable dimensions
         const dialogWidth = this.options?.dialogWidth || '600px';
         const dialogMaxHeight = this.options?.dialogMaxHeight || '80vh';
@@ -5031,26 +5075,26 @@ class NileCodeEditor {
         this.dialog.label = dialogTitle;
         this.dialog.style.setProperty('--width', dialogWidth);
         this.dialog.style.setProperty('--max-height', dialogMaxHeight);
-        // Create dialog content
+        // Create dialog content wrapper - flex column to handle fixed header/footer
+        const contentWrapper = document.createElement('div');
+        contentWrapper.style.display = 'flex';
+        contentWrapper.style.flexDirection = 'column';
+        contentWrapper.style.height = `calc(${dialogMaxHeight} - 60px)`; // Account for dialog header
+        contentWrapper.style.maxHeight = `calc(${dialogMaxHeight} - 60px)`;
+        // Create editor content area - this is the scrollable part
         const content = document.createElement('div');
         content.style.padding = '16px';
-        content.style.maxHeight = `calc(${dialogMaxHeight} - 80px)`;
+        content.style.paddingBottom = '8px';
+        content.style.flex = '1';
         content.style.overflow = 'auto';
+        content.style.minHeight = '0'; // Important for flex shrinking
         // Create full editor
         this.dialogEditor = document.createElement('nile-code-editor');
-        const minLines = this.options?.dialogMinLines ?? 20;
-        const currentValue = this.getLiveEditorValue();
-        const currentLineCount = (currentValue.match(/\n/g) || []).length + 1;
-        const paddingLines = Math.max(0, minLines - currentLineCount);
-        this.dialogEditor.value = currentValue + '\n'.repeat(paddingLines);
+        this.dialogEditor.value = this.dialogOriginalValue;
         this.dialogEditor.multiline = true;
         this.dialogEditor.lineNumbersMultiline = true;
         this.dialogEditor.hasScroller = true;
-        const lineHeightPx = 20;
-        const minHeightFromLines = `${minLines * lineHeightPx}px`;
-        this.dialogEditor.style.minHeight = `max(${dialogEditorHeight}, ${minHeightFromLines})`;
-        this.dialogEditor.style.maxHeight = `calc(${dialogMaxHeight} - 120px)`;
-        content.style.setProperty('--dialog-editor-min-height', `max(${dialogEditorHeight}, ${minHeightFromLines})`);
+        this.dialogEditor.style.minHeight = dialogEditorHeight;
         // Apply same options to dialog editor
         if (this.options?.language) {
             this.dialogEditor.language = this.options.language;
@@ -5077,38 +5121,44 @@ class NileCodeEditor {
             this.dialogEditor.customThemeCSS = this.options.customThemeCSS;
         }
         this.dialogEditor.expandable = false;
-        // Real-time sync: Update cell editor whenever dialog editor changes
+        // Initialize dialog current value
+        this.dialogCurrentValue = this.dialogOriginalValue;
+        // Track changes in dialog editor
         this.dialogEditor.addEventListener('nile-change', (e) => {
-            const dialogValue = e.detail?.value || '';
-            this.trackedValue = dialogValue;
-            if (this.editor) {
-                this.editor.value = dialogValue;
-            }
-            if (this.context) {
-                this.context.onChange(dialogValue);
-            }
+            this.dialogCurrentValue = e.detail?.value ?? '';
         });
         content.appendChild(this.dialogEditor);
-        this.dialog.appendChild(content);
-        // Handle dialog close events (clicking X button - stay in edit mode)
+        contentWrapper.appendChild(content);
+        // Create footer with Ok button - fixed at bottom
+        const footer = document.createElement('div');
+        footer.style.display = 'flex';
+        footer.style.justifyContent = 'flex-end';
+        footer.style.padding = '12px 16px';
+        footer.style.borderTop = '1px solid var(--nile-color-neutral-200, #e5e7eb)';
+        footer.style.gap = '8px';
+        footer.style.flexShrink = '0'; // Prevent footer from shrinking
+        footer.style.backgroundColor = 'var(--nile-color-neutral-0, #ffffff)';
+        const okButton = document.createElement('nile-button');
+        okButton.setAttribute('variant', 'primary');
+        okButton.textContent = 'Ok';
+        okButton.addEventListener('click', () => {
+            this.applyDialogChanges();
+        });
+        footer.appendChild(okButton);
+        contentWrapper.appendChild(footer);
+        this.dialog.appendChild(contentWrapper);
+        // Handle dialog close events (clicking X button - cancel changes)
         this.dialog.addEventListener('nile-request-close', (e) => {
-            const customEvent = e;
-            // Check if close was triggered by overlay click (clicking outside)
-            if (customEvent.detail?.source === 'overlay') {
-                // Clicking outside the dialog - save and exit edit mode
-                this.closeDialog(true);
-            }
-            else {
-                // Clicking X button - stay in edit mode
-                this.closeDialog(false);
-            }
+            e.preventDefault();
+            // X button or overlay click - cancel changes
+            this.cancelDialogChanges();
         });
-        // Handle Escape key in dialog - stay in edit mode
+        // Handle Escape key in dialog - cancel changes
         this.dialog.addEventListener('keydown', (e) => {
             if (e.key === 'Escape') {
                 e.preventDefault();
                 e.stopPropagation();
-                this.closeDialog(false);
+                this.cancelDialogChanges();
             }
         });
         // Append to body and show
@@ -5125,34 +5175,113 @@ class NileCodeEditor {
         }, 0);
     }
     /**
-     * Close the dialog and optionally save/exit edit mode
+     * Get the current value from the dialog editor
      */
-    closeDialog(saveAndExit = false) {
+    getDialogEditorValue() {
+        // Use tracked value from change events (most reliable)
+        if (this.dialogCurrentValue) {
+            return this.dialogCurrentValue.replace(/\n+$/, '');
+        }
+        if (!this.dialogEditor)
+            return this.dialogOriginalValue;
+        // Try to get value from CodeMirror's internal state
+        try {
+            const shadowRoot = this.dialogEditor.shadowRoot;
+            if (shadowRoot) {
+                const cmEditor = shadowRoot.querySelector('.cm-editor');
+                if (cmEditor?.cmView?.view) {
+                    const value = cmEditor.cmView.view.state.doc.toString();
+                    return value.replace(/\n+$/, '');
+                }
+            }
+        }
+        catch {
+            // Fall through to other methods
+        }
+        // Fallback to value property
+        const value = this.dialogEditor.value;
+        return (value ?? '').replace(/\n+$/, '');
+    }
+    /**
+     * Apply changes from dialog and close it
+     */
+    applyDialogChanges() {
         if (!this.dialogOpen)
             return;
-        // Reset flag immediately so document click handler works
+        // Get the value from dialog editor - try multiple sources
+        let dialogValue = this.dialogCurrentValue;
+        // If no tracked value, try reading directly from dialog editor
+        if (!dialogValue && this.dialogEditor) {
+            try {
+                const shadowRoot = this.dialogEditor.shadowRoot;
+                if (shadowRoot) {
+                    const cmEditor = shadowRoot.querySelector('.cm-editor');
+                    if (cmEditor?.cmView?.view) {
+                        dialogValue = cmEditor.cmView.view.state.doc.toString();
+                    }
+                }
+            }
+            catch {
+                // Fall through
+            }
+            // Fallback to value property
+            if (!dialogValue) {
+                dialogValue = this.dialogEditor.value ?? '';
+            }
+        }
+        // Strip trailing newlines
+        dialogValue = (dialogValue || '').replace(/\n+$/, '');
+        // Update tracked value and inline editor
+        this.trackedValue = dialogValue;
+        this.userEditedInline = false;
+        this.syncingFromDialog = true;
+        if (this.editor) {
+            this.editor.value = dialogValue;
+        }
+        setTimeout(() => {
+            this.syncingFromDialog = false;
+        }, 0);
+        // Notify context of the change
+        if (this.context) {
+            this.context.onChange(dialogValue);
+        }
+        // Close dialog
+        this.closeDialogUI();
+        // Refocus the cell editor to stay in edit mode
+        setTimeout(() => {
+            this.focusEditor();
+        }, 50);
+    }
+    /**
+     * Cancel dialog changes and revert to original value
+     */
+    cancelDialogChanges() {
+        if (!this.dialogOpen)
+            return;
+        // Revert to original value (don't change anything)
+        // trackedValue and inline editor remain as they were before dialog opened
+        // Close dialog
+        this.closeDialogUI();
+        // Refocus the cell editor to stay in edit mode
+        setTimeout(() => {
+            this.focusEditor();
+        }, 50);
+    }
+    /**
+     * Close and remove the dialog UI
+     */
+    closeDialogUI() {
         this.dialogOpen = false;
-        // Close and remove dialog
+        this.dialogCurrentValue = '';
         if (this.dialog) {
             this.dialog.open = false;
             const dialogRef = this.dialog;
-            const dialogEditorRef = this.dialogEditor;
             this.dialog = undefined;
             this.dialogEditor = undefined;
             // Remove from DOM after animation
             setTimeout(() => {
                 dialogRef?.remove();
             }, 200);
-            if (saveAndExit && this.context) {
-                // Save and exit edit mode
-                this.context.onSave(this.getCurrentValue());
-            }
-            else {
-                // Refocus the cell editor to stay in edit mode
-                setTimeout(() => {
-                    this.focusEditor();
-                }, 50);
-            }
         }
     }
     /**
@@ -5314,6 +5443,11 @@ class NileCodeEditor {
         const changeHandler = (e) => {
             const customEvent = e;
             const newValue = customEvent.detail?.value ?? '';
+            // Don't process if we're syncing from dialog (prevents feedback loop)
+            if (this.syncingFromDialog) {
+                return;
+            }
+            // Update tracked value
             this.trackedValue = newValue;
             context.onChange(newValue);
         };
@@ -5379,6 +5513,11 @@ class NileCodeEditor {
         this.expandButton = undefined;
         this.context = undefined;
         this.expandButtonClicked = false;
+        this.syncingFromDialog = false;
+        this.trackedValue = null;
+        this.userEditedInline = false;
+        this.dialogOriginalValue = '';
+        this.dialogCurrentValue = '';
     }
     focus() {
         this.editor?.focus();