npm - @aquera/nile-elements - Versions diffs - 2.0.12 → 2.0.14 - Mend

@aquera/nile-elements 2.0.12 → 2.0.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (83) hide show

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

	@@ -1 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkC/B,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 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"]}
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"]}

package/dist/src/nile-virtual-select/nile-virtual-select.css.js CHANGED Viewed

@@ -244,35 +244,23 @@ export const styles = css `
     display: contents;
   }
-  .select__tags nile-tag {
+  :host([showtooltip]) .select__tags nile-tag {
     flex: 0 1 auto;
     cursor: pointer;
     min-width: 0;
-  }
-  /* A chip is capped - and so truncated - only when a tooltip can reveal the
-     full value. Without one it keeps its natural width and the fit pass moves
-     the surplus into the +N button instead. */
-  :host([showtooltip]) .select__tags nile-tag {
     max-width: var(--nile-width-180px, var(--ng-height-180px));
   }
-  /* Only the fitted layout can move a chip into the +N button, so only there
-     can a chip refuse to shrink. */
-  :host(:not([showtooltip])) .select__tags--fitted nile-tag {
-    flex-shrink: 0;
-  }
-  .select__tags nile-tag::part(base) {
+  :host([showtooltip]) .select__tags nile-tag::part(base) {
     max-width: 100%;
   }
-  .select__tags nile-tag::part(prefix_content_wrapper) {
+  :host([showtooltip]) .select__tags nile-tag::part(prefix_content_wrapper) {
     flex: 1 1 auto;
     min-width: 0;
   }
-  .select__tags nile-tag::part(content) {
+  :host([showtooltip]) .select__tags nile-tag::part(content) {
     display: block;
     flex: 1 1 auto;
     min-width: 0;
@@ -288,7 +276,7 @@ export const styles = css `
     text-overflow: ellipsis;
   }
-  .select__tags nile-tag::part(remove-button) {
+  :host([showtooltip]) .select__tags nile-tag::part(remove-button) {
     flex: 0 0 auto;
   }
@@ -308,7 +296,7 @@ export const styles = css `
     white-space: nowrap;
     cursor: pointer;
     border: 1px dashed
-      var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));
+      var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
     border-radius: var(--nile-radius-sm, var(--ng-radius-sm));
   }
@@ -359,7 +347,7 @@ export const styles = css `
   .select--standard:not(.select--disabled).select--open .select__combobox,
   .select--standard:not(.select--disabled).select--focused .select__combobox {
-    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
   }
   .select--warning .select__combobox {
@@ -378,12 +366,12 @@ export const styles = css `
   /* Filled selects */
   .select--filled .select__combobox {
     border: none;
-    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
     color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
   }
   .select--filled:hover:not(.select--disabled) .select__combobox {
-    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));
   }
   .select--filled.select--disabled .select__combobox {
@@ -394,7 +382,7 @@ export const styles = css `
   .select--filled:not(.select--disabled).select--open .select__combobox,
   .select--filled:not(.select--disabled).select--focused .select__combobox {
-    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
     outline: 3px solid rgba(0, 89, 255, 0.4);
   }
@@ -491,7 +479,7 @@ export const styles = css `
     font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
     font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
     background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
-    border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-secondary-alt));
+    border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
     border-radius: var(--nile-radius-sm, var(--ng-radius-md));
     padding-block: var(--nile-spacing-none, var(--ng-spacing-xs));
     padding-inline: var(--nile-spacing-none, var(--ng-spacing-xs));
@@ -539,7 +527,7 @@ export const styles = css `
     position: sticky;
     bottom: 0px;
     background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
-    border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
     display: flex;
     height: 15px;
     /* Auto layout */
@@ -550,6 +538,9 @@ export const styles = css `
     gap: var(--nile-spacing-none, var(--ng-spacing-none));
     justify-content: space-between;
     box-sizing: unset;
+  }
+  .select__footer--query {
     container-type: inline-size;
     container-name: nile-select-footer;
   }
@@ -618,6 +609,10 @@ export const styles = css `
     }
   }
+  .select__invisible {
+    opacity: 0;
+  }
   .select__prefix--from-options {
     margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-md));
   }
