npm - @watermarkinsights/ripple - Versions diffs - 5.7.0-8 → 5.7.0-9 - Mend

@watermarkinsights/ripple 5.7.0-8 → 5.7.0-9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (376) hide show

package/dist/collection/components/charts/wm-line-chart/wm-line-chart.e2e.js ADDED Viewed

@@ -0,0 +1,176 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { AxePuppeteer } from "@axe-core/puppeteer";
+describe("wm-line-chart", () => {
+    let page;
+    async function createPageHelper() {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+    <wm-line-chart
+          label="Regional Job Trends"
+          description="View job trends for your region compared to national tends from the past 3 years with a 3 year projection"
+          x-axis-label="Year"
+          y-axis-label="Change Since 2020"
+          line-data='{"Regional": {"2020": 5, "2021": 10, "2022": 13, "2023": null, "2024": 20, "2025": 23, "2026": 25, "2027": 32, "2028": 35, "2029": 40, "2030": 42, "2031": 52, "2032": 54, "2033": 61}, "National": {"2020": 8, "2021": 13, "2022": 16, "2023": 21, "2024": 23, "2025": 26, "2026": 28, "2027": 29, "2028": 32, "2029": 35, "2030": 39, "2031": 49, "2032": 51, "2033": 58} }'
+          units="year,%"
+          show-deltas="true"
+          y-range="0,25,50,75,100"
+          highlight-start="2026"
+          visibility-toggles="true"
+        >
+        </wm-line-chart>
+  </main></body></html>`);
+    }
+    it("passes Axe tests", async () => {
+        await createPageHelper();
+        const results = await new AxePuppeteer(page).analyze();
+        expect(results.violations.length).toBe(0);
+    });
+    it("has keyboard navigation for legend", async () => {
+        await createPageHelper();
+        // first focus goes to first button
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        let activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        await page.waitForChanges();
+        expect(activeElId).toBe("visibility-button-0");
+        // wraps right
+        await page.keyboard.press("ArrowLeft");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        await page.waitForChanges();
+        expect(activeElId).toBe("visibility-button-1");
+        await page.keyboard.press("ArrowLeft");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        await page.waitForChanges();
+        expect(activeElId).toBe("visibility-button-0");
+        await page.keyboard.press("ArrowRight");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        await page.waitForChanges();
+        expect(activeElId).toBe("visibility-button-1");
+        // wraps left
+        await page.keyboard.press("ArrowRight");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        await page.waitForChanges();
+        expect(activeElId).toBe("visibility-button-0");
+    });
+    it("has keyboard navigation for data points", async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+    <wm-line-chart
+          label="Regional Job Trends"
+          description="View job trends for your region compared to national tends from the past 3 years with a 3 year projection"
+          x-axis-label="Year"
+          y-axis-label="Change Since 2020"
+          line-data='{"Regional": {"2020": 5, "2021": 10, "2022": 13}, "National": {"2020": 8, "2021": null, "2022": 16}}'
+          y-range="0,25,50,75,100"
+        >
+        </wm-line-chart>
+  </main></body></html>`);
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        let activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("Regional-0");
+        await page.keyboard.press("ArrowRight");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        await page.waitForChanges();
+        expect(activeElId).toBe("Regional-1");
+        await page.keyboard.press("ArrowRight");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("Regional-2");
+        // wraps left
+        await page.keyboard.press("ArrowRight");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("Regional-0");
+        // wraps Left
+        await page.keyboard.press("ArrowLeft");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("Regional-2");
+        await page.keyboard.press("ArrowLeft");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("Regional-1");
+        // next line
+        await page.keyboard.press("ArrowLeft");
+        await page.waitForChanges();
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("National-0");
+        // skips null data point
+        await page.keyboard.press("ArrowLeft");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("National-2");
+        // wraps to first line
+        await page.keyboard.press("ArrowLeft");
+        await page.waitForChanges();
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("Regional-0");
+        // wraps to last line
+        await page.keyboard.press("ArrowUp");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("National-0");
+        await page.keyboard.press("ArrowUp");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("Regional-0");
+    });
+    it("visibility toggle hides lines, data points are skipped by navigation", async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+    <wm-line-chart
+          label="Regional Job Trends"
+          description="View job trends for your region compared to national tends from the past 3 years with a 3 year projection"
+          x-axis-label="Year"
+          y-axis-label="Change Since 2020"
+          line-data='{"Regional": {"2020": 5, "2021": 10, "2022": 13}, "National": {"2020": 8, "2021": 12, "2022": 16}, "International": {"2020": 8, "2021": 12, "2022": 16}}'
+          visibility-toggles="true"
+        >
+        </wm-line-chart>
+  </main></body></html>`);
+        const allLineEls = await page.findAll("wm-line-chart >>> .line");
+        expect(allLineEls[0]).not.toHaveClass("hidden");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        // Enter key toggles button
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        expect(allLineEls[0]).toHaveClass("hidden");
+        // Space key toggles button
+        await page.keyboard.press("Space");
+        await page.waitForChanges();
+        expect(allLineEls[0]).not.toHaveClass("hidden");
+        await page.keyboard.press("Space");
+        await page.waitForChanges();
+        expect(allLineEls[0]).toHaveClass("hidden");
+        // tab focuses first visible data point
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        let activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("National-0");
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("International-0");
+        // data point nav skips hidden line
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("National-0");
+        // data point nav skips hidden line
+        await page.keyboard.press("ArrowUp");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("International-0");
+    });
+});

package/dist/collection/components/charts/wm-line-chart/wm-line-chart.js CHANGED Viewed

@@ -12,12 +12,12 @@ export class LineChart {
         this.displayedXIntervals = [];
         this.yIntervals = [];
         this.lineStyles = [
-            { color: "#8b86ca", icon: "f536" }, // lavender, triangle
-            { color: "#2e1b46", icon: "f12f" }, // midnight, circle
-            { color: "#0089e4", icon: "f763" }, // blue, square
-            { color: "#088000", icon: "f4ce" }, // forest, star
-            { color: "#ea8500", icon: "f70a" }, // orange, rhombus
-            { color: "#d54f41", icon: "f536" }, // red, upside down triangle
+            { color: "#8b86ca", icon: "f536" },
+            { color: "#2e1b46", icon: "f12f" },
+            { color: "#0089e4", icon: "f763" },
+            { color: "#088000", icon: "f4ce" },
+            { color: "#ea8500", icon: "f70a" },
+            { color: "#d54f41", icon: "f536" },
             { color: "#146ca9", icon: "f6ff" }, // blue, upside down triangle
         ];
         this.debouncedResize = debounce(async () => {
@@ -413,7 +413,7 @@ export class LineChart {
             popoverStyle = {
                 "--leftPosition": `0%`,
                 "--topPosition": "0%",
-                maxWidth: Math.min(this.el.clientWidth - 2, 400) + "px", // take up no more max-width than is visually available
+                maxWidth: Math.min(this.el.clientWidth - 2, 400) + "px",
                 transform: `translateX(calc(${displaceLeft}))`, // align with left edge of component
             };
         }
@@ -453,9 +453,9 @@ export class LineChart {
         return h("div", { class: "highlight", style: highlightStyle });
     }
     render() {
-        return (h(Host, { key: '9817eea8765cce513a0848cd222a6409c8f1f912', onBlur: () => this.resetDataPointFocus(), onMouseLeave: () => (this.popoverIndex = -1) }, h("div", { key: '60de41437bb425483be4b5a24fc2468c8e8f8d4e', class: "component-wrapper", role: "application", "aria-roledescription": chartMessages.interactiveChart, "aria-label": this.label, "aria-describedby": "chart-description" }, this.renderLegend(), h("div", { key: '2029ed03f09b8c133ee430f7b1d70c9dded326f3', class: "chart-wrapper" }, h("div", { key: '4e9123177b8c02cf1fef010d370b2b1a23b2015c', class: "chart-label --y-axis", style: { "--labelWidth": this.labelWidth } }, this.yAxisLabel, this.parsedUnits[1] && ` (${this.parsedUnits[1]})`), this.renderYIntervals(), h("div", { key: '3cbe51169818095cd830e7b8099d3a10980e3cf2', ref: (el) => (this.plotAreaEl = el), class: `plot-area ${this.hasPartialInterval ? "" : "right-border"}`, style: {
+        return (h(Host, { onBlur: () => this.resetDataPointFocus(), onMouseLeave: () => (this.popoverIndex = -1) }, h("div", { class: "component-wrapper", role: "application", "aria-roledescription": chartMessages.interactiveChart, "aria-label": this.label, "aria-describedby": "chart-description" }, this.renderLegend(), h("div", { class: "chart-wrapper" }, h("div", { class: "chart-label --y-axis", style: { "--labelWidth": this.labelWidth } }, this.yAxisLabel, this.parsedUnits[1] && ` (${this.parsedUnits[1]})`), this.renderYIntervals(), h("div", { ref: (el) => (this.plotAreaEl = el), class: `plot-area ${this.hasPartialInterval ? "" : "right-border"}`, style: {
                 "--backgroundSize": `${this.dataPointMatrix[0][this.xIntervals.indexOf(this.displayedXIntervals[1])].xPositionPercent}%`,
-            } }, this.highlightStart && this.renderHighlight(), this.renderData(), this.renderHoverAreas()), this.popoverIndex !== -1 && this.renderHoverIndicator(), this.popoverIndex !== -1 && this.renderPopover(), this.renderXIntervals(), h("div", { key: 'dad130dfb9063769dd36316cb060c90a8f1c8cb8', class: "chart-label --x-axis" }, this.xAxisLabel, this.parsedUnits[0] && ` (${this.parsedUnits[0]})`)), h("div", { key: 'bb4ffc7fbae6ab63e6f3e16c1d7e8a98c382e243', id: "chart-description", class: "sr-only" }, `${lineChartMessages.instructions} ${this.description}`), h("div", { key: 'de40d0eecd0db387912b45fb2b4576b37e3876aa', ref: (el) => (this.liveRegionEl = el), "aria-live": "polite", class: "sr-only" }, this.announcement))));
+            } }, this.highlightStart && this.renderHighlight(), this.renderData(), this.renderHoverAreas()), this.popoverIndex !== -1 && this.renderHoverIndicator(), this.popoverIndex !== -1 && this.renderPopover(), this.renderXIntervals(), h("div", { class: "chart-label --x-axis" }, this.xAxisLabel, this.parsedUnits[0] && ` (${this.parsedUnits[0]})`)), h("div", { id: "chart-description", class: "sr-only" }, `${lineChartMessages.instructions} ${this.description}`), h("div", { ref: (el) => (this.liveRegionEl = el), "aria-live": "polite", class: "sr-only" }, this.announcement))));
     }
     static get is() { return "wm-line-chart"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/charts/wm-line-chart/wm-line-chart.spec.js ADDED Viewed

@@ -0,0 +1,163 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { LineChart } from "./wm-line-chart";
+// import * as globalFuncs from "../../../global/functions";
+// jest.spyOn(globalFuncs, "generateId");
+// // @ts-ignore
+// globalFuncs.generateId.mockImplementation(() => "random-id");
+// mock ResizeObserver
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+}));
+async function createPageHelper() {
+    return await newSpecPage({
+        components: [LineChart],
+        html: `<wm-line-chart
+    label="Regional Job Trends"
+    description="View job trends for your region compared to national tends from the past 3 years with a 3 year projection"
+    x-axis-label="Year"
+    y-axis-label="Change Since 2020"
+    line-data='{"Regional": {"2020": 5, "2021": 10, "2022": 13, "2023": null, "2024": 20, "2025": 23, "2026": 25, "2027": 32, "2028": 35, "2029": 40, "2030": 42, "2031": 52, "2032": 54, "2033": 61}, "National": {"2020": 8, "2021": 13, "2022": 16, "2023": 21, "2024": 23, "2025": 26, "2026": 28, "2027": 29, "2028": 32, "2029": 35, "2030": 39, "2031": 49, "2032": 51, "2033": 58} }'
+    units="year,%"
+    show-deltas="true"
+    y-range="0,25,50,75,100"
+    highlight-start="2026"
+  >
+  </wm-line-chart>`,
+    });
+}
+describe("Line Chart", () => {
+    let page;
+    it("builds", async () => {
+        page = await createPageHelper();
+        expect(page.root).toMatchSnapshot();
+    });
+    it("has proper aria properties and attributes", async () => {
+        page = await createPageHelper();
+        const componentWrapperEl = await page.root.shadowRoot.querySelector(".component-wrapper");
+        expect(componentWrapperEl).toEqualAttribute("role", "application");
+        expect(componentWrapperEl).toEqualAttribute("aria-roledescription", "Interactive chart");
+        expect(componentWrapperEl).toEqualAttribute("aria-label", "Regional Job Trends");
+        expect(componentWrapperEl).toEqualAttribute("aria-describedby", "chart-description");
+        const firstPointEl = await page.root.shadowRoot.querySelector(".point");
+        expect(firstPointEl).toEqualAttribute("role", "img");
+    });
+    it("plots all non-null data points", async () => {
+        page = await newSpecPage({
+            components: [LineChart],
+            html: `<wm-line-chart
+      label="Regional Job Trends"
+      description="View job trends for your region compared to national tends from the past 3 years with a 3 year projection"
+      x-axis-label="Year"
+      y-axis-label="Change Since 2020"
+      line-data='{"Regional": {"2020": 5, "2021": 10, "2022": 13, "2023": 15, "2024": 20}, "National": {"2020": 8, "2021": 13, "2022": null, "2023": 21, "2024": 23}, "International": {"2020": 8, "2021": null, "2022": null, "2023": 21, "2024": 23} }'
+    >
+    </wm-line-chart>`,
+        });
+        const allPointEls = await page.root.shadowRoot.querySelectorAll(".point");
+        const allLineEls = await page.root.shadowRoot.querySelectorAll(".line");
+        const firstLinePointEls = await allLineEls[0].querySelectorAll(".point");
+        const firstLineLineEls = await allLineEls[0].querySelectorAll("line");
+        const secondLinePointEls = await allLineEls[1].querySelectorAll(".point");
+        const secondLineLineEls = await allLineEls[1].querySelectorAll("line");
+        const thirdLinePointEls = await allLineEls[2].querySelectorAll(".point");
+        const thirdLineLineEls = await allLineEls[2].querySelectorAll("line");
+        // each line has 5 intervals
+        // first line has 0 nulls
+        // second line has 1 null
+        // third line has 2 nulls
+        expect(allPointEls.length).toBe(12);
+        expect(firstLinePointEls.length).toBe(5);
+        expect(firstLineLineEls.length).toBe(4);
+        expect(secondLinePointEls.length).toBe(4);
+        expect(secondLineLineEls.length).toBe(2);
+        expect(thirdLinePointEls.length).toBe(3);
+        expect(thirdLineLineEls.length).toBe(1);
+    });
+    it("calculates deltas correctly", async () => {
+        const component = await new LineChart();
+        let previousPoint = {
+            lineLabel: "fake label",
+            xValue: "2020",
+            yValue: 999,
+            xPositionPercent: 0,
+            yPositionPercent: 10,
+            highlighted: false,
+        };
+        let currentPoint = {
+            lineLabel: "fake label",
+            xValue: "2021",
+            yValue: 999,
+            xPositionPercent: 20,
+            yPositionPercent: 12,
+            highlighted: false,
+        };
+        previousPoint.yValue = 10;
+        currentPoint.yValue = 12;
+        expect(component.calcDelta(currentPoint, previousPoint)).toBe("+20%");
+        previousPoint.yValue = 10;
+        currentPoint.yValue = 7;
+        expect(component.calcDelta(currentPoint, previousPoint)).toBe("-30%");
+        previousPoint.yValue = 12;
+        currentPoint.yValue = 10;
+        expect(component.calcDelta(currentPoint, previousPoint)).toBe("-16.67%");
+        previousPoint.yValue = 0;
+        currentPoint.yValue = 1;
+        expect(component.calcDelta(currentPoint, previousPoint)).toBe("-");
+        previousPoint.yValue = 17;
+        currentPoint.yValue = 0;
+        expect(component.calcDelta(currentPoint, previousPoint)).toBe("-100%");
+    });
+    it("uses label-width to set y-axis label width", async () => {
+        page = await newSpecPage({
+            components: [LineChart],
+            html: `<wm-line-chart
+      label="Regional Job Trends"
+      description="View job trends for your region compared to national tends from the past 3 years with a 3 year projection"
+      x-axis-label="Year"
+      y-axis-label="Change Since 2020"
+      line-data='{"Regional": {"2020": 5, "2021": 10, "2022": 13, "2023": null, "2024": 20, "2025": 23, "2026": 25, "2027": 32, "2028": 35, "2029": 40, "2030": 42, "2031": 52, "2032": 54, "2033": 61}, "National": {"2020": 8, "2021": 13, "2022": 16, "2023": 21, "2024": 23, "2025": 26, "2026": 28, "2027": 29, "2028": 32, "2029": 35, "2030": 39, "2031": 49, "2032": 51, "2033": 58} }'
+    >
+    </wm-line-chart>`,
+        });
+        let yAxisLabel = await page.root.shadowRoot.querySelector(".--y-axis");
+        expect(yAxisLabel.style.cssText).toBe("--labelWidth: 120px;");
+        page = await newSpecPage({
+            components: [LineChart],
+            html: `<wm-line-chart
+      label="Regional Job Trends"
+      description="View job trends for your region compared to national tends from the past 3 years with a 3 year projection"
+      x-axis-label="Year"
+      y-axis-label="Change Since 2020"
+      line-data='{"Regional": {"2020": 5, "2021": 10, "2022": 13, "2023": null, "2024": 20, "2025": 23, "2026": 25, "2027": 32, "2028": 35, "2029": 40, "2030": 42, "2031": 52, "2032": 54, "2033": 61}, "National": {"2020": 8, "2021": 13, "2022": 16, "2023": 21, "2024": 23, "2025": 26, "2026": 28, "2027": 29, "2028": 32, "2029": 35, "2030": 39, "2031": 49, "2032": 51, "2033": 58} }'
+      label-width="23%"
+    >
+    </wm-line-chart>`,
+        });
+        yAxisLabel = await page.root.shadowRoot.querySelector(".--y-axis");
+        expect(yAxisLabel.style.cssText).toBe("--labelWidth: 23%;");
+    });
+    it("sets custom y-range if provided, abbreviates y-axis numbers of thousands", async () => {
+        page = await newSpecPage({
+            components: [LineChart],
+            html: `<wm-line-chart
+      label="Regional Job Trends"
+      description="View job trends for your region compared to national tends from the past 3 years with a 3 year projection"
+      x-axis-label="Year"
+      y-axis-label="Change Since 2020"
+      line-data='{"Regional": {"2020": -10000, "2021": 10900, "2022": 40200} }'
+      y-range="-13300,0,100,10000,20945,30099,40520"
+    >
+    </wm-line-chart>`,
+        });
+        const yIntervals = await page.root.shadowRoot.querySelectorAll(".y-interval");
+        expect(yIntervals[0].textContent).toBe("40.5K");
+        expect(yIntervals[1].textContent).toBe("30.1K");
+        expect(yIntervals[2].textContent).toBe("20.9K");
+        expect(yIntervals[3].textContent).toBe("10K");
+        expect(yIntervals[4].textContent).toBe("100");
+        expect(yIntervals[5].textContent).toBe("0");
+        expect(yIntervals[6].textContent).toBe("-13.3K");
+    });
+});

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

@@ -90,7 +90,7 @@ export class ProgressIndicator {
         }
     }
     render() {
-        return (h(Host, { key: '16620db2087213bc753d2d757c7790a41670b1ab', onBlur: () => exitChart.call(this) }, h("div", { key: 'c676d6afdd78059bff7ae59f8ee275886e5bf22a', 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: '1b863341957baf0839d36be915d0aa632d03873f', id: `label-${this.uid}`, class: `label ${this.barLabelsWidth && this.mode === "bar" ? "custom-width" : ""}`, style: { "--custom-label-width": this.barLabelsWidth }, htmlFor: `graphic-${this.uid}` }, h("span", { key: 'be37ff1bc3863b7603944139fd78a0d7a6884e46', 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", { key: '8541969e643c69fd8e0090f69efd7c038ea1e2ea', class: this.isTabbing ? "user-is-tabbing" : "", onIntChartPopoverOpenChanged: (ev) => this.handlePopoverOpenChanged(ev) }), this.mode === "doughnut" ? renderCompletionMessage.call(this) : ""), renderInstructionsText()));
+        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 ${this.barLabelsWidth && this.mode === "bar" ? "custom-width" : ""}`, style: { "--custom-label-width": this.barLabelsWidth }, 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"; }

package/dist/collection/components/charts/wm-progress-monitor/wm-progress-monitor.e2e.js ADDED Viewed

@@ -0,0 +1,69 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { AxePuppeteer } from "@axe-core/puppeteer";
+describe("Progress Monitor", () => {
+    let page;
+    async function createPageHelper() {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+    <wm-progress-monitor id="first-monitor">
+      <wm-progress-indicator label="First Indicator">
+        <wm-progress-slice amount="5" popover-title="5/20 Completed" popover-text="Popover text" popover-button-text="Button text" legend="completed" </wm-progress-slice>
+        <wm-progress-slice amount="15" popover-title="15/20 Not completed" popover-text="Popover text" popover-button-text="Button text" legend="not completed" </wm-progress-slice>
+      </wm-progress-indicator>
+      <wm-progress-indicator label="Second Indicator">
+        <wm-progress-slice amount="3" popover-title="3/20 Completed" popover-text="Popover text" popover-button-text="Button text" legend="completed" </wm-progress-slice>
+        <wm-progress-slice amount="17" popover-title="17/20 Not completed" popover-text="Popover text" popover-button-text="Button text" legend="not completed" </wm-progress-slice>
+      </wm-progress-indicator>
+    </wm-progress-monitor>
+  </main></body></html>`);
+    }
+    it("passes Axe checks", async () => {
+        await createPageHelper();
+        const results = await new AxePuppeteer(page).analyze();
+        expect(results.violations.length).toBe(0);
+    });
+    // Monitor toggles Indicator modes
+    it("toggles indicator modes", async () => {
+        await createPageHelper();
+        const indicator = await page.find("wm-progress-indicator");
+        page.setViewport({ width: 500, height: 900 });
+        await page.waitForChanges();
+        let classes = indicator.shadowRoot.querySelector(".component-wrapper").getAttribute("class");
+        expect(classes).toContain("bar");
+        page.setViewport({ width: 700, height: 900 });
+        await page.waitForChanges();
+        classes = indicator.shadowRoot.querySelector(".component-wrapper").getAttribute("class");
+        expect(classes).toContain("doughnut");
+    });
+    /* can't get the popover to show
+    // Slices read x of y {{popover text}}
+    it("announces the slice to SR", async () => {
+      await createPageHelper();
+      const indicator = await page.find("wm-progress-indicator");
+      await page.keyboard.press("Tab");
+      await page.waitForChanges();
+      await page.keyboard.press("ArrowDown");
+      await page.waitForChanges();
+      const popover = indicator.shadowRoot.querySelector("priv-chart-popover");
+      const results = await page.compareScreenshot();
+      expect(results).toMatchScreenshot({ allowableMismatchedPixels: 100 });
+      popover.open = true;
+      const liveRegion = popover.querySelector(".live-region");
+      expect(liveRegion.textContent).toBe("");
+    });
+      */
+    /*** E2E ***/
+    // Doughnuts display in row, bars display in column
+    // Popovers automatically appear when navigating via keyboard
+    // Popovers emit wmProgressIndicatorButtonTriggered
+    // Tab navigates through indicators, no tab stop on Monitor
+    // Clicking a slice opens the popover
+    // Clicking outside or hitting escape closes the popover
+    /*** CAN'T BE TESTED? ***/
+    // Default breakpoint is the width of all children
+    // Breakpoint is customizable
+    //// including "px" makes it px
+    //// # less than 100 refers to # of charts
+    //// # greater than 100 refers to px
+});

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

@@ -59,7 +59,7 @@ export class ProgressMonitor {
         }))));
     }
     render() {
-        return (h(Host, { key: '6b654a2da62f9ca402ba16163e1d1497c5c99be8', class: this.mode === "doughnut" ? "row" : "column" }, this.modeInitialized && this.groupLegend && this.mode === "bar" && this.renderLegend(), this.modeInitialized && h("slot", { key: 'd3b70aa0e0c409bc0bcf2d6b20ad2b9c44c8eb11' })));
+        return (h(Host, { class: this.mode === "doughnut" ? "row" : "column" }, this.modeInitialized && this.groupLegend && this.mode === "bar" && this.renderLegend(), this.modeInitialized && h("slot", null)));
     }
     static get is() { return "wm-progress-monitor"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/charts/wm-progress-monitor/wm-progress-monitor.spec.js ADDED Viewed

@@ -0,0 +1,79 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { ProgressMonitor } from "./wm-progress-monitor";
+import { ProgressIndicator } from "./wm-progress-indicator";
+import { ProgressSlice } from "./wm-progress-slice";
+import * as globalFuncs from "../../../global/functions";
+jest.spyOn(globalFuncs, "generateId");
+// @ts-ignore
+globalFuncs.generateId.mockImplementation(() => "random-id");
+// mock ResizeObserver
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+}));
+async function createPageHelper() {
+    return await newSpecPage({
+        components: [ProgressMonitor, ProgressIndicator, ProgressSlice],
+        html: `<wm-progress-monitor id="first-monitor">
+      <wm-progress-indicator label="First Indicator">
+        <wm-progress-slice
+          amount="5"
+          popover-title="5/20 Completed"
+          popover-text="Popover text"
+          popover-button-text="Button text"
+          legend="completed"
+        ></wm-progress-slice>
+        <wm-progress-slice
+          amount="15"
+          popover-title="15/20 Not completed"
+          popover-text="Popover text"
+          popover-button-text="Button text"
+          legend="not completed"
+        ></wm-progress-slice>
+      </wm-progress-indicator>
+      <wm-progress-indicator label="Second Indicator">
+        <wm-progress-slice
+          amount="3"
+          popover-title="3/20 Completed"
+          popover-text="Popover text"
+          popover-button-text="Button text"
+          legend="completed"
+        ></wm-progress-slice>
+        <wm-progress-slice
+          amount="17"
+          popover-title="17/20 Not completed"
+          popover-text="Popover text"
+          popover-button-text="Button text"
+          legend="not completed"
+        ></wm-progress-slice>
+      </wm-progress-indicator>
+    </wm-progress-monitor>`,
+    });
+}
+describe("Progress Monitor", () => {
+    it("builds", async () => {
+        const page = await createPageHelper();
+        expect(page.root).toMatchSnapshot();
+    });
+    it("properties and attributes", async () => {
+        var _a;
+        const page = await createPageHelper();
+        const indicator = page.root.querySelector("wm-progress-indicator");
+        expect(indicator).toHaveProperty("label");
+        expect(indicator).toHaveProperty("subinfo");
+        expect(indicator).toHaveProperty("completionMessage");
+        expect(indicator).toHaveProperty("showLegend");
+        const indicatorComponentWrapper = (_a = indicator.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".component-wrapper");
+        expect(indicatorComponentWrapper).toEqualAttribute("role", "application");
+        expect(indicatorComponentWrapper).toEqualAttribute("aria-label", "First Indicator");
+        expect(indicatorComponentWrapper).toEqualAttribute("aria-roledescription", "Interactive chart");
+        expect(indicatorComponentWrapper).toEqualAttribute("aria-describedby", "chart-instructions");
+        const slice = page.root.querySelector("wm-progress-slice");
+        expect(slice).toHaveProperty("amount");
+        expect(slice).toHaveProperty("legend");
+        expect(slice).toHaveProperty("popoverTitle");
+        expect(slice).toHaveProperty("popoverText");
+        expect(slice).toHaveProperty("popoverButtonText");
+    });
+});

package/dist/collection/components/datepickers/priv-calendar/priv-calendar.js CHANGED Viewed

@@ -544,11 +544,11 @@ export class PrivCalendar {
             }), class: "header-btn arw-btn" }, h("span", { class: "mdi" }, "\uF142"))), h("div", { "aria-labelledby": "popup-title-year", role: "grid", class: "months" }, h("div", { role: "row", class: "month-row" }, calendar_months.slice(0, 3).map((month, index) => this.renderMonth(month, index))), h("div", { role: "row", class: "month-row" }, calendar_months.slice(3, 6).map((month, index) => this.renderMonth(month, index + 3))), h("div", { role: "row", class: "month-row" }, calendar_months.slice(6, 9).map((month, index) => this.renderMonth(month, index + 6))), h("div", { role: "row", class: "month-row" }, calendar_months.slice(9).map((month, index) => this.renderMonth(month, index + 9))))));
     }
     render() {
-        return (h(Host, { key: 'bf3b27c085d62d04e59c469103af514a5652ca39', onMouseOut: (ev) => {
+        return (h(Host, { onMouseOut: (ev) => {
                 // @ts-ignore
                 if (!this.el.parentElement.contains(ev.toElement))
                     this.outOfCal.emit();
-            }, role: "application", "aria-describedby": "application" }, this.view === "day" ? this.renderDayView() : this.renderMonthView(), h("div", { key: '3433d2109b066f3e3446cc6d8c486a5e303d6939', id: "application", class: "sr-only" }, this.calName, this.calInstructions)));
+            }, role: "application", "aria-describedby": "application" }, this.view === "day" ? this.renderDayView() : this.renderMonthView(), h("div", { id: "application", class: "sr-only" }, this.calName, this.calInstructions)));
     }
     static get is() { return "priv-calendar"; }
     static get originalStyleUrls() {