@aquera/nile-elements 1.2.6-beta-1.0 → 1.2.6-beta-1.3

package/dist/src/nile-virtual-select/nile-virtual-select.js

@@ -115,7 +115,6 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
         this.searchValue = '';
         /** Enable search functionality */
         this.searchEnabled = false;
-        this.enableVisibilityEffect = false;
         /** Search input placeholder */
         this.internalSearchPlaceHolder = 'Search...';
         /** Disable local search filtering */
@@ -132,6 +131,8 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
         this.errorMessage = '';
         /** Sets the input to a warning state */
         this.warning = false;
+        this.enableVisibilityEffect = false;
+        this.enableTabClose = false;
         /** Sets the input to an error state */
         this.error = false;
         /** Sets the input to a success state */
@@ -187,9 +188,19 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
          */
         this.maxOptionsVisible = 3;
         this.oldMaxOptionsVisible = 1;
-        this.enableTabClose = false;
         this.showListbox = false;
         this.wasShowSelectedCheckedOnClose = false;
+        this.handleDocumentMouseDown = (event) => {
+            if (!this.open)
+                return;
+            const path = event.composedPath();
+            const hitSelf = path.includes(this);
+            const hitPopup = this.popup && path.includes(this.popup);
+            const hitPortalAppend = this.portal && this.portalManager.portalContainerElement && path.includes(this.portalManager.portalContainerElement);
+            if (!hitSelf && !hitPopup && !hitPortalAppend) {
+                this.hide();
+            }
+        };
         /** All active IntersectionObservers for visibility detection */
         this.anchorVisibilityObservers = [];
         /** Handles tab visibility (page hidden / tab switched) */
@@ -205,17 +216,6 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
                 });
             }
         };
-        this.handleDocumentMouseDown = (event) => {
-            if (!this.open)
-                return;
-            const path = event.composedPath();
-            const hitSelf = path.includes(this);
-            const hitPopup = this.popup && path.includes(this.popup);
-            const hitPortalAppend = this.portal && this.portalManager.portalContainerElement && path.includes(this.portalManager.portalContainerElement);
-            if (!hitSelf && !hitPopup && !hitPortalAppend) {
-                this.hide();
-            }
-        };
         /**
          * This is a workaround for an error in the Lit Labs virtualizer.
          * Since there are no specific guidelines available to fix the issue,
@@ -352,6 +352,58 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
         this.hasFocus = false;
         this.emit('nile-blur');
     }
+    handleDocumentFocusIn(event) {
+        if (!this.open)
+            return;
+        const path = event.composedPath();
+        const hitSelf = path.includes(this);
+        const hitPopup = this.popup && path.includes(this.popup);
+        const hitPortalAppend = this.portal && this.portalManager.portalContainerElement && path.includes(this.portalManager.portalContainerElement);
+        if (!hitSelf && !hitPopup && !hitPortalAppend) {
+            this.hide();
+        }
+    }
+    handleDocumentKeyDown(event) {
+        if (this.shouldIgnoreKeyPress(event)) {
+            return;
+        }
+        if (this.isEscapeKey(event)) {
+            this.handleEscapeKey(event);
+        }
+        if (this.isEnterOrSpaceKey(event)) {
+            this.handleEnterOrSpaceKey(event);
+        }
+    }
+    shouldIgnoreKeyPress(event) {
+        const target = event.target;
+        const isClearButton = target.closest('.select__clear') !== null;
+        const isIconButton = target.closest('nile-icon-button') !== null;
+        return isClearButton || isIconButton;
+    }
+    isEscapeKey(event) {
+        return event.key === 'Escape' && this.open;
+    }
+    handleEscapeKey(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.hide();
+        this.displayInput.focus({ preventScroll: true });
+    }
+    isEnterOrSpaceKey(event) {
+        return event.key === 'Enter' || event.key === ' ';
+    }
+    handleEnterOrSpaceKey(event) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        if (!this.open) {
+            this.show();
+            return;
+        }
+        if (!this.multiple) {
+            this.hide();
+            this.displayInput.focus({ preventScroll: true });
+        }
+    }
     /** Utility: find ALL scrollable ancestors (not just the nearest) */
     getScrollableAncestors(element) {
         const scrollables = [];
@@ -409,58 +461,6 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
         // Always remove listener to avoid stale callbacks
         document.removeEventListener('visibilitychange', this.handleDocumentVisibilityChange);
     }
