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

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";
@@ -102,7 +115,7 @@ export class ChartBar {
     }
     propogateExternalLegendData() {
         document.querySelectorAll("wm-chart-legend").forEach((legend) => {
-            if (legend.chartIds.includes(this.el.id)) {
+            if (legend.chartIds.split(" ").includes(this.el.id)) {
                 legend.processedData = this.processedData;
             }
         });
@@ -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: '25ef2866c614550701343844dc090c2196317bf3' }, h("div", { key: '5012a4e3e9326abff99b9130dc9fd141d0114dd2', 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: '02247b94279f67f82614da4e18c0797c7c474a31', class: "popover-wrapper" }, h("priv-chart-popover", { key: 'cb0ff3aa92bd15f39efd9d89f23595804063c12e', 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: 'd0b96650b5eabf977528d6c172623c42368d59ad', id: "label", class: "label" }, h("span", { key: '19f5401c9d400abcd0c235937cdcf36397b87a13', 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: '65f5c1c4509ece96afe38e450afdf247a5707017', class: "chart-wrapper" }, h("div", { key: '84889144d8cfc1499f756ee507f74c53019b321d', class: "chart-left-side" }, this.showLegend === "left" && this.renderLegend("vertical"), h("div", { key: '4a26740efcf32dddaa0dc858d7e6f9ccd0ecafe4', class: "category-axis-label" }, h("span", { key: '52085b0bc973c4ffa0d1b39eac5ad5ae94051e66', class: "axis-label-text" }, (_e = this.config) === null || _e === void 0 ? void 0 : _e.categoryAxisLabel))), h("div", { key: '6c3da024ac970921a432d7ebbb8c959375cea841', class: "chart-center" }, h("div", { key: 'bc769c8d38e10be0533ce16acc199f5e7892bd86', class: "chart-area", style: { "--row-count": rowCount.toString() } }, this.processedData && this.renderBarLegends(), h("div", { key: 'c7492058e017606d1363007efc5030ff6f51b06b', 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: 'db4a916f0538f8803072bd529f1af4b6c259cb75', class: "value-axis-label" }, h("span", { key: '48d215befd2f8f999b9c6beffbb3284f59971c46', class: "axis-label-text" }, (_g = this.config) === null || _g === void 0 ? void 0 : _g.valueAxisLabel)), this.gridVisible && this.renderXAxis()), h("div", { key: '816f3e01ba832d4dc540de68af6f2ccab2d88c5c', 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; 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/charts/wm-chart-legend/wm-chart-legend.js

@@ -7,7 +7,7 @@ export class ChartLegend {
         this.printMode = false;
     }
     handleChartBarHighlighted(ev) {
-        if (this.chartIds.includes(ev.target.id)) {
+        if (this.chartIds.split(" ").includes(ev.target.id)) {
             this.highlightLegendItem(ev.detail.idx);
         }
     }
@@ -29,7 +29,7 @@ export class ChartLegend {
         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: 'be2793da927897a4c0e62345ffe502967fd7f12c' }, h("div", { key: '382567c522ff081fbd02e96563b11f1831a56c32', class: `legend-container --${this.orientation}` }, this.renderLegendItems())));
+        return (h(Host, { key: 'f8c8c56e0a679b0f8ba7cb3af815276cb766b2fc' }, h("div", { key: '6d1a25c5b967ca52eed5653e850e9348146162e4', 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

@@ -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

@@ -1,4 +1,5 @@
 const barChart1 = document.getElementById("bar-chart-1");
+const barChart2 = document.getElementById("bar-chart-2");
 
 // Event listener for popover button triggered
 barChart1.addEventListener("wmPopoverButtonClick", (ev) => {
@@ -6,19 +7,22 @@ barChart1.addEventListener("wmPopoverButtonClick", (ev) => {
     document.body.style.backgroundColor = `var(--${ev.detail.color})`;
 });
 
+barChart2.addEventListener("wmPopoverButtonClick", (ev) => {
+    console.log("wmPopoverButtonClick: ", ev.detail);
+    document.body.style.backgroundColor = `var(--${ev.detail.color})`;
+});
+
 // Setup chart data
 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",
@@ -34,6 +38,30 @@ setTimeout(() => {
       { barLegend: "Urban Sociology", amount: 500 },
       { barLegend: "Behavioral Economics & Economy Sciences", amount: 250 },
     ];
+
+    barChart2.config = {
+      label: "Number of Students by Department",
+      subinfo: "University of Education",
+      valueAxisLabel: "Students",
+      categoryAxisLabel: "University Departments",
+      printMode: true,
+      printModeFormat: "percentage",
+      gridMax: 2000,
+      popoverTitle: "Config Title",
+      popoverText: "Description set by the config",
+      popoverButtonText: "View Details",
+    };
+
+    barChart2.data = [
+      { 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/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",
+    ],
+};