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

package/dist/cjs/ic-date-picker.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-8a24b20c.js');
-const dateHelpers = require('./date-helpers-c9551119.js');
-const helpers = require('./helpers-0e4c4fdd.js');
+const index = require('./index-d337cd8a.js');
+const dateHelpers = require('./date-helpers-6f70dd03.js');
+const helpers = require('./helpers-d01564f7.js');
 
 const chevron = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M9.70687 6L8.29688 7.41L12.8769 12L8.29688 16.59L9.70687 18L15.7069 12L9.70687 6Z" fill="currentColor"/>
@@ -30,7 +30,7 @@ const DayButton = ({ focussed, today, day, monthInView, onFocusDay, onBlurDay, o
         index.h("button", { class: {
                 "day-button": true,
                 "outside-month": outsideMonth,
-                "outside-range": outsideRange,
+                "outside-range": !!outsideRange,
                 hidden: outsideMonth && !showDaysOutsideMonth,
                 disabled: disabled,
                 today: today,
@@ -139,7 +139,7 @@ const DatePicker = class {
         this.dayPickerKeyboardNav = false;
         this.dialogDescription = "";
         this.focusDay = true;
-        this.liveRegionEl = null;
+        this.liveRegionEl = undefined;
         this.monthNames = [];
         this.monthInViewUpdateHandled = false;
         this.myCalendarButtonClicked = false;
@@ -166,6 +166,10 @@ const DatePicker = class {
          * If `true`, the disabled state will be set.
          */
         this.disabled = false;
+        /**
+         *  If `true`, every individual input field completed will emit an icChange event.
+         */
+        this.emitDatePartChange = false;
         /**
          * The days of the week to disable.
          */
@@ -270,11 +274,12 @@ const DatePicker = class {
             this.decadeEnd = decadeArr[10];
         };
         this.setSelectedDate = (d, emit = true) => {
+            var _a;
             if (d === null || !dateHelpers.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);
                 }
             }
         };
@@ -292,10 +297,11 @@ const DatePicker = class {
             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();
                 }
             }
@@ -311,10 +317,14 @@ const DatePicker = class {
             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) {
@@ -360,7 +370,8 @@ const DatePicker = class {
             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();
             }
@@ -482,9 +493,7 @@ const DatePicker = class {
         this.isNextYearAllowed = () => {
             return this.isYearAllowed(this.yearInView + 1);
         };
-        this.isYearAllowed = (yr) => {
-            return dateHelpers.yearInRange(yr, this.minDate, this.maxDate);
-        };
+        this.isYearAllowed = (yr) => dateHelpers.yearInRange(yr, this.minDate, this.maxDate);
         this.getMonthView = (date) => {
             const start = dateHelpers.getWeekStart(dateHelpers.getMonthStart(date), this.startOfWeek);
             const end = dateHelpers.getWeekEnd(dateHelpers.getMonthEnd(date), this.startOfWeek);
@@ -503,20 +512,23 @@ const DatePicker = class {
             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);
@@ -723,11 +735,13 @@ const DatePicker = class {
                     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;
@@ -757,10 +771,11 @@ const DatePicker = class {
             }
         };
         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;
             }
@@ -777,47 +792,50 @@ const DatePicker = class {
             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(dateHelpers.getMonthStart(this.focussedDate)).setMonth(newMonth));
-            const max = dateHelpers.getMonthEnd(min);
-            const newDate = new Date(new Date(this.focussedDate).setMonth(newMonth));
-            this.setFocussedDate(dateHelpers.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(dateHelpers.getMonthStart(this.focussedDate)).setMonth(newMonth));
+                const max = dateHelpers.getMonthEnd(min);
+                const newDate = new Date(new Date(this.focussedDate).setMonth(newMonth));
+                this.setFocussedDate(dateHelpers.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(dateHelpers.getMonthStart(this.focussedDate)).setFullYear(newYear));
-            const max = dateHelpers.getMonthEnd(min);
-            const newDate = new Date(new Date(this.focussedDate).setFullYear(newYear));
-            this.setFocussedDate(dateHelpers.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(dateHelpers.getMonthStart(this.focussedDate)).setFullYear(newYear));
+                const max = dateHelpers.getMonthEnd(min);
+                const newDate = new Date(new Date(this.focussedDate).setFullYear(newYear));
+                this.setFocussedDate(dateHelpers.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);
@@ -872,6 +890,7 @@ const DatePicker = class {
                 showClearButton: true,
                 showCalendarButton: true,
                 value: this.value,
+                emitDatePartChange: this.emitDatePartChange,
             };
             if (this.dateFormat !== DEFAULT_DATE_FORMAT) {
                 inputProps.dateFormat = this.dateFormat;
@@ -888,16 +907,16 @@ const DatePicker = class {
                     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) {
@@ -1089,35 +1108,38 @@ const DatePicker = class {
             : "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 (index.h(index.Host, { key: '59530924b1c1a8701fe9d568dda744acbb9f9429', onKeyDown: this.keyDownHandler, class: {
+        return (index.h(index.Host, { key: 'cc90bc5878c0b27ef385c662cbe9e294af725f7d', onKeyDown: this.keyDownHandler, class: {
                 [`ic-date-picker-${size}`]: true,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, index.h("div", { key: '02b510a9196a1c64ac5805bacda63070486a88a6', class: "date-input-container" }, index.h("ic-date-input", Object.assign({ key: '85985258b70c8eef02db8ec330d144aef0c07c00', ref: (el) => (this.inputEl = el) }, dateInputProps))), calendarOpen && (index.h("div", { key: '0c0de6d01a028c5c6bd0bf0e60313055ad69c4fb' }, index.h("span", { key: '3710d052f35c166c73ae17a4bff3866ae31988d2', id: "dialog-description", class: "sr-only" }, dialogDescription), index.h("div", { key: '38cc8d6f732d6290a8a489e6b4f283ad5f8546b1', role: "dialog", "aria-modal": "true", "aria-label": dialogLabel, "aria-describedBy": "dialog-description", class: {
+            } }, index.h("div", { key: '65d2149e34caf284fa187c3b2dd8ed21d6bb5a44', class: "date-input-container" }, index.h("ic-date-input", Object.assign({ key: '2ae06cec893443c8a300a0faa3bec5c7b9b4a652', ref: (el) => (this.inputEl = el) }, dateInputProps))), calendarOpen && (index.h("div", { key: '81bf1e0fc12cc1180e5dee420e6792be18860789' }, index.h("span", { key: '12198d7c301931a0d1dc046e57e736ad872362bd', id: "dialog-description", class: "sr-only" }, dialogDescription), index.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 }, index.h("span", { key: 'de970be8432eb42903d10c751dd7f5693032433b', ref: (el) => (this.liveRegionEl = el), id: "live-region", "aria-live": "assertive", class: "sr-only" }), index.h("div", { key: '1f61a0183d227713f12202a7eacc9eee8e696376', class: {
+            }, onMouseDown: this.handleCalendarMouseDown, onClick: this.handleCalendarClick }, index.h("span", { key: '210fa127f438a467e7fe89c5a6e900cd4d69ec2a', ref: (el) => (this.liveRegionEl = el), id: "live-region", "aria-live": "assertive", class: "sr-only" }), index.h("div", { key: '500e2e2dbd101bb0f770d4ba8cd793dc9c4ebb57', class: {
                 "month-year-nav-container": true,
-            } }, index.h("div", { key: '5aa91f8d46ea2fb6781880dbed605827e676f8b1', class: "month-year-nav" }, this.previousMonthButton(), index.h("span", { key: 'ad9538194a76899bd59f46ed9b115e95c44435f0', id: "select-month-hint", "aria-hidden": "true" }, monthButtonText), index.h("ic-button", { key: '6d75e6cad6a70036350579d02b610233f9471149', 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()), index.h("div", { key: '122524d109dbb355bbf7aa78ba505edcad8a0614', class: "month-year-nav" }, this.previousYearButton(), index.h("span", { key: 'bd65e30ab89c47e85fbce0ab74d8252fb1a0055b', id: "select-year-hint", "aria-hidden": "true" }, yearButtonText), index.h("ic-button", { key: 'd7f1ba0cf97bfe1483357de887730c63f4d0b3f0', 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) && (index.h("div", { key: 'cb82883365a79cd430017f7fcb761e8ba2573c32', class: {
+            } }, index.h("div", { key: '36ce54eee3ff375aa188e8ebccb56e767d43a64f', class: "month-year-nav" }, this.previousMonthButton(), index.h("span", { key: 'e5ff7fe31f7b7ead833a4b46430ee59688516b1d', id: "select-month-hint", "aria-hidden": "true" }, monthButtonText), index.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()), index.h("div", { key: '832776e6191be307b0da81a8443f21ab799e5a56', class: "month-year-nav" }, this.previousYearButton(), index.h("span", { key: '46cdeb8c52e33b5b3b520ef225887a42fc1bf058', id: "select-year-hint", "aria-hidden": "true" }, yearButtonText), index.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) && (index.h("div", { key: '6467d4df41dd58ff2b1578bcdbfec543e1b97e79', class: {
                 calendar: true,
                 hidden: monthPickerVisible || yearPickerVisible,
-            }, onKeyDown: this.handleCalendarKeyDown }, index.h("div", { key: '7ec2ee64c0ed75bf2a7f2a6e860d56a05583bf40', class: "weekdays", "aria-hidden": "true" }, orderedDaysOfWeek.map((dayName) => {
+            }, onKeyDown: this.handleCalendarKeyDown }, index.h("div", { key: 'b2852f026f9f5a10d53a82062e194d128bb19ba4', class: "weekdays", "aria-hidden": "true" }, orderedDaysOfWeek.map((dayName) => {
             const header = size === "small" ? dayName.charAt(0) : dayName;
             return (index.h("div", { class: "calendar-day-header" }, index.h("ic-typography", { variant: "caption" }, header)));
-        })), index.h("div", { key: 'dbc8e69226b9ed38bf51f05f44f688be5720a2ac', class: "calendar-days-container" }, this.currMonthView.map((day) => (index.h(DayButton, { day: day, disableDay: this.disableDays.includes(Number(day.getDay())), today: dateHelpers.dateMatches(day, this.today), selected: dateHelpers.dateMatches(day, this.selectedDate), focussed: dateHelpers.dateMatches(day, this.focussedDate), inRange: dateHelpers.dateInRange(day, minDay, maxDate), monthInView: monthInView, onSelectDay: this.handleSelectDay, focussedDayRef: this.setFocussedDayEl, onFocusDay: this.onDayButtonFocusHandler, onBlurDay: this.onDayButtonBlurHandler, showDaysOutsideMonth: this.showDaysOutsideMonth })))))), index.h("div", { key: 'ae8bc96be8bd8a97ddb952afb04a383b69b88653', class: {
+        })), index.h("div", { key: '7213ab26144c1cade134c5acec0c261631772631', class: "calendar-days-container" }, this.currMonthView.map((day) => {
+            var _a;
+            return (index.h(DayButton, { day: day, disableDay: (_a = this.disableDays) === null || _a === void 0 ? void 0 : _a.includes(Number(day.getDay())), today: dateHelpers.dateMatches(day, this.today), selected: dateHelpers.dateMatches(day, this.selectedDate), focussed: dateHelpers.dateMatches(day, this.focussedDate), inRange: dateHelpers.dateInRange(day, minDay, maxDate), monthInView: monthInView, onSelectDay: this.handleSelectDay, focussedDayRef: this.setFocussedDayEl, onFocusDay: this.onDayButtonFocusHandler, onBlurDay: this.onDayButtonBlurHandler, showDaysOutsideMonth: this.showDaysOutsideMonth }));
+        })))), index.h("div", { key: '49df75ac411965cac3efc5a9f5c8345f931d60f9', class: {
                 "month-picker-container": true,
                 hidden: !monthPickerVisible,
-            } }, monthPickerVisible && (index.h(MonthPicker, { key: 'f6227d14a2d4db07a8fe16cb531a573d125d715b', size: size, onSelectMonth: this.handleSelectMonth, monthInView: monthInView, focussedMonth: focussedMonth, onKeyDown: this.monthPickerKeyDownHandler, focussedMonthRef: this.setFocussedMonthEl, minDate: minDate, maxDate: maxDate, yearInView: yearInView }))), index.h("div", { key: '5eb0c8a44ee68394f453e0f5240f0647c85fdd5f', class: {
+            } }, monthPickerVisible && (index.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 }))), index.h("div", { key: '0780257482c6fa52e35b4a21c40ce4418d94ca1b', class: {
                 "year-picker-container": true,
                 hidden: !yearPickerVisible,
-            } }, yearPickerVisible && (index.h(YearPicker, { key: 'df83d40f781654acc445af4ca93e56eb4507fe9c', 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 }))), index.h("div", { key: 'ef1d29f341f868d5a35f31595cabbb2aac97fc76', class: {
+            } }, yearPickerVisible && (index.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 }))), index.h("div", { key: '668baa66a596cfffae88374648d99e3ab57606fa', class: {
                 "bottom-buttons": true,
                 "no-today": !showPickerTodayButton,
-            } }, showPickerTodayButton && (index.h("ic-button", { key: '596dc8d6aa888c4a300276eb1e18f6ca4284dec6', 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 && (index.h("ic-button", { key: '8cce911a05aa3d009da3a9fe863939604bbe126a', 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 && (index.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 && (index.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"))))))));
     }