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

package/dist/cjs/ic-calendar_2.cjs.entry.js

@@ -0,0 +1,2354 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-d337cd8a.js');
+const helpers = require('./helpers-6f4b406b.js');
+const dateHelpers = require('./date-helpers-d7ee7b45.js');
+const clearIcon = require('./clear-icon-547aa9b9.js');
+
+const chevron = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.70687 6L8.29688 7.41L12.8769 12L8.29688 16.59L9.70687 18L15.7069 12L9.70687 6Z" fill="currentColor"/>
+</svg>
+`;
+
+const DayButton = ({ focussed, today, day, monthInView, onFocusDay, onBlurDay, onSelectDay, selected, focussedDayRef, inRange, showDaysOutsideMonth, disableDay, }) => {
+    const handleDayClick = () => {
+        onSelectDay(day);
+    };
+    const handleDayFocus = () => {
+        onFocusDay();
+    };
+    const handleDayBlur = () => {
+        onBlurDay();
+    };
+    const dayNames = helpers.stringEnumToArray(helpers.IcDayNames);
+    const months = helpers.stringEnumToArray(helpers.IcDateInputMonths);
+    const outsideRange = !inRange || disableDay;
+    const outsideMonth = monthInView !== day.getMonth();
+    const disabled = outsideRange || (outsideMonth && !showDaysOutsideMonth);
+    return (index.h("div", { class: "day-button-container" },
+        index.h("button", { class: {
+                "day-button": true,
+                "outside-month": outsideMonth,
+                "outside-range": !!outsideRange,
+                hidden: outsideMonth && !showDaysOutsideMonth,
+                disabled: disabled,
+                today: today,
+                selected: selected,
+                focussed: focussed,
+            }, tabIndex: focussed ? 0 : -1, "aria-hidden": outsideMonth ? "true" : "false", "aria-disabled": disabled ? "true" : "false", "aria-current": today ? "date" : undefined, "aria-label": disabled || outsideMonth || outsideRange
+                ? undefined
+                : `Choose ${dayNames[day.getDay()]}, ${day.getDate()} ${months[day.getMonth()]} ${day.getFullYear()}`, disabled: disabled, onClick: handleDayClick, onBlur: handleDayBlur, onFocus: handleDayFocus, ref: (el) => {
+                if (focussed && el && focussedDayRef) {
+                    focussedDayRef(el);
+                }
+            } }, (!outsideMonth || (outsideMonth && showDaysOutsideMonth)) && (index.h("ic-typography", { variant: "subtitle-small", italic: outsideMonth }, day.getDate())))));
+};
+
+const MonthPicker = ({ size, focussedMonth, monthInView, onSelectMonth, onKeyDown, focussedMonthRef, minDate, maxDate, yearInView, }) => {
+    const handleMonthClick = (ev) => {
+        const button = ev.target;
+        onSelectMonth(Number(button.getAttribute("data-month")));
+    };
+    const monthNames = helpers.stringEnumToArray(helpers.IcDateInputMonths);
+    const cols = size === "small" ? 2 : 3;
+    const months = [];
+    for (let i = 0; i < monthNames.length; i += cols) {
+        months.push(monthNames.slice(i, i + cols));
+    }
+    return (index.h("div", { class: {
+            "month-picker": true,
+        }, role: "grid" }, months.map((month, monthIdx) => (index.h("div", { class: "month-picker-row", key: monthIdx, role: "row" }, month.map((mon, index$1) => {
+        const correctedIndex = monthIdx * cols + index$1;
+        const current = monthInView === correctedIndex;
+        const focussed = focussedMonth === correctedIndex;
+        const outsideRange = !dateHelpers.dateInRange(new Date(yearInView, correctedIndex, 1), minDate ? dateHelpers.getMonthStart(minDate) : null, maxDate ? dateHelpers.getMonthEnd(maxDate) : null);
+        return (index.h("ic-button", { role: "gridcell", class: {
+                "month-button": true,
+                selected: current,
+                focussed: focussed,
+                disabled: outsideRange,
+            }, "full-width": true, disabled: outsideRange, variant: current ? "primary" : "tertiary", "data-month": correctedIndex, size: size, tabIndex: focussed ? 0 : -1, "aria-current": current ? "true" : "false", "aria-label": current ? "" : `select ${mon}`, onClick: handleMonthClick, onKeyDown: onKeyDown, ref: (el) => {
+                if (focussed && el) {
+                    focussedMonthRef(el);
+                }
+            } }, mon));
+    }))))));
+};
+
+const YearPicker = ({ decadeView, size, focussedYear, yearInView, onSelectYear, onFocusYear, onBlurYear, onKeyDown, minDate, maxDate, focussedYearRef, }) => {
+    const handleYearClick = (ev) => {
+        const button = ev.target;
+        onSelectYear(Number(button.getAttribute("data-year")));
+    };
+    const handleYearFocus = () => {
+        onFocusYear();
+    };
+    const handleYearBlur = () => {
+        onBlurYear();
+    };
+    const navButtonMouseDownHandler = (ev) => {
+        ev.preventDefault();
+    };
+    const cols = size === "small" ? 2 : 3;
+    const rows = size === "small" ? 6 : 4;
+    const thisDecade = [];
+    for (let i = 0; i < decadeView.length; i += cols) {
+        thisDecade.push(decadeView.slice(i, i + cols));
+    }
+    const renderYearButton = (yr, yearIdx, idx) => {
+        const isPrevDecade = yearIdx === 0 && idx === 0;
+        const isNextDecade = yearIdx === rows - 1 && idx === cols - 1;
+        const isCurrent = yearInView === yr;
+        const isFocussed = focussedYear === yr;
+        return (index.h("ic-button", { key: yr, role: "gridcell", id: isPrevDecade
+                ? "prev-decade-button"
+                : isNextDecade
+                    ? "next-decade-button"
+                    : undefined, class: {
+                "prev-decade": isPrevDecade,
+                "next-decade": isNextDecade,
+                "year-button": true,
+                selected: !isPrevDecade && !isNextDecade ? isCurrent : false,
+                focussed: !isPrevDecade && !isNextDecade ? isFocussed : false,
+                flip: isNextDecade,
+            }, "full-width": true, disabled: !dateHelpers.yearInRange(yr, minDate, maxDate), "data-year": yr, tabIndex: isPrevDecade || isNextDecade ? -1 : isFocussed ? 0 : -1, variant: isPrevDecade || isNextDecade
+                ? "tertiary"
+                : isCurrent
+                    ? "primary"
+                    : "tertiary", onClick: handleYearClick, onMouseDown: isPrevDecade || isNextDecade ? navButtonMouseDownHandler : undefined, size: size, "aria-label": !isPrevDecade && !isNextDecade
+                ? isCurrent
+                    ? ""
+                    : `select ${yr}`
+                : undefined, "aria-current": !isPrevDecade && !isNextDecade
+                ? isCurrent
+                    ? "true"
+                    : "false"
+                : undefined, onKeyDown: !isPrevDecade && !isNextDecade ? onKeyDown : undefined, onFocus: !isPrevDecade && !isNextDecade ? handleYearFocus : undefined, onBlur: !isPrevDecade && !isNextDecade ? handleYearBlur : undefined, ref: !isPrevDecade && !isNextDecade && isFocussed
+                ? (el) => el && focussedYearRef(el)
+                : undefined },
+            isPrevDecade ? `${yr - 9}s` : isNextDecade ? `${yr}s` : yr,
+            (isPrevDecade || isNextDecade) && (index.h("svg", { slot: isPrevDecade ? "left-icon" : "right-icon", width: "12", height: "12", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
+                index.h("path", { d: "M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z", fill: "currentColor" })))));
+    };
+    return (index.h("div", { class: "year-picker", role: "grid" }, thisDecade.map((years, yearIdx) => (index.h("div", { class: "year-picker-row", role: "row", key: yearIdx }, years.map((yr, idx) => renderYearButton(yr, yearIdx, idx)))))));
+};
+
+const icCalendarCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host(.ic-date-picker-above) .calendar-container{bottom:calc(var(--ic-space-xxl) - var(--ic-space-xxs))}:host(.ic-date-picker-calendar) .calendar-container{box-shadow:var(--ic-calendar-elevation)}:host .calendar-container{min-width:19rem;max-width:23.5rem;width:var(--input-width);display:flex;flex-direction:column;gap:var(--ic-space-xs);position:absolute;border:var(--ic-border-default);border-color:var(--ic-calendar-border);border-radius:var(--ic-border-radius);align-items:center;background-color:var(--ic-calendar-bg);z-index:var(--ic-z-index-calendar);box-sizing:border-box;margin-top:var(--ic-space-xxxs);padding:var(--ic-space-xs);animation:fade-in-calendar var(--ic-transition-duration-slow)}:host(.ic-calendar-small) .calendar-container{min-width:17rem;max-width:21.5rem}:host(.ic-calendar-large) .calendar-container{min-width:21rem;max-width:25.5rem}:host(.ic-calendar-large){--month-button-width:6.3125rem}:host(.ic-calendar-small){--month-button-width:6.25rem}:host .month-year-nav-container{display:flex;justify-content:space-between;align-items:center;align-self:stretch}:host .month-year-nav-container.hidden{display:none}:host .month-year-nav{display:flex;justify-content:space-between;align-items:center;flex:1 0 0}:host .month-picker,:host .year-picker{display:flex;flex-direction:column;align-items:center;width:17.5rem;-moz-column-gap:var(--ic-space-xs);column-gap:var(--ic-space-xs);row-gap:var(--ic-space-xxs)}:host(.ic-calendar-small) .month-picker,:host(.ic-calendar-small) .year-picker{width:13.125rem}:host(.ic-calendar-large) .month-picker,:host(.ic-calendar-large) .year-picker{width:20rem}:host .month-picker .month-picker-row,:host .year-picker .year-picker-row{display:inline-grid;grid-template-columns:repeat(3, minmax(0px, 1fr));width:100%;gap:var(--ic-space-xs)}:host(.ic-calendar-small) .month-picker .month-picker-row,:host(.ic-calendar-small) .year-picker .year-picker-row{grid-template-columns:repeat(2, minmax(0, 1fr))}:host .month-picker-button,:host .year-picker-button{width:5rem;--min-width:5rem}:host .month-button,:host .year-button{width:var(--month-button-width)}:host .month-button.focussed,:host .year-button.focussed{z-index:1}:host .month-button::part(button),:host .year-button::part(button){min-width:var(--month-button-width);padding:var(--ic-space-xs) auto}:host .prev-decade.year-button svg{margin-right:calc(-1 * var(--ic-space-xs));--icon-width:var(--ic-space-md);--icon-height:var(--ic-space-md)}:host(.ic-calendar-small) .prev-decade.year-button svg{margin-right:calc(-1 * calc(var(--ic-space-md) + var(--ic-space-1px)))}:host(.ic-calendar-large) .prev-decade.year-button svg{margin-right:calc(-1 * calc(var(--ic-space-md) + var(--ic-space-xxs)))}:host .prev-decade.year-button::part(button){padding-left:0;padding-right:var(--ic-space-lg);gap:var(--ic-space-xxxs);display:inline-grid;grid-template-columns:1.5rem 1fr}:host(.ic-calendar-small) .prev-decade.year-button::part(button){padding-left:0;padding-right:calc(var(--ic-space-lg) + var(--ic-space-xxs))}:host .next-decade.year-button svg{margin-left:calc(-1 * var(--ic-space-lg));--icon-width:var(--ic-space-md);--icon-height:var(--ic-space-md)}:host(.ic-calendar-small) .next-decade.year-button svg,:host(.ic-calendar-large) .next-decade.year-button svg{margin-left:calc(\n    -1 * (var(--ic-space-lg) + var(--ic-space-xs) + var(--ic-space-1px))\n  )}:host .next-decade.year-button::part(button){padding-right:0;padding-left:var(--ic-space-lg);gap:var(--ic-space-xxxs);display:inline-grid;grid-template-columns:1fr 1.5rem}:host(.ic-calendar-small) .next-decade.year-button::part(button),:host(.ic-calendar-large) .next-decade.year-button::part(button){padding-left:calc(var(--ic-space-xl) - var(--ic-space-xxs))}:host .bottom-buttons{display:flex;justify-content:space-between;align-items:center;align-self:stretch;animation:fade-in-buttons var(--ic-transition-duration-slow)}:host .bottom-buttons.no-today{align-items:flex-end;flex-direction:column}:host .bottom-buttons.hidden{display:none}:host .calendar{display:flex;flex-direction:column;align-items:flex-start;width:15.75rem;animation:fade-in-buttons var(--ic-transition-duration-slow)}:host(.ic-calendar-large) .calendar{width:19.25rem}:host(.ic-calendar-small) .calendar{padding-bottom:var(--ic-space-xxs);width:14rem}:host .hidden{display:none}:host .weekdays-container{display:flex;align-self:stretch}:host .weekdays{display:flex;flex-grow:1;justify-content:space-between;align-items:flex-start;padding-bottom:var(--ic-space-xs)}:host .calendar-days-container{display:flex;flex-wrap:wrap;justify-content:space-between;row-gap:var(--ic-space-xs);padding:var(--ic-space-xxs) 0;min-height:16rem;align-content:flex-start}:host(.ic-calendar-small) .calendar-days-container{padding:var(--ic-space-xxxs) 0;min-height:14.5rem}:host(.ic-calendar-large) .calendar-days-container{padding:var(--ic-space-xs) 0;min-height:17.5rem}:host .calendar-days-container tr{display:flex;flex-grow:1;justify-content:space-between;border-spacing:0}:host .calendar-day-header{display:flex;width:2rem;padding:var(--ic-space-xxs) 0;justify-content:center;align-items:center;color:var(--ic-typography-color, var(--ic-color-text-primary));--ic-typography-color:var(--ic-calendar-label);text-align:center;font:var(--ic-font-caption);letter-spacing:var(--ic-font-letter-spacing-0pt0025)}:host(.ic-calendar-large) .calendar-day-header{padding:var(--ic-space-xxs)}:host .day-button-container{display:flex;justify-content:center;align-items:center;width:2.25rem;height:2.25rem}:host(.ic-calendar-small) .day-button-container{width:2rem;height:2rem}:host(.ic-calendar-large) .day-button-container{width:2.5rem;height:2.5rem}:host .day-button{display:flex;position:relative;justify-content:center;align-items:center;border:0;border-radius:2rem;background-color:var(--ic-calendar-bg);width:2rem;height:2rem;cursor:pointer;transition:var(--ic-easing-transition-fast);z-index:0}:host .day-button.disabled{cursor:default}:host(.ic-calendar-large) .day-button{width:2.25rem;height:2.25rem}:host(.ic-calendar-small) .day-button{width:1.75rem;height:1.75rem}:host .day-button ic-typography{width:1.75rem;--ic-typography-color:var(--ic-calendar-date-label-default)}:host .day-button.outside-range ic-typography{--ic-typography-color:var(--ic-calendar-date-label-disabled)}:host .day-button.outside-month ic-typography{font-weight:var(--ic-font-weight-regular) !important}:host .day-button.outside-month:not(.outside-range):not(.selected) ic-typography{--ic-typography-color:var(--ic-calendar-date-label-default)}:host .day-button:hover:not(.disabled){background-color:var(--ic-calendar-date-default-bg-hover)}:host .day-button:active:not(.disabled){background-color:var(--ic-calendar-date-default-bg-pressed)}@media (prefers-reduced-motion: no-preference){:host .day-button:hover:not(.disabled):not(.focussed),:host .day-button:active:not(.disabled):not(.focussed){transition:background-color var(--ic-transition-duration-slow) ease-in-out}}:host .day-button.selected:not(.hidden){background-color:var(--ic-calendar-date-active-bg-default)}:host .day-button.selected ic-typography{--ic-typography-color:var(--ic-calendar-date-label-selected)}:host .day-button.selected:not(.hidden):hover{background-color:var(--ic-calendar-date-active-bg-hover)}:host .day-button.selected:not(.hidden):active{background-color:var(--ic-calendar-date-active-bg-pressed)}:host .day-button.focussed{z-index:1}:host .day-button:focus{outline:none}:host .day-button.focussed:focus{box-shadow:var(--ic-border-focus)}:host .day-button.today:not(.hidden)::after{content:\"\";position:absolute;width:0.875rem;height:0.125rem;bottom:0.4rem;border-radius:var(--ic-border-radius);background-color:var(--ic-calendar-default-underline)}:host(.ic-calendar-small) .day-button.today::after{bottom:0.35rem}:host(.ic-calendar-large) .day-button.today::after{width:1rem}:host .day-button.today.selected::after{background-color:var(--ic-calendar-selected-underline)}:host #select-month-hint,:host #select-year-hint{display:none}.sr-only{position:absolute;left:-9999px}@media (prefers-reduced-motion: reduce){:host .calendar-container,:host .calendar,:host .bottom-buttons{animation:none}}@keyframes fade-in-buttons{0%{opacity:0}50%{opacity:0}100%{opacity:1}}@keyframes fade-in-calendar{0%{display:flex;max-height:0}100%{display:flex;max-height:600px}}@media (forced-colors: active){:host .day-button.today:not(.hidden)::after{background-color:highlight}:host .day-button.selected:not(.hidden){background-color:highlight}:host .day-button.focussed:focus{border:var(--ic-border-hc)}:host .month-button.selected::part(button),:host .year-button.selected::part(button){background-color:highlight}}";
+const IcCalendarStyle0 = icCalendarCss;
+
+const FOCUS_TIMER = 100;
+const Calendar$1 = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.icChange = index.createEvent(this, "icChange", 7);
+        this.icCalendarClearButtonClick = index.createEvent(this, "icCalendarClearButtonClick", 7);
+        this.icCalendarDaySelect = index.createEvent(this, "icCalendarDaySelect", 7);
+        this.icCalendarMonthSelect = index.createEvent(this, "icCalendarMonthSelect", 7);
+        this.icCalendarYearSelect = index.createEvent(this, "icCalendarYearSelect", 7);
+        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 = helpers.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 = dateHelpers.createDate(this.value, this.dateFormat);
+                    }
+                    if (!!openAt && dateHelpers.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 = dateHelpers.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 = dateHelpers.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 = dateHelpers.clampDate(d, this.minDate, this.maxDate);
+        };
+        this.setSelectedDate = (d, emit = true) => {
+            if (d === null || !dateHelpers.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 = dateHelpers.convertToDoubleDigits(d.getDate());
+                month = dateHelpers.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(dateHelpers.getMonthStart(this.focussedDate)).setMonth(newMonth));
+                const max = dateHelpers.getMonthEnd(min);
+                const newDate = new Date(new Date(this.focussedDate).setMonth(newMonth));
+                this.setFocussedDate(dateHelpers.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(dateHelpers.getMonthStart(this.focussedDate)).setFullYear(newYear));
+                const max = dateHelpers.getMonthEnd(min);
+                const newDate = new Date(new Date(this.focussedDate).setFullYear(newYear));
+                this.setFocussedDate(dateHelpers.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 = dateHelpers.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 = dateHelpers.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;
+            }
+            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;
+            }
+            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) => dateHelpers.yearInRange(yr, this.minDate, this.maxDate);
+        this.getMonthView = (date) => {
+            const start = dateHelpers.getWeekStart(dateHelpers.getMonthStart(date), this.startOfWeek);
+            const end = dateHelpers.addSixWeeks(start);
+            const days = [];
+            let current = start;
+            while (!dateHelpers.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 (index.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() {
+        helpers.removeDisabledFalse(this.disabled, this.el);
+        if (this.disabled) {
+            this.setSelectedDate(null);
+        }
+        else {
+            this.setOpenAtDate();
+        }
+    }
+    watchDisableFutureHandler() {
+        this.watchMaxHandler();
+    }
+    watchDisablePastHandler() {
+        this.watchMinHandler();
+    }
+    watchMaxHandler() {
+        if (this.disableFuture) {
+            this.maxDate = new Date();
+        }
+        else {
+            this.maxDate = dateHelpers.createDate(this.max, this.dateFormat);
+        }
+    }
+    watchMinHandler() {
+        if (this.disablePast) {
+            this.minDate = new Date();
+        }
+        else {
+            this.minDate = dateHelpers.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 = helpers.stringEnumToArray(helpers.IcDateInputMonths);
+        this.daysOfWeek = helpers.stringEnumToArray(helpers.IcShortDayNames);
+        this.watchStartOfWeekHandler();
+        this.watchMaxHandler();
+        this.watchMinHandler();
+        this.setOpenAtDate();
+        helpers.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 (index.h(index.Host, { key: '5811c7e3bf515643f11c4ecd66e166ab672a15ab', class: {
+                [`ic-calendar-${size}`]: true,
+                [`ic-theme-${theme}`]: theme !== "inherit",
+            } }, index.h("div", { key: '56f6fbfa98519f60e040d524f19d52bb2449e96d' }, index.h("span", { key: 'a52cc22ba545f12ccde1541b84bddbedc1a88734', id: "dialog-description", class: "sr-only" }, dialogDescription), index.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 }), index.h("span", { key: '63a3c2c916c905efce47669886edff51422fd755', ref: (el) => (this.liveRegionEl = el), id: "live-region", "aria-live": "assertive", class: "sr-only" }), index.h("div", { key: 'd553857fb83f497d666355b283391530a94c09a9', class: {
+                "month-year-nav-container": true,
+            } }, index.h("div", { key: 'aff93454cc4f27db3e8464ac4289471c353f0086', class: "month-year-nav" }, this.previousMonthButton(), index.h("span", { key: 'a4771ae4d86e75fbf80134a4a53190a9d9402297', id: "select-month-hint", "aria-hidden": "true" }, monthButtonText), index.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()), index.h("div", { key: '91adac1ecbcccbab1b1c76c741ea64b2d7efe818', class: "month-year-nav" }, this.previousYearButton(), index.h("span", { key: '2ccac8cb808bfd951f36e5f371c128ff9e1bf84e', id: "select-year-hint", "aria-hidden": "true" }, yearButtonText), index.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) && (index.h("table", { key: 'd1bff2567dee5787f0ccd9ba2c0c40aa2c5e671a', role: "grid", class: {
+                calendar: true,
+                hidden: monthPickerVisible || yearPickerVisible,
+            }, onKeyDown: this.handleCalendarKeyDown }, index.h("thead", { key: '9dccafd91918a15ec52fd641991e0803ccb65468', class: "weekdays-container" }, index.h("tr", { key: '2ecccfb88a4220bec5ed80b4819651f57a819909', class: "weekdays" }, orderedDaysOfWeek.map((dayName) => {
+            const header = size === "small" ? dayName.charAt(0) : dayName;
+            return (index.h("th", { scope: "col", class: "calendar-day-header" }, header));
+        }))), index.h("tbody", { key: '9c676dff19754d06310e626c8aba69e05ca8a71e', class: "calendar-days-container" }, weeks.map((week, weekIdx) => (index.h("tr", { key: weekIdx }, week.map((day) => {
+            var _a;
+            return (index.h("td", { key: day.toISOString() }, index.h(DayButton, { day: day, disableDay: this.disabled ||
+                    ((_a = this.disableDays) === null || _a === void 0 ? void 0 : _a.includes(Number(day.getDay()))), today: dateHelpers.dateMatches(day, this.today), selected: dateHelpers.dateMatches(day, this.selectedDate), focussed: dateHelpers.dateMatches(day, this.focussedDate), inRange: dateHelpers.dateInRange(day, minDay, maxDate), monthInView: monthInView, onSelectDay: this.handleSelectDay, focussedDayRef: this.setFocussedDayEl, onFocusDay: this.onDayButtonFocusHandler, onBlurDay: this.onDayButtonBlurHandler, showDaysOutsideMonth: this.showDaysOutsideMonth })));
+        }))))))), index.h("div", { key: '5137281599f0ad0c3d1658448b740d1192073ad2', class: {
+                "month-picker-container": true,
+                hidden: !monthPickerVisible,
+            } }, monthPickerVisible && (index.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 }))), index.h("div", { key: 'af3eb48f6bbeaf1a1ccdbb7a5f941241d10e6c4f', class: {
+                "year-picker-container": true,
+                hidden: !yearPickerVisible,
+            } }, yearPickerVisible && (index.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 }))), index.h("div", { key: '18495cc7c4150208bb64a0a222a7e233ea3a93d7', class: {
+                "bottom-buttons": true,
+                "no-today": !showTodayButton,
+            } }, showTodayButton && (index.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 && (index.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 delegatesFocus() { return true; }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "disabled": ["watchDisabledHandler"],
+        "disableFuture": ["watchDisableFutureHandler"],
+        "disablePast": ["watchDisablePastHandler"],
+        "max": ["watchMaxHandler"],
+        "min": ["watchMinHandler"],
+        "startOfWeek": ["watchStartOfWeekHandler"],
+        "value": ["valueChanged"],
+        "openAtDate": ["valueChanged"],
+        "focussedDate": ["watchFocussedDateHandler"],
+        "monthInView": ["watchMonthInViewHandler"],
+        "yearInView": ["watchYearInViewHandler"],
+        "yearPickerVisible": ["watchYearPickerVisibleHandler"],
+        "monthPickerVisible": ["watchMonthPickerVisibleHandler"],
+        "focussedDayEl": ["watchFocussedDayEl"]
+    }; }
+};
+Calendar$1.style = IcCalendarStyle0;
+
+const Calendar = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <path d="M16.6667 2.50004H15.8334V0.833374H14.1667V2.50004H5.83342V0.833374H4.16675V2.50004H3.33341C2.41675 2.50004 1.66675 3.25004 1.66675 4.16671V17.5C1.66675 18.4167 2.41675 19.1667 3.33341 19.1667H16.6667C17.5834 19.1667 18.3334 18.4167 18.3334 17.5V4.16671C18.3334 3.25004 17.5834 2.50004 16.6667 2.50004ZM16.6667 17.5H3.33341V6.66671H16.6667V17.5Z" fill="currentColor"/>
+</svg>`;
+
+const icDateInputCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{--ic-input-label-helpertext-padding:var(--ic-space-xs);--input-bg-color:var(--ic-date-input-bg);--ic-input-label-text-color:var(--ic-date-input-label);--ic-input-label-helper-text-color:var(--ic-date-input-subtitle);--border-color:var(--ic-date-input-border);--border-color-disabled:var(--ic-date-input-border-disabled);--border-color-hover:var(--ic-date-input-border-default-hover);--border-color-pressed:var(--ic-date-input-border-default-pressed);--border-error-color:var(--ic-date-input-border-error);--border-error-color-hover:var(--ic-date-input-border-error-hover);--border-error-color-pressed:var(--ic-date-input-border-error-pressed);--border-success-color:var(--ic-date-input-border-success);--border-success-color-hover:var(--ic-date-input-border-success-hover);--border-success-color-pressed:var(--ic-date-input-border-success-pressed);--border-warning-color:var(--ic-date-input-border-warning);--border-warning-color-hover:var(--ic-date-input-border-warning-hover);--border-warning-color-pressed:var(--ic-date-input-border-warning-pressed)}:host(.ic-date-input-disabled){--ic-input-label-text-color:var(--ic-date-input-label-disabled);--ic-input-label-helper-text-color:var(--ic-date-input-subtitle-disabled)}input{border:0;height:100%;padding:0;outline:none;background:none;-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield;color:var(--ic-date-input-text-filled);caret-color:var(--ic-date-input-typing-cursor)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none}input:-webkit-autofill{box-shadow:0 0 0 var(--ic-space-sm) var(--ic-color-background-primary) inset;-webkit-text-fill-color:var(--ic-date-input-text-filled) !important}input::-moz-placeholder{color:var(--ic-date-input-text-placeholder)}input::placeholder{color:var(--ic-date-input-text-placeholder)}ic-input-component-container{cursor:text}ic-input-component-container .focus-indicator{padding:var(--ic-space-xxxs) var(--ic-space-xs);align-items:center}.date-inputs{color:var(--ic-date-input-text-placeholder)}.day-input{width:1.438rem}.month-input{width:1.813rem}.year-input,.year-input.fit-to-value{width:2.313rem}.fit-to-value{width:1.25rem}.sr-only{position:absolute;left:-9999px}.input-container{width:100%;display:flex;justify-content:space-between;align-items:center;position:relative}.action-buttons{display:flex;align-items:center}.show-calendar-button-wrapper{display:flex;justify-content:center;align-items:center}.clear-button,.calendar-button{border-radius:var(--ic-border-radius);transition:box-shadow var(--ic-easing-transition),\n    border-radius var(--ic-easing-transition);margin:0}.clear-button.hidden{display:none}.clear-button:focus,.calendar-button:focus,.clear-button:active,.calendar-button:active{background-color:var(--ic-color-focus-inner) !important;box-shadow:inset 0 0 0 0.125rem var(--ic-color-focus-outer) !important;border-radius:0.25rem}.calendar-button:focus,.calendar-button:active{--ic-button-tertiary-text-active:var(--ic-atoms-input-clear-button-focus);--ic-button-tertiary-text-hover-active:var(\n    --ic-atoms-input-clear-button-focus\n  );--ic-button-tertiary-text-pressed-active:var(\n    --ic-atoms-input-clear-button-focus\n  )}.clear-button:focus,.calendar-button:focus,.clear-button:active *,.calendar-button:active *{fill:var(--ic-atoms-input-clear-button-focus)}.clear-button svg{color:var(--ic-date-input-clear-icon)}.clear-button:focus svg{color:var(--ic-atoms-input-clear-button-focus)}.divider{margin:0 var(--ic-space-xxs);width:var(--ic-space-1px);background-color:var(--ic-atoms-input-divider);border-radius:var(--ic-space-1px)}.divider.small{height:var(--ic-space-md)}.divider.medium{height:calc(var(--ic-space-sm) + var(--ic-space-xs))}.divider.large{height:var(--ic-space-lg)}ic-input-validation{--ic-input-validation-status-text-color:var(--ic-date-input-status-text);--ic-input-validation-error:var(--ic-date-input-icon-error);--ic-input-validation-warning-icon-color:var(--ic-date-input-icon-warning);--ic-input-validation-success-icon-color:var(--ic-date-input-icon-success)}@media (forced-colors: active){.clear-button svg{color:currentcolor}}";
+const IcDateInputStyle0 = icDateInputCss;
+
+let inputIds = 0;
+const DateInput = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.calendarButtonClicked = index.createEvent(this, "calendarButtonClicked", 7);
+        this.icBlur = index.createEvent(this, "icBlur", 7);
+        this.icChange = index.createEvent(this, "icChange", 7);
+        this.icFocus = index.createEvent(this, "icFocus", 7);
+        this.DEFAULT_DATE_FORMAT = "DD/MM/YYYY";
+        this.ARIA_INVALID = "aria-invalid";
+        this.ARIA_LABEL = "aria-label";
+        this.ARIA_LABELLED_BY = "aria-labelledby";
+        this.EVENT_OBJECT_STRING = "[object Event]";
+        this.FIT_TO_VALUE = "fit-to-value";
+        this.initialValue = this.value;
+        this.INPUT_EVENT_OBJECT_STRING = "[object InputEvent]";
+        this.inputsInOrder = [];
+        this.isAfterMax = false;
+        this.isBeforeMin = false;
+        this.preventInputsUpdating = false;
+        this.isDisabledDate = false;
+        this.isValidDay = true;
+        this.isValidMonth = true;
+        this.isValidDate = true;
+        this.isZuluTime = false;
+        this.KEYBOARD_EVENT_OBJECT_STRING = "[object KeyboardEvent]";
+        this.MAX_DAY = 31;
+        this.MAX_MONTH = 12;
+        this.previousSelectedDate = null;
+        this.selectedDate = null;
+        this.externalSetDate = false;
+        this.clearInput = false;
+        this.calendarIsOpen = false;
+        this.calendarFocused = false;
+        this.clearButtonFocused = false;
+        this.removeLabelledBy = false;
+        this.day = "";
+        this.month = "";
+        this.year = "";
+        /**
+         * The format in which the date will be displayed.
+         */
+        this.dateFormat = this.DEFAULT_DATE_FORMAT;
+        /**
+         * If `true`, every individual input field completed will emit an icChange event.
+         */
+        this.emitDatePartChange = false;
+        /**
+         * If `true`, the disabled state will be set.
+         */
+        this.disabled = false;
+        /**
+         * The days of the week to disable.
+         */
+        this.disableDays = [];
+        /**
+         * The text to display as the validation message when `disableDays` is set and a disabled date is entered.
+         */
+        this.disableDaysMessage = "The date you have selected is on a day of the week that is not allowed. Please select another date.";
+        /**
+         * If `true`, dates in the future are not allowed. A validation message will appear if a date in the future is entered.
+         */
+        this.disableFuture = false;
+        /**
+         * The text to display as the validation message when `disableFuture` is true and a date in the future is entered.
+         */
+        this.disableFutureMessage = "Dates in the future are not allowed. Please select a date in the past.";
+        /**
+         * If `true`, dates in the past are not allowed. A validation message will appear if a date in the past is entered.
+         */
+        this.disablePast = false;
+        /**
+         * The text to display as the validation message when `disablePast` is true and a date in the past is entered.
+         */
+        this.disablePastMessage = "Dates in the past are not allowed. Please select a date in the future.";
+        /**
+         * If `true`, the helper text will be visually hidden, but still read out by screenreaders.
+         */
+        this.hideHelperText = false;
+        /**
+         * If `true`, the label will be visually hidden, but will still be read out by screen readers.
+         */
+        this.hideLabel = false;
+        /**
+         * The ID for the input.
+         */
+        this.inputId = `ic-date-input-${inputIds++}`;
+        /**
+         * The text to display as the validation message when an invalid date is entered.
+         */
+        this.invalidDateMessage = "Please enter a valid date.";
+        /**
+         * 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 name of the control, which is submitted with the form data.
+         */
+        this.name = this.inputId;
+        /**
+         * If `true`, the input will require a value.
+         */
+        this.required = false;
+        /**
+         * @internal If `true`, a button which displays the calendar view when clicked will be displayed.
+         */
+        this.showCalendarButton = false;
+        /**
+         * If `true`, a button which clears the date input when clicked will be displayed.
+         */
+        this.showClearButton = true;
+        /**
+         * The size of the date input to be displayed.
+         */
+        this.size = "medium";
+        /**
+         * Sets the date picker 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 date input. 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 = "";
+        /**
+         * The value of the `aria-live` attribute on the validation message.
+         */
+        this.validationAriaLive = "polite";
+        /**
+         * The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in date validation.
+         */
+        this.validationStatus = "";
+        /**
+         * The text to display as the validation message. This will override the built-in date validation.
+         */
+        this.validationText = "";
+        this.setInputPasteValue = (input, pastedValue) => {
+            if (input) {
+                const inputEl = input;
+                inputEl.value = pastedValue;
+                inputEl.classList.add(this.FIT_TO_VALUE);
+            }
+        };
+        this.checkSingleCopiedValueIsValid = (input, pastedValue) => {
+            let isValid = false;
+            const value = Number(pastedValue);
+            switch (input) {
+                case this.dayInputEl:
+                    isValid = value >= 1 && value <= this.MAX_DAY;
+                    break;
+                case this.monthInputEl:
+                    isValid = value >= 1 && value <= this.MAX_MONTH;
+                    break;
+                case this.yearInputEl:
+                    isValid = true;
+                    break;
+            }
+            return isValid;
+        };
+        /**
+         * Using Object.prototype.string to determine type if event from user
+         * @param event - event object used to differentiate keyboard, generic or input event
+         * @returns boolean
+         */
+        this.isKeyboardOrEvent = (event) => {
+            return (Object.prototype.toString.call(event) === this.EVENT_OBJECT_STRING ||
+                Object.prototype.toString.call(event) ===
+                    this.KEYBOARD_EVENT_OBJECT_STRING);
+        };
+        this.setDateValidity = () => {
+            if (!helpers.isEmptyString(this.day)) {
+                this.isValidDay = +this.day > this.MAX_DAY ? false : true;
+            }
+            else {
+                this.isValidDay = true;
+            }
+            if (!helpers.isEmptyString(this.month)) {
+                this.isValidMonth = +this.month > this.MAX_MONTH ? false : true;
+            }
+            else {
+                this.isValidMonth = true;
+            }
+        };
+        this.handleInput = (event) => {
+            const inputEvent = event;
+            const input = event.target;
+            if (input !== this.yearInputEl) {
+                // Only auto-format if input event is not a character being deleted
+                // and not as user is changing value using up / down keys
+                if (inputEvent.inputType !== "deleteContentBackward" &&
+                    !this.preventAutoFormatting) {
+                    if (input.value.length === 1 &&
+                        ((input === this.dayInputEl && +input.value >= 4) ||
+                            (input === this.monthInputEl && +input.value >= 2)) &&
+                        +input.value <= 9) {
+                        this.setInputValue(input);
+                        this.notifyScreenReader(input, event);
+                        this.moveToNextInput(input);
+                    }
+                    if (input.value.length === 2) {
+                        if (+input.value === 0) {
+                            input.value = "01";
+                        }
+                        this.setInputValue(input);
+                        this.setPreventInput(input, true);
+                        this.notifyScreenReader(input, event);
+                        this.moveToNextInput(input);
+                    }
+                    else {
+                        this.setPreventInput(input, false);
+                    }
+                }
+                else if (this.preventAutoFormatting) {
+                    /**
+                     * Using arrow keys prevents auto formatting so need to deal with
+                     * switching from arrow keys to inputting numbers
+                     **/
+                    if (input.value.length === 2 && !this.isKeyboardOrEvent(event)) {
+                        this.setInputValue(input);
+                        this.setPreventInput(input, true);
+                        this.moveToNextInput(input);
+                    }
+                    else {
+                        this.setInputValue(input);
+                    }
+                }
+                if (input.value.length !== 2) {
+                    this.setPreventInput(input, false);
+                }
+            }
+            else {
+                if (input.value.length === 4) {
+                    this.setInputValue(input);
+                    if (Object.prototype.toString.call(event) !== this.EVENT_OBJECT_STRING) {
+                        this.moveToNextInput(input);
+                    }
+                    this.setPreventInput(input, true);
+                }
+                else {
+                    this.setPreventInput(input, false);
+                }
+            }
+            // Add / remove class to make input width match size of value i.e. 2 digits' width for day / month, 4 for year
+            this.setFitToValueStyling(input);
+            if (input.value.length === 0) {
+                this.setInputValue(input, true);
+                this.setValidationMessage();
+            }
+            this.notifyScreenReader(input, event);
+        };
+        this.handleKeyDown = (event, isInputPrevented) => {
+            var _a;
+            const input = event.target;
+            const eventKey = (_a = event.key) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+            // Regex required due to FF allowing all characters as values for number text field.
+            const regex = /-?\d*\.?\d+(e[-+]?\d+)?|[/-]|arrowup|arrowdown|arrowleft|arrowright|shift|tab|backspace|delete/;
+            if (!regex.test(eventKey) &&
+                !((event.ctrlKey || event.metaKey) &&
+                    (eventKey === "v" || eventKey === "c"))) {
+                event.preventDefault();
+            }
+            switch (eventKey) {
+                case "/":
+                case "-":
+                case ".":
+                    event.preventDefault();
+                    this.setPasteInvalidText();
+                    this.moveToNextInput(input);
+                    break;
+                case "arrowright":
+                case "arrowleft":
+                    event.preventDefault();
+                    this.handleLeftRightArrowKeyPress(input, eventKey);
+                    break;
+                case "arrowup":
+                case "arrowdown":
+                    this.preventAutoFormatting = true;
+                    this.handleUpDownArrowKeyPress(input, event);
+                    break;
+                case "backspace":
+                    if (input.value.length === 0) {
+                        event.preventDefault();
+                        this.moveToPreviousInput(input);
+                    }
+                    break;
+            }
+            this.preventInput(event, isInputPrevented);
+            this.preventInputsUpdating = true;
+        };
+        this.handleFocus = (event) => {
+            // Highlight / select all characters in input for easy replacement
+            const input = event.target;
+            input.select();
+        };
+        this.handleBlur = (event) => {
+            const input = event.target;
+            if (input) {
+                this.setPasteInvalidText();
+                this.autocompleteInput(input);
+            }
+        };
+        this.handleLeftRightArrowKeyPress = (input, key) => {
+            if (key === "arrowright") {
+                this.moveToNextInput(input);
+            }
+            else {
+                this.moveToPreviousInput(input);
+            }
+            this.setPasteInvalidText();
+        };
+        this.notifyScreenReaderSelectedDate = () => {
+            if (this.selectedDate && this.selectedDateInfoEl) {
+                const dayNames = helpers.stringEnumToArray(helpers.IcDayNames);
+                const months = helpers.stringEnumToArray(helpers.IcDateInputMonths);
+                this.selectedDateInfoEl.textContent = `Selected date: ${dayNames[this.selectedDate.getDay()]}, ${this.selectedDate.getDate()} ${months[this.selectedDate.getMonth()]} ${this.selectedDate.getFullYear()}`;
+            }
+        };
+        this.handleUpDownArrowKeyPress = (input, event) => {
+            const minValue = input === this.yearInputEl ? 0 : 1;
+            let maxValue = 9999;
+            switch (input) {
+                case this.dayInputEl:
+                    maxValue = this.MAX_DAY;
+                    break;
+                case this.monthInputEl:
+                    maxValue = this.MAX_MONTH;
+                    break;
+                case this.yearInputEl:
+                    maxValue = 9999;
+            }
+            // Make value loop round when min / max reached
+            if (input === null || input === void 0 ? void 0 : input.value) {
+                if (event.key === "ArrowUp") {
+                    if (+input.value === maxValue) {
+                        event.preventDefault();
+                        input.value = `0${minValue}`;
+                    }
+                    else {
+                        input.value =
+                            +input.value + 1 < 10
+                                ? `0${+input.value + 1}`
+                                : (+input.value + 1).toString();
+                    }
+                    this.notifyScreenReader(input, event);
+                }
+                if (event.key === "ArrowDown") {
+                    if (+input.value === minValue) {
+                        event.preventDefault();
+                        input.value = maxValue.toString();
+                    }
+                    else {
+                        input.value =
+                            +input.value - 1 < 10
+                                ? `0${+input.value - 1}`
+                                : (+input.value - 1).toString();
+                    }
+                    this.notifyScreenReader(input, event);
+                }
+            }
+            else {
+                if (event.key === "ArrowDown") {
+                    event.preventDefault();
+                    input.value =
+                        input === this.yearInputEl
+                            ? new Date().getFullYear().toString()
+                            : maxValue.toString();
+                    this.notifyScreenReader(input, event);
+                }
+                else if (event.key === "ArrowUp") {
+                    event.preventDefault();
+                    input.value =
+                        input === this.yearInputEl
+                            ? new Date().getFullYear().toString()
+                            : `0${minValue}`;
+                    this.notifyScreenReader(input, event);
+                }
+            }
+            this.setInputValue(input);
+            this.setFitToValueStyling(input);
+        };
+        this.handleDateChange = (force) => {
+            // Prevent icChange being emitted when each individual input is changed
+            // This method is used within componentWillUpdate instead of using @Watch('value');
+            if (force || !dateHelpers.dateMatches(this.selectedDate, this.previousSelectedDate)) {
+                if (this.value) {
+                    this.inputsInOrder.forEach((input) => {
+                        input.classList.add(this.FIT_TO_VALUE);
+                    });
+                }
+                if (this.day && this.month && this.year && this.invalidDateText === "") {
+                    this.setValueAndEmitChange(this.selectedDate);
+                    this.notifyScreenReaderSelectedDate();
+                }
+                else if (!(this.selectedDate === null && this.previousSelectedDate === null) &&
+                    this.selectedDateInfoEl) {
+                    this.setValueAndEmitChange(null);
+                    this.selectedDateInfoEl.textContent = "";
+                }
+                this.previousSelectedDate = this.selectedDate;
+                if (!this.preventInputsUpdating) {
+                    this.updateInputValues(this.day, this.month, this.year);
+                }
+            }
+        };
+        this.slicePastedDate = (valueLength, datePart) => {
+            return datePart.length > valueLength
+                ? datePart.slice(0, valueLength)
+                : datePart;
+        };
+        this.isPastedStringDateValid = (value) => {
+            if (/\d+-\d+-\d+$/.test(value) ||
+                /\d+\/\d+\/\d+/.test(value) ||
+                /\d+\.\d+\.\d+/.test(value)) {
+                return true;
+            }
+            if (/[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}(?::[0-9]{2}(?:\.\d+)?)?Z/.test(value)) {
+                this.isZuluTime = true;
+                return true;
+            }
+            return false;
+        };
+        // Set value of each input to value of pasted date part
+        // Allows formats separated by '-' or '/'
+        this.handlePaste = (event) => {
+            var _a;
+            event.preventDefault();
+            const pastedValue = ((_a = event.clipboardData) === null || _a === void 0 ? void 0 : _a.getData("Text")) || "";
+            const isValidDate = this.isPastedStringDateValid(pastedValue);
+            this.setPastedValueAndValidation(isValidDate, pastedValue, event);
+        };
+        this.setDate = (date) => {
+            if (date === null || date === "" || date === undefined) {
+                if (this.day)
+                    this.day = "";
+                if (this.month)
+                    this.month = "";
+                if (this.year)
+                    this.year = "";
+                this.inputsInOrder.forEach((input) => {
+                    input.classList.remove(this.FIT_TO_VALUE);
+                    this.setPreventInput(input, false);
+                });
+                this.handleDateChange(true);
+            }
+            else {
+                if (dateHelpers.isDateOrEpoch(date)) {
+                    let newDate;
+                    if (typeof date === "string") {
+                        // Checking if epoch date time
+                        newDate = new Date(+date);
+                    }
+                    else {
+                        newDate = date;
+                    }
+                    this.day = dateHelpers.convertToDoubleDigits(newDate.getDate());
+                    this.month = dateHelpers.convertToDoubleDigits(newDate.getMonth() + 1);
+                    this.year = newDate.getFullYear().toString();
+                }
+                else if (typeof date === "string") {
+                    const defaultDateArray = dateHelpers.splitStringDate(date, this.dateFormat);
+                    this.selectedDate = new Date(Number(defaultDateArray[0]), Number(defaultDateArray[1]) - 1, Number(defaultDateArray[2]));
+                    this.year = defaultDateArray[0];
+                    this.month = defaultDateArray[1];
+                    this.day = defaultDateArray[2];
+                    this.setValueAndEmitChange(this.selectedDate);
+                }
+            }
+            this.setValidationMessage();
+        };
+        this.formatMinMax = (date) => {
+            let formattedDate;
+            const day = dateHelpers.convertToDoubleDigits(date.getDate());
+            const month = dateHelpers.convertToDoubleDigits(date.getMonth() + 1);
+            const year = date.getFullYear();
+            switch (this.dateFormat) {
+                case this.DEFAULT_DATE_FORMAT:
+                    formattedDate = `${day}/${month}/${year}`;
+                    break;
+                case "MM/DD/YYYY":
+                    formattedDate = `${month}/${day}/${year}`;
+                    break;
+                case "YYYY/MM/DD":
+                    formattedDate = `${year}/${month}/${day}`;
+                    break;
+            }
+            return formattedDate;
+        };
+        this.updateInputValues = (day, month, year) => {
+            if (this.dayInputEl && this.monthInputEl && this.yearInputEl) {
+                this.dayInputEl.value = day;
+                this.monthInputEl.value = month;
+                this.yearInputEl.value = year;
+            }
+        };
+        // Set value in state based on input
+        this.setInputValue = (input, clear = false) => {
+            const newValue = clear ? "" : input.value;
+            switch (input) {
+                case this.dayInputEl:
+                    this.day = newValue;
+                    break;
+                case this.monthInputEl:
+                    this.month = newValue;
+                    break;
+                case this.yearInputEl:
+                    if (this.year !== newValue) {
+                        this.year = newValue;
+                    }
+            }
+            this.setValidationMessage();
+        };
+        this.setValidationMessage = () => {
+            this.setDateValidity();
+            if (!helpers.isEmptyString(this.day) &&
+                !helpers.isEmptyString(this.month) &&
+                !helpers.isEmptyString(this.year)) {
+                // Check whether date actually exists
+                // (used https://www.hectane.com/blog/javascript-date-validation-with-leap-year)
+                this.selectedDate = this.convertToDate(this.year, this.month, this.day);
+                this.isValidDate =
+                    !!this.selectedDate && this.selectedDate.getDate() == +this.day;
+                this.isDisabledDate = this.isSelectedDateDisabled();
+                if (!this.isValidDate || this.isDisabledDate) {
+                    this.inputsInOrder.forEach((input) => input.setAttribute(this.ARIA_INVALID, "true"));
+                }
+                else {
+                    this.inputsInOrder.forEach((input) => input.removeAttribute(this.ARIA_INVALID));
+                }
+            }
+            else {
+                this.selectedDate = null;
+            }
+            if (!(this.isValidDay && this.isValidMonth && this.isValidDate)) {
+                this.invalidDateText = this.invalidDateMessage;
+            }
+            else if (this.isDisabledDate && this.selectedDate !== null) {
+                if (this.isBeforeMin) {
+                    if (this.disablePast) {
+                        this.invalidDateText = this.disablePastMessage;
+                    }
+                    else {
+                        this.invalidDateText = `Please enter a date after ${this.formatMinMax(this.minDate)}.`;
+                    }
+                }
+                else if (this.isAfterMax) {
+                    if (this.disableFuture) {
+                        this.invalidDateText = this.disableFutureMessage;
+                    }
+                    else {
+                        this.invalidDateText = `Please enter a date before ${this.formatMinMax(this.maxDate)}.`;
+                    }
+                }
+                else if (this.disableDays.length !== 0) {
+                    this.invalidDateText = this.disableDaysMessage;
+                }
+                else {
+                    if (this.disablePast) {
+                        this.invalidDateText = this.disablePastMessage;
+                    }
+                    if (this.disableFuture) {
+                        this.invalidDateText = this.disableFutureMessage;
+                    }
+                }
+            }
+            else {
+                this.invalidDateText = "";
+            }
+        };
+        // Set refs to the input elements in the order they are displayed (based on the dateFormat)
+        this.setInputsInOrder = () => {
+            var _a;
+            (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll("input").forEach((input) => this.inputsInOrder.push(input));
+        };
+        // Includes text usually added using aria-describedby
+        // (which doesn't work on input component container)
+        this.setAriaLabelledBy = () => {
+            var _a, _b, _c;
+            if (this.disabled &&
+                !helpers.isEmptyString((_a = this.inputCompContainerEl) === null || _a === void 0 ? void 0 : _a.getAttribute(this.ARIA_LABELLED_BY))) {
+                this.removeAriaLabelledBy();
+                return;
+            }
+            if (this.disabled) {
+                return;
+            }
+            const labelEl = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector("label");
+            const labelId = `${this.inputId}-label`;
+            if (labelEl !== null && labelEl !== undefined) {
+                labelEl.id = labelId;
+            }
+            const hasValidation = !helpers.isEmptyString(this.validationStatus) ||
+                !helpers.isEmptyString(this.invalidDateText);
+            const labelledBy = `${(_c = labelEl === null || labelEl === void 0 ? void 0 : labelEl.id) !== null && _c !== void 0 ? _c : ""} ${this.screenReaderInfoId} ${helpers.getInputDescribedByText(this.el, this.inputId, this.helperText !== "" && this.helperText !== this.defaultHelperText, hasValidation)} ${this.selectedDate ? this.selectedDateInfoId : ""} ${this.assistiveHintId}`;
+            this.inputCompContainerEl.setAttribute(this.ARIA_LABELLED_BY, labelledBy);
+        };
+        // Sets boolean for each input, used to limit the number of characters within each field (2 for day / month, 4 for year)
+        this.setPreventInput = (input, isPrevented) => {
+            switch (input) {
+                case this.dayInputEl:
+                    this.preventDayInput = isPrevented;
+                    break;
+                case this.monthInputEl:
+                    this.preventMonthInput = isPrevented;
+                    break;
+                case this.yearInputEl:
+                    this.preventYearInput = isPrevented;
+            }
+        };
+        // Get input based on letter representing each date part ("D", "M" or "Y")
+        // (retrieved from dateFormat)
+        this.getInputFromDatePart = (datePart) => {
+            const dayInput = (index.h("input", { class: "day-input", id: "day-input", ref: (el) => (this.dayInputEl = el), "aria-label": "day", placeholder: "DD", disabled: this.disabled, "aria-required": `${this.required}`, onPaste: this.handlePaste, inputmode: "number", pattern: "[0-9]*", onKeyDown: (event) => this.handleKeyDown(event, this.preventDayInput) }));
+            const monthInput = (index.h("input", { id: "month-input", class: "month-input", ref: (el) => (this.monthInputEl = el), "aria-label": "month", placeholder: "MM", disabled: this.disabled, "aria-required": `${this.required}`, onPaste: this.handlePaste, inputmode: "number", pattern: "[0-9]*", onKeyDown: (event) => this.handleKeyDown(event, this.preventMonthInput) }));
+            const yearInput = (index.h("input", { id: "year-input", class: "year-input", ref: (el) => (this.yearInputEl = el), "aria-label": "year", placeholder: "YYYY", maxLength: 4, disabled: this.disabled, "aria-required": `${this.required}`, onPaste: this.handlePaste, inputmode: "number", pattern: "[0-9]*", onKeyDown: (event) => this.handleKeyDown(event, this.preventYearInput) }));
+            let input;
+            switch (datePart) {
+                case "D":
+                    input = dayInput;
+                    break;
+                case "M":
+                    input = monthInput;
+                    break;
+                case "Y":
+                    input = yearInput;
+            }
+            return input;
+        };
+        // Get input elements in order of chosen date format
+        this.getInputsInOrder = () => {
+            const dateParts = this.dateFormat.split("/");
+            const inputsInOrder = [];
+            dateParts.forEach((part) => {
+                inputsInOrder.push(this.getInputFromDatePart(part.substring(0, 1)));
+            });
+            return inputsInOrder;
+        };
+        // To add to the end of assistive hint to make it clearer that each date part has its own input
+        // that can be changed individually
+        this.getDescOfInputsOrder = () => {
+            let description;
+            switch (this.dateFormat) {
+                case this.DEFAULT_DATE_FORMAT:
+                    description = "day, month, and year";
+                    break;
+                case "MM/DD/YYYY":
+                    description = "month, day, and year";
+                    break;
+                case "YYYY/MM/DD":
+                    description = "year, month, and day";
+            }
+            return description;
+        };
+        // Add 'required' or 'invalid data' to span used in aria-labelledby
+        // Many ARIA attributes aren't read out by screen reader when on the input component container
+        this.getScreenReaderInfo = (validationStatus) => {
+            let inputDescriptors = "";
+            if (this.required) {
+                inputDescriptors += "required";
+            }
+            if (validationStatus === helpers.IcInformationStatus.Error) {
+                inputDescriptors += " invalid data";
+            }
+            return inputDescriptors === "" ? "" : inputDescriptors + ", ";
+        };
+        // Prevent non-number characters being entered
+        // ('e' or '.' - which are usually allowed in <input type="number">)
+        // And limit the number of characters within each field (2 for day / month, 4 for year)
+        // (because 'maxlength' doesn't work on <input type="number">)
+        this.preventInput = (event, isInputPrevented) => {
+            const key = event.key;
+            const input = event.target;
+            let selectedString;
+            if (input) {
+                selectedString = input.value.substring(input.selectionStart || 0, input.selectionEnd || undefined);
+            }
+            if (key === "e" ||
+                key === "." ||
+                key === "-" ||
+                (event.key >= "0" &&
+                    event.key <= "9" &&
+                    isInputPrevented &&
+                    !selectedString)) {
+                event.preventDefault();
+            }
+        };
+        /**
+         * Get whether date has been disabled using disableFuture or disablePast prop, but always allow current day
+         * Consider using dateClamp and inDateRange
+         * @returns `boolean`
+         */
+        this.isSelectedDateDisabled = () => {
+            if (!this.selectedDate)
+                return false;
+            const currentDate = new Date();
+            const isNotToday = this.selectedDate.toDateString() !== currentDate.toDateString();
+            this.isAfterMax =
+                this.maxDate && this.selectedDate > this.maxDate && isNotToday;
+            this.isBeforeMin =
+                this.minDate && this.selectedDate < this.minDate && isNotToday;
+            return (this.isAfterMax ||
+                this.isBeforeMin ||
+                this.disableDays.includes(this.selectedDate.getDay()) ||
+                (((!!this.disablePast && this.selectedDate < currentDate) ||
+                    (!!this.disableFuture && this.selectedDate > currentDate)) &&
+                    isNotToday));
+        };
+        this.moveToNextInput = (currentInput) => {
+            var _a;
+            this.preventAutoFormatting = false;
+            (_a = this.inputsInOrder[this.inputsInOrder.findIndex((input) => input === currentInput) + 1]) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+        this.moveToPreviousInput = (currentInput) => {
+            var _a;
+            this.preventAutoFormatting = false;
+            (_a = this.inputsInOrder[this.inputsInOrder.findIndex((input) => input === currentInput) - 1]) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+        this.autocompleteInput = (input) => {
+            const inputValue = input.value;
+            if (this.yearInputEl && input === this.yearInputEl) {
+                // Autocomplete year as current millennium when fewer than 4 characters entered
+                const yearNumbers = ["2", "0", "0"];
+                let autocompletedInput = "";
+                if (inputValue) {
+                    yearNumbers.forEach((number, index) => {
+                        if (inputValue.length + index <= 3) {
+                            autocompletedInput += number;
+                        }
+                    });
+                    this.yearInputEl.value = `${autocompletedInput}${inputValue}`;
+                }
+            }
+            else if (inputValue.length === 1) {
+                // Autocomplete input as 2 characters (leading zero) when only 1 character entered (for day and month)
+                input.value = +inputValue === 0 ? "01" : `0${inputValue}`;
+            }
+            if (input.value) {
+                this.setInputValue(input);
+            }
+        };
+        this.convertToDate = (year, month, day) => {
+            if (!helpers.isEmptyString(year) && !helpers.isEmptyString(month) && !helpers.isEmptyString(day)) {
+                return new Date(+year, +month - 1, +day);
+            }
+            else {
+                return null;
+            }
+        };
+        this.handleHostBlur = () => {
+            this.removeLabelledBy = false;
+            this.icBlur.emit({ value: this.selectedDate });
+        };
+        this.handleHostFocus = () => {
+            var _a, _b;
+            if ((_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) === null || _b === void 0 ? void 0 : _b.id.match(/(day|month|year)-input$/)) {
+                this.removeLabelledBy = false;
+            }
+            else {
+                this.removeLabelledBy = true;
+            }
+            this.icFocus.emit({ value: this.selectedDate });
+        };
+        this.handleFormReset = () => {
+            // Get the initial value and populate day, month and year again.
+            this.setDate(this.initialValue);
+            this.setValidationMessage();
+            this.handleDateChange(false);
+        };
+        this.getAriaLabel = (input) => input.getAttribute(this.ARIA_LABEL);
+        this.notifyScreenReaderArrowKeys = (input) => {
+            var _a;
+            const liveRegion = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("#live-region");
+            const ariaLabel = this.getAriaLabel(input);
+            if (liveRegion && input.value && ariaLabel) {
+                let announcement = "";
+                if (input === this.monthInputEl &&
+                    !!helpers.IcDateInputMonths[+input.value - 1]) {
+                    announcement = `${input.value} - ${helpers.IcDateInputMonths[+input.value - 1]}, ${ariaLabel}`;
+                }
+                if (input === this.dayInputEl || input === this.yearInputEl) {
+                    announcement = `${input.value}, ${ariaLabel}`;
+                }
+                liveRegion.textContent = announcement;
+            }
+        };
+        this.notifyScreenReaderInput = (input, liveRegion) => {
+            const ariaLabel = this.getAriaLabel(input);
+            const value = input.value;
+            if (ariaLabel && value) {
+                let announcement = "";
+                const monthValue = helpers.IcDateInputMonths[+value - 1];
+                if (input === this.monthInputEl &&
+                    !!monthValue &&
+                    this.isValidMonth &&
+                    value.length === 2) {
+                    announcement = `${value} - ${monthValue}`;
+                }
+                else if ((input === this.dayInputEl && this.isValidDay && value.length === 2) ||
+                    (input === this.yearInputEl && value.length === 4)) {
+                    announcement = value;
+                }
+                liveRegion.textContent = `${announcement}, ${ariaLabel}`;
+            }
+        };
+        this.setFitToValueStyling = (input) => {
+            if (input.value) {
+                input.classList.add(this.FIT_TO_VALUE);
+            }
+            else {
+                input.classList.remove(this.FIT_TO_VALUE);
+            }
+        };
+        this.setAriaInvalid = (validDay, validMonth, validDate, disabledDate) => {
+            var _a, _b;
+            if (this.inputsInOrder.length) {
+                this.inputsInOrder.forEach((input) => {
+                    input.removeAttribute(this.ARIA_INVALID);
+                });
+                if (!validDay) {
+                    (_a = this.dayInputEl) === null || _a === void 0 ? void 0 : _a.setAttribute(this.ARIA_INVALID, "true");
+                }
+                if (!validMonth) {
+                    (_b = this.monthInputEl) === null || _b === void 0 ? void 0 : _b.setAttribute(this.ARIA_INVALID, "true");
+                }
+                if (!validDate || disabledDate) {
+                    this.inputsInOrder.forEach((input) => {
+                        input.setAttribute(this.ARIA_INVALID, "true");
+                    });
+                }
+            }
+        };
+        this.handleClear = () => {
+            this.clearInput = true;
+            this.inputsInOrder.forEach((input) => {
+                input.classList.remove(this.FIT_TO_VALUE);
+                this.setInputValue(input, true);
+                this.setPreventInput(input, false);
+            });
+            this.clearInput = false;
+            this.preventInputsUpdating = false;
+            this.setValidationMessage();
+            this.handleDateChange(true);
+            this.inputsInOrder[0].focus();
+        };
+        this.handleCalendarOpen = (ev) => {
+            var _a, _b, _c, _d, _e, _f;
+            ev.stopImmediatePropagation();
+            (_c = (_b = (_a = this.calendarButtonEl) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector("ic-tooltip")) === null || _c === void 0 ? void 0 : _c.displayTooltip(false);
+            this.calendarButtonClicked.emit({ value: this.selectedDate });
+            (_f = (_e = (_d = this.calendarButtonEl) === null || _d === void 0 ? void 0 : _d.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector("ic-tooltip")) === null || _f === void 0 ? void 0 : _f.displayTooltip(false);
+            this.preventInputsUpdating = false;
+            this.calendarIsOpen = true;
+        };
+        this.setValueAndEmitChange = (value) => {
+            if (!dateHelpers.dateMatches(this.value ? new Date(this.value) : null, value)) {
+                this.emitIcChange(value);
+                this.value = value;
+            }
+        };
+        this.handleCalendarFocus = () => {
+            this.calendarFocused = true;
+            if (this.calendarIsOpen) {
+                // focus event triggered by closing calendar dialog so inputs should update
+                this.preventInputsUpdating = false;
+                this.calendarIsOpen = false;
+            }
+            else {
+                this.preventInputsUpdating = true;
+            }
+        };
+        this.handleCalendarBlur = () => {
+            this.calendarFocused = false;
+            this.preventInputsUpdating = true;
+        };
+        this.handleClearFocus = () => {
+            this.removeLabelledBy = true;
+            this.preventInputsUpdating = true;
+            this.clearButtonFocused = true;
+        };
+        this.handleClearBlur = (ev) => {
+            var _a;
+            this.clearButtonFocused = false;
+            this.preventInputsUpdating = true;
+            if ((_a = ev.relatedTarget) === null || _a === void 0 ? void 0 : _a.id.match(/(day|year)-input$/)) {
+                this.removeLabelledBy = false;
+                return;
+            }
+            this.removeLabelledBy = true;
+        };
+        this.emitIcChange = (d) => {
+            this.selectedDate = d;
+            if (!dateHelpers.dateMatches(this.selectedDate, d) ||
+                this.day !== null ||
+                this.month !== null ||
+                this.year !== null) {
+                let UTCDate = null;
+                if (d !== null) {
+                    UTCDate = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
+                }
+                this.icChange.emit({
+                    value: d,
+                    dateObject: {
+                        day: this.day === "" ? null : this.day,
+                        month: this.month === "" ? null : this.month,
+                        year: this.year === "" ? null : this.year,
+                    },
+                    utcValue: UTCDate,
+                });
+            }
+        };
+    }
+    watchInputHandler() {
+        if (this.emitDatePartChange &&
+            !this.externalSetDate &&
+            !this.clearInput &&
+            !(this.day && this.month && this.year) &&
+            this.selectedDate === null) {
+            this.emitIcChange(this.selectedDate);
+        }
+    }
+    watchDisabledHandler() {
+        helpers.removeDisabledFalse(this.disabled, this.el);
+    }
+    watchDisableFutureHandler() {
+        this.watchMaxHandler();
+    }
+    watchDisablePastHandler() {
+        this.watchMinHandler();
+    }
+    watchMaxHandler() {
+        if (this.disableFuture) {
+            this.maxDate = new Date();
+        }
+        else {
+            this.maxDate = dateHelpers.createDate(this.max, this.dateFormat);
+        }
+    }
+    watchMinHandler() {
+        if (this.disablePast) {
+            this.minDate = new Date();
+        }
+        else {
+            this.minDate = dateHelpers.createDate(this.min, this.dateFormat);
+        }
+    }
+    watchRequiredHandler() {
+        var _a, _b;
+        // Prevent asterisk being read out after the label by screen reader (by applying aria-hidden)
+        // Needed because label is included in 'aria-labelledby' instead of using 'aria-label'
+        const labelEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("label");
+        if (this.required) {
+            const asteriskSpan = document.createElement("span");
+            asteriskSpan.setAttribute("id", "asterisk-span");
+            asteriskSpan.setAttribute("aria-hidden", "true");
+            asteriskSpan.textContent = " *";
+            labelEl === null || labelEl === void 0 ? void 0 : labelEl.appendChild(asteriskSpan);
+        }
+        else {
+            const asteriskSpan = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector("#asterisk-span");
+            if (asteriskSpan) {
+                asteriskSpan.remove();
+            }
+        }
+    }
+    disconnectedCallback() {
+        helpers.removeFormResetListener(this.el, this.handleFormReset);
+    }
+    componentWillLoad() {
+        this.defaultHelperText = `Use format ${this.dateFormat}`;
+        if (helpers.isEmptyString(this.helperText))
+            this.helperText = this.defaultHelperText;
+        this.watchMinHandler();
+        this.watchMaxHandler();
+        if (this.value) {
+            this.externalSetDate = true;
+            this.setDate(this.value);
+        }
+        this.screenReaderInfoId = `${this.inputId}-screen-reader-info`;
+        this.assistiveHintId = `${this.inputId}-assistive-hint`;
+        this.selectedDateInfoId = `${this.inputId}-selected-date-info`;
+        helpers.addFormResetListener(this.el, this.handleFormReset);
+        helpers.removeDisabledFalse(this.disabled, this.el);
+    }
+    componentDidLoad() {
+        this.setInputsInOrder();
+        helpers.onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Date Input");
+        if (this.value) {
+            this.updateInputValues(this.day, this.month, this.year);
+            this.inputsInOrder.forEach((input) => {
+                input.classList.add(this.FIT_TO_VALUE);
+            });
+        }
+        this.setAriaInvalid(this.isValidDay, this.isValidMonth, this.isValidDate, this.isDisabledDate);
+        if (this.value) {
+            this.notifyScreenReaderSelectedDate();
+        }
+        this.inputsInOrder.forEach((input) => {
+            input.addEventListener("input", this.handleInput);
+            input.addEventListener("focus", this.handleFocus);
+            input.addEventListener("blur", this.handleBlur);
+        });
+        this.watchRequiredHandler();
+    }
+    componentWillUpdate() {
+        if (helpers.isEmptyString(this.helperText))
+            this.helperText = this.defaultHelperText;
+        if (!this.preventInputsUpdating)
+            this.setDate(this.value);
+        this.setAriaInvalid(this.isValidDay, this.isValidMonth, this.isValidDate, this.isDisabledDate);
+        this.handleDateChange(false);
+        this.preventInputsUpdating = false;
+    }
+    componentDidRender() {
+        if (this.removeLabelledBy) {
+            this.removeAriaLabelledBy();
+            return;
+        }
+        this.setAriaLabelledBy();
+    }
+    /**
+     * Returns the value as a Date object
+     * @returns Date
+     */
+    async getDate() {
+        return this.selectedDate;
+    }
+    /**
+     * @internal Sets focus on the calendar button.
+     */
+    async setCalendarFocus() {
+        if (this.calendarButtonEl) {
+            this.calendarButtonEl.focus();
+        }
+    }
+    /**
+     * @internal Used to pass disabledDays from parent component.
+     */
+    async setDisableDays(days) {
+        this.disableDays = days;
+    }
+    /**
+     * @internal Used to enable other components to invoke an IcChange event from the input.
+     */
+    async triggerIcChange(d) {
+        this.externalSetDate = true;
+        this.setDate(d);
+        this.emitIcChange(d);
+        this.externalSetDate = false;
+    }
+    removeAriaLabelledBy() {
+        this.inputCompContainerEl.removeAttribute(this.ARIA_LABELLED_BY);
+    }
+    setPastedValueAndValidation(isValidDate, pastedValue, event) {
+        switch (true) {
+            case isValidDate: {
+                const nextParsedValue = this.isZuluTime
+                    ? dateHelpers.extractDateFromZuluDateTime(pastedValue)
+                    : pastedValue;
+                const dateParts = nextParsedValue.split(/-|\/|\./);
+                this.inputsInOrder.forEach((input, index) => {
+                    input.classList.add(this.FIT_TO_VALUE);
+                    if (this.isZuluTime) {
+                        this.pasteZuluDateTime(dateParts, index);
+                    }
+                    else {
+                        let dateValue;
+                        if (input === this.dayInputEl || input === this.monthInputEl) {
+                            dateValue = this.slicePastedDate(2, dateParts[index]);
+                        }
+                        else {
+                            dateValue = this.slicePastedDate(4, dateParts[index]);
+                        }
+                        input.value = dateValue;
+                        this.setInputValue(input);
+                        this.autocompleteInput(input);
+                    }
+                });
+                this.isZuluTime = false;
+                break;
+            }
+            case (pastedValue.length === 1 ||
+                pastedValue.length === 2 ||
+                pastedValue.length === 4) &&
+                helpers.isNumeric(pastedValue):
+                if (this.checkSingleCopiedValueIsValid(event.target, pastedValue)) {
+                    // Check if copied value can be pasted into input
+                    this.setInputPasteValue(event.target, pastedValue);
+                    this.setInputValue(event.target);
+                }
+                else {
+                    this.displayPastedValidation(event);
+                }
+                break;
+            case pastedValue.length === 3 && helpers.isNumeric(pastedValue):
+                if (event.target !== this.yearInputEl) {
+                    this.displayPastedValidation(event);
+                }
+                else {
+                    this.setInputPasteValue(event.target, pastedValue);
+                    this.setInputValue(event.target);
+                }
+                break;
+            case pastedValue.length >= 5 && helpers.isNumeric(pastedValue):
+                this.displayPastedValidation(event);
+        }
+    }
+    pasteZuluDateTime(dateParts, index) {
+        // ['YYYY', 'MM', 'DD']
+        if (index === 0 && this.yearInputEl) {
+            const dateValue = this.slicePastedDate(4, dateParts[index]);
+            this.yearInputEl.value = dateValue;
+            this.setInputValue(this.yearInputEl);
+        }
+        else if (index === 1 && this.monthInputEl) {
+            // The month value is the second item in the array
+            const dateValue = this.slicePastedDate(2, dateParts[index]);
+            this.monthInputEl.value = dateValue;
+            this.setInputValue(this.monthInputEl);
+        }
+        else if (this.dayInputEl) {
+            const dateValue = this.slicePastedDate(2, dateParts[index]);
+            this.dayInputEl.value = dateValue;
+            this.setInputValue(this.dayInputEl);
+        }
+    }
+    displayPastedValidation(event) {
+        var _a;
+        if (((_a = this.invalidDateText) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            this.previousInvalidDateTest = this.invalidDateText;
+        }
+        this.invalidDateText = `Please paste a valid ${this.getAriaLabel(event.target)}`;
+        this.validationStatus = helpers.IcInformationStatus.Error;
+        this.isPasteValidationDisplayed = true;
+    }
+    setPasteInvalidText() {
+        var _a;
+        if (this.isPasteValidationDisplayed) {
+            this.invalidDateText = (_a = this.previousInvalidDateTest) !== null && _a !== void 0 ? _a : "";
+            this.isPasteValidationDisplayed = false;
+            // This is to prevent setDate from triggering within componentWillUpdate
+            this.preventInputsUpdating = true;
+        }
+    }
+    notifyScreenReader(input, event) {
+        var _a;
+        const liveRegion = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("#live-region");
+        if (liveRegion) {
+            if (this.isKeyboardOrEvent(event)) {
+                this.notifyScreenReaderArrowKeys(input);
+            }
+            else if (Object.prototype.toString.call(event) === this.INPUT_EVENT_OBJECT_STRING) {
+                this.notifyScreenReaderInput(input, liveRegion);
+            }
+        }
+    }
+    render() {
+        const { inputId, label, disabled, helperText, hideHelperText, hideLabel, showClearButton, showCalendarButton, size, theme, validationAriaLive, } = this;
+        const hasCustomValidation = !helpers.isEmptyString(this.validationStatus);
+        const validationStatus = hasCustomValidation
+            ? this.validationStatus
+            : !helpers.isEmptyString(this.invalidDateText)
+                ? helpers.IcInformationStatus.Error
+                : "";
+        const assistiveHint = `Type or use the up and down arrow keys to change the values for the ${this.getDescOfInputsOrder()}.`;
+        helpers.renderHiddenInput(true, this.el, this.name, this.convertToDate(this.year, this.month, this.day), this.disabled);
+        return (index.h(index.Host, { key: '0b677de27ad0835484eb7a68e6bc52cddb13b975', class: {
+                [`ic-theme-${theme}`]: theme !== "inherit",
+                [`ic-date-input-disabled`]: disabled,
+            }, onBlur: this.handleHostBlur, onFocus: this.handleHostFocus }, index.h("ic-input-container", { key: '8b440f9db75cf42c81163a8fc3fc927bddf061e7', disabled: disabled }, !(hideLabel && hideHelperText) && (index.h("ic-input-label", { key: '459c0ccececeddf034ee64775c41bea6e2c57b29', for: inputId, label: label, hideLabel: hideLabel, helperText: !hideHelperText ? helperText : "", disabled: disabled }, index.h("slot", { key: 'd051f25b9e91432752719c4c3e7511242697f93b', name: "helper-text", slot: "helper-text" }))), index.h("span", { key: 'bf2072a9a7482fa73ad3d4f178eadf3a39ea38d4', id: this.screenReaderInfoId, class: "sr-only", "aria-hidden": "true" }, this.getScreenReaderInfo(validationStatus), hideLabel && `${label}\n`, hideHelperText && `${helperText}\n`, `${this.defaultHelperText}.`), index.h("span", { key: 'ddae7fb05d3ff797eb08207dd12b3d98f0f3aa05', id: this.assistiveHintId, class: "sr-only", "aria-hidden": "true" }, assistiveHint), index.h("span", { key: 'bbd17aaf26b098379f436a6fc59fdcee52c52b64', id: "live-region", "aria-live": "assertive", class: "sr-only" }), index.h("ic-input-component-container", { key: 'c602e815b61b7c7bbd31390f47116f58b21852d4', id: inputId, ref: (el) => (this.inputCompContainerEl = el), disabled: disabled, validationStatus: validationStatus, size: size, role: "group", class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, index.h("div", { key: '131868d25ab4297d80efec74f893552817f17186', class: "input-container" }, index.h("div", { key: 'c7184bd4b046ffd309fb20ee8fc90033d33e05fc', class: "date-inputs" }, this.getInputsInOrder()[0], "/", this.getInputsInOrder()[1], "/", this.getInputsInOrder()[2]), index.h("div", { key: '09009c954f7f4d0771553fdc13bfe2cc25cbf74a', class: "action-buttons" }, showClearButton && (index.h("ic-button", { key: '7a1878087c6b6091a7ef27c4cac6ac145ca09ae9', id: "clear-button", "aria-label": "Clear input", class: {
+                ["clear-button"]: true,
+                ["hidden"]: helpers.isEmptyString(this.day) &&
+                    helpers.isEmptyString(this.month) &&
+                    helpers.isEmptyString(this.year),
+            }, disabled: this.disabled, innerHTML: clearIcon.Clear, onClick: this.handleClear, onFocus: this.handleClearFocus, onBlur: this.handleClearBlur, variant: "icon-tertiary", theme: this.clearButtonFocused ? "light" : "dark", size: size })), showCalendarButton && (index.h("div", { key: 'ec2f995db607ae5d575ddd7994e85f4b883ce2bb', class: "show-calendar-button-wrapper" }, index.h("div", { key: '74e895071ab608fcccc0a3e2b2ec368511efe4d3', class: { divider: true, [size]: true } }), index.h("ic-button", { key: '51e8939da851ae18809840d22492f3b5be958b26', id: "calendar-button", ref: (el) => (this.calendarButtonEl = el), "aria-label": "Display calendar", "aria-haspopup": "dialog", class: "calendar-button", disabled: this.disabled, innerHTML: Calendar, onClick: this.handleCalendarOpen, variant: "icon-tertiary", size: size, onFocus: this.handleCalendarFocus, onBlur: this.handleCalendarBlur, theme: this.calendarFocused ? "light" : "dark" })))))), index.h("span", { key: '77d360d10492577650304e7914021ad40bb8b281', id: this.selectedDateInfoId, class: "sr-only", "aria-live": "polite" }, index.h("span", { key: '1c285045fb1b18bca93c9e32956e93b8d400b0a1', ref: (el) => (this.selectedDateInfoEl = el), role: "status" })), index.h("ic-input-validation", { key: '7f02c2d9ec754c92dec3156339e6ea6b504b8d74', status: validationStatus, message: hasCustomValidation ? this.validationText : this.invalidDateText, for: inputId, ariaLiveMode: validationAriaLive }))));
+    }
+    static get delegatesFocus() { return true; }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "day": ["watchInputHandler"],
+        "month": ["watchInputHandler"],
+        "year": ["watchInputHandler"],
+        "disabled": ["watchDisabledHandler"],
+        "disableFuture": ["watchDisableFutureHandler"],
+        "disablePast": ["watchDisablePastHandler"],
+        "max": ["watchMaxHandler"],
+        "min": ["watchMinHandler"],
+        "required": ["watchRequiredHandler"]
+    }; }
+};
+DateInput.style = IcDateInputStyle0;
+
+exports.ic_calendar = Calendar$1;
+exports.ic_date_input = DateInput;
+
+//# sourceMappingURL=ic-calendar_2.cjs.entry.js.map