@aquera/nile-elements 2.0.11 → 2.0.13

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

@@ -100,7 +100,15 @@ let NileSelect = class NileSelect 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() {
@@ -118,6 +126,7 @@ let NileSelect = class NileSelect extends NileElement {
         this.scrolling = false;
         this.options = [];
         this.resizeController = new ResizeController(this, {
+            target: null,
             callback: (entries) => {
                 for (const entry of entries) {
                     if (entry.target.classList.contains('select__tags')) {
@@ -135,6 +144,7 @@ let NileSelect = class NileSelect extends NileElement {
         this.selectedOptions = [];
         this.oldValue = '';
         this.hiddenChipCount = 0;
+        this.oldMaxOptionsVisible = 1;
         /** Last measured width of the overflow button, in px. */
         this.lastOverflowWidth = 0;
         /** The name of the select, submitted as a name/value pair with form data. */
@@ -191,8 +201,9 @@ let NileSelect = class NileSelect 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;
         /** Disables the select control. */
@@ -250,6 +261,7 @@ let NileSelect = class NileSelect extends NileElement {
         this.handleWindowScroll = () => {
             this.portalManager.updatePortalAppendPosition();
         };
+        this.prefixCopies = new WeakMap();
     }
     connectedCallback() {
         super.connectedCallback();
@@ -266,6 +278,9 @@ let NileSelect = class NileSelect extends NileElement {
         this.handleWindowScroll = this.handleWindowScroll.bind(this);
         // 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');
     }
     disconnectedCallback() {
@@ -282,7 +297,7 @@ let NileSelect = class NileSelect extends NileElement {
         this.emit('nile-destroy');
     }
     setupResizeObserver() {
-        const wanted = this.autoResize && this.chipFittingEnabled
+        const wanted = this.autoResize && (this.chipFittingEnabled || this.legacyTagFitEnabled)
             ? this.shadowRoot?.querySelector('.select__tags') ??
                 undefined
             : undefined;
@@ -312,6 +327,13 @@ let NileSelect = class NileSelect extends NileElement {
             inner.maxOptionsVisible = this._maxOptionsVisible;
         }
     }
+    syncValueFromVirtualSelect(event) {
+        if (event.composedPath()[0] !== event.currentTarget)
+            return;
+        if (!event.detail || !('value' in event.detail))
+            return;
+        this.value = event.detail.value ?? (this.multiple ? [] : '');
+    }
     updated(_changedProperties) {
         if (_changedProperties.has('searchEnabled')) {
             this.updateGroupStickyOffsets();
@@ -327,9 +349,15 @@ let NileSelect = class NileSelect 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();
+        }
         this.syncVirtualSelectMaxOptionsVisible();
         if (_changedProperties.has('enableDescription')) {
             this.setEnableDescriptionInOptions();
@@ -799,11 +827,23 @@ let NileSelect = class NileSelect extends NileElement {
         }
         return options;
     }
-    getOptionPrefixNodes(option) {
+    getOptionPrefixNodes(option, site) {
         const prefixSlot = option.shadowRoot?.querySelector('slot[name="prefix"]');
         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
     getFirstOption() {
@@ -1135,6 +1175,10 @@ let NileSelect = class NileSelect extends NileElement {
         event.stopPropagation();
     }
     calculateTotalWidthOfTags() {
+        if (this.legacyTagFitEnabled) {
+            this.fitTagsLegacy();
+            return;
+        }
         if (!this.chipFittingEnabled)
             return;
         if (this.chipFitFrame)
@@ -1144,6 +1188,49 @@ let NileSelect = class NileSelect extends NileElement {
             this.layoutChips();
         });
     }
+    calculateWidthOfSelectTagsDiv() {
+        if (this.shadowRoot) {
+            const selectTagsDiv = this.shadowRoot.querySelector('div.select__tags');
+            if (selectTagsDiv instanceof HTMLElement) {
+                const width = selectTagsDiv.offsetWidth;
+                return width - 70;
+            }
+        }
+    }
+    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;
@@ -1223,6 +1310,11 @@ let NileSelect = class NileSelect extends NileElement {
             this.hiddenChipCount = 0;
             return;
         }
+        if (container.clientWidth === 0) {
+            this.refitWhenMeasurable(container);
+            return;
+        }
+        this.stopMeasurableWatch();
         const overflowEl = container.querySelector('.select__tags-count');
         for (const chip of chips) {
             chip.style.display = '';
@@ -1268,13 +1360,45 @@ let NileSelect = class NileSelect 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)
@@ -1316,6 +1440,26 @@ let NileSelect = class NileSelect extends NileElement {
             cancelAnimationFrame(this.clipFrame);
         this.clipFrame = 0;
         this.lastChipLayout = { hidden: -1, visible: -1 };
+        this.stopMeasurableWatch();
+    }
+    refitWhenMeasurable(container) {
+        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 };
+    }
+    stopMeasurableWatch() {
+        this.measurableWatch?.observer.disconnect();
+        this.measurableWatch = undefined;
     }
     getChipLabel(option) {
         return (option.getTextLabel?.() ?? '').trim();
@@ -1370,7 +1514,7 @@ let NileSelect = class NileSelect extends NileElement {
       <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"
@@ -1422,6 +1566,65 @@ let NileSelect = class NileSelect extends NileElement {
       </div>
     `;
     }
+    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>
+    `;
+    }
+    renderLegacyTag(option, index) {
+        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) => 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();
     }
@@ -1439,7 +1642,7 @@ let NileSelect = class NileSelect extends NileElement {
         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 `
       <div
@@ -1553,57 +1756,7 @@ let NileSelect = class NileSelect extends NileElement {
               ${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) => 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
@@ -1715,7 +1868,13 @@ let NileSelect = class NileSelect extends NileElement {
               </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}>  
@@ -1827,6 +1986,9 @@ __decorate([
 __decorate([
     state()
 ], NileSelect.prototype, "hiddenChipCount", void 0);
+__decorate([
+    state()
+], NileSelect.prototype, "oldMaxOptionsVisible", void 0);
 __decorate([
     property()
 ], NileSelect.prototype, "name", void 0);
@@ -1922,10 +2084,10 @@ __decorate([
     property({ attribute: 'max-options-visible', type: Number })
 ], NileSelect.prototype, "maxOptionsVisible", null);
 __decorate([
-    property({ type: Number, reflect: true, attribute: true })
+    property({ type: Number, attribute: true })
 ], NileSelect.prototype, "chipMinWidth", void 0);
 __decorate([
-    property({ type: Number, reflect: true, attribute: true })
+    property({ type: Number, attribute: true })
 ], NileSelect.prototype, "chipMaxWidth", void 0);
 __decorate([
     property({ type: Boolean, attribute: true, reflect: true })