@watermarkinsights/ripple 3.9.0 → 3.10.0-0

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

@@ -1,1024 +1,1024 @@
-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.isTabbing = false;
-    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.key) {
-      case "Enter":
-        ev.preventDefault();
-        //Clunky exception for blur validation. Remove when blur reworked.
-        !ev.target.id.includes("popup-title") && ev.target.click();
-        break;
-      case "Escape":
-        ev.preventDefault();
-        if (this.isExpanded) {
-          ev.stopPropagation(); // prevents closing of parent modal
-          this.closePopup(true);
-        }
-        break;
-      case "PageUp":
-        ev.preventDefault();
-        this.backOneMonth();
-        break;
-      case "PageDown":
-        ev.preventDefault();
-        this.forwardOneMonth();
-        break;
-      case "Home":
-        ev.preventDefault();
-        this.unfocusCell();
-        this.dayInFocus = 1;
-        forceUpdate(this.el);
-        break;
-      case "End":
-        ev.preventDefault();
-        this.unfocusCell();
-        this.dayInFocus = this.getMonthDays(this.monthInFocus, this.yearInFocus);
-        forceUpdate(this.el);
-        break;
-      case "ArrowLeft":
-        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;
-      case "ArrowRight":
-        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;
-      case "ArrowUp":
-        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;
-      case "ArrowDown":
-        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) {
-    const validKeys = ["Tab", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Enter"];
-    if (validKeys.includes(ev.key)) {
-      this.isTabbing = true;
-    }
-  }
-  //Using mousedown prevents this from running when the keydown listener emits ".click()" for when enter is pressed.
-  toggleTabbingOff() {
-    this.isTabbing = false;
-  }
-  blurHandler(ev) {
-    if (!this.popupClicked && !this.buttonClicked && this.isExpanded) {
-      this.closePopup();
-      // in this case, the PointerEvent target is identical to the blur events relatedTarget, and is passed on as such
-      this.popupBlurred.emit({ relatedTarget: ev.target });
-    }
-    this.popupClicked = false;
-    this.buttonClicked = false;
-  }
-  handleBlurOnWindow(ev) {
-    // for cases where the user clicks or uses a shortcut to leave the document
-    if (this.isExpanded) {
-      this.closePopup();
-      this.popupBlurred.emit({ relatedTarget: ev.target });
-    }
-  }
-  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();
-  }
-  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");
-  }
-  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);
-  }
-  togglePopup() {
-    this.isExpanded ? this.closePopup() : this.openPopup();
-    this.buttonClicked = true;
-  }
-  closePopup(returnFocus = false) {
-    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");
-    if (returnFocus) {
-      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();
-  }
-  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;
-  }
-  // 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(true);
-  }
-  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();
-  }
-  trapFocusLeft(ev) {
-    if (ev.shiftKey && ev.key === "Tab") {
-      ev.preventDefault();
-      this.focusCellInView();
-    }
-  }
-  trapFocusEnd(ev) {
-    if (!ev.shiftKey && ev.key === "Tab") {
-      ev.preventDefault();
-      this.prevButton.focus();
-    }
-  }
-  trapFocusRight(ev) {
-    if (!ev.shiftKey && ev.key === "Tab") {
-      ev.preventDefault();
-      this.focusCellInView();
-    }
-  }
-  focusCellInView() {
-    if (this.view === "day") {
-      this.focusCell();
-    }
-    else {
-      this.focusMonth();
-    }
-  }
-  toggleBusyAttribute(state) {
-    this.el.querySelector("#wm-container").setAttribute("aria-busy", state);
-  }
-  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;
-  }
-  updateLiveRegion(text) {
-    let liveRegion = this.el.querySelector("#live-region");
-    liveRegion.innerHTML = text;
-  }
-  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;
-  }
-  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));
-  }
-  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" : ""} ${this.isTabbing ? "user-is-tabbing" : ""}`, 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.key === "Enter" || ev.key === " ") {
-                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.key === "Enter" || ev.key === " ") {
-                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": {},
-    "isTabbing": {}
-  }; }
-  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": {}
-      }
-    }, {
-      "method": "popupBlurred",
-      "name": "popupBlurred",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "{ relatedTarget: EventTarget | null }",
-        "resolved": "{ relatedTarget: EventTarget | null; }",
-        "references": {
-          "EventTarget": {
-            "location": "global"
-          }
-        }
-      }
-    }]; }
-  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
-    }, {
-      "name": "blur",
-      "method": "handleBlurOnWindow",
-      "target": "window",
-      "capture": false,
-      "passive": false
-    }]; }
-}
+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.isTabbing = false;
+    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.key) {
+      case "Enter":
+        ev.preventDefault();
+        //Clunky exception for blur validation. Remove when blur reworked.
+        !ev.target.id.includes("popup-title") && ev.target.click();
+        break;
+      case "Escape":
+        ev.preventDefault();
+        if (this.isExpanded) {
+          ev.stopPropagation(); // prevents closing of parent modal
+          this.closePopup(true);
+        }
+        break;
+      case "PageUp":
+        ev.preventDefault();
+        this.backOneMonth();
+        break;
+      case "PageDown":
+        ev.preventDefault();
+        this.forwardOneMonth();
+        break;
+      case "Home":
+        ev.preventDefault();
+        this.unfocusCell();
+        this.dayInFocus = 1;
+        forceUpdate(this.el);
+        break;
+      case "End":
+        ev.preventDefault();
+        this.unfocusCell();
+        this.dayInFocus = this.getMonthDays(this.monthInFocus, this.yearInFocus);
+        forceUpdate(this.el);
+        break;
+      case "ArrowLeft":
+        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;
+      case "ArrowRight":
+        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;
+      case "ArrowUp":
+        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;
+      case "ArrowDown":
+        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) {
+    const validKeys = ["Tab", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Enter"];
+    if (validKeys.includes(ev.key)) {
+      this.isTabbing = true;
+    }
+  }
+  //Using mousedown prevents this from running when the keydown listener emits ".click()" for when enter is pressed.
+  toggleTabbingOff() {
+    this.isTabbing = false;
+  }
+  blurHandler(ev) {
+    if (!this.popupClicked && !this.buttonClicked && this.isExpanded) {
+      this.closePopup();
+      // in this case, the PointerEvent target is identical to the blur events relatedTarget, and is passed on as such
+      this.popupBlurred.emit({ relatedTarget: ev.target });
+    }
+    this.popupClicked = false;
+    this.buttonClicked = false;
+  }
+  handleBlurOnWindow(ev) {
+    // for cases where the user clicks or uses a shortcut to leave the document
+    if (this.isExpanded) {
+      this.closePopup();
+      this.popupBlurred.emit({ relatedTarget: ev.target });
+    }
+  }
+  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();
+  }
+  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");
+  }
+  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);
+  }
+  togglePopup() {
+    this.isExpanded ? this.closePopup() : this.openPopup();
+    this.buttonClicked = true;
+  }
+  closePopup(returnFocus = false) {
+    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");
+    if (returnFocus) {
+      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();
+  }
+  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;
+  }
+  // 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(true);
+  }
+  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();
+  }
+  trapFocusLeft(ev) {
+    if (ev.shiftKey && ev.key === "Tab") {
+      ev.preventDefault();
+      this.focusCellInView();
+    }
+  }
+  trapFocusEnd(ev) {
+    if (!ev.shiftKey && ev.key === "Tab") {
+      ev.preventDefault();
+      this.prevButton.focus();
+    }
+  }
+  trapFocusRight(ev) {
+    if (!ev.shiftKey && ev.key === "Tab") {
+      ev.preventDefault();
+      this.focusCellInView();
+    }
+  }
+  focusCellInView() {
+    if (this.view === "day") {
+      this.focusCell();
+    }
+    else {
+      this.focusMonth();
+    }
+  }
+  toggleBusyAttribute(state) {
+    this.el.querySelector("#wm-container").setAttribute("aria-busy", state);
+  }
+  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;
+  }
+  updateLiveRegion(text) {
+    let liveRegion = this.el.querySelector("#live-region");
+    liveRegion.innerHTML = text;
+  }
+  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;
+  }
+  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));
+  }
+  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" : ""} ${this.isTabbing ? "user-is-tabbing" : ""}`, 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.key === "Enter" || ev.key === " ") {
+                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.key === "Enter" || ev.key === " ") {
+                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": {},
+    "isTabbing": {}
+  }; }
+  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": {}
+      }
+    }, {
+      "method": "popupBlurred",
+      "name": "popupBlurred",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "{ relatedTarget: EventTarget | null }",
+        "resolved": "{ relatedTarget: EventTarget | null; }",
+        "references": {
+          "EventTarget": {
+            "location": "global"
+          }
+        }
+      }
+    }]; }
+  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
+    }, {
+      "name": "blur",
+      "method": "handleBlurOnWindow",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }]; }
+}