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

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

@@ -1,262 +0,0 @@
-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

@@ -1,125 +0,0 @@
-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": {}
-                }
-            }];
-    }
-}