@aquera/ngx-smart-table 0.0.17-patch-0.5 → 0.0.17-patch-0.6

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

@@ -4890,6 +4890,299 @@ class NileDatePickerEditor {
     }
 }
 
+/**
+ * Custom editor using NileChip from @aquera/nile-elements
+ * Renders the chip input in a floating popover below the cell to avoid row height mismatch.
+ *
+ * @see https://nile.aqueralabs.com/1.6.3/chip?theme=enterprise
+ */
+let chipStylesInjected = false;
+function injectChipStyles() {
+    if (chipStylesInjected)
+        return;
+    chipStylesInjected = true;
+    const styleId = 'nile-chip-editor-styles';
+    if (document.getElementById(styleId))
+        return;
+    const style = document.createElement('style');
+    style.id = styleId;
+    style.textContent = `
+    .st-chip-popover {
+      position: fixed;
+      z-index: 10000;
+      background: var(--nile-colors-white-base, #fff);
+      border: 1px solid var(--nile-colors-neutral-200, #e2e8f0);
+      border-radius: 6px;
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+      padding: 8px;
+      box-sizing: border-box;
+      max-height: 200px;
+      overflow-y: auto;
+    }
+    .st-chip-popover nile-chip {
+      width: 100%;
+    }
+    .st-chip-popover nile-chip::part(base) {
+      border: none !important;
+      box-shadow: none !important;
+      min-height: 32px;
+    }
+    .st-chip-popover nile-chip::part(input) {
+      font-size: var(--nile-font-size-small, 13px);
+    }
+  `;
+    document.head.appendChild(style);
+}
+/**
+ * Custom editor that uses NileChip (tag input) component.
+ * Renders in a floating popover below the cell to avoid expanding row height.
+ *
+ * Cell value is expected to be `string[]` (array of tag strings).
+ */
+class NileChipEditor {
+    constructor(options) {
+        this.options = options;
+        this.acceptsInitialKeypress = false;
+        this.eventListeners = [];
+        this.trackedValues = [];
+    }
+    edit(context) {
+        if (!context.container) {
+            console.warn('NileChipEditor requires a container element');
+            return;
+        }
+        injectChipStyles();
+        this.cellContainer = context.container;
+        // Create the floating popover
+        this.popover = document.createElement('div');
+        this.popover.className = 'st-chip-popover';
+        // Create nile-chip inside the popover
+        this.chip = document.createElement('nile-chip');
+        this.chip.className = 'st-cell-editor st-nile-chip-editor';
+        this.setInitialValue(context.value);
+        this.applyOptions();
+        this.popover.appendChild(this.chip);
+        // Apply custom max-height if provided
+        if (this.options?.popoverMaxHeight) {
+            this.popover.style.maxHeight = `${this.options.popoverMaxHeight}px`;
+        }
+        // Append popover to body and position it
+        document.body.appendChild(this.popover);
+        this.positionPopover();
+        this.setupEventListeners(context);
+        if (this.options?.autoFocus !== false) {
+            setTimeout(() => {
+                try {
+                    this.chip?.focus();
+                }
+                catch { /* ignore */ }
+            }, 0);
+        }
+    }
+    positionPopover() {
+        if (!this.popover || !this.cellContainer)
+            return;
+        const rect = this.cellContainer.getBoundingClientRect();
+        const minWidth = this.options?.popoverMinWidth ?? rect.width;
+        const popoverWidth = Math.max(minWidth, rect.width);
+        this.popover.style.top = `${rect.bottom + 2}px`;
+        this.popover.style.left = `${rect.left}px`;
+        this.popover.style.width = `${popoverWidth}px`;
+        // After rendering, check if it goes off-screen bottom and flip above if needed
+        requestAnimationFrame(() => {
+            if (!this.popover)
+                return;
+            const popRect = this.popover.getBoundingClientRect();
+            if (popRect.bottom > window.innerHeight) {
+                this.popover.style.top = `${rect.top - popRect.height - 2}px`;
+            }
+        });
+    }
+    setInitialValue(value) {
+        if (!this.chip)
+            return;
+        if (Array.isArray(value)) {
+            this.trackedValues = [...value];
+            this.chip.value = this.trackedValues;
+        }
+        else if (typeof value === 'string' && value) {
+            this.trackedValues = [value];
+            this.chip.value = this.trackedValues;
+        }
+        else {
+            this.trackedValues = [];
+            this.chip.value = [];
+        }
+    }
+    applyOptions() {
+        if (!this.chip || !this.options)
+            return;
+        if (this.options.placeholder) {
+            this.chip.placeholder = this.options.placeholder;
+        }
+        if (this.options.label) {
+            this.chip.label = this.options.label;
+        }
+        if (this.options.helpText) {
+            this.chip.helpText = this.options.helpText;
+        }
+        if (this.options.disabled !== undefined) {
+            this.chip.disabled = this.options.disabled;
+        }
+        if (this.options.readonly !== undefined) {
+            this.chip.readonly = this.options.readonly;
+        }
+        if (this.options.acceptUserInput !== undefined) {
+            this.chip.acceptUserInput = this.options.acceptUserInput;
+        }
+        if (this.options.noDuplicates !== undefined) {
+            this.chip.noDuplicates = this.options.noDuplicates;
+        }
+        if (this.options.clearable !== undefined) {
+            this.chip.clearable = this.options.clearable;
+        }
+        if (this.options.noWrap !== undefined) {
+            this.chip.noWrap = this.options.noWrap;
+        }
+        if (this.options.noAutoComplete !== undefined) {
+            this.chip.noAutoComplete = this.options.noAutoComplete;
+        }
+        if (this.options.enableVirtualScroll !== undefined) {
+            this.chip.enableVirtualScroll = this.options.enableVirtualScroll;
+        }
+        if (this.options.openDropdownOnFocus !== undefined) {
+            this.chip.openDropdownOnFocus = this.options.openDropdownOnFocus;
+        }
+        if (this.options.loading !== undefined) {
+            this.chip.loading = this.options.loading;
+        }
+        // Visual states
+        if (this.options.warning !== undefined) {
+            this.chip.warning = this.options.warning;
+        }
+        if (this.options.error !== undefined) {
+            this.chip.error = this.options.error;
+        }
+        if (this.options.success !== undefined) {
+            this.chip.success = this.options.success;
+        }
+        if (this.options.errorMessage) {
+            this.chip.errorMessage = this.options.errorMessage;
+        }
+        if (this.options.errorIndexes) {
+            this.chip.errorIndexes = this.options.errorIndexes;
+        }
+        // Autocomplete options
+        if (this.options.autoCompleteOptions) {
+            const opts = this.options.autoCompleteOptions;
+            const stringOpts = opts.map(o => typeof o === 'string' ? o : (o.label ?? o.value));
+            this.chip.autoCompleteOptions = stringOpts;
+        }
+        if (this.options.filterFunction) {
+            this.chip.filterFunction = this.options.filterFunction;
+        }
+        if (this.options.renderItemFunction) {
+            this.chip.renderItemFunction = this.options.renderItemFunction;
+        }
+    }
+    addListener(element, event, handler, capture) {
+        element.addEventListener(event, handler, capture);
+        this.eventListeners.push({ element, event, handler, capture });
+    }
+    setupEventListeners(context) {
+        if (!this.chip)
+            return;
+        // Track chip changes
+        this.addListener(this.chip, 'nile-chip-change', (e) => {
+            const detail = e.detail;
+            const newValue = Array.isArray(detail?.value) ? [...detail.value] : (this.chip?.value ? [...this.chip.value] : []);
+            this.trackedValues = newValue;
+            context.onChange(newValue);
+        });
+        // Keyboard handling on the chip element
+        this.addListener(this.chip, 'keydown', (e) => {
+            const keyEvent = e;
+            if (keyEvent.key === 'Enter') {
+                keyEvent.stopPropagation();
+            }
+            else if (keyEvent.key === 'Escape') {
+                keyEvent.preventDefault();
+                keyEvent.stopPropagation();
+                context.onCancel();
+            }
+            else if (keyEvent.key === 'Tab') {
+                keyEvent.preventDefault();
+                keyEvent.stopPropagation();
+                context.onSave(this.getCurrentValue());
+            }
+        });
+        // Click-outside: save when clicking anywhere outside the popover
+        let saveTriggered = false;
+        const mousedownHandler = (e) => {
+            if (saveTriggered)
+                return;
+            if (!this.popover)
+                return;
+            const path = e.composedPath();
+            for (const el of path) {
+                if (el === this.popover)
+                    return;
+                if (el === this.chip)
+                    return;
+                if (el instanceof HTMLElement) {
+                    if (el.tagName?.toLowerCase() === 'nile-chip')
+                        return;
+                    if (el.className && typeof el.className === 'string' && el.className.includes('nile-chip'))
+                        return;
+                }
+            }
+            saveTriggered = true;
+            context.onSave(this.getCurrentValue());
+        };
+        document.addEventListener('mousedown', mousedownHandler, true);
+        this._documentMousedownHandler = mousedownHandler;
+        // Reposition on scroll/resize so popover stays aligned with the cell
+        const reposition = () => this.positionPopover();
+        this.addListener(window, 'resize', reposition);
+        this.addListener(window, 'scroll', reposition, true);
+    }
+    destroy() {
+        // Remove document mousedown handler
+        if (this._documentMousedownHandler) {
+            document.removeEventListener('mousedown', this._documentMousedownHandler, true);
+            delete this._documentMousedownHandler;
+        }
+        // Remove all tracked listeners
+        for (const { element, event, handler, capture } of this.eventListeners) {
+            element.removeEventListener(event, handler, capture);
+        }
+        this.eventListeners = [];
+        // Remove the popover from the DOM
+        if (this.popover) {
+            this.popover.remove();
+            this.popover = undefined;
+        }
+        this.chip = undefined;
+        this.cellContainer = undefined;
+        this.trackedValues = [];
+    }
+    focus() {
+        try {
+            this.chip?.focus();
+        }
+        catch { /* ignore */ }
+    }
+    getCurrentValue() {
+        if (this.trackedValues.length > 0) {
+            return [...this.trackedValues];
+        }
+        if (!this.chip)
+            return [];
+        const val = this.chip.value;
+        return Array.isArray(val) ? [...val] : [];
+    }
+}
+
 /**
  * Custom editor using NileCodeEditor from @aquera/nile-elements
  * This provides code editing capabilities with syntax highlighting for table cells
@@ -5031,7 +5324,7 @@ class NileCodeEditor {
         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
+        this.dialogCurrentValue = null; // Track current value in dialog
     }
     edit(context) {
         if (!context.container) {
@@ -5306,7 +5599,7 @@ class NileCodeEditor {
      */
     getDialogEditorValue() {
         // Use tracked value from change events (most reliable)
-        if (this.dialogCurrentValue) {
+        if (this.dialogCurrentValue !== null && this.dialogCurrentValue !== undefined) {
             return this.dialogCurrentValue.replace(/\n+$/, '');
         }
         if (!this.dialogEditor)
@@ -5335,10 +5628,9 @@ class NileCodeEditor {
     applyDialogChanges() {
         if (!this.dialogOpen)
             return;
-        // Get the value from dialog editor - try multiple sources
+        // Always read live dialog editor state to avoid stale tracked values from debounced updates
         let dialogValue = this.dialogCurrentValue;
-        // If no tracked value, try reading directly from dialog editor
-        if (!dialogValue && this.dialogEditor) {
+        if (this.dialogEditor) {
             try {
                 const shadowRoot = this.dialogEditor.shadowRoot;
                 if (shadowRoot) {
@@ -5352,12 +5644,12 @@ class NileCodeEditor {
                 // Fall through
             }
             // Fallback to value property
-            if (!dialogValue) {
+            if (dialogValue === null || dialogValue === undefined) {
                 dialogValue = this.dialogEditor.value ?? '';
             }
         }
         // Strip trailing newlines
-        dialogValue = (dialogValue || '').replace(/\n+$/, '');
+        dialogValue = (dialogValue ?? '').replace(/\n+$/, '');
         // Update tracked value and inline editor
         this.trackedValue = dialogValue;
         this.userEditedInline = false;
@@ -5399,7 +5691,7 @@ class NileCodeEditor {
      */
     closeDialogUI() {
         this.dialogOpen = false;
-        this.dialogCurrentValue = '';
+        this.dialogCurrentValue = null;
         if (this.dialog) {
             this.dialog.open = false;
             const dialogRef = this.dialog;
@@ -5644,7 +5936,7 @@ class NileCodeEditor {
         this.trackedValue = null;
         this.userEditedInline = false;
         this.dialogOriginalValue = '';
-        this.dialogCurrentValue = '';
+        this.dialogCurrentValue = null;
     }
     focus() {
         this.editor?.focus();
@@ -13350,5 +13642,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, 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, 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