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

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

@@ -8,11 +8,10 @@ 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 '../nile-virtual-select/nile-virtual-select';
 /**
  * Nile icon component.
  *
@@ -27,7 +26,6 @@ import '../nile-virtual-select/nile-virtual-select';
  * @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,8 +64,7 @@ import '../nile-virtual-select/nile-virtual-select';
  */
 export declare class NileSelect extends NileElement implements NileFormControl {
     static styles: CSSResultGroup;
-    private formControlController;
-    private virtualScrollHelper;
+    private readonly formControlController;
     private readonly hasSlotController;
     private typeToSelectString;
     private typeToSelectTimeout;
@@ -105,6 +102,7 @@ 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;
@@ -154,16 +152,14 @@ 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;
@@ -227,7 +223,7 @@ export declare class NileSelect extends NileElement implements NileFormControl {
     onInputChange(event: Event): void;
     calculateWidthOfSelectTagsDiv(): number | undefined;
     calculateTotalWidthOfTags(): void;
-    render(): any;
+    render(): import("lit-html").TemplateResult<1>;
     nileInput(value: any): void;
     nileChange(value: any): void;
 }

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

@@ -24,8 +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 '../nile-virtual-select/nile-virtual-select';
-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.
@@ -78,16 +75,12 @@ import { VirtualScrollHelper } from './virtual-scroll-helper';
  * @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();
+        super(...arguments);
+        // protected override BUBBLES=false;
+        this.formControlController = new FormControlController(this, {
+            assumeInteractionOn: ['nile-blur', 'nile-input'],
+        });
         this.hasSlotController = new HasSlotController(this, 'help-text', 'label');
         this.typeToSelectString = '';
         this.hasFocus = false;
@@ -118,6 +111,7 @@ 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;
@@ -167,18 +161,17 @@ let NileSelect = class NileSelect extends NileElement {
         this.oldMaxOptionsVisible = 1;
         this.showNoResults = false;
         this.noResultsMessage = 'No results found';
-        this.renderItemFunction = (item) => item?.label || item?.name || item;
-        this.data = [];
-        this.enableVirtualScroll = false;
+    }
+    /** Gets the validity state object */
+    get validity() {
+        return this.valueInput?.validity;
+    }
+    /** Gets the validation message */
+    get validationMessage() {
+        return this.valueInput?.validationMessage;
     }
     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);
@@ -190,6 +183,17 @@ 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);
@@ -584,7 +588,7 @@ let NileSelect = class NileSelect extends NileElement {
         }
         // Update validity
         this.updateComplete.then(() => {
-            this.formControlController?.updateValidity();
+            this.formControlController.updateValidity();
         });
         this.calculateTotalWidthOfTags();
     }
@@ -626,8 +630,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
@@ -709,7 +713,7 @@ let NileSelect = class NileSelect extends NileElement {
     }
     /** Gets the associated form, if one exists. */
     getForm() {
-        return this.formControlController?.getForm() || null;
+        return this.formControlController.getForm();
     }
     /** Checks for validity and shows the browser's validation message if the control is invalid. */
     reportValidity() {
@@ -718,7 +722,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) {
@@ -777,9 +781,6 @@ 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');
@@ -787,7 +788,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])
@@ -1085,7 +1086,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 `
@@ -1180,8 +1181,11 @@ __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);
@@ -1239,15 +1243,6 @@ __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);