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

package/dist/components/ic-date-input2.js

@@ -0,0 +1,1340 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { i as isEmptyString, s as stringEnumToArray, g as getInputDescribedByText, r as removeFormResetListener, a as addFormResetListener, o as onComponentRequiredPropUndefined, b as isNumeric, I as IcInformationStatus, d as renderHiddenInput, e as IcThemeForegroundEnum, f as IcDayNames, h as IcDateInputMonths } from './helpers2.js';
+import { d as defineCustomElement$8 } from './ic-button2.js';
+import { d as defineCustomElement$7 } from './ic-input-component-container2.js';
+import { d as defineCustomElement$6 } from './ic-input-container2.js';
+import { d as defineCustomElement$5 } from './ic-input-label2.js';
+import { d as defineCustomElement$4 } from './ic-input-validation2.js';
+import { d as defineCustomElement$3 } from './ic-loading-indicator2.js';
+import { d as defineCustomElement$2 } from './ic-tooltip2.js';
+import { d as defineCustomElement$1 } from './ic-typography2.js';
+
+const isMonthFirstFormat = (dateString) => {
+    const monthFirstFormat = /^(0[1-9]|1[0-2])(\/|-)(0[1-9]|[12][0-9]|3[01])(\/|-)\d{4}$/;
+    return monthFirstFormat.test(dateString);
+};
+const isDayFirstFormat = (dateString) => {
+    const dayFirstFormat = /^(0[1-9]|[12][0-9]|3[01])(\/|-)(0[1-9]|1[0-2])(\/|-)\d{4}$/;
+    return dayFirstFormat.test(dateString);
+};
+const createDate = (date, dateFormat) => {
+    let newDate;
+    if (isDateOrEpoch(date)) {
+        newDate = typeof date === "string" ? new Date(date) : date;
+    }
+    else if (typeof date === "string") {
+        const dateArray = splitStringDate(date, dateFormat);
+        const year = Number(dateArray[0]);
+        const month = Number(dateArray[1]) - 1;
+        const day = Number(dateArray[2]);
+        newDate = new Date(year, month, day);
+    }
+    return newDate;
+};
+const isDateOrEpoch = (date) => {
+    return date instanceof Date || !isNaN(+new Date(+date));
+};
+const extractDateFromZuluDateTime = (zuluDateTime) => zuluDateTime.slice(0, zuluDateTime.indexOf("T"));
+const splitStringDate = (date, dateFormat) => {
+    // returns an array where item 1 is year, item 2 is month, item 3 is day
+    if (date.includes("T") && date.includes("Z")) {
+        const nextDate = extractDateFromZuluDateTime(date);
+        return nextDate.split("-");
+    }
+    let newDate = [];
+    const dateWithSlashes = date.replace(/-/g, "/");
+    if (dateWithSlashes.split("/").length > 1) {
+        const dateParts = dateWithSlashes.split("/");
+        // pad any values to 2 characters
+        dateParts.forEach((d, i) => {
+            if (d.length === 1) {
+                dateParts[i] = convertToDoubleDigits(d);
+            }
+        });
+        if (dateParts[0].length === 4) {
+            newDate = [dateParts[0], dateParts[1], dateParts[2]];
+        }
+        else {
+            const newDateStr = dateParts.join("/");
+            const validDayFirst = isDayFirstFormat(newDateStr);
+            const validMonthFirst = isMonthFirstFormat(newDateStr);
+            if (validDayFirst && validMonthFirst) {
+                if (dateFormat.charAt(0) === "M") {
+                    newDate = [dateParts[2], dateParts[0], dateParts[1]];
+                }
+                else {
+                    newDate = [dateParts[2], dateParts[1], dateParts[0]];
+                }
+            }
+            else if (validMonthFirst) {
+                newDate = [dateParts[2], dateParts[0], dateParts[1]];
+            }
+            else {
+                newDate = [dateParts[2], dateParts[1], dateParts[0]];
+            }
+        }
+    }
+    return newDate;
+};
+const convertToDoubleDigits = (value) => {
+    if (+value < 10) {
+        return `0${value}`;
+    }
+    return value.toString();
+};
+const getWeekStart = (date, startDay) => {
+    const tmpDate = new Date(date);
+    const day = tmpDate.getDay();
+    const diff = (day < startDay ? 7 : 0) + day - startDay;
+    tmpDate.setDate(tmpDate.getDate() - diff);
+    return tmpDate;
+};
+const getWeekEnd = (date, startDay) => {
+    const d = new Date(date);
+    const day = d.getDay();
+    const diff = (day < startDay ? -7 : 0) + 6 - (day - startDay);
+    d.setDate(d.getDate() + diff);
+    return d;
+};
+const getMonthStart = (date) => {
+    return new Date(date.getFullYear(), date.getMonth(), 1);
+};
+const getMonthEnd = (date) => {
+    return new Date(date.getFullYear(), date.getMonth() + 1, 0);
+};
+/**
+ * Compare if two dates are equal exactly equal
+ */
+const dateMatches = (a, b) => {
+    if (a === null || b === null) {
+        return false;
+    }
+    return (a.getFullYear() === b.getFullYear() &&
+        a.getMonth() === b.getMonth() &&
+        a.getDate() === b.getDate());
+};
+const clampDate = (date, min, max) => {
+    const time = date.getTime();
+    if (min !== null && time < min.getTime()) {
+        return min;
+    }
+    if (max !== null && time > max.getTime()) {
+        return max;
+    }
+    return date;
+};
+/**
+ * Compare if date is within specified range
+ */
+const dateInRange = (date, min, max) => {
+    return clampDate(date, min, max) === date;
+};
+const yearInRange = (year, min, max) => {
+    let allowed = true;
+    if (year !== null) {
+        if (min !== null && year < min.getFullYear()) {
+            allowed = false;
+        }
+        if (allowed && max !== null && year > max.getFullYear()) {
+            allowed = false;
+        }
+    }
+    return allowed;
+};
+
+const Clear = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15.8327 5.34199L14.6577 4.16699L9.99935 8.82533L5.34102 4.16699L4.16602 5.34199L8.82435 10.0003L4.16602 14.6587L5.34102 15.8337L9.99935 11.1753L14.6577 15.8337L15.8327 14.6587L11.1743 10.0003L15.8327 5.34199Z" fill="currentColor"/>
+</svg>
+`;
+
+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}input{border:0;height:100%;padding:0;outline:none;background:none;-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none}ic-input-component-container{cursor:text}ic-input-component-container,ic-input-component-container:hover{color:var(--ic-color-tertiary-text)}ic-input-component-container .focus-indicator{padding:var(--ic-space-xxxs) var(--ic-space-xs);align-items:center}.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-focus-blue) !important;box-shadow:inset 0 0 0 0.125rem var(--ic-focus-glow) !important;border-radius:0.25rem}.clear-button:focus,.calendar-button:focus,.clear-button:active *,.calendar-button:active *{fill:var(--ic-architectural-white)}.divider{margin:0 var(--ic-space-xxs);width:var(--ic-space-1px);background-color:var(--ic-architectural-400);border-radius:var(--ic-space-1px)}.divider.small{height:var(--ic-space-md)}.divider.default{height:calc(var(--ic-space-sm) + var(--ic-space-xs))}.divider.large{height:var(--ic-space-lg)}";
+
+let inputIds = 0;
+const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.calendarButtonClicked = createEvent(this, "calendarButtonClicked", 7);
+        this.icBlur = createEvent(this, "icBlur", 7);
+        this.icChange = createEvent(this, "icChange", 7);
+        this.icFocus = createEvent(this, "icFocus", 7);
+        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.isDateSetFromKeyboardEvent = 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.previousEmittedDate = undefined;
+        this.previousSelectedDate = null;
+        this.selectedDate = null;
+        this.setInputPasteValue = (input, pastedValue) => {
+            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;
+                default:
+                    isValid = false;
+                    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 (!isEmptyString(this.day)) {
+                this.isValidDay = +this.day > this.MAX_DAY ? false : true;
+            }
+            else {
+                this.isValidDay = true;
+            }
+            if (!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.setInputValue(input, true);
+                    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) => {
+            const input = event.target;
+            const eventKey = event.key.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;
+            }
+            this.preventInput(event, isInputPrevented);
+            this.isDateSetFromKeyboardEvent = 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;
+            this.setPasteInvalidText();
+            this.autocompleteInput(input);
+        };
+        this.handleLeftRightArrowKeyPress = (input, key) => {
+            if (key === "arrowright") {
+                this.moveToNextInput(input);
+            }
+            else {
+                this.moveToPreviousInput(input);
+            }
+            this.setPasteInvalidText();
+        };
+        this.notifyScreenReaderSelectedDate = () => {
+            const dayNames = stringEnumToArray(IcDayNames);
+            const months = stringEnumToArray(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;
+            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();
+                    if (input === this.yearInputEl) {
+                        input.value = new Date().getFullYear().toString();
+                    }
+                    else {
+                        input.value = maxValue.toString();
+                    }
+                    this.notifyScreenReader(input, event);
+                }
+                else if (event.key === "ArrowUp") {
+                    event.preventDefault();
+                    if (input === this.yearInputEl) {
+                        input.value = new Date().getFullYear().toString();
+                    }
+                    else {
+                        input.value = `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 || !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.setValueAndEmitChange(null);
+                    this.selectedDateInfoEl.textContent = "";
+                }
+                this.previousSelectedDate = this.selectedDate;
+                if (!this.isDateSetFromKeyboardEvent) {
+                    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) => {
+            event.preventDefault();
+            const pastedValue = event.clipboardData.getData("Text");
+            const isValidDate = this.isPastedStringDateValid(pastedValue);
+            this.setPastedValueAndValidation(isValidDate, pastedValue, event);
+        };
+        this.setDate = (date) => {
+            if (date === null || date === "" || date === undefined) {
+                this.day = null;
+                this.month = null;
+                this.year = null;
+                this.inputsInOrder.forEach((input) => {
+                    input.classList.remove(this.FIT_TO_VALUE);
+                    this.setPreventInput(input, false);
+                });
+                this.handleDateChange(true);
+            }
+            else {
+                if (isDateOrEpoch(date)) {
+                    let newDate;
+                    if (typeof date === "string") {
+                        // Checking if epoch date time
+                        newDate = new Date(+date);
+                    }
+                    else {
+                        newDate = date;
+                    }
+                    this.day = convertToDoubleDigits(newDate.getDate());
+                    this.month = convertToDoubleDigits(newDate.getMonth() + 1);
+                    this.year = newDate.getFullYear().toString();
+                }
+                else if (typeof date === "string") {
+                    const defaultDateArray = splitStringDate(date, this.dateFormat);
+                    this.year = defaultDateArray[0];
+                    this.month = defaultDateArray[1];
+                    this.day = defaultDateArray[2];
+                }
+            }
+            this.setValidationMessage();
+        };
+        this.formatMinMax = (date) => {
+            let formattedDate;
+            const day = convertToDoubleDigits(date.getDate());
+            const month = convertToDoubleDigits(date.getMonth() + 1);
+            const year = date.getFullYear();
+            switch (this.dateFormat) {
+                case "DD/MM/YYYY":
+                    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) => {
+            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 (!isEmptyString(this.day) &&
+                !isEmptyString(this.month) &&
+                !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 !== 0 && 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 = "Please enter a valid date.";
+            }
+            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 = () => {
+            const inputs = this.el.shadowRoot.querySelectorAll("input");
+            inputs.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;
+            if (this.disabled &&
+                !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 = this.el.shadowRoot.querySelector("label");
+            const labelId = `${this.inputId}-label`;
+            if (labelEl !== null && labelEl !== undefined) {
+                labelEl.id = labelId;
+                const hasValidation = (!isEmptyString(this.validationStatus) &&
+                    !isEmptyString(this.validationText)) ||
+                    !isEmptyString(this.invalidDateText);
+                const labelledBy = `${labelId} ${this.screenReaderInfoId} ${getInputDescribedByText(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 = (h("input", { class: "day-input", id: "day-input", ref: (el) => (this.dayInputEl = el), "aria-label": "day", placeholder: "DD", disabled: this.disabled, onPaste: this.handlePaste, inputmode: "number", pattern: "[0-9]*", onKeyDown: (event) => this.handleKeyDown(event, this.preventDayInput) }));
+            const monthInput = (h("input", { id: "month-input", class: "month-input", ref: (el) => (this.monthInputEl = el), "aria-label": "month", placeholder: "MM", disabled: this.disabled, onPaste: this.handlePaste, inputmode: "number", pattern: "[0-9]*", onKeyDown: (event) => this.handleKeyDown(event, this.preventMonthInput) }));
+            const yearInput = (h("input", { id: "year-input", class: "year-input", ref: (el) => (this.yearInputEl = el), "aria-label": "year", placeholder: "YYYY", maxLength: 4, disabled: this.disabled, 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 "DD/MM/YYYY":
+                    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 === 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, input.selectionEnd);
+            }
+            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
+        this.isSelectedDateDisabled = () => {
+            const currentDate = new Date();
+            this.isAfterMax = false;
+            this.isBeforeMin = false;
+            let disabled = false;
+            const isNotToday = this.selectedDate.toDateString() !== currentDate.toDateString();
+            if (this.minDate && this.selectedDate < this.minDate && isNotToday) {
+                this.isBeforeMin = true;
+                disabled = true;
+            }
+            if (this.maxDate && this.selectedDate > this.maxDate && isNotToday) {
+                this.isAfterMax = true;
+                disabled = true;
+            }
+            if (this.disableDays.includes(this.selectedDate.getDay())) {
+                disabled = true;
+            }
+            if (((this.disablePast && this.selectedDate < currentDate) ||
+                (this.disableFuture && this.selectedDate > currentDate)) &&
+                isNotToday) {
+                disabled = true;
+            }
+            return disabled;
+        };
+        this.moveToNextInput = (currentInput) => {
+            const currentInputPos = this.inputsInOrder.findIndex((input) => input === currentInput);
+            const nextInput = this.inputsInOrder[currentInputPos + 1];
+            this.preventAutoFormatting = false;
+            if (nextInput) {
+                nextInput.focus();
+            }
+        };
+        this.moveToPreviousInput = (currentInput) => {
+            const currentInputPos = this.inputsInOrder.findIndex((input) => input === currentInput);
+            this.preventAutoFormatting = false;
+            if (this.inputsInOrder[currentInputPos - 1]) {
+                this.inputsInOrder[currentInputPos - 1].focus();
+            }
+        };
+        this.autocompleteInput = (input) => {
+            if (input === this.yearInputEl) {
+                this.autocompleteYear();
+            }
+            else {
+                const inputValue = input.value;
+                // Autocomplete input as 2 characters (leading zero) when only 1 character entered (for day and month)
+                if (inputValue.length === 1) {
+                    if (+inputValue === 0) {
+                        input.value = "01";
+                    }
+                    else {
+                        input.value = `0${inputValue}`;
+                    }
+                }
+            }
+            if (input.value) {
+                this.setInputValue(input);
+            }
+        };
+        // Autocomplete year as current millennium when fewer than 4 characters entered
+        this.autocompleteYear = () => {
+            const inputValue = this.yearInputEl.value;
+            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}`;
+            }
+        };
+        this.convertToDate = (year, month, day) => {
+            if (!isEmptyString(year) && !isEmptyString(month) && !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;
+            if ((_a = this.el.shadowRoot.activeElement) === null || _a === void 0 ? void 0 : _a.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) => {
+            return input.getAttribute(this.ARIA_LABEL);
+        };
+        this.notifyScreenReaderArrowKeys = (input) => {
+            const liveRegion = this.el.shadowRoot.querySelector("#live-region");
+            let announcement = "";
+            const ariaLabel = this.getAriaLabel(input);
+            if (liveRegion && input.value) {
+                if (input === this.monthInputEl &&
+                    !!IcDateInputMonths[+input.value - 1]) {
+                    announcement = `${input.value} - ${IcDateInputMonths[+input.value - 1]}, ${ariaLabel}`;
+                }
+                if (input === this.dayInputEl || input === this.yearInputEl) {
+                    announcement = `${input.value}, ${ariaLabel}`;
+                }
+                liveRegion.textContent = announcement;
+            }
+        };
+        this.notifyScreenReaderInput = (input, liveRegion) => {
+            let announcement = "";
+            const ariaLabel = this.getAriaLabel(input);
+            if (input === this.dayInputEl || input === this.monthInputEl) {
+                if (input.value.length === 2) {
+                    if (input === this.monthInputEl &&
+                        !!IcDateInputMonths[+input.value - 1] &&
+                        this.isValidMonth) {
+                        announcement = `${input.value} - ${IcDateInputMonths[+input.value - 1]}, ${ariaLabel}`;
+                    }
+                    if (input === this.dayInputEl && this.isValidDay) {
+                        announcement = `${input.value}, ${ariaLabel}`;
+                    }
+                }
+                else {
+                    announcement = "";
+                }
+            }
+            else {
+                if (input.value.length === 4) {
+                    announcement = `${input.value}, ${ariaLabel}`;
+                }
+                else {
+                    announcement = "";
+                }
+            }
+            liveRegion.textContent = announcement;
+        };
+        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) => {
+            if (this.inputsInOrder.length) {
+                this.inputsInOrder.forEach((input) => {
+                    input.removeAttribute(this.ARIA_INVALID);
+                });
+                if (!validDay) {
+                    this.dayInputEl.setAttribute(this.ARIA_INVALID, "true");
+                }
+                if (!validMonth) {
+                    this.monthInputEl.setAttribute(this.ARIA_INVALID, "true");
+                }
+                if (!validDate || disabledDate) {
+                    this.inputsInOrder.forEach((input) => {
+                        input.setAttribute(this.ARIA_INVALID, "true");
+                    });
+                }
+            }
+        };
+        this.handleClear = () => {
+            this.inputsInOrder.forEach((input) => {
+                input.classList.remove(this.FIT_TO_VALUE);
+                this.setInputValue(input, true);
+                this.setPreventInput(input, false);
+            });
+            this.isDateSetFromKeyboardEvent = false;
+            this.setValidationMessage();
+            this.handleDateChange(true);
+            this.inputsInOrder[0].focus();
+        };
+        this.handleCalendarOpen = (ev) => {
+            var _a, _b;
+            ev.stopImmediatePropagation();
+            (_a = this.calendarButtonEl) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector("ic-tooltip").displayTooltip(false);
+            this.calendarButtonClicked.emit({ value: this.selectedDate });
+            (_b = this.calendarButtonEl) === null || _b === void 0 ? void 0 : _b.shadowRoot.querySelector("ic-tooltip").displayTooltip(false);
+            this.isDateSetFromKeyboardEvent = false;
+        };
+        this.setValueAndEmitChange = (value) => {
+            if (!dateMatches(new Date(this.value), value)) {
+                this.emitIcChange(value);
+                this.value = value;
+            }
+        };
+        this.handleCalendarFocus = () => {
+            this.calendarFocused = true;
+        };
+        this.handleCalendarBlur = () => {
+            this.calendarFocused = false;
+        };
+        this.handleClearFocus = () => {
+            this.removeLabelledBy = true;
+            this.clearButtonFocused = true;
+        };
+        this.handleClearBlur = (ev) => {
+            var _a;
+            this.clearButtonFocused = false;
+            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) => {
+            if (!(d === null && this.previousEmittedDate === null) &&
+                !dateMatches(d, this.previousEmittedDate)) {
+                this.previousEmittedDate = d;
+                this.icChange.emit({ value: d });
+            }
+        };
+        this.day = "";
+        this.invalidDateText = undefined;
+        this.maxDate = undefined;
+        this.minDate = undefined;
+        this.month = "";
+        this.year = "";
+        this.calendarFocused = false;
+        this.clearButtonFocused = false;
+        this.removeLabelledBy = false;
+        this.dateFormat = "DD/MM/YYYY";
+        this.disabled = false;
+        this.disableDays = [];
+        this.disableDaysMessage = "The date you have selected is on a day of the week that is not allowed. Please select another date.";
+        this.disableFuture = false;
+        this.disableFutureMessage = "Dates in the future are not allowed. Please select a date in the past.";
+        this.disablePast = false;
+        this.disablePastMessage = "Dates in the past are not allowed. Please select a date in the future.";
+        this.helperText = undefined;
+        this.inputId = `ic-date-input-${inputIds++}`;
+        this.label = undefined;
+        this.max = "";
+        this.min = "";
+        this.name = this.inputId;
+        this.required = false;
+        this.showCalendarButton = false;
+        this.showClearButton = true;
+        this.size = "default";
+        this.value = "";
+        this.validationStatus = "";
+        this.validationText = "";
+    }
+    watchDisableFutureHandler() {
+        this.watchMaxHandler();
+    }
+    watchDisablePastHandler() {
+        this.watchMinHandler();
+    }
+    watchMaxHandler() {
+        if (this.disableFuture) {
+            this.maxDate = new Date();
+        }
+        else {
+            this.maxDate = createDate(this.max, this.dateFormat);
+        }
+    }
+    watchMinHandler() {
+        if (this.disablePast) {
+            this.minDate = new Date();
+        }
+        else {
+            this.minDate = createDate(this.min, this.dateFormat);
+        }
+    }
+    watchRequiredHandler() {
+        // 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 = this.el.shadowRoot.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 = this.el.shadowRoot.querySelector("#asterisk-span");
+            if (asteriskSpan) {
+                asteriskSpan.remove();
+            }
+        }
+    }
+    disconnectedCallback() {
+        removeFormResetListener(this.el, this.handleFormReset);
+    }
+    componentWillLoad() {
+        this.defaultHelperText = `Use format ${this.dateFormat}`;
+        if (isEmptyString(this.helperText))
+            this.helperText = this.defaultHelperText;
+        this.watchMinHandler();
+        this.watchMaxHandler();
+        if (this.value) {
+            this.setDate(this.value);
+            this.previousEmittedDate = this.selectedDate;
+        }
+        else {
+            this.previousEmittedDate = null;
+        }
+        this.screenReaderInfoId = `${this.inputId}-screen-reader-info`;
+        this.assistiveHintId = `${this.inputId}-assistive-hint`;
+        this.selectedDateInfoId = `${this.inputId}-selected-date-info`;
+        addFormResetListener(this.el, this.handleFormReset);
+    }
+    componentDidLoad() {
+        this.setInputsInOrder();
+        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 (isEmptyString(this.helperText))
+            this.helperText = this.defaultHelperText;
+        if (!this.isDateSetFromKeyboardEvent)
+            this.setDate(this.value);
+        this.setAriaInvalid(this.isValidDay, this.isValidMonth, this.isValidDate, this.isDisabledDate);
+        this.handleDateChange(false);
+        this.isDateSetFromKeyboardEvent = 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.emitIcChange(d);
+    }
+    removeAriaLabelledBy() {
+        this.inputCompContainerEl.removeAttribute(this.ARIA_LABELLED_BY);
+    }
+    setPastedValueAndValidation(isValidDate, pastedValue, event) {
+        switch (true) {
+            case isValidDate: {
+                const nextParsedValue = this.isZuluTime
+                    ? 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) &&
+                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 && 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 && isNumeric(pastedValue):
+                this.displayPastedValidation(event);
+        }
+    }
+    pasteZuluDateTime(dateParts, index) {
+        // ['YYYY', 'MM', 'DD']
+        if (index === 0) {
+            const dateValue = this.slicePastedDate(4, dateParts[index]);
+            this.yearInputEl.value = dateValue;
+            this.setInputValue(this.yearInputEl);
+        }
+        else if (index === 1) {
+            // 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 {
+            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 = 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.isDateSetFromKeyboardEvent = true;
+        }
+    }
+    notifyScreenReader(input, event) {
+        const liveRegion = this.el.shadowRoot.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, showClearButton, showCalendarButton, size, } = this;
+        const hasCustomValidation = !isEmptyString(this.validationStatus) &&
+            !isEmptyString(this.validationText);
+        const validationStatus = hasCustomValidation
+            ? this.validationStatus
+            : !isEmptyString(this.invalidDateText)
+                ? IcInformationStatus.Error
+                : "";
+        const assistiveHint = `Type or use the up and down arrow keys to change the values for the ${this.getDescOfInputsOrder()}.`;
+        renderHiddenInput(true, this.el, this.name, this.convertToDate(this.year, this.month, this.day), this.disabled);
+        return (h(Host, { onBlur: this.handleHostBlur, onFocus: this.handleHostFocus }, h("ic-input-container", { disabled: disabled }, h("ic-input-label", { for: inputId, label: label, helperText: helperText, disabled: disabled }), h("span", { id: this.screenReaderInfoId, class: "sr-only", "aria-hidden": "true" }, this.getScreenReaderInfo(validationStatus), `${this.defaultHelperText}.`), h("span", { id: this.assistiveHintId, class: "sr-only", "aria-hidden": "true" }, assistiveHint), h("span", { id: "live-region", "aria-live": "assertive", class: "sr-only" }), h("ic-input-component-container", { id: inputId, ref: (el) => (this.inputCompContainerEl = el), disabled: disabled, validationStatus: validationStatus, size: size, role: "group" }, h("div", { class: "input-container" }, h("div", { class: "date-inputs" }, this.getInputsInOrder()[0], "/", this.getInputsInOrder()[1], "/", this.getInputsInOrder()[2]), h("div", { class: "action-buttons" }, showClearButton && (h("ic-button", { id: "clear-button", "aria-label": "Clear input", class: {
+                ["clear-button"]: true,
+                ["hidden"]: isEmptyString(this.day) &&
+                    isEmptyString(this.month) &&
+                    isEmptyString(this.year),
+            }, disabled: this.disabled, innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearFocus, onBlur: this.handleClearBlur, variant: "icon", appearance: this.clearButtonFocused
+                ? IcThemeForegroundEnum.Light
+                : IcThemeForegroundEnum.Dark, size: size })), showCalendarButton && (h("div", { class: "show-calendar-button-wrapper" }, h("div", { class: { divider: true, [size]: true } }), h("ic-button", { 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", size: size, onFocus: this.handleCalendarFocus, onBlur: this.handleCalendarBlur, appearance: this.calendarFocused
+                ? IcThemeForegroundEnum.Light
+                : IcThemeForegroundEnum.Default })))))), h("span", { id: this.selectedDateInfoId, class: "sr-only", "aria-live": "polite" }, h("span", { ref: (el) => (this.selectedDateInfoEl = el), role: "status" })), (hasCustomValidation || !isEmptyString(this.invalidDateText)) && (h("ic-input-validation", { status: validationStatus, message: hasCustomValidation ? this.validationText : this.invalidDateText, for: inputId })))));
+    }
+    static get delegatesFocus() { return true; }
+    get el() { return this; }
+    static get watchers() { return {
+        "disableFuture": ["watchDisableFutureHandler"],
+        "disablePast": ["watchDisablePastHandler"],
+        "max": ["watchMaxHandler"],
+        "min": ["watchMinHandler"],
+        "required": ["watchRequiredHandler"]
+    }; }
+    static get style() { return icDateInputCss; }
+}, [17, "ic-date-input", {
+        "dateFormat": [1, "date-format"],
+        "disabled": [4],
+        "disableDays": [1040],
+        "disableDaysMessage": [1, "disable-days-message"],
+        "disableFuture": [4, "disable-future"],
+        "disableFutureMessage": [1, "disable-future-message"],
+        "disablePast": [4, "disable-past"],
+        "disablePastMessage": [1, "disable-past-message"],
+        "helperText": [1025, "helper-text"],
+        "inputId": [1, "input-id"],
+        "label": [1],
+        "max": [1],
+        "min": [1],
+        "name": [1],
+        "required": [4],
+        "showCalendarButton": [4, "show-calendar-button"],
+        "showClearButton": [4, "show-clear-button"],
+        "size": [1],
+        "value": [1025],
+        "validationStatus": [1025, "validation-status"],
+        "validationText": [1, "validation-text"],
+        "day": [32],
+        "invalidDateText": [32],
+        "maxDate": [32],
+        "minDate": [32],
+        "month": [32],
+        "year": [32],
+        "calendarFocused": [32],
+        "clearButtonFocused": [32],
+        "removeLabelledBy": [32],
+        "getDate": [64],
+        "setCalendarFocus": [64],
+        "setDisableDays": [64],
+        "triggerIcChange": [64]
+    }, undefined, {
+        "disableFuture": ["watchDisableFutureHandler"],
+        "disablePast": ["watchDisablePastHandler"],
+        "max": ["watchMaxHandler"],
+        "min": ["watchMinHandler"],
+        "required": ["watchRequiredHandler"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ic-date-input", "ic-button", "ic-input-component-container", "ic-input-container", "ic-input-label", "ic-input-validation", "ic-loading-indicator", "ic-tooltip", "ic-typography"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ic-date-input":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DateInput);
+            }
+            break;
+        case "ic-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "ic-input-component-container":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "ic-input-container":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "ic-input-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "ic-input-validation":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ic-loading-indicator":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ic-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "ic-typography":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { DateInput as D, dateInRange as a, getMonthStart as b, dateMatches as c, defineCustomElement as d, getWeekStart as e, getWeekEnd as f, getMonthEnd as g, clampDate as h, createDate as i, yearInRange as y };
+
+//# sourceMappingURL=ic-date-input2.js.map