@watermarkinsights/ripple 5.23.0-alpha.1 → 5.23.0-alpha.11

package/dist/collection/components/charts/chartFunctions.js

@@ -708,3 +708,20 @@ export function findLargestNiceInterval(maxIntervals, total) {
     }
     return { numIntervals: 1, interval: total };
 }
+export function findNiceRoundNumber(value) {
+    // Given a value, find the next "nice" round number >= that value.
+    // Examples: 982 → 1000, 45 → 50, 1234 → 1500, 7 → 10
+    if (value <= 0)
+        return 0;
+    const niceValues = [1, 1.5, 2, 2.5, 3, 5, 10];
+    const magnitude = Math.pow(10, Math.floor(Math.log10(value)));
+    const normalized = value / magnitude;
+    // Find the smallest nice value that is >= the normalized value
+    for (const nice of niceValues) {
+        if (nice >= normalized) {
+            return nice * magnitude;
+        }
+    }
+    // Fallback: next order of magnitude
+    return 10 * magnitude;
+}

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

@@ -860,12 +860,6 @@
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z'/%3E%3C/svg%3E%0A");
 }
 
-priv-chart-popover {
-  --wmcolor-chart-popover-link-background: var(--wmcolor-background-transparent);
-  --wmcolor-chart-popover-link-text-focus: var(--wmcolor-interactive-focus);
-  --wmcolor-chart-popover-link-text: var(--wmcolor-interactive);
-  --wmcolor-chart-popover-background: var(--wmcolor-background);
-}
 priv-chart-popover.user-is-keying .button-text {
   outline: 3px solid var(--wmcolor-interactive-focus);
   outline-offset: 2px;
@@ -893,10 +887,10 @@ priv-chart-popover.user-is-keying .button-text {
   -webkit-box-shadow: 0 11px 15px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.12);
   -moz-box-shadow: 0 11px 15px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.12);
   box-shadow: 0 11px 15px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.12);
-  background-color: var(--wmcolor-chart-popover-background);
+  background-color: var(--wmcolor-background);
   font-size: 0.875rem;
-  text-align: left;
-  width: 10.5rem;
+  text-align: start;
+  inline-size: 10.5rem;
   padding: 0.625rem 0.9375rem;
   box-sizing: border-box;
 }
