@aquera/ngx-smart-table 0.0.16-alpha → 0.0.17

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

@@ -3678,6 +3678,7 @@ class NileSelectEditor {
         this.acceptsInitialKeypress = false;
         this.eventListeners = [];
         this.currentOptions = [];
+        this.trackedValues = []; // Track selected values for virtual scroll
         // Handle Observable options
         if (isObservable(options.options)) {
             this.optionsSubscription = options.options.subscribe(opts => {
@@ -3721,13 +3722,15 @@ class NileSelectEditor {
         // Clear container and append select
         context.container.innerHTML = '';
         context.container.appendChild(this.select);
-        // Focus and auto-open after render
+        // Focus the select after render
         setTimeout(() => {
-            if (this.select) {
-                this.select.focus();
-                this.select.open = true;
+            try {
+                this.select?.focus();
             }
-        }, 0);
+            catch (e) {
+                // Ignore errors
+            }
+        }, 50);
     }
     /**
      * Set the initial value for the select
@@ -3739,17 +3742,21 @@ class NileSelectEditor {
             // Handle multiple selection - value should be array
             if (Array.isArray(value)) {
                 this.select.value = value;
+                this.trackedValues = [...value]; // Initialize tracked values
             }
             else if (value) {
                 this.select.value = [String(value)];
+                this.trackedValues = [String(value)];
             }
             else {
                 this.select.value = [];
+                this.trackedValues = [];
             }
         }
         else {
             // Handle single selection
             this.select.value = value ? String(value) : '';
+            this.trackedValues = value ? [String(value)] : [];
         }
     }
     /**
@@ -3833,12 +3840,17 @@ class NileSelectEditor {
     updateOptions() {
         if (!this.select)
             return;
-        // Clear existing options
-        while (this.select.firstChild) {
-            this.select.removeChild(this.select.firstChild);
+        // For virtual scroll mode, just update the data property (no DOM children to clear)
+        if (this.options.enableVirtualScroll) {
+            this.createAndAppendOptions(this.currentOptions);
+        }
+        else {
+            // Standard mode: clear existing nile-option elements first
+            while (this.select.firstChild) {
+                this.select.removeChild(this.select.firstChild);
+            }
+            this.createAndAppendOptions(this.currentOptions);
         }
-        // Re-append with new options
-        this.createAndAppendOptions(this.currentOptions);
         // Trigger update on the web component
         if (this.select.requestUpdate) {
             this.select.requestUpdate();
@@ -3846,11 +3858,22 @@ class NileSelectEditor {
     }
     /**
      * Create NileOption elements and append them to the select
+     * When enableVirtualScroll is true, uses data property instead of DOM elements
+     * @see https://nile.aqueralabs.com/select-virtual?theme=enterprise
      * @param options - The options to render
      */
     createAndAppendOptions(options) {
         if (!this.select)
             return;
+        // Virtual scroll mode: use data property instead of DOM elements
+        if (this.options.enableVirtualScroll) {
+            const virtualData = options.map(opt => typeof opt === 'string'
+                ? { value: opt, label: opt }
+                : { value: opt.value, label: opt.label, disabled: opt.disabled });
+            this.select.data = virtualData;
+            return;
+        }
+        // Standard mode: create nile-option elements
         options.forEach(opt => {
             const nileOption = document.createElement('nile-option');
             // Auto-detect format: string or SelectOption object
@@ -3899,15 +3922,37 @@ class NileSelectEditor {
         if (!this.options.multiple) {
             const changeHandler = (e) => {
                 const customEvent = e;
-                if (validateOnSave && !this.select?.checkValidity()) {
-                    this.select?.reportValidity();
-                    return;
+                try {
+                    if (validateOnSave && this.select && !this.select.checkValidity()) {
+                        this.select.reportValidity();
+                        return;
+                    }
+                }
+                catch (err) {
+                    // Ignore validation errors - nile-select internals may not be ready
                 }
                 context.onSave(this.parseValue(customEvent.detail.value));
             };
             this.select.addEventListener('nile-change', changeHandler);
             this.eventListeners.push({ event: 'nile-change', handler: changeHandler });
         }
+        // For multi-select, track value changes (needed for virtual scroll where value property doesn't update)
+        if (this.options.multiple) {
+            const trackValueHandler = (e) => {
+                const customEvent = e;
+                const newValue = customEvent.detail?.value;
+                if (newValue !== undefined) {
+                    if (Array.isArray(newValue)) {
+                        this.trackedValues = [...newValue];
+                    }
+                    else {
+                        this.trackedValues = newValue ? [newValue] : [];
+                    }
+                }
+            };
+            this.select.addEventListener('nile-change', trackValueHandler);
+            this.eventListeners.push({ event: 'nile-change', handler: trackValueHandler });
+        }
         // Track if save was already triggered (to prevent double save)
         let saveTriggered = false;
         // Use mousedown on document to detect clicks outside the select and portal
@@ -3916,23 +3961,47 @@ class NileSelectEditor {
                 return;
             if (!this.select)
                 return;
-            const target = e.target;
-            // Check if click is inside the select element
-            if (this.select.contains(target)) {
-                return;
+            // Use composedPath to traverse shadow DOM boundaries
+            const path = e.composedPath();
+            // Check if click is inside the select element or any nile-select related elements
+            for (const element of path) {
+                if (!(element instanceof HTMLElement))
+                    continue;
+                // Check if it's our select element
+                if (element === this.select) {
+                    return;
+                }
+                // Check for nile-select portals (various class names)
+                if (element.classList?.contains('nile-select-portal-append') ||
+                    element.classList?.contains('select__listbox') ||
+                    element.classList?.contains('select__options') ||
+                    element.tagName?.toLowerCase() === 'nile-option' ||
+                    element.tagName?.toLowerCase() === 'nile-select') {
+                    return;
+                }
+                // Check for any element with nile-select in its class
+                if (element.className && typeof element.className === 'string' &&
+                    element.className.includes('nile-select')) {
+                    return;
+                }
             }
-            // Check if click is inside any nile-select portal
-            const portals = document.querySelectorAll('.nile-select-portal-append');
+            // Also check portal containers directly
+            const portals = document.querySelectorAll('.nile-select-portal-append, [class*="select__listbox"]');
             for (let i = 0; i < portals.length; i++) {
-                if (portals[i].contains(target)) {
+                if (portals[i].contains(e.target)) {
                     return;
                 }
             }
             // Click is outside - save and exit
             saveTriggered = true;
-            if (validateOnSave && !this.select?.checkValidity()) {
-                this.select?.reportValidity();
-                return;
+            try {
+                if (validateOnSave && this.select && !this.select.checkValidity()) {
+                    this.select.reportValidity();
+                    return;
+                }
+            }
+            catch (err) {
+                // Ignore validation errors - nile-select internals may not be ready
             }
             context.onSave(this.getCurrentValue());
         };
@@ -4000,19 +4069,29 @@ class NileSelectEditor {
         }
     }
     focus() {
-        this.select?.focus();
+        try {
+            this.select?.focus();
+        }
+        catch (e) {
+            // Ignore focus errors - nile-select internals may not be ready
+        }
     }
     getCurrentValue() {
         if (!this.select) {
             return (this.options.multiple ? [] : '');
         }
-        const value = this.select.value;
-        // Handle multiple selection
+        // For multi-select, prefer tracked values (more reliable for virtual scroll)
         if (this.options.multiple) {
-            return (Array.isArray(value) ? value : [value]);
+            // Use tracked values if available, otherwise try component value
+            let values = this.trackedValues.length > 0 ? this.trackedValues : this.select.value;
+            if (Array.isArray(values)) {
+                return values.filter((v) => v !== undefined && v !== null && v !== '');
+            }
+            return (values ? [values] : []);
         }
-        // Handle single selection
-        return (Array.isArray(value) ? (value.length > 0 ? value[0] : '') : value);
+        // For single-select, use tracked values or component value
+        let value = this.trackedValues.length > 0 ? this.trackedValues[0] : this.select.value;
+        return (Array.isArray(value) ? (value.length > 0 ? value[0] : '') : (value || ''));
     }
 }