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

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

@@ -0,0 +1,1737 @@
+import { h, Host, } from "@stencil/core";
+import { IcInformationStatus, IcThemeForegroundEnum, IcDateInputMonths, IcDayNames, } from "../../utils/types";
+import { convertToDoubleDigits, createDate, dateMatches, extractDateFromZuluDateTime, isDateOrEpoch, splitStringDate, } from "../../utils/date-helpers";
+import { addFormResetListener, getInputDescribedByText, isEmptyString, isNumeric, onComponentRequiredPropUndefined, removeFormResetListener, renderHiddenInput, stringEnumToArray, } from "../../utils/helpers";
+import Clear from "../../assets/clear-icon.svg";
+import Calendar from "../../assets/calendar.svg";
+let inputIds = 0;
+export class DateInput {
+    constructor() {
+        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;
+                default:
+                    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;
+                default:
+                    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 is() { return "ic-date-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ic-date-input.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ic-date-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "dateFormat": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcDateFormat",
+                    "resolved": "\"DD/MM/YYYY\" | \"MM/DD/YYYY\" | \"YYYY/MM/DD\"",
+                    "references": {
+                        "IcDateFormat": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcDateFormat"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The format in which the date will be displayed."
+                },
+                "attribute": "date-format",
+                "reflect": false,
+                "defaultValue": "\"DD/MM/YYYY\""
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the disabled state will be set."
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disableDays": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "IcWeekDays[]",
+                    "resolved": "IcWeekDays[]",
+                    "references": {
+                        "IcWeekDays": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcWeekDays"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The days of the week to disable."
+                },
+                "defaultValue": "[]"
+            },
+            "disableDaysMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The text to display as the validation message when `disableDays` is set and a disabled date is entered."
+                },
+                "attribute": "disable-days-message",
+                "reflect": false,
+                "defaultValue": "\"The date you have selected is on a day of the week that is not allowed. Please select another date.\""
+            },
+            "disableFuture": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, dates in the future are not allowed. A validation message will appear if a date in the future is entered."
+                },
+                "attribute": "disable-future",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disableFutureMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The text to display as the validation message when `disableFuture` is true and a date in the future is entered."
+                },
+                "attribute": "disable-future-message",
+                "reflect": false,
+                "defaultValue": "\"Dates in the future are not allowed. Please select a date in the past.\""
+            },
+            "disablePast": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, dates in the past are not allowed. A validation message will appear if a date in the past is entered."
+                },
+                "attribute": "disable-past",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disablePastMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The text to display as the validation message when `disablePast` is true and a date in the past is entered."
+                },
+                "attribute": "disable-past-message",
+                "reflect": false,
+                "defaultValue": "\"Dates in the past are not allowed. Please select a date in the future.\""
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The helper text that will be displayed for additional field guidance. This will default to the text \"Use format\" along with the `dateFormat` value."
+                },
+                "attribute": "helper-text",
+                "reflect": false
+            },
+            "inputId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The ID for the input."
+                },
+                "attribute": "input-id",
+                "reflect": false,
+                "defaultValue": "`ic-date-input-${inputIds++}`"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label for the date input."
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "max": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | Date",
+                    "resolved": "Date | string",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The latest date that will be allowed. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object.\nThe value of this prop is ignored if `disableFuture` is set to `true`."
+                },
+                "attribute": "max",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "min": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | Date",
+                    "resolved": "Date | string",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The earliest date that will be allowed. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object.\nThe value of this prop is ignored if `disablePast` is set to `true`."
+                },
+                "attribute": "min",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the control, which is submitted with the form data."
+                },
+                "attribute": "name",
+                "reflect": false,
+                "defaultValue": "this.inputId"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the input will require a value."
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "showCalendarButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "If `true`, a button which displays the calendar view when clicked will be displayed."
+                        }],
+                    "text": ""
+                },
+                "attribute": "show-calendar-button",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "showClearButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, a button which clears the date input when clicked will be displayed."
+                },
+                "attribute": "show-clear-button",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcSizes",
+                    "resolved": "\"default\" | \"large\" | \"small\"",
+                    "references": {
+                        "IcSizes": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcSizes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the date input to be displayed."
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "\"default\""
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string | Date | null | undefined",
+                    "resolved": "Date | string",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the date 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."
+                },
+                "attribute": "value",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "validationStatus": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "IcInformationStatusOrEmpty",
+                    "resolved": "\"\" | \"error\" | \"success\" | \"warning\"",
+                    "references": {
+                        "IcInformationStatusOrEmpty": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcInformationStatusOrEmpty"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in date validation."
+                },
+                "attribute": "validation-status",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "validationText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The text to display as the validation message. This will override the built-in date validation."
+                },
+                "attribute": "validation-text",
+                "reflect": false,
+                "defaultValue": "\"\""
+            }
+        };
+    }
+    static get states() {
+        return {
+            "day": {},
+            "invalidDateText": {},
+            "maxDate": {},
+            "minDate": {},
+            "month": {},
+            "year": {},
+            "calendarFocused": {},
+            "clearButtonFocused": {},
+            "removeLabelledBy": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "calendarButtonClicked",
+                "name": "calendarButtonClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Emitted when the calendar is opened."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ value: Date }",
+                    "resolved": "{ value: Date; }",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                }
+            }, {
+                "method": "icBlur",
+                "name": "icBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input loses focus."
+                },
+                "complexType": {
+                    "original": "{ value: Date }",
+                    "resolved": "{ value: Date; }",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                }
+            }, {
+                "method": "icChange",
+                "name": "icChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the value has changed."
+                },
+                "complexType": {
+                    "original": "{ value: Date }",
+                    "resolved": "{ value: Date; }",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                }
+            }, {
+                "method": "icFocus",
+                "name": "icFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input gains focus."
+                },
+                "complexType": {
+                    "original": "{ value: Date }",
+                    "resolved": "{ value: Date; }",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getDate": {
+                "complexType": {
+                    "signature": "() => Promise<Date>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    },
+                    "return": "Promise<Date>"
+                },
+                "docs": {
+                    "text": "Returns the value as a Date object",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Date"
+                        }]
+                }
+            },
+            "setCalendarFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Sets focus on the calendar button."
+                        }]
+                }
+            },
+            "setDisableDays": {
+                "complexType": {
+                    "signature": "(days: IcWeekDays[]) => Promise<void>",
+                    "parameters": [{
+                            "name": "days",
+                            "type": "IcWeekDays[]",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "IcWeekDays": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcWeekDays"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Used to pass disabledDays from parent component."
+                        }]
+                }
+            },
+            "triggerIcChange": {
+                "complexType": {
+                    "signature": "(d: Date) => Promise<void>",
+                    "parameters": [{
+                            "name": "d",
+                            "type": "Date",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Used to enable other components to invoke an IcChange event from the input."
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "disableFuture",
+                "methodName": "watchDisableFutureHandler"
+            }, {
+                "propName": "disablePast",
+                "methodName": "watchDisablePastHandler"
+            }, {
+                "propName": "max",
+                "methodName": "watchMaxHandler"
+            }, {
+                "propName": "min",
+                "methodName": "watchMinHandler"
+            }, {
+                "propName": "required",
+                "methodName": "watchRequiredHandler"
+            }];
+    }
+}
+//# sourceMappingURL=ic-date-input.js.map