@@ -627,7 +622,7 @@ export const styles = css `
   }
   .virtualized nile-option[selected] {
-    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-active));
   }
   .virtualized nile-option[selected]::part(base) {

package/dist/src/nile-virtual-select/nile-virtual-select.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-virtual-select.css.js","sourceRoot":"","sources":["../../../src/nile-virtual-select/nile-virtual-select.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAypBxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/*\n Copyright Aquera Inc 2025\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {css} from 'lit';\n\n/\n Select_2 CSS\n /\nexport const styles = css`\n :host {\n box-sizing: border-box;\n --ng-nxt-gen-outline: var(--ng-border-width-1) solid var(--ng-colors-border-brand);\n --ng-nxt-gen-outline-error: var(--ng-border-width-1) solid var(--ng-colors-border-error);\n --ng-private-outline-transparent: var(--ng-border-width-1) solid transparent;\n --ng-box-shadow: 0px 12px 16px -4px var(--ng-colors-effects-shadow-lg-01, rgba(10, 13, 18, 0.08)), 0px 4px 6px -2px var(--ng-colors-effects-shadow-lg-02, rgba(10, 13, 18, 0.03)), 0px 2px 2px -1px var(--ng-colors-effects-shadow-lg-03, rgba(10, 13, 18, 0.04));\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n .virtualized{\n min-width: 110px;\n width: 100%;\n }\n\n .virtualized ::slotted(nile-option),\n .virtualized nile-option {\n width: 100%;\n display: block;\n }\n\n / Ensure proper sizing for non-virtualized options (small datasets) /\n .virtualized:not(:has(lit-virtualizer)) {\n display: flex;\n flex-direction: column;\n }\n\n .virtualized:not(:has(lit-virtualizer)) nile-option {\n flex-shrink: 0;\n }\n\n :host ,\n :host ::before,\n :host ::after {\n box-sizing: inherit;\n }\n\n :host([disabled]) .form-control--has-label .form-control__label {\n user-select: none;\n -webkit-user-select: none;\n }\n\n [hidden] {\n display: none !important;\n }\n\n .form-control .form-control__label {\n display: none;\n }\n\n .form-control .form-control__help-text {\n display: none;\n }\n\n /* Label /\n .form-control--has-label .form-control__label {\n display: block;\n margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n font-style: normal;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n line-height: var(--nile-spacing-2xl, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '';\n margin-inline-start: -2px;\n color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n }\n\n /* Help text /\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n margin-top: var(--nile-spacing-lg, var(--ng-spacing-lg));\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n }\n\n .form-control--has-help-text.form-control--radio-group\n .form-control__help-text {\n margin-top: var(--nile-spacing-xs, var(--ng-spacing-sm));\n }\n\n :host {\n display: block;\n }\n\n /* The popup /\n .select {\n flex: 1 1 auto;\n display: inline-flex;\n width: 100%;\n position: relative;\n vertical-align: middle;\n }\n\n .select::part(popup) {\n z-index: 9999;\n }\n\n .select[data-current-placement^='top']::part(popup) {\n transform-origin: bottom;\n }\n\n .select[data-current-placement^='bottom']::part(popup) {\n transform-origin: top;\n }\n\n / Combobox /\n .select__combobox {\n flex: 1;\n display: flex;\n width: 100%;\n min-width: 0;\n position: relative;\n align-items: center;\n justify-content: start;\n font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n letter-spacing: normal;\n vertical-align: middle;\n overflow: hidden;\n cursor: pointer;\n transition: 150ms color, 150ms border, 150ms box-shadow,\n 150ms background-color;\n }\n\n .select__display-input {\n position: relative;\n width: 100%;\n font: inherit;\n border: none;\n background: none;\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n cursor: inherit;\n overflow: hidden;\n padding: var(--nile-spacing-none, var(--ng-spacing-none));\n margin: var(--nile-spacing-none, var(--ng-spacing-none));\n -webkit-appearance: none;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3,var(--ng-font-size-text-md));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n }\n\n .select__display-input::placeholder {\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n color: var(--nile-colors-text-placeholder, var(--ng-colors-text-placeholder));\n }\n\n .select:not(.select--disabled):hover .select__display-input {\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n }\n\n .select__display-input:focus {\n outline: none;\n }\n\n / Visually hide the display input when multiple is enabled /\n .select--multiple:not(.select--placeholder-visible) .select__display-input {\n position: absolute;\n z-index: -1;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n }\n\n .select__value-input {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n padding: var(--nile-spacing-none, var(--ng-spacing-none));\n margin: var(--nile-spacing-none, var(--ng-spacing-none));\n opacity: 0;\n z-index: -1;\n }\n\n .select__tags {\n display: flex;\n flex: 1;\n align-items: center;\n flex-wrap: nowrap;\n margin-inline-start: var(--nile-spacing-7px, var(--ng-spacing-md));\n width: 100%;\n overflow: hidden;\n }\n\n .select__tags-count {\n color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-style: normal;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n margin: var(--nile-spacing-sm, var(--ng-spacing-sm));\n }\n\n .select__tags-count-clearable {\n margin-right: var(--nile-spacing-5xl, var(--ng-spacing-5xl));\n }\n\n button.select__tags-count {\n appearance: none;\n -webkit-appearance: none;\n background: none;\n text-align: inherit;\n }\n\n button.select__tags-count:disabled {\n cursor: not-allowed;\n }\n\n .select__tags--fitted {\n min-width: 0;\n }\n\n .select__tags nile-lite-tooltip.select__tag-tip {\n display: contents;\n }\n\n .select__tags nile-tag {\n flex: 0 1 auto;\n cursor: pointer;\n min-width: 0;\n }\n\n / A chip is capped - and so truncated - only when a tooltip can reveal the\n full value. Without one it keeps its natural width and the fit pass moves\n the surplus into the +N button instead. /\n :host([showtooltip]) .select__tags nile-tag {\n max-width: var(--nile-width-180px, var(--ng-height-180px));\n }\n\n / Only the fitted layout can move a chip into the +N button, so only there\n can a chip refuse to shrink. /\n :host(:not([showtooltip])) .select__tags--fitted nile-tag {\n flex-shrink: 0;\n }\n\n .select__tags nile-tag::part(base) {\n max-width: 100%;\n }\n\n .select__tags nile-tag::part(prefix_content_wrapper) {\n flex: 1 1 auto;\n min-width: 0;\n }\n\n .select__tags nile-tag::part(content) {\n display: block;\n flex: 1 1 auto;\n min-width: 0;\n / The tag's line-height of 1 leaves the clip box shorter than the glyph\n box, so descenders are cut. Pad the clip box, negate it in layout. /\n padding-block: 3px;\n margin-block: -3px;\n overflow: hidden;\n white-space: nowrap;\n }\n\n :host([showtooltip]) .select__tags nile-tag::part(content) {\n text-overflow: ellipsis;\n }\n\n .select__tags nile-tag::part(remove-button) {\n flex: 0 0 auto;\n }\n\n .select__tags--fitted nile-tag:focus-visible {\n outline: 2px solid var(--nile-colors-primary-600, var(--ng-colors-border-brand));\n outline-offset: 1px;\n border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n }\n\n .select__tags--fitted .select__tags-count {\n flex: 0 0 auto;\n margin: 0;\n padding: 0 var(--nile-spacing-xsmall, var(--ng-spacing-md));\n height: var(--nile-height-26px, var(--ng-height-26px));\n display: inline-flex;\n align-items: center;\n white-space: nowrap;\n cursor: pointer;\n border: 1px dashed\n var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));\n border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n }\n\n .select__tags--fitted .select__tags-count:focus-visible {\n outline: 2px solid var(--nile-colors-primary-600, var(--ng-colors-border-brand));\n outline-offset: 1px;\n }\n\n .select__tags::slotted(nile-tag) {\n cursor: pointer !important;\n }\n\n .select--disabled .select__tags,\n .select--disabled .select__tags::slotted(nile-tag) {\n cursor: not-allowed !important;\n }\n\n .select--disabled .select__display-input{\n color:var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n pointer-events:none;\n }\n\n / Standard selects /\n .select--standard .select__combobox {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n outline: var(--nile-outline-none, var(--ng-private-outline-transparent));\n }\n\n .select--standard .select__combobox:hover {\n border: 1px solid var(--nile-colors-dark-900, var(--ng-colors-border-neutral));\n background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n }\n\n .select--error:hover:not(.select--disabled) .select__combobox {\n border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));\n outline: var(--nile-outline-none, var(--ng-colors-border-error));\n }\n\n .select--standard.select--disabled .select__combobox {\n background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n user-select:none;\n cursor: not-allowed;\n outline: none;\n }\n\n .select--standard:not(.select--disabled).select--open .select__combobox,\n .select--standard:not(.select--disabled).select--focused .select__combobox {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n }\n\n .select--warning .select__combobox {\n border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning));\n }\n\n .select--error .select__combobox {\n border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));\n outline: var(--nile-outline-none, var(--ng-private-outline-transparent));\n }\n\n .select--success {\n border-color: var(--nile-colors-green-500, var(--ng-componentcolors-utility-success-500));\n }\n\n / Filled selects /\n .select--filled .select__combobox {\n border: none;\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n }\n\n .select--filled:hover:not(.select--disabled) .select__combobox {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n }\n\n .select--filled.select--disabled .select__combobox {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled-subtle));\n opacity: var(--nile-opacity-50, var(--ng-opacity-100));\n cursor: not-allowed;\n }\n\n .select--filled:not(.select--disabled).select--open .select__combobox,\n .select--filled:not(.select--disabled).select--focused .select__combobox {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n outline: 3px solid rgba(0, 89, 255, 0.4);\n }\n\n .select--medium .select__combobox {\n border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n padding: var(--nile-spacing-lg, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n height: var(--nile-height-40px, var(--ng-height-40px));\n box-sizing: border-box;\n }\n\n .select--medium .select__clear {\n margin-inline-start: var(--nile-spacing-lg, var(--ng-spacing-lg));\n }\n\n .select--medium .select__prefix::slotted() {\n margin-inline-end: var(--nile-spacing-md, var(--ng-spacing-md));\n }\n\n .select--medium .select__prefix.multiple::slotted() {\n margin-inline-start: var(--nile-spacing-lg, var(--ng-spacing-md));\n }\n\n .select--medium.select--multiple:not(.select--placeholder-visible)\n .select__combobox {\n padding-inline-start: var(--nile-spacing-none, var(--ng-spacing-none));\n }\n\n .select--medium .select__tags {\n gap: var(--nile-spacing-3px, var(--ng-spacing-sm));\n }\n\n / Pills /\n .select--pill.select--medium .select__combobox {\n border-radius: var(--nile-radius-3xl, var(--ng-radius-3xl));\n }\n\n / Prefix /\n .select__prefix {\n flex: 0;\n display: inline-flex;\n align-items: center;\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n }\n\n .select__suffix {\n flex: 0;\n display: inline-flex;\n align-items: center;\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n }\n\n / Clear button /\n .select__clear {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n border: none;\n background: none;\n padding: var(--nile-spacing-none, var(--ng-spacing-none));\n transition: 150ms color;\n cursor: pointer;\n }\n\n .select__clear:hover {\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n }\n\n .select__clear:focus {\n outline: none;\n }\n\n / Expand icon /\n .select__expand-icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n transition: 250ms rotate ease;\n rotate: 0;\n margin-inline-start: var(--nile-spacing-md, var(--ng-spacing-md));\n }\n\n .select--open .select__expand-icon {\n rotate: -180deg;\n }\n\n / Listbox /\n .select__listbox {\n display: block;\n position: relative;\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-secondary-alt));\n border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n padding-block: var(--nile-spacing-none, var(--ng-spacing-xs));\n padding-inline: var(--nile-spacing-none, var(--ng-spacing-xs));\n overscroll-behavior: none;\n / Make sure it adheres to the popup's auto size /\n max-width: var(--auto-size-available-width);\n max-height: var(--auto-size-available-height);\n box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-xs));\n }\n\n .select__options {\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n color: rgb(133, 129, 129);\n width: 100%;\n }\n\n .select__options__search-enabled {\n padding-top: var(--nile-spacing-10px, var(--ng-spacing-lg));\n width: 100%;\n }\n\n .select__listbox::slotted(nile-divider) {\n --spacing: var(--nile-spacing-xs, var(--ng-spacing-sm));\n }\n\n .select__listbox::slotted(small) {\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n padding-block: var(--nile-spacing-xs, var(--ng-spacing-sm));\n padding-inline: var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n\n .select__search {\n position: sticky;\n top: 0px;\n z-index: 1;\n width: calc(100% - 16px);\n padding: var(--nile-spacing-md, var(--ng-spacing-md));\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n margin-bottom: -8px;\n }\n\n .select__footer {\n position: sticky;\n bottom: 0px;\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n display: flex;\n height: 15px;\n / Auto layout */\n display: var(--nile-display-flex, var(--ng-display-flex));\n flex-direction: row;\n align-items: center;\n padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n gap: var(--nile-spacing-none, var(--ng-spacing-none));\n justify-content: space-between;\n box-sizing: unset;\n container-type: inline-size;\n container-name: nile-select-footer;\n }\n\n .select__footer-action,\n .select__footer .select__clear {\n display: inline-flex;\n align-items: center;\n gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n min-width: 0;\n }\n\n .select__footer-glyph {\n flex: 0 0 auto;\n display: inline-flex;\n vertical-align: middle;\n }\n\n .select__footer-label {\n white-space: nowrap;\n }\n\n @container nile-select-footer (max-width: 148px) {\n .select__clear .select__footer-label {\n display: none;\n }\n }\n\n @container nile-select-footer (max-width: 113px) {\n .select__footer-label {\n display: none;\n }\n }\n\n .tag__prefix[slot='prefix'] {\n height: 14px;\n display: inline-block;\n overflow: hidden;\n }\n\n .tag__prefix[slot='prefix'] img {\n max-height: 100%;\n }\n\n .select__loader {\n width: 100%;\n text-align: center;\n display: block;\n }\n\n .select__loader--icon {\n margin-top: var(--nile-spacing-xl, var(--ng-spacing-xl));\n animation: spin 0.6s linear infinite;\n }\n\n .select__no-results {\n padding: var(--nile-spacing-lg, var(--ng-spacing-lg));\n }\n\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n\n .select__prefix--from-options {\n margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-md));\n }\n \n .select__hide-default{\n display: none;\n }\n\n .virtualized nile-option[selected] {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n }\n\n .virtualized nile-option[selected]::part(base) {\n color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n }\n\n .virtualized.no-scroll {\n overflow: hidden !important;\n }\n\n .virtual-select-loader {\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 75%;\n }\n\n .select__footer.loading, .select__options.loading {\n opacity: 0.5;\n pointer-events: none;\n }\n\n .virtual-select-loader {\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 75%;\n }\n\n .select__footer.loading, .select__options.loading {\n opacity: 0.5;\n pointer-events: none;\n }\n .select.select--open .select__combobox {\n border-color: var(--ng-colors-border-brand);\n box-shadow: 0 0 0 1px var(--ng-colors-border-brand) inset ;\n }\n\n :host([enableDescription]) .option::part(base) {\n height: 41px;\n }\n`;\n\nexport default [styles];\n"]}
1	+ {"version":3,"file":"nile-virtual-select.css.js","sourceRoot":"","sources":["../../../src/nile-virtual-select/nile-virtual-select.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAopBxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/*\n Copyright Aquera Inc 2025\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {css} from 'lit';\n\n/\n Select_2 CSS\n /\nexport const styles = css`\n :host {\n box-sizing: border-box;\n --ng-nxt-gen-outline: var(--ng-border-width-1) solid var(--ng-colors-border-brand);\n --ng-nxt-gen-outline-error: var(--ng-border-width-1) solid var(--ng-colors-border-error);\n --ng-private-outline-transparent: var(--ng-border-width-1) solid transparent;\n --ng-box-shadow: 0px 12px 16px -4px var(--ng-colors-effects-shadow-lg-01, rgba(10, 13, 18, 0.08)), 0px 4px 6px -2px var(--ng-colors-effects-shadow-lg-02, rgba(10, 13, 18, 0.03)), 0px 2px 2px -1px var(--ng-colors-effects-shadow-lg-03, rgba(10, 13, 18, 0.04));\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n .virtualized{\n min-width: 110px;\n width: 100%;\n }\n\n .virtualized ::slotted(nile-option),\n .virtualized nile-option {\n width: 100%;\n display: block;\n }\n\n / Ensure proper sizing for non-virtualized options (small datasets) /\n .virtualized:not(:has(lit-virtualizer)) {\n display: flex;\n flex-direction: column;\n }\n\n .virtualized:not(:has(lit-virtualizer)) nile-option {\n flex-shrink: 0;\n }\n\n :host ,\n :host ::before,\n :host ::after {\n box-sizing: inherit;\n }\n\n :host([disabled]) .form-control--has-label .form-control__label {\n user-select: none;\n -webkit-user-select: none;\n }\n\n [hidden] {\n display: none !important;\n }\n\n .form-control .form-control__label {\n display: none;\n }\n\n .form-control .form-control__help-text {\n display: none;\n }\n\n /* Label /\n .form-control--has-label .form-control__label {\n display: block;\n margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n font-style: normal;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n line-height: var(--nile-spacing-2xl, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '';\n margin-inline-start: -2px;\n color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n }\n\n /* Help text /\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n margin-top: var(--nile-spacing-lg, var(--ng-spacing-lg));\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n }\n\n .form-control--has-help-text.form-control--radio-group\n .form-control__help-text {\n margin-top: var(--nile-spacing-xs, var(--ng-spacing-sm));\n }\n\n :host {\n display: block;\n }\n\n /* The popup /\n .select {\n flex: 1 1 auto;\n display: inline-flex;\n width: 100%;\n position: relative;\n vertical-align: middle;\n }\n\n .select::part(popup) {\n z-index: 9999;\n }\n\n .select[data-current-placement^='top']::part(popup) {\n transform-origin: bottom;\n }\n\n .select[data-current-placement^='bottom']::part(popup) {\n transform-origin: top;\n }\n\n / Combobox /\n .select__combobox {\n flex: 1;\n display: flex;\n width: 100%;\n min-width: 0;\n position: relative;\n align-items: center;\n justify-content: start;\n font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n letter-spacing: normal;\n vertical-align: middle;\n overflow: hidden;\n cursor: pointer;\n transition: 150ms color, 150ms border, 150ms box-shadow,\n 150ms background-color;\n }\n\n .select__display-input {\n position: relative;\n width: 100%;\n font: inherit;\n border: none;\n background: none;\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n cursor: inherit;\n overflow: hidden;\n padding: var(--nile-spacing-none, var(--ng-spacing-none));\n margin: var(--nile-spacing-none, var(--ng-spacing-none));\n -webkit-appearance: none;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3,var(--ng-font-size-text-md));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n }\n\n .select__display-input::placeholder {\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n color: var(--nile-colors-text-placeholder, var(--ng-colors-text-placeholder));\n }\n\n .select:not(.select--disabled):hover .select__display-input {\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n }\n\n .select__display-input:focus {\n outline: none;\n }\n\n / Visually hide the display input when multiple is enabled /\n .select--multiple:not(.select--placeholder-visible) .select__display-input {\n position: absolute;\n z-index: -1;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n }\n\n .select__value-input {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n padding: var(--nile-spacing-none, var(--ng-spacing-none));\n margin: var(--nile-spacing-none, var(--ng-spacing-none));\n opacity: 0;\n z-index: -1;\n }\n\n .select__tags {\n display: flex;\n flex: 1;\n align-items: center;\n flex-wrap: nowrap;\n margin-inline-start: var(--nile-spacing-7px, var(--ng-spacing-md));\n width: 100%;\n overflow: hidden;\n }\n\n .select__tags-count {\n color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-style: normal;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n margin: var(--nile-spacing-sm, var(--ng-spacing-sm));\n }\n\n .select__tags-count-clearable {\n margin-right: var(--nile-spacing-5xl, var(--ng-spacing-5xl));\n }\n\n button.select__tags-count {\n appearance: none;\n -webkit-appearance: none;\n background: none;\n text-align: inherit;\n }\n\n button.select__tags-count:disabled {\n cursor: not-allowed;\n }\n\n .select__tags--fitted {\n min-width: 0;\n }\n\n .select__tags nile-lite-tooltip.select__tag-tip {\n display: contents;\n }\n\n :host([showtooltip]) .select__tags nile-tag {\n flex: 0 1 auto;\n cursor: pointer;\n min-width: 0;\n max-width: var(--nile-width-180px, var(--ng-height-180px));\n }\n\n :host([showtooltip]) .select__tags nile-tag::part(base) {\n max-width: 100%;\n }\n\n :host([showtooltip]) .select__tags nile-tag::part(prefix_content_wrapper) {\n flex: 1 1 auto;\n min-width: 0;\n }\n\n :host([showtooltip]) .select__tags nile-tag::part(content) {\n display: block;\n flex: 1 1 auto;\n min-width: 0;\n / The tag's line-height of 1 leaves the clip box shorter than the glyph\n box, so descenders are cut. Pad the clip box, negate it in layout. /\n padding-block: 3px;\n margin-block: -3px;\n overflow: hidden;\n white-space: nowrap;\n }\n\n :host([showtooltip]) .select__tags nile-tag::part(content) {\n text-overflow: ellipsis;\n }\n\n :host([showtooltip]) .select__tags nile-tag::part(remove-button) {\n flex: 0 0 auto;\n }\n\n .select__tags--fitted nile-tag:focus-visible {\n outline: 2px solid var(--nile-colors-primary-600, var(--ng-colors-border-brand));\n outline-offset: 1px;\n border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n }\n\n .select__tags--fitted .select__tags-count {\n flex: 0 0 auto;\n margin: 0;\n padding: 0 var(--nile-spacing-xsmall, var(--ng-spacing-md));\n height: var(--nile-height-26px, var(--ng-height-26px));\n display: inline-flex;\n align-items: center;\n white-space: nowrap;\n cursor: pointer;\n border: 1px dashed\n var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n }\n\n .select__tags--fitted .select__tags-count:focus-visible {\n outline: 2px solid var(--nile-colors-primary-600, var(--ng-colors-border-brand));\n outline-offset: 1px;\n }\n\n .select__tags::slotted(nile-tag) {\n cursor: pointer !important;\n }\n\n .select--disabled .select__tags,\n .select--disabled .select__tags::slotted(nile-tag) {\n cursor: not-allowed !important;\n }\n\n .select--disabled .select__display-input{\n color:var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n pointer-events:none;\n }\n\n / Standard selects /\n .select--standard .select__combobox {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n outline: var(--nile-outline-none, var(--ng-private-outline-transparent));\n }\n\n .select--standard .select__combobox:hover {\n border: 1px solid var(--nile-colors-dark-900, var(--ng-colors-border-neutral));\n background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n }\n\n .select--error:hover:not(.select--disabled) .select__combobox {\n border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));\n outline: var(--nile-outline-none, var(--ng-colors-border-error));\n }\n\n .select--standard.select--disabled .select__combobox {\n background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n user-select:none;\n cursor: not-allowed;\n outline: none;\n }\n\n .select--standard:not(.select--disabled).select--open .select__combobox,\n .select--standard:not(.select--disabled).select--focused .select__combobox {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n }\n\n .select--warning .select__combobox {\n border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning));\n }\n\n .select--error .select__combobox {\n border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));\n outline: var(--nile-outline-none, var(--ng-private-outline-transparent));\n }\n\n .select--success {\n border-color: var(--nile-colors-green-500, var(--ng-componentcolors-utility-success-500));\n }\n\n / Filled selects /\n .select--filled .select__combobox {\n border: none;\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n }\n\n .select--filled:hover:not(.select--disabled) .select__combobox {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));\n }\n\n .select--filled.select--disabled .select__combobox {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled-subtle));\n opacity: var(--nile-opacity-50, var(--ng-opacity-100));\n cursor: not-allowed;\n }\n\n .select--filled:not(.select--disabled).select--open .select__combobox,\n .select--filled:not(.select--disabled).select--focused .select__combobox {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n outline: 3px solid rgba(0, 89, 255, 0.4);\n }\n\n .select--medium .select__combobox {\n border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n padding: var(--nile-spacing-lg, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n height: var(--nile-height-40px, var(--ng-height-40px));\n box-sizing: border-box;\n }\n\n .select--medium .select__clear {\n margin-inline-start: var(--nile-spacing-lg, var(--ng-spacing-lg));\n }\n\n .select--medium .select__prefix::slotted() {\n margin-inline-end: var(--nile-spacing-md, var(--ng-spacing-md));\n }\n\n .select--medium .select__prefix.multiple::slotted() {\n margin-inline-start: var(--nile-spacing-lg, var(--ng-spacing-md));\n }\n\n .select--medium.select--multiple:not(.select--placeholder-visible)\n .select__combobox {\n padding-inline-start: var(--nile-spacing-none, var(--ng-spacing-none));\n }\n\n .select--medium .select__tags {\n gap: var(--nile-spacing-3px, var(--ng-spacing-sm));\n }\n\n / Pills /\n .select--pill.select--medium .select__combobox {\n border-radius: var(--nile-radius-3xl, var(--ng-radius-3xl));\n }\n\n / Prefix /\n .select__prefix {\n flex: 0;\n display: inline-flex;\n align-items: center;\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n }\n\n .select__suffix {\n flex: 0;\n display: inline-flex;\n align-items: center;\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n }\n\n / Clear button /\n .select__clear {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n border: none;\n background: none;\n padding: var(--nile-spacing-none, var(--ng-spacing-none));\n transition: 150ms color;\n cursor: pointer;\n }\n\n .select__clear:hover {\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n }\n\n .select__clear:focus {\n outline: none;\n }\n\n / Expand icon /\n .select__expand-icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n transition: 250ms rotate ease;\n rotate: 0;\n margin-inline-start: var(--nile-spacing-md, var(--ng-spacing-md));\n }\n\n .select--open .select__expand-icon {\n rotate: -180deg;\n }\n\n / Listbox /\n .select__listbox {\n display: block;\n position: relative;\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n padding-block: var(--nile-spacing-none, var(--ng-spacing-xs));\n padding-inline: var(--nile-spacing-none, var(--ng-spacing-xs));\n overscroll-behavior: none;\n / Make sure it adheres to the popup's auto size /\n max-width: var(--auto-size-available-width);\n max-height: var(--auto-size-available-height);\n box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-xs));\n }\n\n .select__options {\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n color: rgb(133, 129, 129);\n width: 100%;\n }\n\n .select__options__search-enabled {\n padding-top: var(--nile-spacing-10px, var(--ng-spacing-lg));\n width: 100%;\n }\n\n .select__listbox::slotted(nile-divider) {\n --spacing: var(--nile-spacing-xs, var(--ng-spacing-sm));\n }\n\n .select__listbox::slotted(small) {\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n padding-block: var(--nile-spacing-xs, var(--ng-spacing-sm));\n padding-inline: var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n\n .select__search {\n position: sticky;\n top: 0px;\n z-index: 1;\n width: calc(100% - 16px);\n padding: var(--nile-spacing-md, var(--ng-spacing-md));\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n margin-bottom: -8px;\n }\n\n .select__footer {\n position: sticky;\n bottom: 0px;\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n display: flex;\n height: 15px;\n / Auto layout */\n display: var(--nile-display-flex, var(--ng-display-flex));\n flex-direction: row;\n align-items: center;\n padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n gap: var(--nile-spacing-none, var(--ng-spacing-none));\n justify-content: space-between;\n box-sizing: unset;\n }\n\n .select__footer--query {\n container-type: inline-size;\n container-name: nile-select-footer;\n }\n\n .select__footer-action,\n .select__footer .select__clear {\n display: inline-flex;\n align-items: center;\n gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n min-width: 0;\n }\n\n .select__footer-glyph {\n flex: 0 0 auto;\n display: inline-flex;\n vertical-align: middle;\n }\n\n .select__footer-label {\n white-space: nowrap;\n }\n\n @container nile-select-footer (max-width: 148px) {\n .select__clear .select__footer-label {\n display: none;\n }\n }\n\n @container nile-select-footer (max-width: 113px) {\n .select__footer-label {\n display: none;\n }\n }\n\n .tag__prefix[slot='prefix'] {\n height: 14px;\n display: inline-block;\n overflow: hidden;\n }\n\n .tag__prefix[slot='prefix'] img {\n max-height: 100%;\n }\n\n .select__loader {\n width: 100%;\n text-align: center;\n display: block;\n }\n\n .select__loader--icon {\n margin-top: var(--nile-spacing-xl, var(--ng-spacing-xl));\n animation: spin 0.6s linear infinite;\n }\n\n .select__no-results {\n padding: var(--nile-spacing-lg, var(--ng-spacing-lg));\n }\n\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n\n .select__invisible {\n opacity: 0;\n }\n\n .select__prefix--from-options {\n margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-md));\n }\n \n .select__hide-default{\n display: none;\n }\n\n .virtualized nile-option[selected] {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-active));\n }\n\n .virtualized nile-option[selected]::part(base) {\n color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n }\n\n .virtualized.no-scroll {\n overflow: hidden !important;\n }\n\n .virtual-select-loader {\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 75%;\n }\n\n .select__footer.loading, .select__options.loading {\n opacity: 0.5;\n pointer-events: none;\n }\n\n .virtual-select-loader {\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 75%;\n }\n\n .select__footer.loading, .select__options.loading {\n opacity: 0.5;\n pointer-events: none;\n }\n .select.select--open .select__combobox {\n border-color: var(--ng-colors-border-brand);\n box-shadow: 0 0 0 1px var(--ng-colors-border-brand) inset ;\n }\n\n :host([enableDescription]) .option::part(base) {\n height: 41px;\n }\n`;\n\nexport default [styles];\n"]}

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

@@ -186,16 +186,20 @@ export declare class NileVirtualSelect extends NileElement implements NileFormCo
     get maxOptionsVisible(): number;
     set maxOptionsVisible(value: number);
     private get chipFittingEnabled();
+    private get legacyTagFitEnabled();
+    private setFittedMaxOptionsVisible;
     /** Minimum width, in px, of a squeezed chip. Needs `showtooltip`. */
     chipMinWidth: number;
     /** Maximum width, in px, of a squeezed chip. Needs `showtooltip`. */
     chipMaxWidth: number;
     /**
-     * Shows a chip's full value in a tooltip when its text is clipped, and is
-     * what allows a chip to be truncated at all.
+     * Opts into the fitted chip row: chips are sized between chipMinWidth and chipMaxWidth, the
+     * rest collapse into a +N button, and a clipped chip shows its full value in a tooltip.
+     * Off by default, which keeps the pre-2.0.9 chip row.
      */
     showTooltip: boolean;
     private hiddenChipCount;
+    oldMaxOptionsVisible: number;
     /** Last measured width of the overflow button, in px. */
     private lastOverflowWidth;
     private chipFitFrame;
@@ -322,6 +326,7 @@ export declare class NileVirtualSelect extends NileElement implements NileFormCo
     private renderDisplayInput;
     private renderFittedTags;
     private renderTags;
+    private renderLegacyTag;
     private renderValueInput;
     private renderClearButton;
     private renderSuffix;
@@ -337,9 +342,12 @@ export declare class NileVirtualSelect extends NileElement implements NileFormCo
     private updateValidity;
     private setupResizeObserver;
     private calculateTotalWidthOfTags;
+    private calculateWidthOfSelectTagsDiv;
+    private fitTagsLegacy;
     private allocateChipWidths;
     private computeChipFit;
     private layoutChips;
+    private labelOverflows;
     private isChipClipped;
     private refreshClippedChips;
     private scheduleClipCheck;

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

@@ -199,11 +199,13 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
         /** Maximum width, in px, of a squeezed chip. Needs `showtooltip`. */
         this.chipMaxWidth = 180;
         /**
-         * Shows a chip's full value in a tooltip when its text is clipped, and is
-         * what allows a chip to be truncated at all.
+         * Opts into the fitted chip row: chips are sized between chipMinWidth and chipMaxWidth, the
+         * rest collapse into a +N button, and a clipped chip shows its full value in a tooltip.
+         * Off by default, which keeps the pre-2.0.9 chip row.
          */
         this.showTooltip = false;
         this.hiddenChipCount = 0;
+        this.oldMaxOptionsVisible = 1;
         /** Last measured width of the overflow button, in px. */
         this.lastOverflowWidth = 0;
         this.chipFitFrame = 0;
@@ -270,7 +272,15 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
         this.requestUpdate('maxOptionsVisible', previous);
     }
     get chipFittingEnabled() {
-        return !!this.multiple && !this.maxOptionsVisibleExplicit;
+        return !!this.multiple && this.showTooltip && !this.maxOptionsVisibleExplicit;
+    }
+    get legacyTagFitEnabled() {
+        return !!this.multiple && !this.showTooltip;
+    }
+    setFittedMaxOptionsVisible(value) {
+        const previous = this._maxOptionsVisible;
+        this._maxOptionsVisible = value;
+        this.requestUpdate('maxOptionsVisible', previous);
     }
     /** Gets the validity state object */
     get validity() {
@@ -308,9 +318,15 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
         }
         if (changedProperties.has('autoResize') ||
             changedProperties.has('multiple') ||
-            changedProperties.has('maxOptionsVisible')) {
+            changedProperties.has('maxOptionsVisible') ||
+            changedProperties.has('showTooltip')) {
             this.setupResizeObserver();
         }
+        if (changedProperties.has('showTooltip') &&
+            changedProperties.get('showTooltip') !== undefined &&
+            this.legacyTagFitEnabled) {
+            this.calculateTotalWidthOfTags();
+        }
         if (changedProperties.has('chipMinWidth') ||
             changedProperties.has('chipMaxWidth')) {
             this.destroyChipFit();
@@ -1153,30 +1169,14 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
             ${this.selectedOptions.map((option, index) => {
                 if (index < this.maxOptionsVisible ||
                     this.maxOptionsVisible <= 0) {
-                    return html `
-                  <nile-lite-tooltip
+                    return this.showTooltip
+                        ? html `<nile-lite-tooltip
                     class="select__tag-tip"
                     .content=${option.getTextLabel()}
                     ?disabled=${this.chipTooltipDisabled(index)}
-                  >
-                  <nile-tag
-                    part="tag"
-                    exportparts="
-                        base:tag__base,
-                        content:tag__content,
-                        remove-button:tag__remove-button,
-                        remove-button__base:tag__remove-button__base
-                      "
-                    style="max-width:${this.chipMaxWidth}px"
-                    ?pill=${this.pill}
-                    size=${this.size}
-                    removable
-                    @nile-remove=${(event) => this.handleTagRemove(event, option)}
-                  >
-                    ${option.getTextLabel()}
-                  </nile-tag>
-                  </nile-lite-tooltip>
-                `;
+                      >${this.renderLegacyTag(option, index)}</nile-lite-tooltip
+                    >`
+                        : this.renderLegacyTag(option, index);
                 }
                 else if (index === this.maxOptionsVisible) {
                     return html `
