@watermarkinsights/ripple 5.22.0-alpha.2 → 5.22.0-alpha.4

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

@@ -2,31 +2,32 @@ 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.sliceDetails = undefined;
+        this.announcement = "";
+        this.isTabbing = false;
     }
-    get eventToEmit() {
-        return this.chartEl.nodeName === "WM-CHART"
-            ? this.wmChartPopoverButtonTriggered
-            : this.wmProgressIndicatorButtonTriggered;
+    toggleTabbingOn() {
+        this.isTabbing = true;
     }
-    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)
+    toggleTabbingOff() {
+        this.isTabbing = false;
+    }
+    handleClickOnDocument(_ev) {
         // 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) {
-            // 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;
-            }
+            this.open = this.popoverClicked;
+            this.popoverClicked = false;
         }
     }
     handleClick(ev) {
@@ -39,8 +40,8 @@ export class ChartPopover {
     componentDidLoad() {
         // set up event listeners for scrolling
         // to close popover on page scroll
-        const scrollableParents = findAllScrollableParents(this.chartEl);
-        scrollableParents.forEach(scrollableParent => {
+        const scrollableParents = findAllScrollableParents(this.el);
+        scrollableParents.forEach((scrollableParent) => {
             if (scrollableParent === document.documentElement) {
                 // For document element, listen to window scroll event
                 window.addEventListener("scroll", () => {
@@ -57,70 +58,57 @@ export class ChartPopover {
     }
     handleOpenChange() {
         this.intChartPopoverOpenChanged.emit(this.open);
-    }
-    handleDetailsChange() {
-        if (this.sliceDetails && this.sliceDetails.coords) {
-            this.positionPopover();
+        if (this.open) {
+            this.popoverEl.showPopover();
+        }
+        else {
+            this.popoverEl.hidePopover();
         }
     }
-    updateHighlightedInfo() {
-        // if (this.sliceDetails) {
-        //   if (this.open) {
-        //     this.highlightSegmentInfo(this.sliceDetails);
-        //   } else {
-        //     this.removeSegmentInfoHighlight();
-        //   }
-        // }
+    handleDetailsChange() {
+        this.positionPopover();
     }
     handleButtonClick() {
-        if (this.sliceDetails) {
-            const sliceRef = this.sliceDetails.sliceRef;
-            sliceRef.click();
-            this.eventToEmit.emit(sliceRef);
+        if (this.chartData) {
+            this.wmPopoverButtonClick.emit(this.chartData);
         }
     }
-    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);
+    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";
+        }
+        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.",
+                    });
         }
+        this.announce(contentsMessage);
     }
     positionPopover() {
-        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
+        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
         }
         else {
-            this.el.style.left = this.sliceDetails.coords.x - this.popoverWidth + "px"; // opens on the left
+            this.popoverEl.style.left = this.coords.x - this.popoverWidth + "px"; // opens on the left
         }
     }
     render() {
-        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",
+        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",
             // @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.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())));
+            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)));
     }
     static get is() { return "priv-chart-popover"; }
     static get originalStyleUrls() {
@@ -135,12 +123,33 @@ export class ChartPopover {
     }
     static get properties() {
         return {
-            "open": {
-                "type": "boolean",
-                "mutable": true,
+            "chartData": {
+                "type": "unknown",
+                "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "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,
@@ -149,57 +158,92 @@ export class ChartPopover {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "open",
+                "attribute": "header",
                 "reflect": false,
-                "defaultValue": "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": "\"\""
             },
-            "sliceDetails": {
+            "buttonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "button-text",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "coords": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "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"
-                        }
-                    }
+                    "original": "{ x: number; y: number }",
+                    "resolved": "{ x: number; y: number; }",
+                    "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
-                }
+                },
+                "defaultValue": "{ x: 0, y: 0 }"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "open",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
+    static get states() {
+        return {
+            "announcement": {},
+            "isTabbing": {}
+        };
+    }
     static get events() {
         return [{
-                "method": "wmChartPopoverButtonTriggered",
-                "name": "wmChartPopoverButtonTriggered",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "HTMLWmChartSliceElement",
-                    "resolved": "HTMLWmChartSliceElement",
-                    "references": {
-                        "HTMLWmChartSliceElement": {
-                            "location": "global",
-                            "id": "global::HTMLWmChartSliceElement"
-                        }
-                    }
-                }
-            }, {
-                "method": "wmProgressIndicatorButtonTriggered",
-                "name": "wmProgressIndicatorButtonTriggered",
+                "method": "wmPopoverButtonClick",
+                "name": "wmPopoverButtonClick",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -208,12 +252,13 @@ export class ChartPopover {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "HTMLWmProgressSliceElement",
-                    "resolved": "HTMLWmProgressSliceElement",
+                    "original": "ChartData",
+                    "resolved": "{ [key: string]: any; label: string; amount: number; color?: string | undefined; popoverTitle?: string | undefined; popoverText?: string | undefined; popoverButtonText?: string | undefined; }",
                     "references": {
-                        "HTMLWmProgressSliceElement": {
-                            "location": "global",
-                            "id": "global::HTMLWmProgressSliceElement"
+                        "ChartData": {
+                            "location": "import",
+                            "path": "../../../global/interfaces",
+                            "id": "src/global/interfaces.ts::ChartData"
                         }
                     }
                 }
@@ -234,18 +279,51 @@ 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": "sliceDetails",
+                "propName": "coords",
                 "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",