@ukic/canary-web-components 3.0.0-canary.30 → 3.0.0-canary.31

package/dist/collection/components/ic-calendar/ic-calendar.js

@@ -0,0 +1,1542 @@
+import { Host, h, } from "@stencil/core";
+import { IcDateInputMonths, IcShortDayNames, IcWeekDays, } from "../../utils/types";
+import { addSixWeeks, clampDate, convertToDoubleDigits, createDate, dateInRange, dateMatches, getMonthStart, getMonthEnd, getWeekStart, yearInRange, } from "../../utils/date-helpers";
+import chevron from "../../assets/chevron-icon.svg";
+import { DayButton } from "./ic-day-button";
+import { MonthPicker } from "./ic-month-picker";
+import { YearPicker } from "./ic-year-picker";
+import { removeDisabledFalse, stringEnumToArray } from "../../utils/helpers";
+const FOCUS_TIMER = 100;
+export class Calendar {
+    constructor() {
+        this.daysOfWeek = [];
+        this.dayButtonFocussed = false;
+        this.dayPickerKeyboardNav = false;
+        this.dialogDescription = "";
+        this.focusDay = true;
+        this.liveRegionEl = undefined;
+        this.monthNames = [];
+        this.monthInViewUpdateHandled = false;
+        this.parentIsDatePicker = false;
+        this.today = new Date();
+        this.yearButtonFocussed = false;
+        this.clearButtonClicked = false;
+        this.currMonthView = [];
+        this.currYearPickerView = [];
+        this.decadeView = [];
+        this.focussedDate = null;
+        this.maxDate = null;
+        this.minDate = null;
+        this.monthPickerVisible = false;
+        this.orderedDaysOfWeek = [];
+        this.selectedDate = null;
+        this.yearPickerVisible = false;
+        /**
+         * The format in which the date will be displayed.
+         */
+        this.dateFormat = "DD/MM/YYYY";
+        /**
+         * If `true`, the disabled state will be set.
+         */
+        this.disabled = false;
+        /**
+         * The days of the week to disable.
+         */
+        this.disableDays = [];
+        /**
+         * If `true`, dates in the future are not allowed.
+         */
+        this.disableFuture = false;
+        /**
+         * If `true`, dates in the past are not allowed.
+         */
+        this.disablePast = false;
+        /**
+         * The latest date that will be allowed. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object.
+         * The value of this prop is ignored if `disableFuture` is set to `true`.
+         */
+        this.max = "";
+        /**
+         * The earliest date that will be allowed. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object.
+         * The value of this prop is ignored if `disablePast` is set to `true`.
+         */
+        this.min = "";
+        /**
+         * The date visible when the calendar opens. Used if no date is currently selected.
+         * The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object.
+         */
+        this.openAtDate = "";
+        /**
+         * If `true`, the `Clear` button on the calendar will be visible.
+         */
+        this.showClearButton = true;
+        /**
+         * If `true`, days outside the current month will be visible in the calendar.
+         */
+        this.showDaysOutsideMonth = true;
+        /**
+         * If `true`, the `Go to today` button on the calendar will be visible.
+         */
+        this.showTodayButton = true;
+        /**
+         * The size of the calendar to be displayed.
+         */
+        this.size = "medium";
+        /**
+         * The first day of the week. `0` for Sunday, `1` for Monday, etc.
+         * Default is Monday.
+         */
+        this.startOfWeek = IcWeekDays.Monday;
+        /**
+         * Sets the calendar to the dark or light theme colors. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        this.theme = "inherit";
+        /**
+         * The value of the calendar and the date visible when the calendar opens.
+         * The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object.
+         */
+        this.value = "";
+        this.isValidDateValue = (value) => {
+            if (value == null)
+                return true;
+            if (value instanceof Date) {
+                return !isNaN(value.getTime());
+            }
+            if (typeof value !== "string")
+                return false;
+            const iso8601Regex = /^\d{4}-\d{2}-\d{2}(?:[T\s]\d{2}:\d{2}:\d{2}(?:\.\d+)?(?:Z|[+-]\d{2}:?\d{2})?)?$/;
+            if (iso8601Regex.test(value)) {
+                return !isNaN(Date.parse(value));
+            }
+            const [a, b, c] = value.split("/").map(Number);
+            if ([a, b, c].some(isNaN))
+                return false;
+            let day, month, year;
+            switch (this.dateFormat) {
+                case "DD/MM/YYYY":
+                    [day, month, year] = [a, b, c];
+                    break;
+                case "MM/DD/YYYY":
+                    [month, day, year] = [a, b, c];
+                    break;
+                case "YYYY/MM/DD":
+                    [year, month, day] = [a, b, c];
+                    break;
+                default:
+                    return false;
+            }
+            if (month < 1 || month > 12 || day < 1 || day > 31)
+                return false;
+            const date = new Date(year, month - 1, day);
+            return (date.getFullYear() === year &&
+                date.getMonth() === month - 1 &&
+                date.getDate() === day);
+        };
+        this.isPresent = (prop) => prop !== "" && prop !== undefined && prop !== null;
+        this.setOpenAtDate = () => {
+            var _a;
+            let openAt = null;
+            if (this.disabled) {
+                openAt = new Date();
+            }
+            else {
+                if (this.clearButtonClicked) {
+                    openAt = this.focussedDate ? this.focussedDate : new Date();
+                    this.clearButtonClicked = false;
+                }
+                else {
+                    if (!this.disabled &&
+                        this.value != null &&
+                        this.isValidDateValue(this.value)) {
+                        openAt = createDate(this.value, this.dateFormat);
+                    }
+                    if (!!openAt && dateInRange(openAt, this.minDate, this.maxDate)) {
+                        const selectedDay = openAt.getDay();
+                        if (!!this.disableDays &&
+                            this.disableDays.length > 0 &&
+                            typeof selectedDay == "number" &&
+                            this.disableDays.includes(selectedDay)) {
+                            openAt = createDate((_a = this.value) !== null && _a !== void 0 ? _a : new Date(), this.dateFormat);
+                            this.setSelectedDate(null);
+                        }
+                        else {
+                            this.setSelectedDate(openAt);
+                        }
+                    }
+                    else if (this.isPresent(this.openAtDate)) {
+                        openAt = createDate(this.openAtDate, this.dateFormat);
+                    }
+                    else {
+                        openAt = new Date();
+                    }
+                }
+            }
+            this.setFocussedDate(openAt);
+            this.updateMonthInView();
+            let dialogDesc = this.getMonthInViewText();
+            if (this.selectedDate === null) {
+                dialogDesc += " No date selected.";
+            }
+            dialogDesc += ` Use arrow keys to change day. Press enter or space to select a date${this.parentIsDatePicker ? " or press escape to close the picker" : ""}.`;
+            this.dialogDescription = dialogDesc;
+            setTimeout(() => this.focusFocussedDay(), FOCUS_TIMER);
+        };
+        /* Refs & setters */
+        this.setFocussedDayEl = (element) => {
+            this.focussedDayEl = element;
+        };
+        this.setFocussedMonthEl = (element) => {
+            this.focussedMonthEl = element;
+        };
+        this.setFocussedYearEl = (element) => {
+            this.focussedYearEl = element;
+        };
+        this.setFocussedYear = (newYear, focus = true) => {
+            const prevYear = this.focussedYear;
+            this.focussedYear = newYear;
+            if (this.yearPickerVisible) {
+                const newDecade = Math.floor(newYear / 10) * 10;
+                const oldDecade = Math.floor(prevYear / 10) * 10;
+                if (newDecade !== oldDecade) {
+                    this.setDecadeView(newDecade);
+                    this.setAriaLiveRegionText(this.getDecadeInViewText());
+                }
+                if (focus) {
+                    setTimeout(() => {
+                        if (this.focussedYearEl !== null)
+                            this.focussedYearEl.setFocus();
+                    }, FOCUS_TIMER);
+                }
+            }
+            else {
+                this.setDecadeView(Math.floor(newYear / 10) * 10);
+            }
+        };
+        this.setFocussedDate = (d) => {
+            this.focussedDate = clampDate(d, this.minDate, this.maxDate);
+        };
+        this.setSelectedDate = (d, emit = true) => {
+            if (d === null || !dateMatches(d, this.selectedDate)) {
+                this.selectedDate = d;
+                this.value = d;
+                if (emit) {
+                    this.icChange.emit(this.setDateChangeEventDetail(d));
+                }
+            }
+        };
+        this.setDateChangeEventDetail = (d) => {
+            let UTCDate = null;
+            let day = null;
+            let month = null;
+            let year = null;
+            if (d !== null) {
+                UTCDate = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
+                day = convertToDoubleDigits(d.getDate());
+                month = convertToDoubleDigits(d.getMonth() + 1);
+                year = d.getFullYear().toString();
+            }
+            return {
+                value: d,
+                dateObject: {
+                    day: day === "" ? null : day,
+                    month: month === "" ? null : month,
+                    year: year === "" ? null : year,
+                },
+                utcValue: UTCDate,
+            };
+        };
+        this.setAriaLiveRegionText = (text) => {
+            this.liveRegionEl && (this.liveRegionEl.innerText = text);
+        };
+        /* Navigation helpers */
+        this.goToPreviousMonth = (focusDay = false) => {
+            this.focusDay = focusDay;
+            this.moveMonths(-1);
+        };
+        this.goToNextMonth = (focusDay = false) => {
+            this.focusDay = focusDay;
+            this.moveMonths(1);
+        };
+        this.goToPreviousYear = (focusDay = false) => {
+            if (this.isPrevYearAllowed()) {
+                this.focusDay = focusDay;
+                this.moveYears(-1);
+            }
+        };
+        this.goToNextYear = (focusDay = false) => {
+            if (this.isNextYearAllowed()) {
+                this.focusDay = focusDay;
+                this.moveYears(1);
+            }
+        };
+        this.moveDays = (numDays) => {
+            if (this.focussedDate) {
+                const d = new Date(this.focussedDate);
+                d.setDate(d.getDate() + numDays);
+                this.setFocussedDate(d);
+            }
+        };
+        this.moveMonths = (numMonths) => {
+            if (this.focussedDate) {
+                const newMonth = this.focussedDate.getMonth() + numMonths;
+                const min = new Date(new Date(getMonthStart(this.focussedDate)).setMonth(newMonth));
+                const max = getMonthEnd(min);
+                const newDate = new Date(new Date(this.focussedDate).setMonth(newMonth));
+                this.setFocussedDate(clampDate(newDate, min, max));
+                if (this.monthPickerVisible === false &&
+                    this.yearPickerVisible === false &&
+                    this.monthInViewUpdateHandled === false) {
+                    this.setAriaLiveRegionText(this.getMonthInViewText());
+                }
+                this.monthInViewUpdateHandled = false;
+            }
+        };
+        this.moveYears = (numYears) => {
+            if (this.focussedDate) {
+                const newYear = this.focussedDate.getFullYear() + numYears;
+                const min = new Date(new Date(getMonthStart(this.focussedDate)).setFullYear(newYear));
+                const max = getMonthEnd(min);
+                const newDate = new Date(new Date(this.focussedDate).setFullYear(newYear));
+                this.setFocussedDate(clampDate(newDate, min, max));
+                if (this.monthPickerVisible === false &&
+                    this.yearPickerVisible === false &&
+                    this.monthInViewUpdateHandled === false) {
+                    this.setAriaLiveRegionText(this.getMonthInViewText());
+                }
+                this.monthInViewUpdateHandled = false;
+            }
+        };
+        this.updateFocussedMonth = (adjust) => {
+            const d = new Date(this.focussedYear, this.focussedMonth, 1);
+            d.setMonth(this.focussedMonth + adjust);
+            const newDate = clampDate(d, this.minDate, this.maxDate);
+            this.focussedMonth = newDate.getMonth();
+            setTimeout(() => this.focussedMonthEl.setFocus(), FOCUS_TIMER);
+        };
+        this.updateFocussedYear = (adjust, focusYear = true) => {
+            const d = new Date(new Date().setFullYear(this.focussedYear + adjust));
+            const newDate = clampDate(d, this.minDate, this.maxDate);
+            this.setFocussedYear(newDate.getFullYear(), focusYear);
+        };
+        this.getNextDayToFocus = (currDay, forward, level = 1) => {
+            var _a;
+            const move = forward ? 1 : -1;
+            const nextDay = new Date(currDay);
+            nextDay.setDate(nextDay.getDate() + move);
+            return ((_a = this.disableDays) === null || _a === void 0 ? void 0 : _a.includes(Number(nextDay.getDay())))
+                ? this.getNextDayToFocus(nextDay, forward, level + 1)
+                : level;
+        };
+        /* Focus helpers */
+        this.focusFirstElement = () => {
+            var _a;
+            (_a = this.monthButtonEl) === null || _a === void 0 ? void 0 : _a.setFocus();
+        };
+        this.focusLastElement = () => {
+            if (this.showClearButton &&
+                this.clearButtonEl &&
+                !this.clearButtonEl.disabled) {
+                this.clearButtonEl.setFocus();
+            }
+            else if (this.showTodayButton &&
+                this.todayButtonEl &&
+                !this.todayButtonEl.disabled) {
+                this.todayButtonEl.setFocus();
+            }
+            else if (this.monthPickerVisible) {
+                this.focussedMonthEl.setFocus();
+            }
+            else if (this.yearPickerVisible) {
+                this.focussedYearEl.setFocus();
+            }
+            else {
+                this.focussedDayEl.focus();
+            }
+        };
+        this.focusFocussedDay = () => {
+            this.focussedDayEl.focus();
+        };
+        /* Click handlers */
+        this.monthButtonClickHandler = () => {
+            this.yearPickerVisible = false;
+            this.focusDay = false;
+            this.monthPickerVisible = !this.monthPickerVisible;
+            if (this.monthPickerVisible) {
+                this.setAriaLiveRegionText("Month picker view open");
+            }
+            else {
+                this.setMonthSelectedLiveRegionText();
+                this.icCalendarMonthSelect.emit();
+            }
+        };
+        this.yearButtonClickHandler = () => {
+            this.monthPickerVisible = false;
+            this.focusDay = false;
+            this.yearPickerVisible = !this.yearPickerVisible;
+            if (this.yearPickerVisible) {
+                this.setAriaLiveRegionText(`Year picker view open. ${this.getDecadeInViewText()}`);
+            }
+            else {
+                this.setYearSelectedLiveRegionText();
+                this.icCalendarYearSelect.emit();
+            }
+        };
+        this.todayButtonClickHandler = () => {
+            this.yearPickerVisible = false;
+            this.monthPickerVisible = false;
+            this.setFocussedDate(new Date());
+            this.setAriaLiveRegionText(this.getMonthInViewText());
+            setTimeout(() => this.focusFocussedDay(), FOCUS_TIMER);
+        };
+        this.clearButtonClickHandler = () => {
+            this.clearButtonClicked = true;
+            this.selectedDate && this.setFocussedDate(this.selectedDate);
+            this.setSelectedDate(null);
+            this.icChange.emit(this.setDateChangeEventDetail(this.selectedDate));
+            let text = "Selected date cleared.";
+            if (!this.monthPickerVisible && !this.yearPickerVisible) {
+                text += ` ${this.getMonthInViewText()}`;
+            }
+            if (this.monthPickerVisible) {
+                this.focussedMonthEl.setFocus();
+            }
+            else if (this.yearPickerVisible) {
+                this.focussedYearEl.setFocus();
+            }
+            else {
+                this.focusFocussedDay();
+            }
+            this.setAriaLiveRegionText(text);
+        };
+        this.monthYearNavClickHandler = (ev) => {
+            const target = ev.target;
+            switch (target.id) {
+                case "previous-month-button":
+                    this.goToPreviousMonth(this.dayButtonFocussed);
+                    break;
+                case "next-month-button":
+                    this.goToNextMonth(this.dayButtonFocussed);
+                    break;
+                case "previous-year-button":
+                    this.goToPreviousYear(this.dayButtonFocussed);
+                    break;
+                case "next-year-button":
+                    this.goToNextYear(this.dayButtonFocussed);
+                    break;
+            }
+        };
+        this.handleCalendarClick = (event) => {
+            this.clearDialogDescription();
+            event.stopImmediatePropagation();
+        };
+        /* Keyboard handlers */
+        this.handleCalendarKeyDown = (ev) => {
+            let handled = true;
+            switch (ev.key) {
+                case "ArrowDown":
+                    this.dayPickerKeyboardNav = true;
+                    this.moveDays(7);
+                    break;
+                case "ArrowUp":
+                    this.dayPickerKeyboardNav = true;
+                    this.moveDays(-7);
+                    break;
+                case "ArrowLeft":
+                    this.dayPickerKeyboardNav = true;
+                    if (this.focussedDate)
+                        this.moveDays(-1 * this.getNextDayToFocus(this.focussedDate, false));
+                    break;
+                case "ArrowRight":
+                    this.dayPickerKeyboardNav = true;
+                    if (this.focussedDate)
+                        this.moveDays(this.getNextDayToFocus(this.focussedDate, true));
+                    break;
+                case "PageUp":
+                    this.dayPickerKeyboardNav = true;
+                    ev.shiftKey ? this.moveYears(-1) : this.moveMonths(-1);
+                    break;
+                case "PageDown":
+                    this.dayPickerKeyboardNav = true;
+                    ev.shiftKey ? this.moveYears(1) : this.moveMonths(1);
+                    break;
+                case "Home":
+                    this.dayPickerKeyboardNav = true;
+                    this.setFocussedDate(new Date(this.focussedYear, this.focussedMonth, 1));
+                    break;
+                case "End":
+                    this.dayPickerKeyboardNav = true;
+                    this.setFocussedDate(new Date(this.focussedYear, this.focussedMonth + 1, 0));
+                    break;
+                case "Tab":
+                    handled = this.calendarTabHandler(ev);
+                    break;
+                default:
+                    handled = false;
+                    break;
+            }
+            if (handled) {
+                ev.preventDefault();
+            }
+        };
+        this.monthPickerKeyDownHandler = (ev) => {
+            let handled = true;
+            switch (ev.key) {
+                case "ArrowUp":
+                case "ArrowLeft":
+                    this.updateFocussedMonth(-1);
+                    break;
+                case "ArrowDown":
+                case "ArrowRight":
+                    this.updateFocussedMonth(1);
+                    break;
+                case "Home":
+                    this.updateFocussedMonth(-this.focussedMonth);
+                    break;
+                case "End":
+                    this.updateFocussedMonth(11 - this.focussedMonth);
+                    break;
+                case "Tab":
+                    handled = this.calendarTabHandler(ev);
+                    break;
+                case "Escape":
+                    ev.stopImmediatePropagation();
+                    this.monthPickerVisible = false;
+                    setTimeout(() => this.focusFocussedDay(), FOCUS_TIMER);
+                    break;
+                default:
+                    handled = false;
+            }
+            if (handled) {
+                ev.preventDefault();
+            }
+        };
+        this.yearPickerKeyDownHandler = (ev) => {
+            let handled = true;
+            switch (ev.key) {
+                case "ArrowUp":
+                case "ArrowLeft":
+                    this.updateFocussedYear(-1);
+                    break;
+                case "ArrowDown":
+                case "ArrowRight":
+                    this.updateFocussedYear(1);
+                    break;
+                case "Home":
+                    if (this.focussedYear > this.decadeStart) {
+                        this.updateFocussedYear(this.decadeStart - this.focussedYear);
+                    }
+                    break;
+                case "End":
+                    if (this.focussedYear < this.decadeEnd) {
+                        this.updateFocussedYear(this.decadeEnd - this.focussedYear);
+                    }
+                    break;
+                case "PageUp":
+                    this.updateFocussedYear(-10);
+                    break;
+                case "PageDown":
+                    this.updateFocussedYear(10);
+                    break;
+                case "Tab":
+                    handled = this.calendarTabHandler(ev);
+                    break;
+                case "Escape":
+                    ev.stopImmediatePropagation();
+                    this.yearPickerVisible = false;
+                    setTimeout(() => this.focusFocussedDay(), FOCUS_TIMER);
+                    break;
+                default:
+                    handled = false;
+            }
+            if (handled) {
+                ev.preventDefault();
+            }
+        };
+        this.monthButtonKeyDownHandler = (ev) => {
+            let handled = false;
+            switch (ev.key) {
+                case "ArrowLeft":
+                case "ArrowUp":
+                    handled = true;
+                    this.goToPreviousMonth();
+                    break;
+                case "ArrowRight":
+                case "ArrowDown":
+                    handled = true;
+                    this.goToNextMonth();
+                    break;
+                case "Home":
+                    handled = true;
+                    this.focusDay = false;
+                    this.moveMonths(-this.monthInView);
+                    break;
+                case "End":
+                    handled = true;
+                    this.focusDay = false;
+                    this.moveMonths(11 - this.monthInView);
+                    break;
+                case "Tab":
+                    if (ev.shiftKey) {
+                        handled = true;
+                        this.focusLastElement();
+                    }
+                    break;
+                case "Escape":
+                    if (this.monthPickerVisible) {
+                        this.monthPickerVisible = false;
+                        ev.stopImmediatePropagation();
+                    }
+                    break;
+                default:
+                    break;
+            }
+            if (handled) {
+                ev.preventDefault();
+            }
+        };
+        this.yearButtonKeyDownHandler = (ev) => {
+            let handled = false;
+            switch (ev.key) {
+                case "ArrowLeft":
+                case "ArrowUp":
+                    handled = true;
+                    this.goToPreviousYear();
+                    break;
+                case "ArrowRight":
+                case "ArrowDown":
+                    handled = true;
+                    this.goToNextYear();
+                    break;
+                case "Home":
+                    if (this.yearPickerVisible && this.yearInView > this.decadeStart) {
+                        handled = true;
+                        this.moveYears(this.decadeStart - this.yearInView);
+                    }
+                    break;
+                case "End":
+                    if (this.yearPickerVisible && this.yearInView < this.decadeEnd) {
+                        handled = true;
+                        this.moveYears(this.decadeEnd - this.focussedYear);
+                    }
+                    break;
+                case "PageUp":
+                    handled = true;
+                    this.focusDay = false;
+                    this.moveYears(-10);
+                    break;
+                case "PageDown":
+                    handled = true;
+                    this.focusDay = false;
+                    this.moveYears(10);
+                    break;
+                case "Escape":
+                    if (this.yearPickerVisible) {
+                        this.yearPickerVisible = false;
+                        ev.stopImmediatePropagation();
+                    }
+                    break;
+                default:
+                    break;
+            }
+            if (handled) {
+                ev.preventDefault();
+            }
+        };
+        this.todayButtonKeyDownHandler = (ev) => {
+            var _a;
+            if (ev.key === "Tab" &&
+                !ev.shiftKey &&
+                ((_a = this.clearButtonEl) === null || _a === void 0 ? void 0 : _a.disabled) &&
+                this.parentIsDatePicker) {
+                this.focusFirstElement();
+                ev.preventDefault();
+            }
+        };
+        this.clearButtonKeyDownHandler = (ev) => {
+            if (ev.key === "Tab" && !ev.shiftKey && this.parentIsDatePicker) {
+                this.focusFirstElement();
+                ev.preventDefault();
+            }
+        };
+        this.calendarTabHandler = (ev) => {
+            var _a, _b;
+            let handled = false;
+            if (!ev.shiftKey &&
+                (!this.showTodayButton || this.isCurrentMonth()) &&
+                (!this.showClearButton || ((_a = this.clearButtonEl) === null || _a === void 0 ? void 0 : _a.disabled)) &&
+                this.parentIsDatePicker) {
+                this.focusFirstElement();
+                handled = true;
+            }
+            else if (ev.shiftKey) {
+                (_b = this.yearButtonEl) === null || _b === void 0 ? void 0 : _b.setFocus();
+                handled = true;
+            }
+            return handled;
+        };
+        /* Utility functions */
+        this.setMonthSelectedLiveRegionText = () => {
+            this.setAriaLiveRegionText(`${this.monthNames[this.monthInView]} selected. ${this.getMonthInViewText()}`);
+        };
+        this.setYearSelectedLiveRegionText = () => {
+            this.setAriaLiveRegionText(`${this.yearInView} selected. ${this.getMonthInViewText()}`);
+        };
+        this.setDecadeView = (start) => {
+            let currYear = start - 1;
+            const decadeArr = [];
+            while (currYear <= start + 10) {
+                decadeArr.push(currYear);
+                currYear++;
+            }
+            this.decadeView = decadeArr;
+            this.decadeStart = decadeArr[1];
+            this.decadeEnd = decadeArr[10];
+        };
+        this.getMonthInViewText = () => {
+            return `${this.monthNames[this.monthInView]} ${this.yearInView} currently in view.`;
+        };
+        this.getDecadeInViewText = () => {
+            return `${this.decadeStart} to ${this.decadeEnd} currently in view.`;
+        };
+        this.isPrevYearAllowed = () => {
+            return this.isYearAllowed(this.yearInView - 1);
+        };
+        this.isNextYearAllowed = () => {
+            return this.isYearAllowed(this.yearInView + 1);
+        };
+        this.isYearAllowed = (yr) => yearInRange(yr, this.minDate, this.maxDate);
+        this.getMonthView = (date) => {
+            const start = getWeekStart(getMonthStart(date), this.startOfWeek);
+            const end = addSixWeeks(start);
+            const days = [];
+            let current = start;
+            while (!dateMatches(current, end)) {
+                days.push(current);
+                current = new Date(current);
+                current.setDate(current.getDate() + 1);
+            }
+            days.push(current);
+            return days;
+        };
+        this.isCurrentMonth = () => {
+            const d = new Date();
+            return (d.getFullYear() === this.yearInView && d.getMonth() === this.monthInView);
+        };
+        this.updateMonthInView = () => {
+            if (this.focussedDate) {
+                this.currMonthView = this.getMonthView(this.focussedDate);
+                this.focussedDay = this.focussedDate.getDate();
+                this.monthInView = this.focussedDate.getMonth();
+                this.yearInView = this.focussedDate.getFullYear();
+                if (this.dayPickerKeyboardNav) {
+                    this.monthInViewUpdateHandled = true;
+                    this.setAriaLiveRegionText(this.getMonthInViewText());
+                    this.dayPickerKeyboardNav = false;
+                }
+            }
+        };
+        /* Mouse handlers */
+        this.navButtonMouseDownHandler = (ev) => {
+            ev.preventDefault();
+        };
+        this.handleCalendarMouseDown = (event) => {
+            const target = event.target;
+            if (target.tagName !== "IC-BUTTON") {
+                event.preventDefault();
+            }
+        };
+        this.handleSelectDay = (day) => {
+            this.setSelectedDate(day);
+            this.setFocussedDate(day);
+            this.icCalendarDaySelect.emit();
+        };
+        this.handleSelectMonth = (month) => {
+            this.moveMonths(month - this.monthInView);
+            setTimeout(() => {
+                var _a;
+                (_a = this.monthButtonEl) === null || _a === void 0 ? void 0 : _a.setFocus();
+                this.monthPickerVisible = false;
+                this.setMonthSelectedLiveRegionText();
+                this.icCalendarMonthSelect.emit();
+            }, FOCUS_TIMER);
+        };
+        this.handleSelectYear = (year) => {
+            const yrPos = this.decadeView.indexOf(year);
+            if (yrPos > 0 && yrPos < this.decadeView.length - 1) {
+                this.moveYears(year - this.yearInView);
+                this.focusDay = false;
+                const monthName = this.monthNames[this.monthInView];
+                this.setAriaLiveRegionText(`${year} selected. ${monthName} ${year} currently in view.`);
+                setTimeout(() => {
+                    var _a;
+                    (_a = this.yearButtonEl) === null || _a === void 0 ? void 0 : _a.setFocus();
+                    this.yearPickerVisible = false;
+                    this.icCalendarYearSelect.emit();
+                }, FOCUS_TIMER);
+            }
+            else {
+                const moveYears = year - this.focussedYear > 0 ? 10 : -10;
+                this.updateFocussedYear(moveYears, this.yearButtonFocussed);
+                this.setAriaLiveRegionText(this.getDecadeInViewText());
+            }
+        };
+        this.onDayButtonFocusHandler = () => {
+            this.dayButtonFocussed = true;
+        };
+        this.onDayButtonBlurHandler = () => {
+            this.dayButtonFocussed = false;
+        };
+        this.onYearButtonFocusHandler = () => {
+            this.yearButtonFocussed = true;
+        };
+        this.onYearButtonBlurHandler = () => {
+            this.yearButtonFocussed = false;
+        };
+        /* Render helpers */
+        this.renderMonthYearNavButton = (id, flip, disabled) => {
+            const buttonSize = this.size;
+            return (h("ic-button", { id: id, disableTooltip: true, disabled: disabled, onClick: this.monthYearNavClickHandler, class: { flip: flip }, variant: "icon-tertiary", innerHTML: chevron, size: buttonSize, tabIndex: -1, "aria-label": `Go to ${id.slice(0, -7).replace("-", " ")}`, onMouseDown: this.navButtonMouseDownHandler }));
+        };
+        this.previousMonthButton = () => {
+            let disabled = false;
+            if (this.disabled) {
+                disabled = true;
+            }
+            else {
+                if (this.focussedDate !== null && this.minDate !== null) {
+                    const yearMatch = this.focussedDate.getFullYear() === this.minDate.getFullYear();
+                    if (yearMatch) {
+                        disabled = this.monthInView - 1 < this.minDate.getMonth();
+                    }
+                }
+            }
+            return this.renderMonthYearNavButton("previous-month-button", true, disabled);
+        };
+        this.nextMonthButton = () => {
+            let disabled = false;
+            if (this.disabled) {
+                disabled = true;
+            }
+            else {
+                if (this.focussedDate !== null && this.maxDate !== null) {
+                    const yearMatch = this.focussedDate.getFullYear() === this.maxDate.getFullYear();
+                    if (yearMatch) {
+                        disabled = this.monthInView + 1 > this.maxDate.getMonth();
+                    }
+                }
+            }
+            return this.renderMonthYearNavButton("next-month-button", false, disabled);
+        };
+        this.previousYearButton = () => {
+            return this.renderMonthYearNavButton("previous-year-button", true, this.disabled || !this.isPrevYearAllowed());
+        };
+        this.nextYearButton = () => {
+            return this.renderMonthYearNavButton("next-year-button", false, this.disabled || !this.isNextYearAllowed());
+        };
+    }
+    watchDisabledHandler() {
+        var _a, _b;
+        removeDisabledFalse(this.disabled, this.el);
+        if (this.disabled) {
+            this.setSelectedDate(null);
+            (_a = this.clearButtonEl) === null || _a === void 0 ? void 0 : _a.disabled;
+            (_b = this.todayButtonEl) === null || _b === void 0 ? void 0 : _b.disabled;
+        }
+        else {
+            this.setOpenAtDate();
+        }
+    }
+    watchDisableFutureHandler() {
+        this.watchMaxHandler();
+    }
+    watchDisablePastHandler() {
+        this.watchMinHandler();
+    }
+    watchMaxHandler() {
+        if (this.disableFuture) {
+            this.maxDate = new Date();
+        }
+        else {
+            this.maxDate = createDate(this.max, this.dateFormat);
+        }
+    }
+    watchMinHandler() {
+        if (this.disablePast) {
+            this.minDate = new Date();
+        }
+        else {
+            this.minDate = createDate(this.min, this.dateFormat);
+        }
+    }
+    watchStartOfWeekHandler() {
+        this.orderedDaysOfWeek = this.daysOfWeek
+            .slice(this.startOfWeek)
+            .concat(this.daysOfWeek.slice(0, this.startOfWeek));
+        this.updateMonthInView();
+    }
+    valueChanged(newValue, oldValue, propName) {
+        if (newValue !== oldValue && this.isValidDateValue(newValue)) {
+            if (propName === "value") {
+                this.value = newValue;
+            }
+            this.setOpenAtDate();
+        }
+    }
+    watchFocussedDateHandler(current, previous) {
+        if (previous === null ||
+            !(previous.getFullYear() === current.getFullYear() &&
+                previous.getMonth() === current.getMonth())) {
+            this.updateMonthInView();
+        }
+    }
+    watchMonthInViewHandler() {
+        this.focussedMonth = this.monthInView;
+    }
+    watchYearInViewHandler() {
+        this.setFocussedYear(this.yearInView, false);
+    }
+    watchYearPickerVisibleHandler() {
+        if (!this.yearPickerVisible) {
+            this.setFocussedYear(this.yearInView);
+        }
+    }
+    watchMonthPickerVisibleHandler() {
+        if (!this.monthPickerVisible) {
+            this.focussedMonth = this.monthInView;
+        }
+    }
+    watchFocussedDayEl() {
+        if (this.focusDay) {
+            setTimeout(() => this.focusFocussedDay(), FOCUS_TIMER);
+        }
+        this.focusDay = true;
+    }
+    componentWillLoad() {
+        var _a;
+        const root = this.el.getRootNode();
+        this.parentIsDatePicker =
+            root instanceof ShadowRoot && ((_a = root.host) === null || _a === void 0 ? void 0 : _a.tagName) === "IC-DATE-PICKER";
+        this.monthNames = stringEnumToArray(IcDateInputMonths);
+        this.daysOfWeek = stringEnumToArray(IcShortDayNames);
+        this.watchStartOfWeekHandler();
+        this.watchMaxHandler();
+        this.watchMinHandler();
+        this.setOpenAtDate();
+        removeDisabledFalse(this.disabled, this.el);
+    }
+    /**
+     * @internal Clears the dialog description used to provide more context for screen readers.
+     */
+    async clearDialogDescription() {
+        this.dialogDescription = "";
+    }
+    render() {
+        const { dialogDescription, monthNames, focussedMonth, focussedYear, monthInView, yearInView, monthPickerVisible, yearPickerVisible, decadeView, minDate, maxDate, orderedDaysOfWeek, parentIsDatePicker, showClearButton, showTodayButton, size, theme, } = this;
+        let monthButtonText = "";
+        if (monthPickerVisible) {
+            monthButtonText = `Use the arrow keys to change the selected month. To return to day picker view, press Enter or Space to select a month, or press Escape.`;
+        }
+        else {
+            monthButtonText = `Press Enter or Space to open month picker view or use the arrow keys to change month.`;
+        }
+        let yearButtonText = "";
+        if (yearPickerVisible) {
+            yearButtonText = `Use the arrow keys to change the selected year. To return to day picker view, press Enter or Space to select a year, or press Escape.`;
+        }
+        else {
+            yearButtonText = `Press Enter or Space to open year picker view or use the arrow keys to change the selected year.`;
+        }
+        const dialogLabel = "choose date";
+        const monthLabel = monthNames && monthNames[monthInView]
+            ? monthNames[monthInView]
+            : "Open month picker";
+        const yearLabel = this.yearInView ? this.yearInView : "Open year picker";
+        let minDay = minDate;
+        if (minDate && this.disablePast) {
+            const yesterday = new Date(minDate);
+            yesterday.setDate(minDate.getDate() - 1);
+            minDay = yesterday;
+        }
+        const weeks = [];
+        for (let i = 0; i < this.currMonthView.length; i += 7) {
+            weeks.push(this.currMonthView.slice(i, i + 7));
+        }
+        return (h(Host, { key: '5811c7e3bf515643f11c4ecd66e166ab672a15ab', class: {
+                [`ic-calendar-${size}`]: true,
+                [`ic-theme-${theme}`]: theme !== "inherit",
+            } }, h("div", { key: '56f6fbfa98519f60e040d524f19d52bb2449e96d' }, h("span", { key: 'a52cc22ba545f12ccde1541b84bddbedc1a88734', id: "dialog-description", class: "sr-only" }, dialogDescription), h("div", Object.assign({ key: 'a4f6a18f109f7c55c5ba9a369dbc47352d215517' }, (parentIsDatePicker && {
+            role: "dialog",
+            "aria-modal": "true",
+        }), { "aria-label": dialogLabel, "aria-describedBy": "dialog-description", class: {
+                "calendar-container": true,
+            }, onMouseDown: this.handleCalendarMouseDown, onClick: this.handleCalendarClick }), h("span", { key: '63a3c2c916c905efce47669886edff51422fd755', ref: (el) => (this.liveRegionEl = el), id: "live-region", "aria-live": "assertive", class: "sr-only" }), h("div", { key: 'd553857fb83f497d666355b283391530a94c09a9', class: {
+                "month-year-nav-container": true,
+            } }, h("div", { key: 'aff93454cc4f27db3e8464ac4289471c353f0086', class: "month-year-nav" }, this.previousMonthButton(), h("span", { key: 'a4771ae4d86e75fbf80134a4a53190a9d9402297', id: "select-month-hint", "aria-hidden": "true" }, monthButtonText), h("ic-button", { key: '325ed5a8bb306b318c2fa471de7ac82ac0e98e2e', ref: (el) => (this.monthButtonEl = el), size: size, class: "month-picker-button", disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": monthPickerVisible ? "true" : "false", "full-width": "true", variant: "tertiary", "aria-label": monthLabel, "aria-describedby": "select-month-hint", onKeyDown: this.monthButtonKeyDownHandler, onClick: this.monthButtonClickHandler }, monthNames[monthInView]), this.nextMonthButton()), h("div", { key: '91adac1ecbcccbab1b1c76c741ea64b2d7efe818', class: "month-year-nav" }, this.previousYearButton(), h("span", { key: '2ccac8cb808bfd951f36e5f371c128ff9e1bf84e', id: "select-year-hint", "aria-hidden": "true" }, yearButtonText), h("ic-button", { key: '289835494a1015ec0ea67e8885c627ad1436b404', ref: (el) => (this.yearButtonEl = el), size: size, class: "year-picker-button", disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": yearPickerVisible ? "true" : "false", "full-width": "true", variant: "tertiary", "aria-label": yearLabel, "aria-describedby": "select-year-hint", onKeyDown: this.yearButtonKeyDownHandler, onClick: this.yearButtonClickHandler }, this.yearInView), this.nextYearButton())), !(monthPickerVisible || yearPickerVisible) && (h("table", { key: 'd1bff2567dee5787f0ccd9ba2c0c40aa2c5e671a', role: "grid", class: {
+                calendar: true,
+                hidden: monthPickerVisible || yearPickerVisible,
+            }, onKeyDown: this.handleCalendarKeyDown }, h("thead", { key: '9dccafd91918a15ec52fd641991e0803ccb65468', class: "weekdays-container" }, h("tr", { key: '2ecccfb88a4220bec5ed80b4819651f57a819909', class: "weekdays" }, orderedDaysOfWeek.map((dayName) => {
+            const header = size === "small" ? dayName.charAt(0) : dayName;
+            return (h("th", { scope: "col", class: "calendar-day-header" }, header));
+        }))), h("tbody", { key: '9c676dff19754d06310e626c8aba69e05ca8a71e', class: "calendar-days-container" }, weeks.map((week, weekIdx) => (h("tr", { key: weekIdx }, week.map((day) => {
+            var _a;
+            return (h("td", { key: day.toISOString() }, h(DayButton, { day: day, disableDay: this.disabled ||
+                    ((_a = this.disableDays) === null || _a === void 0 ? void 0 : _a.includes(Number(day.getDay()))), today: dateMatches(day, this.today), selected: dateMatches(day, this.selectedDate), focussed: dateMatches(day, this.focussedDate), inRange: dateInRange(day, minDay, maxDate), monthInView: monthInView, onSelectDay: this.handleSelectDay, focussedDayRef: this.setFocussedDayEl, onFocusDay: this.onDayButtonFocusHandler, onBlurDay: this.onDayButtonBlurHandler, showDaysOutsideMonth: this.showDaysOutsideMonth })));
+        }))))))), h("div", { key: '5137281599f0ad0c3d1658448b740d1192073ad2', class: {
+                "month-picker-container": true,
+                hidden: !monthPickerVisible,
+            } }, monthPickerVisible && (h(MonthPicker, { key: '460809cfbfb7db2aacd28470220863769c884651', size: size, onSelectMonth: this.handleSelectMonth, monthInView: monthInView, focussedMonth: focussedMonth, onKeyDown: this.monthPickerKeyDownHandler, focussedMonthRef: this.setFocussedMonthEl, minDate: minDate, maxDate: maxDate, yearInView: yearInView }))), h("div", { key: 'af3eb48f6bbeaf1a1ccdbb7a5f941241d10e6c4f', class: {
+                "year-picker-container": true,
+                hidden: !yearPickerVisible,
+            } }, yearPickerVisible && (h(YearPicker, { key: '4de6dd0c0563a6519b39f0fdf58a329a7bba450c', decadeView: decadeView, size: size, focussedYear: focussedYear, onSelectYear: this.handleSelectYear, onKeyDown: this.yearPickerKeyDownHandler, onFocusYear: this.onYearButtonFocusHandler, onBlurYear: this.onYearButtonBlurHandler, yearInView: yearInView, minDate: minDate, maxDate: maxDate, focussedYearRef: this.setFocussedYearEl }))), h("div", { key: '18495cc7c4150208bb64a0a222a7e233ea3a93d7', class: {
+                "bottom-buttons": true,
+                "no-today": !showTodayButton,
+            } }, showTodayButton && (h("ic-button", { key: 'd8623ea2ecc501dc77ad3fd47cd9f41b8e104c86', id: "today-button", variant: "tertiary", ref: (el) => (this.todayButtonEl = el), size: size, "aria-label": "Navigate to current date", onClick: this.todayButtonClickHandler, onKeyDown: this.todayButtonKeyDownHandler, disabled: this.isCurrentMonth() }, "Go to today")), showClearButton && (h("ic-button", { key: '40df11d2d3b36a505bab8c60acbbfb1eed03eddb', id: "clear-button", "aria-label": "clear selected date", ref: (el) => (this.clearButtonEl = el), variant: "tertiary", size: size, onClick: this.clearButtonClickHandler, onKeyDown: this.clearButtonKeyDownHandler, disabled: this.value === "" ||
+                this.value === null ||
+                this.value === undefined }, "Clear")))))));
+    }
+    static get is() { return "ic-calendar"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ic-calendar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ic-calendar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "dateFormat": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcDateFormat",
+                    "resolved": "\"DD/MM/YYYY\" | \"MM/DD/YYYY\" | \"YYYY/MM/DD\"",
+                    "references": {
+                        "IcDateFormat": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcDateFormat"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The format in which the date will be displayed."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "date-format",
+                "reflect": false,
+                "defaultValue": "\"DD/MM/YYYY\""
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the disabled state will be set."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "disableDays": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcWeekDays[]",
+                    "resolved": "IcWeekDays[] | undefined",
+                    "references": {
+                        "IcWeekDays": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcWeekDays"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The days of the week to disable."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "disableFuture": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, dates in the future are not allowed."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disable-future",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disablePast": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, dates in the past are not allowed."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disable-past",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "max": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | Date",
+                    "resolved": "Date | string",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The latest date that will be allowed. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object.\nThe value of this prop is ignored if `disableFuture` is set to `true`."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "max",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "min": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | Date",
+                    "resolved": "Date | string",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The earliest date that will be allowed. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object.\nThe value of this prop is ignored if `disablePast` is set to `true`."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "min",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "openAtDate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | Date",
+                    "resolved": "Date | string",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The date visible when the calendar opens. Used if no date is currently selected.\nThe value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "open-at-date",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "showClearButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the `Clear` button on the calendar will be visible."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-clear-button",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "showDaysOutsideMonth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, days outside the current month will be visible in the calendar."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-days-outside-month",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "showTodayButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the `Go to today` button on the calendar will be visible."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-today-button",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcSizes",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {
+                        "IcSizes": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcSizes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the calendar to be displayed."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "\"medium\""
+            },
+            "startOfWeek": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcWeekDays",
+                    "resolved": "IcWeekDays.Friday | IcWeekDays.Monday | IcWeekDays.Saturday | IcWeekDays.Sunday | IcWeekDays.Thursday | IcWeekDays.Tuesday | IcWeekDays.Wednesday",
+                    "references": {
+                        "IcWeekDays": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcWeekDays"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The first day of the week. `0` for Sunday, `1` for Monday, etc.\nDefault is Monday."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "start-of-week",
+                "reflect": false,
+                "defaultValue": "IcWeekDays.Monday"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcThemeMode",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
+                    "references": {
+                        "IcThemeMode": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcThemeMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the calendar to the dark or light theme colors. \"inherit\" will set the color based on the system settings or ic-theme component."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"inherit\""
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "IcDateValueFormat",
+                    "resolved": "Date | null | string | undefined",
+                    "references": {
+                        "IcDateValueFormat": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcDateValueFormat"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the calendar and the date visible when the calendar opens.\nThe value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": true,
+                "defaultValue": "\"\""
+            }
+        };
+    }
+    static get states() {
+        return {
+            "clearButtonClicked": {},
+            "currMonthView": {},
+            "currYearPickerView": {},
+            "decadeView": {},
+            "focussedDate": {},
+            "focussedDay": {},
+            "focussedDayEl": {},
+            "focussedMonth": {},
+            "focussedMonthEl": {},
+            "focussedYear": {},
+            "maxDate": {},
+            "minDate": {},
+            "monthInView": {},
+            "monthPickerVisible": {},
+            "orderedDaysOfWeek": {},
+            "selectedDate": {},
+            "yearInView": {},
+            "yearPickerVisible": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "icChange",
+                "name": "icChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the value has changed."
+                },
+                "complexType": {
+                    "original": "{\n    value: Date | null;\n    dateObject: {\n      day: string | null;\n      month: string | null;\n      year: string | null;\n    };\n    utcValue: Date | null;\n  }",
+                    "resolved": "{ value: Date | null; dateObject: { day: string | null; month: string | null; year: string | null; }; utcValue: Date | null; }",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                }
+            }, {
+                "method": "icCalendarClearButtonClick",
+                "name": "icCalendarClearButtonClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the clear button has been clicked."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "icCalendarDaySelect",
+                "name": "icCalendarDaySelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Emitted when a day is selected."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "icCalendarMonthSelect",
+                "name": "icCalendarMonthSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a month is selected."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "icCalendarYearSelect",
+                "name": "icCalendarYearSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a year is selected."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "clearDialogDescription": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Clears the dialog description used to provide more context for screen readers."
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "disabled",
+                "methodName": "watchDisabledHandler"
+            }, {
+                "propName": "disableFuture",
+                "methodName": "watchDisableFutureHandler"
+            }, {
+                "propName": "disablePast",
+                "methodName": "watchDisablePastHandler"
+            }, {
+                "propName": "max",
+                "methodName": "watchMaxHandler"
+            }, {
+                "propName": "min",
+                "methodName": "watchMinHandler"
+            }, {
+                "propName": "startOfWeek",
+                "methodName": "watchStartOfWeekHandler"
+            }, {
+                "propName": "value",
+                "methodName": "valueChanged"
+            }, {
+                "propName": "openAtDate",
+                "methodName": "valueChanged"
+            }, {
+                "propName": "focussedDate",
+                "methodName": "watchFocussedDateHandler"
+            }, {
+                "propName": "monthInView",
+                "methodName": "watchMonthInViewHandler"
+            }, {
+                "propName": "yearInView",
+                "methodName": "watchYearInViewHandler"
+            }, {
+                "propName": "yearPickerVisible",
+                "methodName": "watchYearPickerVisibleHandler"
+            }, {
+                "propName": "monthPickerVisible",
+                "methodName": "watchMonthPickerVisibleHandler"
+            }, {
+                "propName": "focussedDayEl",
+                "methodName": "watchFocussedDayEl"
+            }];
+    }
+}
+//# sourceMappingURL=ic-calendar.js.map