@@ -904,9 +898,9 @@ priv-chart-popover.user-is-keying .button-text {
   font-size: 1em;
   font-weight: 500;
   margin: 0;
-  padding-top: 0;
-  padding-left: 0;
-  padding-bottom: 0.25rem;
+  padding-block-start: 0;
+  padding-inline-start: 0;
+  padding-block-end: 0.25rem;
 }
 .popover .title.positive {
   color: var(--wmcolor-chart-label-text-positive);
@@ -916,7 +910,7 @@ priv-chart-popover.user-is-keying .button-text {
 }
 .popover .text {
   margin: 0;
-  margin-bottom: 0.5rem;
+  margin-block-end: 0.5rem;
 }
 .popover .popover-button {
   -webkit-box-shadow: none;
@@ -924,12 +918,12 @@ priv-chart-popover.user-is-keying .button-text {
   box-shadow: none;
   position: relative;
   display: inline-block;
-  margin-left: 1rem;
-  padding-left: 0;
-  padding-right: 0;
-  height: auto;
+  margin-inline-start: 1rem;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
+  block-size: auto;
   border: none;
-  background: var(--wmcolor-chart-popover-link-background);
+  background: var(--wmcolor-background-transparent);
   cursor: pointer;
   text-decoration: none;
   letter-spacing: 0;
@@ -937,7 +931,7 @@ priv-chart-popover.user-is-keying .button-text {
   text-align: initial;
   font-size: 0.875rem;
   font-weight: 700;
-  color: var(--wmcolor-chart-popover-link-text);
+  color: var(--wmcolor-interactive);
   line-height: normal;
 }
 .popover .popover-button .button-text {
@@ -945,8 +939,13 @@ priv-chart-popover.user-is-keying .button-text {
 }
 .popover .popover-button .btn-icon {
   position: absolute;
-  top: 0.1875rem;
-  left: -1rem;
+  inset-block-start: 0.1875rem;
+  inset-inline-start: -1rem;
+}
+.popover .popover-button span {
+  text-decoration: underline;
+  text-decoration-thickness: 0.0714285714em;
+  text-underline-offset: 0.1428571429em;
 }
 .popover .popover-button:focus {
   outline: none;
@@ -959,5 +958,6 @@ priv-chart-popover.user-is-keying .button-text {
   text-decoration: none;
 }
 .popover .popover-button:hover span {
-  text-decoration: underline;
+  color: var(--wmcolor-link-text-hover);
+  text-decoration-thickness: 0.1428571429em;
 }

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

@@ -57,7 +57,7 @@ export class ChartPopover {
         });
     }
     handleOpenChange() {
-        this.intChartPopoverOpenChanged.emit(this.open);
+        this.intChartPopoverToggled.emit(this.open);
         if (this.open) {
             this.popoverEl.showPopover();
         }
@@ -106,9 +106,9 @@ export class ChartPopover {
     }
     render() {
         const titleAffordance = this.header && (this.header[0] === "-" ? "negative" : this.header[0] === "+" ? "positive" : "");
-        return (h(Host, { key: '5c7a3675940a53de167b000c9744a0f57c67388e', class: this.isKeying ? "user-is-keying" : "" }, h("div", { key: '5d3e225f174530a1b5f7d99f572efd37606d5c83', ref: (el) => (this.popoverEl = el), popover: "manual", "aria-hidden": "true", class: "popover" }, h("h1", { key: '858f7faa282336836ab4bcee639b2c3de2f9bdd0', class: `title ${titleAffordance}` }, this.header), h("p", { key: '2b1615179e45c14d2a661c4f9329134e744c16dc', class: "text" }, this.text), this.buttonText ? (h("button", { tabindex: "-1",
+        return (h(Host, { key: 'ccf8d6d35d85b8c902d1350aa74d75b479c43b3c', class: this.isKeying ? "user-is-keying" : "" }, h("div", { key: '1340158d01632a92f6ef8c0a5637bc28e5ce7ea5', ref: (el) => (this.popoverEl = el), popover: "manual", "aria-hidden": "true", class: "popover" }, h("h1", { key: 'afb65849a7b7ff30b78f8e78f74bc57824f6acd5', class: `title ${titleAffordance}` }, this.header), h("p", { key: '2f523aae12190a62184136fec74b50fed7436f4a', class: "text" }, this.text), this.buttonText ? (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.buttonText))) : ("")), h("div", { key: '2238bbe6a805627f34ae04e8e62cef6d94546cf3', ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" }, this.announcement)));
+            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.buttonText))) : ("")), h("div", { key: '15568d7b0bb0dbc6884bf9baaea4b9ae715d33cf', ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" }, this.announcement)));
     }
     static get is() { return "priv-chart-popover"; }
     static get originalStyleUrls() {
@@ -263,8 +263,8 @@ export class ChartPopover {
                     }
                 }
             }, {
-                "method": "intChartPopoverOpenChanged",
-                "name": "intChartPopoverOpenChanged",
+                "method": "intChartPopoverToggled",
+                "name": "intChartPopoverToggled",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -317,18 +317,6 @@ export class ChartPopover {
                 "target": "window",
                 "capture": false,
                 "passive": false
-            }, {
-                "name": "wmUserIsTabbing",
-                "method": "toggleTabbingOn",
-                "target": "window",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "wmUserIsNotKeying",
-                "method": "toggleTabbingOff",
-                "target": "window",
-                "capture": false,
-                "passive": false
             }, {
                 "name": "wmUserIsNotTabbing",
                 "method": "toggleTabbingOff",

package/dist/collection/components/charts/priv-chart-popover-old/priv-chart-popover-old.css

@@ -861,17 +861,13 @@
 }
 
 priv-chart-popover-old {
-  --wmcolor-chart-popover-link-background: var(--wmcolor-background-transparent);
-  --wmcolor-chart-popover-link-text-focus: var(--wmcolor-interactive-focus);
-  --wmcolor-chart-popover-link-text: var(--wmcolor-interactive);
-  --wmcolor-chart-popover-background: var(--wmcolor-background);
   position: fixed;
   z-index: 10;
   border-radius: 0.1875rem;
   -webkit-box-shadow: 0 11px 15px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.12);
   -moz-box-shadow: 0 11px 15px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.12);
   box-shadow: 0 11px 15px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.12);
-  background-color: var(--wmcolor-chart-popover-background);
+  background-color: var(--wmcolor-background);
   font-size: 0.875rem;
   text-align: left;
 }
@@ -927,7 +923,7 @@ priv-chart-popover-old.user-is-tabbing .button-text {
   padding-right: 0;
   height: auto;
   border: none;
-  background: var(--wmcolor-chart-popover-link-background);
+  background: var(--wmcolor-background-transparent);
   cursor: pointer;
   text-decoration: none;
   letter-spacing: 0;
@@ -935,7 +931,7 @@ priv-chart-popover-old.user-is-tabbing .button-text {
   text-align: initial;
   font-size: 0.875rem;
   font-weight: 700;
-  color: var(--wmcolor-chart-popover-link-text);
+  color: var(--wmcolor-link-text);
   line-height: normal;
 }
 .popover .popover-button .button-text {
@@ -946,6 +942,11 @@ priv-chart-popover-old.user-is-tabbing .button-text {
   top: 0.1875rem;
   left: -1rem;
 }
+.popover .popover-button span {
+  text-decoration: underline;
+  text-decoration-thickness: 0.0714285714em;
+  text-underline-offset: 0.1428571429em;
+}
 .popover .popover-button:focus {
   outline: none;
 }
@@ -957,5 +958,6 @@ priv-chart-popover-old.user-is-tabbing .button-text {
   text-decoration: none;
 }
 .popover .popover-button:hover span {
-  text-decoration: underline;
+  color: var(--wmcolor-link-text-hover);
+  text-decoration-thickness: 0.1428571429em;
 }

package/dist/collection/components/charts/wm-chart-bar/wm-chart-bar.css

@@ -872,16 +872,6 @@
   outline: 3px solid var(--wmcolor-interactive-focus);
   outline-offset: 3px;
 }
-.component-wrapper :has(.bar:focus-visible) priv-chart-popover:host {
-  --outline: 3px solid var(--wmcolor-interactive-focus);
-}
-.component-wrapper :has(.bar:focus-visible) priv-chart-popover:host .popover {
-  background-color: red !important;
-}
-.component-wrapper :has(.bar:focus-visible) priv-chart-popover:host button {
-  outline: 3px solid var(--wmcolor-interactive-focus);
-  outline-offset: 2px;
-}
 
 .chart-wrapper {
   display: flex;
@@ -903,6 +893,7 @@
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
+  margin-bottom: 1.5rem;
 }
 .label .label-text {
   display: block;
@@ -917,12 +908,6 @@
   width: 100%;
   color: var(--wmcolor-chart-subinfo-text);
 }
-.label.--top {
-  margin-bottom: 1.5rem;
-}
-.label.--none {
-  display: none;
-}
 
 .chart-left-side {
   grid-column: 1;
@@ -1000,7 +985,7 @@
   grid-template-rows: subgrid;
   align-items: center;
 }
-.bar-area.user-is-keying .bar:focus {
+.bar-area.user-is-keying:not(.hide-focus-ring) .bar:focus {
   outline: none;
   outline: 3px solid var(--wmcolor-interactive-focus);
   outline-offset: 3px;
@@ -1044,11 +1029,7 @@
   display: flex;
   align-items: center;
   cursor: pointer;
-}
-.bar:focus-visible {
   outline: none;
-  outline: 3px solid var(--wmcolor-interactive-focus);
-  outline-offset: 3px;
 }
 
 .value {

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

@@ -1,6 +1,6 @@
 import { h, Host } from "@stencil/core";
-import { chartPaletteDiscrete, chartPaletteSemantic, } from "../../../global/interfaces";
-import { formatDisplayValue, suffixNumber, renderInstructionsText, findLargestNiceInterval, getMaxTicks, } from "../chartFunctions";
+import { chartPalettes, } from "../../../global/interfaces";
+import { formatDisplayValue, suffixNumber, renderInstructionsText, findLargestNiceInterval, getMaxTicks, findNiceRoundNumber, } from "../chartFunctions";
 import { chartMessages } from "../../../global/intl";
 import { isElOrChild } from "../../../global/functions";
 export class ChartBar {
@@ -21,10 +21,10 @@ export class ChartBar {
         var _a, _b, _c, _d;
         let palette = ["wmcolor-dataviz-discrete-01"]; // default to single color
         if (((_a = this.config) === null || _a === void 0 ? void 0 : _a.colors) === "semantic") {
-            palette = chartPaletteSemantic;
+            palette = chartPalettes.semantic;
         }
         else if (((_b = this.config) === null || _b === void 0 ? void 0 : _b.colors) == "discrete") {
-            palette = chartPaletteDiscrete;
+            palette = chartPalettes.discrete;
         }
         else if ((_d = (_c = this.config) === null || _c === void 0 ? void 0 : _c.colors) === null || _d === void 0 ? void 0 : _d.startsWith("wmcolor-")) {
             palette = [this.config.colors];
@@ -43,6 +43,10 @@ export class ChartBar {
         var _a;
         return this.subinfo || ((_a = this.config) === null || _a === void 0 ? void 0 : _a.subinfo) || "";
     }
+    get gridVisible() {
+        var _a, _b, _c;
+        return !!this.gridInfo && ((_a = this.config) === null || _a === void 0 ? void 0 : _a.gridMax) != undefined && ((_c = (_b = this.config) === null || _b === void 0 ? void 0 : _b.showGrid) !== null && _c !== void 0 ? _c : true);
+    }
     // #endregion getters
     ////////////////////////////////////////////////////////////
     // #region Component lifecycle
@@ -54,6 +58,9 @@ export class ChartBar {
             }
         });
         resizeObserver.observe(this.barAreaEl);
+        if (this.config && this.data) {
+            this.processData();
+        }
     }
     // #endregion component lifecycle
     ////////////////////////////////////////////////////////////
@@ -63,10 +70,16 @@ export class ChartBar {
         if (this.config && this.data) {
             const itemTotal = this.data.reduce((acc, item) => acc + item.amount, 0);
             const largest = Math.max(...this.data.map((item) => item.amount));
-            // Use config.gridMax if specified, otherwise calculate from data
-            // Even when the grid is not displayed (undefined), we need a gridMax to calculate the bar widths
-            this.gridMax =
-                this.config.gridMax === "auto" || this.config.gridMax === undefined ? largest : this.config.gridMax;
+            if (this.config.gridMax == "auto") {
+                this.gridMax = findNiceRoundNumber(largest);
+            }
+            else if (!!this.config.gridMax) {
+                this.gridMax = this.config.gridMax;
+            }
+            else {
+                // fallback to 1 and chart should not render
+                this.gridMax = 1;
+            }
             const processedItems = this.processItems(itemTotal);
             if (this.sort === "ascending") {
                 processedItems.sort((a, b) => a.amount - b.amount);
@@ -80,6 +93,9 @@ export class ChartBar {
     }
     processItems(itemTotal) {
         var _a, _b;
+        if (!this.data) {
+            return [];
+        }
         const valueFormat = ((_a = this.config) === null || _a === void 0 ? void 0 : _a.valueFormat) || "amount"; // default to amount
         const printModeFormat = ((_b = this.config) === null || _b === void 0 ? void 0 : _b.printModeFormat) || "amount"; // default to amount
         const defaultColor = "wmcolor-dataviz-discrete-01";
@@ -102,7 +118,7 @@ export class ChartBar {
     }
     propogateExternalLegendData() {
         document.querySelectorAll("wm-chart-legend").forEach((legend) => {
-            if (legend.chartIds.includes(this.el.id)) {
+            if (legend.chartIds.split(" ").includes(this.el.id)) {
                 legend.processedData = this.processedData;
             }
         });
@@ -129,8 +145,11 @@ export class ChartBar {
     handleChartKeyDown(ev) {
         switch (ev.key) {
             case "ArrowDown":
+            case "ArrowRight":
                 ev.preventDefault();
-                this.focusBar(0);
+                if (this.el.shadowRoot.activeElement === this.componentWrapperEl) {
+                    this.focusBar(0);
+                }
                 break;
             case "Tab":
                 this.clearFocus();
@@ -147,13 +166,13 @@ export class ChartBar {
     handleBarKeyDown(ev, barIdx) {
         switch (ev.key) {
             case "ArrowUp":
+            case "ArrowLeft":
                 ev.preventDefault();
-                ev.stopPropagation();
                 this.focusBar(barIdx - 1);
                 break;
             case "ArrowDown":
+            case "ArrowRight":
                 ev.preventDefault();
-                ev.stopPropagation();
                 this.focusBar(barIdx + 1);
                 break;
             case "Enter":
@@ -170,21 +189,15 @@ export class ChartBar {
             this.highlightBar(idx);
         }
     }
-    handleExternalLegendItemClick(ev) {
+    handleLegendItemClick(ev) {
         if (ev.target.nodeName === "WM-CHART-LEGEND") {
-            // Only considers external legends, event target of internal legends is the chart
+            // If event from an internal legend bubbles up to the chart, ignore it
             const legendEl = ev.target;
             if (legendEl.chartIds.includes(this.el.id)) {
                 this.highlightBar(ev.detail.idx);
             }
         }
     }
-    handleInternalLegendItemClick(ev) {
-        const legendEl = ev.target;
-        if (legendEl.chartIds.includes(this.el.id)) {
-            this.highlightBar(ev.detail.idx);
-        }
-    }
     handleDocumentClick(_ev) {
         // Clear highlights when highlight is set from an external legend (not opening a popover)
         if (!this.popoverEl.open) {
@@ -219,7 +232,7 @@ export class ChartBar {
             y: barToFocus.getBoundingClientRect().top + cornerOffset,
         });
     }
-    handlePopoverOpenChanged(_ev) {
+    handlePopoverToggled(_ev) {
         setTimeout(() => {
             // allow time for the popover to reopen if the click that closed it was on a bar, to prevent flash
             if (this.popoverEl.open) {
@@ -231,12 +244,17 @@ export class ChartBar {
         }, 30);
     }
     openPopover(clickedProcessedData, coords) {
+        if (!this.data || !this.config) {
+            return;
+        }
         let matchingChartData = this.data.find((item) => item.barLegend === clickedProcessedData.barLegend);
         if (matchingChartData) {
+            const popoverButtonText = matchingChartData.popoverButtonText || this.config.popoverButtonText || "";
+            this.barAreaEl.classList.toggle("hide-focus-ring", !!popoverButtonText);
             this.popoverEl.chartData = matchingChartData;
             this.popoverEl.header = matchingChartData.popoverTitle || this.config.popoverTitle || "";
             this.popoverEl.text = matchingChartData.popoverText || this.config.popoverText || "";
-            this.popoverEl.buttonText = matchingChartData.popoverButtonText || this.config.popoverButtonText || "";
+            this.popoverEl.buttonText = popoverButtonText;
             this.popoverEl.coords = coords;
             window.setTimeout(() => {
                 this.popoverEl.open = true;
@@ -262,7 +280,6 @@ export class ChartBar {
     clearFocus() {
         if (this.popoverEl.open) {
             this.popoverEl.open = false;
-            console.log("popover closed from clearFocus: ", this.popoverEl.open);
         }
         this.clearHighlights();
     }
@@ -274,6 +291,9 @@ export class ChartBar {
         return this.processedData.map((item) => (h("div", { key: `legend-${item.barLegend}`, class: "bar-legend" }, item.barLegend)));
     }
     renderBars() {
+        if (!this.gridInfo || !this.processedData) {
+            return;
+        }
         // Use effective grid max (numTicks * interval) for accurate bar sizing
         const effectiveGridMax = this.gridInfo.numTicks * this.gridInfo.interval;
         return this.processedData.map((item, idx) => {
@@ -287,17 +307,19 @@ export class ChartBar {
             _a.tickLabels.map((label) => (h("div", { class: "tick", key: label }, h("span", null, label))))));
     }
     renderGrid() {
-        return h("div", { class: "grid-lines", style: { "--background-size": this.gridInfo.backgroundSize } });
+        var _a;
+        const backgroundSize = (_a = this.gridInfo) === null || _a === void 0 ? void 0 : _a.backgroundSize;
+        return h("div", { class: "grid-lines", style: { "--background-size": backgroundSize } });
     }
     renderLegend(orientation) {
         var _a, _b, _c;
-        return (h("div", { class: `legend --${orientation} --${this.showLegend}` }, h("wm-chart-legend", { orientation: orientation, chartIds: this.el.id, processedData: this.processedData, printMode: (_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, onWmLegendItemClick: (ev) => this.handleInternalLegendItemClick(ev) })));
+        return (h("div", { class: `legend --${orientation} --${this.showLegend}` }, h("wm-chart-legend", { orientation: orientation, chartIds: this.el.id, processedData: this.processedData, printMode: (_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, onWmLegendItemClick: (ev) => this.handleLegendItemClick(ev) })));
     }
     // #endregion rendering
     render() {
         var _a, _b, _c, _d, _e, _f, _g;
         const rowCount = this.processedData.length || 1;
-        return (h(Host, { key: '2fe75003c819b49d5de618eea92bbd2fcfc10723' }, h("div", { key: '48f496b705d9571f9386dfddaaaddbd414836252', class: "component-wrapper", 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 }, h("div", { key: '9f78d67d37c8048554127adbd40ee94409dcc575', class: "popover-wrapper" }, h("priv-chart-popover", { key: '9d1f5bf3bb3d1af0a36b2c0e7d53a7e56f23ce9d', ref: (el) => (this.popoverEl = el), onIntChartPopoverOpenChanged: (ev) => this.handlePopoverOpenChanged(ev) })), h("label", { key: 'c111aecf07f21b19422804a21ffeba9632258309', id: "label", class: `label --${(_b = this.config) === null || _b === void 0 ? void 0 : _b.labelPosition}` }, h("span", { key: 'bb866688ed8f54ded76bfdff8ca54437322dc73d', class: "label-text" }, (_c = this.config) === null || _c === void 0 ? void 0 : _c.label), this.subinfoText ? h("span", { class: "subinfo" }, this.subinfoText) : ""), this.showLegend === "top" && this.renderLegend("horizontal"), h("div", { key: '58a8f0c8932fa214311ef73fac64925d2eb1cb74', class: "chart-wrapper" }, h("div", { key: '1ad4c29e26a7d5fb3e23b54d25ce639adbceedd9', class: "chart-left-side" }, this.showLegend === "left" && this.renderLegend("vertical"), h("div", { key: '5f7aeb14ab9101f1fd38c811d9ac17660c5055d5', class: "category-axis-label" }, h("span", { key: 'bc99815352064b5b62efc9634d0f623b29e56c19', class: "axis-label-text" }, (_d = this.config) === null || _d === void 0 ? void 0 : _d.categoryAxisLabel))), h("div", { key: '1b968d3f687215a65ddd3bc6e39bc96dd908c68c', class: "chart-center" }, h("div", { key: '6da38ae08882fed85387427d8c36984160ac805a', class: "chart-area", style: { "--row-count": rowCount.toString() } }, this.processedData && this.renderBarLegends(), h("div", { key: '1413e4f4a62e10cf7236d87b38b96932f3bd713a', class: `bar-area ${this.isKeying ? "user-is-keying" : ""}`, ref: (el) => (this.barAreaEl = el) }, this.gridInfo && ((_e = this.config) === null || _e === void 0 ? void 0 : _e.gridMax) != undefined && this.renderGrid(), this.gridInfo && this.processedData && this.renderBars())), h("div", { key: '5021bad3a65b05b5280a63320dacfab6b560ab88', class: "value-axis-label" }, h("span", { key: 'c2b06b622ef28a16423eaa277c31e7c298ed431d', class: "axis-label-text" }, (_f = this.config) === null || _f === void 0 ? void 0 : _f.valueAxisLabel)), this.gridInfo && ((_g = this.config) === null || _g === void 0 ? void 0 : _g.gridMax) != undefined && this.renderXAxis()), h("div", { key: '49ae3d55b3172a5d98cb26b6bbdd59c277b38b57', class: "chart-right-side" }, this.showLegend === "right" && this.renderLegend("vertical"))), this.showLegend === "bottom" && this.renderLegend("horizontal"), renderInstructionsText())));
+        return (h(Host, { key: '5a154a60dd11570740b3e778d8c58c78b67dc6b6' }, h("div", { key: '4d0b3db08e5b128ec3f8266aa97d9fd090efbe97', ref: (el) => (this.componentWrapperEl = el), class: "component-wrapper", 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 }, h("div", { key: 'bf3798fd2a5cb87f030d1c7d67c2dd010e1d0fdd', class: "popover-wrapper" }, h("priv-chart-popover", { key: '47dd968f544f1ea369d37d5951f7ff586fc9958f', ref: (el) => (this.popoverEl = el), onIntChartPopoverToggled: (ev) => this.handlePopoverToggled(ev) })), ((_c = (_b = this.config) === null || _b === void 0 ? void 0 : _b.showLabel) !== null && _c !== void 0 ? _c : true) && (h("label", { key: 'c6225aefc8339e36c0ee7ef0f5eb8e6ceda8fdac', id: "label", class: "label" }, h("span", { key: '00c04f88247aec35af1f1346a9d01211b635e17e', class: "label-text" }, (_d = this.config) === null || _d === void 0 ? void 0 : _d.label), this.subinfoText ? h("span", { class: "subinfo" }, this.subinfoText) : "")), this.showLegend === "top" && this.renderLegend("horizontal"), h("div", { key: 'd5989a52cb79013b52ac22de98246d8b89f57f39', class: "chart-wrapper" }, h("div", { key: 'dbb3b1411c6a1fd02b9e08f253ee71a94595444e', class: "chart-left-side" }, this.showLegend === "left" && this.renderLegend("vertical"), h("div", { key: '60d52d5bea0f24248150b72e6e7ddf9eba33a483', class: "category-axis-label" }, h("span", { key: 'fde7f24edf13fb8856bf70d4abefa480db515346', class: "axis-label-text" }, (_e = this.config) === null || _e === void 0 ? void 0 : _e.categoryAxisLabel))), h("div", { key: 'bd9a99de960d246c3a37b72137f7ed6d6bab33d2', class: "chart-center" }, h("div", { key: 'f31bb7af12e0efa2cb4137a72baa7c820f1ef851', class: "chart-area", style: { "--row-count": rowCount.toString() } }, this.processedData && this.renderBarLegends(), h("div", { key: '5aae88d517fbe1d7aec45b48bfa62a3032bbe32f', class: `bar-area ${this.isKeying ? "user-is-keying" : ""}`, ref: (el) => (this.barAreaEl = el) }, this.gridVisible && this.renderGrid(), ((_f = this.config) === null || _f === void 0 ? void 0 : _f.gridMax) != undefined && this.renderBars())), h("div", { key: '2717fd0aa3a93a22e683745d13875dd095cd4986', class: "value-axis-label" }, h("span", { key: '099711328fa09ec0ab2a69814563617303225e9f', class: "axis-label-text" }, (_g = this.config) === null || _g === void 0 ? void 0 : _g.valueAxisLabel)), this.gridVisible && this.renderXAxis()), h("div", { key: 'da9d13996e5dec9a8d60716745b9aac68e8abd76', class: "chart-right-side" }, this.showLegend === "right" && this.renderLegend("vertical"))), this.showLegend === "bottom" && this.renderLegend("horizontal"), renderInstructionsText())));
     }
     static get is() { return "wm-chart-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -318,7 +340,7 @@ export class ChartBar {
                 "mutable": false,
                 "complexType": {
                     "original": "ChartConfig",
-                    "resolved": "undefined | { label: string; labelPosition: \"top\" | \"none\"; valueAxisLabel: string; categoryAxisLabel: string; printMode: boolean; printModeFormat: \"amount\" | \"percentage\"; gridMax?: number | \"auto\" | undefined; sort?: \"none\" | \"ascending\" | \"descending\" | undefined; showLegend?: \"top\" | \"bottom\" | \"left\" | \"right\" | \"none\" | undefined; subinfo?: string | undefined; completionMessage?: string | undefined; valueFormat?: \"none\" | \"amount\" | \"percentage\" | undefined; colors?: string | undefined; popoverTitle?: string | undefined; popoverText?: string | undefined; popoverButtonText?: string | undefined; }",
+                    "resolved": "undefined | { label: string; showLabel: boolean; valueAxisLabel: string; categoryAxisLabel: string; printMode: boolean; printModeFormat: \"amount\" | \"percentage\"; gridMax: number | \"auto\"; sort?: \"ascending\" | \"descending\" | \"none\" | undefined; showLegend?: \"top\" | \"bottom\" | \"left\" | \"right\" | \"none\" | undefined; showGrid?: boolean | undefined; subinfo?: string | undefined; valueFormat?: \"amount\" | \"percentage\" | \"none\" | undefined; colors?: string | undefined; popoverTitle?: string | undefined; popoverText?: string | undefined; popoverButtonText?: string | undefined; }",
                     "references": {
                         "ChartConfig": {
                             "location": "import",
@@ -432,7 +454,7 @@ export class ChartBar {
     static get listeners() {
         return [{
                 "name": "wmLegendItemClick",
-                "method": "handleExternalLegendItemClick",
+                "method": "handleLegendItemClick",
                 "target": "document",
                 "capture": false,
                 "passive": false
@@ -448,18 +470,6 @@ export class ChartBar {
                 "target": "window",
                 "capture": false,
                 "passive": false
-            }, {
-                "name": "wmUserIsTabbing",
-                "method": "handleUserIsKeying",
-                "target": "window",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "wmUserIsNotKeying",
-                "method": "handleUserIsNotKeying",
-                "target": "window",
-                "capture": false,
-                "passive": false
             }, {
                 "name": "wmUserIsNotTabbing",
                 "method": "handleUserIsNotKeying",

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

@@ -7,7 +7,7 @@ export class ChartLegend {
         this.printMode = false;
     }
     handleChartBarHighlighted(ev) {
-        if (this.chartIds.includes(ev.target.id)) {
+        if (this.chartIds.split(" ").includes(ev.target.id)) {
             this.highlightLegendItem(ev.detail.idx);
         }
     }
@@ -29,7 +29,7 @@ export class ChartLegend {
         return this.processedData.map((item, idx) => (h("div", { class: "legend-item", key: item.barLegend, onClick: () => this.handleLegendItemClick(idx) }, h("div", { class: "color", style: { "--color": `var(--${item.color})` } }), h("div", { class: "label" }, item.barLegend), h("span", { class: `print-value ${this.printMode ? "force-visible" : ""}` }, "(", item.printValue, ")"))));
     }
     render() {
-        return (h(Host, { key: 'be2793da927897a4c0e62345ffe502967fd7f12c' }, h("div", { key: '382567c522ff081fbd02e96563b11f1831a56c32', class: `legend-container --${this.orientation}` }, this.renderLegendItems())));
+        return (h(Host, { key: 'f8c8c56e0a679b0f8ba7cb3af815276cb766b2fc' }, h("div", { key: '29ab0bebb0e7489a822da43959f08ba5848344e4', class: `legend-container --${this.orientation}`, "aria-hidden": "true" }, this.renderLegendItems())));
     }
     static get is() { return "wm-chart-legend"; }
     static get encapsulation() { return "shadow"; }