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

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

@@ -15,6 +15,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';
@@ -35,6 +36,7 @@ import type NileOption from '../nile-option/nile-option';
 import type NilePopup from '../nile-popup/nile-popup';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { VirtualScrollHelper } from './virtual-scroll-helper';
 
 type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
 
@@ -53,6 +55,7 @@ type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
  * @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.
@@ -104,6 +107,7 @@ export class NileSelect extends NileElement implements NileFormControl {
     'help-text',
     'label'
   );
+  private virtualScrollHelper!: VirtualScrollHelper;
   private typeToSelectString = '';
   private typeToSelectTimeout: number;
 
@@ -158,6 +162,15 @@ export class NileSelect extends NileElement implements NileFormControl {
 
   @property({ type: Boolean, reflect: true }) 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. */
+  @property({ type: Boolean }) enableVirtualScroll = false;
+
+  /** Array of all option items for virtual scrolling. Required when `enableVirtualScroll` is true. */
+  @property({ type: Array }) allOptionItems: any = [];
+
+  /** Function to render items in virtual select. Defaults to displaying the `label` or `name` property of the item. */
+  @property({ attribute: false }) renderItemFunction: (item: any) => string = (item: any) => item?.label || item;
+
   /** Allows more than one option to be selected. */
   @property({ type: Boolean, reflect: true }) multiple = false;
 
@@ -234,16 +247,23 @@ export class NileSelect extends NileElement implements NileFormControl {
 
   /** 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);
@@ -271,17 +291,29 @@ export class NileSelect extends NileElement implements NileFormControl {
   }
 
   private handleFocus() {
+    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+      return;
+    }
+
     this.hasFocus = true;
     this.displayInput.setSelectionRange(0, 0);
     this.emit('nile-focus', { value: this.value, name: this.name });
   }
 
   private handleBlur() {
+    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+      return;
+    }
+
     this.hasFocus = false;
     this.emit('nile-blur', { value: this.value, name: this.name });
   }
 
   private handleDocumentFocusIn(event: FocusEvent) {
+    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+      return;
+    }
+
     // Close when focusing out of the select
     const path = event.composedPath();
     if (this && !path.includes(this)) {
@@ -340,6 +372,10 @@ export class NileSelect extends NileElement implements NileFormControl {
   }
 
   private handleDocumentKeyDown(event: KeyboardEvent) {
+    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+      return;
+    }
+
     const target = event.target as HTMLElement;
     const isClearButton = target.closest('.select__clear') !== null;
     const isIconButton = target.closest('nile-icon-button') !== null;
@@ -440,6 +476,10 @@ export class NileSelect extends NileElement implements NileFormControl {
   }
 
   private handleDocumentMouseDown(event: MouseEvent) {
+    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+      return;
+    }
+
     // Close when clicking outside of the select
     const path = event.composedPath();
     if (this && !path.includes(this)) {
@@ -453,6 +493,10 @@ export class NileSelect extends NileElement implements NileFormControl {
   }
 
   private handleComboboxMouseDown(event: MouseEvent) {
+    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+      return;
+    }
+
     const path = event.composedPath();
     const isIconButton = path.some(
       el =>
@@ -470,11 +514,19 @@ export class NileSelect extends NileElement implements NileFormControl {
   }
 
   private handleComboboxKeyDown(event: KeyboardEvent) {
+    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+      return;
+    }
+
     event.stopPropagation();
     this.handleDocumentKeyDown(event);
   }
 
   private handleClearClick(event: MouseEvent) {
+    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+      return;
+    }
+
     event.stopPropagation();
 
     if (this.value !== '') {
@@ -492,12 +544,20 @@ export class NileSelect extends NileElement implements NileFormControl {
   }
 
   private handleClearMouseDown(event: MouseEvent) {
+    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+      return;
+    }
+
     // Don't lose focus or propagate events when clicking the clear button
     event.stopPropagation();
     event.preventDefault();
   }
 
   private handleOptionClick(event: MouseEvent) {
+    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+      return;
+    }
+
     const target = event.target as HTMLElement;
     const option = target.closest('nile-option');
 
@@ -570,6 +630,10 @@ export class NileSelect extends NileElement implements NileFormControl {
   }
 
   private handleTagRemove(event: NileRemoveEvent, option: NileOption) {
+    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+      return;
+    }
+
     event.stopPropagation();
 
     if (!this.disabled) {
@@ -741,14 +805,26 @@ export class NileSelect extends NileElement implements NileFormControl {
   }
 
   handleSearchFocus() {
+    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+      return;
+    }
+
     document.removeEventListener('keydown', this.handleDocumentKeyDown);
   }
 
   handleSearchBlur() {
+    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+      return;
+    }
+
     document.addEventListener('keydown', this.handleDocumentKeyDown);
   }
 
   handleSearchChange(e: any) {
+    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+      return;
+    }
+
     this.searchValue = e.detail.value;
     if (!this.disableLocalSearch) {
       let filteredOptions = this.filterOptions(this.searchValue);
@@ -791,6 +867,11 @@ export class NileSelect extends NileElement implements NileFormControl {
 
   @watch('disabled', { waitUntilFirstUpdate: true })
   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;
@@ -800,6 +881,11 @@ export class NileSelect extends NileElement implements NileFormControl {
 
   @watch('value', { waitUntilFirstUpdate: true })
   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];
 
@@ -809,6 +895,11 @@ export class NileSelect extends NileElement implements NileFormControl {
 
   @watch('open', { waitUntilFirstUpdate: true })
   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());
@@ -862,6 +953,10 @@ export class NileSelect extends NileElement implements NileFormControl {
 
   /** Shows the listbox. */
   async show() {
+    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+      return this.virtualScrollHelper.show();
+    }
+
     if (this.open || this.disabled) {
       this.open = false;
       return undefined;
@@ -873,6 +968,10 @@ export class NileSelect extends NileElement implements NileFormControl {
 
   /** Hides the listbox. */
   async hide() {
+    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+      return this.virtualScrollHelper.hide();
+    }
+
     if (!this.open || this.disabled) {
       this.open = false;
       return undefined;
@@ -884,6 +983,9 @@ export class NileSelect extends NileElement implements NileFormControl {
 
   /** 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();
   }
 
@@ -894,23 +996,38 @@ export class NileSelect extends NileElement implements NileFormControl {
 
   /** 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: string) {
-    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?: FocusOptions) {
-    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: Event) {
@@ -928,6 +1045,8 @@ export class NileSelect extends NileElement implements NileFormControl {
     }
   }
 
+
+
   calculateTotalWidthOfTags() {
     if (this.maxOptionsVisible !== Infinity) {
       this.oldMaxOptionsVisible = this.maxOptionsVisible;
@@ -973,6 +1092,16 @@ export class NileSelect extends NileElement implements NileFormControl {
   }
 
   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();
+  }
+
+  private getRegularContent() {
     const hasLabelSlot = this.hasSlotController.test('label');
     const hasHelpTextSlot = this.hasSlotController.test('help-text');
     const hasLabelSuffixSlot = this.hasSlotController.test('label-suffix');

package/src/nile-select/virtual-scroll-helper.ts

@@ -0,0 +1,228 @@
+
+import { html } from 'lit';
+import type NileElement from '../internal/nile-element';
+
+/**
+ * Helper class to manage virtual scroll functionality for nile-select component
+ */
+export class VirtualScrollHelper {
+  private component: NileElement;
+
+  constructor(component: NileElement) {
+    this.component = component;
+  }
+
+  /**
+   * Checks if virtual scroll is enabled for the component
+   */
+  isVirtualScrollEnabled(): boolean {
+    return (this.component as any).enableVirtualScroll === true;
+  }
+
+  /**
+   * Gets the virtual select element from the shadow root
+   */
+  getVirtualSelectElement(): any {
+    return this.component.shadowRoot?.querySelector('nile-virtual-select');
+  }
+
+  getValidity(): any {
+    const virtualSelect = this.getVirtualSelectElement();
+    if (virtualSelect) {
+      return virtualSelect.validity;
+    }
+    return {
+      badInput: false,
+      customError: false,
+      patternMismatch: false,
+      rangeOverflow: false,
+      rangeUnderflow: false,
+      stepMismatch: false,
+      tooLong: false,
+      tooShort: false,
+      typeMismatch: false,
+      valid: true,
+      valueMissing: false
+    };
+  }
+
+  getValidationMessage(): string {
+    const virtualSelect = this.getVirtualSelectElement();
+    if (virtualSelect) {
+      return virtualSelect.validationMessage;
+    }
+    return '';
+  }
+
+  checkValidity(): boolean {
+    const virtualSelect = this.getVirtualSelectElement();
+    if (virtualSelect) {
+      return virtualSelect.checkValidity();
+    }
+    return true;
+  }
+
+  reportValidity(): boolean {
+    const virtualSelect = this.getVirtualSelectElement();
+    if (virtualSelect) {
+      return virtualSelect.reportValidity();
+    }
+    return true;
+  }
+
+  setCustomValidity(message: string): void {
+    const virtualSelect = this.getVirtualSelectElement();
+    if (virtualSelect) {
+      virtualSelect.setCustomValidity(message);
+    }
+  }
+
+ 
+  focus(options?: FocusOptions): void {
+    const virtualSelect = this.getVirtualSelectElement();
+    if (virtualSelect) {
+      virtualSelect.focus(options);
+    }
+  }
+
+  blur(): void {
+    const virtualSelect = this.getVirtualSelectElement();
+    if (virtualSelect) {
+      virtualSelect.blur();
+    }
+  }
+
+  async show(): Promise<any> {
+    const virtualSelect = this.getVirtualSelectElement();
+    if (virtualSelect) {
+      return virtualSelect.show();
+    }
+    return;
+  }
+ 
+  async hide(): Promise<any> {
+    const virtualSelect = this.getVirtualSelectElement();
+    if (virtualSelect) {
+      return virtualSelect.hide();
+    }
+    return;
+  }
+
+  renderVirtualizedContent(): any {
+    const component = this.component as any;
+    
+    return html`
+      <nile-virtual-select
+        .name=${component.name}
+        .value=${component.value}
+        .placeholder=${component.placeholder}
+        .size=${component.size}
+        .searchEnabled=${component.searchEnabled}
+        .internalSearchPlaceHolder=${component.internalSearchPlaceHolder}
+        .disableLocalSearch=${component.disableLocalSearch}
+        .optionsLoading=${component.optionsLoading}
+        .multiple=${component.multiple}
+        .helpText=${component.helpText}
+        .errorMessage=${component.errorMessage}
+        .warning=${component.warning}
+        .error=${component.error}
+        .success=${component.success}
+        .disabled=${component.disabled}
+        .clearable=${component.clearable}
+        .hoist=${component.hoist}
+        .filled=${component.filled}
+        .pill=${component.pill}
+        .label=${component.label}
+        .placement=${component.placement}
+        .form=${component.form}
+        .required=${component.required}
+        .showNoResults=${component.showNoResults}
+        .noResultsMessage=${component.noResultsMessage}
+        .renderItemFunction=${component.renderItemFunction}
+        .blockValueChange=${component.blockValueChange}
+        .noWidthSync=${component.noWidthSync}
+        .maxOptionsVisible=${component.maxOptionsVisible}
+        .allOptionItems=${component.allOptionItems}
+        @nile-change=${this.handleVirtualSelectChange.bind(this)}
+        @nile-input=${this.handleVirtualSelectInput.bind(this)}
+        @nile-clear=${this.handleVirtualSelectClear.bind(this)}
+        @nile-focus=${this.handleVirtualSelectFocus.bind(this)}
+        @nile-blur=${this.handleVirtualSelectBlur.bind(this)}
+        @nile-show=${this.handleVirtualSelectShow.bind(this)}
+        @nile-after-show=${this.handleVirtualSelectAfterShow.bind(this)}
+        @nile-hide=${this.handleVirtualSelectHide.bind(this)}
+        @nile-after-hide=${this.handleVirtualSelectAfterHide.bind(this)}
+        @nile-invalid=${this.handleVirtualSelectInvalid.bind(this)}
+        @nile-tag-remove=${this.handleVirtualSelectTagRemove.bind(this)}
+        @nile-init=${this.handleVirtualSelectInit.bind(this)}
+        @nile-block-change=${this.handleVirtualSelectBlockChange.bind(this)}
+        @nile-filter-update=${this.handleVirtualSelectFilterUpdate.bind(this)}
+      >
+        <slot name="label" slot="label"></slot>
+        <slot name="prefix" slot="prefix"></slot>
+        <slot name="clear-icon" slot="clear-icon"></slot>
+        <slot name="expand-icon" slot="expand-icon"></slot>
+        <slot name="help-text" slot="help-text"></slot>
+      </nile-virtual-select>
+    `;
+  }
+
+  private handleVirtualSelectChange(event: CustomEvent) {
+    (this.component as any).value = event.detail.value;
+    this.component.emit('nile-change', { detail: event.detail });
+  }
+
+  private handleVirtualSelectInput(event: CustomEvent) {
+    this.component.emit('nile-input', { detail: event.detail });
+  }
+
+  private handleVirtualSelectClear(event: CustomEvent) {
+    this.component.emit('nile-clear', { detail: event.detail });
+  }
+
+  private handleVirtualSelectFocus(event: CustomEvent) {
+    (this.component as any).hasFocus = true;
+    this.component.emit('nile-focus', { detail: event.detail });
+  }
+
+  private handleVirtualSelectBlur(event: CustomEvent) {
+    (this.component as any).hasFocus = false;
+    this.component.emit('nile-blur', { detail: event.detail });
+  }
+
+  private handleVirtualSelectShow(event: CustomEvent) {
+    this.component.emit('nile-show', { detail: event.detail });
+  }
+
+  private handleVirtualSelectAfterShow(event: CustomEvent) {
+    this.component.emit('nile-after-show', { detail: event.detail });
+  }
+
+  private handleVirtualSelectHide(event: CustomEvent) {
+    this.component.emit('nile-hide', { detail: event.detail });
+  }
+
+  private handleVirtualSelectAfterHide(event: CustomEvent) {
+    this.component.emit('nile-after-hide', { detail: event.detail });
+  }
+
+  private handleVirtualSelectInvalid(event: CustomEvent) {
+    this.component.emit('nile-invalid', { detail: event.detail });
+  }
+
+  private handleVirtualSelectTagRemove(event: CustomEvent) {
+    this.component.emit('nile-tag-remove', { detail: event.detail });
+  }
+
+  private handleVirtualSelectInit(event: CustomEvent) {
+    this.component.emit('nile-init', { detail: event.detail });
+  }
+
+  private handleVirtualSelectBlockChange(event: CustomEvent) {
+    this.component.emit('nile-block-change', { detail: event.detail });
+  }
+
+  private handleVirtualSelectFilterUpdate(event: CustomEvent) {
+    this.component.emit('nile-filter-update', { detail: event.detail });
+  }
+} 

package/src/nile-tab/nile-tab.ts

@@ -111,7 +111,7 @@ export class NileTab extends NileElement {
               <nile-icon-button
                 part="close-button"
                 exportparts="base:close-button__base"
-                name="x-lg"
+                name="close"
                 library="system"
                 label="close"
                 class="tab__close-button"

package/src/nile-virtual-select/index.ts

@@ -0,0 +1 @@
+export { NileVirtualSelect } from './nile-virtual-select';