@watermarkinsights/ripple 5.13.0 → 5.13.1-0

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

@@ -0,0 +1,840 @@
+import { h, Host } from "@stencil/core";
+import { intl, dateFind, getMonthLength, makeISO, calendar_months, weekdays } 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._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 = newDate;
+                },
+                decrease: (n) => {
+                    const newDate = dateFind.month.decrease(this.focusDate, n);
+                    this.focusDate = 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, index, 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}`, class: classes, "aria-selected": selected, "aria-label": `${isToday
+                    ? `${intl.formatMessage({
+                        id: "date.today",
+                        defaultMessage: "today",
+                        description: "calendar button",
+                    })}, `
+                    : ""}${weekdays[index]}, ${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;
+    }
+    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)}`);
+            if (oldMonthEl)
+                oldMonthEl.tabIndex = -1;
+            const newMonthEl = this.el.querySelector(`#month-${dateFind.month.asInt(newVal)}`);
+            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) {
+        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":
+                ev.preventDefault();
+                if (this.view === "day") {
+                    this._focus.day.decrease(1);
+                    // if the month changes as a result of this navigation, calendar must render the correct month before the proper cell can be focused
+                    this.focusCell();
+                }
+                else {
+                    this.monthButtonFocus.decrease(1);
+                }
+                break;
+            case "ArrowRight":
+                ev.preventDefault();
+                if (this.view === "day") {
+                    this._focus.day.increase(1);
+                    this.focusCell();
+                }
+                else {
+                    this.monthButtonFocus.increase(1);
+                }
+                break;
+            case "ArrowUp":
+                ev.preventDefault();
+                if (this.view === "day") {
+                    this._focus.day.decrease(7);
+                    this.focusCell();
+                }
+                else {
+                    this.monthButtonFocus.decrease(3);
+                }
+                break;
+            case "ArrowDown":
+                ev.preventDefault();
+                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._focus.day.increase(7);
+                    this.focusCell();
+                }
+                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.classList.contains("header-btn")) {
+                        this.focusCell();
+                        break;
+                    }
+                    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}`);
+    }
+    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()}`);
+                if (monthToFocus) {
+                    monthToFocus.tabIndex = 0;
+                    monthToFocus.focus();
+                }
+            }
+        });
+    }
+    toggleBusyAttribute(state) {
+        this.el.querySelector("#wm-container").setAttribute("aria-busy", state);
+    }
+    renderMonth(month, index) {
+        return (h("button", { id: `month-${index + 1}`, 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));
+    }
+    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", { class: "popup day-view" }, h("div", { class: "calendar-header" }, h("button", { onClick: () => {
+                this._focus.month.decrease(1);
+            }, class: "header-btn arw-btn", ref: (el) => (this.prevBtnEl = el), "aria-label": intl.formatMessage({
+                id: "date.selectPreviousMonth",
+                defaultMessage: "Select previous month",
+                description: "Calendar button",
+            }) }, h("span", { class: "svg-icon svg-previous" })), h("div", { id: "popup-title-month", class: "header-btn title-box", tabindex: "0", role: "button", onKeyDown: (ev) => {
+                if (ev.key === "Enter" || ev.key === " ") {
+                    ev.preventDefault();
+                    this.view = "month";
+                }
+            }, onClick: () => (this.view = "month"), "aria-label": `${intl.formatMessage({
+                id: "date.currentMonth",
+                defaultMessage: "current month",
+                description: "Calendar button",
+            })}: ${calendar_months[this._focus.month.asInt() - 1]}
+              ${this._focus.year.asString()}.`, "aria-describedby": "month-title" }, h("span", { class: "title", "aria-hidden": "true" }, calendar_months[this._focus.month.asInt() - 1], " ", this._focus.year.asString()), h("span", { class: "svg-icon svg-expand-more" })), h("button", { onClick: () => {
+                this._focus.month.increase(1);
+            }, "aria-label": intl.formatMessage({
+                id: "date.selectNextMonth",
+                defaultMessage: "Select next month",
+                description: "Calendar button",
+            }), class: "header-btn arw-btn" }, h("span", { class: "svg-icon svg-next" }))), 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, eitherStart, eitherEnd))), h("div", { role: "row" }, dates.slice(7, 14).map((date, i) => this.renderCalendarDate(date, i, eitherStart, eitherEnd))), h("div", { role: "row" }, dates.slice(14, 21).map((date, i) => this.renderCalendarDate(date, i, eitherStart, eitherEnd))), h("div", { role: "row" }, dates.slice(21, 28).map((date, i) => this.renderCalendarDate(date, i, eitherStart, eitherEnd))), h("div", { role: "row" }, dates.slice(28, 35).map((date, i) => this.renderCalendarDate(date, i, eitherStart, eitherEnd))), dates.length > 35 ? (h("div", { role: "row" }, dates.slice(35).map((date, i) => this.renderCalendarDate(date, i, eitherStart, eitherEnd)))) : ("")))));
+    }
+    renderMonthView() {
+        return (h("div", { class: "month-view" }, h("div", { class: "calendar-header" }, h("button", { onClick: () => {
+                this._focus.year.decrease(1);
+            }, "aria-label": intl.formatMessage({
+                id: "date.selectPreviousYear",
+                defaultMessage: "Select previous year",
+                description: "Calendar button",
+            }), class: "header-btn arw-btn", ref: (el) => (this.prevBtnEl = el) }, h("span", { class: "svg-icon svg-previous" })), h("div", { id: "popup-title-year", tabindex: "0", class: "header-btn title-box year", role: "button", onClick: () => (this.view = "day"), onKeyDown: (ev) => {
+                if (ev.key === "Enter" || ev.key === " ") {
+                    ev.preventDefault();
+                    this.view = "day";
+                }
+            }, "aria-labelledby": "year-title" }, h("span", { class: "title" }, this._focus.year.asString()), h("span", { class: "svg-icon svg-expand-less" })), h("button", { onClick: () => {
+                this._focus.year.increase(1);
+            }, "aria-label": intl.formatMessage({
+                id: "date.selectNextYear",
+                defaultMessage: "Select next year",
+                description: "Calendar button",
+            }), class: "header-btn arw-btn" }, h("span", { class: "svg-icon svg-next" }))), 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: '500ef2d223ffe8e8b5ff8303b45f26b7538adb06', onMouseOut: (ev) => {
+                // @ts-ignore
+                if (!this.el.parentElement.contains(ev.toElement))
+                    this.outOfCal.emit();
+            }, role: "application", "aria-describedby": "application" }, this.view === "day" ? this.renderDayView() : this.renderMonthView(), h("div", { key: 'd91690922cc11ad991937dd87cd618d175bca76f', id: "application", class: "sr-only" }, this.calName, this.calInstructions)));
+    }
+    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 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
+            }];
+    }
+}