@@ -1193,6 +1193,31 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
         `
             : html ``;
     }
+    renderLegacyTag(option, index) {
+        const classes = {
+            select__invisible: index + 1 > this.oldMaxOptionsVisible &&
+                this.maxOptionsVisible === Infinity,
+        };
+        return html `
+      <nile-tag
+        class=${classMap(classes)}
+        part="tag"
+        exportparts="
+            base:tag__base,
+            content:tag__content,
+            remove-button:tag__remove-button,
+            remove-button__base:tag__remove-button__base
+          "
+        style=${ifDefined(this.showTooltip ? `max-width:${this.chipMaxWidth}px` : undefined)}
+        ?pill=${this.pill}
+        size=${this.size}
+        removable
+        @nile-remove=${(event) => this.handleTagRemove(event, option)}
+      >
+        ${option.getTextLabel()}
+      </nile-tag>
+    `;
+    }
     renderValueInput() {
         return html `
       <input
@@ -1318,7 +1343,11 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
             ? html `
           <div
             part="footer"
-            class="select__footer ${this.loading ? 'loading' : ''}"
+            class=${classMap({
+                'select__footer': true,
+                loading: !!this.loading,
+                'select__footer--query': !this.noWidthSync || this.portal,
+            })}
             @click="${this.handleFooterClick}"
           >
             <span
@@ -1385,7 +1414,7 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
         });
     }
     setupResizeObserver() {
-        const wanted = this.autoResize && this.chipFittingEnabled
+        const wanted = this.autoResize && (this.chipFittingEnabled || this.legacyTagFitEnabled)
             ? this.shadowRoot?.querySelector('.select__tags') ??
                 undefined
             : undefined;
@@ -1408,6 +1437,10 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
         }
     }
     calculateTotalWidthOfTags() {
+        if (this.legacyTagFitEnabled) {
+            this.fitTagsLegacy();
+            return;
+        }
         if (!this.chipFittingEnabled)
             return;
         if (this.chipFitFrame)
@@ -1417,6 +1450,50 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
             this.layoutChips();
         });
     }
+    calculateWidthOfSelectTagsDiv() {
+        if (this.shadowRoot) {
+            const selectTagsDiv = this.shadowRoot.querySelector('.select__tags');
+            if (selectTagsDiv) {
+                const width = selectTagsDiv.offsetWidth;
+                return width - 70;
+            }
+        }
+        return null;
+    }
+    fitTagsLegacy() {
+        if (this.maxOptionsVisible !== Infinity) {
+            this.oldMaxOptionsVisible = this.maxOptionsVisible;
+        }
+        this.setFittedMaxOptionsVisible(Infinity);
+        setTimeout(() => {
+            const widths = [];
+            if (this.shadowRoot) {
+                const tags = this.shadowRoot.querySelectorAll('nile-tag');
+                tags.forEach(tag => {
+                    if (tag instanceof HTMLElement) {
+                        widths.push(tag.offsetWidth);
+                    }
+                });
+            }
+            if (this.value.length !== widths.length) {
+                return;
+            }
+            const widthOfSelectTagsDiv = this.calculateWidthOfSelectTagsDiv();
+            if (!widthOfSelectTagsDiv) {
+                return;
+            }
+            let summ = 0;
+            let lastindex = 0;
+            for (let i = 0; i < widths.length; i++) {
+                summ += widths[i];
+                if (summ > widthOfSelectTagsDiv) {
+                    lastindex = i;
+                    break;
+                }
+            }
+            this.setFittedMaxOptionsVisible(lastindex);
+        }, 1);
+    }
     allocateChipWidths(natural, available) {
         const min = this.chipMinWidth;
         const max = this.chipMaxWidth;
@@ -1541,13 +1618,45 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
         }
         this.refreshClippedChips();
     }
+    labelOverflows(content) {
+        let left = Infinity;
+        let right = -Infinity;
+        const range = document.createRange();
+        for (const node of content.assignedNodes({ flatten: true })) {
+            let rect;
+            if (node.nodeType === Node.TEXT_NODE) {
+                if (!node.textContent?.trim())
+                    continue;
+                range.selectNodeContents(node);
+                rect = range.getBoundingClientRect();
+            }
+            else if (node instanceof Element) {
+                rect = node.getBoundingClientRect();
+            }
+            else {
+                continue;
+            }
+            if (rect.width === 0)
+                continue;
+            left = Math.min(left, rect.left);
+            right = Math.max(right, rect.right);
+        }
+        if (right < left)
+            return false;
+        const box = content.getBoundingClientRect();
+        const styles = getComputedStyle(content);
+        const boxLeft = box.left + parseFloat(styles.borderLeftWidth) + parseFloat(styles.paddingLeft);
+        const boxRight = box.right - parseFloat(styles.borderRightWidth) - parseFloat(styles.paddingRight);
+        const epsilon = 1 / 64;
+        return right > boxRight + epsilon || left < boxLeft - epsilon;
+    }
     isChipClipped(el) {
         if (!el)
             return false;
         const root = el.shadowRoot;
         if (root) {
             const content = root.querySelector('[part="content"]');
-            if (content && content.scrollWidth > content.clientWidth + 1)
+            if (content && this.labelOverflows(content))
                 return true;
             const inner = root.querySelector('[part="prefix_content_wrapper"]');
             if (inner && inner.scrollWidth > inner.clientWidth + 1)
@@ -1788,10 +1897,10 @@ __decorate([
     property({ attribute: 'max-options-visible', type: Number })
 ], NileVirtualSelect.prototype, "maxOptionsVisible", null);
 __decorate([
-    property({ type: Number, reflect: true, attribute: true })
+    property({ type: Number, attribute: true })
 ], NileVirtualSelect.prototype, "chipMinWidth", void 0);
 __decorate([
-    property({ type: Number, reflect: true, attribute: true })
+    property({ type: Number, attribute: true })
 ], NileVirtualSelect.prototype, "chipMaxWidth", void 0);
 __decorate([
     property({ type: Boolean, attribute: true, reflect: true })
@@ -1799,6 +1908,9 @@ __decorate([
 __decorate([
     state()
 ], NileVirtualSelect.prototype, "hiddenChipCount", void 0);
+__decorate([
+    state()
+], NileVirtualSelect.prototype, "oldMaxOptionsVisible", void 0);
 __decorate([
     state()
 ], NileVirtualSelect.prototype, "clippedChips", void 0);