@watermarkinsights/ripple 5.23.0-alpha.0 → 5.23.0-alpha.1

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

@@ -455,55 +455,74 @@ const Select = class {
         }
         this.announcement = message;
     }
-    renderButtonText() {
-        this.displayedOptions = this.childOptions.filter((x) => x.selected);
-        if (this.multiple && this.displayedOptions.length < 1) {
-            return index.h("span", null, this.placeholder);
+    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;
         }
-        else if (this.multiple && this.allSelected && this.overflowCount > 0) {
-            return this.allSelectedMessage;
+    }
+    setButtonText() {
+        if (!this.multiple) {
+            const selEl = this.childOptions.filter((x) => x.selected)[0];
+            return selEl ? selEl.textContent : "";
         }
         else {
-            // handle overflow + counter for multiselect
-            // only bother if things have changed
+            this.displayedOptions = this.childOptions.filter((x) => x.selected);
             const hasChanged = this.displayedOptions !== this.previousDisplayedOptions;
-            if (this.multiple && hasChanged) {
-                // 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;
+            const noDisplayedOptions = this.displayedOptions.length < 1;
+            if (noDisplayedOptions) {
+                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;
+                    this.buttonText = this.allSelectedMessage;
+                }
+                else {
+                    this.buttonText = this.displayedOptions.map((x) => x.textContent).join(", ");
                 }
-                this.previousDisplayedOptions = this.displayedOptions;
             }
-            return this.displayedOptions.map((x, idx) => (index.h("span", null, idx > 0 ? ", " : "", x.textContent)));
+            this.previousDisplayedOptions = this.displayedOptions;
+            // 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
         }
     }
     renderOverflowCount() {
-        if (this.overflowCount > 0 && !this.allSelected) {
+        if (this.overflowCount > 0) {
             return (index.h("span", null, index.h("span", { class: "overflow-counter" }, "+", this.overflowCount)));
         }
     }
     render() {
         const showSubinfo = !this.multiple && this.selectedOptions.length > 0 && this.selectedOptions[0].subinfo;
-        return (index.h(index.Host, { key: 'e58f2afa4361d7e27f94175a32acb0f93701cf76', onBlur: (ev) => this.handleComponentBlur(ev) }, index.h("div", { key: '13de69b572a4af34c1abc0002bbc8a87dc7d521a', class: `wrapper ${functions.getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { key: 'd234f604a3f94f843617733f6a8f5baaabc098d3', class: "label-wrapper" }, index.h("label", { key: '9dac4166a74898241e6422cd93023e5980d015bf', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => functions.hideTooltip() }, this.label), 
+        return (index.h(index.Host, { key: '9a0a5c13f988c06c380ed732da86365c28446e77', onBlur: (ev) => this.handleComponentBlur(ev) }, index.h("div", { key: '3aa70cdc8f541d6f93ff99cbe44d6192bcba364b', class: `wrapper ${functions.getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { key: '899522611760999dca554ab63bfa0f5c831d0542', class: "label-wrapper" }, index.h("label", { key: '0730c044f78edc158ac6a2de09ea05a09ddecd23', 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: '788b4c52a1e59bfb425f909374f722b5856b8fb3', class: "required" }, index.h("span", { key: '95cbdb98f925a5b80579a77147151903f2f63618', class: "sr-only" }, intl.globalMessages.requiredField), index.h("span", { key: 'ca3dacb55461f2cd7f5b81c746e5b70d8bd82f27', "aria-hidden": "true" }, "*")))), index.h("div", { key: '65cb0cbfe742c251b082adc84af5648a54ff4f12', class: "button-wrapper" }, index.h("button", { key: '8731a753912360eeb0ed4b60019463bf4398f8ae', 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: 'e8d751bedfcc1922416fc177f43153ed2dfa0f84', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, index.h("span", { key: '104277dfd731f7138889d573ad33ab7e5f8f4ffe', class: "button-text" }, this.renderButtonText()), showSubinfo && index.h("span", { key: 'cddb5d3cb91877c2adf73978e2e3114e3a148999', class: "subinfo" }, this.selectedOptions[0].subinfo)), index.h("div", { key: 'e4e76e115d85e4a3d24a17d762dec65091c14c69', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), index.h("div", { key: '910df5182752522e9a709afbbb9d885b4cb93f46', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), index.h("div", { key: '620f6414a70890323eb11958ff2c17415a86e437',
+        this.requiredField && (index.h("span", { key: 'b453a4c0fbd8973d62a7cfdc4e37537ab94dfed8', class: "required" }, index.h("span", { key: '53699fcc342d68b1fb24180cb13a524ab58038c4', class: "sr-only" }, intl.globalMessages.requiredField), index.h("span", { key: 'b7489dbe7ee74b6c46d30002762f10624f26cad7', "aria-hidden": "true" }, "*")))), index.h("div", { key: 'b44b002b4a5b34cf0958a8ddfc9efcb6934873f0', class: "button-wrapper" }, index.h("button", { key: 'b6f5d59e8399d894c2bb7cbfd4c9b5e57a7bfc4a', 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: 'c4d37441c2e76ecf5c03b6a22cabbec2d16c77bc', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, index.h("span", { key: 'baa91ff63a3d7d33be866337237408f38f46cc60', class: "button-text" }, this.setButtonText()), showSubinfo && index.h("span", { key: '5ed44f71ef8184df2bfee442fa94e496f9305b54', class: "subinfo" }, this.selectedOptions[0].subinfo)), index.h("div", { key: 'd0e3a1bade399be089b1f38e33281ca5f1e6cc03', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), index.h("div", { key: '2a43776bb5a5cccc79796939ca9be7b7b8ee569a', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), index.h("div", { key: 'eac706ae0781e210c89aed74dded805472a01996',
             // 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: 'a059818c76eaad5b43895e30cc9a40ada0bc3ffa', 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: '3ba4da015a18e38b1a6fddd6788886d4dc551cd1', 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;
@@ -511,7 +530,7 @@ const Select = class {
             }, onOptionListAllDeselected: () => {
                 this.returnFocus = true;
                 this.wmSelectAllDeselected.emit();
-            } }, index.h("slot", { key: 'a8f910407e5bbba4b5d6e004f2114f2519c56454' }))), index.h("div", { key: '13651a1650697c9860718e4665dbf300ab6e5faa', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), index.h("div", { key: 'f627a9e7035ea2f2df40493242965d2e15184de9', id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
+            } }, index.h("slot", { key: '87030837dc77fa939c06ccaf0f69e5b4d067c628' }))), index.h("div", { key: '36ccfeb061afde76690cf17a27aef19cfdf01071', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), index.h("div", { key: '63a34701d7a0822dca9c7970be7bce7c74dcfa72', 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/charts/priv-chart-popover/priv-chart-popover.js

@@ -128,7 +128,7 @@ export class ChartPopover {
                 "mutable": false,
                 "complexType": {
                     "original": "ChartData",
-                    "resolved": "undefined | { [key: string]: any; label: string; amount: number; color?: string | undefined; popoverTitle?: string | undefined; popoverText?: string | undefined; popoverButtonText?: string | undefined; }",
+                    "resolved": "undefined | { [key: string]: any; barLegend: string; amount: number; color?: string | undefined; popoverTitle?: string | undefined; popoverText?: string | undefined; popoverButtonText?: string | undefined; }",
                     "references": {
                         "ChartData": {
                             "location": "import",
@@ -253,7 +253,7 @@ export class ChartPopover {
                 },
                 "complexType": {
                     "original": "ChartData",
-                    "resolved": "{ [key: string]: any; label: string; amount: number; color?: string | undefined; popoverTitle?: string | undefined; popoverText?: string | undefined; popoverButtonText?: string | undefined; }",
+                    "resolved": "{ [key: string]: any; barLegend: string; amount: number; color?: string | undefined; popoverTitle?: string | undefined; popoverText?: string | undefined; popoverButtonText?: string | undefined; }",
                     "references": {
                         "ChartData": {
                             "location": "import",

package/dist/collection/components/charts/wm-chart-bar/wm-chart-bar.css

@@ -886,6 +886,7 @@
 .chart-wrapper {
   display: flex;
   container: chart-measure/inline-size;
+  gap: 0.75rem;
 }
 
 .legend.--top {
@@ -935,19 +936,22 @@
   grid-template-columns: minmax(0, max-content) auto 1fr;
   grid-template-rows: 1fr;
   margin-right: 3rem;
+  row-gap: 0.75rem;
 }
 
 .chart-right-side {
   grid-column: 4;
   grid-row: 1/-1;
 }
+.chart-right-side:empty {
+  display: none;
+}
 
 .category-axis-label {
   max-width: 9.375rem;
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-inline-end: 0.75rem;
 }
 @container chart-measure (max-width: 414px) {
   .category-axis-label {
@@ -976,7 +980,6 @@
   grid-column: 2/-1;
   row-gap: 0.75rem;
   align-items: center;
-  margin-block-end: 0.75rem;
   grid-template-rows: repeat(var(--row-count), minmax(1.5rem, 1fr)) 0;
 }
 
@@ -1062,7 +1065,6 @@
   display: flex;
   justify-content: space-between;
   font-size: 0.75rem;
-  margin-block-end: 0.75rem;
 }
 @container chart-measure (max-width: 414px) {
   .x-axis .tick:not(:first-of-type):not(:last-of-type) {

package/dist/collection/components/charts/wm-chart-bar/wm-chart-bar.js

@@ -88,7 +88,7 @@ export class ChartBar {
             var _a;
             const barColor = item.color || (isUniformConfigColor ? this.colorPalette[0] : (_a = this.colorPalette[index]) !== null && _a !== void 0 ? _a : defaultColor);
             return {
-                label: item.label,
+                barLegend: item.barLegend,
                 amount: item.amount,
                 gridPercent: (item.amount / this.gridMax) * 100,
                 displayValue: formatDisplayValue(item.amount, itemTotal, valueFormat),
@@ -223,7 +223,7 @@ export class ChartBar {
         setTimeout(() => {
             // allow time for the popover to reopen if the click that closed it was on a bar, to prevent flash
             if (this.popoverEl.open) {
-                this.highlightBar(this.processedData.findIndex((item) => { var _a; return item.label === ((_a = this.popoverEl.chartData) === null || _a === void 0 ? void 0 : _a.label); }));
+                this.highlightBar(this.processedData.findIndex((item) => { var _a; return item.barLegend === ((_a = this.popoverEl.chartData) === null || _a === void 0 ? void 0 : _a.barLegend); }));
             }
             else {
                 this.clearHighlights();
@@ -231,7 +231,7 @@ export class ChartBar {
         }, 30);
     }
     openPopover(clickedProcessedData, coords) {
-        let matchingChartData = this.data.find((item) => item.label === clickedProcessedData.label);
+        let matchingChartData = this.data.find((item) => item.barLegend === clickedProcessedData.barLegend);
         if (matchingChartData) {
             this.popoverEl.chartData = matchingChartData;
             this.popoverEl.header = matchingChartData.popoverTitle || this.config.popoverTitle || "";
@@ -271,14 +271,14 @@ export class ChartBar {
     // #region Rendering
     ////////////////////////////////////////////////////////////
     renderBarLegends() {
-        return this.processedData.map((item) => (h("div", { key: `legend-${item.label}`, class: "bar-legend" }, item.label)));
+        return this.processedData.map((item) => (h("div", { key: `legend-${item.barLegend}`, class: "bar-legend" }, item.barLegend)));
     }
     renderBars() {
         // Use effective grid max (numTicks * interval) for accurate bar sizing
         const effectiveGridMax = this.gridInfo.numTicks * this.gridInfo.interval;
         return this.processedData.map((item, idx) => {
             const barPercent = effectiveGridMax > 0 ? (item.amount / effectiveGridMax) * 100 : 0;
-            return (h("div", { key: `bar-${item.label}`, class: "bar-wrapper" }, h("div", { class: "bar", style: { width: `${barPercent}%`, backgroundColor: `var(--${item.color})` }, onClick: (ev) => this.handleBarClick(ev, idx), onKeyDown: (ev) => this.handleBarKeyDown(ev, idx), tabindex: "-1", "aria-label": `${item.label} ${item.displayValue}` }), h("span", { class: "value", style: { insetInlineStart: `${barPercent}%` } }, item.displayValue)));
+            return (h("div", { key: `bar-${item.barLegend}`, class: "bar-wrapper" }, h("div", { class: "bar", style: { width: `${barPercent}%`, backgroundColor: `var(--${item.color})` }, onClick: (ev) => this.handleBarClick(ev, idx), onKeyDown: (ev) => this.handleBarKeyDown(ev, idx), tabindex: "-1", "aria-label": `${item.barLegend} ${item.displayValue}` }), h("span", { class: "value", style: { insetInlineStart: `${barPercent}%` } }, item.displayValue)));
         });
     }
     renderXAxis() {
@@ -297,7 +297,7 @@ export class ChartBar {
     render() {
         var _a, _b, _c, _d, _e, _f, _g;
         const rowCount = this.processedData.length || 1;
-        return (h(Host, { key: 'af9ee18a445a32072133a4818a17543a9b642653' }, h("div", { key: '1ebd9b80b2546978f0819918abc7be5d71058315', class: "component-wrapper", tabindex: "0", role: "application", onKeyDown: (ev) => this.handleChartKeyDown(ev), onBlur: (ev) => this.handleComponentBlur(ev), "aria-roledescription": chartMessages.interactiveChart, "aria-describedby": "chart-instructions", "aria-label": (_a = this.config) === null || _a === void 0 ? void 0 : _a.label }, h("div", { key: 'fe01168cac52e5dba3f05b7fc51c8ef581c1422c', class: "popover-wrapper" }, h("priv-chart-popover", { key: '84dc52e1c81f3a978e2b4369cb675ef3969038cf', ref: (el) => (this.popoverEl = el), onIntChartPopoverOpenChanged: (ev) => this.handlePopoverOpenChanged(ev) })), h("label", { key: '0190875870d6e90915038a49c26343ee85f57a20', id: "label", class: `label --${(_b = this.config) === null || _b === void 0 ? void 0 : _b.labelPosition}` }, h("span", { key: '1d6900d5a62cecea8afab6f3348f9ed7305bed9f', class: "label-text" }, (_c = this.config) === null || _c === void 0 ? void 0 : _c.label), this.subinfoText ? h("span", { class: "subinfo" }, this.subinfoText) : ""), this.showLegend === "top" && this.renderLegend("horizontal"), h("div", { key: '1c22408dd8d89d988202eaa31279026641325f03', class: "chart-wrapper" }, h("div", { key: '11e1c3558f052f2f77f8b8e3f29503ca69a5f93d', class: "chart-left-side" }, this.showLegend === "left" && this.renderLegend("vertical"), h("div", { key: '96852f416f193b403dd2a1d55f8ef0d9181779ab', class: "category-axis-label" }, h("span", { key: '4c25a14518ea40222b2b965a319624ea35f87a84', class: "axis-label-text" }, (_d = this.config) === null || _d === void 0 ? void 0 : _d.categoryAxisLabel))), h("div", { key: '7dcd802835da086e4860ee3f09e256bcb925b7ad', class: "chart-center" }, h("div", { key: 'bc8e2bfc65afea16e352b61f77bd9483271af04b', class: "chart-area", style: { "--row-count": rowCount.toString() } }, this.processedData && this.renderBarLegends(), h("div", { key: '5bcfb85a9d3f13843edd8a4242473e29ff8373e7', class: `bar-area ${this.isKeying ? "user-is-keying" : ""}`, ref: (el) => (this.barAreaEl = el) }, this.gridInfo && ((_e = this.config) === null || _e === void 0 ? void 0 : _e.gridMax) != undefined && this.renderGrid(), this.gridInfo && this.processedData && this.renderBars())), h("div", { key: '8d7ea9e756430f0fc18db7a2114adca5dd0b13a0', class: "value-axis-label" }, h("span", { key: '5c6d15a4dc479179de31ab267dcbacf50bd6a918', class: "axis-label-text" }, (_f = this.config) === null || _f === void 0 ? void 0 : _f.valueAxisLabel)), this.gridInfo && ((_g = this.config) === null || _g === void 0 ? void 0 : _g.gridMax) != undefined && this.renderXAxis()), h("div", { key: '3cf6cf7f5574af218c366b00c3abfde6ad8d9204', class: "chart-right-side" }, this.showLegend === "right" && this.renderLegend("vertical"))), this.showLegend === "bottom" && this.renderLegend("horizontal"), renderInstructionsText())));
+        return (h(Host, { key: '2fe75003c819b49d5de618eea92bbd2fcfc10723' }, h("div", { key: '48f496b705d9571f9386dfddaaaddbd414836252', class: "component-wrapper", tabindex: "0", role: "application", onKeyDown: (ev) => this.handleChartKeyDown(ev), onBlur: (ev) => this.handleComponentBlur(ev), "aria-roledescription": chartMessages.interactiveChart, "aria-describedby": "chart-instructions", "aria-label": (_a = this.config) === null || _a === void 0 ? void 0 : _a.label }, h("div", { key: '9f78d67d37c8048554127adbd40ee94409dcc575', class: "popover-wrapper" }, h("priv-chart-popover", { key: '9d1f5bf3bb3d1af0a36b2c0e7d53a7e56f23ce9d', ref: (el) => (this.popoverEl = el), onIntChartPopoverOpenChanged: (ev) => this.handlePopoverOpenChanged(ev) })), h("label", { key: 'c111aecf07f21b19422804a21ffeba9632258309', id: "label", class: `label --${(_b = this.config) === null || _b === void 0 ? void 0 : _b.labelPosition}` }, h("span", { key: 'bb866688ed8f54ded76bfdff8ca54437322dc73d', class: "label-text" }, (_c = this.config) === null || _c === void 0 ? void 0 : _c.label), this.subinfoText ? h("span", { class: "subinfo" }, this.subinfoText) : ""), this.showLegend === "top" && this.renderLegend("horizontal"), h("div", { key: '58a8f0c8932fa214311ef73fac64925d2eb1cb74', class: "chart-wrapper" }, h("div", { key: '1ad4c29e26a7d5fb3e23b54d25ce639adbceedd9', class: "chart-left-side" }, this.showLegend === "left" && this.renderLegend("vertical"), h("div", { key: '5f7aeb14ab9101f1fd38c811d9ac17660c5055d5', class: "category-axis-label" }, h("span", { key: 'bc99815352064b5b62efc9634d0f623b29e56c19', class: "axis-label-text" }, (_d = this.config) === null || _d === void 0 ? void 0 : _d.categoryAxisLabel))), h("div", { key: '1b968d3f687215a65ddd3bc6e39bc96dd908c68c', class: "chart-center" }, h("div", { key: '6da38ae08882fed85387427d8c36984160ac805a', class: "chart-area", style: { "--row-count": rowCount.toString() } }, this.processedData && this.renderBarLegends(), h("div", { key: '1413e4f4a62e10cf7236d87b38b96932f3bd713a', class: `bar-area ${this.isKeying ? "user-is-keying" : ""}`, ref: (el) => (this.barAreaEl = el) }, this.gridInfo && ((_e = this.config) === null || _e === void 0 ? void 0 : _e.gridMax) != undefined && this.renderGrid(), this.gridInfo && this.processedData && this.renderBars())), h("div", { key: '5021bad3a65b05b5280a63320dacfab6b560ab88', class: "value-axis-label" }, h("span", { key: 'c2b06b622ef28a16423eaa277c31e7c298ed431d', class: "axis-label-text" }, (_f = this.config) === null || _f === void 0 ? void 0 : _f.valueAxisLabel)), this.gridInfo && ((_g = this.config) === null || _g === void 0 ? void 0 : _g.gridMax) != undefined && this.renderXAxis()), h("div", { key: '49ae3d55b3172a5d98cb26b6bbdd59c277b38b57', class: "chart-right-side" }, this.showLegend === "right" && this.renderLegend("vertical"))), this.showLegend === "bottom" && this.renderLegend("horizontal"), renderInstructionsText())));
     }
     static get is() { return "wm-chart-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -318,7 +318,7 @@ export class ChartBar {
                 "mutable": false,
                 "complexType": {
                     "original": "ChartConfig",
-                    "resolved": "undefined | { label: string; labelPosition: \"top\" | \"none\"; labelWidth: string; valueAxisLabel: string; categoryAxisLabel: string; printMode: boolean; printModeFormat: \"amount\" | \"percentage\"; gridMax?: number | \"auto\" | undefined; sort?: \"none\" | \"ascending\" | \"descending\" | undefined; showLegend?: \"top\" | \"bottom\" | \"left\" | \"right\" | \"none\" | undefined; subinfo?: string | undefined; completionMessage?: string | undefined; valueFormat?: \"none\" | \"amount\" | \"percentage\" | undefined; colors?: string | undefined; popoverTitle?: string | undefined; popoverText?: string | undefined; popoverButtonText?: string | undefined; }",
+                    "resolved": "undefined | { label: string; labelPosition: \"top\" | \"none\"; valueAxisLabel: string; categoryAxisLabel: string; printMode: boolean; printModeFormat: \"amount\" | \"percentage\"; gridMax?: number | \"auto\" | undefined; sort?: \"none\" | \"ascending\" | \"descending\" | undefined; showLegend?: \"top\" | \"bottom\" | \"left\" | \"right\" | \"none\" | undefined; subinfo?: string | undefined; completionMessage?: string | undefined; valueFormat?: \"none\" | \"amount\" | \"percentage\" | undefined; colors?: string | undefined; popoverTitle?: string | undefined; popoverText?: string | undefined; popoverButtonText?: string | undefined; }",
                     "references": {
                         "ChartConfig": {
                             "location": "import",

package/dist/collection/components/charts/wm-chart-legend/wm-chart-legend.js

@@ -26,10 +26,10 @@ export class ChartLegend {
         this.wmLegendItemClick.emit({ idx: idx });
     }
     renderLegendItems() {
-        return this.processedData.map((item, idx) => (h("div", { class: "legend-item", key: item.label, onClick: () => this.handleLegendItemClick(idx) }, h("div", { class: "color", style: { "--color": `var(--${item.color})` } }), h("div", { class: "label" }, item.label), h("span", { class: `print-value ${this.printMode ? "force-visible" : ""}` }, "(", item.printValue, ")"))));
+        return this.processedData.map((item, idx) => (h("div", { class: "legend-item", key: item.barLegend, onClick: () => this.handleLegendItemClick(idx) }, h("div", { class: "color", style: { "--color": `var(--${item.color})` } }), h("div", { class: "label" }, item.barLegend), h("span", { class: `print-value ${this.printMode ? "force-visible" : ""}` }, "(", item.printValue, ")"))));
     }
     render() {
-        return (h(Host, { key: 'c6cff1273bae9bd36f74c056bc7863a538e83e28' }, h("div", { key: '8538f637a18d8b7e9877f8a95ff6a31e8e7ee317', class: `legend-container --${this.orientation}` }, this.renderLegendItems())));
+        return (h(Host, { key: 'be2793da927897a4c0e62345ffe502967fd7f12c' }, h("div", { key: '382567c522ff081fbd02e96563b11f1831a56c32', class: `legend-container --${this.orientation}` }, this.renderLegendItems())));
     }
     static get is() { return "wm-chart-legend"; }
     static get encapsulation() { return "shadow"; }

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

@@ -273,55 +273,74 @@ export class Select {
         }
         this.announcement = message;
     }
-    renderButtonText() {
-        this.displayedOptions = this.childOptions.filter((x) => x.selected);
-        if (this.multiple && this.displayedOptions.length < 1) {
-            return h("span", null, this.placeholder);
+    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;
         }
-        else if (this.multiple && this.allSelected && this.overflowCount > 0) {
-            return this.allSelectedMessage;
+    }
+    setButtonText() {
+        if (!this.multiple) {
+            const selEl = this.childOptions.filter((x) => x.selected)[0];
+            return selEl ? selEl.textContent : "";
         }
         else {
-            // handle overflow + counter for multiselect
-            // only bother if things have changed
+            this.displayedOptions = this.childOptions.filter((x) => x.selected);
             const hasChanged = this.displayedOptions !== this.previousDisplayedOptions;
-            if (this.multiple && hasChanged) {
-                // 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;
+            const noDisplayedOptions = this.displayedOptions.length < 1;
+            if (noDisplayedOptions) {
+                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;
+                    this.buttonText = this.allSelectedMessage;
+                }
+                else {
+                    this.buttonText = this.displayedOptions.map((x) => x.textContent).join(", ");
                 }
-                this.previousDisplayedOptions = this.displayedOptions;
             }
-            return this.displayedOptions.map((x, idx) => (h("span", null, idx > 0 ? ", " : "", x.textContent)));
+            this.previousDisplayedOptions = this.displayedOptions;
+            // 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
         }
     }
     renderOverflowCount() {
-        if (this.overflowCount > 0 && !this.allSelected) {
+        if (this.overflowCount > 0) {
             return (h("span", null, h("span", { class: "overflow-counter" }, "+", this.overflowCount)));
         }
     }
     render() {
         const showSubinfo = !this.multiple && this.selectedOptions.length > 0 && this.selectedOptions[0].subinfo;
-        return (h(Host, { key: 'e58f2afa4361d7e27f94175a32acb0f93701cf76', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: '13de69b572a4af34c1abc0002bbc8a87dc7d521a', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'd234f604a3f94f843617733f6a8f5baaabc098d3', class: "label-wrapper" }, h("label", { key: '9dac4166a74898241e6422cd93023e5980d015bf', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), 
+        return (h(Host, { key: '9a0a5c13f988c06c380ed732da86365c28446e77', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: '3aa70cdc8f541d6f93ff99cbe44d6192bcba364b', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '899522611760999dca554ab63bfa0f5c831d0542', class: "label-wrapper" }, h("label", { key: '0730c044f78edc158ac6a2de09ea05a09ddecd23', 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: '788b4c52a1e59bfb425f909374f722b5856b8fb3', class: "required" }, h("span", { key: '95cbdb98f925a5b80579a77147151903f2f63618', class: "sr-only" }, globalMessages.requiredField), h("span", { key: 'ca3dacb55461f2cd7f5b81c746e5b70d8bd82f27', "aria-hidden": "true" }, "*")))), h("div", { key: '65cb0cbfe742c251b082adc84af5648a54ff4f12', class: "button-wrapper" }, h("button", { key: '8731a753912360eeb0ed4b60019463bf4398f8ae', 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: 'e8d751bedfcc1922416fc177f43153ed2dfa0f84', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: '104277dfd731f7138889d573ad33ab7e5f8f4ffe', class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { key: 'cddb5d3cb91877c2adf73978e2e3114e3a148999', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: 'e4e76e115d85e4a3d24a17d762dec65091c14c69', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '910df5182752522e9a709afbbb9d885b4cb93f46', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: '620f6414a70890323eb11958ff2c17415a86e437',
+        this.requiredField && (h("span", { key: 'b453a4c0fbd8973d62a7cfdc4e37537ab94dfed8', class: "required" }, h("span", { key: '53699fcc342d68b1fb24180cb13a524ab58038c4', class: "sr-only" }, globalMessages.requiredField), h("span", { key: 'b7489dbe7ee74b6c46d30002762f10624f26cad7', "aria-hidden": "true" }, "*")))), h("div", { key: 'b44b002b4a5b34cf0958a8ddfc9efcb6934873f0', class: "button-wrapper" }, h("button", { key: 'b6f5d59e8399d894c2bb7cbfd4c9b5e57a7bfc4a', 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: 'c4d37441c2e76ecf5c03b6a22cabbec2d16c77bc', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: 'baa91ff63a3d7d33be866337237408f38f46cc60', class: "button-text" }, this.setButtonText()), showSubinfo && h("span", { key: '5ed44f71ef8184df2bfee442fa94e496f9305b54', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: 'd0e3a1bade399be089b1f38e33281ca5f1e6cc03', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '2a43776bb5a5cccc79796939ca9be7b7b8ee569a', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: 'eac706ae0781e210c89aed74dded805472a01996',
             // 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: 'a059818c76eaad5b43895e30cc9a40ada0bc3ffa', 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: '3ba4da015a18e38b1a6fddd6788886d4dc551cd1', 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;
@@ -329,7 +348,7 @@ export class Select {
             }, onOptionListAllDeselected: () => {
                 this.returnFocus = true;
                 this.wmSelectAllDeselected.emit();
-            } }, h("slot", { key: 'a8f910407e5bbba4b5d6e004f2114f2519c56454' }))), h("div", { key: '13651a1650697c9860718e4665dbf300ab6e5faa', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: 'f627a9e7035ea2f2df40493242965d2e15184de9', id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
+            } }, h("slot", { key: '87030837dc77fa939c06ccaf0f69e5b4d067c628' }))), h("div", { key: '36ccfeb061afde76690cf17a27aef19cfdf01071', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: '63a34701d7a0822dca9c7970be7bce7c74dcfa72', 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/collection/dev/chart-bar.js

@@ -25,14 +25,14 @@ setTimeout(() => {
     };
 
     barChart1.data = [
-      { label: "Marine Biology", amount: 250, whatever: "whatever", color: "wmcolor-border" },
-      { label: "Organic Chemistry", amount: 500 },
-      { label: "Aeronautical Engineering", amount: 982 },
-      { label: "Pure Mathematics", amount: 100 },
-      { label: "Astrophysics", amount: 500, popoverTitle: "Astrophysics", popoverText: "Astrophysics description set by the data", popoverButtonText: "View Astrophysics Details" },
-      { label: "Social Psychology", amount: 900 },
-      { label: "Urban Sociology", amount: 500 },
-      { label: "Behavioral Economics & Economy Sciences", amount: 250 },
+      { barLegend: "Marine Biology", amount: 250, whatever: "whatever", color: "wmcolor-border" },
+      { barLegend: "Organic Chemistry", amount: 500 },
+      { barLegend: "Aeronautical Engineering", amount: 982 },
+      { barLegend: "Pure Mathematics", amount: 100 },
+      { barLegend: "Astrophysics", amount: 500, popoverTitle: "Astrophysics", popoverText: "Astrophysics description set by the data", popoverButtonText: "View Astrophysics Details" },
+      { barLegend: "Social Psychology", amount: 900 },
+      { barLegend: "Urban Sociology", amount: 500 },
+      { barLegend: "Behavioral Economics & Economy Sciences", amount: 250 },
     ];
 }, 1000);
 

package/dist/esm/{app-globals-be942f12.js → app-globals-2d0df1cb.js}

@@ -1,6 +1,6 @@
 import './index-130e07bb.js';
 
-const version = "5.23.0-alpha.0";
+const version = "5.23.0-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-be942f12.js';
+import { g as globalScripts } from './app-globals-2d0df1cb.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;

package/dist/esm/priv-chart-popover_2.entry.js

@@ -157,10 +157,10 @@ const ChartLegend = class {
         this.wmLegendItemClick.emit({ idx: idx });
     }
     renderLegendItems() {
-        return this.processedData.map((item, idx) => (h("div", { class: "legend-item", key: item.label, onClick: () => this.handleLegendItemClick(idx) }, h("div", { class: "color", style: { "--color": `var(--${item.color})` } }), h("div", { class: "label" }, item.label), h("span", { class: `print-value ${this.printMode ? "force-visible" : ""}` }, "(", item.printValue, ")"))));
+        return this.processedData.map((item, idx) => (h("div", { class: "legend-item", key: item.barLegend, onClick: () => this.handleLegendItemClick(idx) }, h("div", { class: "color", style: { "--color": `var(--${item.color})` } }), h("div", { class: "label" }, item.barLegend), h("span", { class: `print-value ${this.printMode ? "force-visible" : ""}` }, "(", item.printValue, ")"))));
     }
     render() {
-        return (h(Host, { key: 'c6cff1273bae9bd36f74c056bc7863a538e83e28' }, h("div", { key: '8538f637a18d8b7e9877f8a95ff6a31e8e7ee317', class: `legend-container --${this.orientation}` }, this.renderLegendItems())));
+        return (h(Host, { key: 'be2793da927897a4c0e62345ffe502967fd7f12c' }, h("div", { key: '382567c522ff081fbd02e96563b11f1831a56c32', class: `legend-container --${this.orientation}` }, this.renderLegendItems())));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }

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-be942f12.js';
+import { g as globalScripts } from './app-globals-2d0df1cb.js';
 
 /*
  Stencil Client Patch Browser v4.21.0 | MIT Licensed | https://stenciljs.com