@ukic/canary-web-components 3.0.0-canary.14 → 3.0.0-canary.16

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

@@ -13,12 +13,8 @@ const isMonthFirstFormat = (dateString) => {
     const monthFirstFormat = /^(0[1-9]|1[0-2])(\/|-)(0[1-9]|[12][0-9]|3[01])(\/|-)\d{4}$/;
     return monthFirstFormat.test(dateString);
 };
-const isDayFirstFormat = (dateString) => {
-    const dayFirstFormat = /^(0[1-9]|[12][0-9]|3[01])(\/|-)(0[1-9]|1[0-2])(\/|-)\d{4}$/;
-    return dayFirstFormat.test(dateString);
-};
 const createDate = (date, dateFormat) => {
-    let newDate;
+    let newDate = new Date();
     if (isDateOrEpoch(date)) {
         newDate = typeof date === "string" ? new Date(date) : date;
     }
@@ -31,57 +27,30 @@ const createDate = (date, dateFormat) => {
     }
     return newDate;
 };
-const isDateOrEpoch = (date) => {
-    return date instanceof Date || !isNaN(+new Date(+date));
-};
+const isDateOrEpoch = (date) => date instanceof Date || !isNaN(+new Date(+date));
 const extractDateFromZuluDateTime = (zuluDateTime) => zuluDateTime.slice(0, zuluDateTime.indexOf("T"));
 const splitStringDate = (date, dateFormat) => {
     // returns an array where item 1 is year, item 2 is month, item 3 is day
-    if (date.includes("T") && date.includes("Z")) {
-        const nextDate = extractDateFromZuluDateTime(date);
-        return nextDate.split("-");
-    }
+    if (date.includes("T") && date.includes("Z"))
+        return extractDateFromZuluDateTime(date).split("-");
     let newDate = [];
-    const dateWithSlashes = date.replace(/-/g, "/");
-    if (dateWithSlashes.split("/").length > 1) {
-        const dateParts = dateWithSlashes.split("/");
-        // pad any values to 2 characters
-        dateParts.forEach((d, i) => {
-            if (d.length === 1) {
-                dateParts[i] = convertToDoubleDigits(d);
-            }
-        });
+    const splitDateWithSlashes = date.replace(/-/g, "/").split("/");
+    if (splitDateWithSlashes.length > 1) {
+        const dateParts = splitDateWithSlashes.map((part) => part.length === 1 ? convertToDoubleDigits(part) : part); // pad any values to 2 characters
         if (dateParts[0].length === 4) {
             newDate = [dateParts[0], dateParts[1], dateParts[2]];
         }
         else {
-            const newDateStr = dateParts.join("/");
-            const validDayFirst = isDayFirstFormat(newDateStr);
-            const validMonthFirst = isMonthFirstFormat(newDateStr);
-            if (validDayFirst && validMonthFirst) {
-                if (dateFormat.charAt(0) === "M") {
-                    newDate = [dateParts[2], dateParts[0], dateParts[1]];
-                }
-                else {
-                    newDate = [dateParts[2], dateParts[1], dateParts[0]];
-                }
-            }
-            else if (validMonthFirst) {
+            newDate = [dateParts[2], dateParts[1], dateParts[0]];
+            if (isMonthFirstFormat(dateParts.join("/")) &&
+                dateFormat.charAt(0) === "M") {
                 newDate = [dateParts[2], dateParts[0], dateParts[1]];
             }
-            else {
-                newDate = [dateParts[2], dateParts[1], dateParts[0]];
-            }
         }
     }
     return newDate;
 };
-const convertToDoubleDigits = (value) => {
-    if (+value < 10) {
-        return `0${value}`;
-    }
-    return value.toString();
-};
+const convertToDoubleDigits = (value) => +value < 10 ? `0${value}` : value.toString();
 const getWeekStart = (date, startDay) => {
     const tmpDate = new Date(date);
     const day = tmpDate.getDay();
@@ -105,14 +74,11 @@ const getMonthEnd = (date) => {
 /**
  * Compare if two dates are equal exactly equal
  */
-const dateMatches = (a, b) => {
-    if (a === null || b === null) {
-        return false;
-    }
-    return (a.getFullYear() === b.getFullYear() &&
-        a.getMonth() === b.getMonth() &&
-        a.getDate() === b.getDate());
-};
+const dateMatches = (a, b) => a !== null &&
+    b !== null &&
+    a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate();
 const clampDate = (date, min, max) => {
     const time = date.getTime();
     if (min !== null && time < min.getTime()) {
@@ -126,21 +92,9 @@ const clampDate = (date, min, max) => {
 /**
  * Compare if date is within specified range
  */
-const dateInRange = (date, min, max) => {
-    return clampDate(date, min, max) === date;
-};
-const yearInRange = (year, min, max) => {
-    let allowed = true;
-    if (year !== null) {
-        if (min !== null && year < min.getFullYear()) {
-            allowed = false;
-        }
-        if (allowed && max !== null && year > max.getFullYear()) {
-            allowed = false;
-        }
-    }
-    return allowed;
-};
+const dateInRange = (date, min, max) => clampDate(date, min, max) === date;
+const yearInRange = (year, min, max) => !year ||
+    (!(min && year < min.getFullYear()) && !(max && year > max.getFullYear()));
 
 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"/>
@@ -164,6 +118,7 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
         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";
@@ -196,8 +151,7 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
         /**
          * 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.
          */
@@ -293,9 +247,11 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
          */
         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;
@@ -310,9 +266,6 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
                 case this.yearInputEl:
                     isValid = true;
                     break;
-                default:
-                    isValid = false;
-                    break;
             }
             return isValid;
         };
@@ -454,8 +407,10 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
         };
         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") {
@@ -467,13 +422,15 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
             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;
@@ -516,22 +473,18 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
             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);
                 }
             }
@@ -551,7 +504,8 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
                     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 = "";
                 }
