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

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

@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-no-bind */
 import { h, Host, } from "@stencil/core";
 import { IcInformationStatus, IcDateInputMonths, IcDayNames, } from "../../utils/types";
 import { convertToDoubleDigits, createDate, dateMatches, extractDateFromZuluDateTime, isDateOrEpoch, splitStringDate, } from "../../utils/date-helpers";
@@ -7,6 +8,7 @@ import Calendar from "../../assets/calendar.svg";
 let inputIds = 0;
 export class DateInput {
     constructor() {
+        this.DEFAULT_DATE_FORMAT = "DD/MM/YYYY";
         this.ARIA_INVALID = "aria-invalid";
         this.ARIA_LABEL = "aria-label";
         this.ARIA_LABELLED_BY = "aria-labelledby";
@@ -26,20 +28,24 @@ export class DateInput {
         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.
          */
@@ -131,9 +137,11 @@ export class DateInput {
          */
         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;
@@ -148,9 +156,6 @@ export class DateInput {
                 case this.yearInputEl:
                     isValid = true;
                     break;
-                default:
-                    isValid = false;
-                    break;
             }
             return isValid;
         };
@@ -294,8 +299,10 @@ export class DateInput {
         };
         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") {
@@ -307,13 +314,15 @@ export class DateInput {
             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;
@@ -356,22 +365,18 @@ export class DateInput {
             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);
                 }
             }
@@ -391,7 +396,8 @@ export class DateInput {
                     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 = "";
                 }
@@ -421,16 +427,20 @@ export class DateInput {
         // 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);
@@ -453,9 +463,11 @@ export class DateInput {
                 }
                 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();
@@ -466,7 +478,7 @@ export class DateInput {
             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":
@@ -481,9 +493,11 @@ export class DateInput {
             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) => {
@@ -511,7 +525,9 @@ export class DateInput {
                 // (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"));
@@ -561,13 +577,13 @@ export class DateInput {
         };
         // 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();
@@ -576,14 +592,14 @@ export class DateInput {
             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)
@@ -632,7 +648,7 @@ export class DateInput {
         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":
@@ -664,7 +680,7 @@ export class DateInput {
             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 === "." ||
@@ -676,81 +692,60 @@ export class DateInput {
                 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);
@@ -764,8 +759,8 @@ export class DateInput {
             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 {
@@ -779,14 +774,13 @@ export class DateInput {
             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}`;
@@ -798,32 +792,23 @@ export class DateInput {
             }
         };
         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) {
@@ -834,15 +819,16 @@ export class DateInput {
             }
         };
         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) => {
@@ -852,26 +838,28 @@ export class DateInput {
             }
         };
         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;
             }
@@ -896,13 +884,36 @@ export class DateInput {
             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);
     }
@@ -929,9 +940,10 @@ export class DateInput {
         }
     }
     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");
@@ -940,7 +952,7 @@ export class DateInput {
             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();
             }
@@ -956,11 +968,8 @@ export class DateInput {
         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`;
@@ -1029,7 +1038,10 @@ export class DateInput {
      * @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);
@@ -1090,18 +1102,18 @@ export class DateInput {
     }
     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);
@@ -1126,7 +1138,8 @@ export class DateInput {
         }
     }
     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);
@@ -1146,15 +1159,15 @@ export class DateInput {
                 : "";
         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 is() { return "ic-date-input"; }
     static get encapsulation() { return "shadow"; }
@@ -1186,7 +1199,7 @@ export class DateInput {
                     }
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The format in which the date will be displayed."
@@ -1195,7 +1208,27 @@ export class DateInput {
                 "setter": false,
                 "attribute": "date-format",
                 "reflect": false,
-                "defaultValue": "\"DD/MM/YYYY\""
+                "defaultValue": "this.DEFAULT_DATE_FORMAT"
+            },
+            "emitDatePartChange": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, every individual input field completed will emit an icChange event."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "emit-date-part-change",
+                "reflect": false,
+                "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
@@ -1206,7 +1239,7 @@ export class DateInput {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "If `true`, the disabled state will be set."
@@ -1232,7 +1265,7 @@ export class DateInput {
                     }
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The days of the week to disable."
@@ -1250,7 +1283,7 @@ export class DateInput {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The text to display as the validation message when `disableDays` is set and a disabled date is entered."
@@ -1266,7 +1299,7 @@ export class DateInput {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1290,7 +1323,7 @@ export class DateInput {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The text to display as the validation message when `disableFuture` is true and a date in the future is entered."
@@ -1306,7 +1339,7 @@ export class DateInput {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1330,7 +1363,7 @@ export class DateInput {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The text to display as the validation message when `disablePast` is true and a date in the past is entered."
@@ -1345,12 +1378,12 @@ export class DateInput {
                 "type": "string",
                 "mutable": true,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "string | null",
+                    "resolved": "null | string",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The helper text that will be displayed for additional field guidance. This will default to the text \"Use format\" along with the `dateFormat` value."
@@ -1385,7 +1418,7 @@ export class DateInput {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1409,7 +1442,7 @@ export class DateInput {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The ID for the input."
@@ -1429,7 +1462,7 @@ export class DateInput {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The text to display as the validation message when an invalid date is entered."
@@ -1473,7 +1506,7 @@ export class DateInput {
                     }
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The latest date that will be allowed. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object.\nThe value of this prop is ignored if `disableFuture` is set to `true`."
@@ -1498,7 +1531,7 @@ export class DateInput {
                     }
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The earliest date that will be allowed. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object.\nThe value of this prop is ignored if `disablePast` is set to `true`."
@@ -1538,7 +1571,7 @@ export class DateInput {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "If `true`, the input will require a value."
@@ -1554,7 +1587,7 @@ export class DateInput {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1577,7 +1610,7 @@ export class DateInput {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1607,7 +1640,7 @@ export class DateInput {
                     }
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The size of the date input to be displayed."
@@ -1623,7 +1656,7 @@ export class DateInput {
                 "mutable": false,
                 "complexType": {
                     "original": "IcThemeMode",
-                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
                     "references": {
                         "IcThemeMode": {
                             "location": "import",
@@ -1649,7 +1682,7 @@ export class DateInput {
                 "mutable": true,
                 "complexType": {
                     "original": "string | Date | null | undefined",
-                    "resolved": "Date | string",
+                    "resolved": "Date | null | string | undefined",
                     "references": {
                         "Date": {
                             "location": "global",
@@ -1684,7 +1717,7 @@ export class DateInput {
                     }
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in date validation."
@@ -1700,7 +1733,7 @@ export class DateInput {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1719,15 +1752,15 @@ export class DateInput {
     }
     static get states() {
         return {
-            "day": {},
             "invalidDateText": {},
             "maxDate": {},
             "minDate": {},
-            "month": {},
-            "year": {},
             "calendarFocused": {},
             "clearButtonFocused": {},
-            "removeLabelledBy": {}
+            "removeLabelledBy": {},
+            "day": {},
+            "month": {},
+            "year": {}
         };
     }
     static get events() {
@@ -1745,8 +1778,8 @@ export class DateInput {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "{ value: Date }",
-                    "resolved": "{ value: Date; }",
+                    "original": "{ value: Date | null }",
+                    "resolved": "{ value: Date | null; }",
                     "references": {
                         "Date": {
                             "location": "global",
@@ -1765,8 +1798,8 @@ export class DateInput {
                     "text": "Emitted when the input loses focus."
                 },
                 "complexType": {
-                    "original": "{ value: Date }",
-                    "resolved": "{ value: Date; }",
+                    "original": "{ value: Date | null }",
+                    "resolved": "{ value: Date | null; }",
                     "references": {
                         "Date": {
                             "location": "global",
@@ -1785,8 +1818,8 @@ export class DateInput {
                     "text": "Emitted when the value has changed."
                 },
                 "complexType": {
-                    "original": "{ value: Date }",
-                    "resolved": "{ value: Date; }",
+                    "original": "{\n    value: Date | null;\n    dateObject: {\n      day: string | null;\n      month: string | null;\n      year: string | null;\n    };\n    utcValue: Date | null;\n  }",
+                    "resolved": "{ value: Date | null; dateObject: { day: string | null; month: string | null; year: string | null; }; utcValue: Date | null; }",
                     "references": {
                         "Date": {
                             "location": "global",
@@ -1805,8 +1838,8 @@ export class DateInput {
                     "text": "Emitted when the input gains focus."
                 },
                 "complexType": {
-                    "original": "{ value: Date }",
-                    "resolved": "{ value: Date; }",
+                    "original": "{ value: Date | null }",
+                    "resolved": "{ value: Date | null; }",
                     "references": {
                         "Date": {
                             "location": "global",
@@ -1820,7 +1853,7 @@ export class DateInput {
         return {
             "getDate": {
                 "complexType": {
-                    "signature": "() => Promise<Date>",
+                    "signature": "() => Promise<Date | null>",
                     "parameters": [],
                     "references": {
                         "Promise": {
@@ -1832,7 +1865,7 @@ export class DateInput {
                             "id": "global::Date"
                         }
                     },
-                    "return": "Promise<Date>"
+                    "return": "Promise<Date | null>"
                 },
                 "docs": {
                     "text": "Returns the value as a Date object",
@@ -1893,10 +1926,10 @@ export class DateInput {
             },
             "triggerIcChange": {
                 "complexType": {
-                    "signature": "(d: Date) => Promise<void>",
+                    "signature": "(d: Date | null) => Promise<void>",
                     "parameters": [{
                             "name": "d",
-                            "type": "Date",
+                            "type": "Date | null",
                             "docs": ""
                         }],
                     "references": {
@@ -1924,6 +1957,15 @@ export class DateInput {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "day",
+                "methodName": "watchInputHandler"
+            }, {
+                "propName": "month",
+                "methodName": "watchInputHandler"
+            }, {
+                "propName": "year",
+                "methodName": "watchInputHandler"
+            }, {
                 "propName": "disabled",
                 "methodName": "watchDisabledHandler"
             }, {