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

package/dist/cjs/ic-date-input.cjs.entry.js

@@ -1,1214 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-d337cd8a.js');
-const helpers = require('./helpers-da852478.js');
-const dateHelpers = require('./date-helpers-d7ee7b45.js');
-const clearIcon = require('./clear-icon-547aa9b9.js');
-
-const Calendar = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-  <path d="M16.6667 2.50004H15.8334V0.833374H14.1667V2.50004H5.83342V0.833374H4.16675V2.50004H3.33341C2.41675 2.50004 1.66675 3.25004 1.66675 4.16671V17.5C1.66675 18.4167 2.41675 19.1667 3.33341 19.1667H16.6667C17.5834 19.1667 18.3334 18.4167 18.3334 17.5V4.16671C18.3334 3.25004 17.5834 2.50004 16.6667 2.50004ZM16.6667 17.5H3.33341V6.66671H16.6667V17.5Z" fill="currentColor"/>
-</svg>`;
-
-const icDateInputCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{--ic-input-label-helpertext-padding:var(--ic-space-xs);--input-bg-color:var(--ic-date-input-bg);--ic-input-label-text-color:var(--ic-date-input-label);--ic-input-label-helper-text-color:var(--ic-date-input-subtitle);--border-color:var(--ic-date-input-border);--border-color-disabled:var(--ic-date-input-border-disabled);--border-color-hover:var(--ic-date-input-border-default-hover);--border-color-pressed:var(--ic-date-input-border-default-pressed);--border-error-color:var(--ic-date-input-border-error);--border-error-color-hover:var(--ic-date-input-border-error-hover);--border-error-color-pressed:var(--ic-date-input-border-error-pressed);--border-success-color:var(--ic-date-input-border-success);--border-success-color-hover:var(--ic-date-input-border-success-hover);--border-success-color-pressed:var(--ic-date-input-border-success-pressed);--border-warning-color:var(--ic-date-input-border-warning);--border-warning-color-hover:var(--ic-date-input-border-warning-hover);--border-warning-color-pressed:var(--ic-date-input-border-warning-pressed)}:host(.ic-date-input-disabled){--ic-input-label-text-color:var(--ic-date-input-label-disabled);--ic-input-label-helper-text-color:var(--ic-date-input-subtitle-disabled)}input{border:0;height:100%;padding:0;outline:none;background:none;-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield;color:var(--ic-date-input-text-filled);caret-color:var(--ic-date-input-typing-cursor)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none}input:-webkit-autofill{box-shadow:0 0 0 var(--ic-space-sm) var(--ic-color-background-primary) inset;-webkit-text-fill-color:var(--ic-date-input-text-filled) !important}input::-moz-placeholder{color:var(--ic-date-input-text-placeholder)}input::placeholder{color:var(--ic-date-input-text-placeholder)}ic-input-component-container{cursor:text}ic-input-component-container .focus-indicator{padding:var(--ic-space-xxxs) var(--ic-space-xs);align-items:center}.date-inputs{color:var(--ic-date-input-text-placeholder)}.day-input{width:1.438rem}.month-input{width:1.813rem}.year-input,.year-input.fit-to-value{width:2.313rem}.fit-to-value{width:1.25rem}.sr-only{position:absolute;left:-9999px}.input-container{width:100%;display:flex;justify-content:space-between;align-items:center;position:relative}.action-buttons{display:flex;align-items:center}.show-calendar-button-wrapper{display:flex;justify-content:center;align-items:center}.clear-button,.calendar-button{border-radius:var(--ic-border-radius);transition:box-shadow var(--ic-easing-transition),\n    border-radius var(--ic-easing-transition);margin:0}.clear-button.hidden{display:none}.clear-button:focus,.calendar-button:focus,.clear-button:active,.calendar-button:active{background-color:var(--ic-color-focus-inner) !important;box-shadow:inset 0 0 0 0.125rem var(--ic-color-focus-outer) !important;border-radius:0.25rem}.calendar-button:focus,.calendar-button:active{--ic-button-tertiary-text-active:var(--ic-atoms-input-clear-button-focus);--ic-button-tertiary-text-hover-active:var(\n    --ic-atoms-input-clear-button-focus\n  );--ic-button-tertiary-text-pressed-active:var(\n    --ic-atoms-input-clear-button-focus\n  )}.clear-button:focus,.calendar-button:focus,.clear-button:active *,.calendar-button:active *{fill:var(--ic-atoms-input-clear-button-focus)}.clear-button svg{color:var(--ic-date-input-clear-icon)}.clear-button:focus svg{color:var(--ic-atoms-input-clear-button-focus)}.divider{margin:0 var(--ic-space-xxs);width:var(--ic-space-1px);background-color:var(--ic-atoms-input-divider);border-radius:var(--ic-space-1px)}.divider.small{height:var(--ic-space-md)}.divider.medium{height:calc(var(--ic-space-sm) + var(--ic-space-xs))}.divider.large{height:var(--ic-space-lg)}ic-input-validation{--ic-input-validation-status-text-color:var(--ic-date-input-status-text);--ic-input-validation-error:var(--ic-date-input-icon-error);--ic-input-validation-warning-icon-color:var(--ic-date-input-icon-warning);--ic-input-validation-success-icon-color:var(--ic-date-input-icon-success)}@media (forced-colors: active){.clear-button svg{color:currentcolor}}";
-const IcDateInputStyle0 = icDateInputCss;
-
-let inputIds = 0;
-const DateInput = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.calendarButtonClicked = index.createEvent(this, "calendarButtonClicked", 7);
-        this.icBlur = index.createEvent(this, "icBlur", 7);
-        this.icChange = index.createEvent(this, "icChange", 7);
-        this.icFocus = index.createEvent(this, "icFocus", 7);
-        this.DEFAULT_DATE_FORMAT = "DD/MM/YYYY";
-        this.ARIA_INVALID = "aria-invalid";
-        this.ARIA_LABEL = "aria-label";
-        this.ARIA_LABELLED_BY = "aria-labelledby";
-        this.EVENT_OBJECT_STRING = "[object Event]";
-        this.FIT_TO_VALUE = "fit-to-value";
-        this.initialValue = this.value;
-        this.INPUT_EVENT_OBJECT_STRING = "[object InputEvent]";
-        this.inputsInOrder = [];
-        this.isAfterMax = false;
-        this.isBeforeMin = false;
-        this.preventInputsUpdating = false;
-        this.isDisabledDate = false;
-        this.isValidDay = true;
-        this.isValidMonth = true;
-        this.isValidDate = true;
-        this.isZuluTime = false;
-        this.KEYBOARD_EVENT_OBJECT_STRING = "[object KeyboardEvent]";
-        this.MAX_DAY = 31;
-        this.MAX_MONTH = 12;
-        this.previousSelectedDate = null;
-        this.selectedDate = null;
-        this.externalSetDate = false;
-        this.clearInput = false;
-        this.calendarIsOpen = false;
-        this.calendarFocused = false;
-        this.clearButtonFocused = false;
-        this.removeLabelledBy = false;
-        this.day = "";
-        this.month = "";
-        this.year = "";
-        /**
-         * The format in which the date will be displayed.
-         */
-        this.dateFormat = this.DEFAULT_DATE_FORMAT;
-        /**
-         * If `true`, every individual input field completed will emit an icChange event.
-         */
-        this.emitDatePartChange = false;
-        /**
-         * If `true`, the disabled state will be set.
-         */
-        this.disabled = false;
-        /**
-         * The days of the week to disable.
-         */
-        this.disableDays = [];
-        /**
-         * The text to display as the validation message when `disableDays` is set and a disabled date is entered.
-         */
-        this.disableDaysMessage = "The date you have selected is on a day of the week that is not allowed. Please select another date.";
-        /**
-         * If `true`, dates in the future are not allowed. A validation message will appear if a date in the future is entered.
-         */
-        this.disableFuture = false;
-        /**
-         * The text to display as the validation message when `disableFuture` is true and a date in the future is entered.
-         */
-        this.disableFutureMessage = "Dates in the future are not allowed. Please select a date in the past.";
-        /**
-         * If `true`, dates in the past are not allowed. A validation message will appear if a date in the past is entered.
-         */
-        this.disablePast = false;
-        /**
-         * The text to display as the validation message when `disablePast` is true and a date in the past is entered.
-         */
-        this.disablePastMessage = "Dates in the past are not allowed. Please select a date in the future.";
-        /**
-         * If `true`, the helper text will be visually hidden, but still read out by screenreaders.
-         */
-        this.hideHelperText = false;
-        /**
-         * If `true`, the label will be visually hidden, but will still be read out by screen readers.
-         */
-        this.hideLabel = false;
-        /**
-         * The ID for the input.
-         */
-        this.inputId = `ic-date-input-${inputIds++}`;
-        /**
-         * The text to display as the validation message when an invalid date is entered.
-         */
-        this.invalidDateMessage = "Please enter a valid date.";
-        /**
-         * The latest date that will be allowed. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object.
-         * The value of this prop is ignored if `disableFuture` is set to `true`.
-         */
-        this.max = "";
-        /**
-         * The earliest date that will be allowed. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object.
-         * The value of this prop is ignored if `disablePast` is set to `true`.
-         */
-        this.min = "";
-        /**
-         * The name of the control, which is submitted with the form data.
-         */
-        this.name = this.inputId;
-        /**
-         * If `true`, the input will require a value.
-         */
-        this.required = false;
-        /**
-         * @internal If `true`, a button which displays the calendar view when clicked will be displayed.
-         */
-        this.showCalendarButton = false;
-        /**
-         * If `true`, a button which clears the date input when clicked will be displayed.
-         */
-        this.showClearButton = true;
-        /**
-         * The size of the date input to be displayed.
-         */
-        this.size = "medium";
-        /**
-         * Sets the date picker to the dark or light theme colors. "inherit" will set the color based on the system settings or ic-theme component.
-         */
-        this.theme = "inherit";
-        /**
-         * The value of the date input. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object.
-         */
-        this.value = "";
-        /**
-         * The value of the `aria-live` attribute on the validation message.
-         */
-        this.validationAriaLive = "polite";
-        /**
-         * The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in date validation.
-         */
-        this.validationStatus = "";
-        /**
-         * The text to display as the validation message. This will override the built-in date validation.
-         */
-        this.validationText = "";
-        this.setInputPasteValue = (input, pastedValue) => {
-            if (input) {
-                const inputEl = input;
-                inputEl.value = pastedValue;
-                inputEl.classList.add(this.FIT_TO_VALUE);
-            }
-        };
-        this.checkSingleCopiedValueIsValid = (input, pastedValue) => {
-            let isValid = false;
-            const value = Number(pastedValue);
-            switch (input) {
-                case this.dayInputEl:
-                    isValid = value >= 1 && value <= this.MAX_DAY;
-                    break;
-                case this.monthInputEl:
-                    isValid = value >= 1 && value <= this.MAX_MONTH;
-                    break;
-                case this.yearInputEl:
-                    isValid = true;
-                    break;
-            }
-            return isValid;
-        };
-        /**
-         * Using Object.prototype.string to determine type if event from user
-         * @param event - event object used to differentiate keyboard, generic or input event
-         * @returns boolean
-         */
-        this.isKeyboardOrEvent = (event) => {
-            return (Object.prototype.toString.call(event) === this.EVENT_OBJECT_STRING ||
-                Object.prototype.toString.call(event) ===
-                    this.KEYBOARD_EVENT_OBJECT_STRING);
-        };
-        this.setDateValidity = () => {
-            if (!helpers.isEmptyString(this.day)) {
-                this.isValidDay = +this.day > this.MAX_DAY ? false : true;
-            }
-            else {
-                this.isValidDay = true;
-            }
-            if (!helpers.isEmptyString(this.month)) {
-                this.isValidMonth = +this.month > this.MAX_MONTH ? false : true;
-            }
-            else {
-                this.isValidMonth = true;
-            }
-        };
-        this.handleInput = (event) => {
-            const inputEvent = event;
-            const input = event.target;
-            if (input !== this.yearInputEl) {
-                // Only auto-format if input event is not a character being deleted
-                // and not as user is changing value using up / down keys
-                if (inputEvent.inputType !== "deleteContentBackward" &&
-                    !this.preventAutoFormatting) {
-                    if (input.value.length === 1 &&
-                        ((input === this.dayInputEl && +input.value >= 4) ||
-                            (input === this.monthInputEl && +input.value >= 2)) &&
-                        +input.value <= 9) {
-                        this.setInputValue(input);
-                        this.notifyScreenReader(input, event);
-                        this.moveToNextInput(input);
-                    }
-                    if (input.value.length === 2) {
-                        if (+input.value === 0) {
-                            input.value = "01";
-                        }
-                        this.setInputValue(input);
-                        this.setPreventInput(input, true);
-                        this.notifyScreenReader(input, event);
-                        this.moveToNextInput(input);
-                    }
-                    else {
-                        this.setPreventInput(input, false);
-                    }
-                }
-                else if (this.preventAutoFormatting) {
-                    /**
-                     * Using arrow keys prevents auto formatting so need to deal with
-                     * switching from arrow keys to inputting numbers
-                     **/
-                    if (input.value.length === 2 && !this.isKeyboardOrEvent(event)) {
-                        this.setInputValue(input);
-                        this.setPreventInput(input, true);
-                        this.moveToNextInput(input);
-                    }
-                    else {
-                        this.setInputValue(input);
-                    }
-                }
-                if (input.value.length !== 2) {
-                    this.setPreventInput(input, false);
-                }
-            }
-            else {
-                if (input.value.length === 4) {
-                    this.setInputValue(input);
-                    if (Object.prototype.toString.call(event) !== this.EVENT_OBJECT_STRING) {
-                        this.moveToNextInput(input);
-                    }
-                    this.setPreventInput(input, true);
-                }
-                else {
-                    this.setPreventInput(input, false);
-                }
-            }
-            // Add / remove class to make input width match size of value i.e. 2 digits' width for day / month, 4 for year
-            this.setFitToValueStyling(input);
-            if (input.value.length === 0) {
-                this.setInputValue(input, true);
-                this.setValidationMessage();
-            }
-            this.notifyScreenReader(input, event);
-        };
-        this.handleKeyDown = (event, isInputPrevented) => {
-            var _a;
-            const input = event.target;
-            const eventKey = (_a = event.key) === null || _a === void 0 ? void 0 : _a.toLowerCase();
-            // Regex required due to FF allowing all characters as values for number text field.
-            const regex = /-?\d*\.?\d+(e[-+]?\d+)?|[/-]|arrowup|arrowdown|arrowleft|arrowright|shift|tab|backspace|delete/;
-            if (!regex.test(eventKey) &&
-                !((event.ctrlKey || event.metaKey) &&
-                    (eventKey === "v" || eventKey === "c"))) {
-                event.preventDefault();
-            }
-            switch (eventKey) {
-                case "/":
-                case "-":
-                case ".":
-                    event.preventDefault();
-                    this.setPasteInvalidText();
-                    this.moveToNextInput(input);
-                    break;
-                case "arrowright":
-                case "arrowleft":
-                    event.preventDefault();
-                    this.handleLeftRightArrowKeyPress(input, eventKey);
-                    break;
-                case "arrowup":
-                case "arrowdown":
-                    this.preventAutoFormatting = true;
-                    this.handleUpDownArrowKeyPress(input, event);
-                    break;
-                case "backspace":
-                    if (input.value.length === 0) {
-                        event.preventDefault();
-                        this.moveToPreviousInput(input);
-                    }
-                    break;
-            }
-            this.preventInput(event, isInputPrevented);
-            this.preventInputsUpdating = true;
-        };
-        this.handleFocus = (event) => {
-            // Highlight / select all characters in input for easy replacement
-            const input = event.target;
-            input.select();
-        };
-        this.handleBlur = (event) => {
-            const input = event.target;
-            if (input) {
-                this.setPasteInvalidText();
-                this.autocompleteInput(input);
-            }
-        };
-        this.handleLeftRightArrowKeyPress = (input, key) => {
-            if (key === "arrowright") {
-                this.moveToNextInput(input);
-            }
-            else {
-                this.moveToPreviousInput(input);
-            }
-            this.setPasteInvalidText();
-        };
-        this.notifyScreenReaderSelectedDate = () => {
-            if (this.selectedDate && this.selectedDateInfoEl) {
-                const dayNames = helpers.stringEnumToArray(helpers.IcDayNames);
-                const months = helpers.stringEnumToArray(helpers.IcDateInputMonths);
-                this.selectedDateInfoEl.textContent = `Selected date: ${dayNames[this.selectedDate.getDay()]}, ${this.selectedDate.getDate()} ${months[this.selectedDate.getMonth()]} ${this.selectedDate.getFullYear()}`;
-            }
-        };
-        this.handleUpDownArrowKeyPress = (input, event) => {
-            const minValue = input === this.yearInputEl ? 0 : 1;
-            let maxValue = 9999;
-            switch (input) {
-                case this.dayInputEl:
-                    maxValue = this.MAX_DAY;
-                    break;
-                case this.monthInputEl:
-                    maxValue = this.MAX_MONTH;
-                    break;
-                case this.yearInputEl:
-                    maxValue = 9999;
-            }
-            // Make value loop round when min / max reached
-            if (input === null || input === void 0 ? void 0 : input.value) {
-                if (event.key === "ArrowUp") {
-                    if (+input.value === maxValue) {
-                        event.preventDefault();
-                        input.value = `0${minValue}`;
-                    }
-                    else {
-                        input.value =
-                            +input.value + 1 < 10
-                                ? `0${+input.value + 1}`
-                                : (+input.value + 1).toString();
-                    }
-                    this.notifyScreenReader(input, event);
-                }
-                if (event.key === "ArrowDown") {
-                    if (+input.value === minValue) {
-                        event.preventDefault();
-                        input.value = maxValue.toString();
-                    }
-                    else {
-                        input.value =
-                            +input.value - 1 < 10
-                                ? `0${+input.value - 1}`
-                                : (+input.value - 1).toString();
-                    }
-                    this.notifyScreenReader(input, event);
-                }
-            }
-            else {
-                if (event.key === "ArrowDown") {
-                    event.preventDefault();
-                    input.value =
-                        input === this.yearInputEl
-                            ? new Date().getFullYear().toString()
-                            : maxValue.toString();
-                    this.notifyScreenReader(input, event);
-                }
-                else if (event.key === "ArrowUp") {
-                    event.preventDefault();
-                    input.value =
-                        input === this.yearInputEl
-                            ? new Date().getFullYear().toString()
-                            : `0${minValue}`;
-                    this.notifyScreenReader(input, event);
-                }
-            }
-            this.setInputValue(input);
-            this.setFitToValueStyling(input);
-        };
-        this.handleDateChange = (force) => {
-            // Prevent icChange being emitted when each individual input is changed
-            // This method is used within componentWillUpdate instead of using @Watch('value');
-            if (force || !dateHelpers.dateMatches(this.selectedDate, this.previousSelectedDate)) {
-                if (this.value) {
-                    this.inputsInOrder.forEach((input) => {
-                        input.classList.add(this.FIT_TO_VALUE);
-                    });
-                }
-                if (this.day && this.month && this.year && this.invalidDateText === "") {
-                    this.setValueAndEmitChange(this.selectedDate);
-                    this.notifyScreenReaderSelectedDate();
-                }
-                else if (!(this.selectedDate === null && this.previousSelectedDate === null) &&
-                    this.selectedDateInfoEl) {
-                    this.setValueAndEmitChange(null);
-                    this.selectedDateInfoEl.textContent = "";
-                }
-                this.previousSelectedDate = this.selectedDate;
-                if (!this.preventInputsUpdating) {
-                    this.updateInputValues(this.day, this.month, this.year);
-                }
-            }
-        };
-        this.slicePastedDate = (valueLength, datePart) => {
-            return datePart.length > valueLength
-                ? datePart.slice(0, valueLength)
-                : datePart;
-        };
-        this.isPastedStringDateValid = (value) => {
-            if (/\d+-\d+-\d+$/.test(value) ||
-                /\d+\/\d+\/\d+/.test(value) ||
-                /\d+\.\d+\.\d+/.test(value)) {
-                return true;
-            }
-            if (/[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}(?::[0-9]{2}(?:\.\d+)?)?Z/.test(value)) {
-                this.isZuluTime = true;
-                return true;
-            }
-            return false;
-        };
-        // Set value of each input to value of pasted date part
-        // Allows formats separated by '-' or '/'
-        this.handlePaste = (event) => {
-            var _a;
-            event.preventDefault();
-            const pastedValue = ((_a = event.clipboardData) === null || _a === void 0 ? void 0 : _a.getData("Text")) || "";
-            const isValidDate = this.isPastedStringDateValid(pastedValue);
-            this.setPastedValueAndValidation(isValidDate, pastedValue, event);
-        };
-        this.setDate = (date) => {
-            if (date === null || date === "" || date === undefined) {
-                if (this.day)
-                    this.day = "";
-                if (this.month)
-                    this.month = "";
-                if (this.year)
-                    this.year = "";
-                this.inputsInOrder.forEach((input) => {
-                    input.classList.remove(this.FIT_TO_VALUE);
-                    this.setPreventInput(input, false);
-                });
-                this.handleDateChange(true);
-            }
-            else {
-                if (dateHelpers.isDateOrEpoch(date)) {
-                    let newDate;
-                    if (typeof date === "string") {
-                        // Checking if epoch date time
-                        newDate = new Date(+date);
-                    }
-                    else {
-                        newDate = date;
-                    }
-                    this.day = dateHelpers.convertToDoubleDigits(newDate.getDate());
-                    this.month = dateHelpers.convertToDoubleDigits(newDate.getMonth() + 1);
-                    this.year = newDate.getFullYear().toString();
-                }
-                else if (typeof date === "string") {
-                    const defaultDateArray = dateHelpers.splitStringDate(date, this.dateFormat);
-                    this.selectedDate = new Date(Number(defaultDateArray[0]), Number(defaultDateArray[1]) - 1, Number(defaultDateArray[2]));
-                    this.year = defaultDateArray[0];
-                    this.month = defaultDateArray[1];
-                    this.day = defaultDateArray[2];
-                    this.setValueAndEmitChange(this.selectedDate);
-                }
-            }
-            this.setValidationMessage();
-        };
-        this.formatMinMax = (date) => {
-            let formattedDate;
-            const day = dateHelpers.convertToDoubleDigits(date.getDate());
-            const month = dateHelpers.convertToDoubleDigits(date.getMonth() + 1);
-            const year = date.getFullYear();
-            switch (this.dateFormat) {
-                case this.DEFAULT_DATE_FORMAT:
-                    formattedDate = `${day}/${month}/${year}`;
-                    break;
-                case "MM/DD/YYYY":
-                    formattedDate = `${month}/${day}/${year}`;
-                    break;
-                case "YYYY/MM/DD":
-                    formattedDate = `${year}/${month}/${day}`;
-                    break;
-            }
-            return formattedDate;
-        };
-        this.updateInputValues = (day, month, year) => {
-            if (this.dayInputEl && this.monthInputEl && this.yearInputEl) {
-                this.dayInputEl.value = day;
-                this.monthInputEl.value = month;
-                this.yearInputEl.value = year;
-            }
-        };
-        // Set value in state based on input
-        this.setInputValue = (input, clear = false) => {
-            const newValue = clear ? "" : input.value;
-            switch (input) {
-                case this.dayInputEl:
-                    this.day = newValue;
-                    break;
-                case this.monthInputEl:
-                    this.month = newValue;
-                    break;
-                case this.yearInputEl:
-                    if (this.year !== newValue) {
-                        this.year = newValue;
-                    }
-            }
-            this.setValidationMessage();
-        };
-        this.setValidationMessage = () => {
-            this.setDateValidity();
-            if (!helpers.isEmptyString(this.day) &&
-                !helpers.isEmptyString(this.month) &&
-                !helpers.isEmptyString(this.year)) {
-                // Check whether date actually exists
-                // (used https://www.hectane.com/blog/javascript-date-validation-with-leap-year)
-                this.selectedDate = this.convertToDate(this.year, this.month, this.day);
-                this.isValidDate =
-                    !!this.selectedDate && this.selectedDate.getDate() == +this.day;
-                this.isDisabledDate = this.isSelectedDateDisabled();
-                if (!this.isValidDate || this.isDisabledDate) {
-                    this.inputsInOrder.forEach((input) => input.setAttribute(this.ARIA_INVALID, "true"));
-                }
-                else {
-                    this.inputsInOrder.forEach((input) => input.removeAttribute(this.ARIA_INVALID));
-                }
-            }
-            else {
-                this.selectedDate = null;
-            }
-            if (!(this.isValidDay && this.isValidMonth && this.isValidDate)) {
-                this.invalidDateText = this.invalidDateMessage;
-            }
-            else if (this.isDisabledDate && this.selectedDate !== null) {
-                if (this.isBeforeMin) {
-                    if (this.disablePast) {
-                        this.invalidDateText = this.disablePastMessage;
-                    }
-                    else {
-                        this.invalidDateText = `Please enter a date after ${this.formatMinMax(this.minDate)}.`;
-                    }
-                }
-                else if (this.isAfterMax) {
-                    if (this.disableFuture) {
-                        this.invalidDateText = this.disableFutureMessage;
-                    }
-                    else {
-                        this.invalidDateText = `Please enter a date before ${this.formatMinMax(this.maxDate)}.`;
-                    }
-                }
-                else if (this.disableDays.length !== 0) {
-                    this.invalidDateText = this.disableDaysMessage;
-                }
-                else {
-                    if (this.disablePast) {
-                        this.invalidDateText = this.disablePastMessage;
-                    }
-                    if (this.disableFuture) {
-                        this.invalidDateText = this.disableFutureMessage;
-                    }
-                }
-            }
-            else {
-                this.invalidDateText = "";
-            }
-        };
-        // Set refs to the input elements in the order they are displayed (based on the dateFormat)
-        this.setInputsInOrder = () => {
-            var _a;
-            (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll("input").forEach((input) => this.inputsInOrder.push(input));
-        };
-        // Includes text usually added using aria-describedby
-        // (which doesn't work on input component container)
-        this.setAriaLabelledBy = () => {
-            var _a, _b, _c;
-            if (this.disabled &&
-                !helpers.isEmptyString((_a = this.inputCompContainerEl) === null || _a === void 0 ? void 0 : _a.getAttribute(this.ARIA_LABELLED_BY))) {
-                this.removeAriaLabelledBy();
-                return;
-            }
-            if (this.disabled) {
-                return;
-            }
-            const labelEl = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector("label");
-            const labelId = `${this.inputId}-label`;
-            if (labelEl !== null && labelEl !== undefined) {
-                labelEl.id = labelId;
-            }
-            const hasValidation = !helpers.isEmptyString(this.validationStatus) ||
-                !helpers.isEmptyString(this.invalidDateText);
-            const labelledBy = `${(_c = labelEl === null || labelEl === void 0 ? void 0 : labelEl.id) !== null && _c !== void 0 ? _c : ""} ${this.screenReaderInfoId} ${helpers.getInputDescribedByText(this.el, this.inputId, this.helperText !== "" && this.helperText !== this.defaultHelperText, hasValidation)} ${this.selectedDate ? this.selectedDateInfoId : ""} ${this.assistiveHintId}`;
-            this.inputCompContainerEl.setAttribute(this.ARIA_LABELLED_BY, labelledBy);
-        };
-        // Sets boolean for each input, used to limit the number of characters within each field (2 for day / month, 4 for year)
-        this.setPreventInput = (input, isPrevented) => {
-            switch (input) {
-                case this.dayInputEl:
-                    this.preventDayInput = isPrevented;
-                    break;
-                case this.monthInputEl:
-                    this.preventMonthInput = isPrevented;
-                    break;
-                case this.yearInputEl:
-                    this.preventYearInput = isPrevented;
-            }
-        };
-        // Get input based on letter representing each date part ("D", "M" or "Y")
-        // (retrieved from dateFormat)
-        this.getInputFromDatePart = (datePart) => {
-            const dayInput = (index.h("input", { class: "day-input", id: "day-input", ref: (el) => (this.dayInputEl = el), "aria-label": "day", placeholder: "DD", disabled: this.disabled, "aria-required": `${this.required}`, onPaste: this.handlePaste, inputmode: "number", pattern: "[0-9]*", onKeyDown: (event) => this.handleKeyDown(event, this.preventDayInput) }));
-            const monthInput = (index.h("input", { id: "month-input", class: "month-input", ref: (el) => (this.monthInputEl = el), "aria-label": "month", placeholder: "MM", disabled: this.disabled, "aria-required": `${this.required}`, onPaste: this.handlePaste, inputmode: "number", pattern: "[0-9]*", onKeyDown: (event) => this.handleKeyDown(event, this.preventMonthInput) }));
-            const yearInput = (index.h("input", { id: "year-input", class: "year-input", ref: (el) => (this.yearInputEl = el), "aria-label": "year", placeholder: "YYYY", maxLength: 4, disabled: this.disabled, "aria-required": `${this.required}`, onPaste: this.handlePaste, inputmode: "number", pattern: "[0-9]*", onKeyDown: (event) => this.handleKeyDown(event, this.preventYearInput) }));
-            let input;
-            switch (datePart) {
-                case "D":
-                    input = dayInput;
-                    break;
-                case "M":
-                    input = monthInput;
-                    break;
-                case "Y":
-                    input = yearInput;
-            }
-            return input;
-        };
-        // Get input elements in order of chosen date format
-        this.getInputsInOrder = () => {
-            const dateParts = this.dateFormat.split("/");
-            const inputsInOrder = [];
-            dateParts.forEach((part) => {
-                inputsInOrder.push(this.getInputFromDatePart(part.substring(0, 1)));
-            });
-            return inputsInOrder;
-        };
-        // To add to the end of assistive hint to make it clearer that each date part has its own input
-        // that can be changed individually
-        this.getDescOfInputsOrder = () => {
-            let description;
-            switch (this.dateFormat) {
-                case this.DEFAULT_DATE_FORMAT:
-                    description = "day, month, and year";
-                    break;
-                case "MM/DD/YYYY":
-                    description = "month, day, and year";
-                    break;
-                case "YYYY/MM/DD":
-                    description = "year, month, and day";
-            }
-            return description;
-        };
-        // Add 'required' or 'invalid data' to span used in aria-labelledby
-        // Many ARIA attributes aren't read out by screen reader when on the input component container
-        this.getScreenReaderInfo = (validationStatus) => {
-            let inputDescriptors = "";
-            if (this.required) {
-                inputDescriptors += "required";
-            }
-            if (validationStatus === helpers.IcInformationStatus.Error) {
-                inputDescriptors += " invalid data";
-            }
-            return inputDescriptors === "" ? "" : inputDescriptors + ", ";
-        };
-        // Prevent non-number characters being entered
-        // ('e' or '.' - which are usually allowed in <input type="number">)
-        // And limit the number of characters within each field (2 for day / month, 4 for year)
-        // (because 'maxlength' doesn't work on <input type="number">)
-        this.preventInput = (event, isInputPrevented) => {
-            const key = event.key;
-            const input = event.target;
-            let selectedString;
-            if (input) {
-                selectedString = input.value.substring(input.selectionStart || 0, input.selectionEnd || undefined);
-            }
-            if (key === "e" ||
-                key === "." ||
-                key === "-" ||
-                (event.key >= "0" &&
-                    event.key <= "9" &&
-                    isInputPrevented &&
-                    !selectedString)) {
-                event.preventDefault();
-            }
-        };
-        /**
-         * Get whether date has been disabled using disableFuture or disablePast prop, but always allow current day
-         * Consider using dateClamp and inDateRange
-         * @returns `boolean`
-         */
-        this.isSelectedDateDisabled = () => {
-            if (!this.selectedDate)
-                return false;
-            const currentDate = new Date();
-            const isNotToday = this.selectedDate.toDateString() !== currentDate.toDateString();
-            this.isAfterMax =
-                this.maxDate && this.selectedDate > this.maxDate && isNotToday;
-            this.isBeforeMin =
-                this.minDate && this.selectedDate < this.minDate && isNotToday;
-            return (this.isAfterMax ||
-                this.isBeforeMin ||
-                this.disableDays.includes(this.selectedDate.getDay()) ||
-                (((!!this.disablePast && this.selectedDate < currentDate) ||
-                    (!!this.disableFuture && this.selectedDate > currentDate)) &&
-                    isNotToday));
-        };
-        this.moveToNextInput = (currentInput) => {
-            var _a;
-            this.preventAutoFormatting = false;
-            (_a = this.inputsInOrder[this.inputsInOrder.findIndex((input) => input === currentInput) + 1]) === null || _a === void 0 ? void 0 : _a.focus();
-        };
-        this.moveToPreviousInput = (currentInput) => {
-            var _a;
-            this.preventAutoFormatting = false;
-            (_a = this.inputsInOrder[this.inputsInOrder.findIndex((input) => input === currentInput) - 1]) === null || _a === void 0 ? void 0 : _a.focus();
-        };
-        this.autocompleteInput = (input) => {
-            const inputValue = input.value;
-            if (this.yearInputEl && input === this.yearInputEl) {
-                // Autocomplete year as current millennium when fewer than 4 characters entered
-                const yearNumbers = ["2", "0", "0"];
-                let autocompletedInput = "";
-                if (inputValue) {
-                    yearNumbers.forEach((number, index) => {
-                        if (inputValue.length + index <= 3) {
-                            autocompletedInput += number;
-                        }
-                    });
-                    this.yearInputEl.value = `${autocompletedInput}${inputValue}`;
-                }
-            }
-            else if (inputValue.length === 1) {
-                // Autocomplete input as 2 characters (leading zero) when only 1 character entered (for day and month)
-                input.value = +inputValue === 0 ? "01" : `0${inputValue}`;
-            }
-            if (input.value) {
-                this.setInputValue(input);
-            }
-        };
-        this.convertToDate = (year, month, day) => {
-            if (!helpers.isEmptyString(year) && !helpers.isEmptyString(month) && !helpers.isEmptyString(day)) {
-                return new Date(+year, +month - 1, +day);
-            }
-            else {
-                return null;
-            }
-        };
-        this.handleHostBlur = () => {
-            this.removeLabelledBy = false;
-            this.icBlur.emit({ value: this.selectedDate });
-        };
-        this.handleHostFocus = () => {
-            var _a, _b;
-            if ((_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) === null || _b === void 0 ? void 0 : _b.id.match(/(day|month|year)-input$/)) {
-                this.removeLabelledBy = false;
-            }
-            else {
-                this.removeLabelledBy = true;
-            }
-            this.icFocus.emit({ value: this.selectedDate });
-        };
-        this.handleFormReset = () => {
-            // Get the initial value and populate day, month and year again.
-            this.setDate(this.initialValue);
-            this.setValidationMessage();
-            this.handleDateChange(false);
-        };
-        this.getAriaLabel = (input) => input.getAttribute(this.ARIA_LABEL);
-        this.notifyScreenReaderArrowKeys = (input) => {
-            var _a;
-            const liveRegion = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("#live-region");
-            const ariaLabel = this.getAriaLabel(input);
-            if (liveRegion && input.value && ariaLabel) {
-                let announcement = "";
-                if (input === this.monthInputEl &&
-                    !!helpers.IcDateInputMonths[+input.value - 1]) {
-                    announcement = `${input.value} - ${helpers.IcDateInputMonths[+input.value - 1]}, ${ariaLabel}`;
-                }
-                if (input === this.dayInputEl || input === this.yearInputEl) {
-                    announcement = `${input.value}, ${ariaLabel}`;
-                }
-                liveRegion.textContent = announcement;
-            }
-        };
-        this.notifyScreenReaderInput = (input, liveRegion) => {
-            const ariaLabel = this.getAriaLabel(input);
-            const value = input.value;
-            if (ariaLabel && value) {
-                let announcement = "";
-                const monthValue = helpers.IcDateInputMonths[+value - 1];
-                if (input === this.monthInputEl &&
-                    !!monthValue &&
-                    this.isValidMonth &&
-                    value.length === 2) {
-                    announcement = `${value} - ${monthValue}`;
-                }
-                else if ((input === this.dayInputEl && this.isValidDay && value.length === 2) ||
-                    (input === this.yearInputEl && value.length === 4)) {
-                    announcement = value;
-                }
-                liveRegion.textContent = `${announcement}, ${ariaLabel}`;
-            }
-        };
-        this.setFitToValueStyling = (input) => {
-            if (input.value) {
-                input.classList.add(this.FIT_TO_VALUE);
-            }
-            else {
-                input.classList.remove(this.FIT_TO_VALUE);
-            }
-        };
-        this.setAriaInvalid = (validDay, validMonth, validDate, disabledDate) => {
-            var _a, _b;
-            if (this.inputsInOrder.length) {
-                this.inputsInOrder.forEach((input) => {
-                    input.removeAttribute(this.ARIA_INVALID);
-                });
-                if (!validDay) {
-                    (_a = this.dayInputEl) === null || _a === void 0 ? void 0 : _a.setAttribute(this.ARIA_INVALID, "true");
-                }
-                if (!validMonth) {
-                    (_b = this.monthInputEl) === null || _b === void 0 ? void 0 : _b.setAttribute(this.ARIA_INVALID, "true");
-                }
-                if (!validDate || disabledDate) {
-                    this.inputsInOrder.forEach((input) => {
-                        input.setAttribute(this.ARIA_INVALID, "true");
-                    });
-                }
-            }
-        };
-        this.handleClear = () => {
-            this.clearInput = true;
-            this.inputsInOrder.forEach((input) => {
-                input.classList.remove(this.FIT_TO_VALUE);
-                this.setInputValue(input, true);
-                this.setPreventInput(input, false);
-            });
-            this.clearInput = false;
-            this.preventInputsUpdating = false;
-            this.setValidationMessage();
-            this.handleDateChange(true);
-            this.inputsInOrder[0].focus();
-        };
-        this.handleCalendarOpen = (ev) => {
-            var _a, _b, _c, _d, _e, _f;
-            ev.stopImmediatePropagation();
-            (_c = (_b = (_a = this.calendarButtonEl) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector("ic-tooltip")) === null || _c === void 0 ? void 0 : _c.displayTooltip(false);
-            this.calendarButtonClicked.emit({ value: this.selectedDate });
-            (_f = (_e = (_d = this.calendarButtonEl) === null || _d === void 0 ? void 0 : _d.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector("ic-tooltip")) === null || _f === void 0 ? void 0 : _f.displayTooltip(false);
-            this.preventInputsUpdating = false;
-            this.calendarIsOpen = true;
-        };
-        this.setValueAndEmitChange = (value) => {
-            if (!dateHelpers.dateMatches(this.value ? new Date(this.value) : null, value)) {
-                this.emitIcChange(value);
-                this.value = value;
-            }
-        };
-        this.handleCalendarFocus = () => {
-            this.calendarFocused = true;
-            if (this.calendarIsOpen) {
-                // focus event triggered by closing calendar dialog so inputs should update
-                this.preventInputsUpdating = false;
-                this.calendarIsOpen = false;
-            }
-            else {
-                this.preventInputsUpdating = true;
-            }
-        };
-        this.handleCalendarBlur = () => {
-            this.calendarFocused = false;
-            this.preventInputsUpdating = true;
-        };
-        this.handleClearFocus = () => {
-            this.removeLabelledBy = true;
-            this.preventInputsUpdating = true;
-            this.clearButtonFocused = true;
-        };
-        this.handleClearBlur = (ev) => {
-            var _a;
-            this.clearButtonFocused = false;
-            this.preventInputsUpdating = true;
-            if ((_a = ev.relatedTarget) === null || _a === void 0 ? void 0 : _a.id.match(/(day|year)-input$/)) {
-                this.removeLabelledBy = false;
-                return;
-            }
-            this.removeLabelledBy = true;
-        };
-        this.emitIcChange = (d) => {
-            this.selectedDate = d;
-            if (!dateHelpers.dateMatches(this.selectedDate, d) ||
-                this.day !== null ||
-                this.month !== null ||
-                this.year !== null) {
-                let UTCDate = null;
-                if (d !== null) {
-                    UTCDate = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
-                }
-                this.icChange.emit({
-                    value: d,
-                    dateObject: {
-                        day: this.day === "" ? null : this.day,
-                        month: this.month === "" ? null : this.month,
-                        year: this.year === "" ? null : this.year,
-                    },
-                    utcValue: UTCDate,
-                });
-            }
-        };
-    }
-    watchInputHandler() {
-        if (this.emitDatePartChange &&
-            !this.externalSetDate &&
-            !this.clearInput &&
-            !(this.day && this.month && this.year) &&
-            this.selectedDate === null) {
-            this.emitIcChange(this.selectedDate);
-        }
-    }
-    watchDisabledHandler() {
-        helpers.removeDisabledFalse(this.disabled, this.el);
-    }
-    watchDisableFutureHandler() {
-        this.watchMaxHandler();
-    }
-    watchDisablePastHandler() {
-        this.watchMinHandler();
-    }
-    watchMaxHandler() {
-        if (this.disableFuture) {
-            this.maxDate = new Date();
-        }
-        else {
-            this.maxDate = dateHelpers.createDate(this.max, this.dateFormat);
-        }
-    }
-    watchMinHandler() {
-        if (this.disablePast) {
-            this.minDate = new Date();
-        }
-        else {
-            this.minDate = dateHelpers.createDate(this.min, this.dateFormat);
-        }
-    }
-    watchRequiredHandler() {
-        var _a, _b;
-        // Prevent asterisk being read out after the label by screen reader (by applying aria-hidden)
-        // Needed because label is included in 'aria-labelledby' instead of using 'aria-label'
-        const labelEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("label");
-        if (this.required) {
-            const asteriskSpan = document.createElement("span");
-            asteriskSpan.setAttribute("id", "asterisk-span");
-            asteriskSpan.setAttribute("aria-hidden", "true");
-            asteriskSpan.textContent = " *";
-            labelEl === null || labelEl === void 0 ? void 0 : labelEl.appendChild(asteriskSpan);
-        }
-        else {
-            const asteriskSpan = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector("#asterisk-span");
-            if (asteriskSpan) {
-                asteriskSpan.remove();
-            }
-        }
-    }
-    disconnectedCallback() {
-        helpers.removeFormResetListener(this.el, this.handleFormReset);
-    }
-    componentWillLoad() {
-        this.defaultHelperText = `Use format ${this.dateFormat}`;
-        if (helpers.isEmptyString(this.helperText))
-            this.helperText = this.defaultHelperText;
-        this.watchMinHandler();
-        this.watchMaxHandler();
-        if (this.value) {
-            this.externalSetDate = true;
-            this.setDate(this.value);
-        }
-        this.screenReaderInfoId = `${this.inputId}-screen-reader-info`;
-        this.assistiveHintId = `${this.inputId}-assistive-hint`;
-        this.selectedDateInfoId = `${this.inputId}-selected-date-info`;
-        helpers.addFormResetListener(this.el, this.handleFormReset);
-        helpers.removeDisabledFalse(this.disabled, this.el);
-    }
-    componentDidLoad() {
-        this.setInputsInOrder();
-        helpers.onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Date Input");
-        if (this.value) {
-            this.updateInputValues(this.day, this.month, this.year);
-            this.inputsInOrder.forEach((input) => {
-                input.classList.add(this.FIT_TO_VALUE);
-            });
-        }
-        this.setAriaInvalid(this.isValidDay, this.isValidMonth, this.isValidDate, this.isDisabledDate);
-        if (this.value) {
-            this.notifyScreenReaderSelectedDate();
-        }
-        this.inputsInOrder.forEach((input) => {
-            input.addEventListener("input", this.handleInput);
-            input.addEventListener("focus", this.handleFocus);
-            input.addEventListener("blur", this.handleBlur);
-        });
-        this.watchRequiredHandler();
-    }
-    componentWillUpdate() {
-        if (helpers.isEmptyString(this.helperText))
-            this.helperText = this.defaultHelperText;
-        if (!this.preventInputsUpdating)
-            this.setDate(this.value);
-        this.setAriaInvalid(this.isValidDay, this.isValidMonth, this.isValidDate, this.isDisabledDate);
-        this.handleDateChange(false);
-        this.preventInputsUpdating = false;
-    }
-    componentDidRender() {
-        if (this.removeLabelledBy) {
-            this.removeAriaLabelledBy();
-            return;
-        }
-        this.setAriaLabelledBy();
-    }
-    /**
-     * Returns the value as a Date object
-     * @returns Date
-     */
-    async getDate() {
-        return this.selectedDate;
-    }
-    /**
-     * @internal Sets focus on the calendar button.
-     */
-    async setCalendarFocus() {
-        if (this.calendarButtonEl) {
-            this.calendarButtonEl.focus();
-        }
-    }
-    /**
-     * @internal Used to pass disabledDays from parent component.
-     */
-    async setDisableDays(days) {
-        this.disableDays = days;
-    }
-    /**
-     * @internal Used to enable other components to invoke an IcChange event from the input.
-     */
-    async triggerIcChange(d) {
-        this.externalSetDate = true;
-        this.setDate(d);
-        this.emitIcChange(d);
-        this.externalSetDate = false;
-    }
-    removeAriaLabelledBy() {
-        this.inputCompContainerEl.removeAttribute(this.ARIA_LABELLED_BY);
-    }
-    setPastedValueAndValidation(isValidDate, pastedValue, event) {
-        switch (true) {
-            case isValidDate: {
-                const nextParsedValue = this.isZuluTime
-                    ? dateHelpers.extractDateFromZuluDateTime(pastedValue)
-                    : pastedValue;
-                const dateParts = nextParsedValue.split(/-|\/|\./);
-                this.inputsInOrder.forEach((input, index) => {
-                    input.classList.add(this.FIT_TO_VALUE);
-                    if (this.isZuluTime) {
-                        this.pasteZuluDateTime(dateParts, index);
-                    }
-                    else {
-                        let dateValue;
-                        if (input === this.dayInputEl || input === this.monthInputEl) {
-                            dateValue = this.slicePastedDate(2, dateParts[index]);
-                        }
-                        else {
-                            dateValue = this.slicePastedDate(4, dateParts[index]);
-                        }
-                        input.value = dateValue;
-                        this.setInputValue(input);
-                        this.autocompleteInput(input);
-                    }
-                });
-                this.isZuluTime = false;
-                break;
-            }
-            case (pastedValue.length === 1 ||
-                pastedValue.length === 2 ||
-                pastedValue.length === 4) &&
-                helpers.isNumeric(pastedValue):
-                if (this.checkSingleCopiedValueIsValid(event.target, pastedValue)) {
-                    // Check if copied value can be pasted into input
-                    this.setInputPasteValue(event.target, pastedValue);
-                    this.setInputValue(event.target);
-                }
-                else {
-                    this.displayPastedValidation(event);
-                }
-                break;
-            case pastedValue.length === 3 && helpers.isNumeric(pastedValue):
-                if (event.target !== this.yearInputEl) {
-                    this.displayPastedValidation(event);
-                }
-                else {
-                    this.setInputPasteValue(event.target, pastedValue);
-                    this.setInputValue(event.target);
-                }
-                break;
-            case pastedValue.length >= 5 && helpers.isNumeric(pastedValue):
-                this.displayPastedValidation(event);
-        }
-    }
-    pasteZuluDateTime(dateParts, index) {
-        // ['YYYY', 'MM', 'DD']
-        if (index === 0 && this.yearInputEl) {
-            const dateValue = this.slicePastedDate(4, dateParts[index]);
-            this.yearInputEl.value = dateValue;
-            this.setInputValue(this.yearInputEl);
-        }
-        else if (index === 1 && this.monthInputEl) {
-            // The month value is the second item in the array
-            const dateValue = this.slicePastedDate(2, dateParts[index]);
-            this.monthInputEl.value = dateValue;
-            this.setInputValue(this.monthInputEl);
-        }
-        else if (this.dayInputEl) {
-            const dateValue = this.slicePastedDate(2, dateParts[index]);
-            this.dayInputEl.value = dateValue;
-            this.setInputValue(this.dayInputEl);
-        }
-    }
-    displayPastedValidation(event) {
-        var _a;
-        if (((_a = this.invalidDateText) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-            this.previousInvalidDateTest = this.invalidDateText;
-        }
-        this.invalidDateText = `Please paste a valid ${this.getAriaLabel(event.target)}`;
-        this.validationStatus = helpers.IcInformationStatus.Error;
-        this.isPasteValidationDisplayed = true;
-    }
-    setPasteInvalidText() {
-        var _a;
-        if (this.isPasteValidationDisplayed) {
-            this.invalidDateText = (_a = this.previousInvalidDateTest) !== null && _a !== void 0 ? _a : "";
-            this.isPasteValidationDisplayed = false;
-            // This is to prevent setDate from triggering within componentWillUpdate
-            this.preventInputsUpdating = true;
-        }
-    }
-    notifyScreenReader(input, event) {
-        var _a;
-        const liveRegion = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("#live-region");
-        if (liveRegion) {
-            if (this.isKeyboardOrEvent(event)) {
-                this.notifyScreenReaderArrowKeys(input);
-            }
-            else if (Object.prototype.toString.call(event) === this.INPUT_EVENT_OBJECT_STRING) {
-                this.notifyScreenReaderInput(input, liveRegion);
-            }
-        }
-    }
-    render() {
-        const { inputId, label, disabled, helperText, hideHelperText, hideLabel, showClearButton, showCalendarButton, size, theme, validationAriaLive, } = this;
-        const hasCustomValidation = !helpers.isEmptyString(this.validationStatus);
-        const validationStatus = hasCustomValidation
-            ? this.validationStatus
-            : !helpers.isEmptyString(this.invalidDateText)
-                ? helpers.IcInformationStatus.Error
-                : "";
-        const assistiveHint = `Type or use the up and down arrow keys to change the values for the ${this.getDescOfInputsOrder()}.`;
-        helpers.renderHiddenInput(true, this.el, this.name, this.convertToDate(this.year, this.month, this.day), this.disabled);
-        return (index.h(index.Host, { key: 'c076a1712793e36c9fd904692d64f44297a41d58', class: {
-                [`ic-theme-${theme}`]: theme !== "inherit",
-                [`ic-date-input-disabled`]: disabled,
-            }, onBlur: this.handleHostBlur, onFocus: this.handleHostFocus }, index.h("ic-input-container", { key: 'a706d073ade2f587fe661e8eedd533fcac2eb8d2', disabled: disabled }, !(hideLabel && hideHelperText) && (index.h("ic-input-label", { key: '2df45206bb1dec22719805dd75419d99ce0321dd', for: inputId, label: label, hideLabel: hideLabel, helperText: !hideHelperText ? helperText : "", disabled: disabled }, index.h("slot", { key: '8f5458681b9ea085c67ff7c1022f5512181dd37a', name: "helper-text", slot: "helper-text" }))), index.h("span", { key: 'cc1ced7c0cf7e46b0792ad06995b15273126c040', id: this.screenReaderInfoId, class: "sr-only", "aria-hidden": "true" }, this.getScreenReaderInfo(validationStatus), hideLabel && `${label}\n`, hideHelperText && `${helperText}\n`, `${this.defaultHelperText}.`), index.h("span", { key: '53cc25e4eccf56a7a64a7b28d207c98e78abeec7', id: this.assistiveHintId, class: "sr-only", "aria-hidden": "true" }, assistiveHint), index.h("span", { key: '652f13800a903a2f92451abe2abfbbf63f72fd73', id: "live-region", "aria-live": "assertive", class: "sr-only" }), index.h("ic-input-component-container", { key: 'e2ec60bbf7e7f39e79de567ef30642f0e175b1c6', id: inputId, ref: (el) => (this.inputCompContainerEl = el), disabled: disabled, validationStatus: validationStatus, size: size, role: "group", class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, index.h("div", { key: '891bb0f4b524a7dae73ea3eacbaacd460ceab542', class: "input-container" }, index.h("div", { key: '476965e1b07bc962741ffe0f74661d6e4631d576', class: "date-inputs" }, this.getInputsInOrder()[0], "/", this.getInputsInOrder()[1], "/", this.getInputsInOrder()[2]), index.h("div", { key: '752c0fd5df110547b8161b1cde61edb690c6c7fa', class: "action-buttons" }, showClearButton && (index.h("ic-button", { key: 'cf5c9fe8b8348071a764c57df98ed7d217674735', id: "clear-button", "aria-label": "Clear input", class: {
-                ["clear-button"]: true,
-                ["hidden"]: helpers.isEmptyString(this.day) &&
-                    helpers.isEmptyString(this.month) &&
-                    helpers.isEmptyString(this.year),
-            }, disabled: this.disabled, innerHTML: clearIcon.Clear, onClick: this.handleClear, onFocus: this.handleClearFocus, onBlur: this.handleClearBlur, variant: "icon-tertiary", theme: this.clearButtonFocused ? "light" : "dark", size: size })), showCalendarButton && (index.h("div", { key: '6e018c3cfb028691aa57c88df2f7d29e0adb1f78', class: "show-calendar-button-wrapper" }, index.h("div", { key: 'dcd83751b62337a77a4471489c7ba38d43cd45a6', class: { divider: true, [size]: true } }), index.h("ic-button", { key: '5b917499227bc7e7c1d3dd5b01f0040f10c7adc1', id: "calendar-button", ref: (el) => (this.calendarButtonEl = el), "aria-label": "Display calendar", "aria-haspopup": "dialog", class: "calendar-button", disabled: this.disabled, innerHTML: Calendar, onClick: this.handleCalendarOpen, variant: "icon-tertiary", size: size, onFocus: this.handleCalendarFocus, onBlur: this.handleCalendarBlur, theme: this.calendarFocused ? "light" : "dark" })))))), index.h("span", { key: 'a1d4b4da8df73e766ba1096f193142a95af941d8', id: this.selectedDateInfoId, class: "sr-only", "aria-live": "polite" }, index.h("span", { key: '92e0f6e22dca3f9c5f0f05dcf1a6e5fa43e2e05a', ref: (el) => (this.selectedDateInfoEl = el), role: "status" })), index.h("ic-input-validation", { key: '3d38e48eb14e60ad40639bb7ee44a1307585c4e3', status: validationStatus, message: hasCustomValidation ? this.validationText : this.invalidDateText, for: inputId, ariaLiveMode: validationAriaLive }))));
-    }
-    static get delegatesFocus() { return true; }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "day": ["watchInputHandler"],
-        "month": ["watchInputHandler"],
-        "year": ["watchInputHandler"],
-        "disabled": ["watchDisabledHandler"],
-        "disableFuture": ["watchDisableFutureHandler"],
-        "disablePast": ["watchDisablePastHandler"],
-        "max": ["watchMaxHandler"],
-        "min": ["watchMinHandler"],
-        "required": ["watchRequiredHandler"]
-    }; }
-};
-DateInput.style = IcDateInputStyle0;
-
-exports.ic_date_input = DateInput;
-
-//# sourceMappingURL=ic-date-input.cjs.entry.js.map