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

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

@@ -22,7 +22,7 @@ export class DatePicker {
         this.dayPickerKeyboardNav = false;
         this.dialogDescription = "";
         this.focusDay = true;
-        this.liveRegionEl = null;
+        this.liveRegionEl = undefined;
         this.monthNames = [];
         this.monthInViewUpdateHandled = false;
         this.myCalendarButtonClicked = false;
@@ -157,11 +157,12 @@ export class DatePicker {
             this.decadeEnd = decadeArr[10];
         };
         this.setSelectedDate = (d, emit = true) => {
+            var _a;
             if (d === null || !dateMatches(d, this.selectedDate)) {
                 this.selectedDate = d;
                 this.value = d;
                 if (emit) {
-                    this.inputEl.triggerIcChange(d);
+                    (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.triggerIcChange(d);
                 }
             }
         };
@@ -179,10 +180,11 @@ export class DatePicker {
             this.calendarOpen = false;
         };
         this.keyDownHandler = (event) => {
+            var _a;
             if (event.key === "Escape") {
                 if (this.calendarOpen) {
                     this.closeButtonClickHandler();
-                    this.inputEl.setCalendarFocus();
+                    (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.setCalendarFocus();
                     event.stopImmediatePropagation();
                 }
             }
@@ -198,10 +200,14 @@ export class DatePicker {
             this.monthButtonEl.setFocus();
         };
         this.focusLastElement = () => {
-            if (this.showPickerClearButton && !this.clearButtonEl.disabled) {
+            if (this.showPickerClearButton &&
+                this.clearButtonEl &&
+                !this.clearButtonEl.disabled) {
                 this.clearButtonEl.setFocus();
             }
-            else if (this.showPickerTodayButton && !this.todayButtonEl.disabled) {
+            else if (this.showPickerTodayButton &&
+                this.todayButtonEl &&
+                !this.todayButtonEl.disabled) {
                 this.todayButtonEl.setFocus();
             }
             else if (this.monthPickerVisible) {
@@ -247,7 +253,8 @@ export class DatePicker {
             setTimeout(() => this.focusFocussedDay(), FOCUS_TIMER);
         };
         this.todayButtonKeyDownHandler = (ev) => {
-            if (ev.key === "Tab" && !ev.shiftKey && this.clearButtonEl.disabled) {
+            var _a;
+            if (ev.key === "Tab" && !ev.shiftKey && ((_a = this.clearButtonEl) === null || _a === void 0 ? void 0 : _a.disabled)) {
                 this.focusFirstElement();
                 ev.preventDefault();
             }
@@ -369,9 +376,7 @@ export class DatePicker {
         this.isNextYearAllowed = () => {
             return this.isYearAllowed(this.yearInView + 1);
         };
-        this.isYearAllowed = (yr) => {
-            return yearInRange(yr, this.minDate, this.maxDate);
-        };
+        this.isYearAllowed = (yr) => yearInRange(yr, this.minDate, this.maxDate);
         this.getMonthView = (date) => {
             const start = getWeekStart(getMonthStart(date), this.startOfWeek);
             const end = getWeekEnd(getMonthEnd(date), this.startOfWeek);
@@ -390,20 +395,23 @@ export class DatePicker {
             return (d.getFullYear() === this.yearInView && d.getMonth() === this.monthInView);
         };
         this.updateMonthInView = () => {
-            this.currMonthView = this.getMonthView(this.focussedDate);
-            this.focussedDay = this.focussedDate.getDate();
-            this.monthInView = this.focussedDate.getMonth();
-            this.yearInView = this.focussedDate.getFullYear();
-            if (this.dayPickerKeyboardNav) {
-                this.monthInViewUpdateHandled = true;
-                this.setAriaLiveRegionText(this.getMonthInViewText());
-                this.dayPickerKeyboardNav = false;
+            if (this.focussedDate) {
+                this.currMonthView = this.getMonthView(this.focussedDate);
+                this.focussedDay = this.focussedDate.getDate();
+                this.monthInView = this.focussedDate.getMonth();
+                this.yearInView = this.focussedDate.getFullYear();
+                if (this.dayPickerKeyboardNav) {
+                    this.monthInViewUpdateHandled = true;
+                    this.setAriaLiveRegionText(this.getMonthInViewText());
+                    this.dayPickerKeyboardNav = false;
+                }
             }
         };
         this.handleSelectDay = (day) => {
+            var _a;
             this.setSelectedDate(day);
             this.calendarOpen = false;
-            this.inputEl.setCalendarFocus();
+            (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.setCalendarFocus();
         };
         this.handleSelectMonth = (month) => {
             this.moveMonths(month - this.monthInView);
@@ -614,11 +622,13 @@ export class DatePicker {
                     break;
                 case "ArrowLeft":
                     this.dayPickerKeyboardNav = true;
-                    this.moveDays(-1 * this.getNextDayToFocus(this.focussedDate, false));
+                    if (this.focussedDate)
+                        this.moveDays(-1 * this.getNextDayToFocus(this.focussedDate, false));
                     break;
                 case "ArrowRight":
                     this.dayPickerKeyboardNav = true;
-                    this.moveDays(this.getNextDayToFocus(this.focussedDate, true));
+                    if (this.focussedDate)
+                        this.moveDays(this.getNextDayToFocus(this.focussedDate, true));
                     break;
                 case "PageUp":
                     this.dayPickerKeyboardNav = true;
@@ -648,10 +658,11 @@ export class DatePicker {
             }
         };
         this.calendarTabHandler = (ev) => {
+            var _a;
             let handled = false;
             if (!ev.shiftKey &&
                 (!this.showPickerTodayButton || this.isCurrentMonth()) &&
-                (!this.showPickerClearButton || this.clearButtonEl.disabled)) {
+                (!this.showPickerClearButton || ((_a = this.clearButtonEl) === null || _a === void 0 ? void 0 : _a.disabled))) {
                 this.focusFirstElement();
                 handled = true;
             }
@@ -668,47 +679,50 @@ export class DatePicker {
             this.dayButtonFocussed = false;
         };
         this.getNextDayToFocus = (currDay, forward, level = 1) => {
+            var _a;
             const move = forward ? 1 : -1;
             const nextDay = new Date(currDay);
             nextDay.setDate(nextDay.getDate() + move);
-            const nextDayNum = Number(nextDay.getDay());
-            if (this.disableDays.includes(nextDayNum)) {
-                return this.getNextDayToFocus(nextDay, forward, level + 1);
-            }
-            else {
-                return level;
-            }
+            return ((_a = this.disableDays) === null || _a === void 0 ? void 0 : _a.includes(Number(nextDay.getDay())))
+                ? this.getNextDayToFocus(nextDay, forward, level + 1)
+                : level;
         };
         this.moveDays = (numDays) => {
-            const d = new Date(this.focussedDate);
-            d.setDate(d.getDate() + numDays);
-            this.setFocussedDate(d);
+            if (this.focussedDate) {
+                const d = new Date(this.focussedDate);
+                d.setDate(d.getDate() + numDays);
+                this.setFocussedDate(d);
+            }
         };
         this.moveMonths = (numMonths) => {
-            const newMonth = this.focussedDate.getMonth() + numMonths;
-            const min = new Date(new Date(getMonthStart(this.focussedDate)).setMonth(newMonth));
-            const max = getMonthEnd(min);
-            const newDate = new Date(new Date(this.focussedDate).setMonth(newMonth));
-            this.setFocussedDate(clampDate(newDate, min, max));
-            if (this.monthPickerVisible === false &&
-                this.yearPickerVisible === false &&
-                this.monthInViewUpdateHandled === false) {
-                this.setAriaLiveRegionText(this.getMonthInViewText());
-            }
-            this.monthInViewUpdateHandled = false;
+            if (this.focussedDate) {
+                const newMonth = this.focussedDate.getMonth() + numMonths;
+                const min = new Date(new Date(getMonthStart(this.focussedDate)).setMonth(newMonth));
+                const max = getMonthEnd(min);
+                const newDate = new Date(new Date(this.focussedDate).setMonth(newMonth));
+                this.setFocussedDate(clampDate(newDate, min, max));
+                if (this.monthPickerVisible === false &&
+                    this.yearPickerVisible === false &&
+                    this.monthInViewUpdateHandled === false) {
+                    this.setAriaLiveRegionText(this.getMonthInViewText());
+                }
+                this.monthInViewUpdateHandled = false;
+            }
         };
         this.moveYears = (numYears) => {
-            const newYear = this.focussedDate.getFullYear() + numYears;
-            const min = new Date(new Date(getMonthStart(this.focussedDate)).setFullYear(newYear));
-            const max = getMonthEnd(min);
-            const newDate = new Date(new Date(this.focussedDate).setFullYear(newYear));
-            this.setFocussedDate(clampDate(newDate, min, max));
-            if (this.monthPickerVisible === false &&
-                this.yearPickerVisible === false &&
-                this.monthInViewUpdateHandled === false) {
-                this.setAriaLiveRegionText(this.getMonthInViewText());
-            }
-            this.monthInViewUpdateHandled = false;
+            if (this.focussedDate) {
+                const newYear = this.focussedDate.getFullYear() + numYears;
+                const min = new Date(new Date(getMonthStart(this.focussedDate)).setFullYear(newYear));
+                const max = getMonthEnd(min);
+                const newDate = new Date(new Date(this.focussedDate).setFullYear(newYear));
+                this.setFocussedDate(clampDate(newDate, min, max));
+                if (this.monthPickerVisible === false &&
+                    this.yearPickerVisible === false &&
+                    this.monthInViewUpdateHandled === false) {
+                    this.setAriaLiveRegionText(this.getMonthInViewText());
+                }
+                this.monthInViewUpdateHandled = false;
+            }
         };
         this.updateFocussedMonth = (adjust) => {
             const d = new Date(this.focussedYear, this.focussedMonth, 1);
@@ -780,16 +794,16 @@ export class DatePicker {
                     inputProps.disablePastMessage = this.disablePastMessage;
                 }
             }
-            if (this.disableDays.length > 0) {
+            if (this.disableDays && this.disableDays.length > 0) {
                 inputProps.disableDays = this.disableDays;
                 if (this.disableDaysMessage !== DEFAULT_DISABLE_DAYS_MSG) {
                     inputProps.disableDaysMessage = this.disableDaysMessage;
                 }
             }
-            if (this.max !== null && this.max !== "") {
+            if (this.max !== null && this.max !== "" && this.maxDate) {
                 inputProps.max = this.maxDate;
             }
-            if (this.min !== null && this.min !== "") {
+            if (this.min !== null && this.min !== "" && this.minDate) {
                 inputProps.min = this.minDate;
             }
             if (this.helperText !== undefined) {
@@ -981,35 +995,38 @@ export class DatePicker {
             : "Open month picker";
         const yearLabel = this.yearInView ? this.yearInView : "Open year picker";
         let minDay = minDate;
-        if (this.disablePast) {
+        if (minDate && this.disablePast) {
             const yesterday = new Date(minDate);
             yesterday.setDate(minDate.getDate() - 1);
             minDay = yesterday;
         }
-        return (h(Host, { key: '5e9ccc7a11ec9af59b92c82a57220d2331487ae3', onKeyDown: this.keyDownHandler, class: {
+        return (h(Host, { key: 'cc90bc5878c0b27ef385c662cbe9e294af725f7d', onKeyDown: this.keyDownHandler, class: {
                 [`ic-date-picker-${size}`]: true,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("div", { key: '4a955bd86f7d40729b9e06a951b74f1ac8e6537d', class: "date-input-container" }, h("ic-date-input", Object.assign({ key: 'dfad29fcd55af0bd223043829bf9ba0a50a13c83', ref: (el) => (this.inputEl = el) }, dateInputProps))), calendarOpen && (h("div", { key: '54b425398ff5d01f48579295f11afe134dd4754d' }, h("span", { key: '7dd1c85c21aa42e4e349ed3b5c49e30d8079b805', id: "dialog-description", class: "sr-only" }, dialogDescription), h("div", { key: '60277961fe96cd039c2896667c540799da9ee791', role: "dialog", "aria-modal": "true", "aria-label": dialogLabel, "aria-describedBy": "dialog-description", class: {
+            } }, h("div", { key: '65d2149e34caf284fa187c3b2dd8ed21d6bb5a44', class: "date-input-container" }, h("ic-date-input", Object.assign({ key: '2ae06cec893443c8a300a0faa3bec5c7b9b4a652', ref: (el) => (this.inputEl = el) }, dateInputProps))), calendarOpen && (h("div", { key: '81bf1e0fc12cc1180e5dee420e6792be18860789' }, h("span", { key: '12198d7c301931a0d1dc046e57e736ad872362bd', id: "dialog-description", class: "sr-only" }, dialogDescription), h("div", { key: '1738f61431f776ba6e0377dd657cc3085d111db6', role: "dialog", "aria-modal": "true", "aria-label": dialogLabel, "aria-describedBy": "dialog-description", class: {
                 "calendar-container": true,
                 above: this.showPickerAbove,
-            }, onMouseDown: this.handleCalendarMouseDown, onClick: this.handleCalendarClick }, h("span", { key: '13e933dec8f72ad6b3c321e2d20068e44676d526', ref: (el) => (this.liveRegionEl = el), id: "live-region", "aria-live": "assertive", class: "sr-only" }), h("div", { key: 'ef5b6ecc2837afa98e54b3d1f3f7c35b9d76cbe8', class: {
+            }, onMouseDown: this.handleCalendarMouseDown, onClick: this.handleCalendarClick }, h("span", { key: '210fa127f438a467e7fe89c5a6e900cd4d69ec2a', ref: (el) => (this.liveRegionEl = el), id: "live-region", "aria-live": "assertive", class: "sr-only" }), h("div", { key: '500e2e2dbd101bb0f770d4ba8cd793dc9c4ebb57', class: {
                 "month-year-nav-container": true,
-            } }, h("div", { key: '4d0758186767ffc0a53bbd98546c71d6f3ae68e1', class: "month-year-nav" }, this.previousMonthButton(), h("span", { key: '87a8892fcc48cbdd31e71e98677afb4a65b4509a', id: "select-month-hint", "aria-hidden": "true" }, monthButtonText), h("ic-button", { key: '54562344011fdc11a801ed4ab3bf0f9d1cbb0720', ref: (el) => (this.monthButtonEl = el), size: size, class: "month-picker-button", "aria-haspopup": "menu", "aria-expanded": monthPickerVisible ? "true" : "false", "full-width": "true", variant: "tertiary", "aria-label": monthLabel, "aria-describedby": "select-month-hint", onKeyDown: this.monthButtonKeyDownHandler, onClick: this.monthButtonClickHandler }, monthNames[monthInView]), this.nextMonthButton()), h("div", { key: 'cd717c2e91642b10bef03f749c839caaeb90c5d4', class: "month-year-nav" }, this.previousYearButton(), h("span", { key: '41b425d37f008489a105a540ab0e05460e10c322', id: "select-year-hint", "aria-hidden": "true" }, yearButtonText), h("ic-button", { key: '06c7108cddf69046a6c2b5ac6226dff3ff3ff5c3', ref: (el) => (this.yearButtonEl = el), size: size, class: "year-picker-button", "aria-haspopup": "menu", "aria-expanded": yearPickerVisible ? "true" : "false", "full-width": "true", variant: "tertiary", "aria-label": yearLabel, "aria-describedby": "select-year-hint", onKeyDown: this.yearButtonKeyDownHandler, onClick: this.yearButtonClickHandler }, this.yearInView), this.nextYearButton())), !(monthPickerVisible || yearPickerVisible) && (h("div", { key: '280daa0c705cdd4016b461aef7e8d781e79a99b4', class: {
+            } }, h("div", { key: '36ce54eee3ff375aa188e8ebccb56e767d43a64f', class: "month-year-nav" }, this.previousMonthButton(), h("span", { key: 'e5ff7fe31f7b7ead833a4b46430ee59688516b1d', id: "select-month-hint", "aria-hidden": "true" }, monthButtonText), h("ic-button", { key: '8ac0849ffda32901e0877c3c2c99badc1c73eaf6', ref: (el) => (this.monthButtonEl = el), size: size, class: "month-picker-button", "aria-haspopup": "menu", "aria-expanded": monthPickerVisible ? "true" : "false", "full-width": "true", variant: "tertiary", "aria-label": monthLabel, "aria-describedby": "select-month-hint", onKeyDown: this.monthButtonKeyDownHandler, onClick: this.monthButtonClickHandler }, monthNames[monthInView]), this.nextMonthButton()), h("div", { key: '832776e6191be307b0da81a8443f21ab799e5a56', class: "month-year-nav" }, this.previousYearButton(), h("span", { key: '46cdeb8c52e33b5b3b520ef225887a42fc1bf058', id: "select-year-hint", "aria-hidden": "true" }, yearButtonText), h("ic-button", { key: 'f44e816f812ba381360493b3720aebef8a29aac1', ref: (el) => (this.yearButtonEl = el), size: size, class: "year-picker-button", "aria-haspopup": "menu", "aria-expanded": yearPickerVisible ? "true" : "false", "full-width": "true", variant: "tertiary", "aria-label": yearLabel, "aria-describedby": "select-year-hint", onKeyDown: this.yearButtonKeyDownHandler, onClick: this.yearButtonClickHandler }, this.yearInView), this.nextYearButton())), !(monthPickerVisible || yearPickerVisible) && (h("div", { key: '6467d4df41dd58ff2b1578bcdbfec543e1b97e79', class: {
                 calendar: true,
                 hidden: monthPickerVisible || yearPickerVisible,
-            }, onKeyDown: this.handleCalendarKeyDown }, h("div", { key: 'fb5ca495827648da54f931081d7ada104813d6d6', class: "weekdays", "aria-hidden": "true" }, orderedDaysOfWeek.map((dayName) => {
+            }, onKeyDown: this.handleCalendarKeyDown }, h("div", { key: 'b2852f026f9f5a10d53a82062e194d128bb19ba4', class: "weekdays", "aria-hidden": "true" }, orderedDaysOfWeek.map((dayName) => {
             const header = size === "small" ? dayName.charAt(0) : dayName;
             return (h("div", { class: "calendar-day-header" }, h("ic-typography", { variant: "caption" }, header)));
-        })), h("div", { key: 'cb969df058c5c9992eea64185219c12dd4f63f16', class: "calendar-days-container" }, this.currMonthView.map((day) => (h(DayButton, { day: day, disableDay: this.disableDays.includes(Number(day.getDay())), today: dateMatches(day, this.today), selected: dateMatches(day, this.selectedDate), focussed: dateMatches(day, this.focussedDate), inRange: dateInRange(day, minDay, maxDate), monthInView: monthInView, onSelectDay: this.handleSelectDay, focussedDayRef: this.setFocussedDayEl, onFocusDay: this.onDayButtonFocusHandler, onBlurDay: this.onDayButtonBlurHandler, showDaysOutsideMonth: this.showDaysOutsideMonth })))))), h("div", { key: '6878f71a8e9849309935aed5f3ace0ea0528a5b9', class: {
+        })), h("div", { key: '7213ab26144c1cade134c5acec0c261631772631', class: "calendar-days-container" }, this.currMonthView.map((day) => {
+            var _a;
+            return (h(DayButton, { day: day, disableDay: (_a = this.disableDays) === null || _a === void 0 ? void 0 : _a.includes(Number(day.getDay())), today: dateMatches(day, this.today), selected: dateMatches(day, this.selectedDate), focussed: dateMatches(day, this.focussedDate), inRange: dateInRange(day, minDay, maxDate), monthInView: monthInView, onSelectDay: this.handleSelectDay, focussedDayRef: this.setFocussedDayEl, onFocusDay: this.onDayButtonFocusHandler, onBlurDay: this.onDayButtonBlurHandler, showDaysOutsideMonth: this.showDaysOutsideMonth }));
+        })))), h("div", { key: '49df75ac411965cac3efc5a9f5c8345f931d60f9', class: {
                 "month-picker-container": true,
                 hidden: !monthPickerVisible,
-            } }, monthPickerVisible && (h(MonthPicker, { key: '3adce24e8a23ce361de3f6e377eadcea09ba9407', size: size, onSelectMonth: this.handleSelectMonth, monthInView: monthInView, focussedMonth: focussedMonth, onKeyDown: this.monthPickerKeyDownHandler, focussedMonthRef: this.setFocussedMonthEl, minDate: minDate, maxDate: maxDate, yearInView: yearInView }))), h("div", { key: 'c645f72d43f2ca109ee37f182d1e8d3ee54e8b91', class: {
+            } }, monthPickerVisible && (h(MonthPicker, { key: '97a612ef85dec4982ae6a5f48ca7ef48d6ce83ab', size: size, onSelectMonth: this.handleSelectMonth, monthInView: monthInView, focussedMonth: focussedMonth, onKeyDown: this.monthPickerKeyDownHandler, focussedMonthRef: this.setFocussedMonthEl, minDate: minDate, maxDate: maxDate, yearInView: yearInView }))), h("div", { key: '0780257482c6fa52e35b4a21c40ce4418d94ca1b', class: {
                 "year-picker-container": true,
                 hidden: !yearPickerVisible,
-            } }, yearPickerVisible && (h(YearPicker, { key: '3e3022a85c04a79e59f141e2e11b969712e40ca9', decadeView: decadeView, size: size, focussedYear: focussedYear, onSelectYear: this.handleSelectYear, onKeyDown: this.yearPickerKeyDownHandler, onFocusYear: this.onYearButtonFocusHandler, onBlurYear: this.onYearButtonBlurHandler, yearInView: yearInView, minDate: minDate, maxDate: maxDate, focussedYearRef: this.setFocussedYearEl }))), h("div", { key: '6cbaef27a87bb48333241842a2654facb90578a6', class: {
+            } }, yearPickerVisible && (h(YearPicker, { key: '0b0933ec68d70ec042c2896820b2fc8a44394886', decadeView: decadeView, size: size, focussedYear: focussedYear, onSelectYear: this.handleSelectYear, onKeyDown: this.yearPickerKeyDownHandler, onFocusYear: this.onYearButtonFocusHandler, onBlurYear: this.onYearButtonBlurHandler, yearInView: yearInView, minDate: minDate, maxDate: maxDate, focussedYearRef: this.setFocussedYearEl }))), h("div", { key: '668baa66a596cfffae88374648d99e3ab57606fa', class: {
                 "bottom-buttons": true,
                 "no-today": !showPickerTodayButton,
-            } }, showPickerTodayButton && (h("ic-button", { key: 'efdb2b56aa7b886c3bb90379a553d86143a5479a', id: "today-button", variant: "tertiary", ref: (el) => (this.todayButtonEl = el), size: size, "aria-label": "Navigate to current date", onClick: this.todayButtonClickHandler, onKeyDown: this.todayButtonKeyDownHandler, disabled: this.isCurrentMonth() }, "Go to today")), showPickerClearButton && (h("ic-button", { key: 'd54bb6a21e9cf1164d09c27a01d1b334a52eb433', id: "clear-button", "aria-label": "clear selected date", ref: (el) => (this.clearButtonEl = el), variant: "tertiary", size: size, onClick: this.clearButtonClickHandler, onKeyDown: this.clearButtonKeyDownHandler, disabled: this.value === "" ||
+            } }, showPickerTodayButton && (h("ic-button", { key: 'cc8b644d97f9f11fccca0e3c2c4cb577863aa70b', id: "today-button", variant: "tertiary", ref: (el) => (this.todayButtonEl = el), size: size, "aria-label": "Navigate to current date", onClick: this.todayButtonClickHandler, onKeyDown: this.todayButtonKeyDownHandler, disabled: this.isCurrentMonth() }, "Go to today")), showPickerClearButton && (h("ic-button", { key: 'e4e1f2a4e67d7a4acb0d18765ba02ea6f57b5557', id: "clear-button", "aria-label": "clear selected date", ref: (el) => (this.clearButtonEl = el), variant: "tertiary", size: size, onClick: this.clearButtonClickHandler, onKeyDown: this.clearButtonKeyDownHandler, disabled: this.value === "" ||
                 this.value === null ||
                 this.value === undefined }, "Clear"))))))));
     }
@@ -1043,7 +1060,7 @@ export class DatePicker {
                     }
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The format in which the date will be displayed."
@@ -1063,7 +1080,7 @@ export class DatePicker {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "If `true`, the disabled state will be set."
@@ -1079,7 +1096,7 @@ export class DatePicker {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1099,7 +1116,7 @@ export class DatePicker {
                 "mutable": false,
                 "complexType": {
                     "original": "IcWeekDays[]",
-                    "resolved": "IcWeekDays[]",
+                    "resolved": "IcWeekDays[] | undefined",
                     "references": {
                         "IcWeekDays": {
                             "location": "import",
@@ -1123,7 +1140,7 @@ export class DatePicker {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1143,7 +1160,7 @@ export class DatePicker {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1163,7 +1180,7 @@ export class DatePicker {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1183,7 +1200,7 @@ export class DatePicker {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1203,7 +1220,7 @@ export class DatePicker {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1223,7 +1240,7 @@ export class DatePicker {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1262,7 +1279,7 @@ export class DatePicker {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1282,7 +1299,7 @@ export class DatePicker {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1301,7 +1318,7 @@ export class DatePicker {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1349,7 +1366,7 @@ export class DatePicker {
                     }
                 },
                 "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`."
@@ -1374,7 +1391,7 @@ export class DatePicker {
                     }
                 },
                 "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`."
@@ -1390,7 +1407,7 @@ export class DatePicker {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1434,7 +1451,7 @@ export class DatePicker {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1454,7 +1471,7 @@ export class DatePicker {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1474,7 +1491,7 @@ export class DatePicker {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1494,7 +1511,7 @@ export class DatePicker {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1514,7 +1531,7 @@ export class DatePicker {
                 "mutable": false,
                 "complexType": {
                     "original": "IcSizes",
-                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "resolved": "\"large\" | \"medium\" | \"small\" | undefined",
                     "references": {
                         "IcSizes": {
                             "location": "import",
@@ -1550,7 +1567,7 @@ export class DatePicker {
                     }
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The first day of the week. `0` for Sunday, `1` for Monday, etc.\nDefault is Monday."
@@ -1566,7 +1583,7 @@ export class DatePicker {
                 "mutable": false,
                 "complexType": {
                     "original": "IcThemeMode",
-                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
                     "references": {
                         "IcThemeMode": {
                             "location": "import",
@@ -1592,7 +1609,7 @@ export class DatePicker {
                 "mutable": false,
                 "complexType": {
                     "original": "IcInformationStatusOrEmpty",
-                    "resolved": "\"\" | \"error\" | \"success\" | \"warning\"",
+                    "resolved": "\"\" | \"error\" | \"success\" | \"warning\" | undefined",
                     "references": {
                         "IcInformationStatusOrEmpty": {
                             "location": "import",
@@ -1618,7 +1635,7 @@ export class DatePicker {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1638,7 +1655,7 @@ export class DatePicker {
                 "mutable": true,
                 "complexType": {
                     "original": "string | Date | null | undefined",
-                    "resolved": "Date | string",
+                    "resolved": "Date | null | string | undefined",
                     "references": {
                         "Date": {
                             "location": "global",