@watermarkinsights/ripple 0.0.1 → 0.1.0-alpha.0

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

@@ -0,0 +1,340 @@
+import { h, Host } from "@stencil/core";
+import { debounce, findAllScrollableParents, intl } from "../../../global/functions";
+export class ChartPopover {
+    constructor() {
+        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;
+    }
+    toggleTabbingOn() {
+        this.isKeying = true;
+    }
+    toggleTabbingOff() {
+        this.isKeying = 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) {
+            this.open = this.popoverClicked;
+            this.popoverClicked = false;
+        }
+    }
+    handleClick(ev) {
+        if (this.open) {
+            // if the click is on the popover,
+            // set popoverClicked to true. It will be used by the other listener above
+            this.popoverClicked = ev.target === this.el || this.el.contains(ev.target);
+        }
+    }
+    componentDidLoad() {
+        // set up event listeners for scrolling
+        // to close popover on page scroll
+        const scrollableParents = findAllScrollableParents(this.el);
+        scrollableParents.forEach((scrollableParent) => {
+            if (scrollableParent === document.documentElement) {
+                // For document element, listen to window scroll event
+                window.addEventListener("scroll", () => {
+                    this.debouncedClosePopover();
+                });
+            }
+            else {
+                // For regular elements, listen to their scroll event
+                scrollableParent.addEventListener("scroll", () => {
+                    this.debouncedClosePopover();
+                });
+            }
+        });
+    }
+    handleOpenChange() {
+        this.intChartPopoverToggled.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);
+        }
+    }
+    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.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.popoverEl.style.left = this.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",
+            // @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)));
+    }
+    static get is() { return "priv-chart-popover"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["priv-chart-popover.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["priv-chart-popover.css"]
+        };
+    }
+    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; groupName?: 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,
+                "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": "{ 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": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "open",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "announcement": {},
+            "isKeying": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "wmPopoverButtonClick",
+                "name": "wmPopoverButtonClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ChartData",
+                    "resolved": "{ [key: string]: any; barLegend: string; amount: number; color?: string | undefined; popoverTitle?: string | undefined; popoverText?: string | undefined; popoverButtonText?: string | undefined; groupName?: string | undefined; }",
+                    "references": {
+                        "ChartData": {
+                            "location": "import",
+                            "path": "../../../global/interfaces",
+                            "id": "src/global/interfaces.ts::ChartData"
+                        }
+                    }
+                }
+            }, {
+                "method": "intChartPopoverToggled",
+                "name": "intChartPopoverToggled",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    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",
+                "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",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "click",
+                "method": "handleClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}