@aquera/nile-elements 0.1.46-beta-2.2 → 0.1.46-beta-2.3

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

@@ -7,6 +7,7 @@
 import '../nile-icon';
 import '../nile-popup/nile-popup';
 import '../nile-tag/nile-tag';
+import '../nile-virtual-select/nile-virtual-select';
 import NileElement from '../internal/nile-element';
 import type { CSSResultGroup } from 'lit';
 import type { NileFormControl } from '../internal/nile-element';
@@ -26,6 +27,7 @@ import type NilePopup from '../nile-popup/nile-popup';
  * @dependency nile-icon
  * @dependency nile-popup
  * @dependency nile-tag
+ * @dependency nile-virtual-select
  *
  * @slot - The listbox options. Must be `<nile-option>` elements. You can use `<nile-divider>` to group items visually.
  * @slot label - The input's label. Alternatively, you can use the `label` attribute.
@@ -66,6 +68,7 @@ export declare class NileSelect extends NileElement implements NileFormControl {
     static styles: CSSResultGroup;
     private readonly formControlController;
     private readonly hasSlotController;
+    private virtualScrollHelper;
     private typeToSelectString;
     private typeToSelectTimeout;
     popup: NilePopup;
@@ -99,10 +102,15 @@ export declare class NileSelect extends NileElement implements NileFormControl {
     disableLocalSearch: boolean;
     optionsLoading: boolean;
     noWidthSync: boolean;
+    /** Enable virtual scrolling for large datasets. When enabled, the component will use `nile-virtual-select` internally for better performance with large option lists. */
+    enableVirtualScroll: boolean;
+    /** Array of all option items for virtual scrolling. Required when `enableVirtualScroll` is true. */
+    allOptionItems: any;
+    /** Function to render items in virtual select. Defaults to displaying the `label` or `name` property of the item. */
+    renderItemFunction: (item: any) => string;
     /** Allows more than one option to be selected. */
     multiple: boolean;
     helpText: string;
-    help_text: string;
     errorMessage: string;
     /** Sets the input to a warning state, changing its visual appearance. */
     warning: boolean;
@@ -153,7 +161,7 @@ export declare class NileSelect extends NileElement implements NileFormControl {
     showNoResults: boolean;
     noResultsMessage: string;
     /** Gets the validity state object */
-    get validity(): ValidityState;
+    get validity(): any;
     /** Gets the validation message */
     get validationMessage(): string;
     connectedCallback(): void;
@@ -203,9 +211,9 @@ export declare class NileSelect extends NileElement implements NileFormControl {
     handleValueChange(): void;
     handleOpenChange(): Promise<void>;
     /** Shows the listbox. */
-    show(): Promise<void>;
+    show(): Promise<any>;
     /** Hides the listbox. */
-    hide(): Promise<void>;
+    hide(): Promise<any>;
     /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
     checkValidity(): boolean;
     /** Gets the associated form, if one exists. */
@@ -221,7 +229,8 @@ export declare class NileSelect extends NileElement implements NileFormControl {
     onInputChange(event: Event): void;
     calculateWidthOfSelectTagsDiv(): number | undefined;
     calculateTotalWidthOfTags(): void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): any;
+    private getRegularContent;
     nileInput(value: any): void;
     nileChange(value: any): void;
 }

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

@@ -11,6 +11,7 @@ import { styles } from './nile-select.css';
 import '../nile-icon';
 import '../nile-popup/nile-popup';
 import '../nile-tag/nile-tag';
+import '../nile-virtual-select/nile-virtual-select';
 import { animateTo, stopAnimations } from '../internal/animate';
 import { classMap } from 'lit/directives/class-map.js';
 import { query, state } from 'lit/decorators.js';
@@ -24,6 +25,7 @@ import { watch } from '../internal/watch';
 import NileElement from '../internal/nile-element';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { VirtualScrollHelper } from './virtual-scroll-helper';
 /**
  * Nile icon component.
  *
@@ -38,6 +40,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
  * @dependency nile-icon
  * @dependency nile-popup
  * @dependency nile-tag
+ * @dependency nile-virtual-select
  *
  * @slot - The listbox options. Must be `<nile-option>` elements. You can use `<nile-divider>` to group items visually.
  * @slot label - The input's label. Alternatively, you can use the `label` attribute.
@@ -108,10 +111,15 @@ let NileSelect = class NileSelect extends NileElement {
         this.disableLocalSearch = false;
         this.optionsLoading = false;
         this.noWidthSync = false;
+        /** Enable virtual scrolling for large datasets. When enabled, the component will use `nile-virtual-select` internally for better performance with large option lists. */
+        this.enableVirtualScroll = false;
+        /** Array of all option items for virtual scrolling. Required when `enableVirtualScroll` is true. */
+        this.allOptionItems = [];
+        /** Function to render items in virtual select. Defaults to displaying the `label` or `name` property of the item. */
+        this.renderItemFunction = (item) => item?.label || item;
         /** Allows more than one option to be selected. */
         this.multiple = false;
         this.helpText = '';
-        this.help_text = '';
         this.errorMessage = '';
         /** Sets the input to a warning state, changing its visual appearance. */
         this.warning = false;
@@ -164,14 +172,21 @@ let NileSelect = class NileSelect extends NileElement {
     }
     /** Gets the validity state object */
     get validity() {
+        if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+            return this.virtualScrollHelper.getValidity();
+        }
         return this.valueInput?.validity;
     }
     /** Gets the validation message */
     get validationMessage() {
+        if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+            return this.virtualScrollHelper.getValidationMessage();
+        }
         return this.valueInput?.validationMessage;
     }
     connectedCallback() {
         super.connectedCallback();
+        this.virtualScrollHelper = new VirtualScrollHelper(this);
         this.handleDocumentFocusIn = this.handleDocumentFocusIn.bind(this);
         this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
         this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
@@ -194,15 +209,24 @@ let NileSelect = class NileSelect extends NileElement {
         document.removeEventListener('mousedown', this.handleDocumentMouseDown);
     }
     handleFocus() {
+        if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+            return;
+        }
         this.hasFocus = true;
         this.displayInput.setSelectionRange(0, 0);
         this.emit('nile-focus', { value: this.value, name: this.name });
     }
     handleBlur() {
+        if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+            return;
+        }
         this.hasFocus = false;
         this.emit('nile-blur', { value: this.value, name: this.name });
     }
     handleDocumentFocusIn(event) {
+        if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+            return;
+        }
         // Close when focusing out of the select
         const path = event.composedPath();
         if (this && !path.includes(this)) {
@@ -255,6 +279,9 @@ let NileSelect = class NileSelect extends NileElement {
         this.emit('nile-clear', { value: this.multiple ? this.value : '', name: this.name });
     }
     handleDocumentKeyDown(event) {
+        if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+            return;
+        }
         const target = event.target;
         const isClearButton = target.closest('.select__clear') !== null;
         const isIconButton = target.closest('nile-icon-button') !== null;
@@ -334,6 +361,9 @@ let NileSelect = class NileSelect extends NileElement {
         }
     }
     handleDocumentMouseDown(event) {
+        if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+            return;
+        }
         // Close when clicking outside of the select
         const path = event.composedPath();
         if (this && !path.includes(this)) {
@@ -345,6 +375,9 @@ let NileSelect = class NileSelect extends NileElement {
         this.hide();
     }
     handleComboboxMouseDown(event) {
+        if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+            return;
+        }
         const path = event.composedPath();
         const isIconButton = path.some(el => el instanceof Element && el.tagName.toLowerCase() === 'nile-icon-button');
         // Ignore disabled controls and clicks on tags (remove buttons)
@@ -356,10 +389,16 @@ let NileSelect = class NileSelect extends NileElement {
         this.open = !this.open;
     }
     handleComboboxKeyDown(event) {
+        if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+            return;
+        }
         event.stopPropagation();
         this.handleDocumentKeyDown(event);
     }
     handleClearClick(event) {
+        if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+            return;
+        }
         event.stopPropagation();
         if (this.value !== '') {
             this.setSelectedOptions([]);
@@ -374,11 +413,17 @@ let NileSelect = class NileSelect extends NileElement {
         }
     }
     handleClearMouseDown(event) {
+        if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+            return;
+        }
         // Don't lose focus or propagate events when clicking the clear button
         event.stopPropagation();
         event.preventDefault();
     }
     handleOptionClick(event) {
+        if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+            return;
+        }
         const target = event.target;
         const option = target.closest('nile-option');
         if (this.blockValueChange && option) {
@@ -437,6 +482,9 @@ let NileSelect = class NileSelect extends NileElement {
         }
     }
     handleTagRemove(event, option) {
+        if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+            return;
+        }
         event.stopPropagation();
         if (!this.disabled) {
             this.toggleOptionSelection(option, false);
@@ -582,12 +630,21 @@ let NileSelect = class NileSelect extends NileElement {
         this.calculateTotalWidthOfTags();
     }
     handleSearchFocus() {
+        if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+            return;
+        }
         document.removeEventListener('keydown', this.handleDocumentKeyDown);
     }
     handleSearchBlur() {
+        if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+            return;
+        }
         document.addEventListener('keydown', this.handleDocumentKeyDown);
     }
     handleSearchChange(e) {
+        if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+            return;
+        }
         this.searchValue = e.detail.value;
         if (!this.disableLocalSearch) {
             let filteredOptions = this.filterOptions(this.searchValue);
@@ -623,6 +680,10 @@ let NileSelect = class NileSelect extends NileElement {
         this.formControlController.emitInvalidEvent(event);
     }
     handleDisabledChange() {
+        // If virtual scroll is enabled, let the virtual select handle disabled changes
+        if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+            return;
+        }
         // Close the listbox when the control is disabled
         if (this.disabled) {
             this.open = false;
@@ -630,12 +691,20 @@ let NileSelect = class NileSelect extends NileElement {
         }
     }
     handleValueChange() {
+        // If virtual scroll is enabled, let the virtual select handle value changes
+        if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+            return;
+        }
         const allOptions = this.getAllOptions();
         const value = Array.isArray(this.value) ? this.value : [this.value];
         // Select only the options that match the new value
         this.setSelectedOptions(allOptions.filter(el => value.includes(el.value)));
     }
     async handleOpenChange() {
+        // If virtual scroll is enabled, let the virtual select handle the open/close logic
+        if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+            return;
+        }
         if (this.open && !this.disabled) {
             // Reset the current option
             this.setCurrentOption(this.selectedOptions[0] || this.getFirstOption());
@@ -680,6 +749,9 @@ let NileSelect = class NileSelect extends NileElement {
     }
     /** Shows the listbox. */
     async show() {
+        if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+            return this.virtualScrollHelper.show();
+        }
         if (this.open || this.disabled) {
             this.open = false;
             return undefined;
@@ -689,6 +761,9 @@ let NileSelect = class NileSelect extends NileElement {
     }
     /** Hides the listbox. */
     async hide() {
+        if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+            return this.virtualScrollHelper.hide();
+        }
         if (!this.open || this.disabled) {
             this.open = false;
             return undefined;
@@ -698,6 +773,9 @@ let NileSelect = class NileSelect extends NileElement {
     }
     /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
     checkValidity() {
+        if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+            return this.virtualScrollHelper.checkValidity();
+        }
         return this.valueInput.checkValidity();
     }
     /** Gets the associated form, if one exists. */
@@ -706,20 +784,38 @@ let NileSelect = class NileSelect extends NileElement {
     }
     /** Checks for validity and shows the browser's validation message if the control is invalid. */
     reportValidity() {
+        if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+            return this.virtualScrollHelper.reportValidity();
+        }
         return this.valueInput.reportValidity();
     }
     /** Sets a custom validation message. Pass an empty string to restore validity. */
     setCustomValidity(message) {
-        this.valueInput.setCustomValidity(message);
-        this.formControlController.updateValidity();
+        if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+            this.virtualScrollHelper.setCustomValidity(message);
+        }
+        else {
+            this.valueInput.setCustomValidity(message);
+            this.formControlController.updateValidity();
+        }
     }
     /** Sets focus on the control. */
     focus(options) {
-        this.displayInput.focus(options);
+        if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+            this.virtualScrollHelper.focus(options);
+        }
+        else {
+            this.displayInput.focus(options);
+        }
     }
     /** Removes focus from the control. */
     blur() {
-        this.displayInput.blur();
+        if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+            this.virtualScrollHelper.blur();
+        }
+        else {
+            this.displayInput.blur();
+        }
     }
     onInputChange(event) {
         // This will stop the event from bubbling up to the parent `nile-select` component
@@ -770,6 +866,14 @@ let NileSelect = class NileSelect extends NileElement {
         }, 1);
     }
     render() {
+        // If virtual scroll is enabled, render the virtual select component
+        if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+            return this.virtualScrollHelper.renderVirtualizedContent();
+        }
+        // Otherwise render the regular select content
+        return this.getRegularContent();
+    }
+    getRegularContent() {
         const hasLabelSlot = this.hasSlotController.test('label');
         const hasHelpTextSlot = this.hasSlotController.test('help-text');
         const hasLabelSuffixSlot = this.hasSlotController.test('label-suffix');
@@ -777,7 +881,7 @@ let NileSelect = class NileSelect extends NileElement {
         const hasLabel = this.label ? true : !!hasLabelSlot;
         const hasClearIcon = this.clearable && !this.disabled && this.value.length > 0;
         const isPlaceholderVisible = this.placeholder && this.value.length === 0;
-        const hasHelpText = (this.helpText || this.help_text) ? true : false;
+        const hasHelpText = this.helpText ? true : false;
         const hasErrorMessage = this.errorMessage ? true : false;
         const prefixContent = this.selectedOptions[0]
             ? this.getOptionPrefix(this.selectedOptions[0])
@@ -1075,7 +1179,7 @@ let NileSelect = class NileSelect extends NileElement {
         </div>
 
         ${hasHelpText
-            ? html ` <nile-form-help-text>${(this.helpText || this.help_text)}</nile-form-help-text> `
+            ? html ` <nile-form-help-text>${this.helpText}</nile-form-help-text> `
             : ``}
         ${hasErrorMessage
             ? html `
@@ -1166,15 +1270,21 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NileSelect.prototype, "noWidthSync", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileSelect.prototype, "enableVirtualScroll", void 0);
+__decorate([
+    property({ type: Array })
+], NileSelect.prototype, "allOptionItems", void 0);
+__decorate([
+    property({ attribute: false })
+], NileSelect.prototype, "renderItemFunction", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NileSelect.prototype, "multiple", void 0);
-__decorate([
-    property({ attribute: true, reflect: true })
-], NileSelect.prototype, "helpText", void 0);
 __decorate([
     property({ attribute: 'help-text', reflect: true })
-], NileSelect.prototype, "help_text", void 0);
+], NileSelect.prototype, "helpText", void 0);
 __decorate([
     property({ attribute: 'error-message', reflect: true })
 ], NileSelect.prototype, "errorMessage", void 0);