@ukic/canary-web-components 2.0.0-canary.11 → 2.0.0-canary.12

package/dist/collection/components/ic-date-picker/ic-date-picker.js

@@ -1,1506 +0,0 @@
-import { Host, h, } from "@stencil/core";
-import { createDate, clampDate, dateMatches, dateInRange, getMonthStart, getMonthEnd, getWeekEnd, getWeekStart, yearInRange, } from "../../utils/date-helpers";
-import { stringEnumToArray, onComponentRequiredPropUndefined, } from "../../utils/helpers";
-import { IcWeekDays, IcShortDayNames, IcDateInputMonths, } from "../../utils/types";
-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";
-const DEFAULT_DATE_FORMAT = "DD/MM/YYYY";
-const DEFAULT_DISABLE_DATES_FROM_NOW_MSG = "Dates in the future are not allowed. Please select a date in the past.";
-const DEFAULT_DISABLE_DATES_UNTIL_NOW_MSG = "Dates in the past are not allowed. Please select a date in the future.";
-const DEFAULT_DISABLE_DAYS_MSG = "The date you have selected is on a day of the week that is not allowed. Please select another date.";
-const FOCUS_TIMER = 100;
-const PICKER_HEIGHT_SMALL = 360;
-const PICKER_HEIGHT_DEFAULT = 400;
-const PICKER_HEIGHT_LARGE = 440;
-export class DatePicker {
-    constructor() {
-        this.clearButtonEl = null;
-        this.daysOfWeek = [];
-        this.dayButtonFocussed = false;
-        this.dayPickerKeyboardNav = false;
-        this.dialogDescription = "";
-        this.focusDay = true;
-        this.liveRegionEl = null;
-        this.monthNames = [];
-        this.monthInViewUpdateHandled = false;
-        this.myCalendarButtonClicked = false;
-        this.showPickerAbove = false;
-        this.today = new Date();
-        this.todayButtonEl = null;
-        this.yearButtonFocussed = false;
-        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.setSelectedDate = (d, emit = true) => {
-            if (d === null || !dateMatches(d, this.selectedDate)) {
-                this.selectedDate = d;
-                this.value = d;
-                if (emit) {
-                    this.inputEl.triggerIcChange(d);
-                }
-            }
-        };
-        this.handleCalendarMouseDown = (event) => {
-            const target = event.target;
-            if (target.tagName !== "IC-BUTTON") {
-                event.preventDefault();
-            }
-        };
-        this.handleCalendarClick = (event) => {
-            this.clearDialogDescription();
-            event.stopImmediatePropagation();
-        };
-        this.handleDocumentClick = () => {
-            this.calendarOpen = false;
-        };
-        this.keyDownHandler = (event) => {
-            if (event.key === "Escape") {
-                this.closeButtonClickHandler();
-                this.inputEl.setCalendarFocus();
-            }
-            else {
-                this.clearDialogDescription();
-            }
-            event.stopImmediatePropagation();
-        };
-        this.closeButtonClickHandler = () => {
-            this.calendarOpen = false;
-        };
-        this.focusFirstElement = () => {
-            this.monthButtonEl.setFocus();
-        };
-        this.focusLastElement = () => {
-            if (this.showPickerClearButton && !this.clearButtonEl.disabled) {
-                this.clearButtonEl.setFocus();
-            }
-            else if (this.showPickerTodayButton && !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();
-        };
-        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.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.todayButtonClickHandler = () => {
-            this.yearPickerVisible = false;
-            this.monthPickerVisible = false;
-            this.setFocussedDate(new Date());
-            this.setAriaLiveRegionText(this.getMonthInViewText());
-            setTimeout(() => this.focusFocussedDay(), FOCUS_TIMER);
-        };
-        this.todayButtonKeyDownHandler = (ev) => {
-            if (ev.key === "Tab" && !ev.shiftKey && this.clearButtonEl.disabled) {
-                this.focusFirstElement();
-                ev.preventDefault();
-            }
-        };
-        this.clearButtonClickHandler = () => {
-            this.setSelectedDate(null);
-            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.setMonthSelectedLiveRegionText = () => {
-            this.setAriaLiveRegionText(`${this.monthNames[this.monthInView]} selected. ${this.getMonthInViewText()}`);
-        };
-        this.setYearSelectedLiveRegionText = () => {
-            this.setAriaLiveRegionText(`${this.yearInView} selected. ${this.getMonthInViewText()}`);
-        };
-        this.getMonthInViewText = () => {
-            return `${this.monthNames[this.monthInView]} ${this.yearInView} currently in view.`;
-        };
-        this.getDecadeInViewText = () => {
-            return `${this.decadeStart} to ${this.decadeEnd} currently in view.`;
-        };
-        this.setAriaLiveRegionText = (text) => {
-            this.liveRegionEl && (this.liveRegionEl.innerText = text);
-        };
-        this.clearDialogDescription = () => {
-            this.dialogDescription = "";
-        };
-        this.clearButtonKeyDownHandler = (ev) => {
-            if (ev.key === "Tab" && !ev.shiftKey) {
-                this.focusFirstElement();
-                ev.preventDefault();
-            }
-        };
-        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.navButtonMouseDownHandler = (ev) => {
-            ev.preventDefault();
-        };
-        this.renderMonthYearNavButton = (id, flip, disabled) => {
-            const buttonSize = this.size;
-            return (h("div", { "aria-hidden": "true" }, h("ic-button", { id: id, disableTooltip: true, disabled: disabled, onClick: this.monthYearNavClickHandler, class: { flip: flip }, variant: "icon", innerHTML: chevron, size: buttonSize, tabIndex: -1, "aria-hidden": "true", onMouseDown: this.navButtonMouseDownHandler })));
-        };
-        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.previousMonthButton = () => {
-            let disabled = false;
-            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.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.isPrevYearAllowed());
-        };
-        this.nextYearButton = () => {
-            return this.renderMonthYearNavButton("next-year-button", false, !this.isNextYearAllowed());
-        };
-        this.isPrevYearAllowed = () => {
-            return this.isYearAllowed(this.yearInView - 1);
-        };
-        this.isNextYearAllowed = () => {
-            return this.isYearAllowed(this.yearInView + 1);
-        };
-        this.isYearAllowed = (yr) => {
-            return yearInRange(yr, this.minDate, this.maxDate);
-        };
-        this.getMonthView = (date) => {
-            const start = getWeekStart(getMonthStart(date), this.startOfWeek);
-            const end = getWeekEnd(getMonthEnd(date), this.startOfWeek);
-            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 = () => {
-            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;
-            }
-        };
-        this.handleSelectDay = (day) => {
-            this.setSelectedDate(day);
-            this.calendarOpen = false;
-            this.inputEl.setCalendarFocus();
-        };
-        this.handleSelectMonth = (month) => {
-            this.moveMonths(month - this.monthInView);
-            setTimeout(() => {
-                this.monthButtonEl.setFocus();
-                this.monthPickerVisible = false;
-                this.setMonthSelectedLiveRegionText();
-            }, 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(() => {
-                    this.yearButtonEl.setFocus();
-                    this.yearPickerVisible = false;
-                }, FOCUS_TIMER);
-            }
-            else {
-                const moveYears = year - this.focussedYear > 0 ? 10 : -10;
-                this.updateFocussedYear(moveYears, this.yearButtonFocussed);
-                this.setAriaLiveRegionText(this.getDecadeInViewText());
-            }
-        };
-        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.onYearButtonFocusHandler = () => {
-            this.yearButtonFocussed = true;
-        };
-        this.onYearButtonBlurHandler = () => {
-            this.yearButtonFocussed = false;
-        };
-        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.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;
-                    this.moveDays(-1 * this.getNextDayToFocus(this.focussedDate, false));
-                    break;
-                case "ArrowRight":
-                    this.dayPickerKeyboardNav = true;
-                    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.calendarTabHandler = (ev) => {
-            let handled = false;
-            if (!ev.shiftKey &&
-                (!this.showPickerTodayButton || this.isCurrentMonth()) &&
-                (!this.showPickerClearButton || this.clearButtonEl.disabled)) {
-                this.focusFirstElement();
-                handled = true;
-            }
-            else if (ev.shiftKey) {
-                this.yearButtonEl.setFocus();
-                handled = true;
-            }
-            return handled;
-        };
-        this.onDayButtonFocusHandler = () => {
-            this.dayButtonFocussed = true;
-        };
-        this.onDayButtonBlurHandler = () => {
-            this.dayButtonFocussed = false;
-        };
-        this.getNextDayToFocus = (currDay, forward, level = 1) => {
-            const move = forward ? 1 : -1;
-            const nextDay = new Date(currDay);
-            nextDay.setDate(nextDay.getDate() + move);
-            const nextDayNum = Number(nextDay.getDay());
-            if (this.disableDays.includes(nextDayNum)) {
-                return this.getNextDayToFocus(nextDay, forward, level + 1);
-            }
-            else {
-                return level;
-            }
-        };
-        this.moveDays = (numDays) => {
-            const d = new Date(this.focussedDate);
-            d.setDate(d.getDate() + numDays);
-            this.setFocussedDate(d);
-        };
-        this.moveMonths = (numMonths) => {
-            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) => {
-            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.setFocussedDate = (d) => {
-            this.focussedDate = clampDate(d, this.minDate, this.maxDate);
-        };
-        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.setDateInputProps = () => {
-            const untilNowMsg = !this.disablePast ||
-                this.disablePastMessage === DEFAULT_DISABLE_DATES_UNTIL_NOW_MSG
-                ? ""
-                : this.disablePastMessage;
-            const fromNowMsg = !this.disableFuture ||
-                this.disableFutureMessage === DEFAULT_DISABLE_DATES_FROM_NOW_MSG
-                ? ""
-                : this.disableFutureMessage;
-            const disableDaysMsg = !this.disableDays.length ||
-                this.disableDaysMessage === DEFAULT_DISABLE_DAYS_MSG
-                ? ""
-                : this.disableDaysMessage;
-            if (this.dateFormat !== DEFAULT_DATE_FORMAT) {
-                this.dateInputProps.dateFormat = this.dateFormat;
-            }
-            if (this.disableFuture) {
-                this.dateInputProps.disableFuture = this.disableFuture;
-                if (fromNowMsg !== "") {
-                    this.dateInputProps.disableFutureMessage = fromNowMsg;
-                }
-            }
-            if (this.disablePast) {
-                this.dateInputProps.disablePast = this.disablePast;
-                if (untilNowMsg !== "") {
-                    this.dateInputProps.disablePastMessage = untilNowMsg;
-                }
-            }
-            if (this.disableDays.length > 0) {
-                this.dateInputProps.disableDays = this.disableDays;
-                if (disableDaysMsg !== "") {
-                    this.dateInputProps.disableDaysMessage = disableDaysMsg;
-                }
-            }
-            this.dateInputProps.label = this.label;
-            if (this.max !== null && this.max !== "") {
-                this.dateInputProps.max = this.maxDate;
-            }
-            if (this.min !== null && this.min !== "") {
-                this.dateInputProps.min = this.minDate;
-            }
-            if (this.helperText !== undefined) {
-                this.dateInputProps.helperText = this.helperText;
-            }
-            if (this.inputId !== undefined) {
-                this.dateInputProps.inputId = this.inputId;
-            }
-            if (this.name !== undefined) {
-                this.dateInputProps.name = this.name;
-            }
-            this.dateInputProps.showClearButton = true;
-            this.dateInputProps.showCalendarButton = true;
-            if (this.disabled) {
-                this.dateInputProps.disabled = this.disabled;
-            }
-            if (this.required) {
-                this.dateInputProps.required = this.required;
-            }
-            if (this.size !== "default") {
-                this.dateInputProps.size = this.size;
-            }
-            if (this.validationStatus !== "") {
-                this.dateInputProps.validationStatus = this.validationStatus;
-            }
-            if (this.validationText !== "") {
-                this.dateInputProps.validationText = this.validationText;
-            }
-            this.dateInputProps.value = this.value;
-        };
-        this.calendarOpen = false;
-        this.currMonthView = [];
-        this.currYearPickerView = [];
-        this.dateInputProps = { label: "" };
-        this.decadeView = [];
-        this.focussedDate = null;
-        this.focussedDay = undefined;
-        this.focussedDayEl = undefined;
-        this.focussedMonth = undefined;
-        this.focussedMonthEl = undefined;
-        this.focussedYear = undefined;
-        this.maxDate = null;
-        this.minDate = null;
-        this.monthInView = undefined;
-        this.monthPickerVisible = false;
-        this.orderedDaysOfWeek = [];
-        this.selectedDate = null;
-        this.yearInView = undefined;
-        this.yearPickerVisible = false;
-        this.dateFormat = "DD/MM/YYYY";
-        this.disabled = false;
-        this.disableDays = [];
-        this.disableDaysMessage = "The date you have selected is on a day of the week that is not allowed. Please select another date.";
-        this.disableFuture = false;
-        this.disableFutureMessage = "Dates in the future are not allowed. Please select a date in the past.";
-        this.disablePast = false;
-        this.disablePastMessage = "Dates in the past are not allowed. Please select a date in the future.";
-        this.helperText = undefined;
-        this.inputId = undefined;
-        this.label = undefined;
-        this.max = "";
-        this.min = "";
-        this.name = undefined;
-        this.openAtDate = "";
-        this.required = false;
-        this.showDaysOutsideMonth = true;
-        this.showPickerClearButton = true;
-        this.showPickerTodayButton = true;
-        this.size = "default";
-        this.startOfWeek = IcWeekDays.Monday;
-        this.validationStatus = "";
-        this.validationText = "";
-        this.value = "";
-    }
-    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);
-        }
-    }
-    watchOpenHandler() {
-        if (this.calendarOpen) {
-            if (this.inputEl) {
-                let pickerHeight = PICKER_HEIGHT_DEFAULT;
-                if (this.size === "small") {
-                    pickerHeight = PICKER_HEIGHT_SMALL;
-                }
-                else if (this.size === "large") {
-                    pickerHeight = PICKER_HEIGHT_LARGE;
-                }
-                if (this.el.offsetTop + this.inputEl.offsetHeight + pickerHeight >
-                    window.innerHeight &&
-                    this.el.offsetTop > pickerHeight) {
-                    this.showPickerAbove = true;
-                }
-                else {
-                    this.showPickerAbove = false;
-                }
-            }
-            if (this.selectedDate === null ||
-                !dateInRange(this.selectedDate, this.minDate, this.maxDate)) {
-                let openAt = new Date();
-                if (this.openAtDate !== "") {
-                    openAt = createDate(this.openAtDate, this.dateFormat);
-                }
-                this.setFocussedDate(openAt);
-            }
-            else {
-                this.setFocussedDate(this.selectedDate);
-            }
-            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 or press escape to close the picker";
-            this.dialogDescription = dialogDesc;
-            setTimeout(() => this.focusFocussedDay(), FOCUS_TIMER);
-            document.addEventListener("click", this.handleDocumentClick);
-        }
-        else {
-            document.removeEventListener("click", this.handleDocumentClick);
-            this.monthPickerVisible = false;
-            this.yearPickerVisible = false;
-        }
-    }
-    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() {
-        onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Date Picker");
-        this.monthNames = stringEnumToArray(IcDateInputMonths);
-        this.daysOfWeek = stringEnumToArray(IcShortDayNames);
-        this.orderedDaysOfWeek = this.daysOfWeek
-            .splice(this.startOfWeek, this.daysOfWeek.length)
-            .concat(this.daysOfWeek.splice(0, this.startOfWeek));
-        this.watchMaxHandler();
-        this.watchMinHandler();
-    }
-    localCalendarButtonClickHandler(ev) {
-        this.myCalendarButtonClicked = true;
-        if (!this.calendarOpen) {
-            this.setSelectedDate(ev.detail.value, false);
-        }
-        this.calendarOpen = !this.calendarOpen;
-    }
-    calendarButtonClickHandler() {
-        //closes this picker if calendar button in another clicked
-        if (!this.myCalendarButtonClicked) {
-            this.calendarOpen = false;
-        }
-        this.myCalendarButtonClicked = false;
-    }
-    render() {
-        const { calendarOpen, dateInputProps, monthNames, size, focussedMonth, focussedYear, monthInView, yearInView, monthPickerVisible, yearPickerVisible, orderedDaysOfWeek, decadeView, minDate, maxDate, showPickerClearButton, showPickerTodayButton, dialogDescription, } = 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.`;
-        }
-        this.setDateInputProps();
-        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 (this.disablePast) {
-            const yesterday = new Date(minDate);
-            yesterday.setDate(minDate.getDate() - 1);
-            minDay = yesterday;
-        }
-        return (h(Host, { onKeyDown: this.keyDownHandler, class: size }, h("div", { class: "date-input-container" }, h("ic-date-input", Object.assign({ ref: (el) => (this.inputEl = el) }, dateInputProps))), calendarOpen && (h("div", null, h("span", { id: "dialog-description", class: "sr-only" }, dialogDescription), h("div", { role: "dialog", "aria-modal": "true", "aria-label": dialogLabel, "aria-describedBy": "dialog-description", class: {
-                "calendar-container": true,
-                above: this.showPickerAbove,
-            }, onMouseDown: this.handleCalendarMouseDown, onClick: this.handleCalendarClick }, h("span", { ref: (el) => (this.liveRegionEl = el), id: "live-region", "aria-live": "assertive", class: "sr-only" }), h("div", { class: {
-                "month-year-nav-container": true,
-            } }, h("div", { class: "month-year-nav" }, this.previousMonthButton(), h("span", { id: "select-month-hint", "aria-hidden": "true" }, monthButtonText), h("ic-button", { ref: (el) => (this.monthButtonEl = el), size: size, class: "month-picker-button", "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", { class: "month-year-nav" }, this.previousYearButton(), h("span", { id: "select-year-hint", "aria-hidden": "true" }, yearButtonText), h("ic-button", { ref: (el) => (this.yearButtonEl = el), size: size, class: "year-picker-button", "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("div", { class: {
-                calendar: true,
-                hidden: monthPickerVisible || yearPickerVisible,
-            }, onKeyDown: this.handleCalendarKeyDown }, h("div", { class: "weekdays", "aria-hidden": "true" }, orderedDaysOfWeek.map((dayName) => {
-            const header = size === "small" ? dayName.charAt(0) : dayName;
-            return (h("div", { class: "calendar-day-header" }, h("ic-typography", { variant: "caption" }, header)));
-        })), h("div", { class: "calendar-days-container" }, this.currMonthView.map((day) => (h(DayButton, { day: day, disableDay: this.disableDays.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", { class: {
-                "month-picker-container": true,
-                hidden: !monthPickerVisible,
-            } }, monthPickerVisible && (h(MonthPicker, { size: size, onSelectMonth: this.handleSelectMonth, monthInView: monthInView, focussedMonth: focussedMonth, onKeyDown: this.monthPickerKeyDownHandler, focussedMonthRef: this.setFocussedMonthEl, minDate: minDate, maxDate: maxDate, yearInView: yearInView }))), h("div", { class: {
-                "year-picker-container": true,
-                hidden: !yearPickerVisible,
-            } }, yearPickerVisible && (h(YearPicker, { 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", { class: {
-                "bottom-buttons": true,
-                "no-today": !showPickerTodayButton,
-            } }, showPickerTodayButton && (h("ic-button", { 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")), showPickerClearButton && (h("ic-button", { 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-date-picker"; }
-    static get encapsulation() { return "shadow"; }
-    static get delegatesFocus() { return true; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["ic-date-picker.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["ic-date-picker.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": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The format in which the date will be displayed."
-                },
-                "attribute": "date-format",
-                "reflect": false,
-                "defaultValue": "\"DD/MM/YYYY\""
-            },
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true`, the disabled state will be set."
-                },
-                "attribute": "disabled",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "disableDays": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "IcWeekDays[]",
-                    "resolved": "IcWeekDays[]",
-                    "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."
-                },
-                "defaultValue": "[]"
-            },
-            "disableDaysMessage": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The text to display as the validation message when `disableDays` is `true` and a disabled date is entered."
-                },
-                "attribute": "disable-days-message",
-                "reflect": false,
-                "defaultValue": "\"The date you have selected is on a day of the week that is not allowed. Please select another date.\""
-            },
-            "disableFuture": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true`, dates in the future are not allowed. A validation message will appear if a date in the future is entered."
-                },
-                "attribute": "disable-future",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "disableFutureMessage": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The text to display as the validation message when `disableFuture` is `true` and a date in the future is entered."
-                },
-                "attribute": "disable-future-message",
-                "reflect": false,
-                "defaultValue": "\"Dates in the future are not allowed. Please select a date in the past.\""
-            },
-            "disablePast": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true`, dates in the past are not allowed. A validation message will appear if a date in the past is entered."
-                },
-                "attribute": "disable-past",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "disablePastMessage": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The text to display as the validation message when `disablePast` is `true` and a date in the past is entered."
-                },
-                "attribute": "disable-past-message",
-                "reflect": false,
-                "defaultValue": "\"Dates in the past are not allowed. Please select a date in the future.\""
-            },
-            "helperText": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The helper text that will be displayed for additional field guidance. This will default to the text \"Use format\" along with the `dateFormat` value."
-                },
-                "attribute": "helper-text",
-                "reflect": false
-            },
-            "inputId": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The ID for the input field. The default will be an automatically generated value."
-                },
-                "attribute": "input-id",
-                "reflect": false
-            },
-            "label": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The label for the date input."
-                },
-                "attribute": "label",
-                "reflect": false
-            },
-            "max": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string | Date",
-                    "resolved": "Date | string",
-                    "references": {
-                        "Date": {
-                            "location": "global",
-                            "id": "global::Date"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "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`."
-                },
-                "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": true,
-                "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`."
-                },
-                "attribute": "min",
-                "reflect": false,
-                "defaultValue": "\"\""
-            },
-            "name": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The name of the control, which is submitted with the form data."
-                },
-                "attribute": "name",
-                "reflect": false
-            },
-            "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."
-                },
-                "attribute": "open-at-date",
-                "reflect": false,
-                "defaultValue": "\"\""
-            },
-            "required": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true`, the input will require a value."
-                },
-                "attribute": "required",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "showDaysOutsideMonth": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true`, days outside the current month will be visible in the date picker."
-                },
-                "attribute": "show-days-outside-month",
-                "reflect": false,
-                "defaultValue": "true"
-            },
-            "showPickerClearButton": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true`, the `Clear` button on the date picker will be visible."
-                },
-                "attribute": "show-picker-clear-button",
-                "reflect": false,
-                "defaultValue": "true"
-            },
-            "showPickerTodayButton": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true`, the `Go to today` button on the date picker will be visible."
-                },
-                "attribute": "show-picker-today-button",
-                "reflect": false,
-                "defaultValue": "true"
-            },
-            "size": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "IcSizes",
-                    "resolved": "\"default\" | \"large\" | \"small\"",
-                    "references": {
-                        "IcSizes": {
-                            "location": "import",
-                            "path": "../../utils/types",
-                            "id": "src/utils/types.ts::IcSizes"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The size of the date picker to be displayed."
-                },
-                "attribute": "size",
-                "reflect": false,
-                "defaultValue": "\"default\""
-            },
-            "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": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The first day of the week. `0` for Sunday, `1` for Monday, etc.\nDefault is Monday."
-                },
-                "attribute": "start-of-week",
-                "reflect": false,
-                "defaultValue": "IcWeekDays.Monday"
-            },
-            "validationStatus": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "IcInformationStatusOrEmpty",
-                    "resolved": "\"\" | \"error\" | \"success\" | \"warning\"",
-                    "references": {
-                        "IcInformationStatusOrEmpty": {
-                            "location": "import",
-                            "path": "../../utils/types",
-                            "id": "src/utils/types.ts::IcInformationStatusOrEmpty"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in date validation."
-                },
-                "attribute": "validation-status",
-                "reflect": false,
-                "defaultValue": "\"\""
-            },
-            "validationText": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The text to display as the validation message. This will override the built-in date validation."
-                },
-                "attribute": "validation-text",
-                "reflect": false,
-                "defaultValue": "\"\""
-            },
-            "value": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "string | Date | null | undefined",
-                    "resolved": "Date | string",
-                    "references": {
-                        "Date": {
-                            "location": "global",
-                            "id": "global::Date"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The value of the date picker. 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."
-                },
-                "attribute": "value",
-                "reflect": false,
-                "defaultValue": "\"\""
-            }
-        };
-    }
-    static get states() {
-        return {
-            "calendarOpen": {},
-            "currMonthView": {},
-            "currYearPickerView": {},
-            "dateInputProps": {},
-            "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": "{ value: Date }",
-                    "resolved": "{ value: Date; }",
-                    "references": {
-                        "Date": {
-                            "location": "global",
-                            "id": "global::Date"
-                        }
-                    }
-                }
-            }];
-    }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "max",
-                "methodName": "watchMaxHandler"
-            }, {
-                "propName": "min",
-                "methodName": "watchMinHandler"
-            }, {
-                "propName": "calendarOpen",
-                "methodName": "watchOpenHandler"
-            }, {
-                "propName": "focussedDate",
-                "methodName": "watchFocussedDateHandler"
-            }, {
-                "propName": "monthInView",
-                "methodName": "watchMonthInViewHandler"
-            }, {
-                "propName": "yearInView",
-                "methodName": "watchYearInViewHandler"
-            }, {
-                "propName": "yearPickerVisible",
-                "methodName": "watchYearPickerVisibleHandler"
-            }, {
-                "propName": "monthPickerVisible",
-                "methodName": "watchMonthPickerVisibleHandler"
-            }, {
-                "propName": "focussedDayEl",
-                "methodName": "watchFocussedDayEl"
-            }];
-    }
-    static get listeners() {
-        return [{
-                "name": "calendarButtonClicked",
-                "method": "localCalendarButtonClickHandler",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "calendarButtonClicked",
-                "method": "calendarButtonClickHandler",
-                "target": "document",
-                "capture": false,
-                "passive": false
-            }];
-    }
-}
-//# sourceMappingURL=ic-date-picker.js.map