@@ -581,19 +535,20 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
         // 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) {
                 if (this.day)
-                    this.day = null;
+                    this.day = "";
                 if (this.month)
-                    this.month = null;
+                    this.month = "";
                 if (this.year)
-                    this.year = null;
+                    this.year = "";
                 this.inputsInOrder.forEach((input) => {
                     input.classList.remove(this.FIT_TO_VALUE);
                     this.setPreventInput(input, false);
@@ -631,7 +586,7 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
             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":
@@ -644,9 +599,11 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
             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) => {
@@ -674,7 +631,9 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
                 // (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"));
@@ -724,13 +683,13 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
         };
         // 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();
@@ -739,14 +698,14 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
             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)
@@ -795,7 +754,7 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
         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":
@@ -827,7 +786,7 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
             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 === "." ||
@@ -839,81 +798,60 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
                 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);
@@ -927,8 +865,8 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
             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 {
@@ -942,14 +880,13 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
             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}`;
@@ -961,32 +898,23 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
             }
         };
         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) {
@@ -997,15 +925,16 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
             }
         };
         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) => {
@@ -1028,15 +957,15 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
             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;
             }
@@ -1066,6 +995,10 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
                 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: {
@@ -1073,6 +1006,7 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
                         month: this.month === "" ? null : this.month,
                         year: this.year === "" ? null : this.year,
                     },
+                    utcValue: UTCDate,
                 });
             }
         };
@@ -1112,9 +1046,10 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
         }
     }
     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");
@@ -1123,7 +1058,7 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
             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();
             }
@@ -1273,18 +1208,18 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
     }
     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);
@@ -1309,7 +1244,8 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
         }
     }
     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);
@@ -1329,15 +1265,15 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
                 : "";
         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: 'a37b652ab1896d583a970f2fe3f23480fe923406', 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: '41c1cd439879613d8920593309e19c050e5d451e', disabled: disabled }, !(hideLabel && hideHelperText) && (h("ic-input-label", { key: 'a598faa23eda4cf283cd5e542008aad20150736e', for: inputId, label: label, hideLabel: hideLabel, helperText: !hideHelperText ? helperText : "", disabled: disabled })), h("span", { key: '71265eb5808610652efe874a2ad9828c970a9176', id: this.screenReaderInfoId, class: "sr-only", "aria-hidden": "true" }, this.getScreenReaderInfo(validationStatus), hideLabel && `${label}\n`, hideHelperText && `${helperText}\n`, `${this.defaultHelperText}.`), h("span", { key: '67121b1b28fa69acd5c143d8dacb9c634db15f05', id: this.assistiveHintId, class: "sr-only", "aria-hidden": "true" }, assistiveHint), h("span", { key: '2af3f97d24ed25ba868b08d13b4467075b350a36', id: "live-region", "aria-live": "assertive", class: "sr-only" }), h("ic-input-component-container", { key: 'c7c455f3f16458f6a56e604e8f8499834f277933', id: inputId, ref: (el) => (this.inputCompContainerEl = el), disabled: disabled, validationStatus: validationStatus, size: size, role: "group", class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, h("div", { key: 'ccf2a9ca8154cdc108fdbbe4a8b1cf2fd6fb5070', class: "input-container" }, h("div", { key: 'c044b44ee99dcf32722bdbfa481c8464a9a4d7bb', class: "date-inputs" }, this.getInputsInOrder()[0], "/", this.getInputsInOrder()[1], "/", this.getInputsInOrder()[2]), h("div", { key: '30818ad45a24cdca204f8b629f064840420afb44', class: "action-buttons" }, showClearButton && (h("ic-button", { key: '99a6a5b62893e56cf5d3a4f6645ce2aa1b77e538', 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: '77a0ba0e9dfa3b99a97252178e42f49261619503', class: "show-calendar-button-wrapper" }, h("div", { key: '70408bceb4963e3ba54fe5630ba95905d15be0a6', class: { divider: true, [size]: true } }), h("ic-button", { key: 'f38c632d59fe23bfda2f20a8a9646028ac40f99b', 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: '614cc74c88f8d83e04ec9bde0d984567c536d65c', id: this.selectedDateInfoId, class: "sr-only", "aria-live": "polite" }, h("span", { key: 'f1dea32613b9f162808ffef69baa6231c86998d3', ref: (el) => (this.selectedDateInfoEl = el), role: "status" })), (hasCustomValidation || !isEmptyString(this.invalidDateText)) && (h("ic-input-validation", { key: '802cdf9f7bc52c9164137059b46f5c1dfcbcdb80', 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 this; }