@aquera/nile-elements 2.0.18 → 2.0.20

package/dist/src/nile-select/virtual-scroll-helper.js

@@ -1,4 +1,5 @@
-import { html } from 'lit';
+import { html, noChange, nothing } from 'lit';
+import { guard } from 'lit/directives/guard.js';
 /**
  * Helper class to manage virtual scroll functionality for nile-select component
  */
@@ -8,11 +9,13 @@ export class VirtualScrollHelper {
     }
     renderVirtualizedContent() {
         const component = this.component;
+        const tooltipPath = !!component.showTooltip;
         return html `
       <div class="virtual-select">
         <nile-virtual-select
           .name=${component.name}
           .value=${component.value}
+          .maxOptionsVisible=${tooltipPath || !component.maxOptionsVisibleExplicit ? noChange : component.maxOptionsVisible}
           .autoResize=${component.autoResize}
           .showTooltip=${component.showTooltip}
           .chipMinWidth=${component.chipMinWidth}
@@ -45,7 +48,7 @@ export class VirtualScrollHelper {
           .blockValueChange=${component.blockValueChange}
           .noWidthSync=${component.noWidthSync}
           .enableTabClose=${component.enableTabClose}
-          .data=${component.data}
+          .data=${tooltipPath ? guard([component.data], () => component.data) : component.data}
           .open=${component.open}
           .loading=${component.loading}
           .portal=${component.portal}
@@ -54,8 +57,8 @@ export class VirtualScrollHelper {
           .enableDescription=${component.enableDescription}
           .tickOnSelect=${component.tickOnSelect}
           .legacy=${component.legacy}
-          @nile-input=${(e) => component.syncValueFromVirtualSelect(e)}
-          @nile-change=${(e) => component.syncValueFromVirtualSelect(e)}
+          @nile-input=${tooltipPath ? (e) => component.syncValueFromVirtualSelect(e) : nothing}
+          @nile-change=${tooltipPath ? (e) => component.syncValueFromVirtualSelect(e) : nothing}
           exportparts="
             select-options,
             select-no-results,

package/dist/src/nile-select/virtual-scroll-helper.js.map

@@ -1 +1 @@
-{"version":3,"file":"virtual-scroll-helper.js","sourceRoot":"","sources":["../../../src/nile-select/virtual-scroll-helper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B;;GAEG;AACH,MAAM,OAAO,mBAAmB;IAG9B,YAAY,SAAsB;QAChC,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;IAC7B,CAAC;IAED,wBAAwB;QACtB,MAAM,SAAS,GAAG,IAAI,CAAC,SAAgB,CAAC;QAExC,OAAO,IAAI,CAAA;;;kBAGG,SAAS,CAAC,IAAI;mBACb,SAAS,CAAC,KAAK;wBACV,SAAS,CAAC,UAAU;yBACnB,SAAS,CAAC,WAAW;0BACpB,SAAS,CAAC,YAAY;0BACtB,SAAS,CAAC,YAAY;yBACvB,SAAS,CAAC,WAAW;kBAC5B,SAAS,CAAC,IAAI;2BACL,SAAS,CAAC,aAAa;uCACX,SAAS,CAAC,yBAAyB;gCAC1C,SAAS,CAAC,kBAAkB;4BAChC,SAAS,CAAC,cAAc;sBAC9B,SAAS,CAAC,QAAQ;sBAClB,SAAS,CAAC,QAAQ;0BACd,SAAS,CAAC,YAAY;qBAC3B,SAAS,CAAC,OAAO;oCACF,SAAS,CAAC,sBAAsB;mBACjD,SAAS,CAAC,KAAK;qBACb,SAAS,CAAC,OAAO;sBAChB,SAAS,CAAC,QAAQ;uBACjB,SAAS,CAAC,SAAS;mBACvB,SAAS,CAAC,KAAK;oBACd,SAAS,CAAC,MAAM;kBAClB,SAAS,CAAC,IAAI;mBACb,SAAS,CAAC,KAAK;uBACX,SAAS,CAAC,SAAS;kBACxB,SAAS,CAAC,IAAI;sBACV,SAAS,CAAC,QAAQ;2BACb,SAAS,CAAC,aAAa;8BACpB,SAAS,CAAC,gBAAgB;8BAC1B,SAAS,CAAC,gBAAgB;8BAC1B,SAAS,CAAC,gBAAgB;yBAC/B,SAAS,CAAC,WAAW;4BAClB,SAAS,CAAC,cAAc;kBAClC,SAAS,CAAC,IAAI;kBACd,SAAS,CAAC,IAAI;qBACX,SAAS,CAAC,OAAO;oBAClB,SAAS,CAAC,MAAM;sCACE,SAAS,CAAC,wBAAwB;4BAC5C,SAAS,CAAC,cAAc;+BACrB,SAAS,CAAC,iBAAiB;0BAChC,SAAS,CAAC,YAAY;oBAC5B,SAAS,CAAC,MAAM;wBACZ,CAAC,CAAc,EAAE,EAAE,CAAC,SAAS,CAAC,0BAA0B,CAAC,CAAC,CAAC;yBAC1D,CAAC,CAAc,EAAE,EAAE,CAAC,SAAS,CAAC,0BAA0B,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkC/E,CAAC;IACJ,CAAC;CACF","sourcesContent":["import { html } from 'lit';\nimport type NileElement from '../internal/nile-element';\n\n/**\n * Helper class to manage virtual scroll functionality for nile-select component\n */\nexport class VirtualScrollHelper {\n  private component: NileElement;\n\n  constructor(component: NileElement) {\n    this.component = component;\n  }\n\n  renderVirtualizedContent(): any {\n    const component = this.component as any;\n\n    return html`\n      <div class=\"virtual-select\">\n        <nile-virtual-select\n          .name=${component.name}\n          .value=${component.value}\n          .autoResize=${component.autoResize}\n          .showTooltip=${component.showTooltip}\n          .chipMinWidth=${component.chipMinWidth}\n          .chipMaxWidth=${component.chipMaxWidth}\n          .placeholder=${component.placeholder}\n          .size=${component.size}\n          .searchEnabled=${component.searchEnabled}\n          .internalSearchPlaceHolder=${component.internalSearchPlaceHolder}\n          .disableLocalSearch=${component.disableLocalSearch}\n          .optionsLoading=${component.optionsLoading}\n          .multiple=${component.multiple}\n          .helpText=${component.helpText}\n          .errorMessage=${component.errorMessage}\n          .warning=${component.warning}\n          .enableVisibilityEffect=${component.enableVisibilityEffect}\n          .error=${component.error}\n          .success=${component.success}\n          .disabled=${component.disabled}\n          .clearable=${component.clearable}\n          .hoist=${component.hoist}\n          .filled=${component.filled}\n          .pill=${component.pill}\n          .label=${component.label}\n          .placement=${component.placement}\n          .form=${component.form}\n          .required=${component.required}\n          .showNoResults=${component.showNoResults}\n          .noResultsMessage=${component.noResultsMessage}\n          .renderItemConfig=${component.renderItemConfig}\n          .blockValueChange=${component.blockValueChange}\n          .noWidthSync=${component.noWidthSync}\n          .enableTabClose=${component.enableTabClose}\n          .data=${component.data}\n          .open=${component.open}\n          .loading=${component.loading}\n          .portal=${component.portal}\n          .descriptionSearchEnabled=${component.descriptionSearchEnabled}\n          .allowHtmlLabel=${component.allowHtmlLabel}\n          .enableDescription=${component.enableDescription}\n          .tickOnSelect=${component.tickOnSelect}\n          .legacy=${component.legacy}\n          @nile-input=${(e: CustomEvent) => component.syncValueFromVirtualSelect(e)}\n          @nile-change=${(e: CustomEvent) => component.syncValueFromVirtualSelect(e)}\n          exportparts=\"\n            select-options,\n            select-no-results,\n            virtualized,\n            form-control,\n            form-control-label,\n            form-control-input,\n            combobox,\n            prefix,\n            display-input,\n            tags,\n            tag,\n            clear-button,\n            suffix,\n            expand-icon,\n            listbox,\n            search,\n            loader,\n            footer,\n            tag__content,\n            option__base,\n            option__label,\n            option__prefix,\n            option__suffix,\n            option__checked-icon,\n            option__checkbox,\n            option__label_container,\n            option__description\n          \"\n        >\n          <slot name=\"prefix\" slot=\"prefix\"></slot>\n        </nile-virtual-select>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"virtual-scroll-helper.js","sourceRoot":"","sources":["../../../src/nile-select/virtual-scroll-helper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAGhD;;GAEG;AACH,MAAM,OAAO,mBAAmB;IAG9B,YAAY,SAAsB;QAChC,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;IAC7B,CAAC;IAED,wBAAwB;QACtB,MAAM,SAAS,GAAG,IAAI,CAAC,SAAgB,CAAC;QACxC,MAAM,WAAW,GAAG,CAAC,CAAC,SAAS,CAAC,WAAW,CAAC;QAE5C,OAAO,IAAI,CAAA;;;kBAGG,SAAS,CAAC,IAAI;mBACb,SAAS,CAAC,KAAK;+BACH,WAAW,IAAI,CAAC,SAAS,CAAC,yBAAyB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,iBAAiB;wBACnG,SAAS,CAAC,UAAU;yBACnB,SAAS,CAAC,WAAW;0BACpB,SAAS,CAAC,YAAY;0BACtB,SAAS,CAAC,YAAY;yBACvB,SAAS,CAAC,WAAW;kBAC5B,SAAS,CAAC,IAAI;2BACL,SAAS,CAAC,aAAa;uCACX,SAAS,CAAC,yBAAyB;gCAC1C,SAAS,CAAC,kBAAkB;4BAChC,SAAS,CAAC,cAAc;sBAC9B,SAAS,CAAC,QAAQ;sBAClB,SAAS,CAAC,QAAQ;0BACd,SAAS,CAAC,YAAY;qBAC3B,SAAS,CAAC,OAAO;oCACF,SAAS,CAAC,sBAAsB;mBACjD,SAAS,CAAC,KAAK;qBACb,SAAS,CAAC,OAAO;sBAChB,SAAS,CAAC,QAAQ;uBACjB,SAAS,CAAC,SAAS;mBACvB,SAAS,CAAC,KAAK;oBACd,SAAS,CAAC,MAAM;kBAClB,SAAS,CAAC,IAAI;mBACb,SAAS,CAAC,KAAK;uBACX,SAAS,CAAC,SAAS;kBACxB,SAAS,CAAC,IAAI;sBACV,SAAS,CAAC,QAAQ;2BACb,SAAS,CAAC,aAAa;8BACpB,SAAS,CAAC,gBAAgB;8BAC1B,SAAS,CAAC,gBAAgB;8BAC1B,SAAS,CAAC,gBAAgB;yBAC/B,SAAS,CAAC,WAAW;4BAClB,SAAS,CAAC,cAAc;kBAClC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI;kBAC5E,SAAS,CAAC,IAAI;qBACX,SAAS,CAAC,OAAO;oBAClB,SAAS,CAAC,MAAM;sCACE,SAAS,CAAC,wBAAwB;4BAC5C,SAAS,CAAC,cAAc;+BACrB,SAAS,CAAC,iBAAiB;0BAChC,SAAS,CAAC,YAAY;oBAC5B,SAAS,CAAC,MAAM;wBACZ,WAAW,CAAC,CAAC,CAAC,CAAC,CAAc,EAAE,EAAE,CAAC,SAAS,CAAC,0BAA0B,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO;yBAClF,WAAW,CAAC,CAAC,CAAC,CAAC,CAAc,EAAE,EAAE,CAAC,SAAS,CAAC,0BAA0B,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkCvG,CAAC;IACJ,CAAC;CACF","sourcesContent":["import { html, noChange, nothing } from 'lit';\nimport { guard } from 'lit/directives/guard.js';\nimport type NileElement from '../internal/nile-element';\n\n/**\n * Helper class to manage virtual scroll functionality for nile-select component\n */\nexport class VirtualScrollHelper {\n  private component: NileElement;\n\n  constructor(component: NileElement) {\n    this.component = component;\n  }\n\n  renderVirtualizedContent(): any {\n    const component = this.component as any;\n    const tooltipPath = !!component.showTooltip;\n\n    return html`\n      <div class=\"virtual-select\">\n        <nile-virtual-select\n          .name=${component.name}\n          .value=${component.value}\n          .maxOptionsVisible=${tooltipPath || !component.maxOptionsVisibleExplicit ? noChange : component.maxOptionsVisible}\n          .autoResize=${component.autoResize}\n          .showTooltip=${component.showTooltip}\n          .chipMinWidth=${component.chipMinWidth}\n          .chipMaxWidth=${component.chipMaxWidth}\n          .placeholder=${component.placeholder}\n          .size=${component.size}\n          .searchEnabled=${component.searchEnabled}\n          .internalSearchPlaceHolder=${component.internalSearchPlaceHolder}\n          .disableLocalSearch=${component.disableLocalSearch}\n          .optionsLoading=${component.optionsLoading}\n          .multiple=${component.multiple}\n          .helpText=${component.helpText}\n          .errorMessage=${component.errorMessage}\n          .warning=${component.warning}\n          .enableVisibilityEffect=${component.enableVisibilityEffect}\n          .error=${component.error}\n          .success=${component.success}\n          .disabled=${component.disabled}\n          .clearable=${component.clearable}\n          .hoist=${component.hoist}\n          .filled=${component.filled}\n          .pill=${component.pill}\n          .label=${component.label}\n          .placement=${component.placement}\n          .form=${component.form}\n          .required=${component.required}\n          .showNoResults=${component.showNoResults}\n          .noResultsMessage=${component.noResultsMessage}\n          .renderItemConfig=${component.renderItemConfig}\n          .blockValueChange=${component.blockValueChange}\n          .noWidthSync=${component.noWidthSync}\n          .enableTabClose=${component.enableTabClose}\n          .data=${tooltipPath ? guard([component.data], () => component.data) : component.data}\n          .open=${component.open}\n          .loading=${component.loading}\n          .portal=${component.portal}\n          .descriptionSearchEnabled=${component.descriptionSearchEnabled}\n          .allowHtmlLabel=${component.allowHtmlLabel}\n          .enableDescription=${component.enableDescription}\n          .tickOnSelect=${component.tickOnSelect}\n          .legacy=${component.legacy}\n          @nile-input=${tooltipPath ? (e: CustomEvent) => component.syncValueFromVirtualSelect(e) : nothing}\n          @nile-change=${tooltipPath ? (e: CustomEvent) => component.syncValueFromVirtualSelect(e) : nothing}\n          exportparts=\"\n            select-options,\n            select-no-results,\n            virtualized,\n            form-control,\n            form-control-label,\n            form-control-input,\n            combobox,\n            prefix,\n            display-input,\n            tags,\n            tag,\n            clear-button,\n            suffix,\n            expand-icon,\n            listbox,\n            search,\n            loader,\n            footer,\n            tag__content,\n            option__base,\n            option__label,\n            option__prefix,\n            option__suffix,\n            option__checked-icon,\n            option__checkbox,\n            option__label_container,\n            option__description\n          \"\n        >\n          <slot name=\"prefix\" slot=\"prefix\"></slot>\n        </nile-virtual-select>\n      </div>\n    `;\n  }\n}\n"]}

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

@@ -89,8 +89,8 @@ export declare class NileVirtualSelect extends NileElement implements NileFormCo
     private visibilityManager?;
     /** The name of the select, submitted as a name/value pair with form data. */
     name: string;
-    /** Array of all option items for virtual scrolling */
     data: any;
+    private lastSeenValue;
     /** Original unfiltered option items for search functionality */
     private originalOptionItems;
     /**
@@ -271,6 +271,8 @@ export declare class NileVirtualSelect extends NileElement implements NileFormCo
     private handleWindowResize;
     private handleWindowScroll;
     private handleFooterClick;
+    /** Narrows `data` to the items that are currently selected (the "Selected" view). */
+    private applySelectedFilter;
     private toggleShowSelected;
     private unSelectAll;
     private handleLabelClick;

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

@@ -102,7 +102,6 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
         this.scrolling = false;
         /** The name of the select, submitted as a name/value pair with form data. */
         this.name = '';
-        /** Array of all option items for virtual scrolling */
         this.data = [];
         /** Original unfiltered option items for search functionality */
         this.originalOptionItems = [];
@@ -513,6 +512,14 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
         event.stopPropagation();
         event.preventDefault();
     }
