@watermarkinsights/ripple 3.0.1-0 → 3.0.2-0

package/dist/collection/components/wm-datepicker/priv-datepicker/priv-datepicker.js

@@ -0,0 +1,1003 @@
+import { h, Component, Prop, Element, Event, Listen, State } from "@stencil/core";
+import { forceUpdate } from "@stencil/core";
+import { intl, hasRoomRight, shouldOpenUp } from "../../../global/functions";
+export class PrivDatepicker {
+  constructor() {
+    this.disabled = false;
+    this.isExpanded = false;
+    this.view = "day";
+    this.date = new Date();
+    this.selectedYear = this.date.getUTCFullYear();
+    this.selectedMonth = this.date.getUTCMonth() + 1;
+    this.selectedDay = this.date.getUTCDate();
+    this.monthInFocus = this.selectedMonth;
+    this.yearInFocus = this.selectedYear;
+    this.dayInFocus = this.selectedDay;
+    this.monthNumInFocus = this.selectedMonth;
+    this.parentId = "";
+    this.popupClicked = true;
+    this.buttonClicked = true;
+    this.prevClicked = true;
+    this.nextClicked = true;
+    this.openUp = false;
+    this.calendar_months = [
+      intl.formatMessage({
+        id: "date.january",
+        defaultMessage: "January",
+        description: "Month of the year",
+      }),
+      intl.formatMessage({
+        id: "date.february",
+        defaultMessage: "February",
+        description: "Month of the year",
+      }),
+      intl.formatMessage({
+        id: "date.march",
+        defaultMessage: "March",
+        description: "Month of the year",
+      }),
+      intl.formatMessage({
+        id: "date.april",
+        defaultMessage: "April",
+        description: "Month of the year",
+      }),
+      intl.formatMessage({
+        id: "date.may",
+        defaultMessage: "May",
+        description: "Month of the year",
+      }),
+      intl.formatMessage({
+        id: "date.june",
+        defaultMessage: "June",
+        description: "Month of the year",
+      }),
+      intl.formatMessage({
+        id: "date.july",
+        defaultMessage: "July",
+        description: "Month of the year",
+      }),
+      intl.formatMessage({
+        id: "date.august",
+        defaultMessage: "August",
+        description: "Month of the year",
+      }),
+      intl.formatMessage({
+        id: "date.september",
+        defaultMessage: "September",
+        description: "Month of the year",
+      }),
+      intl.formatMessage({
+        id: "date.october",
+        defaultMessage: "October",
+        description: "Month of the year",
+      }),
+      intl.formatMessage({
+        id: "date.november",
+        defaultMessage: "November",
+        description: "Month of the year",
+      }),
+      intl.formatMessage({
+        id: "date.december",
+        defaultMessage: "December",
+        description: "Month of the year",
+      }),
+    ];
+    this.weekdays = [
+      intl.formatMessage({ id: "date.sunday", defaultMessage: "Sunday" }),
+      intl.formatMessage({ id: "date.monday", defaultMessage: "Monday" }),
+      intl.formatMessage({ id: "date.tuesday", defaultMessage: "Tuesday" }),
+      intl.formatMessage({ id: "date.wednesday", defaultMessage: "Wednesday" }),
+      intl.formatMessage({ id: "date.thursday", defaultMessage: "Thursday" }),
+      intl.formatMessage({ id: "date.friday", defaultMessage: "Friday" }),
+      intl.formatMessage({ id: "date.saturday", defaultMessage: "Saturday" }),
+    ];
+    this.renderCalendarDate = (date, index) => {
+      let monthOfDate = this.removeZeroes(String(date[1]));
+      let dayOfDate = this.removeZeroes(String(date[2]));
+      let isThisMonth = monthOfDate === this.monthInFocus ? "current-month" : "";
+      const dateId = date[0] + date[1] + date[2];
+      const isToday = this.isDateToday(date);
+      return (h("div", { role: "gridcell", id: `cell-${dateId}-${this.parentId}`, class: `date-cell ${isThisMonth}`, "aria-selected": false, "aria-label": `${isToday
+          ? `${intl.formatMessage({
+            id: "date.today",
+            defaultMessage: "today",
+            description: "calendar button",
+          })}, `
+          : ""}${this.weekdays[index]}, ${this.calendar_months[monthOfDate - 1]} ${dayOfDate}, ${date[0]}`, onClick: (ev) => {
+          this.handleTriggeredDate(ev.target);
+        }, onKeyDown: (ev) => this.trapFocusEnd(ev), "data-month": date[1], "data-year": date[0], onBlur: (ev) => ev.stopPropagation() }, dayOfDate));
+    };
+  }
+  handleKey(ev) {
+    this.prevClicked = false;
+    this.nextClicked = false;
+    switch (ev.keyCode) {
+      // Enter
+      case 13:
+        ev.preventDefault();
+        //Clunky exception for blur validation. Remove when blur reworked.
+        !ev.target.id.includes("popup-title") && ev.target.click();
+        break;
+      //escape
+      case 27:
+        ev.preventDefault();
+        if (this.isExpanded) {
+          ev.stopPropagation(); // prevents closing of parent modal
+          this.togglePopup();
+          this.buttonEl.focus();
+        }
+        break;
+      // Page Up
+      case 33:
+        ev.preventDefault();
+        this.backOneMonth();
+        break;
+      // Page Down
+      case 34:
+        ev.preventDefault();
+        this.forwardOneMonth();
+        break;
+      // Home
+      case 36:
+        ev.preventDefault();
+        this.unfocusCell();
+        this.dayInFocus = 1;
+        forceUpdate(this.el);
+        break;
+      // End
+      case 35:
+        ev.preventDefault();
+        this.unfocusCell();
+        this.dayInFocus = this.getMonthDays(this.monthInFocus, this.yearInFocus);
+        forceUpdate(this.el);
+        break;
+      //left
+      case 37:
+        ev.preventDefault();
+        if (this.view === "day") {
+          this.unfocusCell();
+          if (this.dayInFocus === 1) {
+            const newMonth = this.getPreviousMonth(this.monthInFocus, this.yearInFocus);
+            this.monthInFocus = newMonth.month;
+            this.yearInFocus = newMonth.year;
+            this.dayInFocus = this.getMonthDays(this.monthInFocus, this.yearInFocus);
+          }
+          else {
+            this.dayInFocus -= 1;
+          }
+        }
+        else {
+          this.unfocusMonth();
+          if (this.monthNumInFocus === 0) {
+            this.monthNumInFocus = 11;
+          }
+          else {
+            this.monthNumInFocus -= 1;
+          }
+        }
+        break;
+      //right
+      case 39:
+        ev.preventDefault();
+        if (this.view === "day") {
+          this.unfocusCell();
+          if (this.dayInFocus === this.getMonthDays(this.monthInFocus, this.yearInFocus)) {
+            const newMonth = this.getNextMonth(this.monthInFocus, this.yearInFocus);
+            this.monthInFocus = newMonth.month;
+            this.yearInFocus = newMonth.year;
+            this.dayInFocus = 1;
+          }
+          else {
+            this.dayInFocus += 1;
+          }
+        }
+        else {
+          this.unfocusMonth();
+          if (this.monthNumInFocus === 11) {
+            this.monthNumInFocus = 0;
+          }
+          else {
+            this.monthNumInFocus += 1;
+          }
+        }
+        break;
+      //up
+      case 38:
+        ev.preventDefault();
+        if (this.view === "day") {
+          this.unfocusCell();
+          if (this.dayInFocus < 8) {
+            const newMonth = this.getPreviousMonth(this.monthInFocus, this.yearInFocus);
+            this.monthInFocus = newMonth.month;
+            this.yearInFocus = newMonth.year;
+            const numDaysToSubtract = 7 - this.dayInFocus;
+            this.dayInFocus = this.getMonthDays(this.monthInFocus, this.yearInFocus) - numDaysToSubtract;
+          }
+          else {
+            this.dayInFocus -= 7;
+          }
+        }
+        else {
+          this.unfocusMonth();
+          if (this.monthNumInFocus < 3) {
+            this.monthNumInFocus += 9;
+          }
+          else {
+            this.monthNumInFocus -= 3;
+          }
+        }
+        break;
+      //down
+      case 40:
+        ev.preventDefault();
+        if (!this.isExpanded) {
+          this.openPopup();
+        }
+        else {
+          if (this.view === "day") {
+            //If the down arrow is pressed from the month button or the arrow buttons, focus should shift to the current cell in focus
+            if (!(document.activeElement.shadowRoot || document).activeElement.classList.contains("date-cell")) {
+              this.focusCell();
+              break;
+            }
+            this.unfocusCell();
+            const changeoverDate = this.getMonthDays(this.monthInFocus, this.yearInFocus) - 7;
+            if (this.dayInFocus > changeoverDate) {
+              const newMonth = this.getNextMonth(this.monthInFocus, this.yearInFocus);
+              this.monthInFocus = newMonth.month;
+              this.yearInFocus = newMonth.year;
+              this.dayInFocus = this.dayInFocus - changeoverDate;
+            }
+            else {
+              this.dayInFocus += 7;
+            }
+          }
+          else {
+            //If the down arrow is pressed from the arrow buttons or the title box, focus should shift to the current month in focus
+            const activeEl = (document.activeElement.shadowRoot || document).activeElement;
+            if (activeEl.tagName === "BUTTON" || activeEl.id.includes("popup-title-year")) {
+              this.focusMonth();
+              break;
+            }
+            this.unfocusMonth();
+            if (this.monthNumInFocus > 8) {
+              this.monthNumInFocus -= 9;
+            }
+            else {
+              this.monthNumInFocus += 3;
+            }
+          }
+        }
+        break;
+    }
+  }
+  toggleTabbingOn(ev) {
+    var keys = ["Tab", 9, "ArrowUp", 38, "ArrowDown", 40, "ArrowLeft", 37, "ArrowRight", 39, "Enter", 13];
+    var key = ev.key || ev.keyCode;
+    if (keys.includes(key)) {
+      this.popupEl && this.popupEl.classList.add("user-is-tabbing");
+    }
+  }
+  //Using mousedown prevents this from running when the keydown listener emits ".click()" for when enter is pressed.
+  toggleTabbingOff() {
+    this.popupEl && this.popupEl.classList.remove("user-is-tabbing");
+  }
+  blurHandler() {
+    if (!this.popupClicked && !this.buttonClicked && this.isExpanded) {
+      this.closePopup();
+    }
+    this.popupClicked = false;
+    this.buttonClicked = false;
+  }
+  setDateValuesForView() {
+    this.selectedYear = this.date.getUTCFullYear();
+    this.selectedMonth = this.date.getUTCMonth() + 1;
+    this.selectedDay = this.date.getUTCDate();
+    this.monthInFocus = this.selectedMonth;
+    this.yearInFocus = this.selectedYear;
+    this.dayInFocus = this.selectedDay;
+    this.monthNumInFocus = this.selectedMonth - 1;
+  }
+  togglePopup() {
+    this.isExpanded ? this.closePopup() : this.openPopup();
+    this.buttonClicked = true;
+  }
+  updateLiveRegion(text) {
+    let liveRegion = this.el.querySelector("#live-region");
+    liveRegion.innerHTML = text;
+  }
+  closePopup() {
+    this.isExpanded = false;
+    this.popupEl.classList.remove("open");
+    window.setTimeout(() => {
+      //not using display none in order to get measurements of the popup while hidden
+      this.popupEl.style.visibility = "hidden";
+    }, 250);
+    //Reset values so that menu reopens to day view with selected date in focus
+    if (this.view === "day") {
+      this.unfocusCell();
+    }
+    this.monthInFocus = this.selectedMonth;
+    this.yearInFocus = this.selectedYear;
+    this.dayInFocus = this.selectedDay;
+    this.changeView("day");
+    window.requestAnimationFrame(() => {
+      //For instances where the app is checking for errors in the date on blur
+      // trigger blur, but keep focus on button
+      this.popupClosed.emit();
+      this.buttonEl.focus();
+    });
+  }
+  openPopup() {
+    this.panelPosition();
+    this.setDateValuesForView();
+    this.prevClicked = false;
+    this.nextClicked = false;
+    this.popupEl.style.visibility = "visible";
+    window.requestAnimationFrame(() => {
+      this.popupEl.classList.add("open");
+    });
+    this.isExpanded = true;
+    this.focusCell();
+  }
+  panelPosition() {
+    // getting a ref to the input el (in datepicker.tsx)
+    let host = document.getElementById(this.parentId);
+    const labelHeight = host.shadowRoot.querySelector(".label-wrapper").clientHeight;
+    this.openUp = shouldOpenUp(host, this.popupEl, labelHeight);
+    if (hasRoomRight(host, 336)) {
+      this.popupEl.style.left = "0";
+      this.popupEl.style.right = "auto";
+    }
+    else {
+      this.popupEl.style.right = "0";
+      this.popupEl.style.left = "auto";
+    }
+  }
+  changeView(newView) {
+    this.view = newView;
+    //Ensure month view always opens to the month last visited in date view
+    this.monthNumInFocus = this.monthInFocus - 1;
+  }
+  getMonthDays(month, year) {
+    const months30 = [4, 6, 9, 11];
+    const leapYear = year % 4 === 0;
+    return month === 2 ? (leapYear ? 29 : 28) : months30.includes(month) ? 30 : 31;
+  }
+  zeroPad(value, length) {
+    if (!String.prototype.padStart) {
+      String.prototype.padStart = function padStart(targetLength, padString) {
+        targetLength = targetLength - this.length;
+        if (targetLength > padString.length) {
+          padString += padString.repeat(targetLength / padString.length);
+        }
+        return padString.slice(0, targetLength) + String(this);
+      };
+    }
+    return `${value.toString()}`.padStart(length, "0");
+  }
+  // 1 => Sunday, 7 => Saturday
+  getMonthFirstDay(month, year) {
+    return +new Date(year, month - 1, 1, 12, 0, 0).getDay() + 1;
+  }
+  getPreviousMonth(month, year) {
+    const prevMonth = month > 1 ? month - 1 : 12;
+    const prevMonthYear = month > 1 ? year : year - 1;
+    return { month: prevMonth, year: prevMonthYear };
+  }
+  getNextMonth(month, year) {
+    const nextMonth = month < 12 ? month + 1 : 1;
+    const nextMonthYear = month < 12 ? year : year + 1;
+    return { month: nextMonth, year: nextMonthYear };
+  }
+  getCalendarDates(month, year) {
+    // Get number of days in the month and the month's first day
+    const monthDays = this.getMonthDays(month, year);
+    const monthFirstDay = this.getMonthFirstDay(month, year);
+    // Get number of days to be displayed from previous and next months
+    // These ensure a total of 42 days (6 weeks) displayed on the calendar
+    const daysFromPrevMonth = monthFirstDay - 1;
+    let daysFromNextMonth = 42 - (daysFromPrevMonth + monthDays);
+    daysFromNextMonth = daysFromNextMonth > 6 ? daysFromNextMonth - 7 : daysFromNextMonth;
+    // Get the previous and next months and years
+    const { month: prevMonth, year: prevMonthYear } = this.getPreviousMonth(month, year);
+    const { month: nextMonth, year: nextMonthYear } = this.getNextMonth(month, year);
+    // Get number of days in previous month
+    const prevMonthDays = this.getMonthDays(prevMonth, prevMonthYear);
+    // Builds dates to be displayed from previous month. The initialized array is "filled" with an arbitrary number because IE and Edge won't map over an array with empty values.
+    const prevMonthDates = [...new Array(daysFromPrevMonth).fill("1")].map((_, index) => {
+      const day = index + 1 + (prevMonthDays - daysFromPrevMonth);
+      return [prevMonthYear.toString(), this.zeroPad(prevMonth, 2), this.zeroPad(day, 2)];
+    });
+    // Builds dates to be displayed from current month. The initialized array is "filled" with an arbitrary number because IE and Edge won't map over an array with empty values.
+    const thisMonthDates = [...new Array(monthDays).fill("1")].map((_, index) => {
+      const day = index + 1;
+      return [year.toString(), this.zeroPad(month, 2), this.zeroPad(day, 2)];
+    });
+    // Builds dates to be displayed from next month. The initialized array is "filled" with an arbitrary number because IE and Edge won't map over an array with empty values.
+    const nextMonthDates = [...new Array(daysFromNextMonth).fill("1")].map((_, index) => {
+      const day = index + 1;
+      return [nextMonthYear.toString(), this.zeroPad(nextMonth, 2), this.zeroPad(day, 2)];
+    });
+    // Combines all dates from previous, current and next months
+    return [...prevMonthDates, ...thisMonthDates, ...nextMonthDates];
+  }
+  forwardOneMonth() {
+    this.unfocusCell();
+    const newMonth = this.getNextMonth(this.monthInFocus, this.yearInFocus);
+    this.monthInFocus = newMonth.month;
+    this.yearInFocus = newMonth.year;
+    const totalDays = this.getMonthDays(this.monthInFocus, this.yearInFocus);
+    if (this.dayInFocus > this.getMonthDays(this.monthInFocus, this.yearInFocus)) {
+      this.dayInFocus = totalDays;
+    }
+    this.updateLiveRegion(`Displaying ${this.calendar_months[this.monthInFocus - 1]}, ${this.yearInFocus}`);
+  }
+  backOneMonth() {
+    this.unfocusCell();
+    const newMonth = this.getPreviousMonth(this.monthInFocus, this.yearInFocus);
+    this.monthInFocus = newMonth.month;
+    this.yearInFocus = newMonth.year;
+    const totalDays = this.getMonthDays(this.monthInFocus, this.yearInFocus);
+    if (this.dayInFocus > this.getMonthDays(this.monthInFocus, this.yearInFocus)) {
+      this.dayInFocus = totalDays;
+    }
+    this.updateLiveRegion(`Viewing ${this.calendar_months[this.monthInFocus - 1]}, ${this.yearInFocus}`);
+  }
+  handleTriggeredDate(el) {
+    this.cellTriggered.emit(el);
+    // change of input value will trigger the function updating selectedDate
+    this.closePopup();
+  }
+  handleSelectedDate() {
+    //Remove old selection status
+    if (this.selectedDate) {
+      this.selectedDate.removeAttribute("aria-selected");
+    }
+    //Update selected date to new date inputted/selected
+    this.selectedDate = this.getCellById(this.selectedYear, this.selectedMonth, this.selectedDay);
+    if (this.selectedDate) {
+      this.selectedDate.setAttribute("aria-selected", "true");
+    }
+  }
+  getCellById(year, month, day) {
+    const id = year + this.zeroPad(month, 2) + this.zeroPad(day, 2);
+    return this.el.querySelector(`#cell-${id}-${this.parentId}`);
+  }
+  unfocusCell() {
+    const cellToUnfocus = this.getCellById(this.yearInFocus, this.monthInFocus, this.dayInFocus);
+    cellToUnfocus.tabIndex = -1;
+  }
+  focusCell() {
+    //These two lines of code prevent an error from happening when the day in focus does not exist in a new month selected, e.g., May 31 is in focus, then the user selects "November". It will return focus in the date view to the last day of the month so that focus doesn't fly out of the popup.
+    const maxDays = this.getMonthDays(this.monthInFocus, this.yearInFocus);
+    this.dayInFocus = this.dayInFocus > maxDays ? maxDays : this.dayInFocus;
+    const cellToFocus = this.getCellById(this.yearInFocus, this.monthInFocus, this.dayInFocus);
+    if (cellToFocus) {
+      cellToFocus.tabIndex = 0;
+      cellToFocus.focus();
+    }
+  }
+  unfocusMonth() {
+    const monthToUnfocus = this.el.querySelector(`#month-${this.monthNumInFocus}-${this.parentId}`);
+    monthToUnfocus.tabIndex = -1;
+  }
+  focusMonth() {
+    const monthToFocus = this.el.querySelector(`#month-${this.monthNumInFocus}-${this.parentId}`);
+    monthToFocus.tabIndex = 0;
+    monthToFocus.focus();
+  }
+  removeZeroes(date) {
+    return +date < 10 ? +date.slice(1) : +date;
+  }
+  isDateToday(date) {
+    const today = new Date();
+    const todayDateArray = [
+      today.getFullYear().toString(),
+      (today.getMonth() + 1).toString(),
+      today.getDate().toString(),
+    ];
+    //Compare today's date to date and return true if they match
+    return todayDateArray.reduce((result, val, index) => result && this.removeZeroes(date[index]).toString() === val, true);
+  }
+  renderMonths(month, index) {
+    return (h("div", { id: `month-${index}-${this.parentId}`, class: `month ${this.selectedMonth - 1 === index ? "selected" : ""}`, role: "gridcell", tabindex: index + 1 === this.monthInFocus ? 0 : -1, onKeyDown: (ev) => this.trapFocusEnd(ev), onBlur: (ev) => ev.stopPropagation(), onClick: () => {
+        this.monthInFocus = index + 1;
+        this.changeView("day");
+      } }, month));
+  }
+  trapFocusLeft(ev) {
+    if (ev.shiftKey && ev.keyCode === 9) {
+      ev.preventDefault();
+      this.focusCellInView();
+    }
+  }
+  trapFocusEnd(ev) {
+    if (!ev.shiftKey && ev.keyCode === 9) {
+      ev.preventDefault();
+      this.prevButton.focus();
+    }
+  }
+  trapFocusRight(ev) {
+    if (!ev.shiftKey && ev.keyCode === 9) {
+      ev.preventDefault();
+      this.focusCellInView();
+    }
+  }
+  focusCellInView() {
+    if (this.view === "day") {
+      this.focusCell();
+    }
+    else {
+      this.focusMonth();
+    }
+  }
+  componentDidUpdate() {
+    this.handleSelectedDate();
+    if (this.isExpanded) {
+      this.prevClicked
+        ? this.prevButton.focus()
+        : this.nextClicked
+          ? this.nextButton.focus()
+          : this.view === "day"
+            ? this.focusCell()
+            : this.focusMonth();
+    }
+  }
+  componentDidLoad() {
+    this.handleSelectedDate();
+    this.setDateValuesForView();
+  }
+  toggleBusyAttribute(state) {
+    this.el.querySelector("#wm-container").setAttribute("aria-busy", state);
+  }
+  render() {
+    const dates = this.getCalendarDates(this.monthInFocus, this.yearInFocus);
+    return (h("div", { class: "container", id: "wm-container" },
+      h("button", { disabled: this.disabled, onClick: this.togglePopup.bind(this), "aria-describedby": `date-input-${this.parentId}`, ref: (el) => (this.buttonEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: `toggle-${this.parentId}` },
+        h("span", { class: "calendar", title: intl.formatMessage({
+            id: "date.calendarView",
+            defaultMessage: "Calendar View",
+            description: "Calendar button",
+          }) })),
+      h("div", { class: `popup ${this.view}-view ${this.openUp ? "expand-upwards" : ""}`, id: `popup-${this.parentId}`, ref: (el) => (this.popupEl = el), onClick: () => (this.popupClicked = true), role: "application", "aria-describedby": "application" }, this.view === "day" ? (h("div", { class: "day-view" },
+        h("div", { class: "calendar-header" },
+          h("button", { onClick: () => {
+              this.prevClicked = true;
+              this.popupClicked = true;
+              this.backOneMonth();
+            }, onKeyDown: (ev) => this.trapFocusLeft(ev), ref: (el) => (this.prevButton = el), class: "arw-btn", "aria-label": intl.formatMessage({
+              id: "date.selectPreviousMonth",
+              defaultMessage: "Select previous month",
+              description: "Calendar button",
+            }) },
+            h("span", { class: "mdi" }, "\uF141")),
+          h("div", { id: `popup-title-month-${this.parentId}`, class: "title-box", tabindex: 0, role: "button", onKeyDown: (ev) => {
+              if (ev.keyCode === 13 || ev.keyCode === 32) {
+                ev.preventDefault();
+                this.changeView("month");
+              }
+            }, onClick: this.changeView.bind(this, "month"), "aria-label": `${intl.formatMessage({
+              id: "date.currentMonth",
+              defaultMessage: "current month",
+              description: "Calendar button",
+            })}: ${this.calendar_months[this.monthInFocus - 1]}
+                  ${this.yearInFocus}.`, "aria-describedby": "month-title" },
+            h("span", { class: "title", "aria-hidden": "true" },
+              this.calendar_months[this.monthInFocus - 1],
+              " ",
+              this.yearInFocus)),
+          h("button", { onClick: () => {
+              this.nextClicked = true;
+              this.popupClicked = true;
+              this.forwardOneMonth();
+            }, onKeyDown: (ev) => this.trapFocusRight(ev), "aria-label": intl.formatMessage({
+              id: "date.selectNextMonth",
+              defaultMessage: "Select next month",
+              description: "Calendar button",
+            }), ref: (el) => (this.nextButton = el), class: "arw-btn" },
+            h("span", { class: "mdi" }, "\uF142"))),
+        h("div", { "aria-labelledby": `popup-title-month-${this.parentId}`, role: "grid", class: "date-grid" },
+          h("div", { role: "rowgroup", class: "date-header" },
+            h("div", { role: "row", class: "header-row" },
+              h("div", { role: "columnheader", class: "header-cell" },
+                h("span", null, intl.formatMessage({
+                  id: "date.su",
+                  defaultMessage: "Su",
+                  description: "Abbreviated day of the week",
+                }))),
+              h("div", { role: "columnheader", class: "header-cell" },
+                h("span", null, intl.formatMessage({
+                  id: "date.mo",
+                  defaultMessage: "Mo",
+                  description: "Abbreviated day of the week",
+                }))),
+              h("div", { role: "columnheader", class: "header-cell" },
+                h("span", null, intl.formatMessage({
+                  id: "date.tu",
+                  defaultMessage: "Tu",
+                  description: "Abbreviated day of the week",
+                }))),
+              h("div", { role: "columnheader", class: "header-cell" },
+                h("span", null, intl.formatMessage({
+                  id: "date.we",
+                  defaultMessage: "We",
+                  description: "Abbreviated day of the week",
+                }))),
+              h("div", { role: "columnheader", class: "header-cell" },
+                h("span", null, intl.formatMessage({
+                  id: "date.th",
+                  defaultMessage: "Th",
+                  description: "Abbreviated day of the week",
+                }))),
+              h("div", { role: "columnheader", class: "header-cell" },
+                h("span", null, intl.formatMessage({
+                  id: "date.fr",
+                  defaultMessage: "Fr",
+                  description: "Abbreviated day of the week",
+                }))),
+              h("div", { role: "columnheader", class: "header-cell" },
+                h("span", null, intl.formatMessage({
+                  id: "date.sa",
+                  defaultMessage: "Sa",
+                  description: "Abbreviated day of the week",
+                }))))),
+          h("div", { role: "rowgroup" },
+            h("div", { role: "row", class: "date-row" }, dates.slice(0, 7).map((date, i) => this.renderCalendarDate(date, i))),
+            h("div", { role: "row" }, dates.slice(7, 14).map((date, i) => this.renderCalendarDate(date, i))),
+            h("div", { role: "row" }, dates.slice(14, 21).map((date, i) => this.renderCalendarDate(date, i))),
+            h("div", { role: "row" }, dates.slice(21, 28).map((date, i) => this.renderCalendarDate(date, i))),
+            h("div", { role: "row" }, dates.slice(28, 35).map((date, i) => this.renderCalendarDate(date, i))),
+            dates.length > 35 ? (h("div", { role: "row" }, dates.slice(35).map((date, i) => this.renderCalendarDate(date, i)))) : (""))))) : (h("div", { class: "month-view" },
+        h("div", { class: "calendar-header" },
+          h("button", { onClick: () => {
+              this.prevClicked = true;
+              this.popupClicked = true;
+              this.yearInFocus -= 1;
+              this.updateLiveRegion(`${this.yearInFocus} selected.`);
+            }, onKeyDown: (ev) => this.trapFocusLeft(ev), "aria-label": intl.formatMessage({
+              id: "date.selectPreviousYear",
+              defaultMessage: "Select previous year",
+              description: "Calendar button",
+            }), ref: (el) => (this.prevButton = el), class: "arw-btn" },
+            h("span", { class: "mdi" }, "\uF141")),
+          h("div", { id: `popup-title-year-${this.parentId}`, tabindex: 0, class: "title-box year", role: "button", onClick: this.changeView.bind(this, "day"), onKeyDown: (ev) => {
+              if (ev.keyCode === 13 || ev.keyCode === 32) {
+                ev.preventDefault();
+                this.changeView("day");
+              }
+            }, "aria-labelledby": "year-title" },
+            h("span", { class: "title" }, this.yearInFocus)),
+          h("button", { onClick: () => {
+              this.nextClicked = true;
+              this.popupClicked = true;
+              this.yearInFocus += 1;
+              this.updateLiveRegion(`${this.yearInFocus} selected.`);
+            }, "aria-label": intl.formatMessage({
+              id: "date.selectNextYear",
+              defaultMessage: "Select next year",
+              description: "Calendar button",
+            }), onKeyDown: (ev) => this.trapFocusRight(ev), ref: (el) => (this.nextButton = el), class: "arw-btn" },
+            h("span", { class: "mdi" }, "\uF142"))),
+        h("div", { "aria-labelledby": `popup-title-year-${this.parentId}`, role: "grid", class: "months" },
+          h("div", { role: "row", class: "month-row" }, this.calendar_months
+            .slice(0, 3)
+            .map((month, index) => this.renderMonths(month, index))),
+          h("div", { role: "row", class: "month-row" }, this.calendar_months
+            .slice(3, 6)
+            .map((month, index) => this.renderMonths(month, index + 3))),
+          h("div", { role: "row", class: "month-row" }, this.calendar_months
+            .slice(6, 9)
+            .map((month, index) => this.renderMonths(month, index + 6))),
+          h("div", { role: "row", class: "month-row" }, this.calendar_months
+            .slice(9)
+            .map((month, index) => this.renderMonths(month, index + 9))))))),
+      this.isExpanded && 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", { id: "year-title", class: "sr-only" }, intl.formatMessage({
+        id: "date.selectYear",
+        defaultMessage: "Activate to select a year.",
+        description: "Calendar button",
+      })),
+      h("div", { id: "application", class: "sr-only" }, intl.formatMessage({
+        id: "date.instructions",
+        defaultMessage: "Use arrows to select a date in the table. Tab left or right to buttons for selecting previous month, next month, or the month selection table.",
+      }))));
+  }
+  static get is() { return "priv-datepicker"; }
+  static get originalStyleUrls() { return {
+    "$": ["priv-datepicker.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["priv-datepicker.css"]
+  }; }
+  static get properties() { return {
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "isExpanded": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "is-expanded",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "view": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "view",
+      "reflect": true,
+      "defaultValue": "\"day\""
+    },
+    "date": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "Date",
+        "resolved": "Date",
+        "references": {
+          "Date": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "new Date()"
+    },
+    "selectedYear": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "selected-year",
+      "reflect": false,
+      "defaultValue": "this.date.getUTCFullYear()"
+    },
+    "selectedMonth": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "selected-month",
+      "reflect": false,
+      "defaultValue": "this.date.getUTCMonth() + 1"
+    },
+    "selectedDay": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "selected-day",
+      "reflect": false,
+      "defaultValue": "this.date.getUTCDate()"
+    },
+    "monthInFocus": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "month-in-focus",
+      "reflect": false,
+      "defaultValue": "this.selectedMonth"
+    },
+    "yearInFocus": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "year-in-focus",
+      "reflect": false,
+      "defaultValue": "this.selectedYear"
+    },
+    "dayInFocus": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "day-in-focus",
+      "reflect": false,
+      "defaultValue": "this.selectedDay"
+    },
+    "parentId": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "parent-id",
+      "reflect": true,
+      "defaultValue": "\"\""
+    }
+  }; }
+  static get states() { return {
+    "monthNumInFocus": {}
+  }; }
+  static get events() { return [{
+      "method": "cellTriggered",
+      "name": "cellTriggered",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "HTMLElement",
+        "resolved": "HTMLElement",
+        "references": {
+          "HTMLElement": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "toggleButtonClicked",
+      "name": "toggleButtonClicked",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "HTMLButtonElement",
+        "resolved": "HTMLButtonElement",
+        "references": {
+          "HTMLButtonElement": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "popupClosed",
+      "name": "popupClosed",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+  static get listeners() { return [{
+      "name": "keydown",
+      "method": "handleKey",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "keydown",
+      "method": "toggleTabbingOn",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "mousedown",
+      "method": "toggleTabbingOff",
+      "target": "window",
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "click",
+      "method": "blurHandler",
+      "target": "document",
+      "capture": false,
+      "passive": false
+    }]; }
+}