@watermarkinsights/ripple 5.2.0 → 5.3.0-0

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

@@ -1,942 +0,0 @@
-import { h } from "@stencil/core";
-import { forceUpdate } from "@stencil/core";
-import { intl, hasRoomRight, shouldOpenUp } from "../../../global/functions";
-export class PrivDatepicker {
-    constructor() {
-        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}`, 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(), tabIndex: -1 }, dayOfDate));
-        };
-        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;
-    }
-    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;
-        }
-    }
-    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();
-    }
-    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}`);
-    }
-    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}`);
-        monthToUnfocus.tabIndex = -1;
-    }
-    focusMonth() {
-        const monthToFocus = this.el.querySelector(`#month-${this.monthNumInFocus}`);
-        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() {
-        const parentDatepickerEl = this.el.getRootNode().host;
-        const labelHeight = parentDatepickerEl.shadowRoot.querySelector(".label-wrapper").clientHeight;
-        this.openUp = shouldOpenUp(parentDatepickerEl, this.popupEl.clientHeight, labelHeight);
-        if (hasRoomRight(parentDatepickerEl, 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}`, 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", ref: (el) => (this.buttonEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle" }, h("span", { class: "calendar", title: intl.formatMessage({
-                id: "date.calendarView",
-                defaultMessage: "Calendar View",
-                description: "Calendar button",
-            }) })), h("div", { class: `popup ${this.view}-view ${this.openUp ? "expand-upwards" : ""}`, id: "popup", 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", 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", 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", 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", 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": false,
-                "defaultValue": "\"day\""
-            },
-            "date": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "Date",
-                    "resolved": "Date",
-                    "references": {
-                        "Date": {
-                            "location": "global",
-                            "id": "global::Date"
-                        }
-                    }
-                },
-                "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"
-            }
-        };
-    }
-    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",
-                            "id": "global::HTMLElement"
-                        }
-                    }
-                }
-            }, {
-                "method": "toggleButtonClicked",
-                "name": "toggleButtonClicked",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "HTMLButtonElement",
-                    "resolved": "HTMLButtonElement",
-                    "references": {
-                        "HTMLButtonElement": {
-                            "location": "global",
-                            "id": "global::HTMLButtonElement"
-                        }
-                    }
-                }
-            }, {
-                "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",
-                            "id": "global::EventTarget"
-                        }
-                    }
-                }
-            }];
-    }
-    static get elementRef() { return "el"; }
-    static get listeners() {
-        return [{
-                "name": "keydown",
-                "method": "handleKey",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "click",
-                "method": "blurHandler",
-                "target": "document",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "blur",
-                "method": "handleBlurOnWindow",
-                "target": "window",
-                "capture": false,
-                "passive": false
-            }];
-    }
-}