+    /** Narrows `data` to the items that are currently selected (the "Selected" view). */
+    applySelectedFilter() {
+        const selectedValues = Array.isArray(this.value) ? this.value : [this.value];
+        this.data = this.originalOptionItems.filter((item) => {
+            const itemValue = this.getItemValue(item);
+            return selectedValues.some(val => String(val) === String(itemValue));
+        });
+    }
     toggleShowSelected(event) {
         event.stopPropagation();
         event.preventDefault();
@@ -522,11 +529,7 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
         this.showSelected = !this.showSelected;
         if (this.showSelected) {
             this.searchValue = "";
-            const selectedValues = Array.isArray(this.value) ? this.value : [this.value];
-            this.data = this.originalOptionItems.filter((item) => {
-                const itemValue = this.getItemValue(item);
-                return selectedValues.some(val => String(val) === String(itemValue));
-            });
+            this.applySelectedFilter();
         }
         else {
             this.data = [...this.originalOptionItems];
@@ -665,6 +668,7 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
         });
     }
     selectionChanged() {
+        this.lastSeenValue = this.value;
         const itemsToSearch = this.originalOptionItems.length > 0 ? this.originalOptionItems : this.data;
         this.selectedOptions = VirtualSelectSelectionManager.createVirtualOptionsFromValues(this.value, itemsToSearch, this.getDisplayText.bind(this), this.renderItemConfig?.getValue, this.allowHtmlLabel);
         if (this.multiple) {
@@ -789,7 +793,11 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
         }
     }
     handleValueChange() {
+        const externalValueChange = this.value !== this.lastSeenValue;
         this.selectionChanged();
+        if (externalValueChange && this.showTooltip && this.showSelected) {
+            this.applySelectedFilter();
+        }
         this.requestUpdate();
         // Update body append content if it's active
         if (this.portal && this.portalManager.portalContainerElement) {