@watermarkinsights/ripple 5.22.0-alpha.4 → 5.22.0

package/dist/collection/components/charts/chartFunctions.js

@@ -143,7 +143,7 @@ function minSpacing(width) {
     // minimum spacing between 2 ticks, in px
     return scale(width, 300, 900, 70, 150);
 }
-export function getMaxTicks(width) {
+function getMaxTicks(width) {
     return Math.round(width / minSpacing(width));
 }
 export function getInterval(largest, maxticks) {
@@ -673,38 +673,3 @@ export function renderCompletionMessage() {
 export function renderHiddenValuesMessage() {
     return (h("div", { class: "hidden-values-warning hidden" }, textHiddenMessage, h("br", null), seeDetailsMessage));
 }
-export function formatDisplayValue(amount, amountTotal, valueFormat) {
-    switch (valueFormat) {
-        case "amount":
-            return amount.toLocaleString();
-        case "percentage":
-            return `${Math.round((amount / amountTotal) * 100).toFixed(0)}%`;
-        default:
-        case "none":
-            return "";
-    }
-}
-export function isNiceInterval(interval, niceValues = [1, 1.5, 2, 2.5, 3, 5, 10]) {
-    const magnitude = Math.pow(10, Math.floor(Math.log10(interval)));
-    const normalized = interval / magnitude;
-    const normalizedComparision = niceValues.some((nice) => Math.abs(normalized - nice) < 0.0001); // check equality with floating point tolerance
-    return normalizedComparision;
-}
-export function suffixNumber(value) {
-    if (value >= 1000000)
-        return `${(value / 1000000).toFixed(value % 1000000 === 0 ? 0 : 1)}M`;
-    if (value >= 1000)
-        return `${(value / 1000).toFixed(value % 1000 === 0 ? 0 : 1)}K`;
-    return value.toString();
-}
-export function findLargestNiceInterval(maxIntervals, total) {
-    // Given a max number of intervals and a total, iterate down until a nice way to divide the total is found.
-    // Otherwise, return 1 interval
-    for (let intervals = maxIntervals; intervals >= 1; intervals--) {
-        const candidateInterval = total / intervals;
-        if (isNiceInterval(candidateInterval)) {
-            return { numIntervals: intervals, interval: candidateInterval };
-        }
-    }
-    return { numIntervals: 1, interval: total };
-}

package/dist/collection/components/charts/priv-chart-popover/priv-chart-popover.css

@@ -865,6 +865,15 @@ priv-chart-popover {
   --wmcolor-chart-popover-link-text-focus: var(--wmcolor-interactive-focus);
   --wmcolor-chart-popover-link-text: var(--wmcolor-interactive);
   --wmcolor-chart-popover-background: var(--wmcolor-background);
+  position: fixed;
+  z-index: 10;
+  border-radius: 0.1875rem;
+  -webkit-box-shadow: 0 11px 15px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.12);
+  -moz-box-shadow: 0 11px 15px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.12);
+  box-shadow: 0 11px 15px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.12);
+  background-color: var(--wmcolor-chart-popover-background);
+  font-size: 0.875rem;
+  text-align: left;
 }
 priv-chart-popover.user-is-tabbing .button-text {
   outline: 3px solid var(--wmcolor-interactive-focus);
@@ -885,17 +894,6 @@ priv-chart-popover.user-is-tabbing .button-text {
 }
 
 .popover {
-  position: fixed;
-  margin: 0;
-  padding: 0;
-  border: none;
-  border-radius: 0.1875rem;
-  -webkit-box-shadow: 0 11px 15px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.12);
-  -moz-box-shadow: 0 11px 15px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.12);
-  box-shadow: 0 11px 15px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.12);
-  background-color: var(--wmcolor-chart-popover-background);
-  font-size: 0.875rem;
-  text-align: left;
   width: 10.5rem;
   padding: 0.625rem 0.9375rem;
   box-sizing: border-box;

package/dist/collection/components/charts/priv-chart-popover/priv-chart-popover.js

