@aquera/nile-elements 2.0.12 → 2.0.14

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

@@ -131,6 +131,7 @@ export class NileSelect extends NileElement implements NileFormControl{
   private observedTagsContainer?: Element;
 
   private resizeController = new ResizeController(this, {
+    target: null,
     callback: (entries: ResizeObserverEntry[]) => {
       for (const entry of entries) {
         if (entry.target.classList.contains('select__tags')) {
@@ -141,6 +142,7 @@ export class NileSelect extends NileElement implements NileFormControl{
   });
   private visibilityManager?: VisibilityManager;
   private chipFitFrame = 0;
+  private measurableWatch?: { observer: ResizeObserver; target: Element };
   private lastChipLayout = { hidden: -1, visible: -1 };
   @state() private clippedChips: boolean[] = [];
   private clipFrame = 0;
@@ -158,6 +160,7 @@ export class NileSelect extends NileElement implements NileFormControl{
   @state() selectedOptions: NileOption[] = [];
   @state() oldValue: string | string[] = '';
   @state() private hiddenChipCount = 0;
+  @state() oldMaxOptionsVisible: number = 1;
 
   /** Last measured width of the overflow button, in px. */
   private lastOverflowWidth = 0;
@@ -269,18 +272,29 @@ export class NileSelect extends NileElement implements NileFormControl{
   }
 
   private get chipFittingEnabled(): boolean {
-    return !!this.multiple && !this.maxOptionsVisibleExplicit;
+    return !!this.multiple && this.showTooltip && !this.maxOptionsVisibleExplicit;
+  }
+
+  private get legacyTagFitEnabled(): boolean {
+    return !!this.multiple && !this.showTooltip;
+  }
+
+  private setFittedMaxOptionsVisible(value: number): void {
+    const previous = this._maxOptionsVisible;
+    this._maxOptionsVisible = value;
+    this.requestUpdate('maxOptionsVisible', previous);
   }
 
   /** Minimum width, in px, of a squeezed chip. Needs `showtooltip`. */
-  @property({ type: Number, reflect: true, attribute: true }) chipMinWidth = 110;
+  @property({ type: Number, attribute: true }) chipMinWidth = 110;
 
   /** Maximum width, in px, of a squeezed chip. Needs `showtooltip`. */
-  @property({ type: Number, reflect: true, attribute: true }) chipMaxWidth = 180;
+  @property({ type: Number, attribute: true }) 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.
    */
   @property({ type: Boolean, attribute: true, reflect: true }) showTooltip = false;
 
@@ -399,6 +413,9 @@ export class NileSelect extends NileElement implements NileFormControl{
 
     // Because this is a form control, it shouldn't be opened initially
     this.open = false;
+    if (this.hasUpdated && this.chipFittingEnabled) {
+      this.calculateTotalWidthOfTags();
+    }
     this.emit('nile-init');
   }
 
@@ -418,7 +435,7 @@ export class NileSelect extends NileElement implements NileFormControl{
 
   private setupResizeObserver(): void {
     const wanted =
-      this.autoResize && this.chipFittingEnabled
+      this.autoResize && (this.chipFittingEnabled || this.legacyTagFitEnabled)
         ? (this.shadowRoot?.querySelector('.select__tags') as HTMLElement | null) ??
           undefined
         : undefined;
@@ -456,6 +473,12 @@ export class NileSelect extends NileElement implements NileFormControl{
     }
   }
 
+  syncValueFromVirtualSelect(event: CustomEvent<{ value?: string | string[] }>) {
+    if (event.composedPath()[0] !== event.currentTarget) return;
+    if (!event.detail || !('value' in event.detail)) return;
+    this.value = event.detail.value ?? (this.multiple ? [] : '');
+  }
+
   protected updated(_changedProperties: PropertyValues): void {
     if(_changedProperties.has('searchEnabled')) {
       this.updateGroupStickyOffsets();
@@ -472,10 +495,18 @@ export class NileSelect extends NileElement implements NileFormControl{
     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();
+    }
     this.syncVirtualSelectMaxOptionsVisible();
     if(_changedProperties.has('enableDescription')) {
       this.setEnableDescriptionInOptions();
@@ -1045,13 +1076,27 @@ export class NileSelect extends NileElement implements NileFormControl{
     return options;
   }
 
-  private getOptionPrefixNodes(option: NileOption): Node[] {
+  private prefixCopies = new WeakMap<NileOption, Map<string, { markup: string; nodes: Node[] }>>();
+
+  private getOptionPrefixNodes(option: NileOption, site: 'trigger' | 'chip'): Node[] {
     const prefixSlot = option.shadowRoot?.querySelector(
       'slot[name="prefix"]'
     ) as HTMLSlotElement | null;
     if (!prefixSlot) return [];
 
-    return prefixSlot.assignedElements().map(el => el.cloneNode(true));
+    const sources = prefixSlot.assignedElements();
+    const markup = sources.map(el => el.outerHTML).join('');
+    let sites = this.prefixCopies.get(option);
+    if (!sites) {
+      sites = new Map();
+      this.prefixCopies.set(option, sites);
+    }
+    const cached = sites.get(site);
+    if (cached && cached.markup === markup) return cached.nodes;
+
+    const nodes = sources.map(el => el.cloneNode(true));
+    sites.set(site, { markup, nodes });
+    return nodes;
   }
 
   // Gets the first <nile-option> element
@@ -1458,6 +1503,10 @@ export class NileSelect extends NileElement implements NileFormControl{
   }
 
   calculateTotalWidthOfTags() {
+    if (this.legacyTagFitEnabled) {
+      this.fitTagsLegacy();
+      return;
+    }
     if (!this.chipFittingEnabled) return;
 
     if (this.chipFitFrame) cancelAnimationFrame(this.chipFitFrame);
@@ -1467,6 +1516,56 @@ export class NileSelect extends NileElement implements NileFormControl{
     });
       }
 
+  private calculateWidthOfSelectTagsDiv() {
+    if (this.shadowRoot) {
+      const selectTagsDiv = this.shadowRoot.querySelector('div.select__tags');
+      if (selectTagsDiv instanceof HTMLElement) {
+        const width = selectTagsDiv.offsetWidth;
+        return width - 70;
+      }
+    }
+  }
+
+  private fitTagsLegacy() {
+    if (this.maxOptionsVisible !== Infinity) {
+      this.oldMaxOptionsVisible = this.maxOptionsVisible;
+    }
+
+    this.setFittedMaxOptionsVisible(Infinity);
+    setTimeout(() => {
+      const widths: number[] = [];
+      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);
+      }
+
   private allocateChipWidths(
     natural: number[],
     available: number
@@ -1567,6 +1666,12 @@ export class NileSelect extends NileElement implements NileFormControl{
         return;
       }
 
+    if (container.clientWidth === 0) {
+      this.refitWhenMeasurable(container);
+      return;
+    }
+    this.stopMeasurableWatch();
+
     const overflowEl = container.querySelector(
       '.select__tags-count'
     ) as HTMLElement | null;
@@ -1632,6 +1737,35 @@ export class NileSelect extends NileElement implements NileFormControl{
     this.refreshClippedChips();
   }
 
+  private labelOverflows(content: HTMLSlotElement): boolean {
+    let left = Infinity;
+    let right = -Infinity;
+    const range = document.createRange();
+    for (const node of content.assignedNodes({ flatten: true })) {
+      let rect: DOMRect;
+      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;
+  }
+
   private isChipClipped(el: HTMLElement | null | undefined): boolean {
     if (!el) return false;
 
@@ -1639,8 +1773,8 @@ export class NileSelect extends NileElement implements NileFormControl{
     if (root) {
       const content = root.querySelector(
         '[part="content"]'
-      ) as HTMLElement | null;
-      if (content && content.scrollWidth > content.clientWidth + 1) return true;
+      ) as HTMLSlotElement | null;
+      if (content && this.labelOverflows(content)) return true;
 
       const inner = root.querySelector(
         '[part="prefix_content_wrapper"]'
@@ -1691,6 +1825,25 @@ export class NileSelect extends NileElement implements NileFormControl{
     if (this.clipFrame) cancelAnimationFrame(this.clipFrame);
     this.clipFrame = 0;
     this.lastChipLayout = { hidden: -1, visible: -1 };
+    this.stopMeasurableWatch();
+  }
+
+  private refitWhenMeasurable(container: Element): void {
+    if (!this.isConnected) return;
+    if (this.measurableWatch?.target === container) return;
+    this.stopMeasurableWatch();
+    const observer = new ResizeObserver(entries => {
+      if (!entries.some(entry => entry.contentRect.width > 0)) return;
+      this.stopMeasurableWatch();
+      this.calculateTotalWidthOfTags();
+    });
+    observer.observe(container);
+    this.measurableWatch = { observer, target: container };
+  }
+
+  private stopMeasurableWatch(): void {
+    this.measurableWatch?.observer.disconnect();
+    this.measurableWatch = undefined;
   }
 
   private getChipLabel(option: NileOption): string {
@@ -1761,7 +1914,7 @@ export class NileSelect extends NileElement implements NileFormControl{
       <div part="tags" class="select__tags select__tags--fitted">
         ${this.selectedOptions.map((option, index) => {
           const label = this.getChipLabel(option);
-          const prefixNodes = this.getOptionPrefixNodes(option);
+          const prefixNodes = this.getOptionPrefixNodes(option, 'chip');
           return html`
             <nile-lite-tooltip
               class="select__tag-tip"
@@ -1816,6 +1969,69 @@ export class NileSelect extends NileElement implements NileFormControl{
     `;
   }
 
+  private renderLegacyTags() {
+    return html`
+      <div part="tags" class="select__tags">
+        ${this.selectedOptions.map((option, index) => {
+          if (index < this.maxOptionsVisible || this.maxOptionsVisible <= 0) {
+            return this.showTooltip
+              ? html`<nile-lite-tooltip
+                  class="select__tag-tip"
+                  .content=${option.getTextLabel()}
+                  ?disabled=${this.chipTooltipDisabled(index)}
+                  >${this.renderLegacyTag(option, index)}</nile-lite-tooltip
+                >`
+              : this.renderLegacyTag(option, index);
+          } else if (index === this.maxOptionsVisible) {
+            return html`
+              <span class="select__tags-count"
+                >+${this.selectedOptions.length - index} More
+              </span>
+            `;
+          } else {
+            return null;
+          }
+        })}
+      </div>
+    `;
+  }
+
+  private renderLegacyTag(option: NileOption, index: number) {
+    const prefixNodes = this.getOptionPrefixNodes(option, 'chip');
+    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,
+            prefix:tag__prefix,
+            prefix_content_wrapper:tag__prefix_content_wrapper
+          "
+        style=${ifDefined(
+          this.showTooltip ? `max-width:${this.chipMaxWidth}px` : undefined
+        )}
+        ?pill=${this.pill}
+        size=${this.size}
+        removable
+        @nile-remove=${(event: NileRemoveEvent) =>
+          this.handleTagRemove(event, option)}
+      >
+        ${prefixNodes.length
+          ? html`<span class="tag__prefix" slot="prefix">${prefixNodes}</span>`
+          : ''}
+        ${option.getTextLabel()}
+      </nile-tag>
+    `;
+  }
+
   handleInputAfterInit() {
     this.shadowRoot?.querySelector('nile-input')?.inputFocus();
   }
@@ -1836,7 +2052,7 @@ export class NileSelect extends NileElement implements NileFormControl{
     const hasHelpText = (this.helpText || this.help_text) ? true : false;
     const hasErrorMessage = this.errorMessage ? true : false;
     const prefixNodes = this.selectedOptions[0]
-      ? this.getOptionPrefixNodes(this.selectedOptions[0])
+      ? this.getOptionPrefixNodes(this.selectedOptions[0], 'trigger')
       : [];
 
     return html`
@@ -1951,59 +2167,7 @@ export class NileSelect extends NileElement implements NileFormControl{
               ${this.multiple
                 ? this.chipFittingEnabled
                   ? this.renderFittedTags()
-                  : html`
-                    <div part="tags" class="select__tags">
-                      ${this.selectedOptions.map((option, index) => {
-                        if (
-                          index < this.maxOptionsVisible ||
-                          this.maxOptionsVisible <= 0
-                        ) {
-                          const prefixNodes =
-                            this.getOptionPrefixNodes(option);
-                          return 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,
-                                  prefix:tag__prefix,
-                                  prefix_content_wrapper:tag__prefix_content_wrapper
-                                "
-                              style="max-width:${this.chipMaxWidth}px"
-                              ?pill=${this.pill}
-                              size=${this.size}
-                              removable
-                              @nile-remove=${(event: NileRemoveEvent) =>
-                                this.handleTagRemove(event, option)}
-                            >
-                              ${prefixNodes.length
-                                ? html`<span class="tag__prefix" slot="prefix"
-                                    >${prefixNodes}</span
-                                  >`
-                                : ''}
-                              ${option.getTextLabel()}
-                            </nile-tag>
-                            </nile-lite-tooltip>
-                          `;
-                        } else if (index === this.maxOptionsVisible) {
-                          return html`
-                            <span class="select__tags-count"
-                              >+${this.selectedOptions.length - index} More
-                            </span>
-                          `;
-                        } else {
-                          return null;
-                        }
-                      })}
-                    </div>
-                  `
+                  : this.renderLegacyTags()
                 : ''}
 
               <input
@@ -2115,7 +2279,13 @@ export class NileSelect extends NileElement implements NileFormControl{
               </div>
 
               ${this.hasSlotController.test('pre-footer') || this.multiple
-                ? html`<div part="footer-area" class="select__pre-footer-area">
+                ? html`<div
+                    part="footer-area"
+                    class=${classMap({
+                      'select__pre-footer-area': true,
+                      'select__pre-footer-area--query': !this.noWidthSync || this.portal,
+                    })}
+                  >
                     ${this.hasSlotController.test('pre-footer')
                       ? html`
                       <div part="pre-footer" @click=${this.handlePreFooterClick}>  

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

@@ -60,6 +60,8 @@ export class VirtualScrollHelper {
           .enableDescription=${component.enableDescription}
           .tickOnSelect=${component.tickOnSelect}
           .legacy=${component.legacy}
+          @nile-input=${(e: CustomEvent) => component.syncValueFromVirtualSelect(e)}
+          @nile-change=${(e: CustomEvent) => component.syncValueFromVirtualSelect(e)}
           exportparts="
             select-options,
             select-no-results,

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

@@ -246,35 +246,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;
@@ -290,7 +278,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;
   }
 
@@ -310,7 +298,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));
   }
 
@@ -361,7 +349,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 {
@@ -380,12 +368,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 {
@@ -396,7 +384,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);
   }
 
@@ -493,7 +481,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));
@@ -541,7 +529,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 */
@@ -552,6 +540,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;
   }
@@ -620,6 +611,10 @@ export const styles = css`
     }
   }
 
+  .select__invisible {
+    opacity: 0;
+  }
+
   .select__prefix--from-options {
     margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-md));
   }
@@ -629,7 +624,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) {