@watermarkinsights/ripple 0.0.1 → 0.1.0-alpha.1

package/dist/collection/components/charts/wm-chart-stack/wm-chart-stack.js

@@ -0,0 +1,709 @@
+import { h, Host } from "@stencil/core";
+import { chartPalettes, patternKey, } from "../../../global/interfaces";
+import { formatDisplayValue, renderInstructionsText } from "../chartFunctions";
+import { chartMessages, stackChartMessages } from "../../../global/intl";
+import { isElOrChild } from "../../../global/functions";
+/**
+ * Renders a horizontal stacked bar chart: each stack's segments are sized as a percentage of
+ * that stack's total. Supports any number of stacks and segments, each occupying their own row.
+ * Data and configuration are set via JavaScript properties (`chart.config` and `chart.data`) — not
+ * HTML attributes.
+ *
+ * @displayName Stack Chart
+ * @category Data Visualization
+ *
+ * @keyboardInteraction
+ * - **Tab**: Enters the chart wrapper.
+ * - **Arrow Down / Right**: Focuses the first segment.
+ * - **Arrow Left / Right**: Moves to the previous / next segment within the stack, wrapping at the ends.
+ * - **Arrow Up / Down**: Moves to the previous / next stack (focusing its first segment), wrapping at the ends.
+ * - **Enter**: Activates the popover button when the popover is open.
+ * - **Escape**: Closes the open popover.
+ * - **Tab** (from within): Exits the chart and clears focus.
+ *
+ * @accessibility
+ * - `config.label` is required — used as the chart's `aria-label`.
+ * - The chart renders with `role="application"` and `aria-roledescription="Interactive chart"`.
+ * - When a percentage label is hidden for lack of space, a "click a segment to see values" hint is
+ *   shown; it is removed when printing, where clicking isn't available and the data table lists
+ *   every value.
+ *
+ * @usageNotes
+ * - Segments are grouped into stacks by each segment's `stackName`; one distinct `stackName` renders
+ *   the single-stack layout (no stack label), multiple render the grouped variant.
+ * - Color follows the order each `legend` first appears in `data`, so a legend keeps a consistent
+ *   color across stacks. A per-segment `color` overrides the palette; legends beyond the palette
+ *   fall back to the default color.
+ * - Set `id` on the element to pair it with an external `wm-chart-legend` via `chart-ids`.
+ * - Print mode (`printMode` prop, `config.printMode`, or an active browser print) shortens the bars,
+ *   enlarges the percentage labels, hides the interactive legend, and renders a data table per stack.
+ *
+ * @example {html} Single stack
+ * <wm-chart-stack id="submission-status"></wm-chart-stack>
+ * <script>
+ *   const chart = document.querySelector('#submission-status');
+ *   chart.config = { label: 'Submission status', colors: 'semantic', showLegend: 'top' };
+ *   chart.data = [
+ *     { stackName: 'Status', legend: 'Not Submitted', amount: 2 },
+ *     { stackName: 'Status', legend: 'Awaiting Review', amount: 4 },
+ *     { stackName: 'Status', legend: 'Met', amount: 10 },
+ *     { stackName: 'Status', legend: 'Not Met', amount: 4 },
+ *   ];
+ * </script>
+ *
+ * @example {react} Single stack
+ * <WmChartStack ref={chartRef} />
+ * // In useEffect: chartRef.current.config = {...}; chartRef.current.data = [...];
+ *
+ * @example {html} Grouped (multiple stacks)
+ * <wm-chart-stack id="status-by-requirement"></wm-chart-stack>
+ * <script>
+ *   const chart = document.querySelector('#status-by-requirement');
+ *   chart.config = { label: 'Status by requirement', colors: 'semantic', showLegend: 'top' };
+ *   chart.data = [
+ *     { stackName: 'Requirement 01', legend: 'Met', amount: 12 },
+ *     { stackName: 'Requirement 01', legend: 'Not Met', amount: 12 },
+ *     { stackName: 'Requirement 02', legend: 'Met', amount: 33 },
+ *     { stackName: 'Requirement 02', legend: 'Not Met', amount: 67 },
+ *   ];
+ * </script>
+ *
+ * @example {react} Grouped (multiple stacks)
+ * <WmChartStack ref={chartRef} />
+ * // In useEffect: chartRef.current.config = {...}; chartRef.current.data = [...];
+ */
+export class ChartStack {
+    constructor() {
+        this.legendData = [];
+        this.stackTotals = new Map();
+        this.measurePending = false;
+        this.config = undefined;
+        this.data = undefined;
+        this.printMode = undefined;
+        this.patternMode = undefined;
+        this.subinfo = undefined;
+        this.processedStacks = new Map();
+        this.isKeying = false;
+        this.hasHiddenValues = false;
+        this.userIsPrinting = false;
+    }
+    ////////////////////////////////////////////////////////////
+    // #region Getters
+    ////////////////////////////////////////////////////////////
+    get colorPalette() {
+        var _a;
+        return ((_a = this.config) === null || _a === void 0 ? void 0 : _a.colors) === "semantic" ? chartPalettes.stackSemantic : chartPalettes.discrete;
+    }
+    get showLegend() {
+        var _a;
+        return ((_a = this.config) === null || _a === void 0 ? void 0 : _a.showLegend) || "none";
+    }
+    get showGrid() {
+        var _a, _b;
+        return (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.showGrid) !== null && _b !== void 0 ? _b : false;
+    }
+    get valueFormat() {
+        var _a;
+        return ((_a = this.config) === null || _a === void 0 ? void 0 : _a.valueFormat) || "percentage";
+    }
+    get isPrintMode() {
+        var _a, _b, _c;
+        return ((_c = (_a = this.printMode) !== null && _a !== void 0 ? _a : (_b = this.config) === null || _b === void 0 ? void 0 : _b.printMode) !== null && _c !== void 0 ? _c : false) || this.userIsPrinting;
+    }
+    get isPatternMode() {
+        var _a, _b, _c;
+        return (_c = (_a = this.patternMode) !== null && _a !== void 0 ? _a : (_b = this.config) === null || _b === void 0 ? void 0 : _b.patternMode) !== null && _c !== void 0 ? _c : false;
+    }
+    get subinfoText() {
+        var _a;
+        return this.subinfo || ((_a = this.config) === null || _a === void 0 ? void 0 : _a.subinfo) || "";
+    }
+    get isSingleStack() {
+        return this.processedStacks.size === 1;
+    }
+    get flattenedData() {
+        return [...this.processedStacks.values()].flat();
+    }
+    get segmentWrappers() {
+        return this.el.shadowRoot.querySelectorAll(".segment-wrapper");
+    }
+    getPatternClass(item) {
+        var _a;
+        return this.isPatternMode ? ((_a = patternKey[item.color]) !== null && _a !== void 0 ? _a : "") : "";
+    }
+    // #endregion getters
+    ////////////////////////////////////////////////////////////
+    // #region Component lifecycle
+    ////////////////////////////////////////////////////////////
+    componentDidLoad() {
+        const resizeObserver = new ResizeObserver(() => this.updateHiddenValues());
+        resizeObserver.observe(this.stacksEl);
+        if (this.config && this.data) {
+            this.handleConfigDataChange();
+        }
+    }
+    componentDidRender() {
+        // The observer above does NOT fire for in-place data changes that leave stacksEl's box
+        // identical — e.g. same stacks/legends, only amounts change — so re-measure here when a
+        // data/config change flagged it. Gated to avoid a forced reflow on every unrelated render.
+        if (this.measurePending) {
+            this.measurePending = false;
+            this.updateHiddenValues();
+        }
+    }
+    // #endregion component lifecycle
+    ////////////////////////////////////////////////////////////
+    // #region Data processing
+    ////////////////////////////////////////////////////////////
+    handleConfigDataChange() {
+        if (this.config && this.data) {
+            this.processedStacks = this.buildProcessedStacks();
+            this.stackTotals = this.countStackTotals(this.processedStacks);
+            this.legendData = this.buildLegendData();
+            this.propagateExternalLegendData();
+            this.measurePending = true; // re-measure label fit after this change renders
+        }
+        else {
+            // config or data was unset — clear derived state so the chart renders empty
+            this.processedStacks = new Map();
+            this.stackTotals = new Map();
+            this.legendData = [];
+            this.propagateExternalLegendData();
+            this.hasHiddenValues = false;
+        }
+    }
+    buildProcessedStacks() {
+        if (!this.data) {
+            return new Map();
+        }
+        const processedStacks = new Map();
+        const palette = this.colorPalette;
+        const defaultColor = "wmcolor-dataviz-discrete-01";
+        // Color order is determined by segment first appearance in data.
+        const colorMap = new Map();
+        this.data.forEach((segment) => {
+            if (!colorMap.has(segment.legend)) {
+                colorMap.set(segment.legend, palette[colorMap.size] || defaultColor);
+            }
+        });
+        // Preserve the order segments are passed; group by stackName.
+        const groupedSegments = new Map();
+        this.data.forEach((segment) => {
+            if (!groupedSegments.has(segment.stackName)) {
+                groupedSegments.set(segment.stackName, []);
+            }
+            groupedSegments.get(segment.stackName).push(segment);
+        });
+        groupedSegments.forEach((segments, stackName) => {
+            const stackTotal = segments.reduce((acc, s) => acc + s.amount, 0);
+            const processedSegments = segments.map((segment) => {
+                // explicit per-segment color wins; otherwise the palette color for this legend's index
+                const color = segment.color || colorMap.get(segment.legend);
+                const displayValue = formatDisplayValue(segment.amount, stackTotal, "percentage", 0);
+                return {
+                    barLegend: segment.legend,
+                    amount: segment.amount,
+                    // exact percentage drives segment width; displayValue is the rounded percentage label
+                    gridPercent: stackTotal > 0 ? (segment.amount / stackTotal) * 100 : 0,
+                    displayValue: displayValue,
+                    printValue: displayValue,
+                    color,
+                    popoverTitle: segment.popoverTitle,
+                    popoverText: segment.popoverText,
+                    popoverButtonText: segment.popoverButtonText,
+                    groupName: stackName,
+                };
+            });
+            processedStacks.set(stackName, processedSegments);
+        });
+        return processedStacks;
+    }
+    buildLegendData() {
+        const seen = new Set();
+        const result = [];
+        this.processedStacks.forEach((segments) => {
+            segments.forEach((item) => {
+                if (!seen.has(item.barLegend)) {
+                    seen.add(item.barLegend);
+                    result.push(Object.assign(Object.assign({}, item), { printValue: "" }));
+                }
+            });
+        });
+        return result;
+    }
+    countStackTotals(processedStacks) {
+        const stackTotals = new Map();
+        processedStacks.forEach((segments, stackName) => {
+            const stackTotal = segments.reduce((acc, s) => acc + s.amount, 0);
+            stackTotals.set(stackName, stackTotal);
+        });
+        return stackTotals;
+    }
+    propagateExternalLegendData() {
+        document.querySelectorAll("wm-chart-legend").forEach((legend) => {
+            if (legend.chartIds.split(" ").includes(this.el.id)) {
+                legend.processedData = this.legendData;
+                legend.patternMode = this.isPatternMode ? "horizontal" : undefined;
+            }
+        });
+    }
+    // #endregion data processing
+    ////////////////////////////////////////////////////////////
+    // #region Keyboard interaction and event handling
+    ////////////////////////////////////////////////////////////
+    handleChartKeyDown(ev) {
+        switch (ev.key) {
+            case "ArrowDown":
+            case "ArrowRight":
+                ev.preventDefault();
+                if (this.el.shadowRoot.activeElement === this.componentWrapperEl) {
+                    this.focusSegment(0, 0);
+                }
+                break;
+            case "Tab":
+                this.clearFocus();
+                break;
+            case "Escape":
+                ev.preventDefault();
+                ev.stopPropagation();
+                if (this.popoverEl.open) {
+                    this.popoverEl.open = false;
+                }
+                break;
+        }
+    }
+    handleSegmentKeyDown(ev, stackIdx, segmentIdx) {
+        const segmentCount = this.segmentCount(stackIdx);
+        const stackCount = this.processedStacks.size;
+        switch (ev.key) {
+            case "ArrowLeft":
+                ev.preventDefault();
+                this.focusSegment(stackIdx, (segmentIdx - 1 + segmentCount) % segmentCount);
+                break;
+            case "ArrowRight":
+                ev.preventDefault();
+                this.focusSegment(stackIdx, (segmentIdx + 1) % segmentCount);
+                break;
+            case "ArrowUp":
+                ev.preventDefault();
+                this.focusSegment((stackIdx - 1 + stackCount) % stackCount, 0);
+                break;
+            case "ArrowDown":
+                ev.preventDefault();
+                this.focusSegment((stackIdx + 1) % stackCount, 0);
+                break;
+            case "Enter":
+                if (this.popoverEl.open) {
+                    const popoverBtn = this.popoverEl.querySelector("button");
+                    popoverBtn && popoverBtn.click();
+                }
+                break;
+        }
+    }
+    handleSegmentClick(ev, segmentData) {
+        this.highlightSegment(segmentData);
+        this.openPopover(segmentData, { x: ev.clientX, y: ev.clientY });
+    }
+    handleLegendItemClick(ev) {
+        var _a;
+        if (ev.target.nodeName === "WM-CHART-LEGEND") {
+            const legendEl = ev.target;
+            if (legendEl.chartIds.includes(this.el.id)) {
+                if (ev.detail.idx === -1) {
+                    this.clearHighlights();
+                }
+                else {
+                    const legend = (_a = this.legendData[ev.detail.idx]) === null || _a === void 0 ? void 0 : _a.barLegend;
+                    if (legend) {
+                        this.highlightSegmentsByLegend(legend);
+                    }
+                }
+            }
+        }
+    }
+    handleDocumentClick(_ev) {
+        if (!this.popoverEl.open) {
+            this.clearHighlights();
+        }
+    }
+    handleUserIsKeying() {
+        this.isKeying = true;
+    }
+    handleUserIsNotKeying() {
+        this.isKeying = false;
+    }
+    handleBeforePrint() {
+        this.userIsPrinting = true;
+        this.measurePending = true; // print mode changes the layout, so re-measure label fit
+    }
+    handleAfterPrint() {
+        this.userIsPrinting = false;
+        this.measurePending = true;
+    }
+    handleComponentBlur(ev) {
+        if (!isElOrChild(this.el, ev.relatedTarget)) {
+            this.clearFocus();
+        }
+    }
+    // #endregion keyboard interaction and event handling
+    ////////////////////////////////////////////////////////////
+    // #region Focus and highlighting
+    ////////////////////////////////////////////////////////////
+    segmentCount(stackIdx) {
+        var _a, _b;
+        return (_b = (_a = [...this.processedStacks.values()][stackIdx]) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+    }
+    segmentAt(stackIdx, segmentIdx) {
+        var _a;
+        return (_a = [...this.processedStacks.values()][stackIdx]) === null || _a === void 0 ? void 0 : _a[segmentIdx];
+    }
+    focusSegment(stackIdx, segmentIdx) {
+        const segmentEl = this.el.shadowRoot.querySelector(`.segment[data-stack-index="${stackIdx}"][data-segment-index="${segmentIdx}"]`);
+        const item = this.segmentAt(stackIdx, segmentIdx);
+        if (!segmentEl || !item) {
+            return;
+        }
+        segmentEl.focus();
+        this.highlightSegment(item);
+        const cornerOffset = 12;
+        const rect = segmentEl.getBoundingClientRect();
+        this.openPopover(item, { x: rect.left + cornerOffset, y: rect.top + cornerOffset });
+    }
+    openPopover(item, coords) {
+        var _a, _b;
+        if (!this.data || !this.config) {
+            return;
+        }
+        const matchingSegmentData = this.data.find((s) => s.legend === item.barLegend && s.stackName === item.groupName);
+        if (!matchingSegmentData) {
+            return;
+        }
+        const total = (_b = this.stackTotals.get((_a = item.groupName) !== null && _a !== void 0 ? _a : "")) !== null && _b !== void 0 ? _b : 0;
+        const popoverButtonText = matchingSegmentData.popoverButtonText || this.config.popoverButtonText || "";
+        this.componentWrapperEl.classList.toggle("hide-focus-ring", !!popoverButtonText);
+        this.popoverEl.chartData = Object.assign(Object.assign({}, matchingSegmentData), { barLegend: matchingSegmentData.legend });
+        this.popoverEl.header =
+            matchingSegmentData.popoverTitle || this.config.popoverTitle || `${matchingSegmentData.amount}/${total}`;
+        this.popoverEl.text = matchingSegmentData.popoverText || this.config.popoverText || matchingSegmentData.legend;
+        this.popoverEl.buttonText = popoverButtonText;
+        this.popoverEl.coords = coords;
+        window.setTimeout(() => {
+            this.popoverEl.open = true;
+            this.popoverEl.announceContents();
+        }, 30);
+    }
+    handlePopoverToggled(_ev) {
+        setTimeout(() => {
+            if (this.popoverEl.open) {
+                const chartData = this.popoverEl.chartData;
+                const item = this.flattenedData.find((i) => i.barLegend === (chartData === null || chartData === void 0 ? void 0 : chartData.barLegend) && i.groupName === (chartData === null || chartData === void 0 ? void 0 : chartData.groupName));
+                item && this.highlightSegment(item);
+            }
+            else {
+                this.clearHighlights();
+            }
+        }, 30);
+    }
+    highlightSegment(item) {
+        var _a;
+        const idx = this.flattenedData.indexOf(item);
+        const segmentWrappers = this.segmentWrappers;
+        segmentWrappers.forEach((segmentWrapper) => segmentWrapper.classList.add("faded"));
+        (_a = segmentWrappers[idx]) === null || _a === void 0 ? void 0 : _a.classList.remove("faded");
+        const legendIdx = this.legendData.findIndex((legendItem) => legendItem.barLegend === item.barLegend);
+        this.wmChartStackHighlighted.emit({ idx: legendIdx });
+    }
+    highlightSegmentsByLegend(legend) {
+        this.segmentWrappers.forEach((segmentWrapper, idx) => {
+            var _a;
+            segmentWrapper.classList.toggle("faded", ((_a = this.flattenedData[idx]) === null || _a === void 0 ? void 0 : _a.barLegend) !== legend);
+        });
+    }
+    clearHighlights() {
+        this.segmentWrappers.forEach((segmentWrapper) => segmentWrapper.classList.remove("faded"));
+        this.wmChartStackHighlighted.emit({ idx: -1 });
+    }
+    clearFocus() {
+        if (this.popoverEl.open) {
+            this.popoverEl.open = false;
+        }
+        this.clearHighlights();
+    }
+    // #endregion focus and highlighting
+    ////////////////////////////////////////////////////////////
+    // #region Responsiveness
+    ////////////////////////////////////////////////////////////
+    updateHiddenValues() {
+        let anyHidden = false;
+        this.segmentWrappers.forEach((segmentWrapper) => {
+            const value = segmentWrapper.querySelector(".value");
+            if (!value) {
+                return;
+            }
+            const fits = value.scrollWidth <= segmentWrapper.clientWidth;
+            value.classList.toggle("hidden", !fits);
+            if (!fits) {
+                anyHidden = true;
+            }
+        });
+        if (this.hasHiddenValues !== anyHidden) {
+            this.hasHiddenValues = anyHidden;
+        }
+    }
+    // #endregion responsiveness
+    ////////////////////////////////////////////////////////////
+    // #region Rendering
+    ////////////////////////////////////////////////////////////
+    renderValue(item) {
+        return (h("div", { class: "value" }, h("span", { class: "percent" }, item.displayValue)));
+    }
+    renderSegment(item, stackIdx, segmentIdx) {
+        var _a, _b;
+        return (h("div", { class: "segment-wrapper", style: { "--segment-width": `${item.gridPercent}%` }, key: `${stackIdx}-${segmentIdx}` }, (this.isPrintMode || this.valueFormat === "percentage") && this.renderValue(item), h("div", { class: `segment horizontal ${this.getPatternClass(item)}`, style: { "--segment-color": `var(--${item.color})` }, tabindex: "-1", role: "img", "aria-label": `${item.groupName}, ${item.displayValue}. ${item.amount}/${(_b = this.stackTotals.get((_a = item.groupName) !== null && _a !== void 0 ? _a : "")) !== null && _b !== void 0 ? _b : 0} ${item.barLegend}`, "data-stack-index": stackIdx, "data-segment-index": segmentIdx, onClick: (ev) => this.handleSegmentClick(ev, item), onKeyDown: (ev) => this.handleSegmentKeyDown(ev, stackIdx, segmentIdx) })));
+    }
+    renderStacks() {
+        const stackNames = [...this.processedStacks.keys()];
+        const rowsPerStack = this.isPrintMode ? 2 : 1;
+        return stackNames.map((stackName, stackIdx) => {
+            const segments = this.processedStacks.get(stackName) || [];
+            const barRow = `${stackIdx * rowsPerStack + 1}`;
+            const items = [
+                !this.isSingleStack && (h("div", { class: "stack-label", key: `label-${stackName}`, style: { "--stack-grid-row": barRow } }, h("span", { class: "stack-name" }, stackName))),
+                h("div", { class: "stack-bar", key: `bar-${stackName}`, style: { "--stack-grid-row": barRow } }, segments.map((item, segmentIdx) => this.renderSegment(item, stackIdx, segmentIdx))),
+                this.isPrintMode && (h("div", { class: "print-table-cell", key: `table-${stackName}`, style: { "--stack-grid-row": `${stackIdx * rowsPerStack + 2}` } }, this.renderPrintTable(stackName, segments))),
+            ];
+            return items;
+        });
+    }
+    renderPrintTable(stackName, segments) {
+        var _a;
+        const total = (_a = this.stackTotals.get(stackName)) !== null && _a !== void 0 ? _a : 0;
+        return (h("div", { class: "print-table", "aria-hidden": "true" }, segments.map((item) => {
+            var _a, _b, _c;
+            return (h("div", { class: "print-row", key: `row-${stackName}-${item.barLegend}` }, h("div", { class: "print-legend" }, h("div", { class: `swatch horizontal ${this.getPatternClass(item)}`, style: { "--segment-color": `var(--${item.color})` } }), h("span", { class: "print-legend-name" }, item.barLegend)), h("span", { class: "print-percent" }, item.displayValue), h("span", { class: "print-fraction" }, item.amount, "/", total), h("span", { class: "print-text" }, (_c = (_a = item.popoverText) !== null && _a !== void 0 ? _a : (_b = this.config) === null || _b === void 0 ? void 0 : _b.popoverText) !== null && _c !== void 0 ? _c : "")));
+        })));
+    }
+    renderLegend(orientation) {
+        if (this.isPrintMode)
+            return null;
+        return (h("div", { class: `legend --${orientation} --${this.showLegend}` }, h("wm-chart-legend", { orientation: orientation, chartIds: this.el.id, processedData: this.legendData, printMode: this.isPrintMode, patternMode: this.isPatternMode ? "horizontal" : undefined, onWmLegendItemClick: (ev) => this.handleLegendItemClick(ev), onWmLegendItemHover: (ev) => this.handleLegendItemClick(ev) })));
+    }
+    // #endregion rendering
+    render() {
+        var _a, _b, _c, _d;
+        const gridLineRow = this.processedStacks.size * (this.isPrintMode ? 2 : 1) + 1;
+        return (h(Host, { key: 'a02be9b6a7e8a570d12fc471ab0899c1d6bff609' }, h("div", { key: '27a456aca42c248c767a3d44d4fca43e27342113', class: "popover-wrapper" }, h("priv-chart-popover", { key: '710e6b9ed574358949d86736991a94ff23033e1b', ref: (el) => (this.popoverEl = el), onIntChartPopoverToggled: (ev) => this.handlePopoverToggled(ev) })), h("div", { key: 'c696620647c3a4bf69b8cbfdfd88fe0d56c0e9e4', ref: (el) => (this.componentWrapperEl = el), class: `component-wrapper ${this.isPrintMode ? "print-mode" : ""} ${this.isPatternMode ? "pattern-mode" : ""}`, tabindex: "0", role: "application", onKeyDown: (ev) => this.handleChartKeyDown(ev), onBlur: (ev) => this.handleComponentBlur(ev), "aria-roledescription": chartMessages.interactiveChart, "aria-describedby": "chart-instructions", "aria-label": (_a = this.config) === null || _a === void 0 ? void 0 : _a.label }, ((_c = (_b = this.config) === null || _b === void 0 ? void 0 : _b.showLabel) !== null && _c !== void 0 ? _c : true) && (h("label", { key: '7bcc1cdcf20e17af7078d5ddec312accafb0ee2a', id: "label", class: "label" }, h("span", { key: '4b1e5090ccbaf485a5efd543575056f77ecc3af8', class: "label-text" }, (_d = this.config) === null || _d === void 0 ? void 0 : _d.label), this.subinfoText && h("span", { key: '4eba44204c943e58e16a0edd2787315d44ae2f23', class: "subinfo" }, this.subinfoText))), this.showLegend === "top" && this.renderLegend("horizontal"), h("div", { key: 'c11932585eb98bc5b12ead052e6965d954d28b0f', class: "chart-body" }, this.showLegend === "left" && this.renderLegend("vertical"), h("div", { key: '772c6c62d2ff5ef996ca6e72bd18f174a5357dc3', class: `stacks ${this.isKeying ? "user-is-keying" : ""} ${this.showGrid ? "show-grid" : ""} ${this.isSingleStack ? "single-stack" : ""}`, ref: (el) => (this.stacksEl = el), style: { "--grid-line-row": `${gridLineRow}` } }, this.showGrid && h("div", { key: '85170b43d60832f82fca6588c39e0ccbcc00cede', class: "vertical-grid-line" }), this.renderStacks(), this.showGrid && (h("div", { key: 'ac782af53cf46f6797bb1a564fdbbc221fd8ea43', class: "x-axis" }, h("div", { key: 'f6175cb9012164eda83c920edc9746c25753bc1e', class: "x-axis-line" }), h("div", { key: 'd218b9ce3d734dd6e218f16d944e93199ac52580', class: "x-axis-ticks" }, h("span", { key: 'eff3d60abf1a6ca2cbaf0247996d891d3cbfadad', class: "tick zero" }, "0%"), h("span", { key: '8767b56809d269272bdc1ef9ccd4d194e6c79070', class: "tick end" }, "100%"))))), this.showLegend === "right" && this.renderLegend("vertical")), this.showLegend === "bottom" && this.renderLegend("horizontal"), !this.isPrintMode && (h("div", { key: '1d9a5524f1669987d19daa5d5fff5dcde93fe4ba', class: `hidden-values-warning ${this.hasHiddenValues ? "" : "hidden"}` }, stackChartMessages.hiddenValues)), renderInstructionsText())));
+    }
+    static get is() { return "wm-chart-stack"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["wm-chart-stack.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["wm-chart-stack.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "config": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "StackChartConfig",
+                    "resolved": "undefined | { label: string; subinfo?: string | undefined; popoverTitle?: string | undefined; popoverText?: string | undefined; popoverButtonText?: string | undefined; colors?: \"discrete\" | \"semantic\" | undefined; showLabel?: boolean | undefined; showLegend?: \"top\" | \"bottom\" | \"left\" | \"right\" | \"none\" | undefined; showGrid?: boolean | undefined; valueFormat?: \"percentage\" | \"none\" | undefined; printMode?: boolean | undefined; patternMode?: boolean | undefined; }",
+                    "references": {
+                        "StackChartConfig": {
+                            "location": "import",
+                            "path": "../../../global/interfaces",
+                            "id": "src/global/interfaces.ts::StackChartConfig"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Chart configuration object. Set via JavaScript property \u2014 not an HTML attribute.\nFields:\n- `label` (string, required): the chart's title, also used as its `aria-label`.\n- `subinfo` (string): secondary text shown beneath the label.\n- `colors` (`\"discrete\"` | `\"semantic\"`, default `\"discrete\"`): palette for the segments.\n`\"semantic\"` maps to the meaning-based palette (gray/purples/teals/coral).\n- `showLabel` (boolean, default `true`): whether the chart label and subinfo are rendered.\n- `showLegend` (`\"left\"` | `\"right\"` | `\"top\"` | `\"bottom\"` | `\"none\"`, default `\"none\"`):\nplacement of the interactive legend (hidden in print, where the data table replaces it).\n- `showGrid` (boolean, default `false`): renders a `0%`\u2013`100%` axis and a vertical baseline.\n- `valueFormat` (`\"percentage\"` | `\"none\"`, default `\"percentage\"`): whether each segment shows\nits percentage label above the bar.\n- `printMode` / `patternMode` (boolean, default `false`): same as the props of the same name;\nthe props take precedence when both are set.\n- `popoverTitle` / `popoverText` / `popoverButtonText` (string): default popover content applied\nto every segment, each overridable per-segment in `data`. When unset, the popover title\ndefaults to `amount/total`, the text to the segment's legend, and no button is shown."
+                        }],
+                    "text": ""
+                }
+            },
+            "data": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "StackSegmentData[]",
+                    "resolved": "StackSegmentData[] | undefined",
+                    "references": {
+                        "StackSegmentData": {
+                            "location": "import",
+                            "path": "../../../global/interfaces",
+                            "id": "src/global/interfaces.ts::StackSegmentData"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Array of segments to render. Set via JavaScript property \u2014 not an HTML attribute.\nEach segment's fields:\n- `stackName` (string, required): groups segments into the same stack (row); the set of distinct\nstackNames determines whether the single or grouped layout is used.\n- `legend` (string, required): the segment's category, shown in the legend and used to assign a\nconsistent color across stacks.\n- `amount` (number, required): the raw value; the segment's width is `amount / stackTotal`.\n- `color` (string): a `wmcolor` token overriding the palette color for this segment.\n- `popoverTitle` / `popoverText` / `popoverButtonText` (string): popover content for this segment,\noverriding the corresponding `config` defaults."
+                        }],
+                    "text": ""
+                }
+            },
+            "printMode": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "When true, renders the print layout: shorter bars, larger bold percentage labels,\nand a data table beneath each stack (legend, percentage, amount/total, popover text) in place of\nthe interactive legend. Also activated automatically while the browser is printing. Takes\nprecedence over `config.printMode`."
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": ""
+                },
+                "attribute": "print-mode",
+                "reflect": false
+            },
+            "patternMode": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "When true, applies a hatching pattern fill to segments and enlarges the legend\ntiles, in addition to color \u2014 improving distinguishability for users with color vision\ndeficiencies. Takes precedence over `config.patternMode`."
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": ""
+                },
+                "attribute": "pattern-mode",
+                "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 chart label. Takes precedence over\n`config.subinfo`."
+                        }],
+                    "text": ""
+                },
+                "attribute": "subinfo",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "processedStacks": {},
+            "isKeying": {},
+            "hasHiddenValues": {},
+            "userIsPrinting": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "wmChartStackHighlighted",
+                "name": "wmChartStackHighlighted",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }, {
+                            "name": "description",
+                            "text": "Internal signal used to synchronize segment highlight state with an external\nwm-chart-legend \u2014 not for application use."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ idx: number }",
+                    "resolved": "{ idx: number; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "config",
+                "methodName": "handleConfigDataChange"
+            }, {
+                "propName": "data",
+                "methodName": "handleConfigDataChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "wmLegendItemClick",
+                "method": "handleLegendItemClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "click",
+                "method": "handleDocumentClick",
+                "target": "document",
+                "capture": true,
+                "passive": false
+            }, {
+                "name": "wmUserIsKeying",
+                "method": "handleUserIsKeying",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "wmUserIsNotTabbing",
+                "method": "handleUserIsNotKeying",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "beforeprint",
+                "method": "handleBeforePrint",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "afterprint",
+                "method": "handleAfterPrint",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}