@aquera/nile-elements 0.1.74 → 0.1.75-beta-1.3

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 */
@@ -98,6 +105,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 */
@@ -164,6 +173,7 @@ export declare class NileVirtualSelect extends NileElement implements NileFormCo
     get validationMessage(): string;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    protected updated(changedProperties: PropertyValues): void;
     private initializeComponent;
     /**
      * Get display text for an item using renderItemConfig
@@ -190,6 +200,12 @@ 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;
@@ -212,6 +228,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';
@@ -58,6 +59,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 +89,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 */
@@ -110,6 +116,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 */
@@ -178,6 +186,18 @@ 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;
+            }
+        };
     }
     /** Gets the validity state object */
     get validity() {
@@ -199,6 +219,16 @@ 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();
+        }
     }
     initializeComponent() {
         this.open = false;
@@ -236,16 +266,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 +352,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,11 +519,49 @@ 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();
         }
     }
+    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.emit('nile-scroll-end', {
+                scrollTop: target.scrollTop,
+                scrollLeft: target.scrollLeft,
+                name: this.name,
+                isAtBottom: true
+            });
+        }
+    }
     filterVirtualOptions(searchValue) {
         const result = VirtualSelectSearchManager.filterVirtualOptions(searchValue, this.originalOptionItems, this.data, this.getDisplayText.bind(this), this.renderItemConfig?.getSearchText);
         this.data = result.filteredItems;
@@ -510,18 +584,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) {
@@ -572,7 +646,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];
         }
     }
@@ -915,23 +989,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 +1056,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 +1116,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;
                 }
             }
@@ -1114,6 +1196,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);