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

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";
@@ -39,8 +41,7 @@ export class DateInput {
         /**
          * 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.
          */
@@ -136,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;
@@ -153,9 +156,6 @@ export class DateInput {
                 case this.yearInputEl:
                     isValid = true;
                     break;
-                default:
-                    isValid = false;
-                    break;
             }
             return isValid;
         };
@@ -299,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") {
@@ -312,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;
@@ -361,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);
                 }
             }
@@ -396,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 = "";
                 }
@@ -426,19 +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) {
                 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);
@@ -476,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":
@@ -491,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) => {
@@ -521,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"));
@@ -571,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();
@@ -586,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)
@@ -642,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":
@@ -674,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 === "." ||
@@ -686,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);
@@ -774,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 {
@@ -789,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}`;
@@ -808,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) {
@@ -844,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) => {
@@ -875,15 +851,15 @@ export class DateInput {
             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;
             }
@@ -913,6 +889,10 @@ export class DateInput {
                 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: {
@@ -920,6 +900,7 @@ export class DateInput {
                         month: this.month === "" ? null : this.month,
                         year: this.year === "" ? null : this.year,
                     },
+                    utcValue: UTCDate,
                 });
             }
         };
@@ -959,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");
@@ -970,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();
             }
@@ -1120,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);
@@ -1156,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);
@@ -1176,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: '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 is() { return "ic-date-input"; }
     static get encapsulation() { return "shadow"; }
@@ -1216,7 +1199,7 @@ export class DateInput {
                     }
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The format in which the date will be displayed."
@@ -1225,14 +1208,14 @@ 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",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1256,7 +1239,7 @@ export class DateInput {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "If `true`, the disabled state will be set."
@@ -1282,7 +1265,7 @@ export class DateInput {
                     }
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The days of the week to disable."
@@ -1300,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."
@@ -1316,7 +1299,7 @@ export class DateInput {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1340,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."
@@ -1356,7 +1339,7 @@ export class DateInput {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1380,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."
@@ -1395,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."
@@ -1435,7 +1418,7 @@ export class DateInput {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1459,7 +1442,7 @@ export class DateInput {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The ID for the input."
@@ -1479,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."
@@ -1523,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`."
@@ -1548,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`."
@@ -1588,7 +1571,7 @@ export class DateInput {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "If `true`, the input will require a value."
@@ -1604,7 +1587,7 @@ export class DateInput {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1627,7 +1610,7 @@ export class DateInput {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1657,7 +1640,7 @@ export class DateInput {
                     }
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The size of the date input to be displayed."
@@ -1673,7 +1656,7 @@ export class DateInput {
                 "mutable": false,
                 "complexType": {
                     "original": "IcThemeMode",
-                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
                     "references": {
                         "IcThemeMode": {
                             "location": "import",
@@ -1699,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",
@@ -1734,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."
@@ -1750,7 +1733,7 @@ export class DateInput {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1795,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",
@@ -1815,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",
@@ -1835,8 +1818,8 @@ export class DateInput {
                     "text": "Emitted when the value has changed."
                 },
                 "complexType": {
-                    "original": "{\n    value: Date;\n    dateObject: { day: string; month: string; year: string };\n  }",
-                    "resolved": "{ value: Date; dateObject: { day: string; month: string; year: string; }; }",
+                    "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",
@@ -1855,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",
@@ -1870,7 +1853,7 @@ export class DateInput {
         return {
             "getDate": {
                 "complexType": {
-                    "signature": "() => Promise<Date>",
+                    "signature": "() => Promise<Date | null>",
                     "parameters": [],
                     "references": {
                         "Promise": {
@@ -1882,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",
@@ -1943,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": {