@watermarkinsights/ripple 0.0.0 → 0.1.0-alpha.0

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

@@ -0,0 +1,881 @@
+import { h, Host } from "@stencil/core";
+import { intl, dateFind, getMonthLength, makeISO, calendar_months, weekdays, clampDate, } from "../../../global/functions";
+import { generateId } from "../../../global/functions";
+import { showTooltip, hideTooltip } from "../../../global/functions";
+export class PrivCalendar {
+    constructor() {
+        this.today = this.dateToISO(new Date());
+        this.calType = "single";
+        this.calName = "";
+        this.calInstructions = 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.",
+        });
+        this.previousMonthButtonLabel = intl.formatMessage({
+            id: "date.selectPreviousMonth",
+            defaultMessage: "View previous month",
+            description: "Calendar button",
+        });
+        this.previousYearButtonLabel = intl.formatMessage({
+            id: "date.selectPreviousYear",
+            defaultMessage: "View previous year",
+            description: "Calendar button",
+        });
+        this.nextMonthButtonLabel = intl.formatMessage({
+            id: "date.selectNextMonth",
+            defaultMessage: "View next month",
+            description: "Calendar button",
+        });
+        this.nextYearButtonLabel = intl.formatMessage({
+            id: "date.selectNextYear",
+            defaultMessage: "View next year",
+            description: "Calendar button",
+        });
+        this.uid = generateId();
+        this._focus = {
+            year: {
+                asString: () => dateFind.year.asString(this.focusDate),
+                asInt: () => dateFind.year.asInt(this.focusDate),
+                set: (y) => {
+                    const m = this._focus.month.asInt();
+                    const d = this._focus.day.asInt();
+                    this.focusDate = makeISO(y, m, d);
+                },
+                increase: (n) => {
+                    const newDate = dateFind.year.increase(this.focusDate, n);
+                    this.focusDate = newDate;
+                },
+                decrease: (n) => {
+                    const newDate = dateFind.year.decrease(this.focusDate, n);
+                    this.focusDate = newDate;
+                },
+            },
+            month: {
+                asString: () => dateFind.month.asString(this.focusDate),
+                asInt: () => dateFind.month.asInt(this.focusDate),
+                set: (m) => {
+                    const y = this._focus.year.asInt();
+                    const d = this._focus.day.asInt();
+                    this.focusDate = makeISO(y, m, d);
+                },
+                increase: (n) => {
+                    const newDate = dateFind.month.increase(this.focusDate, n);
+                    this.focusDate = clampDate(newDate);
+                },
+                decrease: (n) => {
+                    const newDate = dateFind.month.decrease(this.focusDate, n);
+                    this.focusDate = clampDate(newDate);
+                },
+            },
+            day: {
+                asString: () => dateFind.day.asString(this.focusDate),
+                asInt: () => dateFind.day.asInt(this.focusDate),
+                set: (d) => {
+                    const y = this._focus.year.asInt();
+                    const m = this._focus.month.asInt();
+                    d = d === -1 ? getMonthLength(m, y) : d;
+                    this.focusDate = makeISO(y, m, d);
+                },
+                increase: (n) => {
+                    const newDate = dateFind.day.increase(this.focusDate, n);
+                    this.focusDate = newDate;
+                },
+                decrease: (n) => {
+                    const newDate = dateFind.day.decrease(this.focusDate, n);
+                    this.focusDate = newDate;
+                },
+            },
+        };
+        this.monthButtonFocus = {
+            set: (i) => {
+                const buttons = Array.from(this.el.querySelectorAll(".month"));
+                const selButton = buttons.filter((b) => b.classList.contains("focused"))[0];
+                selButton.classList.remove("selected");
+                selButton.tabIndex = -1;
+                buttons[i - 1].classList.add("selected");
+                buttons[i - 1].tabIndex = 0;
+                buttons[i - 1].focus();
+            },
+            increase: (i) => {
+                const buttons = Array.from(this.el.querySelectorAll(".month"));
+                const selButton = buttons.filter((b) => b.classList.contains("focused"))[0];
+                const oldIndex = buttons.indexOf(selButton);
+                const newIndex = (oldIndex + i) % 12;
+                if (newIndex < oldIndex) {
+                    this._focus.year.increase(1);
+                }
+                selButton.classList.remove("focused");
+                selButton.tabIndex = -1;
+                buttons[newIndex].classList.add("focused");
+                buttons[newIndex].tabIndex = 0;
+                buttons[newIndex].focus();
+            },
+            decrease: (i) => {
+                const buttons = Array.from(this.el.querySelectorAll(".month"));
+                const selButton = buttons.filter((b) => b.classList.contains("focused"))[0];
+                const oldIndex = buttons.indexOf(selButton);
+                // ensure no neg values for modulo
+                let newIndex = oldIndex + 24;
+                newIndex = (newIndex - i) % 12;
+                if (newIndex > oldIndex) {
+                    this._focus.year.decrease(1);
+                }
+                selButton.classList.remove("focused");
+                selButton.tabIndex = -1;
+                buttons[newIndex].classList.add("focused");
+                buttons[newIndex].tabIndex = 0;
+                buttons[newIndex].focus();
+            },
+        };
+        this.renderCalendarDate = (date, eitherStart, eitherEnd) => {
+            if (date === "placeholder") {
+                return h("div", { role: "gridcell" });
+            }
+            const monthOfDate = dateFind.month.asInt(date);
+            const dayOfDate = dateFind.day.asInt(date);
+            const yearOfDate = dateFind.year.asInt(date);
+            const isStartDate = eitherStart && eitherStart === date;
+            let selected = isStartDate ? "true" : "false";
+            const classesArr = ["date-cell"];
+            const isFocused = date === this.focusDate;
+            const isToday = date === this.today;
+            if (isToday)
+                classesArr.push("today");
+            if (this.calType === "range") {
+                const isEndDate = eitherStart && eitherEnd && eitherEnd === date && eitherStart < eitherEnd;
+                selected = isEndDate ? "true" : selected;
+                const isFirstOfMonth = dayOfDate === 1;
+                const isLastOfMonth = dayOfDate === getMonthLength(monthOfDate, yearOfDate);
+                const isInRange = this.isInRange(date);
+                const isInRangePreview = this.isInRangePreview(date);
+                const isPreviewStartOrEnd = !eitherEnd && eitherStart && this.hoverDate && date === this.hoverDate;
+                const isPreviewStart = isPreviewStartOrEnd && this.hoverDate < eitherStart;
+                const isPreviewEnd = isPreviewStartOrEnd && this.hoverDate > eitherStart;
+                if (isFirstOfMonth)
+                    classesArr.push("first-of-month");
+                if (isLastOfMonth)
+                    classesArr.push("last-of-month");
+                if (isStartDate) {
+                    if (isInRangePreview && !isEndDate && this.hoverDate && this.hoverDate < eitherStart) {
+                        // invert the arrow direction if user mouses over a prior date
+                        classesArr.push("range-end");
+                    }
+                    else {
+                        classesArr.push("range-start");
+                    }
+                }
+                if (isEndDate)
+                    classesArr.push("range-end");
+                if (isInRange)
+                    classesArr.push("in-range");
+                if (isInRangePreview)
+                    classesArr.push("in-range preview");
+                if (isPreviewStart)
+                    classesArr.push("preview-start");
+                if (isPreviewEnd)
+                    classesArr.push("preview-end");
+            }
+            const classes = classesArr.join(" ");
+            return (h("div", { role: "gridcell", id: `cell-${date}-${this.uid}`, class: classes, "aria-selected": selected, "aria-label": `${isToday
+                    ? `${intl.formatMessage({
+                        id: "date.today",
+                        defaultMessage: "today",
+                        description: "calendar button",
+                    })}, `
+                    : ""}${calendar_months[monthOfDate - 1]} ${dayOfDate}, ${yearOfDate}`, onClick: (ev) => {
+                    this.handleDateClick(ev.target);
+                }, onMouseOver: () => this.cellHovered.emit(date), "data-month": dateFind.month.asString(date), "data-year": dateFind.year.asString(date), onBlur: (ev) => ev.stopPropagation(), tabIndex: isFocused ? 0 : -1 }, dayOfDate));
+        };
+        this.disabled = false;
+        this.view = "day";
+        this.focusDate = this.today;
+        this.startDate = undefined;
+        this.endDate = undefined;
+        this.hoverDate = undefined;
+        this.announcement = "";
+    }
+    setCalName() {
+        const cals = this.el.parentElement.querySelectorAll("priv-calendar");
+        let calname;
+        // if the parent el only contains one calendar
+        if (cals.length === 1) {
+            calname = intl.formatMessage({
+                id: "date.calName",
+                defaultMessage: "Calendar. ",
+            });
+            // if this calendar is the first of the two
+        }
+        else if (cals[0] === this.el) {
+            calname = intl.formatMessage({
+                id: "date.firstCalName",
+                defaultMessage: "First calendar. ",
+            });
+        }
+        else {
+            calname = intl.formatMessage({
+                id: "date.secondCalName",
+                defaultMessage: "Second calendar. ",
+            });
+        }
+        this.calName = calname;
+    }
+    setCalType() {
+        const cals = this.el.parentElement.querySelectorAll("priv-calendar");
+        // if the parent el only contains one calendar
+        this.calType = cals.length === 1 ? "single" : "range";
+    }
+    componentWillLoad() {
+        this.setCalName();
+        this.setCalType();
+    }
+    handleFocusDate(newVal, oldVal) {
+        if (this.view === "day") {
+            const oldCell = this.getCell(oldVal);
+            if (oldCell)
+                oldCell.tabIndex = -1;
+            const newCell = this.getCell(newVal);
+            if (newCell)
+                newCell.tabIndex = 0;
+        }
+        else {
+            const oldMonthEl = this.el.querySelector(`#month-${dateFind.month.asInt(oldVal)}-${this.uid}`);
+            if (oldMonthEl)
+                oldMonthEl.tabIndex = -1;
+            const newMonthEl = this.el.querySelector(`#month-${dateFind.month.asInt(newVal)}-${this.uid}`);
+            if (newMonthEl)
+                newMonthEl.tabIndex = 0;
+            //monthToFocus.focus();
+        }
+        this.dateFocus.emit();
+    }
+    get otherCalEl() {
+        const bothCals = this.el.parentElement.querySelectorAll("priv-calendar");
+        let val;
+        if (bothCals.length === 2) {
+            val = bothCals[0] === this.el ? bothCals[1] : bothCals[0];
+        }
+        // returns undefined for wm-datepicker
+        // or possibly on first load if everything hasn't loaded yet
+        return val;
+    }
+    get headerButtonEls() {
+        return Array.from(this.el.querySelectorAll(".header-btn"));
+    }
+    handleKey(ev) {
+        const activeEl = (document.activeElement.shadowRoot || document).activeElement;
+        switch (ev.key) {
+            case " ":
+            case "Enter":
+                ev.preventDefault();
+                //Clunky exception for blur validation. Remove when blur reworked.
+                !ev.target.id.includes("popup-title") && ev.target.click();
+                break;
+            case "PageUp":
+                ev.preventDefault();
+                if (this.view === "day") {
+                    this._focus.month.decrease(1);
+                    this.focusCell();
+                }
+                else {
+                    this._focus.year.decrease(1);
+                }
+                break;
+            case "PageDown":
+                ev.preventDefault();
+                if (this.view === "day") {
+                    this._focus.month.increase(1);
+                    this.focusCell();
+                }
+                else {
+                    this._focus.year.increase(1);
+                }
+                break;
+            case "Home":
+                ev.preventDefault();
+                if (this.view === "day") {
+                    this._focus.day.set(1);
+                    this.focusCell();
+                }
+                else {
+                    this.monthButtonFocus.set(1);
+                }
+                break;
+            case "End":
+                ev.preventDefault();
+                if (this.view === "day") {
+                    this._focus.day.set(-1);
+                    this.focusCell();
+                }
+                else {
+                    this.monthButtonFocus.set(12);
+                }
+                break;
+            case "ArrowLeft":
+                if (activeEl.classList.contains("date-cell") || activeEl.classList.contains("month")) {
+                    ev.preventDefault();
+                    if (this.view === "day") {
+                        this._focus.day.decrease(1);
+                        this.focusCell();
+                    }
+                    else {
+                        this.monthButtonFocus.decrease(1);
+                    }
+                }
+                break;
+            case "ArrowRight":
+                if (activeEl.classList.contains("date-cell") || activeEl.classList.contains("month")) {
+                    ev.preventDefault();
+                    if (this.view === "day") {
+                        this._focus.day.increase(1);
+                        this.focusCell();
+                    }
+                    else {
+                        this.monthButtonFocus.increase(1);
+                    }
+                }
+                break;
+            case "ArrowUp":
+                if (activeEl.classList.contains("date-cell") || activeEl.classList.contains("month")) {
+                    ev.preventDefault();
+                    if (this.view === "day") {
+                        this._focus.day.decrease(7);
+                        this.focusCell();
+                    }
+                    else {
+                        this.monthButtonFocus.decrease(3);
+                    }
+                }
+                break;
+            case "ArrowDown":
+                if (activeEl.classList.contains("arw-btn")) {
+                    ev.preventDefault();
+                    this.focusCell();
+                }
+                if (activeEl.classList.contains("date-cell") || activeEl.classList.contains("month")) {
+                    ev.preventDefault();
+                    if (this.view === "day") {
+                        this._focus.day.increase(7);
+                        this.focusCell();
+                    }
+                    else if (this.view === "month") {
+                        this.monthButtonFocus.increase(3);
+                    }
+                }
+                break;
+        }
+    }
+    handleDateClick(el) {
+        const detail = { cal: this.el, cell: el };
+        this.cellTriggered.emit(detail);
+        // change of input value will trigger the function updating selectedDate
+    }
+    removeZeroes(date) {
+        return +date < 10 ? +date.slice(1) : +date;
+    }
+    dateToISO(date) {
+        const dateArr = [
+            date.getUTCFullYear().toString().padStart(4, "0"),
+            (date.getUTCMonth() + 1).toString().padStart(2, "0"),
+            date.getUTCDate().toString().padStart(2, "0"),
+        ];
+        return dateArr.join("-");
+    }
+    isInRange(date) {
+        if (this.otherCalEl) {
+            const eitherStart = this.startDate || this.otherCalEl.startDate;
+            const eitherEnd = this.endDate || this.otherCalEl.endDate;
+            if (eitherStart && eitherEnd) {
+                // if both dates exist the range is shown
+                return eitherStart <= date && date <= eitherEnd;
+            }
+        }
+        return false;
+    }
+    isInRangePreview(date) {
+        if (this.otherCalEl) {
+            const eitherStart = this.startDate || this.otherCalEl.startDate;
+            const eitherEnd = this.endDate || this.otherCalEl.endDate;
+            // no preview if there's an existing range
+            if (eitherStart && eitherEnd)
+                return false;
+            if (eitherStart && this.hoverDate) {
+                // if only startDate exists, the hovered date functions as the other end of the range
+                if (this.hoverDate > eitherStart) {
+                    return eitherStart <= date && date <= this.hoverDate;
+                }
+                else if (this.hoverDate < eitherStart) {
+                    // user is mousing over a date prior to the start date
+                    // start date considered as end of range
+                    return this.hoverDate <= date && date <= eitherStart;
+                } // if neither < or > then it's the same date and should return false
+            }
+            else if (eitherEnd && this.hoverDate) {
+                // if only endDate exists, the hovered date functions as the other end of the range
+                if (this.hoverDate < eitherEnd) {
+                    return this.hoverDate <= date && date <= eitherEnd;
+                }
+                else if (this.hoverDate > eitherEnd) {
+                    // user is mousing over a date later than the end date
+                    // end date considered as beggining of range
+                    return eitherEnd <= date && date <= this.hoverDate;
+                }
+            }
+        }
+        return false;
+    }
+    // 1 => Sunday, 7 => Saturday
+    getMonthFirstDay(month, year) {
+        return +new Date(year, month - 1, 1, 12, 0, 0).getDay() + 1;
+    }
+    getCalendarDates(date) {
+        const month = dateFind.month.asInt(date);
+        const year = dateFind.year.asInt(date);
+        // Get number of days in the month and the month's first day
+        const monthDays = getMonthLength(month, year);
+        // Builds dates to be displayed from current month.
+        const dates = [...new Array(monthDays).fill(undefined)].map((_, index) => {
+            const day = index + 1;
+            return makeISO(year, month, day);
+        });
+        // Get number of empty cells from previous and next months
+        // These ensure a total of 42 days (6 weeks) displayed on the calendar
+        const monthFirstDay = this.getMonthFirstDay(month, year);
+        const numBefore = monthFirstDay - 1;
+        const cellsBefore = numBefore > 0 ? new Array(numBefore).fill("placeholder") : [];
+        let numAfter = 42 - (numBefore + monthDays);
+        numAfter = numAfter > 6 ? numAfter - 7 : numAfter;
+        const cellsAfter = numAfter > 0 ? new Array(numAfter).fill("placeholder") : [];
+        return [...cellsBefore, ...dates, ...cellsAfter];
+    }
+    getCell(date) {
+        return this.el.querySelector(`#cell-${date}-${this.uid}`);
+    }
+    async focusFirstFocusable() {
+        this.prevBtnEl.focus();
+    }
+    async focusLastFocusable() {
+        this.focusCell();
+    }
+    async focusCell() {
+        requestAnimationFrame(() => {
+            // 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 = getMonthLength(this._focus.month.asInt(), this._focus.year.asInt());
+            const dayToFocus = this._focus.day.asInt();
+            if (dayToFocus > maxDays) {
+                this._focus.day.set(maxDays);
+            }
+            if (this.view == "day") {
+                const cellToFocus = this.getCell(this.focusDate);
+                if (cellToFocus) {
+                    cellToFocus.tabIndex = 0;
+                    cellToFocus.focus();
+                }
+                this.cellHovered.emit(this.focusDate);
+            }
+            else {
+                const monthToFocus = this.el.querySelector(`#month-${this._focus.month.asInt()}-${this.uid}`);
+                if (monthToFocus) {
+                    monthToFocus.tabIndex = 0;
+                    monthToFocus.focus();
+                }
+            }
+        });
+    }
+    toggleBusyAttribute(state) {
+        this.el.querySelector("#wm-container").setAttribute("aria-busy", state);
+    }
+    announce(message) {
+        // \u00A0 is a non-breaking space character, which causes the message to be read as a new one
+        if (this.liveRegionEl.textContent === message) {
+            message += "\u00A0";
+        }
+        this.announcement = message;
+    }
+    announceMonthYear() {
+        this.announce(`${calendar_months[dateFind.month.asInt(this.focusDate) - 1]} ${dateFind.year.asInt(this.focusDate)}`);
+    }
+    renderMonth(month, index) {
+        return (h("button", { id: `month-${index + 1}-${this.uid}`, class: `month ${this._focus.month.asInt() === index + 1 ? "selected focused" : ""}`, role: "gridcell", tabindex: index + 1 === this._focus.month.asInt() ? 0 : -1, onBlur: (ev) => ev.stopPropagation(), onClick: () => {
+                this._focus.month.set(index + 1);
+                this.view = "day";
+                this.focusCell();
+            } }, month));
+    }
+    renderHeader() {
+        const previousButtonLabel = this.view == "day" ? this.previousMonthButtonLabel : this.previousYearButtonLabel;
+        const nextButtonLabel = this.view == "day" ? this.nextMonthButtonLabel : this.nextYearButtonLabel;
+        return (h("div", { class: "calendar-header" }, h("button", { onClick: () => {
+                if (this.view == "day") {
+                    this._focus.month.decrease(1);
+                }
+                else if (this.view == "month") {
+                    this._focus.year.decrease(1);
+                }
+                this.announceMonthYear();
+            }, class: "header-btn arw-btn", ref: (el) => (this.prevBtnEl = el), "aria-label": previousButtonLabel, onMouseOver: () => showTooltip("right", this.prevBtnEl, previousButtonLabel), onMouseLeave: () => hideTooltip(), onFocus: () => showTooltip("right", this.prevBtnEl, previousButtonLabel), onBlur: () => hideTooltip() }, h("span", { class: "svg-icon svg-previous" })), h("span", { class: "header-title" }, calendar_months[this._focus.month.asInt() - 1], " ", this._focus.year.asString()), h("button", { onClick: () => {
+                if (this.view == "day") {
+                    this._focus.month.increase(1);
+                }
+                else if (this.view == "month") {
+                    this._focus.year.increase(1);
+                }
+                this.announceMonthYear();
+            }, "aria-label": nextButtonLabel, class: "header-btn arw-btn", ref: (el) => (this.nextBtnEl = el), onMouseOver: () => showTooltip("right", this.nextBtnEl, nextButtonLabel), onMouseLeave: () => hideTooltip(), onFocus: () => showTooltip("right", this.nextBtnEl, nextButtonLabel), onBlur: () => hideTooltip() }, h("span", { class: "svg-icon svg-next" })), this.renderToggleButton()));
+    }
+    renderToggleButton() {
+        return (h("div", { class: "toggle-button" }, h("div", { class: "input-wrapper left" }, h("input", { type: "radio", id: `month-radio-${this.uid}`, "aria-label": intl.formatMessage({
+                id: "date.monthView",
+                defaultMessage: "Month view",
+                description: "Calendar button to change to month view",
+            }), name: `rdo-${this.uid}`, class: "toggle-radio-input", checked: this.view === "day", onClick: () => (this.view = "day") }), h("label", { htmlFor: `month-radio-${this.uid}`, class: "radio" }, intl.formatMessage({
+            id: "date.month",
+            defaultMessage: "Month",
+            description: "Calendar button to change to month view",
+        }))), h("div", { class: "input-wrapper right" }, h("input", { type: "radio", id: `year-radio-${this.uid}`, "aria-label": intl.formatMessage({
+                id: "date.yearView",
+                defaultMessage: "Year view",
+                description: "Calendar button to change to year view",
+            }), name: `rdo-${this.uid}`, class: "toggle-radio-input", checked: this.view === "month", onClick: () => (this.view = "month") }), h("label", { htmlFor: `year-radio-${this.uid}`, class: "radio" }, intl.formatMessage({
+            id: "date.year",
+            defaultMessage: "Year",
+            description: "Calendar button to change to year view",
+        })))));
+    }
+    renderDayView() {
+        const dates = this.getCalendarDates(this.focusDate);
+        // the start and end date, set in either of the calendars
+        const eitherStart = this.startDate || (this.otherCalEl && this.otherCalEl.startDate);
+        const eitherEnd = this.endDate || (this.otherCalEl && this.otherCalEl.endDate);
+        return (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", "aria-label": weekdays[0] }, h("span", { "aria-hidden": "true" }, intl.formatMessage({
+            id: "date.su",
+            defaultMessage: "Su",
+            description: "Abbreviated day of the week",
+        }))), h("div", { role: "columnheader", class: "header-cell", "aria-label": weekdays[1] }, h("span", { "aria-hidden": "true" }, intl.formatMessage({
+            id: "date.mo",
+            defaultMessage: "Mo",
+            description: "Abbreviated day of the week",
+        }))), h("div", { role: "columnheader", class: "header-cell", "aria-label": weekdays[2] }, h("span", { "aria-hidden": "true" }, intl.formatMessage({
+            id: "date.tu",
+            defaultMessage: "Tu",
+            description: "Abbreviated day of the week",
+        }))), h("div", { role: "columnheader", class: "header-cell", "aria-label": weekdays[3] }, h("span", { "aria-hidden": "true" }, intl.formatMessage({
+            id: "date.we",
+            defaultMessage: "We",
+            description: "Abbreviated day of the week",
+        }))), h("div", { role: "columnheader", class: "header-cell", "aria-label": weekdays[4] }, h("span", { "aria-hidden": "true" }, intl.formatMessage({
+            id: "date.th",
+            defaultMessage: "Th",
+            description: "Abbreviated day of the week",
+        }))), h("div", { role: "columnheader", class: "header-cell", "aria-label": weekdays[5] }, h("span", { "aria-hidden": "true" }, intl.formatMessage({
+            id: "date.fr",
+            defaultMessage: "Fr",
+            description: "Abbreviated day of the week",
+        }))), h("div", { role: "columnheader", class: "header-cell", "aria-label": weekdays[6] }, h("span", { "aria-hidden": "true" }, 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) => this.renderCalendarDate(date, eitherStart, eitherEnd))), h("div", { role: "row" }, dates.slice(7, 14).map((date) => this.renderCalendarDate(date, eitherStart, eitherEnd))), h("div", { role: "row" }, dates.slice(14, 21).map((date) => this.renderCalendarDate(date, eitherStart, eitherEnd))), h("div", { role: "row" }, dates.slice(21, 28).map((date) => this.renderCalendarDate(date, eitherStart, eitherEnd))), h("div", { role: "row" }, dates.slice(28, 35).map((date) => this.renderCalendarDate(date, eitherStart, eitherEnd))), dates.length > 35 ? (h("div", { role: "row" }, dates.slice(35).map((date) => this.renderCalendarDate(date, eitherStart, eitherEnd)))) : (""))));
+    }
+    renderMonthView() {
+        return (h("div", { class: "month-view" }, h("div", { "aria-labelledby": "popup-title-year", role: "grid", class: "months" }, h("div", { role: "row", class: "month-row" }, calendar_months.slice(0, 3).map((month, index) => this.renderMonth(month, index))), h("div", { role: "row", class: "month-row" }, calendar_months.slice(3, 6).map((month, index) => this.renderMonth(month, index + 3))), h("div", { role: "row", class: "month-row" }, calendar_months.slice(6, 9).map((month, index) => this.renderMonth(month, index + 6))), h("div", { role: "row", class: "month-row" }, calendar_months.slice(9).map((month, index) => this.renderMonth(month, index + 9))))));
+    }
+    render() {
+        return (h(Host, { key: '87ae4c7551bde276374fd21620635033f1b71c7b', onMouseOut: (ev) => {
+                // @ts-ignore
+                if (!this.el.parentElement.contains(ev.toElement))
+                    this.outOfCal.emit();
+            }, role: "application", "aria-describedby": `application-${this.uid}` }, h("div", { key: 'cf3971e7486c2c0656050571411a799e640ac35f', class: `popup ${this.view}-view` }, this.renderHeader(), this.view === "day" ? this.renderDayView() : this.renderMonthView()), h("div", { key: '67078d9ccfc1130cd40c79f0cea4b5c4cbe51630', id: `application-${this.uid}`, class: "sr-only" }, this.calName, this.calInstructions), h("div", { key: '2f7048f93ccd0e8bc3aa1087a63a7a956cce8f16', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "assertive", "aria-atomic": "true" }, this.announcement)));
+    }
+    static get is() { return "priv-calendar"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["priv-calendar.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["priv-calendar.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"
+            },
+            "view": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "view",
+                "reflect": false,
+                "defaultValue": "\"day\""
+            },
+            "focusDate": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "focus-date",
+                "reflect": false,
+                "defaultValue": "this.today"
+            },
+            "startDate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "start-date",
+                "reflect": false
+            },
+            "endDate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "end-date",
+                "reflect": false
+            },
+            "hoverDate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "hover-date",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "announcement": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "cellTriggered",
+                "name": "cellTriggered",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ cal: HTMLPrivCalendarElement; cell: HTMLElement }",
+                    "resolved": "{ cal: HTMLPrivCalendarElement; cell: HTMLElement; }",
+                    "references": {
+                        "HTMLPrivCalendarElement": {
+                            "location": "global",
+                            "id": "global::HTMLPrivCalendarElement"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "cellHovered",
+                "name": "cellHovered",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "outOfCal",
+                "name": "outOfCal",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "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"
+                        }
+                    }
+                }
+            }, {
+                "method": "dateFocus",
+                "name": "dateFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "focusFirstFocusable": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "focusLastFocusable": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "focusCell": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLTableCellElement": {
+                            "location": "global",
+                            "id": "global::HTMLTableCellElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "focusDate",
+                "methodName": "handleFocusDate"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKey",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}