@watermarkinsights/ripple 5.3.0-11 → 5.3.0-13

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

@@ -351,12 +351,16 @@
 .popup-wrapper .day-view .date-grid .date-cell.in-range.preview-end, .popup-wrapper .day-view .date-grid .date-cell.in-range.preview-start {
   background-image: radial-gradient(var(--wmcolor-datepicker-range-background-hover) 17px, var(--wmcolor-calendar-day-border-hover) 18px, var(--wmcolor-calendar-day-border-hover) 20px, transparent 21px), var(--range-background-hover);
 }
-.popup-wrapper .day-view .date-grid .date-cell.in-range:first-of-type:not(.preview-start, .preview-end, .range-start, .range-end), .popup-wrapper .day-view .date-grid .date-cell.in-range:first-child:not(.preview-start, .preview-end, .range-start, .range-end) {
+.popup-wrapper .day-view .date-grid .date-cell.in-range.preview-end:focus-visible, .popup-wrapper .day-view .date-grid .date-cell.in-range.preview-start:focus-visible {
+  outline: none;
+  border: none;
+}
+.popup-wrapper .day-view .date-grid .date-cell.in-range:first-of-type:not(.preview-start, .preview-end, .range-start, .range-end), .popup-wrapper .day-view .date-grid .date-cell.in-range:first-child:not(.preview-start, .preview-end, .range-start, .range-end), .popup-wrapper .day-view .date-grid .date-cell.in-range.first-of-month:not(.preview-start, .preview-end, .range-start, .range-end) {
   background-image: radial-gradient(var(--wmcolor-datepicker-range-background-selected) 16px, transparent 17px), var(--range-background-selected);
   background-position: -5px center, center left 17px;
   background-repeat: no-repeat;
 }
-.popup-wrapper .day-view .date-grid .date-cell.in-range:first-of-type:not(.preview-start, .preview-end, .range-start, .range-end):hover, .popup-wrapper .day-view .date-grid .date-cell.in-range:first-child:not(.preview-start, .preview-end, .range-start, .range-end):hover {
+.popup-wrapper .day-view .date-grid .date-cell.in-range:first-of-type:not(.preview-start, .preview-end, .range-start, .range-end):hover, .popup-wrapper .day-view .date-grid .date-cell.in-range:first-child:not(.preview-start, .preview-end, .range-start, .range-end):hover, .popup-wrapper .day-view .date-grid .date-cell.in-range.first-of-month:not(.preview-start, .preview-end, .range-start, .range-end):hover {
   background-image: radial-gradient(#dbd9ef 20px, transparent 21px), radial-gradient(var(--wmcolor-datepicker-range-background-selected) 16px, transparent 17px), var(--range-background-selected);
   background-position: center, -5px center, center left 17px;
   background-repeat: no-repeat;
@@ -394,6 +398,15 @@
   font-weight: 600;
   color: var(--wmcolor-datepicker-day-text-selected);
 }
+.popup-wrapper .day-view .date-grid .date-cell.range-start:focus-visible, .popup-wrapper .day-view .date-grid .date-cell.range-end:focus-visible {
+  outline: 3px solid var(--wmcolor-interactive-focus);
+  outline-offset: -2px;
+  border: none;
+  z-index: 11;
+}
+.popup-wrapper .day-view .date-grid .date-cell.range-start:focus-visible[aria-selected=true], .popup-wrapper .day-view .date-grid .date-cell.range-end:focus-visible[aria-selected=true] {
+  outline-offset: 2px;
+}
 .popup-wrapper .day-view .date-grid .date-cell.range-start {
   background-image: var(--range-start-svg);
   padding-inline-end: 2px;
@@ -470,26 +483,19 @@
   background-color: var(--wmcolor-datepicker-month-background-selected);
   color: var(--wmcolor-datepicker-month-text-selected);
 }
-.popup-wrapper .month.focused:focus-visible {
-  outline: 3px solid var(--wmcolor-interactive-focus);
-  outline-offset: -2px;
-  border: none;
-  z-index: 11;
-}
-.popup-wrapper .month.focused:focus-visible[aria-selected=true] {
-  outline-offset: 2px;
-}
-.popup-wrapper button:focus-visible,
-.popup-wrapper .title-box:focus-visible,
-.popup-wrapper .date-cell:focus-visible {
+.popup-wrapper button:focus-visible:not(.preview-start, .preview-end),
+.popup-wrapper .title-box:focus-visible:not(.preview-start, .preview-end),
+.popup-wrapper .month.focused:focus-visible:not(.preview-start, .preview-end),
+.popup-wrapper .date-cell:focus-visible:not(.preview-start, .preview-end) {
   outline: 3px solid var(--wmcolor-interactive-focus);
   outline-offset: -2px;
   border: none;
   z-index: 11;
 }
-.popup-wrapper button:focus-visible[aria-selected=true],
-.popup-wrapper .title-box:focus-visible[aria-selected=true],
-.popup-wrapper .date-cell:focus-visible[aria-selected=true] {
+.popup-wrapper button:focus-visible:not(.preview-start, .preview-end)[aria-selected=true],
+.popup-wrapper .title-box:focus-visible:not(.preview-start, .preview-end)[aria-selected=true],
+.popup-wrapper .month.focused:focus-visible:not(.preview-start, .preview-end)[aria-selected=true],
+.popup-wrapper .date-cell:focus-visible:not(.preview-start, .preview-end)[aria-selected=true] {
   outline-offset: 2px;
 }
 

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

@@ -111,7 +111,7 @@ export class PrivCalendar {
             const monthOfDate = dateFind.month.asInt(date);
             const dayOfDate = dateFind.day.asInt(date);
             const yearOfDate = dateFind.year.asInt(date);
-            const isStartDate = this.startDate && this.startDate === date;
+            const isStartDate = eitherStart && eitherStart === date;
             let selected = isStartDate ? "true" : "false";
             const classesArr = ["date-cell"];
             const isFocused = date === this.focusDate;
@@ -119,7 +119,7 @@ export class PrivCalendar {
             if (isToday)
                 classesArr.push("today");
             if (this.calType === "range") {
-                const isEndDate = eitherStart && this.endDate && this.endDate === date && eitherStart < this.endDate;
+                const isEndDate = eitherStart && eitherEnd && eitherEnd === date && eitherStart < eitherEnd;
                 selected = isEndDate ? "true" : selected;
                 const isFirstOfMonth = dayOfDate === 1;
                 const isLastOfMonth = dayOfDate === getMonthLength(monthOfDate, yearOfDate);
@@ -133,7 +133,7 @@ export class PrivCalendar {
                 if (isLastOfMonth)
                     classesArr.push("last-of-month");
                 if (isStartDate) {
-                    if (isInRangePreview && !isEndDate && this.hoverDate && this.hoverDate < this.startDate) {
+                    if (isInRangePreview && !isEndDate && this.hoverDate && this.hoverDate < eitherStart) {
                         // invert the arrow direction if user mouses over a prior date
                         classesArr.push("range-end");
                     }
@@ -360,42 +360,42 @@ export class PrivCalendar {
     }
     isInRange(date) {
         if (this.otherCalEl) {
-            const _startDate = this.startDate || this.otherCalEl.startDate;
-            const _endDate = this.endDate || this.otherCalEl.endDate;
-            if (_startDate && _endDate) {
+            const eitherStart = this.startDate || this.otherCalEl.startDate;
+            const eitherEnd = this.endDate || this.otherCalEl.endDate;
+            if (eitherStart && eitherEnd) {
                 // if both dates exist the range is shown
-                return _startDate <= date && date <= _endDate;
+                return eitherStart <= date && date <= eitherEnd;
             }
         }
         return false;
     }
     isInRangePreview(date) {
         if (this.otherCalEl) {
-            const _startDate = this.startDate || this.otherCalEl.startDate;
-            const _endDate = this.endDate || this.otherCalEl.endDate;
+            const eitherStart = this.startDate || this.otherCalEl.startDate;
+            const eitherEnd = this.endDate || this.otherCalEl.endDate;
             // no preview if there's an existing range
-            if (_startDate && _endDate)
+            if (eitherStart && eitherEnd)
                 return false;
-            if (_startDate && this.hoverDate) {
+            if (eitherStart && this.hoverDate) {
                 // if only startDate exists, the hovered date functions as the other end of the range
-                if (this.hoverDate > _startDate) {
-                    return _startDate <= date && date <= this.hoverDate;
+                if (this.hoverDate > eitherStart) {
+                    return eitherStart <= date && date <= this.hoverDate;
                 }
-                else if (this.hoverDate < _startDate) {
+                else if (this.hoverDate < eitherStart) {
                     // user is mousing over a date prior to the start date
                     // start date considered as end of range
-                    return this.hoverDate <= date && date <= _startDate;
+                    return this.hoverDate <= date && date <= eitherStart;
                 } // if neither < or > then it's the same date and should return false
             }
-            else if (_endDate && this.hoverDate) {
+            else if (eitherEnd && this.hoverDate) {
                 // if only endDate exists, the hovered date functions as the other end of the range
-                if (this.hoverDate < _endDate) {
-                    return this.hoverDate <= date && date <= _endDate;
+                if (this.hoverDate < eitherEnd) {
+                    return this.hoverDate <= date && date <= eitherEnd;
                 }
-                else if (this.hoverDate > _endDate) {
+                else if (this.hoverDate > eitherEnd) {
                     // user is mousing over a date later than the end date
                     // end date considered as beggining of range
-                    return _endDate <= date && date <= this.hoverDate;
+                    return eitherEnd <= date && date <= this.hoverDate;
                 }
             }
         }
@@ -540,11 +540,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: 'e1269b7069d6b870cd9e873a046b24ddff6ac6cb', 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: '3cf3a1b225b865ae1f02367ac318fb29b70a3acd', 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");
+    });
+});