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

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

@@ -0,0 +1,262 @@
+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.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: '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.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() {
+        return {
+            "$": ["priv-chart-popover.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["priv-chart-popover.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-slice.js

@@ -0,0 +1,125 @@
+export class ChartSlice {
+    constructor() {
+        this.legend = undefined;
+        this.amount = undefined;
+        this.popoverTitle = undefined;
+        this.popoverText = undefined;
+        this.popoverButtonText = undefined;
+    }
+    componentDidLoad() {
+        if (parseInt(this.amount) > 0 && !this.legend) {
+            throw new Error("wm-chart-slice was provided an amount value without a legend. The legend is required unless the amount is 0 or left empty. For more information see https://components.watermarkinsights.com/chart");
+        }
+    }
+    componentDidUpdate() {
+        this.wmChartSliceUpdated.emit();
+    }
+    static get is() { return "wm-chart-slice"; }
+    static get properties() {
+        return {
+            "legend": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "legend",
+                "reflect": false
+            },
+            "amount": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "amount",
+                "reflect": false
+            },
+            "popoverTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "popover-title",
+                "reflect": false
+            },
+            "popoverText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "popover-text",
+                "reflect": false
+            },
+            "popoverButtonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "popover-button-text",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "wmChartSliceUpdated",
+                "name": "wmChartSliceUpdated",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}