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

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

@@ -2289,6 +2289,122 @@ class WorkbookState {
     }
 }
 
+/**
+ * Convert an LDAP Distinguished Name (DN) string to a human-readable path.
+ *
+ * @example
+ * "OU=Engineering,OU=India,DC=company,DC=com"
+ *   → "Engineering / India (company.com)"
+ *
+ * "CN=John Smith,OU=Admins,OU=Engineering,DC=company,DC=com"
+ *   → "John Smith / Admins / Engineering (company.com)"
+ *
+ * "OU=R\\,D,OU=Teams,DC=example,DC=org"
+ *   → "R,D / Teams (example.org)"
+ */
+function dnToHumanReadable(dn) {
+    if (!/^\s*\S/.test(dn)) {
+        return '';
+    }
+    const pathParts = [];
+    const domainParts = [];
+    for (const match of dn.matchAll(/(?:^|(?<!\\),)\s*(CN|OU|DC)=((?:\\.|[^,])+)/g)) {
+        const key = match[1];
+        const value = match[2]
+            .trim()
+            .replace(/\\([,\\#+<>;"=])/g, '$1');
+        if (/^(?:CN|OU)$/.test(key)) {
+            pathParts.push(value);
+        }
+        else if (/^DC$/.test(key)) {
+            domainParts.push(value);
+        }
+    }
+    const path = pathParts.join(' / ');
+    const domain = domainParts.join('.');
+    return path && domain
+        ? `${path} (${domain})`
+        : path || domain || dn;
+}
+/**
+ * Cell formatter that converts LDAP Distinguished Name (DN) strings
+ * into human-readable OU paths with optional domain suffix.
+ *
+ * @example
+ * // In column config:
+ * formatter: new OUFormatter()
+ *
+ * // With options:
+ * formatter: new OUFormatter({ separator: ' > ', showDomain: false })
+ *
+ * // Handles arrays from multiselect:
+ * // ['OU=Eng,DC=co,DC=com', 'OU=HR,DC=co,DC=com'] → "Eng (co.com), HR (co.com)"
+ */
+class OUFormatter {
+    constructor(options) {
+        this.options = options;
+    }
+    format(value) {
+        if (Array.isArray(value)) {
+            return value
+                .map(v => this.formatSingle(v))
+                .filter(v => !!v)
+                .join(this.options?.arraySeparator ?? ', ');
+        }
+        return this.formatSingle(value);
+    }
+    formatSingle(value) {
+        if (value === null || value === undefined || typeof value !== 'string' || !/^\s*\S/.test(value)) {
+            return this.options?.emptyText ?? '';
+        }
+        const separator = this.options?.separator ?? ' / ';
+        const showDomain = this.options?.showDomain !== false;
+        const pathParts = [];
+        const domainParts = [];
+        for (const match of value.matchAll(/(?:^|(?<!\\),)\s*(CN|OU|DC)=((?:\\.|[^,])+)/g)) {
+            const key = match[1];
+            const val = match[2]
+                .trim()
+                .replace(/\\([,\\#+<>;"=])/g, '$1');
+            if (/^(?:CN|OU)$/.test(key)) {
+                pathParts.push(val);
+            }
+            else if (/^DC$/.test(key)) {
+                domainParts.push(val);
+            }
+        }
+        const path = pathParts.join(separator);
+        const domain = domainParts.join('.');
+        if (path && domain && showDomain)
+            return `${path} (${domain})`;
+        if (path)
+            return path;
+        if (domain && showDomain)
+            return domain;
+        return value;
+    }
+}
+
+const BUILTIN_FORMATTERS = {
+    ouFormatter: () => new OUFormatter(),
+};
+const customFormatters = {};
+/**
+ * Resolve a formatter by name. Looks up custom formatters first, then built-in.
+ * Returns undefined if the name is not registered.
+ */
+function resolveFormatter(name) {
+    const factory = customFormatters[name] ?? BUILTIN_FORMATTERS[name];
+    return factory ? factory() : undefined;
+}
+/**
+ * Register a custom formatter so it can be referenced by string name
+ * in column configs (e.g. `formatter: 'myFormatter'`).
+ */
+function registerFormatter(name, factory) {
+    customFormatters[name] = factory;
+}
+
 /**
  * Cell class - represents individual cell instances
  * Combines ColumnConfig (Flyweight) with CellState (unique per instance)
@@ -2353,17 +2469,22 @@ class Cell {
      * Render cell value as formatted string (delegates to formatter strategy)
      */
     render() {
-        if (!this.columnConfig.formatter) {
+        let formatter = this.columnConfig.formatter;
+        if (!formatter) {
             return String(this.state.value ?? '');
         }
-        if (this.columnConfig.formatter.formatWithContext) {
-            return this.columnConfig.formatter.formatWithContext(this.state.value, this.rowData, this.columnConfig.key);
+        if (typeof formatter === 'string') {
+            formatter = resolveFormatter(formatter);
+            if (!formatter) {
+                return String(this.state.value ?? '');
+            }
+        }
+        if (formatter.formatWithContext) {
+            return formatter.formatWithContext(this.state.value, this.rowData, this.columnConfig.key);
         }
-        // Ensure format method exists before calling it
-        if (this.columnConfig.formatter.format) {
-            return this.columnConfig.formatter.format(this.state.value);
+        if (formatter.format) {
+            return formatter.format(this.state.value);
         }
-        // Fallback if formatter exists but has no methods
         return String(this.state.value ?? '');
     }
     /**
@@ -2816,7 +2937,9 @@ class BaseColumnConfig {
         this.key = merged.key;
         this.header = merged.header;
         this.dataType = merged.dataType;
-        this.formatter = merged.formatter;
+        this.formatter = typeof merged.formatter === 'string'
+            ? resolveFormatter(merged.formatter)
+            : merged.formatter;
         this.validator = merged.validator;
         this.editor = merged.editor;
         this.parser = merged.parser;
@@ -2977,11 +3100,15 @@ class BaseColumnConfig {
      * Format value for display (can be overridden)
      */
     formatValue(value, rowData) {
-        if (this.formatter) {
-            if (this.formatter.formatWithContext && rowData) {
-                return this.formatter.formatWithContext(value, rowData, this.key);
+        let formatter = this.formatter;
+        if (typeof formatter === 'string') {
+            formatter = resolveFormatter(formatter);
+        }
+        if (formatter) {
+            if (formatter.formatWithContext && rowData) {
+                return formatter.formatWithContext(value, rowData, this.key);
             }
-            return this.formatter.format(value);
+            return formatter.format(value);
         }
         return String(value ?? '');
     }
@@ -4763,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
@@ -4904,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) {
@@ -5179,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)
@@ -5208,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) {
@@ -5225,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;
@@ -5272,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;
@@ -5517,7 +5936,7 @@ class NileCodeEditor {
         this.trackedValue = null;
         this.userEditedInline = false;
         this.dialogOriginalValue = '';
-        this.dialogCurrentValue = '';
+        this.dialogCurrentValue = null;
     }
     focus() {
         this.editor?.focus();
@@ -8826,7 +9245,7 @@ class StTableComponent {
         const columns = this.getActiveColumns();
         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 newCell = column.createCell(rowData, rowIndex);
             const oldCell = oldGrid?.[rowIndex]?.[colIndex];
             if (oldCell && oldCell.getColumnConfig().key === column.key) {
                 oldCell.setReplacement(newCell);
@@ -13223,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, 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, 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