@watermarkinsights/ripple 5.23.0-alpha.8 → 5.23.0

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

@@ -860,7 +860,18 @@
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z'/%3E%3C/svg%3E%0A");
 }
 
-priv-chart-popover.user-is-keying .button-text {
+priv-chart-popover {
+  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-background);
+  font-size: 0.875rem;
+  text-align: left;
+}
+priv-chart-popover.user-is-tabbing .button-text {
   outline: 3px solid var(--wmcolor-interactive-focus);
   outline-offset: 2px;
 }
@@ -879,18 +890,7 @@ priv-chart-popover.user-is-keying .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-background);
-  font-size: 0.875rem;
-  text-align: start;
-  inline-size: 10.5rem;
+  width: 10.5rem;
   padding: 0.625rem 0.9375rem;
   box-sizing: border-box;
 }
@@ -898,9 +898,9 @@ priv-chart-popover.user-is-keying .button-text {
   font-size: 1em;
   font-weight: 500;
   margin: 0;
-  padding-block-start: 0;
-  padding-inline-start: 0;
-  padding-block-end: 0.25rem;
+  padding-top: 0;
+  padding-left: 0;
+  padding-bottom: 0.25rem;
 }
 .popover .title.positive {
   color: var(--wmcolor-chart-label-text-positive);
@@ -910,7 +910,7 @@ priv-chart-popover.user-is-keying .button-text {
 }
 .popover .text {
   margin: 0;
-  margin-block-end: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 .popover .popover-button {
   -webkit-box-shadow: none;
@@ -918,10 +918,10 @@ priv-chart-popover.user-is-keying .button-text {
   box-shadow: none;
   position: relative;
   display: inline-block;
-  margin-inline-start: 1rem;
-  padding-inline-start: 0;
-  padding-inline-end: 0;
-  block-size: auto;
+  margin-left: 1rem;
+  padding-left: 0;
+  padding-right: 0;
+  height: auto;
   border: none;
   background: var(--wmcolor-background-transparent);
   cursor: pointer;
@@ -931,7 +931,7 @@ priv-chart-popover.user-is-keying .button-text {
   text-align: initial;
   font-size: 0.875rem;
   font-weight: 700;
-  color: var(--wmcolor-interactive);
+  color: var(--wmcolor-link-text);
   line-height: normal;
 }
 .popover .popover-button .button-text {
@@ -939,8 +939,8 @@ priv-chart-popover.user-is-keying .button-text {
 }
 .popover .popover-button .btn-icon {
   position: absolute;
-  inset-block-start: 0.1875rem;
-  inset-inline-start: -1rem;
+  top: 0.1875rem;
+  left: -1rem;
 }
 .popover .popover-button span {
   text-decoration: underline;

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.isKeying = false;
+        this.sliceDetails = undefined;
     }
-    toggleTabbingOn() {
-        this.isKeying = true;
+    get eventToEmit() {
+        return this.chartEl.nodeName === "WM-CHART"
+            ? this.wmChartPopoverButtonTriggered
+            : this.wmProgressIndicatorButtonTriggered;
     }
-    toggleTabbingOff() {
-        this.isKeying = 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", () => {
@@ -57,58 +56,71 @@ export class ChartPopover {
         });
     }
     handleOpenChange() {
-        this.intChartPopoverToggled.emit(this.open);
-        if (this.open) {
-            this.popoverEl.showPopover();
-        }
-        else {
-            this.popoverEl.hidePopover();
-        }
+        this.intChartPopoverOpenChanged.emit(this.open);
     }
     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: 'ccf8d6d35d85b8c902d1350aa74d75b479c43b3c', class: this.isKeying ? "user-is-keying" : "" }, h("div", { key: '1340158d01632a92f6ef8c0a5637bc28e5ce7ea5', ref: (el) => (this.popoverEl = el), popover: "manual", "aria-hidden": "true", class: "popover" }, h("h1", { key: 'afb65849a7b7ff30b78f8e78f74bc57824f6acd5', class: `title ${titleAffordance}` }, this.header), h("p", { key: '2f523aae12190a62184136fec74b50fed7436f4a', 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: '15568d7b0bb0dbc6884bf9baaea4b9ae715d33cf', 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; barLegend: 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": {},
-            "isKeying": {}
-        };
-    }
     static get events() {
         return [{
-                "method": "wmPopoverButtonClick",
-                "name": "wmPopoverButtonClick",
+                "method": "wmChartPopoverButtonTriggered",
+                "name": "wmChartPopoverButtonTriggered",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -252,19 +188,18 @@ export class ChartPopover {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "ChartData",
-                    "resolved": "{ [key: string]: any; barLegend: 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": "intChartPopoverToggled",
-                "name": "intChartPopoverToggled",
+                "method": "wmProgressIndicatorButtonTriggered",
+                "name": "wmProgressIndicatorButtonTriggered",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -273,32 +208,31 @@ export class ChartPopover {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                }
-            }];
-    }
-    static get methods() {
-        return {
-            "announceContents": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
+                    "original": "HTMLWmProgressSliceElement",
+                    "resolved": "HTMLWmProgressSliceElement",
                     "references": {
-                        "Promise": {
+                        "HTMLWmProgressSliceElement": {
                             "location": "global",
-                            "id": "global::Promise"
+                            "id": "global::HTMLWmProgressSliceElement"
                         }
-                    },
-                    "return": "Promise<void>"
-                },
+                    }
+                }
+            }, {
+                "method": "intChartPopoverOpenChanged",
+                "name": "intChartPopoverOpenChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
                 "docs": {
-                    "text": "",
-                    "tags": []
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
                 }
-            }
-        };
+            }];
     }
     static get elementRef() { return "el"; }
     static get watchers() {
@@ -306,24 +240,12 @@ export class ChartPopover {
                 "propName": "open",
                 "methodName": "handleOpenChange"
             }, {
-                "propName": "coords",
+                "propName": "sliceDetails",
                 "methodName": "handleDetailsChange"
             }];
     }
     static get listeners() {
         return [{
-                "name": "wmUserIsKeying",
-                "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

@@ -580,11 +580,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: 'b3fddf504d68f3648aa091fdd09c8e02d6291480', onMouseOut: (ev) => {
+        return (h(Host, { key: '5d4bac93668a03f1f710cf12875e535acc915702', onMouseOut: (ev) => {
                 // @ts-ignore
                 if (!this.el.parentElement.contains(ev.toElement))
                     this.outOfCal.emit();
-            }, role: "application", "aria-describedby": `application-${this.uid}` }, h("div", { key: '799c77b1f795bd42ba93d517e418899014c25597', class: `popup ${this.view}-view` }, this.renderHeader(), this.view === "day" ? this.renderDayView() : this.renderMonthView()), h("div", { key: 'de896a5c0650d9a12797a5a86eef4fe535814fa5', id: `application-${this.uid}`, class: "sr-only" }, this.calName, this.calInstructions), h("div", { key: 'a4268e03c573b5b90fd5b1f692f39324bcc090d1', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "assertive", "aria-atomic": "true" }, this.announcement)));
+            }, role: "application", "aria-describedby": `application-${this.uid}` }, h("div", { key: 'af93d55656e7061a0c34798d5f7007b53fcb20d8', class: `popup ${this.view}-view` }, this.renderHeader(), this.view === "day" ? this.renderDayView() : this.renderMonthView()), h("div", { key: '2d61b428605d558b4cf167ecf17cfc1ef0ad3378', id: `application-${this.uid}`, class: "sr-only" }, this.calName, this.calInstructions), h("div", { key: 'd36f4bdc4b8be99294204e72dca76d339ec9652c', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "assertive", "aria-atomic": "true" }, this.announcement)));
     }
     static get is() { return "priv-calendar"; }
     static get originalStyleUrls() {