@watermarkinsights/ripple 5.6.0-2 → 5.6.0-4

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

@@ -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

@@ -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.css

@@ -87,6 +87,9 @@
   gap: 2px;
   margin-bottom: 8px;
 }
+:host .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .values.none {
+  margin: 0;
+}
 :host .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .stacked-bar-segments-wrapper {
   display: flex;
   gap: 2px;
@@ -262,7 +265,7 @@
 }
 :host .component-wrapper.bar3 .chart-wrapper {
   position: relative;
-  height: 100px;
+  height: 116px;
 }
 :host .component-wrapper.bar3 .chart-wrapper .inner-stacked-bar-wrapper {
   position: absolute;
@@ -276,22 +279,24 @@
   position: absolute;
   top: 0;
   left: 0;
-  height: 90px;
-  width: 100%;
+  width: calc(100% + 4px);
   overflow: visible;
-  transform: translateY(90px);
+  transform: translate(-4px, 96px);
 }
 :host .component-wrapper.bar3 .chart-wrapper .axis line {
   stroke: var(--wmcolor-chart-gridline);
   stroke-width: 1px;
 }
-:host .component-wrapper.bar3 .chart-wrapper .axis text {
-  transform: translate(4px, 24px);
-  text-anchor: middle;
-}
 :host .component-wrapper.bar3 .hidden-values-warning {
   margin-top: 1.25rem;
 }
+:host .component-wrapper.bar3 .bar3-axis-label {
+  position: absolute;
+  bottom: 0px;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
 :host .component-wrapper.bar6, :host .component-wrapper.bar7 {
   --chartPadding: 48px;
   align-items: flex-start;

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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() {

package/dist/collection/components/datepickers/priv-calendar/priv-calendar.spec.js

@@ -0,0 +1,89 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { PrivCalendar } from "./priv-calendar";
+import { dateFind, getMonthLength } from "../../../global/functions";
+describe("priv-calendar", () => {
+    // ts erroneously prints a warning (unused var)
+    // @ts-ignore
+    let page, privCalendar;
+    beforeEach(async () => {
+        page = await newSpecPage({
+            components: [PrivCalendar],
+            html: "<priv-calendar></priv-calendar>",
+        });
+        privCalendar = page.root;
+    });
+    it("gets the number of days in a month", async () => {
+        expect(getMonthLength(1, 2021)).toBe(31);
+        expect(getMonthLength(2, 2021)).toBe(28);
+        expect(getMonthLength(2, 2020)).toBe(29);
+        expect(getMonthLength(11, 2067)).toBe(30);
+        expect(getMonthLength(13, 2)).toBe(31); // returns 31 by default
+    });
+    it("removes leading zeroes", async () => {
+        const pd = new PrivCalendar();
+        expect(pd.removeZeroes("12")).toBe(12);
+        expect(pd.removeZeroes("01")).toBe(1);
+        expect(pd.removeZeroes("0001312")).toBe(1312);
+        // note that the function only works for integers
+        // the following would fail
+        // expect(pd.removeZeroes("3.1415")).toBe(3.1415);
+    });
+    it("finds the first weekday of the month", async () => {
+        // 1 = Sunday, 7 = Saturday
+        const pd = new PrivCalendar();
+        expect(pd.getMonthFirstDay(2, 2021)).toBe(2); // Mon
+        expect(pd.getMonthFirstDay(7, 1986)).toBe(3); // Tue
+        expect(pd.getMonthFirstDay(12, 2030)).toBe(1); // Sun
+    });
+    it("generates the calendar dates", async () => {
+        const pd = new PrivCalendar();
+        expect(pd.getCalendarDates("2021-08-14")).toMatchSnapshot();
+    });
+    //  dateFind helper
+    it("gets the right dates", async () => {
+        expect(dateFind.year.asString("2000-03-23")).toStrictEqual("2000");
+        expect(dateFind.year.asInt("2000-03-23")).toStrictEqual(2000);
+        expect(dateFind.month.asString("2000-03-23")).toStrictEqual("03");
+        expect(dateFind.month.asInt("2000-03-23")).toStrictEqual(3);
+        expect(dateFind.day.asString("2000-03-23")).toStrictEqual("23");
+        expect(dateFind.day.asInt("2000-03-23")).toStrictEqual(23);
+        let res;
+        res = dateFind.year.decrease("2000-03-23", 2);
+        expect(res).toStrictEqual("1998-03-23");
+        res = dateFind.year.increase("1998-03-23", 2);
+        expect(res).toStrictEqual("2000-03-23");
+        res = dateFind.month.decrease("2000-03-23", 3);
+        expect(res).toStrictEqual("1999-12-23");
+        res = dateFind.month.increase("2000-11-23", 2);
+        expect(res).toStrictEqual("2001-01-23");
+        res = dateFind.month.increase("2024-10-01", 1);
+        expect(res).toStrictEqual("2024-11-01");
+        res = dateFind.day.decrease("2024-03-03", 3);
+        expect(res).toStrictEqual("2024-02-29");
+        res = dateFind.day.increase("2024-09-29", 5);
+        expect(res).toStrictEqual("2024-10-04");
+    });
+    // _focus accessor
+    it("gets the right focus dates", async () => {
+        const c = new PrivCalendar();
+        c.focusDate = "2000-01-02";
+        expect(c._focus.year.asString()).toStrictEqual("2000");
+        expect(c._focus.year.asInt()).toStrictEqual(2000);
+        expect(c._focus.month.asString()).toStrictEqual("01");
+        expect(c._focus.month.asInt()).toStrictEqual(1);
+        expect(c._focus.day.asString()).toStrictEqual("02");
+        expect(c._focus.day.asInt()).toStrictEqual(2);
+        c._focus.year.decrease(2);
+        expect(c.focusDate).toStrictEqual("1998-01-02");
+        c._focus.year.increase(2);
+        expect(c.focusDate).toStrictEqual("2000-01-02");
+        c._focus.month.decrease(2);
+        expect(c.focusDate).toStrictEqual("1999-11-02");
+        c._focus.month.increase(2);
+        expect(c.focusDate).toStrictEqual("2000-01-02");
+        c._focus.day.decrease(2);
+        expect(c.focusDate).toStrictEqual("1999-12-31");
+        c._focus.day.increase(2);
+        expect(c.focusDate).toStrictEqual("2000-01-02");
+    });
+});