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

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

@@ -7,7 +7,6 @@
 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';
@@ -27,7 +26,6 @@ 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.
@@ -68,7 +66,6 @@ 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;
@@ -102,15 +99,10 @@ 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;
@@ -161,7 +153,7 @@ export declare class NileSelect extends NileElement implements NileFormControl {
     showNoResults: boolean;
     noResultsMessage: string;
     /** Gets the validity state object */
-    get validity(): any;
+    get validity(): ValidityState;
     /** Gets the validation message */
     get validationMessage(): string;
     connectedCallback(): void;
@@ -211,9 +203,9 @@ export declare class NileSelect extends NileElement implements NileFormControl {
     handleValueChange(): void;
     handleOpenChange(): Promise<void>;
     /** Shows the listbox. */
-    show(): Promise<any>;
+    show(): Promise<void>;
     /** Hides the listbox. */
-    hide(): Promise<any>;
+    hide(): Promise<void>;
     /** 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. */
@@ -229,8 +221,7 @@ export declare class NileSelect extends NileElement implements NileFormControl {
     onInputChange(event: Event): void;
     calculateWidthOfSelectTagsDiv(): number | undefined;
     calculateTotalWidthOfTags(): void;
-    render(): any;
-    private getRegularContent;
+    render(): import("lit-html").TemplateResult<1>;
     nileInput(value: any): void;
     nileChange(value: any): void;
 }

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

@@ -11,7 +11,6 @@ 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';
@@ -25,7 +24,6 @@ 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.
  *
@@ -40,7 +38,6 @@ import { VirtualScrollHelper } from './virtual-scroll-helper';
  * @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.
@@ -111,15 +108,10 @@ 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;
@@ -172,21 +164,14 @@ 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);
@@ -209,24 +194,15 @@ 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)) {
@@ -279,9 +255,6 @@ 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;
@@ -361,9 +334,6 @@ 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)) {
@@ -375,9 +345,6 @@ 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)
@@ -389,16 +356,10 @@ 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([]);
@@ -413,17 +374,11 @@ 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) {
@@ -482,9 +437,6 @@ let NileSelect = class NileSelect extends NileElement {
         }
     }
     handleTagRemove(event, option) {
-        if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
-            return;
-        }
         event.stopPropagation();
         if (!this.disabled) {
             this.toggleOptionSelection(option, false);
@@ -630,21 +582,12 @@ 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);
@@ -680,10 +623,6 @@ 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;
@@ -691,20 +630,12 @@ 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());
@@ -749,9 +680,6 @@ 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;
@@ -761,9 +689,6 @@ 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;
@@ -773,9 +698,6 @@ 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. */
@@ -784,38 +706,20 @@ 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) {
-        if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
-            this.virtualScrollHelper.setCustomValidity(message);
-        }
-        else {
-            this.valueInput.setCustomValidity(message);
-            this.formControlController.updateValidity();
-        }
+        this.valueInput.setCustomValidity(message);
+        this.formControlController.updateValidity();
     }
     /** Sets focus on the control. */
     focus(options) {
-        if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
-            this.virtualScrollHelper.focus(options);
-        }
-        else {
-            this.displayInput.focus(options);
-        }
+        this.displayInput.focus(options);
     }
     /** Removes focus from the control. */
     blur() {
-        if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
-            this.virtualScrollHelper.blur();
-        }
-        else {
-            this.displayInput.blur();
-        }
+        this.displayInput.blur();
     }
     onInputChange(event) {
         // This will stop the event from bubbling up to the parent `nile-select` component
@@ -866,14 +770,6 @@ 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');
@@ -881,7 +777,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 ? true : false;
+        const hasHelpText = (this.helpText || this.help_text) ? true : false;
         const hasErrorMessage = this.errorMessage ? true : false;
         const prefixContent = this.selectedOptions[0]
             ? this.getOptionPrefix(this.selectedOptions[0])
@@ -1179,7 +1075,7 @@ let NileSelect = class NileSelect extends NileElement {
         </div>
 
         ${hasHelpText
-            ? html ` <nile-form-help-text>${this.helpText}</nile-form-help-text> `
+            ? html ` <nile-form-help-text>${(this.helpText || this.help_text)}</nile-form-help-text> `
             : ``}
         ${hasErrorMessage
             ? html `
@@ -1270,21 +1166,15 @@ __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: 'help-text', reflect: true })
+    property({ attribute: true, reflect: true })
 ], NileSelect.prototype, "helpText", void 0);
+__decorate([
+    property({ attribute: 'help-text', reflect: true })
+], NileSelect.prototype, "help_text", void 0);
 __decorate([
     property({ attribute: 'error-message', reflect: true })
 ], NileSelect.prototype, "errorMessage", void 0);