@aquera/nile-elements 0.1.63-beta-1.2 → 0.1.63

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

@@ -8,10 +8,12 @@ import '../nile-icon';
 import '../nile-popup/nile-popup';
 import '../nile-tag/nile-tag';
 import NileElement from '../internal/nile-element';
-import type { CSSResultGroup } from 'lit';
+import type { CSSResultGroup, PropertyValues } 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 type { RenderItemConfig } from '../nile-virtual-select/types.js';
+import '../nile-virtual-select/nile-virtual-select';
 /**
  * Nile icon component.
  *
@@ -26,6 +28,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 +67,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;
@@ -100,7 +104,7 @@ export declare class NileSelect extends NileElement implements NileFormControl {
     optionsLoading: boolean;
     noWidthSync: boolean;
     /** Allows more than one option to be selected. */
-    multiple: boolean;
+    multiple: boolean | string;
     helpText: string;
     errorMessage: string;
     /** Sets the input to a warning state, changing its visual appearance. */
@@ -151,12 +155,21 @@ export declare class NileSelect extends NileElement implements NileFormControl {
     oldMaxOptionsVisible: number;
     showNoResults: boolean;
     noResultsMessage: string;
+    /** Enhanced configuration for rendering items with support for display text, value, and search text */
+    renderItemConfig?: RenderItemConfig;
+    data: any;
+    enableVirtualScroll: boolean;
     /** Gets the validity state object */
     get validity(): ValidityState;
     /** Gets the validation message */
     get validationMessage(): string;
+    constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
+    private options;
+    protected updated(_changedProperties: PropertyValues): void;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    setCheckBoxInOption(checked: boolean): void;
     private addOpenListeners;
     private removeOpenListeners;
     private handleFocus;
@@ -220,7 +233,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;
@@ -160,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.data = [];
+        this.enableVirtualScroll = false;
+        this.options = [];
     }
     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);
@@ -182,6 +190,24 @@ let NileSelect = class NileSelect extends NileElement {
         super.disconnectedCallback();
         this.emit('nile-destroy');
     }
+    updated(_changedProperties) {
+        if (_changedProperties.has('multiple')) {
+            this.setCheckBoxInOption(this.multiple);
+        }
+    }
+    firstUpdated(_changedProperties) {
+        if (_changedProperties.has('multiple')) {
+            this.setCheckBoxInOption(this.multiple);
+        }
+    }
+    setCheckBoxInOption(checked) {
+        if (!this.options.length) {
+            this.options = this.getAllOptions();
+        }
+        this.options.forEach((option) => {
+            option.showCheckbox = checked;
+        });
+    }
     addOpenListeners() {
         document.addEventListener('focusin', this.handleDocumentFocusIn);
         document.addEventListener('keydown', this.handleDocumentKeyDown);
@@ -362,6 +388,8 @@ let NileSelect = class NileSelect extends NileElement {
         event.stopPropagation();
         if (this.value !== '') {
             this.setSelectedOptions([]);
+            this.showSelected = false;
+            this.value = '';
             this.displayInput.focus({ preventScroll: true });
             // Emit after update
             this.updateComplete.then(() => {
@@ -576,7 +604,7 @@ let NileSelect = class NileSelect extends NileElement {
         }
         // Update validity
         this.updateComplete.then(() => {
-            this.formControlController.updateValidity();
+            this.formControlController?.updateValidity();
         });
         this.calculateTotalWidthOfTags();
     }
@@ -618,8 +646,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
@@ -701,7 +729,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() {
@@ -710,7 +738,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) {
@@ -769,6 +797,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');
@@ -1166,7 +1197,21 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], NileSelect.prototype, "noWidthSync", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true })
+    property({
+        reflect: true,
+        converter: {
+            fromAttribute(value) {
+                if (value === '' || value === 'true')
+                    return true;
+                if (value === 'false')
+                    return false;
+                return value;
+            },
+            toAttribute(value) {
+                return typeof value === 'boolean' ? String(value) : value;
+            }
+        }
+    })
 ], NileSelect.prototype, "multiple", void 0);
 __decorate([
     property({ attribute: 'help-text', reflect: true })
@@ -1228,6 +1273,15 @@ __decorate([
 __decorate([
     property({ type: String })
 ], NileSelect.prototype, "noResultsMessage", void 0);
+__decorate([
+    property({ attribute: false })
+], NileSelect.prototype, "renderItemConfig", 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);