@ukic/canary-web-components 3.0.0-canary.13 → 3.0.0-canary.15

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-163fe708.js';
-import { b as isEmptyString, s as stringEnumToArray, t as getInputDescribedByText, r as removeDisabledFalse, u as removeFormResetListener, v as addFormResetListener, o as onComponentRequiredPropUndefined, w as isNumeric, x as IcInformationStatus, y as renderHiddenInput, k as IcDayNames, l as IcDateInputMonths } from './helpers-4e38ba2b.js';
-import { b as dateMatches, i as isDateOrEpoch, j as convertToDoubleDigits, s as splitStringDate, h as createDate, k as extractDateFromZuluDateTime } from './date-helpers-0e5e32a7.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a7a720e7.js';
+import { b as isEmptyString, s as stringEnumToArray, v as getInputDescribedByText, r as removeDisabledFalse, w as removeFormResetListener, x as addFormResetListener, o as onComponentRequiredPropUndefined, y as isNumeric, z as IcInformationStatus, A as renderHiddenInput, k as IcDayNames, l as IcDateInputMonths } from './helpers-ddc2008a.js';
+import { b as dateMatches, i as isDateOrEpoch, j as convertToDoubleDigits, s as splitStringDate, h as createDate, k as extractDateFromZuluDateTime } from './date-helpers-3b8c39ab.js';
 
 const Clear = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M15.8327 5.34199L14.6577 4.16699L9.99935 8.82533L5.34102 4.16699L4.16602 5.34199L8.82435 10.0003L4.16602 14.6587L5.34102 15.8337L9.99935 11.1753L14.6577 15.8337L15.8327 14.6587L11.1743 10.0003L15.8327 5.34199Z" fill="currentColor"/>
