@watermarkinsights/ripple 5.2.0 → 5.3.0-0

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

@@ -0,0 +1,816 @@
+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._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 isToday = date === this.today;
+            const isStartDate = this.startDate && this.startDate === date;
+            const isEndDate = eitherStart && this.endDate && this.endDate === date && eitherStart < this.endDate;
+            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;
+            const isFocused = date === this.focusDate;
+            const classesArr = ["date-cell"];
+            if (isToday)
+                classesArr.push("today");
+            if (isFirstOfMonth)
+                classesArr.push("first-of-month");
+            if (isLastOfMonth)
+                classesArr.push("last-of-month");
+            if (isStartDate) {
+                if (isInRangePreview && !isEndDate && this.hoverDate && this.hoverDate < this.startDate) {
+                    // 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": isStartDate || isEndDate ? "true" : "false", "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;
+    }
+    get calName() {
+        const bothCals = this.el.parentElement.querySelectorAll("priv-calendar");
+        let calname;
+        // if the parent el only contains one calendar
+        if (bothCals.length === 1) {
+            calname = intl.formatMessage({
+                id: "date.calName",
+                defaultMessage: "Calendar. ",
+            });
+            // if this calendar is the first of the two
+        }
+        else if (bothCals[0] === this.el) {
+            calname = intl.formatMessage({
+                id: "date.firstCalName",
+                defaultMessage: "First calendar. ",
+            });
+        }
+        else {
+            calname = intl.formatMessage({
+                id: "date.secondCalName",
+                defaultMessage: "Second calendar. ",
+            });
+        }
+        return calname;
+    }
+    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")) {
+                        const monthId = `#month-${this._focus.month.asInt()}`;
+                        const monthToFocus = this.el.querySelector(monthId);
+                        monthToFocus.tabIndex = 0;
+                        monthToFocus.focus();
+                        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 _startDate = this.startDate || this.otherCalEl.startDate;
+            const _endDate = this.endDate || this.otherCalEl.endDate;
+            if (_startDate && _endDate) {
+                // if both dates exist the range is shown
+                return _startDate <= date && date <= _endDate;
+            }
+        }
+        return false;
+    }
+    isInRangePreview(date) {
+        if (this.otherCalEl) {
+            const _startDate = this.startDate || this.otherCalEl.startDate;
+            const _endDate = this.endDate || this.otherCalEl.endDate;
+            // no preview if there's an existing range
+            if (_startDate && _endDate)
+                return false;
+            if (_startDate && this.hoverDate) {
+                // if only startDate exists, the hovered date functions as the other end of the range
+                if (_startDate < this.hoverDate) {
+                    return _startDate <= date && date <= this.hoverDate;
+                }
+                else {
+                    // user is mousing over a date prior to the start date
+                    // start date considered as end of range
+                    return this.hoverDate <= date && date <= _startDate;
+                }
+            }
+            else if (_endDate && this.hoverDate) {
+                // if only endDate exists, the hovered date functions as the other end of the range
+                if (this.hoverDate < _endDate) {
+                    return this.hoverDate <= date && date <= _endDate;
+                }
+                else {
+                    // user is mousing over a date later than the end date
+                    // end date considered as beggining of range
+                    return _endDate <= 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);
+            }
+            const cellToFocus = this.getCell(this.focusDate);
+            if (cellToFocus) {
+                cellToFocus.tabIndex = 0;
+                cellToFocus.focus();
+            }
+            if (this.view == "day") {
+                this.cellHovered.emit(this.focusDate);
+            }
+        });
+    }
+    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: "mdi" }, "\uF141")), 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("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: "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, 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: "mdi" }, "\uF141")), 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("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: "mdi" }, "\uF142"))), 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: 'ed62667213d12f7b9848b4bdb53f02d1ba6496c7', 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: '62bf522fa94ea5fa28949f31d1c874c1aafdb955', id: "application", class: "sr-only" }, this.calName, 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-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"
+                        }
+                    },
+                    "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
+            }];
+    }
+}