@watermarkinsights/ripple 5.22.1 → 5.22.2-alpha.1

package/dist/cjs/{app-globals-4987f41b.js → app-globals-a8d426a3.js}

@@ -2,7 +2,7 @@
 
 require('./index-788526f5.js');
 
-const version = "5.22.1";
+const version = "5.22.2-alpha.1";
 
 // PRINT RIPPLE VERSION IN CONSOLE
 // test envs return 0 for plugin.length

package/dist/cjs/loader.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-788526f5.js');
-const appGlobals = require('./app-globals-4987f41b.js');
+const appGlobals = require('./app-globals-a8d426a3.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;

package/dist/cjs/ripple.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-788526f5.js');
-const appGlobals = require('./app-globals-4987f41b.js');
+const appGlobals = require('./app-globals-a8d426a3.js');
 
 /*
  Stencil Client Patch Browser v4.21.0 | MIT Licensed | https://stenciljs.com

package/dist/cjs/wm-option_2.cjs.entry.js

@@ -189,11 +189,8 @@ const Select = class {
         this.scrollableParents = [];
         this.returnFocus = false;
         this.hasAnchor = CSS.supports("top", "anchor(bottom)"); // for FF polyfill
-        //////////////////////////////////////
-        // for multiselect button text
-        this.overflowCount = 0;
         this.displayedOptions = [];
-        this.previousDisplayedOptions = [];
+        this.oldDisplayText = "";
         this.debouncedReposition = functions.debounce(() => {
             this.dropdownPosition();
         }, 100);
@@ -221,6 +218,9 @@ const Select = class {
         // string "false" needs to be treated as bool False because react wrappers convert bool to string.
         return functions.toBool(this.disabled);
     }
+    get displayText() {
+        return this.displayedOptions.map((x) => x.textContent).join(", ");
+    }
     get selectedOptions() {
         return Array.from(this.el.querySelectorAll("wm-option")).filter((x) => x.selected);
     }
@@ -456,22 +456,27 @@ const Select = class {
         this.announcement = message;
     }
     handleOverflow() {
-        // handle overflow + counter for multiselect
-        // this is a fixed measurement accounting for the max width of a 3 character overflow counter
-        const overflowCounterWidth = 38;
-        const computedStyle = window.getComputedStyle(this.buttonEl);
-        // there seems to be no quick way to get an elements width without padding, except for subtracting padding manually
-        const paddingLeft = parseInt(computedStyle.getPropertyValue("padding-left").slice(0, -2));
-        const paddingRight = parseInt(computedStyle.getPropertyValue("padding-right").slice(0, -2));
-        const availableSpace = this.buttonEl.clientWidth - paddingLeft - paddingRight - overflowCounterWidth;
-        this.overflowCount = 0;
-        this.measurementAreaEl.textContent = this.displayedOptions.map((x) => x.textContent).join(", ");
-        let optionsTotalWidth = this.measurementAreaEl.clientWidth;
-        while (optionsTotalWidth > availableSpace && this.displayedOptions.length > 1) {
-            this.overflowCount++;
-            this.displayedOptions.pop();
-            this.measurementAreaEl.textContent = this.displayedOptions.map((x) => x.textContent).join(", ");
-            optionsTotalWidth = this.measurementAreaEl.clientWidth;
+        if (!this.buttonEl) {
+            index.forceUpdate(this.el);
+        }
+        else {
+            // handle overflow + counter for multiselect
+            // this is a fixed measurement accounting for the max width of a 3 character overflow counter
+            const overflowCounterWidth = 38;
+            const computedStyle = window.getComputedStyle(this.buttonEl);
+            // there seems to be no quick way to get an elements width without padding, except for subtracting padding manually
+            const paddingLeft = parseInt(computedStyle.getPropertyValue("padding-left").slice(0, -2));
+            const paddingRight = parseInt(computedStyle.getPropertyValue("padding-right").slice(0, -2));
+            const availableSpace = this.buttonEl.clientWidth - paddingLeft - paddingRight - overflowCounterWidth;
+            this.overflowCount = 0;
+            this.measurementAreaEl.textContent = this.displayText;
+            let optionsTotalWidth = this.measurementAreaEl.clientWidth;
+            while (optionsTotalWidth > availableSpace && this.displayedOptions.length > 1) {
+                this.overflowCount++;
+                this.displayedOptions.pop();
+                this.measurementAreaEl.textContent = this.displayText;
+                optionsTotalWidth = this.measurementAreaEl.clientWidth;
+            }
         }
     }
     setButtonText() {
@@ -481,28 +486,34 @@ const Select = class {
         }
         else {
             this.displayedOptions = this.childOptions.filter((x) => x.selected);
-            const hasChanged = this.displayedOptions !== this.previousDisplayedOptions;
+            const hasChanged = this.displayText !== this.oldDisplayText;
             const noDisplayedOptions = this.displayedOptions.length < 1;
             if (noDisplayedOptions) {
+                this.overflowCount = 0;
                 return this.placeholder;
             }
-            else if (!this.buttonEl) {
-                index.forceUpdate(this.el);
-                return "";
-            }
             else if (hasChanged) {
                 this.handleOverflow();
-                // we need to calc overflowcount as we only want to display allSelected message if there is an overflow...
-                if (this.overflowCount > 0 && this.allSelected) {
-                    // ...but it should be reset so it isn't displayed in that case
-                    this.overflowCount = 0;
+                if (this.allSelected) {
+                    // we want all selected message only if there's an overflow.
+                    if (!this.overflowCount) {
+                        // but on first render we don't know: handleOverflow can't calculate measurements
+                        // in that case, display all selected message even if there's a chance options could have been shown
+                        this.buttonText = this.allSelectedMessage;
+                    }
+                    else if (this.overflowCount > 0)
+                        // if calc could be made and there is an overflow, reset it as it shouldn't be shown
+                        this.overflowCount = 0;
+                    // then display all selected message
                     this.buttonText = this.allSelectedMessage;
                 }
                 else {
-                    this.buttonText = this.displayedOptions.map((x) => x.textContent).join(", ");
+                    // otherwise, if handleOverflow was able to calculate, it set the count and the display text
+                    // if it wasn't able to calculate, the text of all the selected options will be displayed and may truncate (acceptable as fallback)
+                    this.buttonText = this.displayText;
                 }
             }
-            this.previousDisplayedOptions = this.displayedOptions;
+            this.oldDisplayText = this.displayText;
             // the reason for setting a global variable and returning it
             // is that we need the stored value when displayedOptions haven't changed.
             return this.buttonText; // multiselect value
@@ -515,14 +526,14 @@ const Select = class {
     }
     render() {
         const showSubinfo = !this.multiple && this.selectedOptions.length > 0 && this.selectedOptions[0].subinfo;
-        return (index.h(index.Host, { key: 'a9b76bd87b0e9a3264695746cf8f5c8e91d331c8', onBlur: (ev) => this.handleComponentBlur(ev) }, index.h("div", { key: 'f4f46f5db1feb4c8e154c89c5d6f6d94ecc00e88', class: `wrapper ${functions.getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { key: '460e0a75845de26c016d8e7f4eb975c726f9aa3b', class: "label-wrapper" }, index.h("label", { key: 'ffbcd7301f69a8696f0135e2c742d71a0ab03492', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => functions.hideTooltip() }, this.label), 
+        return (index.h(index.Host, { key: 'c79e7d62c63f5609264fe2f5abbbcb7f5bee40cf', onBlur: (ev) => this.handleComponentBlur(ev) }, index.h("div", { key: '3c7f3b82cf3c7b81226d376e15b0ad5dd5a0a3f9', class: `wrapper ${functions.getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { key: '3a0f1bbcbc40a66979dfaf91e0c8d73547d3d387', class: "label-wrapper" }, index.h("label", { key: '6c540fb5f76d12047b52fecb40cda9b921466107', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => functions.hideTooltip() }, this.label), 
         // we can't use aria-required because the listbox is in a sub-component and it is not announced
-        this.requiredField && (index.h("span", { key: '45c1248438954a9b1c078e2bae2aeb20717742ba', class: "required" }, index.h("span", { key: '6a20b3925737ab51fe4ec04d781fce957c09778e', class: "sr-only" }, intl.globalMessages.requiredField), index.h("span", { key: 'f03585760652f5a1e0a06680d1d31ef5cc4d4d99', "aria-hidden": "true" }, "*")))), index.h("div", { key: 'd99cb285408dd1192e8655ab8ffb6d57361acc04', class: "button-wrapper" }, index.h("button", { key: '5368e2962e9ff2686145a2bd93f6bc349af91ea0', id: "selectbtn", disabled: this.isDisabled, "aria-labelledby": "label selectbtn", "aria-describedby": "error", popoverTarget: "dropdown", popoverTargetAction: "toggle", class: "displayedoption", ref: (el) => (this.buttonEl = el) }, index.h("span", { key: 'd3b5766d8e2476e3753bcf5c9b87280d45cb90bf', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, index.h("span", { key: 'd6896018577a376a6a33280c3f082c462e0a59a1', class: "button-text" }, this.setButtonText()), showSubinfo && index.h("span", { key: '08864b9a36c5bcbd2fd09159cfff486475354e9e', class: "subinfo" }, this.selectedOptions[0].subinfo)), index.h("div", { key: '8f689d493982521150f322ab4f02f12523191143', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), index.h("div", { key: '7efb458a3d5bf364e19a62741189f59639300e50', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), index.h("div", { key: 'ef62108b2ca9b10157b39d9e31db14fbde24ec80',
+        this.requiredField && (index.h("span", { key: '10cc3db35973cce6dae99075f28cadf2641ad0e9', class: "required" }, index.h("span", { key: '35695584a1e99e803e4567c0fc86b8b41c0ea2f6', class: "sr-only" }, intl.globalMessages.requiredField), index.h("span", { key: 'b33b35b401f7ee745e10b98c79e46beabeea2aa1', "aria-hidden": "true" }, "*")))), index.h("div", { key: '58ab503b8b998103345197b559c7fb94ebc9c8b3', class: "button-wrapper" }, index.h("button", { key: 'ad0144669cf6569d2edd9e64a3847a8072cb1992', id: "selectbtn", disabled: this.isDisabled, "aria-labelledby": "label selectbtn", "aria-describedby": "error", popoverTarget: "dropdown", popoverTargetAction: "toggle", class: "displayedoption", ref: (el) => (this.buttonEl = el) }, index.h("span", { key: '9b5473e206d14b7be2549df81b0a76d908f35ae3', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, index.h("span", { key: '262679aec8e736332fc0426d24e392fb9c492652', class: "button-text" }, this.setButtonText()), showSubinfo && index.h("span", { key: 'f974e802692149bbf20214224883aa1f1abe4b74', class: "subinfo" }, this.selectedOptions[0].subinfo)), index.h("div", { key: '711281e38df46a26363354effb9cfd6bf78008ae', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), index.h("div", { key: '23f428d49ea0616bef93af1b53654c1ca8b05e4c', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), index.h("div", { key: 'e1f1e61655445d0a899699e246eb48971a50ce09',
             // is-open is for the CSS transition in modern browsers
             // hidden is to wait for position calculations in Firefox
             class: `dropdown ${this.isExpanded ? "is-open" : ""} ${this.isHidden ? "hidden" : ""} ${this.openUp ? "upward" : ""}`, id: "dropdown", popover: "auto", ref: (el) => (this.dropdownEl = el),
             // @ts-ignore -- don't tell typescript but we're in the future
-            onToggle: (ev) => this.handleToggle(ev) }, index.h("priv-option-list", { key: '6aa561516558f5913e82cc8ded2b648a8d0ef46e', ref: (el) => (this.optionListEl = el), multiple: this.multiple, search: this.search, selectAll: this.selectAll, maxHeight: this.maxHeight, searchPlaceholder: this.searchPlaceholder, onOptionListCloseRequested: () => {
+            onToggle: (ev) => this.handleToggle(ev) }, index.h("priv-option-list", { key: '20f87f661c84f9f3930a9de5f8fcf754c5a8154d', ref: (el) => (this.optionListEl = el), multiple: this.multiple, search: this.search, selectAll: this.selectAll, maxHeight: this.maxHeight, searchPlaceholder: this.searchPlaceholder, onOptionListCloseRequested: () => {
                 this.dropdownEl.hidePopover();
             }, onOptionListAllSelected: () => {
                 this.returnFocus = true;
@@ -530,7 +541,7 @@ const Select = class {
             }, onOptionListAllDeselected: () => {
                 this.returnFocus = true;
                 this.wmSelectAllDeselected.emit();
-            } }, index.h("slot", { key: '21bcbe1b9aec665219abe6147d8124349066cbeb' }))), index.h("div", { key: 'f3bbe02b3b4960120d8165cf03eac32bcc1c57b0', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), index.h("div", { key: '2c49de8a7a55216dc7c29dcffdb0af1fa0ca51be', id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
+            } }, index.h("slot", { key: 'b354ca4112920d8b8b576282632fa86b32873adb' }))), index.h("div", { key: '04ba1a31fcf01e718a3476759b9d3f6a61b561d4', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), index.h("div", { key: 'f5751cc60a9f124044a0fb4795ab53969813775b', id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

package/dist/collection/components/selects/wm-select/wm-select.js

@@ -7,11 +7,8 @@ export class Select {
         this.scrollableParents = [];
         this.returnFocus = false;
         this.hasAnchor = CSS.supports("top", "anchor(bottom)"); // for FF polyfill
-        //////////////////////////////////////
-        // for multiselect button text
-        this.overflowCount = 0;
         this.displayedOptions = [];
-        this.previousDisplayedOptions = [];
+        this.oldDisplayText = "";
         this.debouncedReposition = debounce(() => {
             this.dropdownPosition();
         }, 100);
@@ -39,6 +36,9 @@ export class Select {
         // string "false" needs to be treated as bool False because react wrappers convert bool to string.
         return toBool(this.disabled);
     }
+    get displayText() {
+        return this.displayedOptions.map((x) => x.textContent).join(", ");
+    }
     get selectedOptions() {
         return Array.from(this.el.querySelectorAll("wm-option")).filter((x) => x.selected);
     }
@@ -274,22 +274,27 @@ export class Select {
         this.announcement = message;
     }
     handleOverflow() {
-        // handle overflow + counter for multiselect
-        // this is a fixed measurement accounting for the max width of a 3 character overflow counter
-        const overflowCounterWidth = 38;
-        const computedStyle = window.getComputedStyle(this.buttonEl);
-        // there seems to be no quick way to get an elements width without padding, except for subtracting padding manually
-        const paddingLeft = parseInt(computedStyle.getPropertyValue("padding-left").slice(0, -2));
-        const paddingRight = parseInt(computedStyle.getPropertyValue("padding-right").slice(0, -2));
-        const availableSpace = this.buttonEl.clientWidth - paddingLeft - paddingRight - overflowCounterWidth;
-        this.overflowCount = 0;
-        this.measurementAreaEl.textContent = this.displayedOptions.map((x) => x.textContent).join(", ");
-        let optionsTotalWidth = this.measurementAreaEl.clientWidth;
-        while (optionsTotalWidth > availableSpace && this.displayedOptions.length > 1) {
-            this.overflowCount++;
-            this.displayedOptions.pop();
-            this.measurementAreaEl.textContent = this.displayedOptions.map((x) => x.textContent).join(", ");
-            optionsTotalWidth = this.measurementAreaEl.clientWidth;
+        if (!this.buttonEl) {
+            forceUpdate(this.el);
+        }
+        else {
+            // handle overflow + counter for multiselect
+            // this is a fixed measurement accounting for the max width of a 3 character overflow counter
+            const overflowCounterWidth = 38;
+            const computedStyle = window.getComputedStyle(this.buttonEl);
+            // there seems to be no quick way to get an elements width without padding, except for subtracting padding manually
+            const paddingLeft = parseInt(computedStyle.getPropertyValue("padding-left").slice(0, -2));
+            const paddingRight = parseInt(computedStyle.getPropertyValue("padding-right").slice(0, -2));
+            const availableSpace = this.buttonEl.clientWidth - paddingLeft - paddingRight - overflowCounterWidth;
+            this.overflowCount = 0;
+            this.measurementAreaEl.textContent = this.displayText;
+            let optionsTotalWidth = this.measurementAreaEl.clientWidth;
+            while (optionsTotalWidth > availableSpace && this.displayedOptions.length > 1) {
+                this.overflowCount++;
+                this.displayedOptions.pop();
+                this.measurementAreaEl.textContent = this.displayText;
+                optionsTotalWidth = this.measurementAreaEl.clientWidth;
+            }
         }
     }
     setButtonText() {
@@ -299,28 +304,34 @@ export class Select {
         }
         else {
             this.displayedOptions = this.childOptions.filter((x) => x.selected);
-            const hasChanged = this.displayedOptions !== this.previousDisplayedOptions;
+            const hasChanged = this.displayText !== this.oldDisplayText;
             const noDisplayedOptions = this.displayedOptions.length < 1;
             if (noDisplayedOptions) {
+                this.overflowCount = 0;
                 return this.placeholder;
             }
-            else if (!this.buttonEl) {
-                forceUpdate(this.el);
-                return "";
-            }
             else if (hasChanged) {
                 this.handleOverflow();
-                // we need to calc overflowcount as we only want to display allSelected message if there is an overflow...
-                if (this.overflowCount > 0 && this.allSelected) {
-                    // ...but it should be reset so it isn't displayed in that case
-                    this.overflowCount = 0;
+                if (this.allSelected) {
+                    // we want all selected message only if there's an overflow.
+                    if (!this.overflowCount) {
+                        // but on first render we don't know: handleOverflow can't calculate measurements
+                        // in that case, display all selected message even if there's a chance options could have been shown
+                        this.buttonText = this.allSelectedMessage;
+                    }
+                    else if (this.overflowCount > 0)
+                        // if calc could be made and there is an overflow, reset it as it shouldn't be shown
+                        this.overflowCount = 0;
+                    // then display all selected message
                     this.buttonText = this.allSelectedMessage;
                 }
                 else {
-                    this.buttonText = this.displayedOptions.map((x) => x.textContent).join(", ");
+                    // otherwise, if handleOverflow was able to calculate, it set the count and the display text
+                    // if it wasn't able to calculate, the text of all the selected options will be displayed and may truncate (acceptable as fallback)
+                    this.buttonText = this.displayText;
                 }
             }
-            this.previousDisplayedOptions = this.displayedOptions;
+            this.oldDisplayText = this.displayText;
             // the reason for setting a global variable and returning it
             // is that we need the stored value when displayedOptions haven't changed.
             return this.buttonText; // multiselect value
@@ -333,14 +344,14 @@ export class Select {
     }
     render() {
         const showSubinfo = !this.multiple && this.selectedOptions.length > 0 && this.selectedOptions[0].subinfo;
-        return (h(Host, { key: 'a9b76bd87b0e9a3264695746cf8f5c8e91d331c8', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: 'f4f46f5db1feb4c8e154c89c5d6f6d94ecc00e88', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '460e0a75845de26c016d8e7f4eb975c726f9aa3b', class: "label-wrapper" }, h("label", { key: 'ffbcd7301f69a8696f0135e2c742d71a0ab03492', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), 
+        return (h(Host, { key: 'c79e7d62c63f5609264fe2f5abbbcb7f5bee40cf', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: '3c7f3b82cf3c7b81226d376e15b0ad5dd5a0a3f9', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '3a0f1bbcbc40a66979dfaf91e0c8d73547d3d387', class: "label-wrapper" }, h("label", { key: '6c540fb5f76d12047b52fecb40cda9b921466107', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), 
         // we can't use aria-required because the listbox is in a sub-component and it is not announced
-        this.requiredField && (h("span", { key: '45c1248438954a9b1c078e2bae2aeb20717742ba', class: "required" }, h("span", { key: '6a20b3925737ab51fe4ec04d781fce957c09778e', class: "sr-only" }, globalMessages.requiredField), h("span", { key: 'f03585760652f5a1e0a06680d1d31ef5cc4d4d99', "aria-hidden": "true" }, "*")))), h("div", { key: 'd99cb285408dd1192e8655ab8ffb6d57361acc04', class: "button-wrapper" }, h("button", { key: '5368e2962e9ff2686145a2bd93f6bc349af91ea0', id: "selectbtn", disabled: this.isDisabled, "aria-labelledby": "label selectbtn", "aria-describedby": "error", popoverTarget: "dropdown", popoverTargetAction: "toggle", class: "displayedoption", ref: (el) => (this.buttonEl = el) }, h("span", { key: 'd3b5766d8e2476e3753bcf5c9b87280d45cb90bf', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: 'd6896018577a376a6a33280c3f082c462e0a59a1', class: "button-text" }, this.setButtonText()), showSubinfo && h("span", { key: '08864b9a36c5bcbd2fd09159cfff486475354e9e', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: '8f689d493982521150f322ab4f02f12523191143', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '7efb458a3d5bf364e19a62741189f59639300e50', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: 'ef62108b2ca9b10157b39d9e31db14fbde24ec80',
+        this.requiredField && (h("span", { key: '10cc3db35973cce6dae99075f28cadf2641ad0e9', class: "required" }, h("span", { key: '35695584a1e99e803e4567c0fc86b8b41c0ea2f6', class: "sr-only" }, globalMessages.requiredField), h("span", { key: 'b33b35b401f7ee745e10b98c79e46beabeea2aa1', "aria-hidden": "true" }, "*")))), h("div", { key: '58ab503b8b998103345197b559c7fb94ebc9c8b3', class: "button-wrapper" }, h("button", { key: 'ad0144669cf6569d2edd9e64a3847a8072cb1992', id: "selectbtn", disabled: this.isDisabled, "aria-labelledby": "label selectbtn", "aria-describedby": "error", popoverTarget: "dropdown", popoverTargetAction: "toggle", class: "displayedoption", ref: (el) => (this.buttonEl = el) }, h("span", { key: '9b5473e206d14b7be2549df81b0a76d908f35ae3', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: '262679aec8e736332fc0426d24e392fb9c492652', class: "button-text" }, this.setButtonText()), showSubinfo && h("span", { key: 'f974e802692149bbf20214224883aa1f1abe4b74', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: '711281e38df46a26363354effb9cfd6bf78008ae', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '23f428d49ea0616bef93af1b53654c1ca8b05e4c', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: 'e1f1e61655445d0a899699e246eb48971a50ce09',
             // is-open is for the CSS transition in modern browsers
             // hidden is to wait for position calculations in Firefox
             class: `dropdown ${this.isExpanded ? "is-open" : ""} ${this.isHidden ? "hidden" : ""} ${this.openUp ? "upward" : ""}`, id: "dropdown", popover: "auto", ref: (el) => (this.dropdownEl = el),
             // @ts-ignore -- don't tell typescript but we're in the future
-            onToggle: (ev) => this.handleToggle(ev) }, h("priv-option-list", { key: '6aa561516558f5913e82cc8ded2b648a8d0ef46e', ref: (el) => (this.optionListEl = el), multiple: this.multiple, search: this.search, selectAll: this.selectAll, maxHeight: this.maxHeight, searchPlaceholder: this.searchPlaceholder, onOptionListCloseRequested: () => {
+            onToggle: (ev) => this.handleToggle(ev) }, h("priv-option-list", { key: '20f87f661c84f9f3930a9de5f8fcf754c5a8154d', ref: (el) => (this.optionListEl = el), multiple: this.multiple, search: this.search, selectAll: this.selectAll, maxHeight: this.maxHeight, searchPlaceholder: this.searchPlaceholder, onOptionListCloseRequested: () => {
                 this.dropdownEl.hidePopover();
             }, onOptionListAllSelected: () => {
                 this.returnFocus = true;
@@ -348,7 +359,7 @@ export class Select {
             }, onOptionListAllDeselected: () => {
                 this.returnFocus = true;
                 this.wmSelectAllDeselected.emit();
-            } }, h("slot", { key: '21bcbe1b9aec665219abe6147d8124349066cbeb' }))), h("div", { key: 'f3bbe02b3b4960120d8165cf03eac32bcc1c57b0', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: '2c49de8a7a55216dc7c29dcffdb0af1fa0ca51be', id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
+            } }, h("slot", { key: 'b354ca4112920d8b8b576282632fa86b32873adb' }))), h("div", { key: '04ba1a31fcf01e718a3476759b9d3f6a61b561d4', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: 'f5751cc60a9f124044a0fb4795ab53969813775b', id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
     }
     static get is() { return "wm-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/esm/{app-globals-92dbbc0c.js → app-globals-bb7ed51c.js}

@@ -1,6 +1,6 @@
 import './index-130e07bb.js';
 
-const version = "5.22.1";
+const version = "5.22.2-alpha.1";
 
 // PRINT RIPPLE VERSION IN CONSOLE
 // test envs return 0 for plugin.length

package/dist/esm/loader.js

@@ -1,6 +1,6 @@
 import { b as bootstrapLazy } from './index-130e07bb.js';
 export { s as setNonce } from './index-130e07bb.js';
-import { g as globalScripts } from './app-globals-92dbbc0c.js';
+import { g as globalScripts } from './app-globals-bb7ed51c.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;

package/dist/esm/ripple.js

@@ -1,6 +1,6 @@
 import { p as promiseResolve, b as bootstrapLazy } from './index-130e07bb.js';
 export { s as setNonce } from './index-130e07bb.js';
-import { g as globalScripts } from './app-globals-92dbbc0c.js';
+import { g as globalScripts } from './app-globals-bb7ed51c.js';
 
 /*
  Stencil Client Patch Browser v4.21.0 | MIT Licensed | https://stenciljs.com

package/dist/esm/wm-option_2.entry.js

@@ -185,11 +185,8 @@ const Select = class {
         this.scrollableParents = [];
         this.returnFocus = false;
         this.hasAnchor = CSS.supports("top", "anchor(bottom)"); // for FF polyfill
-        //////////////////////////////////////
-        // for multiselect button text
-        this.overflowCount = 0;
         this.displayedOptions = [];
-        this.previousDisplayedOptions = [];
+        this.oldDisplayText = "";
         this.debouncedReposition = debounce(() => {
             this.dropdownPosition();
         }, 100);
@@ -217,6 +214,9 @@ const Select = class {
         // string "false" needs to be treated as bool False because react wrappers convert bool to string.
         return toBool(this.disabled);
     }
+    get displayText() {
+        return this.displayedOptions.map((x) => x.textContent).join(", ");
+    }
     get selectedOptions() {
         return Array.from(this.el.querySelectorAll("wm-option")).filter((x) => x.selected);
     }
@@ -452,22 +452,27 @@ const Select = class {
         this.announcement = message;
     }
     handleOverflow() {
-        // handle overflow + counter for multiselect
-        // this is a fixed measurement accounting for the max width of a 3 character overflow counter
-        const overflowCounterWidth = 38;
-        const computedStyle = window.getComputedStyle(this.buttonEl);
-        // there seems to be no quick way to get an elements width without padding, except for subtracting padding manually
-        const paddingLeft = parseInt(computedStyle.getPropertyValue("padding-left").slice(0, -2));
-        const paddingRight = parseInt(computedStyle.getPropertyValue("padding-right").slice(0, -2));
-        const availableSpace = this.buttonEl.clientWidth - paddingLeft - paddingRight - overflowCounterWidth;
-        this.overflowCount = 0;
-        this.measurementAreaEl.textContent = this.displayedOptions.map((x) => x.textContent).join(", ");
-        let optionsTotalWidth = this.measurementAreaEl.clientWidth;
-        while (optionsTotalWidth > availableSpace && this.displayedOptions.length > 1) {
-            this.overflowCount++;
-            this.displayedOptions.pop();
-            this.measurementAreaEl.textContent = this.displayedOptions.map((x) => x.textContent).join(", ");
-            optionsTotalWidth = this.measurementAreaEl.clientWidth;
+        if (!this.buttonEl) {
+            forceUpdate(this.el);
+        }
+        else {
+            // handle overflow + counter for multiselect
+            // this is a fixed measurement accounting for the max width of a 3 character overflow counter
+            const overflowCounterWidth = 38;
+            const computedStyle = window.getComputedStyle(this.buttonEl);
+            // there seems to be no quick way to get an elements width without padding, except for subtracting padding manually
+            const paddingLeft = parseInt(computedStyle.getPropertyValue("padding-left").slice(0, -2));
+            const paddingRight = parseInt(computedStyle.getPropertyValue("padding-right").slice(0, -2));
+            const availableSpace = this.buttonEl.clientWidth - paddingLeft - paddingRight - overflowCounterWidth;
+            this.overflowCount = 0;
+            this.measurementAreaEl.textContent = this.displayText;
+            let optionsTotalWidth = this.measurementAreaEl.clientWidth;
+            while (optionsTotalWidth > availableSpace && this.displayedOptions.length > 1) {
+                this.overflowCount++;
+                this.displayedOptions.pop();
+                this.measurementAreaEl.textContent = this.displayText;
+                optionsTotalWidth = this.measurementAreaEl.clientWidth;
+            }
         }
     }
     setButtonText() {
@@ -477,28 +482,34 @@ const Select = class {
         }
         else {
             this.displayedOptions = this.childOptions.filter((x) => x.selected);
-            const hasChanged = this.displayedOptions !== this.previousDisplayedOptions;
+            const hasChanged = this.displayText !== this.oldDisplayText;
             const noDisplayedOptions = this.displayedOptions.length < 1;
             if (noDisplayedOptions) {
+                this.overflowCount = 0;
                 return this.placeholder;
             }
-            else if (!this.buttonEl) {
-                forceUpdate(this.el);
-                return "";
-            }
             else if (hasChanged) {
                 this.handleOverflow();
-                // we need to calc overflowcount as we only want to display allSelected message if there is an overflow...
-                if (this.overflowCount > 0 && this.allSelected) {
-                    // ...but it should be reset so it isn't displayed in that case
-                    this.overflowCount = 0;
+                if (this.allSelected) {
+                    // we want all selected message only if there's an overflow.
+                    if (!this.overflowCount) {
+                        // but on first render we don't know: handleOverflow can't calculate measurements
+                        // in that case, display all selected message even if there's a chance options could have been shown
+                        this.buttonText = this.allSelectedMessage;
+                    }
+                    else if (this.overflowCount > 0)
+                        // if calc could be made and there is an overflow, reset it as it shouldn't be shown
+                        this.overflowCount = 0;
+                    // then display all selected message
                     this.buttonText = this.allSelectedMessage;
                 }
                 else {
-                    this.buttonText = this.displayedOptions.map((x) => x.textContent).join(", ");
+                    // otherwise, if handleOverflow was able to calculate, it set the count and the display text
+                    // if it wasn't able to calculate, the text of all the selected options will be displayed and may truncate (acceptable as fallback)
+                    this.buttonText = this.displayText;
                 }
             }
-            this.previousDisplayedOptions = this.displayedOptions;
+            this.oldDisplayText = this.displayText;
             // the reason for setting a global variable and returning it
             // is that we need the stored value when displayedOptions haven't changed.
             return this.buttonText; // multiselect value
@@ -511,14 +522,14 @@ const Select = class {
     }
     render() {
         const showSubinfo = !this.multiple && this.selectedOptions.length > 0 && this.selectedOptions[0].subinfo;
-        return (h(Host, { key: 'a9b76bd87b0e9a3264695746cf8f5c8e91d331c8', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: 'f4f46f5db1feb4c8e154c89c5d6f6d94ecc00e88', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '460e0a75845de26c016d8e7f4eb975c726f9aa3b', class: "label-wrapper" }, h("label", { key: 'ffbcd7301f69a8696f0135e2c742d71a0ab03492', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), 
+        return (h(Host, { key: 'c79e7d62c63f5609264fe2f5abbbcb7f5bee40cf', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: '3c7f3b82cf3c7b81226d376e15b0ad5dd5a0a3f9', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '3a0f1bbcbc40a66979dfaf91e0c8d73547d3d387', class: "label-wrapper" }, h("label", { key: '6c540fb5f76d12047b52fecb40cda9b921466107', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), 
         // we can't use aria-required because the listbox is in a sub-component and it is not announced
-        this.requiredField && (h("span", { key: '45c1248438954a9b1c078e2bae2aeb20717742ba', class: "required" }, h("span", { key: '6a20b3925737ab51fe4ec04d781fce957c09778e', class: "sr-only" }, globalMessages.requiredField), h("span", { key: 'f03585760652f5a1e0a06680d1d31ef5cc4d4d99', "aria-hidden": "true" }, "*")))), h("div", { key: 'd99cb285408dd1192e8655ab8ffb6d57361acc04', class: "button-wrapper" }, h("button", { key: '5368e2962e9ff2686145a2bd93f6bc349af91ea0', id: "selectbtn", disabled: this.isDisabled, "aria-labelledby": "label selectbtn", "aria-describedby": "error", popoverTarget: "dropdown", popoverTargetAction: "toggle", class: "displayedoption", ref: (el) => (this.buttonEl = el) }, h("span", { key: 'd3b5766d8e2476e3753bcf5c9b87280d45cb90bf', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: 'd6896018577a376a6a33280c3f082c462e0a59a1', class: "button-text" }, this.setButtonText()), showSubinfo && h("span", { key: '08864b9a36c5bcbd2fd09159cfff486475354e9e', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: '8f689d493982521150f322ab4f02f12523191143', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '7efb458a3d5bf364e19a62741189f59639300e50', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: 'ef62108b2ca9b10157b39d9e31db14fbde24ec80',
+        this.requiredField && (h("span", { key: '10cc3db35973cce6dae99075f28cadf2641ad0e9', class: "required" }, h("span", { key: '35695584a1e99e803e4567c0fc86b8b41c0ea2f6', class: "sr-only" }, globalMessages.requiredField), h("span", { key: 'b33b35b401f7ee745e10b98c79e46beabeea2aa1', "aria-hidden": "true" }, "*")))), h("div", { key: '58ab503b8b998103345197b559c7fb94ebc9c8b3', class: "button-wrapper" }, h("button", { key: 'ad0144669cf6569d2edd9e64a3847a8072cb1992', id: "selectbtn", disabled: this.isDisabled, "aria-labelledby": "label selectbtn", "aria-describedby": "error", popoverTarget: "dropdown", popoverTargetAction: "toggle", class: "displayedoption", ref: (el) => (this.buttonEl = el) }, h("span", { key: '9b5473e206d14b7be2549df81b0a76d908f35ae3', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: '262679aec8e736332fc0426d24e392fb9c492652', class: "button-text" }, this.setButtonText()), showSubinfo && h("span", { key: 'f974e802692149bbf20214224883aa1f1abe4b74', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: '711281e38df46a26363354effb9cfd6bf78008ae', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '23f428d49ea0616bef93af1b53654c1ca8b05e4c', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: 'e1f1e61655445d0a899699e246eb48971a50ce09',
             // is-open is for the CSS transition in modern browsers
             // hidden is to wait for position calculations in Firefox
             class: `dropdown ${this.isExpanded ? "is-open" : ""} ${this.isHidden ? "hidden" : ""} ${this.openUp ? "upward" : ""}`, id: "dropdown", popover: "auto", ref: (el) => (this.dropdownEl = el),
             // @ts-ignore -- don't tell typescript but we're in the future
-            onToggle: (ev) => this.handleToggle(ev) }, h("priv-option-list", { key: '6aa561516558f5913e82cc8ded2b648a8d0ef46e', ref: (el) => (this.optionListEl = el), multiple: this.multiple, search: this.search, selectAll: this.selectAll, maxHeight: this.maxHeight, searchPlaceholder: this.searchPlaceholder, onOptionListCloseRequested: () => {
+            onToggle: (ev) => this.handleToggle(ev) }, h("priv-option-list", { key: '20f87f661c84f9f3930a9de5f8fcf754c5a8154d', ref: (el) => (this.optionListEl = el), multiple: this.multiple, search: this.search, selectAll: this.selectAll, maxHeight: this.maxHeight, searchPlaceholder: this.searchPlaceholder, onOptionListCloseRequested: () => {
                 this.dropdownEl.hidePopover();
             }, onOptionListAllSelected: () => {
                 this.returnFocus = true;
@@ -526,7 +537,7 @@ const Select = class {
             }, onOptionListAllDeselected: () => {
                 this.returnFocus = true;
                 this.wmSelectAllDeselected.emit();
-            } }, h("slot", { key: '21bcbe1b9aec665219abe6147d8124349066cbeb' }))), h("div", { key: 'f3bbe02b3b4960120d8165cf03eac32bcc1c57b0', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: '2c49de8a7a55216dc7c29dcffdb0af1fa0ca51be', id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
+            } }, h("slot", { key: 'b354ca4112920d8b8b576282632fa86b32873adb' }))), h("div", { key: '04ba1a31fcf01e718a3476759b9d3f6a61b561d4', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: 'f5751cc60a9f124044a0fb4795ab53969813775b', id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }

package/dist/esm-es5/app-globals-bb7ed51c.js

@@ -0,0 +1 @@
+import"./index-130e07bb.js";var version="5.22.2-alpha.1";if(window.navigator.plugins.length>0){console.log("%cRipple component library %c%s","color: #575195; font-weight: bold","font-weight: bold",version)}function wmComponentKeys(n){if(n.key=="Tab"){var o=new Event("wmUserIsTabbing");window.dispatchEvent(o);document.querySelector("body").classList.add("wmcl-user-is-tabbing")}if(n.key=="ArrowLeft"||n.key=="ArrowUp"||n.key=="ArrowRight"||n.key=="ArrowDown"){var o=new Event("wmUserIsKeying");window.dispatchEvent(o);document.querySelector("body").classList.add("wmcl-user-is-keying")}}function wmComponentMouseDownOnce(){var n=new Event("wmUserIsNotTabbing");window.dispatchEvent(n);document.querySelector("body").classList.remove("wmcl-user-is-tabbing");document.querySelector("body").classList.remove("wmcl-user-is-keying")}window.addEventListener("keydown",wmComponentKeys);window.addEventListener("mousedown",wmComponentMouseDownOnce);document.addEventListener("DOMContentLoaded",(function(){var n=document.createElement("div");n.id="wm-tooltip-container";var o=document.createElement("div");o.id="wm-tooltip";o.classList.add("wm-tooltip");o.setAttribute("popover","manual");o.setAttribute("aria-hidden","true");var t=document.createElement("style");t.textContent="\n.wm-tooltip {\n  position: fixed;\n  overflow: hidden;\n  pointer-events: none;\n  line-height: normal;\n  font-family: inherit;\n  font-size: 0.875rem;\n  text-transform: none;\n  font-weight: normal;\n  background: var(--wmcolor-tooltip-background);\n  color: var(--wmcolor-tooltip-text);\n  z-index: 999999;\n  max-width: var(--wmTooltipMaxWidth, 13.75rem);\n  margin-right: 1.5rem;\n  padding: 0.375rem;\n  transition-property: opacity;\n  transition-delay: 0s;\n  opacity: 0;\n  inset: unset;\n  top: 0;\n  left: 0;\n  transform: translateZ(0);\n  will-change: transform;\n  transform: translate(var(--wmTooltipLeft), var(--wmTooltipTop));\n  border: none;\n}\n\n.wm-tooltip:popover-open {\n  opacity: 0;\n}\n\n.wm-tooltip.show {\n  transition-delay: 500ms;\n  opacity: 1;\n}\n";document.head.appendChild(t);n.appendChild(o);document.querySelector("body").appendChild(n)}));var globalFn=function(){};var globalScripts=globalFn;export{globalScripts as g};