@aquera/nile-elements 0.1.75-beta-1.4 → 0.1.75-beta-1.5

package/dist/src/nile-virtual-select/nile-virtual-select.d.ts

@@ -8,8 +8,9 @@ import '../nile-icon';
 import '../nile-popup/nile-popup';
 import '../nile-tag/nile-tag';
 import '../nile-checkbox/nile-checkbox';
+import '../nile-loader/nile-loader';
 import NileElement from '../internal/nile-element';
-import type { CSSResultGroup, TemplateResult } from 'lit';
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import type { NileFormControl } from '../internal/nile-element';
 import type NilePopup from '../nile-popup/nile-popup';
 import type { VirtualOption, RenderItemConfig } from './types.js';
@@ -45,6 +46,10 @@ import type { VirtualOption, RenderItemConfig } from './types.js';
  * @event nile-hide - Emitted when the select's menu closes.
  * @event nile-after-hide - Emitted after the select's menu closes and all animations are complete.
  * @event nile-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+ * @event nile-search - Emitted when the user types in the search input. The event payload includes the search query for backend search functionality.
+ * @event nile-scroll - Emitted when the user scrolls within the virtualized container. The event payload includes scroll position information.
+ * @event nile-scroll-start - Emitted when the user starts scrolling within the virtualized container.
+ * @event nile-scroll-end - Emitted when the user stops scrolling and reaches the bottom of the virtualized container (debounced).
  *
  * @csspart form-control - The form control that wraps the label, input, and help text.
  * @csspart form-control-label - The label's wrapper.
@@ -72,6 +77,8 @@ export declare class NileVirtualSelect extends NileElement implements NileFormCo
     displayLabel: string;
     selectedOptions: VirtualOption[];
     oldValue: string | string[];
+    private scrollTimeout;
+    private scrolling;
     /** The name of the select, submitted as a name/value pair with form data. */
     name: string;
     /** Array of all option items for virtual scrolling */
@@ -88,6 +95,8 @@ export declare class NileVirtualSelect extends NileElement implements NileFormCo
     size: 'small' | 'medium' | 'large';
     /** Placeholder text to show as a hint when the select is empty. */
     placeholder: string;
+    /** Enable automatic resizing of tags area */
+    autoResize: boolean;
     /** Current search value */
     searchValue: string;
     /** Enable search functionality */
@@ -98,6 +107,8 @@ export declare class NileVirtualSelect extends NileElement implements NileFormCo
     disableLocalSearch: boolean;
     /** Show loading state */
     optionsLoading: boolean;
+    /** Show loading state using nile-loader */
+    loading: boolean;
     /** Allows more than one option to be selected. */
     multiple: boolean;
     /** Help text */
@@ -158,12 +169,14 @@ export declare class NileVirtualSelect extends NileElement implements NileFormCo
      */
     maxOptionsVisible: number;
     oldMaxOptionsVisible: number;
+    showListbox: boolean;
     /** Gets the validity state object */
     get validity(): ValidityState;
     /** Gets the validation message */
     get validationMessage(): string;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    protected updated(changedProperties: PropertyValues): void;
     private initializeComponent;
     /**
      * Get display text for an item using renderItemConfig
@@ -190,11 +203,18 @@ export declare class NileVirtualSelect extends NileElement implements NileFormCo
     private isEnterOrSpaceKey;
     private handleEnterOrSpaceKey;
     private handleDocumentMouseDown;
+    /**
+     * This is a workaround for an error in the Lit Labs virtualizer.
+     * Since there are no specific guidelines available to fix the issue,
+     * we are catching only the error message related to the virtualizer.
+     */
+    private handleWindowError;
     private handleFooterClick;
     private toggleShowSelected;
     private unSelectAll;
     private handleLabelClick;
     private handleComboboxMouseDown;
+    private resizeController;
     private shouldIgnoreComboboxClick;
     private handleComboboxKeyDown;
     private handleClearClick;
@@ -212,6 +232,7 @@ export declare class NileVirtualSelect extends NileElement implements NileFormCo
     handleSearchFocus(): void;
     handleSearchBlur(): void;
     handleSearchChange(e: any): void;
+    handleScroll(e: Event): void;
     filterVirtualOptions(searchValue: string): void;
     private handleInvalid;
     handleDisabledChange(): void;

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

