@watermarkinsights/ripple 5.23.0-alpha.5 → 5.23.0-alpha.6

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

@@ -1,6 +1,6 @@
 import { h, Host } from "@stencil/core";
-import { chartPaletteDiscrete, chartPaletteSemantic, } from "../../../global/interfaces";
-import { formatDisplayValue, suffixNumber, renderInstructionsText, findLargestNiceInterval, getMaxTicks, } from "../chartFunctions";
+import { chartPalettes, } from "../../../global/interfaces";
+import { formatDisplayValue, suffixNumber, renderInstructionsText, findLargestNiceInterval, getMaxTicks, findNiceRoundNumber, } from "../chartFunctions";
 import { chartMessages } from "../../../global/intl";
 import { isElOrChild } from "../../../global/functions";
 export class ChartBar {
@@ -21,10 +21,10 @@ export class ChartBar {
         var _a, _b, _c, _d;
         let palette = ["wmcolor-dataviz-discrete-01"]; // default to single color
         if (((_a = this.config) === null || _a === void 0 ? void 0 : _a.colors) === "semantic") {
-            palette = chartPaletteSemantic;
+            palette = chartPalettes.semantic;
         }
         else if (((_b = this.config) === null || _b === void 0 ? void 0 : _b.colors) == "discrete") {
-            palette = chartPaletteDiscrete;
+            palette = chartPalettes.discrete;
         }
         else if ((_d = (_c = this.config) === null || _c === void 0 ? void 0 : _c.colors) === null || _d === void 0 ? void 0 : _d.startsWith("wmcolor-")) {
             palette = [this.config.colors];
@@ -43,6 +43,10 @@ export class ChartBar {
         var _a;
         return this.subinfo || ((_a = this.config) === null || _a === void 0 ? void 0 : _a.subinfo) || "";
     }
+    get gridVisible() {
+        var _a, _b, _c;
+        return !!this.gridInfo && ((_a = this.config) === null || _a === void 0 ? void 0 : _a.gridMax) != undefined && ((_c = (_b = this.config) === null || _b === void 0 ? void 0 : _b.showGrid) !== null && _c !== void 0 ? _c : true);
+    }
     // #endregion getters
     ////////////////////////////////////////////////////////////
     // #region Component lifecycle
@@ -63,10 +67,16 @@ export class ChartBar {
         if (this.config && this.data) {
             const itemTotal = this.data.reduce((acc, item) => acc + item.amount, 0);
             const largest = Math.max(...this.data.map((item) => item.amount));
-            // Use config.gridMax if specified, otherwise calculate from data
-            // Even when the grid is not displayed (undefined), we need a gridMax to calculate the bar widths
-            this.gridMax =
-                this.config.gridMax === "auto" || this.config.gridMax === undefined ? largest : this.config.gridMax;
+            if (this.config.gridMax == "auto") {
+                this.gridMax = findNiceRoundNumber(largest);
+            }
+            else if (!!this.config.gridMax) {
+                this.gridMax = this.config.gridMax;
+            }
+            else {
+                // fallback to 1 and chart should not render
+                this.gridMax = 1;
+            }
             const processedItems = this.processItems(itemTotal);
             if (this.sort === "ascending") {
                 processedItems.sort((a, b) => a.amount - b.amount);
@@ -80,6 +90,9 @@ export class ChartBar {
     }
     processItems(itemTotal) {
         var _a, _b;
+        if (!this.data) {
+            return [];
+        }
         const valueFormat = ((_a = this.config) === null || _a === void 0 ? void 0 : _a.valueFormat) || "amount"; // default to amount
         const printModeFormat = ((_b = this.config) === null || _b === void 0 ? void 0 : _b.printModeFormat) || "amount"; // default to amount
         const defaultColor = "wmcolor-dataviz-discrete-01";
@@ -170,21 +183,15 @@ export class ChartBar {
             this.highlightBar(idx);
         }
     }
-    handleExternalLegendItemClick(ev) {
+    handleLegendItemClick(ev) {
         if (ev.target.nodeName === "WM-CHART-LEGEND") {
-            // Only considers external legends, event target of internal legends is the chart
+            // If event from an internal legend bubbles up to the chart, ignore it
             const legendEl = ev.target;
             if (legendEl.chartIds.includes(this.el.id)) {
                 this.highlightBar(ev.detail.idx);
             }
         }
     }
-    handleInternalLegendItemClick(ev) {
-        const legendEl = ev.target;
-        if (legendEl.chartIds.includes(this.el.id)) {
-            this.highlightBar(ev.detail.idx);
-        }
-    }
     handleDocumentClick(_ev) {
         // Clear highlights when highlight is set from an external legend (not opening a popover)
         if (!this.popoverEl.open) {
@@ -219,7 +226,7 @@ export class ChartBar {
             y: barToFocus.getBoundingClientRect().top + cornerOffset,
         });
     }
-    handlePopoverOpenChanged(_ev) {
+    handlePopoverToggled(_ev) {
         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) {
@@ -231,6 +238,9 @@ export class ChartBar {
         }, 30);
     }
     openPopover(clickedProcessedData, coords) {
+        if (!this.data || !this.config) {
+            return;
+        }
         let matchingChartData = this.data.find((item) => item.barLegend === clickedProcessedData.barLegend);
         if (matchingChartData) {
             this.popoverEl.chartData = matchingChartData;
@@ -262,7 +272,6 @@ export class ChartBar {
     clearFocus() {
         if (this.popoverEl.open) {
             this.popoverEl.open = false;
-            console.log("popover closed from clearFocus: ", this.popoverEl.open);
         }
         this.clearHighlights();
     }
@@ -274,6 +283,9 @@ export class ChartBar {
         return this.processedData.map((item) => (h("div", { key: `legend-${item.barLegend}`, class: "bar-legend" }, item.barLegend)));
     }
     renderBars() {
+        if (!this.gridInfo || !this.processedData) {
+            return;
+        }
         // Use effective grid max (numTicks * interval) for accurate bar sizing
         const effectiveGridMax = this.gridInfo.numTicks * this.gridInfo.interval;
         return this.processedData.map((item, idx) => {
@@ -287,17 +299,19 @@ export class ChartBar {
             _a.tickLabels.map((label) => (h("div", { class: "tick", key: label }, h("span", null, label))))));
     }
     renderGrid() {
-        return h("div", { class: "grid-lines", style: { "--background-size": this.gridInfo.backgroundSize } });
+        var _a;
+        const backgroundSize = (_a = this.gridInfo) === null || _a === void 0 ? void 0 : _a.backgroundSize;
+        return h("div", { class: "grid-lines", style: { "--background-size": backgroundSize } });
     }
     renderLegend(orientation) {
         var _a, _b, _c;
-        return (h("div", { class: `legend --${orientation} --${this.showLegend}` }, h("wm-chart-legend", { orientation: orientation, chartIds: this.el.id, processedData: this.processedData, printMode: (_c = (_a = this.printMode) !== null && _a !== void 0 ? _a : (_b = this.config) === null || _b === void 0 ? void 0 : _b.printMode) !== null && _c !== void 0 ? _c : false, onWmLegendItemClick: (ev) => this.handleInternalLegendItemClick(ev) })));
+        return (h("div", { class: `legend --${orientation} --${this.showLegend}` }, h("wm-chart-legend", { orientation: orientation, chartIds: this.el.id, processedData: this.processedData, printMode: (_c = (_a = this.printMode) !== null && _a !== void 0 ? _a : (_b = this.config) === null || _b === void 0 ? void 0 : _b.printMode) !== null && _c !== void 0 ? _c : false, onWmLegendItemClick: (ev) => this.handleLegendItemClick(ev) })));
     }
     // #endregion rendering
     render() {
         var _a, _b, _c, _d, _e, _f, _g;
         const rowCount = this.processedData.length || 1;
-        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())));
+        return (h(Host, { key: '778b8642fd4cef3d90949740fce75151aaf44654' }, h("div", { key: 'dbcf9dfb3a3923e4e8fed64cb7f65d09d04192f1', 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: '011f7671bbf2346282582cbcafb5b6e2fc1b2c68', class: "popover-wrapper" }, h("priv-chart-popover", { key: '37073f1f5b48dd11563d614ccd4a39fd0d875926', ref: (el) => (this.popoverEl = el), onIntChartPopoverToggled: (ev) => this.handlePopoverToggled(ev) })), ((_c = (_b = this.config) === null || _b === void 0 ? void 0 : _b.showLabel) !== null && _c !== void 0 ? _c : true) && (h("label", { key: '59ce163b9551a0889a1ab69e00a8ae66f7d153de', id: "label", class: "label" }, h("span", { key: 'f9d24cee45469b072953e6e237ccbe2c740678c4', class: "label-text" }, (_d = this.config) === null || _d === void 0 ? void 0 : _d.label), this.subinfoText ? h("span", { class: "subinfo" }, this.subinfoText) : "")), this.showLegend === "top" && this.renderLegend("horizontal"), h("div", { key: '3f20081198b084e9336cfcca7ca206292446c2d2', class: "chart-wrapper" }, h("div", { key: '71c59296c0af14515241d781e44ff512bfa89cc2', class: "chart-left-side" }, this.showLegend === "left" && this.renderLegend("vertical"), h("div", { key: '11f895eda739c0af71f2f889595dfc35ea96e771', class: "category-axis-label" }, h("span", { key: '79043541f3efbc80ae165ad739af82ed89c51790', class: "axis-label-text" }, (_e = this.config) === null || _e === void 0 ? void 0 : _e.categoryAxisLabel))), h("div", { key: '0e88bfb0103df986f53dd3974adcf8932145a8d8', class: "chart-center" }, h("div", { key: 'eab8dfc1ae2fabb1caa95f4e91e8d901396a44dd', class: "chart-area", style: { "--row-count": rowCount.toString() } }, this.processedData && this.renderBarLegends(), h("div", { key: 'ae7fa3dd860b987af14ee1ffd2a48bb521745ec0', class: `bar-area ${this.isKeying ? "user-is-keying" : ""}`, ref: (el) => (this.barAreaEl = el) }, this.gridVisible && this.renderGrid(), ((_f = this.config) === null || _f === void 0 ? void 0 : _f.gridMax) != undefined && this.renderBars())), h("div", { key: '1e20f60338bbde68234a6315cac9fdecbb36c8ef', class: "value-axis-label" }, h("span", { key: 'a96919a4a6e540bffd0f8f40e8b791888944605e', class: "axis-label-text" }, (_g = this.config) === null || _g === void 0 ? void 0 : _g.valueAxisLabel)), this.gridVisible && this.renderXAxis()), h("div", { key: 'e9f6910f160952676ddf30f90c824277752d20d9', 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 +332,7 @@ export class ChartBar {
                 "mutable": false,
                 "complexType": {
                     "original": "ChartConfig",
-                    "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; }",
+                    "resolved": "undefined | { label: string; showLabel: boolean; valueAxisLabel: string; categoryAxisLabel: string; printMode: boolean; printModeFormat: \"amount\" | \"percentage\"; gridMax: number | \"auto\"; sort?: \"ascending\" | \"descending\" | \"none\" | undefined; showLegend?: \"top\" | \"bottom\" | \"left\" | \"right\" | \"none\" | undefined; showGrid?: boolean | undefined; subinfo?: string | undefined; completionMessage?: string | undefined; valueFormat?: \"amount\" | \"percentage\" | \"none\" | undefined; colors?: string | undefined; popoverTitle?: string | undefined; popoverText?: string | undefined; popoverButtonText?: string | undefined; }",
                     "references": {
                         "ChartConfig": {
                             "location": "import",
@@ -432,7 +446,7 @@ export class ChartBar {
     static get listeners() {
         return [{
                 "name": "wmLegendItemClick",
-                "method": "handleExternalLegendItemClick",
+                "method": "handleLegendItemClick",
                 "target": "document",
                 "capture": false,
                 "passive": false
@@ -448,24 +462,12 @@ export class ChartBar {
                 "target": "window",
                 "capture": false,
                 "passive": false
-            }, {
-                "name": "wmUserIsTabbing",
-                "method": "handleUserIsKeying",
-                "target": "window",
-                "capture": false,
-                "passive": false
             }, {
                 "name": "wmUserIsNotKeying",
                 "method": "handleUserIsNotKeying",
                 "target": "window",
                 "capture": false,
                 "passive": false
-            }, {
-                "name": "wmUserIsNotTabbing",
-                "method": "handleUserIsNotKeying",
-                "target": "window",
-                "capture": false,
-                "passive": false
             }];
     }
 }

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: '32eda81294981e2d46b283c469f7373f9984dbdd', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: 'dc3e7f782326beda2517cf8878516d4d23576bf3', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '0ddf3269d861b1d252876b587346739e978117fe', class: "label-wrapper" }, h("label", { key: '78493121ecada1718c1f0de42cdc09289d000bc9', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), 
+        return (h(Host, { key: 'b9e427db71b61d4731a3c8c31826358efb2e71c9', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: '6a8ad960dfcf56ba23736c5dc7306517a0f4cc61', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'a1829bc5949a9e75629bb645ab63331af4ae71f1', class: "label-wrapper" }, h("label", { key: '329944256ca0c0a76881b03192579849106fc0b8', 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: 'dfa3603962893e5fe6542924561fbe31828b694b', class: "required" }, h("span", { key: '478a6d2c7e9bb56dea7165a1e762bc3a136c7c1d', class: "sr-only" }, globalMessages.requiredField), h("span", { key: '8f3115f4a09dc109ed4580be49e3a704bd643ca0', "aria-hidden": "true" }, "*")))), h("div", { key: 'cbe6cc0600f11352dfc81a5a991805e757256906', class: "button-wrapper" }, h("button", { key: 'e943b99068a8822a65d8cc8ae6ab61999ac8a511', 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: 'e914e5cc9eabfe311e4ed57ee92744b14e3828e4', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: '095981a63cea28e0dbcdc269401eb511694739f6', class: "button-text" }, this.setButtonText()), showSubinfo && h("span", { key: 'd006aadc9c414abf0dfefc05d8fbff9c0fc1c370', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: '77054ec91448bc021ce4a4bacfa5a1a8130e34d3', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '1719132ac678c1a8a530e3b7f2fc3c67cd7c73ae', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: 'dc968de113b89cdf848d7a231b097a4d2308b357',
+        this.requiredField && (h("span", { key: '5a7d128c99b2eb064c038aecca4097304775b94c', class: "required" }, h("span", { key: 'fea081b4029d61add6f8a1a6743e30eb64329f89', class: "sr-only" }, globalMessages.requiredField), h("span", { key: 'a8f8fd3695883555ccfdf1d63a56aa0b54472ac7', "aria-hidden": "true" }, "*")))), h("div", { key: 'd8c783d92db1f7599ad431ff14069d26f335efee', class: "button-wrapper" }, h("button", { key: '56a36ae5267f5323a595f411d9a4a7257e04ede1', 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: 'f026cf1c1f331ef84253a55df3308e518e8c38ed', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: 'c48385d25e0ac06b1faa8b5760949c4e3872a6c1', class: "button-text" }, this.setButtonText()), showSubinfo && h("span", { key: 'd47f6e6ccb3dfda11fdfd74c3880038a3582f593', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: 'ec2f38fce7005421341b176bbb9a07a2f4f930f2', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '76e51beef029574af384673324937b78631baac0', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: '5ada44373bccb9ff83b8d33d5454f197fdbcece2',
             // 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: '64518e2aa66f3373417506a4126fcec27de552f5', 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: '85262c7c088219e1bb7e50953c4fd058d8750a12', 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: '138d16484638a094fd0664982e30149888cc3270' }))), h("div", { key: 'fc644fe425fc73337558af6dc809893e0574ba9a', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: 'a6f373b32a1dc83a788bfd17ee410e23a6d53001', id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
+            } }, h("slot", { key: '66b4a65b4477b82cb8e0073cc49842e4d2a9e724' }))), h("div", { key: 'a3e19f185805e5ce1818fbc101e8e41ebeda3b8d', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: 'e524c3fdfc16d96750e7ddfa84207fb92803b648', 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/components/wm-modal/wm-modal.js

@@ -31,10 +31,8 @@ export class Modal {
         return customElementToFocus;
     }
     get hasBrowserPopoverSupport() {
-        // for browsers without popover support, render an additional tooltip in the top-layer so that it can be displayed above the dialog element
-        const tooltipEl = document.getElementById("wm-tooltip");
-        //@ts-ignore
-        return tooltipEl ? !!tooltipEl.showPopover : false;
+        // For browsers without popover support, render a fallback tooltip inside the dialog so it appears above it
+        return typeof HTMLElement.prototype.showPopover === 'function';
     }
     toggleModal() {
         this.open ? this.showModal() : this.hideModal();
@@ -116,11 +114,11 @@ export class Modal {
         }
     }
     render() {
-        return (h("dialog", { key: '7e79523b945c00909991a3dcfecfda79e92c882b', class: `${"wm-" + this.modalType}`, "aria-labelledby": `wm-modal-heading-text-${this.uid}`, ref: (el) => (this.dialogEl = el), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: 'c032006260d0c083a5b796e20705cb99f6fa44b9', class: "tabtrap sr-only", tabindex: "0", onFocus: (ev) => {
+        return (h("dialog", { key: '633554a1b1e5df10d410e1c31e2f960642718e57', class: `${"wm-" + this.modalType}`, "aria-labelledby": `wm-modal-heading-text-${this.uid}`, ref: (el) => (this.dialogEl = el), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: '3d6d3bbce8760bfb1e642771f534b1d603f6a74b', class: "tabtrap sr-only", tabindex: "0", onFocus: (ev) => {
                 const focusedFromCloseButton = ev.relatedTarget && ev.relatedTarget == this.closeButtonEl;
                 // no related target means we're coming from outside the page (browser chrome), and first element should be focused instead
                 focusedFromCloseButton ? this.focusLastElement.emit() : this.focusFirstElement.emit();
-            } }), !this.hasBrowserPopoverSupport && h("div", { key: '384ed4e4fa347e50d1f9c78a3c1d84d6dab9f34a', class: "wm-tooltip" }), h("slot", { key: '6ec6ba8b0b90db721ff1e29db8f259d2f1cff6d0' }), h("div", { key: '3795b7025286e5d4f542cfccad9c6851d2f22a8d', class: "tabtrap sr-only", tabindex: "0", onFocus: () => {
+            } }), !this.hasBrowserPopoverSupport && h("div", { key: '7c660029e60f4b8df004dd3b830025f047710ccc', class: "wm-tooltip" }), h("slot", { key: '7779d237802e80dd2c7f84516bd1327438813ce2' }), h("div", { key: 'eb2fa33d5fdae1b8c41102380471c593b10e1826', class: "tabtrap sr-only", tabindex: "0", onFocus: () => {
                 this.focusFirstElement.emit();
             } })));
     }

package/dist/collection/dev/chart-bar.js

@@ -12,13 +12,11 @@ setTimeout(() => {
     barChart1.config = {
       label: "Number of Students by Department",
       subinfo: "University of Education",
-      labelPosition: "top",
-      labelWidth: "150px",
       valueAxisLabel: "Students",
       categoryAxisLabel: "University Departments",
       printMode: true,
       printModeFormat: "percentage",
-      gridMax: 1000,
+      gridMax: 2000,
       popoverTitle: "Config Title",
       popoverText: "Description set by the config",
       popoverButtonText: "View Details",

package/dist/collection/global/functions.js

@@ -289,7 +289,7 @@ export function showTooltip(placement, anchorEl, tooltipText) {
     // this additional tooltip is only rendered in browsers that do not support popover
     const tooltipEls = document.querySelectorAll(".wm-tooltip");
     tooltipEls.length > 0 && tooltipEls.forEach((tooltipEl) => {
-        if (!!tooltipEl.showPopover) {
+        if (!!tooltipEl.showPopover && tooltipEl.hasAttribute('popover')) {
             tooltipEl.showPopover();
         }
         tooltipEl.classList.add("show");
@@ -316,7 +316,7 @@ export function showTooltip(placement, anchorEl, tooltipText) {
 export function hideTooltip() {
     const tooltipEls = document.querySelectorAll(".wm-tooltip");
     tooltipEls.length > 0 && tooltipEls.forEach((tooltipEl) => {
-        if (!!tooltipEl.hidePopover) {
+        if (!!tooltipEl.hidePopover && tooltipEl.hasAttribute('popover')) {
             tooltipEl.hidePopover();
         }
         tooltipEl.classList.remove("show");

package/dist/collection/global/global.js

@@ -34,20 +34,19 @@ window.addEventListener("mousedown", wmComponentMouseDownOnce);
 setMode((elm) => {
     return elm.getAttribute("mode") || document.documentElement.getAttribute("mode") || "planning";
 });
-document.addEventListener("DOMContentLoaded", () => {
-    // TOOLTIP
-    // Add a tooltip element
-    // This allows tooltips to be always at the highest stacking context (always on top)
-    // Element is added withing a container to avoid performance impact
-    const tooltipContainer = document.createElement("div");
-    tooltipContainer.id = "wm-tooltip-container";
-    const tooltipEl = document.createElement("div");
-    tooltipEl.id = "wm-tooltip";
-    tooltipEl.classList.add("wm-tooltip");
-    tooltipEl.setAttribute("popover", "manual");
-    tooltipEl.setAttribute("aria-hidden", "true");
-    const tooltipStyles = document.createElement("style");
-    tooltipStyles.textContent = `
+// TOOLTIP
+// Add a tooltip element
+// This allows tooltips to be always at the highest stacking context (always on top)
+// Element is added withing a container to avoid performance impact
+const tooltipContainer = document.createElement("div");
+tooltipContainer.id = "wm-tooltip-container";
+const tooltipEl = document.createElement("div");
+tooltipEl.id = "wm-tooltip";
+tooltipEl.classList.add("wm-tooltip");
+tooltipEl.setAttribute("popover", "manual");
+tooltipEl.setAttribute("aria-hidden", "true");
+const tooltipStyles = document.createElement("style");
+tooltipStyles.textContent = `
 .wm-tooltip {
   position: fixed;
   overflow: hidden;
@@ -84,7 +83,17 @@ document.addEventListener("DOMContentLoaded", () => {
   opacity: 1;
 }
 `;
+const body = document.querySelector("body");
+if (body) {
     document.head.appendChild(tooltipStyles);
     tooltipContainer.appendChild(tooltipEl);
-    document.querySelector("body").appendChild(tooltipContainer);
-});
+    body.appendChild(tooltipContainer);
+}
+else {
+    document.addEventListener("DOMContentLoaded", () => {
+        const body = document.querySelector("body");
+        document.head.appendChild(tooltipStyles);
+        tooltipContainer.appendChild(tooltipEl);
+        body.appendChild(tooltipContainer);
+    });
+}

package/dist/collection/global/interfaces.js

@@ -49,22 +49,24 @@ export const getWmMode = (ref) => {
         document.documentElement.getAttribute("mode") ||
         defaultMode);
 };
-export const chartPaletteDiscrete = [
-    "wmcolor-dataviz-discrete-01",
-    "wmcolor-dataviz-discrete-02",
-    "wmcolor-dataviz-discrete-03",
-    "wmcolor-dataviz-discrete-04",
-    "wmcolor-dataviz-discrete-05",
-    "wmcolor-dataviz-discrete-06",
-    "wmcolor-dataviz-discrete-07",
-];
-export const chartPaletteSemantic = [
-    "wmcolor-dataviz-semantic-positive-01",
-    "wmcolor-dataviz-semantic-positive-02",
-    "wmcolor-dataviz-semantic-negative-01",
-    "wmcolor-dataviz-semantic-negative-02",
-    "wmcolor-dataviz-semantic-neutral-01",
-    "wmcolor-dataviz-semantic-neutral-02",
-    "wmcolor-dataviz-semantic-neutral-03",
-    "wmcolor-dataviz-semantic-unspecified",
-];
+export const chartPalettes = {
+    discrete: [
+        "wmcolor-dataviz-discrete-01",
+        "wmcolor-dataviz-discrete-02",
+        "wmcolor-dataviz-discrete-03",
+        "wmcolor-dataviz-discrete-04",
+        "wmcolor-dataviz-discrete-05",
+        "wmcolor-dataviz-discrete-06",
+        "wmcolor-dataviz-discrete-07",
+    ],
+    semantic: [
+        "wmcolor-dataviz-semantic-positive-01",
+        "wmcolor-dataviz-semantic-positive-02",
+        "wmcolor-dataviz-semantic-negative-01",
+        "wmcolor-dataviz-semantic-negative-02",
+        "wmcolor-dataviz-semantic-neutral-01",
+        "wmcolor-dataviz-semantic-neutral-02",
+        "wmcolor-dataviz-semantic-neutral-03",
+        "wmcolor-dataviz-semantic-unspecified",
+    ],
+};

package/dist/esm/{app-globals-e00b1feb.js → app-globals-f57d8c7f.js}

@@ -1,6 +1,6 @@
 import './index-130e07bb.js';
 
-const version = "5.23.0-alpha.5";
+const version = "5.23.0-alpha.6";
 
 // PRINT RIPPLE VERSION IN CONSOLE
 // test envs return 0 for plugin.length
@@ -31,20 +31,19 @@ function wmComponentMouseDownOnce() {
 }
 window.addEventListener("keydown", wmComponentKeys);
 window.addEventListener("mousedown", wmComponentMouseDownOnce);
-document.addEventListener("DOMContentLoaded", () => {
-    // TOOLTIP
-    // Add a tooltip element
-    // This allows tooltips to be always at the highest stacking context (always on top)
-    // Element is added withing a container to avoid performance impact
-    const tooltipContainer = document.createElement("div");
-    tooltipContainer.id = "wm-tooltip-container";
-    const tooltipEl = document.createElement("div");
-    tooltipEl.id = "wm-tooltip";
-    tooltipEl.classList.add("wm-tooltip");
-    tooltipEl.setAttribute("popover", "manual");
-    tooltipEl.setAttribute("aria-hidden", "true");
-    const tooltipStyles = document.createElement("style");
-    tooltipStyles.textContent = `
+// TOOLTIP
+// Add a tooltip element
+// This allows tooltips to be always at the highest stacking context (always on top)
+// Element is added withing a container to avoid performance impact
+const tooltipContainer = document.createElement("div");
+tooltipContainer.id = "wm-tooltip-container";
+const tooltipEl = document.createElement("div");
+tooltipEl.id = "wm-tooltip";
+tooltipEl.classList.add("wm-tooltip");
+tooltipEl.setAttribute("popover", "manual");
+tooltipEl.setAttribute("aria-hidden", "true");
+const tooltipStyles = document.createElement("style");
+tooltipStyles.textContent = `
 .wm-tooltip {
   position: fixed;
   overflow: hidden;
@@ -81,10 +80,20 @@ document.addEventListener("DOMContentLoaded", () => {
   opacity: 1;
 }
 `;
+const body = document.querySelector("body");
+if (body) {
     document.head.appendChild(tooltipStyles);
     tooltipContainer.appendChild(tooltipEl);
-    document.querySelector("body").appendChild(tooltipContainer);
-});
+    body.appendChild(tooltipContainer);
+}
+else {
+    document.addEventListener("DOMContentLoaded", () => {
+        const body = document.querySelector("body");
+        document.head.appendChild(tooltipStyles);
+        tooltipContainer.appendChild(tooltipEl);
+        body.appendChild(tooltipContainer);
+    });
+}
 const globalFn = () => { };
 
 const globalScripts = globalFn;

package/dist/esm/{chartFunctions-9c95674d.js → chartFunctions-93592f14.js}

@@ -1,5 +1,5 @@
 import { h } from './index-130e07bb.js';
-import { i as intl, c as checkForActiveElInShadow, e as safeMultiplyFloat, f as getPosition } from './functions-2cfbd8c7.js';
+import { i as intl, c as checkForActiveElInShadow, e as safeMultiplyFloat, f as getPosition } from './functions-c1d5f184.js';
 
 const colors = {
     salmon: "#ff5f4e",
@@ -756,5 +756,22 @@ function findLargestNiceInterval(maxIntervals, total) {
     }
     return { numIntervals: 1, interval: total };
 }
+function findNiceRoundNumber(value) {
+    // Given a value, find the next "nice" round number >= that value.
+    // Examples: 982 → 1000, 45 → 50, 1234 → 1500, 7 → 10
+    if (value <= 0)
+        return 0;
+    const niceValues = [1, 1.5, 2, 2.5, 3, 5, 10];
+    const magnitude = Math.pow(10, Math.floor(Math.log10(value)));
+    const normalized = value / magnitude;
+    // Find the smallest nice value that is >= the normalized value
+    for (const nice of niceValues) {
+        if (nice >= normalized) {
+            return nice * magnitude;
+        }
+    }
+    // Fallback: next order of magnitude
+    return 10 * magnitude;
+}
 
-export { allChartsDetails as a, renderSimpleBar as b, renderStackedBar as c, renderDoughnut as d, renderInstructionsText as e, renderLegend as f, getDetails as g, handleChartKeydown as h, renderHiddenValuesMessage as i, exitChart as j, amountToPercent as k, renderCompletionMessage as l, renderLegendItem as m, formatDisplayValue as n, findLargestNiceInterval as o, getMaxTicks as p, abbrNumber as q, removeSegmentInfoHighlight as r, suffixNumber as s, getInterval as t };
+export { allChartsDetails as a, renderSimpleBar as b, renderStackedBar as c, renderDoughnut as d, renderInstructionsText as e, renderLegend as f, getDetails as g, handleChartKeydown as h, renderHiddenValuesMessage as i, exitChart as j, amountToPercent as k, renderCompletionMessage as l, renderLegendItem as m, findNiceRoundNumber as n, formatDisplayValue as o, findLargestNiceInterval as p, getMaxTicks as q, removeSegmentInfoHighlight as r, suffixNumber as s, abbrNumber as t, getInterval as u };