@@ -2,32 +2,31 @@ import { h, Host } from "@stencil/core";
 import { debounce, findAllScrollableParents, intl } from "../../../global/functions";
 export class ChartPopover {
     constructor() {
+        this.chartEl = this.el.parentElement.getRootNode().host;
         this.popoverWidth = 168;
         this.popoverClicked = false;
         this.debouncedClosePopover = debounce(async () => {
             this.open = false;
         }, 10);
-        this.chartData = undefined;
-        this.header = "";
-        this.text = "";
-        this.buttonText = "";
-        this.coords = { x: 0, y: 0 };
         this.open = false;
-        this.announcement = "";
-        this.isTabbing = false;
+        this.sliceDetails = undefined;
     }
-    toggleTabbingOn() {
-        this.isTabbing = true;
+    get eventToEmit() {
+        return this.chartEl.nodeName === "WM-CHART"
+            ? this.wmChartPopoverButtonTriggered
+            : this.wmProgressIndicatorButtonTriggered;
     }
-    toggleTabbingOff() {
-        this.isTabbing = false;
-    }
-    handleClickOnDocument(_ev) {
+    handleClickOnDocument(ev) {
+        // because this listener is set document-wide, whenever something inside it is clicked
+        // the event target returned will always be the host (wm-chart)
         // the element within wm-chart is determined by the other listener and saved as var popoverClicked for use here
         // capture = false in @Listen ensures order of execution
         if (this.open) {
-            this.open = this.popoverClicked;
-            this.popoverClicked = false;
+            // if the target is the popover's own slice, no need to adjust the open state
+            if (ev.target != this.sliceDetails.sliceRef) {
+                this.open = this.popoverClicked;
+                this.popoverClicked = false;
+            }
         }
     }
     handleClick(ev) {
@@ -40,8 +39,8 @@ export class ChartPopover {
     componentDidLoad() {
         // set up event listeners for scrolling
         // to close popover on page scroll
-        const scrollableParents = findAllScrollableParents(this.el);
-        scrollableParents.forEach((scrollableParent) => {
+        const scrollableParents = findAllScrollableParents(this.chartEl);
+        scrollableParents.forEach(scrollableParent => {
             if (scrollableParent === document.documentElement) {
                 // For document element, listen to window scroll event
                 window.addEventListener("scroll", () => {
@@ -58,57 +57,70 @@ export class ChartPopover {
     }
     handleOpenChange() {
         this.intChartPopoverOpenChanged.emit(this.open);
-        if (this.open) {
-            this.popoverEl.showPopover();
-        }
-        else {
-            this.popoverEl.hidePopover();
-        }
     }
     handleDetailsChange() {
-        this.positionPopover();
-    }
-    handleButtonClick() {
-        if (this.chartData) {
-            this.wmPopoverButtonClick.emit(this.chartData);
+        if (this.sliceDetails && this.sliceDetails.coords) {
+            this.positionPopover();
         }
     }
-    announce(message) {
-        var _a;
-        // \u00A0 is a non-breaking space character, which causes the message to be read as a new one
-        if (((_a = this.liveRegionEl) === null || _a === void 0 ? void 0 : _a.textContent) === message) {
-            message += "\u00A0";
+    updateHighlightedInfo() {
+        // if (this.sliceDetails) {
+        //   if (this.open) {
+        //     this.highlightSegmentInfo(this.sliceDetails);
+        //   } else {
+        //     this.removeSegmentInfoHighlight();
+        //   }
+        // }
+    }
+    handleButtonClick() {
+        if (this.sliceDetails) {
+            const sliceRef = this.sliceDetails.sliceRef;
+            sliceRef.click();
+            this.eventToEmit.emit(sliceRef);
         }
-        this.announcement = message;
     }
-    async announceContents() {
-        let contentsMessage = this.header + " " + this.text;
-        if (this.buttonText) {
-            contentsMessage +=
-                " " +
-                    this.buttonText +
-                    " " +
-                    intl.formatMessage({
-                        id: "chart.infoButton",
-                        defaultMessage: "Button. Click for more information.",
-                    });
+    renderLiveRegion() {
+        if (this.liveRegion) {
+            this.liveRegion.innerHTML = "";
+            const wrapper = document.createElement("div");
+            const titleEl = document.createElement("span");
+            titleEl.innerHTML = this.sliceDetails.title + " " || "";
+            wrapper.appendChild(titleEl);
+            const textEl = document.createElement("span");
+            textEl.innerHTML = this.sliceDetails.text + " " || "";
+            wrapper.appendChild(textEl);
+            if (this.sliceDetails.buttonText) {
+                const buttonEl = document.createElement("span");
+                buttonEl.innerHTML =
+                    this.sliceDetails.buttonText +
+                        " " +
+                        intl.formatMessage({
+                            id: "chart.infoButton",
+                            defaultMessage: "Button. Click for more information.",
+                        });
+                wrapper.appendChild(buttonEl);
+            }
+            this.liveRegion.appendChild(wrapper);
         }
-        this.announce(contentsMessage);
     }
     positionPopover() {
-        this.popoverEl.style.top = this.coords.y + "px";
-        if (window.innerWidth - this.coords.x >= this.popoverWidth + 10) {
-            this.popoverEl.style.left = this.coords.x + "px"; // opens on the right
+        this.el.style.top = this.sliceDetails.coords.y + "px";
+        if (window.innerWidth - this.sliceDetails.coords.x >= this.popoverWidth + 10) {
+            this.el.style.left = this.sliceDetails.coords.x + "px"; // opens on the right
         }
         else {
-            this.popoverEl.style.left = this.coords.x - this.popoverWidth + "px"; // opens on the left
+            this.el.style.left = this.sliceDetails.coords.x - this.popoverWidth + "px"; // opens on the left
         }
     }
     render() {
-        const titleAffordance = this.header && (this.header[0] === "-" ? "negative" : this.header[0] === "+" ? "positive" : "");
-        return (h(Host, { key: '7f6b028aee35ec85334b34083e991b0c4ea2a21e', class: this.isTabbing ? "user-is-tabbing" : "" }, h("div", { key: '4fc8cbaf266b9b5d3613b28d2d6fbd6eb4d9f5c1', ref: (el) => (this.popoverEl = el), popover: "manual", "aria-hidden": "true", class: "popover" }, h("h1", { key: '99af3558a4f40d3eb5cd6a6d149d0d01cf730dc0', class: `title ${titleAffordance}` }, this.header), h("p", { key: 'b7404a255a298171b8eb9e2f6f0689fba433cbeb', class: "text" }, this.text), this.buttonText ? (h("button", { tabindex: "-1",
+        const titleAffordance = this.sliceDetails &&
+            this.sliceDetails.title &&
+            (this.sliceDetails.title[0] === "-" ? "negative" : this.sliceDetails.title[0] === "+" ? "positive" : "");
+        return (h(Host, { key: '25275e7ca9b1744629a4da08abccc1b99f301286' }, !!this.open && this.sliceDetails ? (h("div", { "aria-hidden": "true", class: "popover" }, h("h1", { class: `title ${titleAffordance}` }, this.sliceDetails.title), h("p", { class: "text" }, this.sliceDetails.text), this.sliceDetails.buttonText ? (
+        // @ts-ignore
+        h("button", { tabindex: "-1",
             // @ts-ignore
-            focusable: "false", class: "popover-button", onClick: () => this.handleButtonClick() }, h("svg", { class: "btn-icon", height: "9", width: "9" }, h("path", { fill: "#575195", d: "M0 3.38v2.25h9V3.38H0zM0 0v2.25h4.5V0H0zm6.19 6.75H0V9h6.19V6.75z" })), h("span", { class: "button-text" }, this.buttonText))) : ("")), h("div", { key: 'be4379d80b04f4c9e6b01c353587297c1ed6b2dc', ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" }, this.announcement)));
+            focusable: "false", class: "popover-button", onClick: () => this.handleButtonClick() }, h("svg", { class: "btn-icon", height: "9", width: "9" }, h("path", { fill: "#575195", d: "M0 3.38v2.25h9V3.38H0zM0 0v2.25h4.5V0H0zm6.19 6.75H0V9h6.19V6.75z" })), h("span", { class: "button-text" }, this.sliceDetails.buttonText))) : (""))) : (""), h("div", { key: 'cdfdb9f58ebcbe375cc50214aac091c890587935', ref: (el) => (this.liveRegion = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" }, this.open && this.renderLiveRegion())));
     }
     static get is() { return "priv-chart-popover"; }
     static get originalStyleUrls() {
@@ -123,69 +135,12 @@ export class ChartPopover {
     }
     static get properties() {
         return {
-            "chartData": {
-                "type": "unknown",
-                "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; }",
-                    "references": {
-                        "ChartData": {
-                            "location": "import",
-                            "path": "../../../global/interfaces",
-                            "id": "src/global/interfaces.ts::ChartData"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                }
-            },
-            "header": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "header",
-                "reflect": false,
-                "defaultValue": "\"\""
-            },
-            "text": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "text",
-                "reflect": false,
-                "defaultValue": "\"\""
-            },
-            "buttonText": {
-                "type": "string",
-                "mutable": false,
+            "open": {
+                "type": "boolean",
+                "mutable": true,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
@@ -194,56 +149,37 @@ export class ChartPopover {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "button-text",
+                "attribute": "open",
                 "reflect": false,
-                "defaultValue": "\"\""
+                "defaultValue": "false"
             },
-            "coords": {
+            "sliceDetails": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "{ x: number; y: number }",
-                    "resolved": "{ x: number; y: number; }",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "defaultValue": "{ x: 0, y: 0 }"
-            },
-            "open": {
-                "type": "boolean",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
+                    "original": "SliceDetails",
+                    "resolved": "undefined | { amount: number; visualAmount: number; perc: number; legend: string | null; color: string; offset: number; id: string; title: string | null; text: string | null; buttonText: string | null; sliceRef: Element; inSmallCluster: boolean; index: number; coords?: { x: number; y: number; } | undefined; }",
+                    "references": {
+                        "SliceDetails": {
+                            "location": "import",
+                            "path": "../../../global/interfaces",
+                            "id": "src/global/interfaces.ts::SliceDetails"
+                        }
+                    }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
-                },
-                "attribute": "open",
-                "reflect": false,
-                "defaultValue": "false"
+                }
             }
         };
     }
-    static get states() {
-        return {
-            "announcement": {},
-            "isTabbing": {}
-        };
-    }
     static get events() {
         return [{
-                "method": "wmPopoverButtonClick",
-                "name": "wmPopoverButtonClick",
+                "method": "wmChartPopoverButtonTriggered",
+                "name": "wmChartPopoverButtonTriggered",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -252,13 +188,32 @@ export class ChartPopover {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "ChartData",
-                    "resolved": "{ [key: string]: any; label: string; amount: number; color?: string | undefined; popoverTitle?: string | undefined; popoverText?: string | undefined; popoverButtonText?: string | undefined; }",
+                    "original": "HTMLWmChartSliceElement",
+                    "resolved": "HTMLWmChartSliceElement",
                     "references": {
-                        "ChartData": {
-                            "location": "import",
-                            "path": "../../../global/interfaces",
-                            "id": "src/global/interfaces.ts::ChartData"
+                        "HTMLWmChartSliceElement": {
+                            "location": "global",
+                            "id": "global::HTMLWmChartSliceElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "wmProgressIndicatorButtonTriggered",
+                "name": "wmProgressIndicatorButtonTriggered",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "HTMLWmProgressSliceElement",
+                    "resolved": "HTMLWmProgressSliceElement",
+                    "references": {
+                        "HTMLWmProgressSliceElement": {
+                            "location": "global",
+                            "id": "global::HTMLWmProgressSliceElement"
                         }
                     }
                 }
@@ -279,51 +234,18 @@ export class ChartPopover {
                 }
             }];
     }
-    static get methods() {
-        return {
-            "announceContents": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            }
-        };
-    }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
                 "propName": "open",
                 "methodName": "handleOpenChange"
             }, {
-                "propName": "coords",
+                "propName": "sliceDetails",
                 "methodName": "handleDetailsChange"
             }];
     }
     static get listeners() {
         return [{
-                "name": "wmUserIsTabbing",
-                "method": "toggleTabbingOn",
-                "target": "window",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "wmUserIsNotTabbing",
-                "method": "toggleTabbingOff",
-                "target": "window",
-                "capture": false,
-                "passive": false
-            }, {
                 "name": "click",
                 "method": "handleClickOnDocument",
                 "target": "document",

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

@@ -29,7 +29,7 @@ export class Chart {
         this.focusedSliceId = undefined;
     }
     get popoverEl() {
-        return this.el.shadowRoot.querySelector("priv-chart-popover-old");
+        return this.el.shadowRoot.querySelector("priv-chart-popover");
     }
     get sliceEls() {
         return Array.from(this.el.shadowRoot.querySelectorAll(".segment"));
@@ -145,7 +145,7 @@ export class Chart {
         }
     }
     render() {
-        return (h(Host, { key: '64a6dc03c5a44de1cb06d0ddfa90cf88cf1c467c', onBlur: () => exitChart.call(this) }, h("div", { key: '31b4a39ce530c5e3552b1896feaa081f2e368d1b', ref: (el) => (this.componentWrapperEl = el), class: `component-wrapper ${this.currentChartType} ${this.isTabbing && !this.userIsNavigating ? "user-is-tabbing" : ""} ${this.labelPosition === "left" && this.currentChartType === "bar4" ? "left-label" : ""}`, role: "application", "aria-label": this.ariaLabelText, tabindex: 0, "aria-roledescription": chartMessages.interactiveChart, "aria-describedby": "chart-instructions" }, h("label", { key: 'a62e78dd0eb3f50da81cc09137ea5bc7115b7cf4', id: `label-${this.uid}`, class: `label --${this.labelPosition}`, htmlFor: `graphic-${this.uid}` }, h("span", { key: '9a7219c06f7ef4a1a59f9b23a15574c65942e6c6', class: "label-text" }, this.label), this.subinfo ? h("span", { class: "subinfo" }, this.subinfo) : ""), this.isBar && renderLegend.call(this, this.currentChartType), this.renderChart(), this.isDoughnut && renderLegend.call(this, this.currentChartType), h("priv-chart-popover-old", { key: '39e2523ab60097506e841578fe978e69fe9c3b4b', class: this.isTabbing ? "user-is-tabbing" : "", onIntChartPopoverOpenChanged: (ev) => this.handlePopoverOpenChanged(ev) }), this.isBar && !this.printMode && renderHiddenValuesMessage()), renderInstructionsText()));
+        return (h(Host, { key: '495e0455dbad63e662f11ea1c2f61713c9ad52b6', onBlur: () => exitChart.call(this) }, h("div", { key: '8a51cc400c25ea93797a01bb0ae2eb4fdbce8300', ref: (el) => (this.componentWrapperEl = el), class: `component-wrapper ${this.currentChartType} ${this.isTabbing && !this.userIsNavigating ? "user-is-tabbing" : ""} ${this.labelPosition === "left" && this.currentChartType === "bar4" ? "left-label" : ""}`, role: "application", "aria-label": this.ariaLabelText, tabindex: 0, "aria-roledescription": chartMessages.interactiveChart, "aria-describedby": "chart-instructions" }, h("label", { key: 'c4cf7b324a1347e4fc2d97ca9b7c2e50d5526a63', id: `label-${this.uid}`, class: `label --${this.labelPosition}`, htmlFor: `graphic-${this.uid}` }, h("span", { key: '950e135dca88ae28d156047daee4618628753b49', class: "label-text" }, this.label), this.subinfo ? h("span", { class: "subinfo" }, this.subinfo) : ""), this.isBar && renderLegend.call(this, this.currentChartType), this.renderChart(), this.isDoughnut && renderLegend.call(this, this.currentChartType), h("priv-chart-popover", { key: '303b440f6098d37b8c1851b65d9e61d5792441ea', class: this.isTabbing ? "user-is-tabbing" : "", onIntChartPopoverOpenChanged: (ev) => this.handlePopoverOpenChanged(ev) }), this.isBar && !this.printMode && renderHiddenValuesMessage()), renderInstructionsText()));
     }
     static get is() { return "wm-chart"; }
     static get encapsulation() { return "shadow"; }

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

@@ -437,9 +437,9 @@ export class LineChart {
         return h("div", { class: "highlight", style: highlightStyle });
     }
     render() {
-        return (h(Host, { key: 'd71077fd494817a5d75776302d8772ea86cab2a2', onBlur: () => this.resetDataPointFocus(), onMouseLeave: () => (this.popoverIndex = -1) }, h("div", { key: '73ee07cd573cc5aa3034ef447481bd2303aea2c2', class: "component-wrapper", role: "application", "aria-roledescription": chartMessages.interactiveChart, "aria-label": this.label, "aria-describedby": "chart-description" }, this.renderLegend(), h("div", { key: 'b3187c1ca6cfde74edaca2d5c9005de4e03d9a64', class: "chart-wrapper" }, h("div", { key: '6077543fac538b72c07940d3c7e66d5d30d0a228', class: "chart-label --y-axis", style: { "--labelWidth": this.labelWidth } }, this.yAxisLabel, this.parsedUnits[1] && ` (${this.parsedUnits[1]})`), this.renderYIntervals(), h("div", { key: '7afba40086fabc3fe27693159f6dd09b74675d14', ref: (el) => (this.plotAreaEl = el), class: `plot-area ${this.hasPartialInterval ? "" : "right-border"}`, style: {
+        return (h(Host, { key: 'fb0d9a5d98e31e44e873a45a057151abf8422af2', onBlur: () => this.resetDataPointFocus(), onMouseLeave: () => (this.popoverIndex = -1) }, h("div", { key: '8ad9a77f2ed681fe3e0e12d22e478f578a5f5378', class: "component-wrapper", role: "application", "aria-roledescription": chartMessages.interactiveChart, "aria-label": this.label, "aria-describedby": "chart-description" }, this.renderLegend(), h("div", { key: '8c75ab0d44e8b843bd00ac7c884010f86a7c32ed', class: "chart-wrapper" }, h("div", { key: '733592d351ba71b9e48591ccc87406c90ba6ee1c', class: "chart-label --y-axis", style: { "--labelWidth": this.labelWidth } }, this.yAxisLabel, this.parsedUnits[1] && ` (${this.parsedUnits[1]})`), this.renderYIntervals(), h("div", { key: 'a5d35aca9eb498bf41641978206cda9504d26531', ref: (el) => (this.plotAreaEl = el), class: `plot-area ${this.hasPartialInterval ? "" : "right-border"}`, style: {
                 "--backgroundSize": `${this.dataPointMatrix[0][this.xIntervals.indexOf(this.displayedXIntervals[1])].xPositionPercent}%`,
-            } }, this.highlightStart && this.renderHighlight(), this.renderData(), this.renderHoverAreas()), this.popoverIndex !== -1 && this.renderHoverIndicator(), this.popoverIndex !== -1 && this.renderPopover(), this.renderXIntervals(), h("div", { key: 'f3b2098f7c228bb3319b48a0b5dcc94affebeea9', class: "chart-label --x-axis" }, this.xAxisLabel, this.parsedUnits[0] && ` (${this.parsedUnits[0]})`)), h("div", { key: '52b27249cdfa10fd9952445997018f70d0af746e', id: "chart-description", class: "sr-only" }, `${lineChartMessages.instructions} ${this.description}`), h("div", { key: 'd975b96198f6d4596bbe285b7c52697fc1ee1d87', ref: (el) => (this.liveRegionEl = el), "aria-live": "polite", class: "sr-only" }, this.announcement))));
+            } }, this.highlightStart && this.renderHighlight(), this.renderData(), this.renderHoverAreas()), this.popoverIndex !== -1 && this.renderHoverIndicator(), this.popoverIndex !== -1 && this.renderPopover(), this.renderXIntervals(), h("div", { key: '848ec2e4cc1342d06c771dd5043e663c274862d2', class: "chart-label --x-axis" }, this.xAxisLabel, this.parsedUnits[0] && ` (${this.parsedUnits[0]})`)), h("div", { key: 'd9db30e4e1d3eaec8a9fd16a60dc6d15dff0d352', id: "chart-description", class: "sr-only" }, `${lineChartMessages.instructions} ${this.description}`), h("div", { key: '7042ad9fe099a30dde2385a71a4a78d9eb022b73', ref: (el) => (this.liveRegionEl = el), "aria-live": "polite", class: "sr-only" }, this.announcement))));
     }
     static get is() { return "wm-line-chart"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/charts/wm-progress-monitor/wm-progress-indicator.js

@@ -21,7 +21,7 @@ export class ProgressIndicator {
         this.focusedSliceId = undefined;
     }
     get popoverEl() {
-        return this.el.shadowRoot.querySelector("priv-chart-popover-old");
+        return this.el.shadowRoot.querySelector("priv-chart-popover");
     }
     get sliceEls() {
         return Array.from(this.el.shadowRoot.querySelectorAll(".segment"));
@@ -95,7 +95,7 @@ export class ProgressIndicator {
         }
     }
     render() {
-        return (h(Host, { key: '5a5639b1bc20b8c33439e2eaffb608b0a7011095', onBlur: () => exitChart.call(this) }, h("div", { key: 'f26436d3427d12c9a5a6236b82a35de6a8223644', ref: (el) => (this.componentWrapperEl = el), class: `component-wrapper ${this.mode} ${this.isTabbing && !this.userIsNavigating ? "user-is-tabbing" : ""}`, role: "application", "aria-label": this.ariaLabelText, tabindex: "0", "aria-roledescription": this.chartRoleDescription, "aria-describedby": `chart-instructions` }, h("label", { key: 'ae685bf92604deda11ae6bd253117d92b82950cf', id: `label-${this.uid}`, class: "label", htmlFor: `graphic-${this.uid}` }, h("span", { key: 'ed9cf74269fa625d0c106eb7d309297ee436af57', class: "label-text" }, this.label), this.subinfo ? h("span", { class: "subinfo" }, this.subinfo) : ""), this.mode && this.renderBarOrDoughnut(), this.mode === "doughnut" ? renderLegend.call(this, this.mode) : "", h("priv-chart-popover-old", { key: '783e866f5438191f655afcc23756a713b954e394', class: this.isTabbing ? "user-is-tabbing" : "", onIntChartPopoverOpenChanged: (ev) => this.handlePopoverOpenChanged(ev) }), this.mode === "doughnut" ? renderCompletionMessage.call(this) : ""), renderInstructionsText()));
+        return (h(Host, { key: '05666b54ac54aa245610f80b91f44f15ab242b23', onBlur: () => exitChart.call(this) }, h("div", { key: '0bae0b3024cbf29cc8a6da5e68884004772c4380', ref: (el) => (this.componentWrapperEl = el), class: `component-wrapper ${this.mode} ${this.isTabbing && !this.userIsNavigating ? "user-is-tabbing" : ""}`, role: "application", "aria-label": this.ariaLabelText, tabindex: "0", "aria-roledescription": this.chartRoleDescription, "aria-describedby": `chart-instructions` }, h("label", { key: 'b43987a6beb4fb9526a59aefd5d7fb265fcff8f7', id: `label-${this.uid}`, class: "label", htmlFor: `graphic-${this.uid}` }, h("span", { key: 'ead5c96e6147c1461419914f46b3cc05b792b78d', class: "label-text" }, this.label), this.subinfo ? h("span", { class: "subinfo" }, this.subinfo) : ""), this.mode && this.renderBarOrDoughnut(), this.mode === "doughnut" ? renderLegend.call(this, this.mode) : "", h("priv-chart-popover", { key: '502cd128a387accac34456f289bb78802a52a650', class: this.isTabbing ? "user-is-tabbing" : "", onIntChartPopoverOpenChanged: (ev) => this.handlePopoverOpenChanged(ev) }), this.mode === "doughnut" ? renderCompletionMessage.call(this) : ""), renderInstructionsText()));
     }
     static get is() { return "wm-progress-indicator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/charts/wm-progress-monitor/wm-progress-monitor.js

@@ -59,7 +59,7 @@ export class ProgressMonitor {
         }))));
     }
     render() {
-        return (h(Host, { key: 'da5c58c7da486d6df7dae66ced77dacdf626de10', class: this.mode === "doughnut" ? "row" : "column" }, this.modeInitialized && this.groupLegend && this.mode === "bar" && this.renderLegend(), this.modeInitialized && h("slot", { key: '7255760c249e5e5a7855bfd5136d3ddc4f46d607' })));
+        return (h(Host, { key: '402d49cded01a03166bcf88d9a97116fe36d4586', class: this.mode === "doughnut" ? "row" : "column" }, this.modeInitialized && this.groupLegend && this.mode === "bar" && this.renderLegend(), this.modeInitialized && h("slot", { key: '137935e1ee1337a58d7b09412522e4ab0bdcdf4b' })));
     }
     static get is() { return "wm-progress-monitor"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/datepickers/priv-calendar/priv-calendar.js

@@ -567,11 +567,11 @@ export class PrivCalendar {
         return (h("div", { class: "month-view" }, h("div", { "aria-labelledby": "popup-title-year", role: "grid", class: "months" }, h("div", { role: "row", class: "month-row" }, calendar_months.slice(0, 3).map((month, index) => this.renderMonth(month, index))), h("div", { role: "row", class: "month-row" }, calendar_months.slice(3, 6).map((month, index) => this.renderMonth(month, index + 3))), h("div", { role: "row", class: "month-row" }, calendar_months.slice(6, 9).map((month, index) => this.renderMonth(month, index + 6))), h("div", { role: "row", class: "month-row" }, calendar_months.slice(9).map((month, index) => this.renderMonth(month, index + 9))))));
     }
     render() {
-        return (h(Host, { key: '2aafd5b792462429620aa1ff8e0682f3564cda98', onMouseOut: (ev) => {
+        return (h(Host, { key: '3787997230f2db89ba8e051b757d986a1b41f51d', onMouseOut: (ev) => {
                 // @ts-ignore
                 if (!this.el.parentElement.contains(ev.toElement))
                     this.outOfCal.emit();
-            }, role: "application", "aria-describedby": `application-${this.uid}` }, h("div", { key: '1d7766c4097d8c8c0bb072824037ed7ad1a1a133', class: `popup ${this.view}-view` }, this.renderHeader(), this.view === "day" ? this.renderDayView() : this.renderMonthView()), h("div", { key: 'b32936860f9cdb52b648d0a06d11273650c2e7ff', id: `application-${this.uid}`, class: "sr-only" }, this.calName, this.calInstructions)));
+            }, role: "application", "aria-describedby": `application-${this.uid}` }, h("div", { key: 'c82e165ff59c7e1fb5f955410c8db3d7c604c285', class: `popup ${this.view}-view` }, this.renderHeader(), this.view === "day" ? this.renderDayView() : this.renderMonthView()), h("div", { key: '2e5e1276ed683f6893bec62dd461cc250b61a7b8', id: `application-${this.uid}`, class: "sr-only" }, this.calName, this.calInstructions)));
     }
     static get is() { return "priv-calendar"; }
     static get originalStyleUrls() {

package/dist/collection/components/datepickers/wm-date-range.js

@@ -444,23 +444,23 @@ export class DateRange {
         }
     }
     render() {
-        return (h(Host, { key: 'b109396fe2f21a64cd873e8b9440775cc519dd45', "aria-busy": "false" }, h("div", { key: '3ecaff1fcd454d766c1d50f100157630dcc28950', ref: (d) => (this.wrapperEl = d), class: "wrapper" }, h("div", { key: 'ac794c5db9db4fca716ca590ac15a2e616e8ebcc', class: `range-wrapper ${this.calWidth <= this.availSpace ? "cal" : ""}` }, h("div", { key: '246f8c3699298e040602bfd7c2de46512e5c8952', class: "label-wrapper", id: "start-label-wrapper" }, h("label", { key: 'ce137b04a07d3acee7506f94c5d6f64192488d3c', ref: (e) => (this.labelEl = e), id: "startlabel", htmlFor: "start-date-input", class: "label", title: `${this.labelStart} (${this.dateFormat})` }, this.labelStart, this.requiredField && (h("span", { key: '43af18445ddec4791e7538f3e7840c8db1cf5174', "aria-hidden": "true", class: "required" }, "*")))), h("div", { key: '67d809798eef2a00a3a1990b2f62cb61b08bee66', class: "label-wrapper", id: "end-label-wrapper" }, h("label", { key: 'f9b732848c704062663fc864f572c9038b09b184', id: "endlabel", htmlFor: "end-date-input", class: "label", title: `${this.labelEnd} (${this.dateFormat})` }, this.labelEnd, this.requiredField && (h("span", { key: '4528718ba765daa294d13a866076c7496d907418', "aria-hidden": "true", class: "required" }, "*")))), h("input", { key: '9b408000f1406925cfb03ac3c48012f6a6ece1b9', disabled: this._disabled, type: "text", id: "start-date-input", class: `date-input input ${this.invalidStart ? "invalid" : ""}`, name: "start-date", placeholder: this.dateFormat, value: this.valueStart, onFocus: () => this.handleFocus(), onInput: (ev) => this.handleStartInput(ev), onBlur: () => this.handleStartInputBlur(), ref: (input) => (this.startInputEl = input), "aria-describedby": "error", "aria-label": this.labelStart, "aria-required": this.requiredField ? "true" : null }), h("div", { key: '88e094d36a7cd7f1c89f566fffa80d7be3fba084', id: "hyphen" }, "\u00A0-\u00A0"), h("input", { key: '6a77eb81537f301f0feecb6e33ff8b5af29fdf52', disabled: this._disabled, type: "text", id: "end-date-input", class: `date-input input ${this.invalidEnd ? "invalid" : ""}`, name: "end-date", placeholder: this.dateFormat, value: this.valueEnd, onFocus: () => this.handleFocus(), onInput: (ev) => this.handleEndInput(ev), onBlur: () => this.handleEndInputBlur(), ref: (input) => (this.endInputEl = input), "aria-describedby": "error", "aria-label": this.labelEnd, "aria-required": this.requiredField ? "true" : null }), h("div", { key: 'b39dd26bd7846e53bb4e7dee29f261e8349e5838', class: "toggle-wrapper", id: "toggle-wrapper" }, this.calWidth <= this.availSpace && (h("button", { key: '5afa94522fe03b78300b60714eb7a43357a15975', disabled: this.disabled, onClick: this.togglePopup.bind(this), "aria-describedby": "start-date-input end-date-input", "aria-label": intl.formatMessage({
+        return (h(Host, { key: '3ef7ed01702cd08cb88153b157c05870f357b83d', "aria-busy": "false" }, h("div", { key: 'a26ffe7e83d668c81c361a2baf5111d338074f4f', ref: (d) => (this.wrapperEl = d), class: "wrapper" }, h("div", { key: '5110a41705760e61460ae63222d33983f50cbbcc', class: `range-wrapper ${this.calWidth <= this.availSpace ? "cal" : ""}` }, h("div", { key: 'cd73ac4cd1156a08f8433cd5172c308e73f468e5', class: "label-wrapper", id: "start-label-wrapper" }, h("label", { key: '7fa4734f43aecd6a5cb73d93c1162fd5783ad2ac', ref: (e) => (this.labelEl = e), id: "startlabel", htmlFor: "start-date-input", class: "label", title: `${this.labelStart} (${this.dateFormat})` }, this.labelStart, this.requiredField && (h("span", { key: 'be4ad3de3b7b1fa8b1f20ae86502e661d5561f9c', "aria-hidden": "true", class: "required" }, "*")))), h("div", { key: '274e44b68f05bdc28ab25836ee5162876ba2dc37', class: "label-wrapper", id: "end-label-wrapper" }, h("label", { key: '439389958522c3245d79cf03ad3f8abf621adfdd', id: "endlabel", htmlFor: "end-date-input", class: "label", title: `${this.labelEnd} (${this.dateFormat})` }, this.labelEnd, this.requiredField && (h("span", { key: '20a1a75cfc195d9503d7f079d56435f3ac7a3ce2', "aria-hidden": "true", class: "required" }, "*")))), h("input", { key: 'c850bd46e4835f8878e2c7d39fe930e38917671c', disabled: this._disabled, type: "text", id: "start-date-input", class: `date-input input ${this.invalidStart ? "invalid" : ""}`, name: "start-date", placeholder: this.dateFormat, value: this.valueStart, onFocus: () => this.handleFocus(), onInput: (ev) => this.handleStartInput(ev), onBlur: () => this.handleStartInputBlur(), ref: (input) => (this.startInputEl = input), "aria-describedby": "error", "aria-label": this.labelStart, "aria-required": this.requiredField ? "true" : null }), h("div", { key: '4cb1a5498a6378b08915563e628f45367892fe4d', id: "hyphen" }, "\u00A0-\u00A0"), h("input", { key: 'a321356204252e7c57dff7b3b392f44d6d0b9cf3', disabled: this._disabled, type: "text", id: "end-date-input", class: `date-input input ${this.invalidEnd ? "invalid" : ""}`, name: "end-date", placeholder: this.dateFormat, value: this.valueEnd, onFocus: () => this.handleFocus(), onInput: (ev) => this.handleEndInput(ev), onBlur: () => this.handleEndInputBlur(), ref: (input) => (this.endInputEl = input), "aria-describedby": "error", "aria-label": this.labelEnd, "aria-required": this.requiredField ? "true" : null }), h("div", { key: 'f6be34dda1f360b99a3708545a151c004b479635', class: "toggle-wrapper", id: "toggle-wrapper" }, this.calWidth <= this.availSpace && (h("button", { key: '5af514ad9b7fd30f5e83ebe83fd35890fdb53ee5', disabled: this.disabled, onClick: this.togglePopup.bind(this), "aria-describedby": "start-date-input end-date-input", "aria-label": intl.formatMessage({
                 id: "date.selectRange",
                 defaultMessage: "Select range",
                 description: "Button text for screen readers.",
-            }), ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle" }, h("span", { key: 'db42cd8e357bf257a346bfb5019d75007e162908', class: "svg-icon svg-date" }), h("span", { key: 'd793353d00d8a0397eafdc1d4173eb2cd2088ed7', class: "calendar", title: intl.formatMessage({
+            }), ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle" }, h("span", { key: 'ed9caf670fd667a9959363834c1accebfb0b82cb', class: "svg-icon svg-date" }), h("span", { key: '10bc0a7086071adad12d6cbe5c5c92a82260a619', class: "calendar", title: intl.formatMessage({
                 id: "date.calendarView",
                 defaultMessage: "Calendar View",
                 description: "Calendar button",
-            }) })))), this.renderCalendars()), h("div", { key: '16e75fa0fbb3b1ee089ff5d8049300c98da35958' }, h("div", { key: '19172dfe01394e18ac34b358a6968c70db7f2573', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { key: 'b22d6de99f843512efa277b56545ffaf5a8f897c', id: "month-title", class: "sr-only" }, intl.formatMessage({
+            }) })))), this.renderCalendars()), h("div", { key: '6bcacc7025eef282cacfdc9c8ba44c88d01dfb3c' }, h("div", { key: '45942b8f722908db886d39fe23c7ae2e9c39eca5', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { key: 'f3613e50ea33148b7027b2fbb9147f8eee2c98a5', id: "month-title", class: "sr-only" }, intl.formatMessage({
             id: "date.selectMonth",
             defaultMessage: "Activate to select a month.",
             description: "Calendar button",
-        })), h("div", { key: 'a52c29ca8e72a426f234ab31507c55810272141e', id: "year-title", class: "sr-only" }, intl.formatMessage({
+        })), h("div", { key: 'ca798dd858d872a87852078781058699e3ebc5f6', id: "year-title", class: "sr-only" }, intl.formatMessage({
             id: "date.selectYear",
             defaultMessage: "Activate to select a year.",
             description: "Calendar button",
-        }))), h("div", { key: '1764a2d8a8d496a7b35c57c0c74403e5e602ec23', id: "error", class: "error" }, this.errorMessage), h("div", { key: 'd53344bf16c637a22a3a29c52ddfbefb433edef3', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }))));
+        }))), h("div", { key: 'e77548bc61a4d4c9bf0b0985694aa298383caf3e', id: "error", class: "error" }, this.errorMessage), h("div", { key: 'ec8b80ac48c0c65cfa7be019dc242e8fa7901332', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }))));
     }
     static get is() { return "wm-date-range"; }
     static get encapsulation() { return "shadow"; }