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

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

@@ -34,7 +34,7 @@ const DayButton = ({ focussed, today, day, monthInView, onFocusDay, onBlurDay, o
         h("button", { class: {
                 "day-button": true,
                 "outside-month": outsideMonth,
-                "outside-range": outsideRange,
+                "outside-range": !!outsideRange,
                 hidden: outsideMonth && !showDaysOutsideMonth,
                 disabled: disabled,
                 today: today,
@@ -145,7 +145,7 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
         this.dayPickerKeyboardNav = false;
         this.dialogDescription = "";
         this.focusDay = true;
-        this.liveRegionEl = null;
+        this.liveRegionEl = undefined;
         this.monthNames = [];
         this.monthInViewUpdateHandled = false;
         this.myCalendarButtonClicked = false;
@@ -280,11 +280,12 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
             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);
                 }
             }
         };
@@ -302,10 +303,11 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
             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();
                 }
             }
@@ -321,10 +323,14 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
             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) {
@@ -370,7 +376,8 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
             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();
             }
@@ -492,9 +499,7 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
         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);
@@ -513,20 +518,23 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
             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);
@@ -733,11 +741,13 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
                     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;
@@ -767,10 +777,11 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
             }
         };
         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;
             }
@@ -787,47 +798,50 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
             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);
@@ -899,16 +913,16 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
                     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) {
@@ -1100,35 +1114,38 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
             : "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"))))))));
     }