@@ -12,6 +12,7 @@ import '../nile-icon';
 import '../nile-popup/nile-popup';
 import '../nile-tag/nile-tag';
 import '../nile-checkbox/nile-checkbox';
+import '../nile-loader/nile-loader';
 import { animateTo, stopAnimations } from '../internal/animate';
 import { classMap } from 'lit/directives/class-map.js';
 import { query, state } from 'lit/decorators.js';
@@ -26,6 +27,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { VirtualSelectSelectionManager } from './selection-manager.js';
 import { VirtualSelectSearchManager } from './search-manager.js';
 import { VirtualSelectRenderer } from './renderer.js';
+import { ResizeController } from '@lit-labs/observers/resize-controller.js';
 /**
  * Nile Virtual Select component.
  *
@@ -58,6 +60,10 @@ import { VirtualSelectRenderer } from './renderer.js';
  * @event nile-hide - Emitted when the select's menu closes.
  * @event nile-after-hide - Emitted after the select's menu closes and all animations are complete.
  * @event nile-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+ * @event nile-search - Emitted when the user types in the search input. The event payload includes the search query for backend search functionality.
+ * @event nile-scroll - Emitted when the user scrolls within the virtualized container. The event payload includes scroll position information.
+ * @event nile-scroll-start - Emitted when the user starts scrolling within the virtualized container.
+ * @event nile-scroll-end - Emitted when the user stops scrolling and reaches the bottom of the virtualized container (debounced).
  *
  * @csspart form-control - The form control that wraps the label, input, and help text.
  * @csspart form-control-label - The label's wrapper.
@@ -84,6 +90,7 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
         this.displayLabel = '';
         this.selectedOptions = [];
         this.oldValue = '';
+        this.scrolling = false;
         /** The name of the select, submitted as a name/value pair with form data. */
         this.name = '';
         /** Array of all option items for virtual scrolling */
@@ -100,6 +107,8 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
         this.size = 'medium';
         /** Placeholder text to show as a hint when the select is empty. */
         this.placeholder = 'Select...';
+        /** Enable automatic resizing of tags area */
+        this.autoResize = false;
         /** Current search value */
         this.searchValue = '';
         /** Enable search functionality */
@@ -110,6 +119,8 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
         this.disableLocalSearch = false;
         /** Show loading state */
         this.optionsLoading = false;
+        /** Show loading state using nile-loader */
+        this.loading = false;
         /** Allows more than one option to be selected. */
         this.multiple = false;
         /** Help text */
@@ -168,6 +179,7 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
          */
         this.maxOptionsVisible = 3;
         this.oldMaxOptionsVisible = 1;
