@aquera/nile-elements 2.0.11 → 2.0.13

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

@@ -127,7 +127,7 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
   @state() displayLabel = '';
   @state() selectedOptions: VirtualOption[] = [];
   @state() oldValue: string | string[] = '';
-  
+
   private scrollTimeout: number | undefined;
   private scrolling = false;
   private visibilityManager?: VisibilityManager;
@@ -260,7 +260,7 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
   /** Disable width synchronization */
   @property({ type: Boolean, reflect: true }) noWidthSync = false;
 
-  /** 
+  /**
    * When true, the listbox will be appended to the document body instead of the parent container.
    * This is useful when the parent has overflow: hidden, clip-path, or transform applied.
    */
@@ -288,23 +288,35 @@ export class NileVirtualSelect 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;
 
 
   @state() private hiddenChipCount = 0;
+  @state() oldMaxOptionsVisible: number = 1;
 
   /** Last measured width of the overflow button, in px. */
   private lastOverflowWidth = 0;
@@ -353,7 +365,7 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     super.connectedCallback();
     this.initializeComponent();
     this.setupEventListeners();
-    
+
     this.updateComplete.then(() => {
       if (this.value && this.data.length > 0) {
         this.selectionChanged();
@@ -381,10 +393,18 @@ export class NileVirtualSelect 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();
+      }
       if (
         changedProperties.has('chipMinWidth') ||
         changedProperties.has('chipMaxWidth')
@@ -479,7 +499,7 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     document.addEventListener('keydown', this.handleDocumentKeyDown);
     document.addEventListener('mousedown', this.handleDocumentMouseDown);
     window.addEventListener('error', this.handleWindowError);
-    
+
     if (this.portal) {
       window.addEventListener('resize', this.handleWindowResize);
       window.addEventListener('scroll', this.handleWindowScroll, true);
@@ -505,11 +525,11 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     this.emit('nile-blur');
   }
 
-  
+
    protected firstUpdated(_changed: PropertyValues) {
     this.visibilityManager = new VisibilityManager({
       host: this,
-      target: this.combobox,               
+      target: this.combobox,
       enableVisibilityEffect: this.enableVisibilityEffect,
       enableTabClose: this.enableTabClose,
       isOpen: () => this.open,
@@ -532,13 +552,13 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
       emit: (event, detail) => this.emit(`nile-${event}`, detail),
     });
   }
- 
-  
+
+
 
 
   private handleDocumentFocusIn(event: FocusEvent): void {
-    if (!this.open) return;                         
-    const path = event.composedPath(); 
+    if (!this.open) return;
+    const path = event.composedPath();
     const hitSelf  = path.includes(this);
     const hitPopup = this.popup && path.includes(this.popup);
     const hitPortalAppend = this.portal && this.portalManager.portalContainerElement && path.includes(this.portalManager.portalContainerElement);
@@ -600,13 +620,13 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
   }
 
   private handleDocumentMouseDown = (event: MouseEvent): void => {
-    if (!this.open) return;                        
-  
+    if (!this.open) return;
+
     const path = event.composedPath();
     const hitSelf  = path.includes(this);
     const hitPopup = this.popup && path.includes(this.popup);
     const hitPortalAppend = this.portal && this.portalManager.portalContainerElement && path.includes(this.portalManager.portalContainerElement);
-  
+
     if (!hitSelf && !hitPopup && !hitPortalAppend) {
       this.hide();
     }
@@ -770,7 +790,7 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
 
   private handleOptionSelection(option: Element): void {
     const optionValue = (option as any).value;
-    
+
     if (this.multiple) {
       this.toggleOptionSelection(optionValue);
     } else {
@@ -801,13 +821,13 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
 
   private toggleOptionSelection(optionValue: string): void {
     const currentValues = Array.isArray(this.value) ? this.value : [];
-    
+
     if (currentValues.includes(optionValue)) {
       this.value = currentValues.filter(v => v !== optionValue);
     } else {
       this.value = [...currentValues, optionValue];
     }
-    
+
     this.selectionChanged();
   }
 
@@ -841,8 +861,8 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
   private selectionChanged(): void {
     const itemsToSearch = this.originalOptionItems.length > 0 ? this.originalOptionItems : this.data;
     this.selectedOptions = VirtualSelectSelectionManager.createVirtualOptionsFromValues(
-      this.value, 
-      itemsToSearch, 
+      this.value,
+      itemsToSearch,
       this.getDisplayText.bind(this),
       this.renderItemConfig?.getValue,
       this.allowHtmlLabel
@@ -872,7 +892,7 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
 
     this.calculateTotalWidthOfTags();
   }
- 
+
 
   handleSearchFocus(): void {
     document.removeEventListener('keydown', this.handleDocumentKeyDown);
@@ -887,21 +907,21 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     if (this.portal) {
       this.portalManager.updatePortalAppendPosition();
     }
-    
-    this.emit('nile-search', { 
+
+    this.emit('nile-search', {
       query: this.searchValue,
-      name: this.name 
+      name: this.name
     });
-    
+
     if (!this.disableLocalSearch) {
       this.filterVirtualOptions(this.searchValue);
       this.repaintOptionsContainer();
-      
+
     // Reset measured height when search changes (content height may change)
     this.portalManager.resetMeasuredHeight();
     }
   }
-  
+
   repaintOptionsContainer() {
       this.resetScrollPosition();
       this.updateComplete.then(() => {
@@ -922,7 +942,7 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     }
 
     const target = e.target as HTMLElement;
-    
+
     this.emit('nile-scroll', {
       scrollTop: target.scrollTop,
       scrollLeft: target.scrollLeft,
@@ -995,12 +1015,12 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     }
   }
 
-  
+
   @watch('value', { waitUntilFirstUpdate: true })
   handleValueChange(): void {
     this.selectionChanged();
     this.requestUpdate();
-    
+
     // Update body append content if it's active
     if (this.portal && this.portalManager.portalContainerElement) {
       this.portalManager.updatePortalAppendPosition();
@@ -1020,10 +1040,10 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
       this.showNoResults = false;
     }
     this.requestUpdate();
-    
+
     // Reset measured height when data changes (content height may change)
     this.portalManager.resetMeasuredHeight();
-    
+
     // Update body append content if it's active
     if (this.portal && this.portalManager.portalContainerElement) {
       this.portalManager.updatePortalAppendPosition();
@@ -1045,7 +1065,7 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
       this.showNoResults = true;
     }
     this.requestUpdate();
-    
+
     // Update body append content if it's active
     if (this.portal && this.portalManager.portalContainerElement) {
       this.portalManager.updatePortalAppendPosition();
@@ -1070,7 +1090,7 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
       this.showListbox = true;
       await this.updateComplete;
       await this.handleOpen();
-      
+
       if (this.portal) {
         this.portalManager.setupPortalAppend();
       }
@@ -1078,7 +1098,7 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
       this.visibilityManager?.cleanup();
       await this.handleClose();
       this.showListbox = false;
-      
+
       if (this.portal) {
         this.portalManager.cleanupPortalAppend();
       }
@@ -1091,20 +1111,20 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     this.showNoResults = !this.data?.length;
 
     await stopAnimations(this);
-    
+
     // Hide popup initially to prevent flickering during positioning calculation
     // This allows content to be measured while invisible
     if (this.popup?.popup) {
       this.popup.popup.style.visibility = 'hidden';
     }
-    
+
     this.popup.active = true;
-    
+
     // Wait for positioning to complete before showing the popup
     await new Promise(resolve => requestAnimationFrame(resolve));
     // Wait for next frame to allow Floating UI to calculate position
     await new Promise(resolve => requestAnimationFrame(resolve));
-    
+
     // Show popup after positioning is calculated
     if (this.popup?.popup) {
       this.popup.popup.style.visibility = '';
@@ -1120,7 +1140,7 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
       this.data = [...this.originalOptionItems];
       this.wasShowSelectedCheckedOnClose = false;
     }
- 
+
     this.filterVirtualOptions("");
     this.resetScrollPosition();
     this.emit('nile-after-show', { value: this.value, name: this.name });
@@ -1138,17 +1158,17 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     });
     await animateTo(this.popup.popup, keyframes, options);
     this.popup.active = false;
-    
+
     // Reset visibility style when closing
     if (this.popup?.popup) {
       this.popup.popup.style.visibility = '';
     }
 
     this.searchValue = '';
-    
+
     // Reset measured height when popup closes (content may change on next open)
     this.portalManager.resetMeasuredHeight();
-    
+
     this.emit('nile-after-hide', { value: this.value, name: this.name });
   }
 
@@ -1248,10 +1268,10 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
   }
 
   private renderFormControlInput(
-    hasCustomSelect: boolean, 
-    hasClearIcon: boolean, 
-    isPlaceholderVisible: boolean, 
-    hasHelpText: boolean, 
+    hasCustomSelect: boolean,
+    hasClearIcon: boolean,
+    isPlaceholderVisible: boolean,
+    hasHelpText: boolean,
     hasErrorMessage: boolean
   ): TemplateResult {
     return html`
@@ -1441,31 +1461,14 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
                 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: NileRemoveEvent) =>
-                      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`
                   <span class="select__tags-count"
@@ -1481,6 +1484,36 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
       : html``;
   }
 
+  private renderLegacyTag(option: VirtualOption, index: number): TemplateResult {
+    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: NileRemoveEvent) =>
+          this.handleTagRemove(event, option)}
+      >
+        ${option.getTextLabel()}
+      </nile-tag>
+    `;
+  }
+
   private renderValueInput(): TemplateResult {
     return html`
       <input
@@ -1595,7 +1628,7 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
         </span>
       `;
     }
-    
+
     if (this.optionsLoading) {
       return html`
         <span part="loader" class="select__loader">
@@ -1606,7 +1639,7 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
         </span>
       `;
     }
-    
+
     return html``;
   }
 
@@ -1615,7 +1648,11 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
       ? 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
@@ -1708,7 +1745,7 @@ export class NileVirtualSelect 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;
@@ -1735,6 +1772,10 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
   }
 
   private calculateTotalWidthOfTags(): void {
+    if (this.legacyTagFitEnabled) {
+      this.fitTagsLegacy();
+      return;
+    }
     if (!this.chipFittingEnabled) return;
 
     if (this.chipFitFrame) cancelAnimationFrame(this.chipFitFrame);
@@ -1744,6 +1785,57 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     });
   }
 
+  private calculateWidthOfSelectTagsDiv(): number | null {
+    if (this.shadowRoot) {
+      const selectTagsDiv = this.shadowRoot.querySelector('.select__tags') as HTMLElement;
+      if (selectTagsDiv) {
+        const width = selectTagsDiv.offsetWidth;
+        return width - 70;
+      }
+    }
+    return null;
+  }
+
+  private fitTagsLegacy(): void {
+    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
@@ -1913,6 +2005,35 @@ export class NileVirtualSelect 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;
 
@@ -1920,8 +2041,8 @@ export class NileVirtualSelect 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"]'