@watermarkinsights/ripple 0.0.1 → 0.1.0-alpha.1

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

@@ -0,0 +1,320 @@
+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";
+/**
+ * Single progress indicator used inside a wm-progress-monitor. Renders the binary completion
+ * data for one category as either a doughnut chart (wide layout) or a horizontal bar (narrow
+ * layout), switching automatically based on the parent monitor's breakpoint.
+ *
+ * Must contain EXACTLY TWO wm-progress-slice children — one for the "complete" state and one
+ * for the "incomplete" state.
+ *
+ * @usageNotes
+ * - Always used as a direct child of wm-progress-monitor.
+ * - `label` is required for accessibility.
+ * - The optional `completion-message` is displayed inside the doughnut when the first slice
+ *   reaches 100%.
+ *
+ * @example {html} Progress indicator
+ * <wm-progress-indicator label="Biology completion">
+ *   <wm-progress-slice legend="Completed" amount="200"></wm-progress-slice>
+ *   <wm-progress-slice legend="Not Completed" amount="100"></wm-progress-slice>
+ * </wm-progress-indicator>
+ *
+ * @example {react} Progress indicator
+ * <WmProgressIndicator label="Biology completion">
+ *   <WmProgressSlice legend="Completed" amount="200" />
+ *   <WmProgressSlice legend="Not Completed" amount="100" />
+ * </WmProgressIndicator>
+ */
+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-old");
+    }
+    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, { key: 'c020d08974098e84abf6fd85169b0ab7039be594', onBlur: () => exitChart.call(this) }, h("div", { key: 'fe02907f779689e2fea68c3dddddf03cb723bdf5', 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", { key: '4b34ac97fb8dfffcdc9b7e82ca69bf1d7e211233', id: `label-${this.uid}`, class: "label", htmlFor: `graphic-${this.uid}` }, h("span", { key: '9888f307d0683a2e7c17992a067673a10a6902e1', 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-old", { key: 'dde2eed96c92d738fd536078b4bf419ee78b310a', 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": [{
+                            "name": "description",
+                            "text": "Accessible label for this indicator. Required for accessibility \u2014 used as the\n`aria-label` on the chart container and as the visual chart label."
+                        }, {
+                            "name": "required",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "subinfo": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Optional secondary text displayed beneath the label."
+                        }],
+                    "text": ""
+                },
+                "attribute": "subinfo",
+                "reflect": false
+            },
+            "completionMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Text displayed inside the doughnut ring when the completion slice reaches\n100%."
+                        }],
+                    "text": ""
+                },
+                "attribute": "completion-message",
+                "reflect": false
+            },
+            "showLegend": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Show or hide the legend. The legend is still read by screen readers\nregardless of this setting."
+                        }, {
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "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": [{
+                            "name": "description",
+                            "text": "When true, slice values are included in the legend and keyboard interaction\ninstructions are removed from the DOM \u2014 suitable for printed output."
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "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": [{
+                            "name": "description",
+                            "text": "Format for legend values when `print-mode` is enabled."
+                        }, {
+                            "name": "default",
+                            "text": "\"amount\""
+                        }],
+                    "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
+            }];
+    }
+}