@watermarkinsights/ripple 5.7.0-8 → 5.7.0-9

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");
+    });
+});

package/dist/collection/components/datepickers/wm-date-range.e2e.js

@@ -0,0 +1,443 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { AxePuppeteer } from "@axe-core/puppeteer";
+describe("wm-date-range", () => {
+    //@ts-ignore
+    let page, component, startInput, endInput, btn, popup, popupTitleDay;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <wm-date-range id="dr" label="label"></wm-date-range>
+      </main></body></html>`);
+        component = await page.find("wm-date-range");
+        [startInput, endInput] = await page.findAll("wm-date-range >>> input");
+        btn = await page.find("wm-date-range >>> #toggle");
+        popup = await page.find("wm-date-range >>> #popup");
+        popupTitleDay = await page.find("wm-date-range >>> #popup-title-month");
+    });
+    it("passes Axe checks", async () => {
+        const results = await new AxePuppeteer(page).analyze();
+        expect(results.violations.length).toBe(0);
+    });
+    // BUTTON
+    // Opening and closing the date-range
+    it("opens at today's date by default", async () => {
+        const popup = await page.find("wm-date-range >>> .popup");
+        const today = new Date();
+        const year = today.getUTCFullYear();
+        const month = (today.getUTCMonth() + 1).toString().padStart(2, "0");
+        const day = today.getUTCDate().toString();
+        const dateTable = await popup.find("[role='grid']");
+        // await page.waitForChanges();
+        const selDate = await dateTable.find("[aria-selected='true']");
+        expect(selDate).toEqualAttribute("data-year", year);
+        expect(selDate).toEqualAttribute("data-month", month);
+        expect(selDate.textContent).toBe(day);
+    });
+    /*
+    it("opens at the date in the input if there is one", async () => {
+      const startInput = await page.find("wm-date-range >>> input");
+      const popup = await page.find("wm-date-range >>> .popup");
+  
+      await startInput.type("02/01/2030");
+      await component.setProperty("calendarDate", "2030-02-01");
+      await page.waitForChanges();
+      await page.keyboard.press("Tab");
+      await page.keyboard.press("Enter");
+      await page.waitForChanges();
+      const dateTable = await popup.find("[role='grid']");
+  
+      const selDate = await dateTable.find("[aria-selected='true']");
+      expect(selDate).toEqualAttribute("data-year", "2030");
+      expect(selDate).toEqualAttribute("data-month", "02");
+      expect(selDate.textContent).toBe("1");
+    });
+  
+    it("Closes the popup when user triggers the calendar button", async () => {
+      const popup = await page.find("wm-date-range >>> .popup");
+  
+      await page.keyboard.press("Tab"); // in input
+      await page.keyboard.press("Tab"); // on btn
+      await page.keyboard.press("Enter");
+      await page.waitForChanges();
+      expect(popup).toHaveClass("open");
+      await page.keyboard.press("Escape");
+      await page.waitForChanges();
+      expect(popup).not.toHaveClass("open");
+    });
+  
+    // POPUP
+    it("closes the calendar popup when the user presses ESCAPE", async () => {
+      await startInput.type("02/03/2019");
+      await component.setProperty("calendarDate", "2019-02-03");
+      await page.waitForChanges();
+      await page.keyboard.press("Tab");
+      await page.keyboard.press("Enter");
+      await page.waitForChanges();
+      await page.keyboard.press("Escape");
+      await page.waitForChanges();
+      expect(popup).not.toHaveClass("open");
+    });
+  
+    it("shows the next month on PAGE DOWN and shows the previous month on PAGE UP", async () => {
+      await startInput.type("02/03/2019");
+      await component.setProperty("calendarDate", "2019-02-03");
+      await page.waitForChanges();
+      await page.keyboard.press("Tab");
+      await page.keyboard.press("Enter");
+      await page.waitForChanges();
+      await page.keyboard.press("PageDown");
+      await page.waitForChanges();
+  
+      expect(popupTitleDay.textContent).toBe("March 2019");
+  
+      let activeElId = await page.evaluate(() => document.activeElement!.shadowRoot!.activeElement!.id);
+      expect(activeElId).toEqual("cell-20190303");
+  
+      await page.keyboard.press("PageUp");
+      await page.waitForChanges();
+      await page.keyboard.press("PageUp");
+      await page.waitForChanges();
+      await page.keyboard.press("PageUp");
+      await page.waitForChanges();
+  
+      activeElId = await page.evaluate(() => document.activeElement!.shadowRoot!.activeElement!.id);
+      expect(activeElId).toEqual("cell-20181203");
+    });
+  
+    it("handles HOME and END keys", async () => {
+      await startInput.type("02/15/2020");
+      await component.setProperty("calendarDate", "2020-02-15");
+      await page.waitForChanges();
+      await page.keyboard.press("Tab");
+      await page.keyboard.press("Enter");
+      await page.waitForChanges();
+      await page.keyboard.press("Home");
+      await page.waitForChanges();
+      const firstDayOfMonth = await page.evaluate(() => document.activeElement!.shadowRoot!.activeElement!.id);
+      expect(firstDayOfMonth).toEqual("cell-20200201");
+  
+      await page.keyboard.press("End");
+      await page.waitForChanges();
+      const lastDayOfMonth = await page.evaluate(() => document.activeElement!.shadowRoot!.activeElement!.id);
+      expect(lastDayOfMonth).toEqual("cell-20200229"); // 2020 is a leap year
+    });
+  
+    it("navigates the calendar with keyboard (day view)", async () => {
+      // left/right: -1 / +1 in the row
+      // up/down
+  
+      await startInput.type("08/15/2024");
+      await component.setProperty("calendarDate", "2024-08-15");
+      await page.keyboard.press("Tab"); // on the toggle popup btn
+      await page.waitForChanges();
+      await page.keyboard.press("Enter"); // open popup
+      await page.waitForChanges();
+  
+      await page.keyboard.press("ArrowLeft");
+      await page.waitForChanges();
+      let focusedCell = await popup.find("[role='gridcell'][tabindex='0']");
+      await page.waitForChanges();
+      expect(focusedCell).toEqualAttribute("id", "cell-20240814");
+  
+      await page.keyboard.press("ArrowUp");
+      await page.waitForChanges();
+      focusedCell = await popup.find("[role='gridcell'][tabindex='0']");
+      expect(focusedCell).toEqualAttribute("id", "cell-20240807");
+  
+      await page.keyboard.press("ArrowRight");
+      await page.waitForChanges();
+      focusedCell = await popup.find("[role='gridcell'][tabindex='0']");
+      expect(focusedCell).toEqualAttribute("id", "cell-20240808");
+  
+      await page.keyboard.press("ArrowDown");
+      await page.waitForChanges();
+      focusedCell = await popup.find("[role='gridcell'][tabindex='0']");
+      expect(focusedCell).toEqualAttribute("id", "cell-20240815");
+    });
+  
+    it("navigates the calendar with keyboard (month view)", async () => {
+      await startInput.type("08/15/2024");
+      await component.setProperty("calendarDate", "2024-08-15");
+      await page.keyboard.press("Tab"); // on the toggle popup btn
+      await page.waitForChanges();
+      await page.keyboard.press("Enter"); // open popup
+      await page.keyboard.down("Shift");
+      await page.waitForChanges();
+      await page.keyboard.press("Tab"); // next btn
+      await page.waitForChanges();
+      await page.keyboard.press("Tab"); // popup-title (month + year)
+      await page.waitForChanges();
+      await page.keyboard.press("Enter");
+      await page.waitForChanges();
+      await page.keyboard.up("Shift");
+      await page.waitForChanges();
+  
+      await page.keyboard.press("ArrowLeft");
+      await page.waitForChanges();
+      let focusedCell = await popup.find("[role='gridcell'][tabindex='0']");
+      await page.waitForChanges();
+      expect(focusedCell).toEqualAttribute("id", "month-6"); // month is july (7), 0-indexed
+  
+      await page.keyboard.press("ArrowUp");
+      await page.waitForChanges();
+      focusedCell = await popup.find("[role='gridcell'][tabindex='0']");
+      expect(focusedCell).toEqualAttribute("id", "month-3");
+  
+      await page.keyboard.press("ArrowRight");
+      await page.waitForChanges();
+      focusedCell = await popup.find("[role='gridcell'][tabindex='0']");
+      expect(focusedCell).toEqualAttribute("id", "month-4");
+  
+      await page.keyboard.press("ArrowDown");
+      await page.waitForChanges();
+      focusedCell = await popup.find("[role='gridcell'][tabindex='0']");
+      expect(focusedCell).toEqualAttribute("id", "month-7");
+    });
+  
+    // it("goes to the year view when the month name is clicked", async () => {
+    //  // (i.e. allows selection of a month)
+    // });
+    it("goes to the previous/next month when the arrow button is triggered in day view", async () => {
+      await startInput.type("11/29/1999");
+      await component.setProperty("calendarDate", "1999-11-29");
+      await page.keyboard.press("Tab"); // on the toggle popup btn
+      await page.waitForChanges();
+      await page.keyboard.press("Enter"); // open popup
+      await page.waitForChanges();
+      await page.keyboard.down("Shift");
+      await page.waitForChanges();
+      await page.keyboard.press("Tab"); // next btn
+      await page.waitForChanges();
+      await page.keyboard.press("Tab"); // popup-title (month + year)
+      await page.waitForChanges();
+      await page.keyboard.press("Tab"); // prev btn
+      await page.waitForChanges();
+      await page.keyboard.up("Shift");
+      await page.waitForChanges();
+      await page.keyboard.press("Enter"); // press prev btn
+      await page.waitForChanges();
+  
+      expect(popup).toHaveClasses(["open", "day-view"]);
+      expect(popupTitleDay.textContent).toBe("October 1999");
+  
+      await page.keyboard.press("Tab"); // popup title btn
+      await page.keyboard.press("Tab"); // next btn
+      await page.keyboard.press("Enter"); // press next btn
+      await page.waitForChanges();
+      await page.keyboard.press("Enter"); // press next btn
+      await page.waitForChanges();
+      expect(popupTitleDay.textContent).toBe("December 1999");
+    });
+  
+    it("goes to the previous/next year when the arrow button is clicked in month view", async () => {
+      await startInput.type("11/29/1999");
+      await component.setProperty("calendarDate", "1999-11-29");
+      await page.waitForChanges();
+      await page.keyboard.press("Tab"); // on the toggle popup btn
+      await page.waitForChanges();
+      await page.keyboard.press("Enter"); // open popup
+      await page.waitForChanges();
+      await page.keyboard.down("Shift");
+      await page.keyboard.press("Tab"); // next btn
+      await page.waitForChanges();
+      await page.keyboard.press("Tab"); // month view btn
+      await page.waitForChanges();
+      await page.keyboard.up("Shift");
+      await page.waitForChanges();
+      await page.keyboard.press("Enter"); // press month view btn
+      await page.waitForChanges();
+  
+      expect(popup).toHaveClasses(["open", "month-view"]);
+      const title = await popup.find("#popup-title-year");
+      expect(title.textContent).toBe("1999");
+  
+      await page.keyboard.down("Shift");
+      await page.keyboard.press("Tab"); // next btn
+      await page.keyboard.up("Shift");
+      await page.keyboard.press("Enter"); // press next btn
+      await page.waitForChanges();
+      expect(title.textContent).toBe("2000");
+  
+      await page.keyboard.down("Shift");
+      await page.keyboard.press("Tab"); // year btn
+      await page.keyboard.down("Shift");
+      await page.keyboard.press("Tab"); // prev btn
+      await page.keyboard.up("Shift");
+      await page.keyboard.press("Enter"); // press prev btn
+      await page.waitForChanges();
+      expect(title.textContent).toBe("1999");
+  
+      await page.keyboard.press("Enter"); // press prev btn
+      await page.waitForChanges();
+  
+      await page.keyboard.press("Enter"); // press prev btn
+      await page.waitForChanges();
+      expect(title.textContent).toBe("1997");
+    });
+  
+    it("has the aria attributes related to the popup", async () => {
+      // NB "If the element with the aria-expanded attribute controls the expansion of another grouping container
+      // that is not 'owned by' the element, the author SHOULD reference the container by using the aria-controls attribute."
+      // src: https://www.w3.org/TR/wai-aria-1.1/#aria-expanded
+  
+      expect(btn).toHaveAttribute("aria-expanded");
+  
+      // Not sure is aria-haspopup is necessary. If it is present the popup should have a role
+      // if that role is grid (the only role that seems to correspond) then the cells must have
+      // a role of gridcell
+      // https://www.w3.org/TR/wai-aria/#aria-haspopup
+      // expect(btn).toHaveAttribute("aria-haspopup");
+  
+      //Removed aria-controls since the popup comes immediately after the aria-expanded controller:
+      //https://www.heydonworks.com/article/aria-controls-is-poop
+    });
+  
+    it("toggles aria-expanded attribute", async () => {
+      expect(btn).toEqualAttribute("aria-expanded", "false");
+      await page.keyboard.press("Tab");
+      await page.keyboard.press("Tab");
+      await page.keyboard.press("Enter");
+      await page.waitForChanges();
+      expect(btn).toEqualAttribute("aria-expanded", "true");
+    });
+  
+    it("properly fills the-label on table cells", async () => {
+      // screen reader should read "Thursday, May 10 2018" on focus
+      // screen reader should read "Thursday, May 10 2018, selected" on select
+      await startInput.type("05/10/2018");
+      await component.setProperty("calendarDate", "2018-05-10");
+      await page.waitForChanges();
+      await page.keyboard.press("Tab");
+      await page.waitForChanges();
+      await page.keyboard.press("Enter");
+      await page.waitForChanges();
+      const focusedCell = await popup.find("[role='gridcell'][tabindex='0']");
+      await page.waitForChanges();
+      // day of the week is read by sr bcse it's the table column
+      expect(focusedCell).toEqualAttribute("aria-label", "Thursday, May 10, 2018");
+  
+      // screen reader should read "Thursday, May 10 2018, selected" on select
+      await page.keyboard.press("Enter");
+      await page.waitForChanges();
+      const selCell = await popup.find("[aria-selected='true']");
+      // day of the week is read by sr bcse it's the table column
+      expect(selCell).toEqualAttribute("aria-label", "Thursday, May 10, 2018");
+    });
+  
+    it("aligns dates properly", async () => {
+      // -> check that both 01/01/1999 and 12/31/2100 are in the Friday column
+      // couldn't figure this one out...
+    });
+  
+    it("emits event on input blur", async () => {
+      page = await newE2EPage();
+      await page.setContent(
+        `<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+        <wm-date-range id="dr" label="label"></wm-date-range>
+        <div id="indicator">no event heard</div>
+        </main></body></html>`
+      );
+      component = await page.find("wm-date-range");
+      startInput = await page.find("wm-date-range >>> input");
+      await page.waitForChanges();
+  
+      await page.evaluate(async () => {
+        const indicator = document.querySelector("#indicator");
+        await document.addEventListener("wmDate-rangeInputBlurred", () => (indicator!.textContent = "event heard"));
+      });
+      await page.waitForChanges;
+  
+      const indicator = await page.find("#indicator");
+      expect(indicator.textContent).toBe("no event heard");
+  
+      await startInput.type("05/10/2018");
+      await page.keyboard.press("Tab");
+      await page.waitForChanges();
+  
+      expect(indicator.textContent).toBe("event heard");
+    });
+  
+    it("emits event on change", async () => {
+      page = await newE2EPage();
+      await page.setContent(
+        `<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+        <wm-date-range id="dr" label="label"></wm-date-range>
+        <div id="indicator">events heard: 0</div>
+        </main></body></html>`
+      );
+      component = await page.find("wm-date-range");
+      startInput = await page.find("wm-date-range >>> input");
+      await page.waitForChanges();
+  
+      await page.evaluate(async () => {
+        const indicator = document.querySelector("#indicator")!;
+        await document
+          .querySelector("wm-date-range")!
+          .addEventListener(
+            "change",
+            () =>
+              (indicator.textContent =
+                indicator.textContent!.slice(0, -1) + (parseInt(indicator.textContent!.slice(-1)) + 1))
+          );
+      });
+      await page.waitForChanges;
+  
+      const indicator = await page.find("#indicator");
+      expect(indicator.textContent).toBe("events heard: 0");
+  
+      // user types date
+      await startInput.type("05/10/2018");
+      await page.keyboard.press("Tab");
+      await page.waitForChanges();
+  
+      expect(indicator.textContent).toBe("events heard: 1");
+  
+      // user selects date from calendar
+      await page.keyboard.press("Enter");
+      await page.waitForChanges();
+      await page.keyboard.press("ArrowRight");
+      await page.keyboard.press("Enter");
+      await page.waitForChanges();
+  
+      expect(indicator.textContent).toBe("events heard: 2");
+    });
+  
+    it("emits event with date on cell selection", async () => {
+      page = await newE2EPage();
+      await page.setContent(
+        `<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+        <wm-date-range id="dr" value="12/30/1999" label="label"></wm-date-range>
+        <div id="indicator"></div>
+        </main></body></html>`
+      );
+      component = await page.find("wm-date-range");
+      startInput = await page.find("wm-date-range >>> input");
+      await page.waitForChanges();
+  
+      await page.evaluate(async () => {
+        const indicator = document.querySelector("#indicator")!;
+        await document.querySelector("wm-date-range")!.addEventListener(
+          "wmDate-rangeDateSelected",
+          (ev) =>
+            (indicator.textContent =
+              //@ts-ignore
+              `date received: ${ev.detail.date}`)
+        );
+      });
+      await page.waitForChanges;
+  
+      const indicator = await page.find("#indicator");
+  
+      // user types date
+      await page.keyboard.press("Tab");
+      await page.keyboard.press("Tab");
+      await page.waitForChanges();
+      await page.keyboard.press("Enter");
+      await page.waitForChanges();
+      await page.keyboard.press("Enter");
+      await page.waitForChanges();
+  
+      expect(indicator.textContent).toBe("date received: 1999-12-30");
+    });
+  */
+});

package/dist/collection/components/datepickers/wm-date-range.js

@@ -429,23 +429,23 @@ export class DateRange {
         }
     }
     render() {
-        return (h(Host, { key: 'ffe68e278952d867cd9d1bf4945a91a9218aff41', "aria-busy": "false" }, h("div", { key: '256076b4ecb500f80bde6a0f4b74e0e090a8ebba', ref: (d) => (this.wrapperEl = d), class: "wrapper" }, h("div", { key: '1a16aee3f2c90b120fea6c3de7853a5f58f95c2b', class: `range-wrapper ${this.calWidth <= this.availSpace ? "cal" : ""}` }, h("div", { key: '2bf81bc7b7820b71820fa903f612247deb6b8592', class: "label-wrapper", id: "start-label-wrapper" }, h("label", { key: '09e8a0ee78eb5f19f6a3e94ce8c2bfefaff4a909', ref: (e) => (this.labelEl = e), id: "startlabel", htmlFor: "start-date-input", class: "label", title: `${this.labelStart} (${this.dateFormat})` }, this.labelStart, this.requiredField && (h("span", { key: '0deb9d862a52d6b044572a06645408805be1126e', "aria-hidden": "true", class: "required" }, "*")))), h("div", { key: 'ec5368e1736f8b83290238b483965aab0f9f3945', class: "label-wrapper", id: "end-label-wrapper" }, h("label", { key: '6cb070abde6ce9064a030c408894f29af6118984', id: "endlabel", htmlFor: "end-date-input", class: "label", title: `${this.labelEnd} (${this.dateFormat})` }, this.labelEnd, this.requiredField && (h("span", { key: 'e4def58969ee10495955c76ff6df4af0b721d98b', "aria-hidden": "true", class: "required" }, "*")))), h("input", { key: '141c909bdeae5c05fc5ca24bfe3f62c756c59bb1', disabled: this._disabled, type: "text", id: "start-date-input", class: `date-input input ${this.invalidStart ? "invalid" : ""}`, name: "start-date", placeholder: this.dateFormat, value: this.valueStart, onFocus: () => this.handleFocus(), onInput: (ev) => this.handleStartInput(ev), onBlur: () => this.handleStartInputBlur(), ref: (input) => (this.startInputEl = input), "aria-describedby": "error", "aria-label": this.labelStart, "aria-required": this.requiredField ? "true" : null }), h("div", { key: '71e1f4d5bfac5687c6c0dc78b0c7bf0e23963932', id: "hyphen" }, "\u00A0-\u00A0"), h("input", { key: '66da2b524e10f19471dfe98e8088f29223fcf1e5', disabled: this._disabled, type: "text", id: "end-date-input", class: `date-input input ${this.invalidEnd ? "invalid" : ""}`, name: "end-date", placeholder: this.dateFormat, value: this.valueEnd, onFocus: () => this.handleFocus(), onInput: (ev) => this.handleEndInput(ev), onBlur: () => this.handleEndInputBlur(), ref: (input) => (this.endInputEl = input), "aria-describedby": "error", "aria-label": this.labelEnd, "aria-required": this.requiredField ? "true" : null }), h("div", { key: 'd13e35362381766550f1555db5bc86043f29ae55', class: "toggle-wrapper", id: "toggle-wrapper" }, this.calWidth <= this.availSpace && (h("button", { key: '083f289ad53ef80ebf5bcb04f28cb85f4bf1cce6', disabled: this.disabled, onClick: this.togglePopup.bind(this), "aria-describedby": "start-date-input end-date-input", "aria-label": intl.formatMessage({
+        return (h(Host, { "aria-busy": "false" }, h("div", { ref: (d) => (this.wrapperEl = d), class: "wrapper" }, h("div", { class: `range-wrapper ${this.calWidth <= this.availSpace ? "cal" : ""}` }, h("div", { class: "label-wrapper", id: "start-label-wrapper" }, h("label", { ref: (e) => (this.labelEl = e), id: "startlabel", htmlFor: "start-date-input", class: "label", title: `${this.labelStart} (${this.dateFormat})` }, this.labelStart, this.requiredField && (h("span", { "aria-hidden": "true", class: "required" }, "*")))), h("div", { class: "label-wrapper", id: "end-label-wrapper" }, h("label", { id: "endlabel", htmlFor: "end-date-input", class: "label", title: `${this.labelEnd} (${this.dateFormat})` }, this.labelEnd, this.requiredField && (h("span", { "aria-hidden": "true", class: "required" }, "*")))), h("input", { disabled: this._disabled, type: "text", id: "start-date-input", class: `date-input input ${this.invalidStart ? "invalid" : ""}`, name: "start-date", placeholder: this.dateFormat, value: this.valueStart, onFocus: () => this.handleFocus(), onInput: (ev) => this.handleStartInput(ev), onBlur: () => this.handleStartInputBlur(), ref: (input) => (this.startInputEl = input), "aria-describedby": "error", "aria-label": this.labelStart, "aria-required": this.requiredField ? "true" : null }), h("div", { id: "hyphen" }, "\u00A0-\u00A0"), h("input", { disabled: this._disabled, type: "text", id: "end-date-input", class: `date-input input ${this.invalidEnd ? "invalid" : ""}`, name: "end-date", placeholder: this.dateFormat, value: this.valueEnd, onFocus: () => this.handleFocus(), onInput: (ev) => this.handleEndInput(ev), onBlur: () => this.handleEndInputBlur(), ref: (input) => (this.endInputEl = input), "aria-describedby": "error", "aria-label": this.labelEnd, "aria-required": this.requiredField ? "true" : null }), h("div", { class: "toggle-wrapper", id: "toggle-wrapper" }, this.calWidth <= this.availSpace && (h("button", { disabled: this.disabled, onClick: this.togglePopup.bind(this), "aria-describedby": "start-date-input end-date-input", "aria-label": intl.formatMessage({
                 id: "date.selectRange",
                 defaultMessage: "Select range",
                 description: "Button text for screen readers.",
-            }), ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle" }, h("span", { key: 'c127dd1ac1f883218997250dc0455d2cd67b4e54', class: "calendar", title: intl.formatMessage({
+            }), ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle" }, h("span", { class: "calendar", title: intl.formatMessage({
                 id: "date.calendarView",
                 defaultMessage: "Calendar View",
                 description: "Calendar button",
-            }) })))), this.renderCalendars()), h("div", { key: 'f73ab32bcf2cebc82a8afd9129a1d3fcf9e0bc2b' }, h("div", { key: '2d7f933a92f36483ecfd801c4ae17bf7baa92c71', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { key: 'ca4fd9da247934ff4644b099c883fed0158d0c86', id: "month-title", class: "sr-only" }, intl.formatMessage({
+            }) })))), this.renderCalendars()), h("div", null, h("div", { id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { id: "month-title", class: "sr-only" }, intl.formatMessage({
             id: "date.selectMonth",
             defaultMessage: "Activate to select a month.",
             description: "Calendar button",
-        })), h("div", { key: '22d83e68a09a15072afcc3368fdf957838a5da1f', id: "year-title", class: "sr-only" }, intl.formatMessage({
+        })), h("div", { id: "year-title", class: "sr-only" }, intl.formatMessage({
             id: "date.selectYear",
             defaultMessage: "Activate to select a year.",
             description: "Calendar button",
-        }))), h("div", { key: '6fbc73d0c1d280133b445c9fd4acd14a1be673e0', id: "error", class: "error" }, this.errorMessage), h("div", { key: '4dac5d364845b7a4c656db95e0aae877b902692b', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }))));
+        }))), h("div", { id: "error", class: "error" }, this.errorMessage), h("div", { ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }))));
     }
     static get is() { return "wm-date-range"; }
     static get encapsulation() { return "shadow"; }
@@ -720,17 +720,14 @@ export class DateRange {
                 "complexType": {
                     "signature": "(inputFormat: string, outputFormat: string, date?: string) => Promise<string>",
                     "parameters": [{
-                            "name": "inputFormat",
-                            "type": "string",
-                            "docs": ""
+                            "tags": [],
+                            "text": ""
                         }, {
-                            "name": "outputFormat",
-                            "type": "string",
-                            "docs": ""
+                            "tags": [],
+                            "text": ""
                         }, {
-                            "name": "date",
-                            "type": "string | undefined",
-                            "docs": ""
+                            "tags": [],
+                            "text": ""
                         }],
                     "references": {
                         "Promise": {
@@ -749,9 +746,8 @@ export class DateRange {
                 "complexType": {
                     "signature": "(input?: string) => Promise<boolean>",
                     "parameters": [{
-                            "name": "input",
-                            "type": "string | undefined",
-                            "docs": ""
+                            "tags": [],
+                            "text": ""
                         }],
                     "references": {
                         "Promise": {

package/dist/collection/components/datepickers/wm-date-range.spec.js

@@ -0,0 +1,22 @@
+import { newSpecPage } from "@stencil/core/testing";
+//import * as globalFunctions from "../../global/functions";
+import { DateRange } from "./wm-date-range";
+describe("wm-date-range", () => {
+    it("builds", async () => {
+        const comp = await newSpecPage({
+            components: [DateRange],
+            html: '<wm-date-range label="mock label"></wm-date-range>',
+        });
+        expect(comp.root).toMatchSnapshot();
+    });
+    it("sets inputs to required", async () => {
+        const page = await newSpecPage({
+            components: [DateRange],
+            html: `<wm-date-range label='date range' required-field='true'></wm-date-range>`,
+        });
+        const inputs = await page.root.shadowRoot.querySelectorAll("input");
+        inputs.forEach((input) => {
+            expect(input).toEqualAttribute("aria-required", "true");
+        });
+    });
+});