-    handleDocumentFocusIn(event) {
-        if (!this.open)
-            return;
-        const path = event.composedPath();
-        const hitSelf = path.includes(this);
-        const hitPopup = this.popup && path.includes(this.popup);
-        const hitPortalAppend = this.portal && this.portalManager.portalContainerElement && path.includes(this.portalManager.portalContainerElement);
-        if (!hitSelf && !hitPopup && !hitPortalAppend) {
-            this.hide();
-        }
-    }
-    handleDocumentKeyDown(event) {
-        if (this.shouldIgnoreKeyPress(event)) {
-            return;
-        }
-        if (this.isEscapeKey(event)) {
-            this.handleEscapeKey(event);
-        }
-        if (this.isEnterOrSpaceKey(event)) {
-            this.handleEnterOrSpaceKey(event);
-        }
-    }
-    shouldIgnoreKeyPress(event) {
-        const target = event.target;
-        const isClearButton = target.closest('.select__clear') !== null;
-        const isIconButton = target.closest('nile-icon-button') !== null;
-        return isClearButton || isIconButton;
-    }
-    isEscapeKey(event) {
-        return event.key === 'Escape' && this.open;
-    }
-    handleEscapeKey(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.hide();
-        this.displayInput.focus({ preventScroll: true });
-    }
-    isEnterOrSpaceKey(event) {
-        return event.key === 'Enter' || event.key === ' ';
-    }
-    handleEnterOrSpaceKey(event) {
-        event.preventDefault();
-        event.stopImmediatePropagation();
-        if (!this.open) {
-            this.show();
-            return;
-        }
-        if (!this.multiple) {
-            this.hide();
-            this.displayInput.focus({ preventScroll: true });
-        }
-    }
     handleFooterClick(event) {
         event.stopPropagation();
         event.preventDefault();
@@ -648,6 +648,9 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
     }
     handleSearchChange(e) {
         this.searchValue = e.detail.value;
+        if (this.portal) {
+            this.portalManager.updatePortalAppendPosition();
+        }
         this.emit('nile-search', {
             query: this.searchValue,
             name: this.name
@@ -709,6 +712,19 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
     }
     filterVirtualOptions(searchValue) {
         const result = VirtualSelectSearchManager.filterVirtualOptions(searchValue, this.originalOptionItems, this.data, this.getDisplayText.bind(this), this.renderItemConfig?.getSearchText);
+        if (this.portal) {
+            this.portalManager.updatePortalAppendPosition();
+            this.updateComplete.then(() => {
+                requestAnimationFrame(() => {
+                    requestAnimationFrame(() => {
+                        this.resetScrollPosition();
+                    });
+                });
+            });
+        }
+        else {
+            this.resetScrollPosition();
+        }
         this.data = result.filteredItems;
         this.showNoResults = result.showNoResults;
         this.showSelected = false;
@@ -1298,19 +1314,42 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
             this.maxOptionsVisible = lastindex;
         }, 1);
     }
-    resetScrollPosition() {
-        this.updateComplete.then(() => {
-            if (this.virtualizedContainer && this.virtualizedContainer.isConnected) {
-                this.virtualizedContainer.scrollTop = 0;
-                const listbox = this.shadowRoot?.querySelector('.select__listbox');
-                if (listbox && listbox.isConnected) {
-                    listbox.scrollTop = 0;
+    async resetScrollPosition() {
+        await this.updateComplete;
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                let listbox = null;
+                if (this.portal && this.portalManager.portalContainerElement) {
+                    listbox = this.portalManager.portalContainerElement.querySelector('#listbox');
+                }
+                else {
+                    listbox = this.shadowRoot?.querySelector('#listbox');
+                }
+                if (!listbox || !listbox.isConnected)
+                    return;
+                listbox.scrollTop = 0;
+                const virtualized = listbox.querySelector('.virtualized');
+                if (virtualized && virtualized.isConnected) {
+                    const fewItems = this.data.length <= 5;
+                    if (fewItems) {
+                        virtualized.style.overflowY = 'hidden';
+                        virtualized.style.maxHeight = 'none';
+                        listbox.style.overflowY = 'hidden';
+                        listbox.style.maxHeight = 'fit-content';
+                    }
+                    else {
+                        virtualized.style.overflowY = 'auto';
+                        virtualized.style.maxHeight = '';
+                        listbox.style.overflowY = 'auto';
+                        listbox.style.maxHeight = '';
+                    }
+                    virtualized.scrollTop = 0;
                 }
-                const virtualizer = this.virtualizedContainer.querySelector('lit-virtualizer');
+                const virtualizer = listbox.querySelector('lit-virtualizer');
                 if (virtualizer && virtualizer.isConnected) {
                     virtualizer.scrollTop = 0;
                 }
-            }
+            });
         });
     }
 };
@@ -1377,9 +1416,6 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NileVirtualSelect.prototype, "searchEnabled", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: true })
-], NileVirtualSelect.prototype, "enableVisibilityEffect", void 0);
 __decorate([
     property({ attribute: 'internal-search-placeholder' })
 ], NileVirtualSelect.prototype, "internalSearchPlaceHolder", void 0);
@@ -1404,6 +1440,12 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], NileVirtualSelect.prototype, "warning", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: true })
+], NileVirtualSelect.prototype, "enableVisibilityEffect", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: true })
+], NileVirtualSelect.prototype, "enableTabClose", void 0);
 __decorate([
     property({ type: Boolean })
 ], NileVirtualSelect.prototype, "error", void 0);
@@ -1467,9 +1509,6 @@ __decorate([
 __decorate([
     state()
 ], NileVirtualSelect.prototype, "oldMaxOptionsVisible", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: true })
-], NileVirtualSelect.prototype, "enableTabClose", void 0);
 __decorate([
     state()
 ], NileVirtualSelect.prototype, "showListbox", void 0);