@aquera/nile-elements 0.1.49-beta-1.0 → 0.1.49-beta-1.2

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

@@ -8,10 +8,11 @@ import '../nile-icon';
 import '../nile-popup/nile-popup';
 import '../nile-tag/nile-tag';
 import NileElement from '../internal/nile-element';
-import type { CSSResultGroup, PropertyValues } from 'lit';
+import type { CSSResultGroup } from 'lit';
 import type { NileFormControl } from '../internal/nile-element';
 import type NileOption from '../nile-option/nile-option';
 import type NilePopup from '../nile-popup/nile-popup';
+import '../nile-virtual-select/nile-virtual-select';
 /**
  * Nile icon component.
  *
@@ -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.
@@ -64,7 +66,8 @@ import type NilePopup from '../nile-popup/nile-popup';
  */
 export declare class NileSelect extends NileElement implements NileFormControl {
     static styles: CSSResultGroup;
-    private readonly formControlController;
+    private formControlController;
+    private virtualScrollHelper;
     private readonly hasSlotController;
     private typeToSelectString;
     private typeToSelectTimeout;
@@ -102,7 +105,6 @@ export declare class NileSelect extends NileElement implements NileFormControl {
     /** 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;
@@ -152,14 +154,16 @@ export declare class NileSelect extends NileElement implements NileFormControl {
     oldMaxOptionsVisible: number;
     showNoResults: boolean;
     noResultsMessage: string;
+    renderItemFunction: (item: any) => string;
+    data: any;
+    enableVirtualScroll: boolean;
     /** Gets the validity state object */
     get validity(): ValidityState;
     /** Gets the validation message */
     get validationMessage(): string;
+    constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
-    protected updated(_changedProperties: PropertyValues): void;
-    setCheckBoxInOption(checked: boolean): void;
     private addOpenListeners;
     private removeOpenListeners;
     private handleFocus;
@@ -223,7 +227,7 @@ 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;
     nileInput(value: any): void;
     nileChange(value: any): void;
 }

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

@@ -24,6 +24,8 @@ 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 '../nile-virtual-select/nile-virtual-select';
+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.
@@ -75,12 +78,16 @@ import { ifDefined } from 'lit/directives/if-defined.js';
  * @csspart expand-icon - The container that wraps the expand icon.
  */
 let NileSelect = class NileSelect extends NileElement {
+    /** Gets the validity state object */
+    get validity() {
+        return this.valueInput?.validity;
+    }
+    /** Gets the validation message */
+    get validationMessage() {
+        return this.valueInput?.validationMessage;
+    }
     constructor() {
-        super(...arguments);
-        // protected override BUBBLES=false;
-        this.formControlController = new FormControlController(this, {
-            assumeInteractionOn: ['nile-blur', 'nile-input'],
-        });
+        super();
         this.hasSlotController = new HasSlotController(this, 'help-text', 'label');
         this.typeToSelectString = '';
         this.hasFocus = false;
@@ -111,7 +118,6 @@ let NileSelect = class NileSelect extends NileElement {
         /** 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;
@@ -161,17 +167,18 @@ let NileSelect = class NileSelect extends NileElement {
         this.oldMaxOptionsVisible = 1;
         this.showNoResults = false;
         this.noResultsMessage = 'No results found';
-    }
-    /** Gets the validity state object */
-    get validity() {
-        return this.valueInput?.validity;
-    }
-    /** Gets the validation message */
-    get validationMessage() {
-        return this.valueInput?.validationMessage;
+        this.renderItemFunction = (item) => item?.label || item?.name || item;
+        this.data = [];
+        this.enableVirtualScroll = false;
     }
     connectedCallback() {
         super.connectedCallback();
+        if (!this.enableVirtualScroll) {
+            this.formControlController = new FormControlController(this, {
+                assumeInteractionOn: ['nile-blur', 'nile-input'],
+            });
+        }
+        this.virtualScrollHelper = new VirtualScrollHelper(this);
         this.handleDocumentFocusIn = this.handleDocumentFocusIn.bind(this);
         this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
         this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
@@ -183,17 +190,6 @@ let NileSelect = class NileSelect extends NileElement {
         super.disconnectedCallback();
         this.emit('nile-destroy');
     }
-    updated(_changedProperties) {
-        if (_changedProperties.has('multiple')) {
-            this.setCheckBoxInOption(this.multiple);
-        }
-    }
-    setCheckBoxInOption(checked) {
-        const options = this.getAllOptions();
-        options.forEach((option) => {
-            option.showCheckbox = checked;
-        });
-    }
     addOpenListeners() {
         document.addEventListener('focusin', this.handleDocumentFocusIn);
         document.addEventListener('keydown', this.handleDocumentKeyDown);
@@ -588,7 +584,7 @@ let NileSelect = class NileSelect extends NileElement {
         }
         // Update validity
         this.updateComplete.then(() => {
-            this.formControlController.updateValidity();
+            this.formControlController?.updateValidity();
         });
         this.calculateTotalWidthOfTags();
     }
@@ -630,8 +626,8 @@ let NileSelect = class NileSelect extends NileElement {
         return filteredOptions;
     }
     handleInvalid(event) {
-        this.formControlController.setValidity(false);
-        this.formControlController.emitInvalidEvent(event);
+        this.formControlController?.setValidity(false);
+        this.formControlController?.emitInvalidEvent(event);
     }
     handleDisabledChange() {
         // Close the listbox when the control is disabled
@@ -713,7 +709,7 @@ let NileSelect = class NileSelect extends NileElement {
     }
     /** Gets the associated form, if one exists. */
     getForm() {
-        return this.formControlController.getForm();
+        return this.formControlController?.getForm() || null;
     }
     /** Checks for validity and shows the browser's validation message if the control is invalid. */
     reportValidity() {
@@ -722,7 +718,7 @@ let NileSelect = class NileSelect extends NileElement {
     /** Sets a custom validation message. Pass an empty string to restore validity. */
     setCustomValidity(message) {
         this.valueInput.setCustomValidity(message);
-        this.formControlController.updateValidity();
+        this.formControlController?.updateValidity();
     }
     /** Sets focus on the control. */
     focus(options) {
@@ -781,6 +777,9 @@ let NileSelect = class NileSelect extends NileElement {
         }, 1);
     }
     render() {
+        if (this.enableVirtualScroll) {
+            return this.virtualScrollHelper.renderVirtualizedContent();
+        }
         const hasLabelSlot = this.hasSlotController.test('label');
         const hasHelpTextSlot = this.hasSlotController.test('help-text');
         const hasLabelSuffixSlot = this.hasSlotController.test('label-suffix');
@@ -788,7 +787,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])
@@ -1086,7 +1085,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 `
@@ -1180,12 +1179,9 @@ __decorate([
 __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);
@@ -1243,6 +1239,15 @@ __decorate([
 __decorate([
     property({ type: String })
 ], NileSelect.prototype, "noResultsMessage", void 0);
+__decorate([
+    property({ attribute: false })
+], NileSelect.prototype, "renderItemFunction", void 0);
+__decorate([
+    property({ type: Array })
+], NileSelect.prototype, "data", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileSelect.prototype, "enableVirtualScroll", void 0);
 __decorate([
     watch('disabled', { waitUntilFirstUpdate: true })
 ], NileSelect.prototype, "handleDisabledChange", null);