@watermarkinsights/ripple 5.12.0 → 5.13.0-alpha.10

package/dist/collection/components/charts/wm-progress-monitor/wm-progress-indicator.js

@@ -1,264 +0,0 @@
-import { h, Host, forceUpdate } from "@stencil/core";
-import { debounce, generateId, intl } from "../../../global/functions";
-import { exitChart, getDetails, handleChartKeydown, renderStackedBar, renderCompletionMessage, renderDoughnut, renderInstructionsText, renderLegend, allChartsDetails, removeSegmentInfoHighlight, } from "../chartFunctions";
-export class ProgressIndicator {
-    constructor() {
-        this.uid = generateId();
-        // @ts-ignore-- TS warns this is unused, but its needed in the chartFunctions
-        this.slicesDetails = [];
-        this.debouncedUpdate = debounce(async () => {
-            forceUpdate(this.el);
-        }, 10);
-        this.label = undefined;
-        this.subinfo = undefined;
-        this.completionMessage = undefined;
-        this.showLegend = true;
-        this.printMode = false;
-        this.printModeFormat = "amount";
-        this.isTabbing = false;
-        this.mode = undefined;
-        this.userIsNavigating = false;
-        this.focusedSliceId = undefined;
-    }
-    get popoverEl() {
-        return this.el.shadowRoot.querySelector("priv-chart-popover");
-    }
-    get sliceEls() {
-        return Array.from(this.el.shadowRoot.querySelectorAll(".segment"));
-    }
-    get chartDetails() {
-        return this.mode ? allChartsDetails[this.mode] : undefined;
-    }
-    get ariaLabelText() {
-        let text = `${this.label}`;
-        if (this.subinfo) {
-            text += ` ${this.subinfo}`;
-        }
-        return text;
-    }
-    get chartRoleDescription() {
-        return intl.formatMessage({
-            id: "chart.roleDescription",
-            defaultMessage: "Interactive chart",
-            description: "For screen readers only, a description clarifying the role of the chart widget",
-        });
-    }
-    toggleTabbingOn() {
-        this.isTabbing = true;
-    }
-    toggleTabbingOff() {
-        this.isTabbing = false;
-    }
-    handleKeydown(ev) {
-        handleChartKeydown.call(this, ev);
-    }
-    componentWillLoad() {
-        if (!this.label) {
-            console.error("For accessibility purposes, you must provide a label for the chart. See https://components.watermarkinsights.com/chart for more information.");
-        }
-        if (this.el.children.length !== 2) {
-            console.warn("wm-progress-indicator component must have 2 wm-progress-slice children.");
-        }
-        // Listen to parent for initial mode, and future changes
-        this.el.parentElement.addEventListener("wmProgressMonitorModeChange", (ev) => (this.mode = ev.detail));
-        const resizeObserver = new ResizeObserver(() => this.debouncedUpdate());
-        resizeObserver.observe(this.el);
-    }
-    componentDidLoad() {
-        const labelWidth = this.el.parentElement.barLabelsWidth;
-        if (labelWidth) {
-            this.componentWrapperEl.style.setProperty("--custom-label-width", labelWidth);
-        }
-    }
-    async handleSliceUpdate() {
-        await getDetails.call(this, this.mode);
-        forceUpdate(this.el);
-    }
-    handleModeUpdate() {
-        if (this.mode) {
-            getDetails.call(this, this.mode);
-        }
-    }
-    handlePopoverOpenChanged(ev) {
-        const isOpen = ev.detail;
-        if (!isOpen) {
-            const infoEls = Array.from(this.el.shadowRoot.querySelectorAll("[data-segmentindex]"));
-            removeSegmentInfoHighlight(infoEls);
-        }
-    }
-    renderBarOrDoughnut() {
-        if (this.total > 0 && this.mode === "bar") {
-            return renderStackedBar.call(this, this.mode);
-        }
-        else {
-            return renderDoughnut.call(this, this.mode);
-        }
-    }
-    render() {
-        return (h(Host, { onBlur: () => exitChart.call(this) }, h("div", { ref: (el) => (this.componentWrapperEl = el), class: `component-wrapper ${this.mode} ${this.isTabbing && !this.userIsNavigating ? "user-is-tabbing" : ""}`, role: "application", "aria-label": this.ariaLabelText, tabindex: "0", "aria-roledescription": this.chartRoleDescription, "aria-describedby": `chart-instructions` }, h("label", { id: `label-${this.uid}`, class: "label", htmlFor: `graphic-${this.uid}` }, h("span", { class: "label-text" }, this.label), this.subinfo ? h("span", { class: "subinfo" }, this.subinfo) : ""), this.mode && this.renderBarOrDoughnut(), this.mode === "doughnut" ? renderLegend.call(this, this.mode) : "", h("priv-chart-popover", { class: this.isTabbing ? "user-is-tabbing" : "", onIntChartPopoverOpenChanged: (ev) => this.handlePopoverOpenChanged(ev) }), this.mode === "doughnut" ? renderCompletionMessage.call(this) : ""), renderInstructionsText()));
-    }
-    static get is() { return "wm-progress-indicator"; }
-    static get encapsulation() { return "shadow"; }
-    static get delegatesFocus() { return true; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["wm-progress-indicator.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["wm-progress-indicator.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "label": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "label",
-                "reflect": false
-            },
-            "subinfo": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "subinfo",
-                "reflect": false
-            },
-            "completionMessage": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "completion-message",
-                "reflect": false
-            },
-            "showLegend": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "show-legend",
-                "reflect": false,
-                "defaultValue": "true"
-            },
-            "printMode": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "print-mode",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "printModeFormat": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "\"amount\" | \"percentage\"",
-                    "resolved": "\"amount\" | \"percentage\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "print-mode-format",
-                "reflect": false,
-                "defaultValue": "\"amount\""
-            }
-        };
-    }
-    static get states() {
-        return {
-            "isTabbing": {},
-            "mode": {},
-            "userIsNavigating": {},
-            "focusedSliceId": {}
-        };
-    }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "mode",
-                "methodName": "handleModeUpdate"
-            }];
-    }
-    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": "keydown",
-                "method": "handleKeydown",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "wmProgressSliceUpdated",
-                "method": "handleSliceUpdate",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }];
-    }
-}