@@ -22,6 +22,7 @@ const DateInput = class {
         this.icBlur = createEvent(this, "icBlur", 7);
         this.icChange = createEvent(this, "icChange", 7);
         this.icFocus = 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";
@@ -41,20 +42,24 @@ const DateInput = class {
         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.day = "";
-        this.month = "";
-        this.year = "";
+        this.externalSetDate = false;
+        this.clearInput = 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.
          */
-        // eslint-disable-next-line sonarjs/no-duplicate-string
-        this.dateFormat = "DD/MM/YYYY";
+        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.
          */
@@ -146,9 +151,11 @@ const DateInput = class {
          */
         this.validationText = "";
         this.setInputPasteValue = (input, pastedValue) => {
-            const inputEl = input;
-            inputEl.value = pastedValue;
-            inputEl.classList.add(this.FIT_TO_VALUE);
+            if (input) {
+                const inputEl = input;
+                inputEl.value = pastedValue;
+                inputEl.classList.add(this.FIT_TO_VALUE);
+            }
         };
         this.checkSingleCopiedValueIsValid = (input, pastedValue) => {
             let isValid = false;
@@ -163,9 +170,6 @@ const DateInput = class {
                 case this.yearInputEl:
                     isValid = true;
                     break;
-                default:
-                    isValid = false;
-                    break;
             }
             return isValid;
         };
@@ -307,8 +311,10 @@ const DateInput = class {
         };
         this.handleBlur = (event) => {
             const input = event.target;
-            this.setPasteInvalidText();
-            this.autocompleteInput(input);
+            if (input) {
+                this.setPasteInvalidText();
+                this.autocompleteInput(input);
+            }
         };
         this.handleLeftRightArrowKeyPress = (input, key) => {
             if (key === "arrowright") {
@@ -320,13 +326,15 @@ const DateInput = class {
             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()}`;
+            if (this.selectedDate && this.selectedDateInfoEl) {
+                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;
+            let maxValue = 9999;
             switch (input) {
                 case this.dayInputEl:
                     maxValue = this.MAX_DAY;
@@ -369,22 +377,18 @@ const DateInput = class {
             else {
                 if (event.key === "ArrowDown") {
                     event.preventDefault();
-                    if (input === this.yearInputEl) {
-                        input.value = new Date().getFullYear().toString();
-                    }
-                    else {
-                        input.value = maxValue.toString();
-                    }
+                    input.value =
+                        input === this.yearInputEl
+                            ? new Date().getFullYear().toString()
+                            : 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}`;
-                    }
+                    input.value =
+                        input === this.yearInputEl
+                            ? new Date().getFullYear().toString()
+                            : `0${minValue}`;
                     this.notifyScreenReader(input, event);
                 }
             }
@@ -404,7 +408,8 @@ const DateInput = class {
                     this.setValueAndEmitChange(this.selectedDate);
                     this.notifyScreenReaderSelectedDate();
                 }
-                else if (!(this.selectedDate === null && this.previousSelectedDate === null)) {
+                else if (!(this.selectedDate === null && this.previousSelectedDate === null) &&
+                    this.selectedDateInfoEl) {
                     this.setValueAndEmitChange(null);
                     this.selectedDateInfoEl.textContent = "";
                 }
@@ -434,16 +439,20 @@ const DateInput = class {
         // 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 = event.clipboardData.getData("Text");
+            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) {
-                this.day = null;
-                this.month = null;
-                this.year = null;
+                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);
@@ -466,9 +475,11 @@ const DateInput = class {
                 }
                 else if (typeof date === "string") {
                     const defaultDateArray = 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();
@@ -479,7 +490,7 @@ const DateInput = class {
             const month = convertToDoubleDigits(date.getMonth() + 1);
             const year = date.getFullYear();
             switch (this.dateFormat) {
-                case "DD/MM/YYYY":
+                case this.DEFAULT_DATE_FORMAT:
                     formattedDate = `${day}/${month}/${year}`;
                     break;
                 case "MM/DD/YYYY":
@@ -492,9 +503,11 @@ const DateInput = class {
             return formattedDate;
         };
         this.updateInputValues = (day, month, year) => {
-            this.dayInputEl.value = day;
-            this.monthInputEl.value = month;
-            this.yearInputEl.value = 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) => {
@@ -522,7 +535,9 @@ const DateInput = class {
                 // (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.selectedDate &&
+                        +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"));
@@ -572,13 +587,13 @@ const DateInput = class {
         };
         // 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));
+            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;
+            var _a, _b, _c;
             if (this.disabled &&
                 !isEmptyString((_a = this.inputCompContainerEl) === null || _a === void 0 ? void 0 : _a.getAttribute(this.ARIA_LABELLED_BY))) {
                 this.removeAriaLabelledBy();
@@ -587,14 +602,14 @@ const DateInput = class {
             if (this.disabled) {
                 return;
             }
-            const labelEl = this.el.shadowRoot.querySelector("label");
+            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 = !isEmptyString(this.validationStatus) ||
                 !isEmptyString(this.invalidDateText);
-            const labelledBy = `${(_b = labelEl === null || labelEl === void 0 ? void 0 : labelEl.id) !== null && _b !== void 0 ? _b : ""} ${this.screenReaderInfoId} ${getInputDescribedByText(this.inputId, this.helperText !== "" && this.helperText !== this.defaultHelperText, hasValidation)} ${this.selectedDate ? this.selectedDateInfoId : ""} ${this.assistiveHintId}`;
+            const labelledBy = `${(_c = labelEl === null || labelEl === void 0 ? void 0 : labelEl.id) !== null && _c !== void 0 ? _c : ""} ${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)
@@ -643,7 +658,7 @@ const DateInput = class {
         this.getDescOfInputsOrder = () => {
             let description;
             switch (this.dateFormat) {
-                case "DD/MM/YYYY":
+                case this.DEFAULT_DATE_FORMAT:
                     description = "day, month, and year";
                     break;
                 case "MM/DD/YYYY":
@@ -675,7 +690,7 @@ const DateInput = class {
             const input = event.target;
             let selectedString;
             if (input) {
-                selectedString = input.value.substring(input.selectionStart, input.selectionEnd);
+                selectedString = input.value.substring(input.selectionStart || 0, input.selectionEnd || undefined);
             }
             if (key === "e" ||
                 key === "." ||
@@ -687,81 +702,60 @@ const DateInput = class {
                 event.preventDefault();
             }
         };
-        // Get whether date has been disabled using disableFuture or disablePast prop, but always allow current day
-        // Consider using dateClamp and inDateRange
+        /**
+         * 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();
-            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.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) => {
-            const currentInputPos = this.inputsInOrder.findIndex((input) => input === currentInput);
-            const nextInput = this.inputsInOrder[currentInputPos + 1];
+            var _a;
             this.preventAutoFormatting = false;
-            if (nextInput) {
-                nextInput.focus();
-            }
+            (_a = this.inputsInOrder[this.inputsInOrder.findIndex((input) => input === currentInput) + 1]) === null || _a === void 0 ? void 0 : _a.focus();
         };
         this.moveToPreviousInput = (currentInput) => {
-            const currentInputPos = this.inputsInOrder.findIndex((input) => input === currentInput);
+            var _a;
             this.preventAutoFormatting = false;
-            if (this.inputsInOrder[currentInputPos - 1]) {
-                this.inputsInOrder[currentInputPos - 1].focus();
-            }
+            (_a = this.inputsInOrder[this.inputsInOrder.findIndex((input) => input === currentInput) - 1]) === null || _a === void 0 ? void 0 : _a.focus();
         };
         this.autocompleteInput = (input) => {
-            if (input === this.yearInputEl) {
-                this.autocompleteYear();
+            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 {
-                const inputValue = input.value;
+            else if (inputValue.length === 1) {
                 // 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}`;
-                    }
-                }
+                input.value = +inputValue === 0 ? "01" : `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);
@@ -775,8 +769,8 @@ const DateInput = class {
             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$/)) {
+            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 {
@@ -790,14 +784,13 @@ const DateInput = class {
             this.setValidationMessage();
             this.handleDateChange(false);
         };
-        this.getAriaLabel = (input) => {
-            return input.getAttribute(this.ARIA_LABEL);
-        };
+        this.getAriaLabel = (input) => input.getAttribute(this.ARIA_LABEL);
         this.notifyScreenReaderArrowKeys = (input) => {
-            const liveRegion = this.el.shadowRoot.querySelector("#live-region");
-            let announcement = "";
+            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) {
+            if (liveRegion && input.value && ariaLabel) {
+                let announcement = "";
                 if (input === this.monthInputEl &&
                     !!IcDateInputMonths[+input.value - 1]) {
                     announcement = `${input.value} - ${IcDateInputMonths[+input.value - 1]}, ${ariaLabel}`;
@@ -809,32 +802,23 @@ const DateInput = class {
             }
         };
         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}`;
+            const value = input.value;
+            if (ariaLabel && value) {
+                let announcement = "";
+                const monthValue = IcDateInputMonths[+value - 1];
+                if (input === this.monthInputEl &&
+                    !!monthValue &&
+                    this.isValidMonth &&
+                    value.length === 2) {
+                    announcement = `${value} - ${monthValue}`;
                 }
-                else {
-                    announcement = "";
+                else if ((input === this.dayInputEl && this.isValidDay && value.length === 2) ||
+                    (input === this.yearInputEl && value.length === 4)) {
+                    announcement = value;
                 }
+                liveRegion.textContent = `${announcement}, ${ariaLabel}`;
             }
-            liveRegion.textContent = announcement;
         };
         this.setFitToValueStyling = (input) => {
             if (input.value) {
@@ -845,15 +829,16 @@ const DateInput = class {
             }
         };
         this.setAriaInvalid = (validDay, validMonth, validDate, disabledDate) => {
+            var _a, _b;
             if (this.inputsInOrder.length) {
                 this.inputsInOrder.forEach((input) => {
                     input.removeAttribute(this.ARIA_INVALID);
                 });
                 if (!validDay) {
-                    this.dayInputEl.setAttribute(this.ARIA_INVALID, "true");
+                    (_a = this.dayInputEl) === null || _a === void 0 ? void 0 : _a.setAttribute(this.ARIA_INVALID, "true");
                 }
                 if (!validMonth) {
-                    this.monthInputEl.setAttribute(this.ARIA_INVALID, "true");
+                    (_b = this.monthInputEl) === null || _b === void 0 ? void 0 : _b.setAttribute(this.ARIA_INVALID, "true");
                 }
                 if (!validDate || disabledDate) {
                     this.inputsInOrder.forEach((input) => {
@@ -863,26 +848,28 @@ const DateInput = class {
             }
         };
         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.isDateSetFromKeyboardEvent = false;
             this.setValidationMessage();
             this.handleDateChange(true);
             this.inputsInOrder[0].focus();
         };
         this.handleCalendarOpen = (ev) => {
-            var _a, _b;
+            var _a, _b, _c, _d, _e, _f;
             ev.stopImmediatePropagation();
-            (_a = this.calendarButtonEl) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector("ic-tooltip").displayTooltip(false);
+            (_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 });
-            (_b = this.calendarButtonEl) === null || _b === void 0 ? void 0 : _b.shadowRoot.querySelector("ic-tooltip").displayTooltip(false);
+            (_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.isDateSetFromKeyboardEvent = false;
         };
         this.setValueAndEmitChange = (value) => {
-            if (!dateMatches(new Date(this.value), value)) {
+            if (!dateMatches(this.value ? new Date(this.value) : null, value)) {
                 this.emitIcChange(value);
                 this.value = value;
             }
@@ -907,13 +894,36 @@ const DateInput = class {
             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.selectedDate = d;
+            if (!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() {
         removeDisabledFalse(this.disabled, this.el);
     }
@@ -940,9 +950,10 @@ const DateInput = class {
         }
     }
     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 = this.el.shadowRoot.querySelector("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");
@@ -951,7 +962,7 @@ const DateInput = class {
             labelEl === null || labelEl === void 0 ? void 0 : labelEl.appendChild(asteriskSpan);
         }
         else {
-            const asteriskSpan = this.el.shadowRoot.querySelector("#asterisk-span");
+            const asteriskSpan = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector("#asterisk-span");
             if (asteriskSpan) {
                 asteriskSpan.remove();
             }
@@ -967,11 +978,8 @@ const DateInput = class {
         this.watchMinHandler();
         this.watchMaxHandler();
         if (this.value) {
+            this.externalSetDate = true;
             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`;
@@ -1040,7 +1048,10 @@ const DateInput = class {
      * @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);
@@ -1101,18 +1112,18 @@ const DateInput = class {
     }
     pasteZuluDateTime(dateParts, index) {
         // ['YYYY', 'MM', 'DD']
-        if (index === 0) {
+        if (index === 0 && this.yearInputEl) {
             const dateValue = this.slicePastedDate(4, dateParts[index]);
             this.yearInputEl.value = dateValue;
             this.setInputValue(this.yearInputEl);
         }
-        else if (index === 1) {
+        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 {
+        else if (this.dayInputEl) {
             const dateValue = this.slicePastedDate(2, dateParts[index]);
             this.dayInputEl.value = dateValue;
             this.setInputValue(this.dayInputEl);
@@ -1137,7 +1148,8 @@ const DateInput = class {
         }
     }
     notifyScreenReader(input, event) {
-        const liveRegion = this.el.shadowRoot.querySelector("#live-region");
+        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);
@@ -1157,19 +1169,22 @@ const DateInput = class {
                 : "";
         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, { key: '08b8f65934b55fd86e9abe2fad8f232af68b3754', class: {
+        return (h(Host, { key: '5e9f71b2a1c5dbc55f615ea389121c300ed68fd4', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 [`ic-date-input-disabled`]: disabled,
-            }, onBlur: this.handleHostBlur, onFocus: this.handleHostFocus }, h("ic-input-container", { key: '285bb0e746630a08c3e4e29bc8a24f5d97b4b4e5', disabled: disabled }, !(hideLabel && hideHelperText) && (h("ic-input-label", { key: 'f1facdecd84445133a67c87a2d6e5ba4dfbfbceb', for: inputId, label: label, hideLabel: hideLabel, helperText: !hideHelperText ? helperText : "", disabled: disabled })), h("span", { key: '25ae3fae1dc4f2862ec14e348138adfadf0dc3c7', id: this.screenReaderInfoId, class: "sr-only", "aria-hidden": "true" }, this.getScreenReaderInfo(validationStatus), hideLabel && `${label}\n`, hideHelperText && `${helperText}\n`, `${this.defaultHelperText}.`), h("span", { key: 'd3c34084b3b846795063f799720b7d918f10f5a9', id: this.assistiveHintId, class: "sr-only", "aria-hidden": "true" }, assistiveHint), h("span", { key: '37ecdc3ee7ced98dac405591cb106e1a03add976', id: "live-region", "aria-live": "assertive", class: "sr-only" }), h("ic-input-component-container", { key: 'cfcfae24a49a49e0f2a878a7c024818e1cce125a', id: inputId, ref: (el) => (this.inputCompContainerEl = el), disabled: disabled, validationStatus: validationStatus, size: size, role: "group", class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, h("div", { key: '4d090542f2fb72fae8cda326af45278552707cd6', class: "input-container" }, h("div", { key: '4eef737c2a8d25353a41ea31b2e8bc21ec55ff9a', class: "date-inputs" }, this.getInputsInOrder()[0], "/", this.getInputsInOrder()[1], "/", this.getInputsInOrder()[2]), h("div", { key: 'bc1cb74a96f75b4018f2e39f8712a870f5f4bf6e', class: "action-buttons" }, showClearButton && (h("ic-button", { key: 'e58854f9e3b74a7f46a253a8421c8c9775047069', id: "clear-button", "aria-label": "Clear input", class: {
+            }, onBlur: this.handleHostBlur, onFocus: this.handleHostFocus }, h("ic-input-container", { key: '64fe93a68d17f2b84e296efb2d9602876628d972', disabled: disabled }, !(hideLabel && hideHelperText) && (h("ic-input-label", { key: '69bb1722d84504483a7691fe713c86639025765f', for: inputId, label: label, hideLabel: hideLabel, helperText: !hideHelperText ? helperText : "", disabled: disabled })), h("span", { key: '3ef289406284d077b47db67d8b5d45919fdaad0e', id: this.screenReaderInfoId, class: "sr-only", "aria-hidden": "true" }, this.getScreenReaderInfo(validationStatus), hideLabel && `${label}\n`, hideHelperText && `${helperText}\n`, `${this.defaultHelperText}.`), h("span", { key: '20222a2534cf00d15fe40610412babb302fc0e7a', id: this.assistiveHintId, class: "sr-only", "aria-hidden": "true" }, assistiveHint), h("span", { key: '5d4346a0fec1b1ee9d22057b7f2f1aa3b98f9693', id: "live-region", "aria-live": "assertive", class: "sr-only" }), h("ic-input-component-container", { key: '1a2adcdeaf2e5cb437f77dd76054dcd872937bfc', id: inputId, ref: (el) => (this.inputCompContainerEl = el), disabled: disabled, validationStatus: validationStatus, size: size, role: "group", class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, h("div", { key: 'ad5c42cec33b39329bde1975b094f3f13e974191', class: "input-container" }, h("div", { key: '5bc9b871e605562b50306d5bb6bcc078892bafc5', class: "date-inputs" }, this.getInputsInOrder()[0], "/", this.getInputsInOrder()[1], "/", this.getInputsInOrder()[2]), h("div", { key: '6efb1d64b2eeab1c3da78d1e0b95f3df987fedcc', class: "action-buttons" }, showClearButton && (h("ic-button", { key: '39a73d58a6814d3fac7425050291e3f2f821cd72', 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-tertiary", theme: this.clearButtonFocused ? "light" : "dark", size: size })), showCalendarButton && (h("div", { key: 'd7e3f4e87e69d949a1c9e56230ae78b22dfd23f8', class: "show-calendar-button-wrapper" }, h("div", { key: '21bcae037bcb6d81bd89ba1eb51f279f048fa2df', class: { divider: true, [size]: true } }), h("ic-button", { key: '3bad8c476367e3aac94092078fe9d8aa52f396ff', 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" })))))), h("span", { key: 'c11a9f0fc1eae4efc3a3a29ebdd1eb65a6de7630', id: this.selectedDateInfoId, class: "sr-only", "aria-live": "polite" }, h("span", { key: '2930c304db0ad50b6991454d9375fdc2e1a4547a', ref: (el) => (this.selectedDateInfoEl = el), role: "status" })), (hasCustomValidation || !isEmptyString(this.invalidDateText)) && (h("ic-input-validation", { key: '5fc1473b568a1f82c3c1ee9f73e20a19f7c28d85', status: validationStatus, message: hasCustomValidation ? this.validationText : this.invalidDateText, for: inputId })))));
+            }, disabled: this.disabled, innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearFocus, onBlur: this.handleClearBlur, variant: "icon-tertiary", theme: this.clearButtonFocused ? "light" : "dark", size: size })), showCalendarButton && (h("div", { key: '6d05e11943d6bd56f9dd6d20b8306a45062ac3f2', class: "show-calendar-button-wrapper" }, h("div", { key: 'c04cdf2665700c19fdc323bf92435d2b0d710016', class: { divider: true, [size]: true } }), h("ic-button", { key: '1a88f2b979c6c1569bb5bff797ea28e86526ff69', 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" })))))), h("span", { key: '49dc06b59b4ecbee2899842a1dc63d5bbde70cc3', id: this.selectedDateInfoId, class: "sr-only", "aria-live": "polite" }, h("span", { key: 'bd2d89299077ceaf51b03fc5f22e6d0ff2f1550a', ref: (el) => (this.selectedDateInfoEl = el), role: "status" })), (hasCustomValidation || !isEmptyString(this.invalidDateText)) && (h("ic-input-validation", { key: 'd1502e42604239e61c7ec08840c258d2ea4d07e8', status: validationStatus, message: hasCustomValidation ? this.validationText : this.invalidDateText, for: inputId })))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
     static get watchers() { return {
+        "day": ["watchInputHandler"],
+        "month": ["watchInputHandler"],
+        "year": ["watchInputHandler"],
         "disabled": ["watchDisabledHandler"],
         "disableFuture": ["watchDisableFutureHandler"],
         "disablePast": ["watchDisablePastHandler"],