+        this.showListbox = false;
         this.handleDocumentMouseDown = (event) => {
             if (!this.open)
                 return;
@@ -178,6 +190,27 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
                 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,
+         * we are catching only the error message related to the virtualizer.
+         */
+        this.handleWindowError = (event) => {
+            const errorMessage = event.error?.message || event.message || '';
+            if (errorMessage.includes('Cannot read properties of null (reading \'insertBefore\')')) {
+                event.preventDefault();
+                return;
+            }
+        };
+        this.resizeController = new ResizeController(this, {
+            callback: (entries) => {
+                for (const entry of entries) {
+                    if (entry.target.classList.contains('select__tags')) {
+                        this.calculateTotalWidthOfTags();
+                    }
+                }
+            }
+        });
     }
     /** Gets the validity state object */
     get validity() {
@@ -199,6 +232,25 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
     }
     disconnectedCallback() {
         this.removeOpenListeners();
+        // Clear any pending scroll timeout to prevent memory leaks
+        if (this.scrollTimeout) {
+            clearTimeout(this.scrollTimeout);
+            this.scrollTimeout = undefined;
+        }
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('value')) {
+            this.selectionChanged();
+        }
+        if (changedProperties.has('autoResize')) {
+            const tagsDiv = this.shadowRoot?.querySelector('.select__tags');
+            if (this.autoResize && tagsDiv) {
+                this.resizeController.observe(tagsDiv);
+            }
+            else if (tagsDiv) {
+                this.resizeController.unobserve(tagsDiv);
+            }
+        }
     }
     initializeComponent() {
         this.open = false;
@@ -236,16 +288,19 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
         this.handleDocumentFocusIn = this.handleDocumentFocusIn.bind(this);
         this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
         this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
+        this.handleWindowError = this.handleWindowError.bind(this);
     }
     addOpenListeners() {
         document.addEventListener('focusin', this.handleDocumentFocusIn);
         document.addEventListener('keydown', this.handleDocumentKeyDown);
         document.addEventListener('mousedown', this.handleDocumentMouseDown);
+        window.addEventListener('error', this.handleWindowError);
     }
     removeOpenListeners() {
         document.removeEventListener('focusin', this.handleDocumentFocusIn);
         document.removeEventListener('keydown', this.handleDocumentKeyDown);
         document.removeEventListener('mousedown', this.handleDocumentMouseDown);
+        window.removeEventListener('error', this.handleWindowError);
     }
     handleFocus() {
         this.hasFocus = true;
@@ -319,7 +374,10 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
         this.showSelected = !this.showSelected;
         if (this.showSelected) {
             const selectedValues = Array.isArray(this.value) ? this.value : [this.value];
-            this.data = this.originalOptionItems.filter((item) => selectedValues.includes(item.value));
+            this.data = this.originalOptionItems.filter((item) => {
+                const itemValue = this.getItemValue(item);
+                return selectedValues.some(val => String(val) === String(itemValue));
+            });
         }
         else {
             this.data = [...this.originalOptionItems];
@@ -483,9 +541,58 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
     }
     handleSearchChange(e) {
         this.searchValue = e.detail.value;
+        this.emit('nile-search', {
+            query: this.searchValue,
+            name: this.name
+        });
         if (!this.disableLocalSearch) {
             this.filterVirtualOptions(this.searchValue);
             this.resetScrollPosition();
+            this.updateComplete.then(() => {
+                const virtualized = this.shadowRoot?.querySelector('.virtualized');
+                if (virtualized) {
+                    if (this.data.length <= 5) {
+                        virtualized.classList.add('no-scroll');
+                    }
+                    else {
+                        virtualized.classList.remove('no-scroll');
+                    }
+                }
+            });
+        }
+    }
+    handleScroll(e) {
+        if (this.showSelected) {
+            return;
+        }
+        const target = e.target;
+        this.emit('nile-scroll', {
+            scrollTop: target.scrollTop,
+            scrollLeft: target.scrollLeft,
+            name: this.name
+        });
+        if (!this.scrolling) {
+            this.scrolling = true;
+            this.emit('nile-scroll-start', {
+                scrollTop: target.scrollTop,
+                scrollLeft: target.scrollLeft,
+                name: this.name
+            });
+        }
+        clearTimeout(this.scrollTimeout);
+        this.scrollTimeout = window.setTimeout(() => {
+            if (this.scrolling) {
+                this.scrolling = false;
+            }
+        }, 300);
+        const isAtBottom = Math.ceil(target.scrollTop) >= Math.floor(target.scrollHeight - target.offsetHeight);
+        if (isAtBottom && !this.searchValue) {
+            this.emit('nile-scroll-end', {
+                scrollTop: target.scrollTop,
+                scrollLeft: target.scrollLeft,
+                name: this.name,
+                isAtBottom: true
+            });
         }
     }
     filterVirtualOptions(searchValue) {
@@ -510,18 +617,18 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
         this.requestUpdate();
     }
     handleDataChange() {
+        if (this.data.length > 0 && this.open && !this.showSelected && !this.searchValue) {
+            this.originalOptionItems = [...this.data];
+        }
         this.selectionChanged();
         // Show no results message when data is empty and not loading
-        if (!this.optionsLoading && this.data.length === 0) {
+        if (!this.optionsLoading && !this.loading && this.data.length === 0) {
             this.showNoResults = true;
         }
         else if (this.data.length > 0) {
             this.showNoResults = false;
         }
         this.requestUpdate();
-        if (this.open) {
-            this.resetScrollPosition();
-        }
     }
     handleRenderItemConfigChange() {
         if (this.value && this.data.length > 0) {
@@ -539,9 +646,11 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
     async handleOpenChange() {
         if (this.open && !this.disabled) {
             await this.handleOpen();
+            this.showListbox = true;
         }
         else {
             await this.handleClose();
+            this.showListbox = false;
         }
     }
     async handleOpen() {
@@ -572,7 +681,7 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
         this.emit('nile-after-hide', { value: this.value, name: this.name });
     }
     initializeOriginalItems() {
-        if (this.originalOptionItems.length === 0 && this.data.length > 0) {
+        if (this.data.length > 0) {
             this.originalOptionItems = [...this.data];
         }
     }
@@ -697,7 +806,7 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
       >
         ${this.renderCustomSelect(hasCustomSelect)}
         ${this.renderCombobox(hasCustomSelect, hasClearIcon)}
-        ${this.renderListbox()}
+        ${this.showListbox ? this.renderListbox() : html ``}
       </nile-popup>
     `;
     }
@@ -915,23 +1024,31 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
             : html ``;
     }
     renderLoader() {
-        return this.optionsLoading
-            ? html `
-          <span part="loader" class="select__loader">
-            <nile-icon
-              class="select__loader--icon"
-              name="button-loading-blue"
-            ></nile-icon>
-          </span>
-        `
-            : html ``;
+        if (this.loading) {
+            return html `
+        <span part="loader" class="virtual-select-loader">
+          <nile-loader size="sm"></nile-loader>
+        </span>
+      `;
+        }
+        if (this.optionsLoading) {
+            return html `
+        <span part="loader" class="select__loader">
+          <nile-icon
+            class="select__loader--icon"
+            name="button-loading-blue"
+          ></nile-icon>
+        </span>
+      `;
+        }
+        return html ``;
     }
     renderFooter() {
         return this.multiple
             ? html `
           <div
             part="footer"
-            class="select__footer"
+            class="select__footer ${this.loading ? 'loading' : ''}"
             @click="${this.handleFooterClick}"
           >
             <span
@@ -974,7 +1091,7 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
     `;
     }
     getVirtualizedContent() {
-        return VirtualSelectRenderer.getVirtualizedContent(this.data, this.searchEnabled, this.getDisplayText.bind(this), this.value, this.multiple, this.renderItemConfig?.getDisplayText, this.renderItemConfig?.getValue, this.showNoResults, this.noResultsMessage, this.optionsLoading);
+        return VirtualSelectRenderer.getVirtualizedContent(this.data, this.searchEnabled, this.getDisplayText.bind(this), this.value, this.multiple, this.renderItemConfig?.getDisplayText, this.renderItemConfig?.getValue, this.showNoResults, this.noResultsMessage, this.optionsLoading || this.loading, this.handleScroll.bind(this));
     }
     nileInput(value) {
         this.emit('nile-input', value);
@@ -1034,14 +1151,14 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
     }
     resetScrollPosition() {
         this.updateComplete.then(() => {
-            if (this.virtualizedContainer) {
+            if (this.virtualizedContainer && this.virtualizedContainer.isConnected) {
                 this.virtualizedContainer.scrollTop = 0;
                 const listbox = this.shadowRoot?.querySelector('.select__listbox');
-                if (listbox) {
+                if (listbox && listbox.isConnected) {
                     listbox.scrollTop = 0;
                 }
                 const virtualizer = this.virtualizedContainer.querySelector('lit-virtualizer');
-                if (virtualizer) {
+                if (virtualizer && virtualizer.isConnected) {
                     virtualizer.scrollTop = 0;
                 }
             }
@@ -1099,6 +1216,9 @@ __decorate([
 __decorate([
     property()
 ], NileVirtualSelect.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileVirtualSelect.prototype, "autoResize", void 0);
 __decorate([
     state()
 ], NileVirtualSelect.prototype, "searchValue", void 0);
@@ -1114,6 +1234,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NileVirtualSelect.prototype, "optionsLoading", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: true })
+], NileVirtualSelect.prototype, "loading", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NileVirtualSelect.prototype, "multiple", void 0);
@@ -1186,6 +1309,9 @@ __decorate([
 __decorate([
     state()
 ], NileVirtualSelect.prototype, "oldMaxOptionsVisible", void 0);
+__decorate([
+    state()
+], NileVirtualSelect.prototype, "showListbox", void 0);
 __decorate([
     watch('disabled', { waitUntilFirstUpdate: true })
 ], NileVirtualSelect.prototype, "handleDisabledChange", null);