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

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

@@ -0,0 +1,262 @@
+import { h, Host } from "@stencil/core";
+import { debounce, findAllScrollableParents, intl } from "../../../global/functions";
+export class ChartPopoverOld {
+    constructor() {
+        this.chartEl = this.el.parentElement.getRootNode().host;
+        this.popoverWidth = 168;
+        this.popoverClicked = false;
+        this.debouncedClosePopover = debounce(async () => {
+            this.open = false;
+        }, 10);
+        this.open = false;
+        this.sliceDetails = undefined;
+    }
+    get eventToEmit() {
+        return this.chartEl.nodeName === "WM-CHART"
+            ? this.wmChartPopoverButtonTriggered
+            : this.wmProgressIndicatorButtonTriggered;
+    }
+    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) {
+            // 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) {
+        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.chartEl);
+        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.intChartPopoverOpenChanged.emit(this.open);
+    }
+    handleDetailsChange() {
+        if (this.sliceDetails && this.sliceDetails.coords) {
+            this.positionPopover();
+        }
+    }
+    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);
+        }
+    }
+    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);
+        }
+    }
+    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
+        }
+        else {
+            this.el.style.left = this.sliceDetails.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: '451fc4292dd8d53e32a995d78f11bd7e9ada80cb' }, !!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.sliceDetails.buttonText))) : (""))) : (""), h("div", { key: 'a173018e185daf622fefe1a0787ec3e4ed3d5c77', 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-old"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["priv-chart-popover-old.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["priv-chart-popover-old.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "open",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "sliceDetails": {
+                "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"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            }
+        };
+    }
+    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",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "HTMLWmProgressSliceElement",
+                    "resolved": "HTMLWmProgressSliceElement",
+                    "references": {
+                        "HTMLWmProgressSliceElement": {
+                            "location": "global",
+                            "id": "global::HTMLWmProgressSliceElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "intChartPopoverOpenChanged",
+                "name": "intChartPopoverOpenChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "handleOpenChange"
+            }, {
+                "propName": "sliceDetails",
+                "methodName": "handleDetailsChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleClickOnDocument",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "click",
+                "method": "handleClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

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");
+        return this.el.shadowRoot.querySelector("priv-chart-popover-old");
     }
     get sliceEls() {
         return Array.from(this.el.shadowRoot.querySelectorAll(".segment"));
@@ -145,7 +145,7 @@ export class Chart {
         }
     }
     render() {
-        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()));
+        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()));
     }
     static get is() { return "wm-chart"; }
     static get encapsulation() { return "shadow"; }