@ukic/canary-web-components 3.0.0-canary.26 → 3.0.0-canary.28

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

@@ -250,6 +250,10 @@ const DatePicker = class {
          * Sets the date picker to the dark or light theme colors. "inherit" will set the color based on the system settings or ic-theme component.
          */
         this.theme = "inherit";
+        /**
+         * The value of the `aria-live` attribute on the validation message.
+         */
+        this.validationAriaLive = "polite";
         /**
          * The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in date validation.
          */
@@ -891,6 +895,7 @@ const DatePicker = class {
                 showCalendarButton: true,
                 value: this.value,
                 emitDatePartChange: this.emitDatePartChange,
+                validationAriaLive: this.validationAriaLive,
             };
             if (this.dateFormat !== DEFAULT_DATE_FORMAT) {
                 inputProps.dateFormat = this.dateFormat;
@@ -1116,33 +1121,33 @@ const DatePicker = class {
             yesterday.setDate(minDate.getDate() - 1);
             minDay = yesterday;
         }
-        return (h(Host, { key: '9f01e93a809b4c0dd0a702b7716617643140601e', onKeyDown: this.keyDownHandler, class: {
+        return (h(Host, { key: 'b2137a0ddce74eafda6be2472afb1793cbf68eef', onKeyDown: this.keyDownHandler, class: {
                 [`ic-date-picker-${size}`]: true,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("div", { key: '8c4e6a6b965562994667acf2e2f12e79cfb7f026', class: "date-input-container" }, h("ic-date-input", Object.assign({ key: '8baa5a1ba1f5042554dcc53f26945a872e6d62ca', ref: (el) => (this.inputEl = el) }, dateInputProps), h("slot", { key: 'ee77883989839f1e375e82e19a4e68dad539606f', name: "helper-text", slot: "helper-text" }))), calendarOpen && (h("div", { key: 'b6885a1077a70c25cf107be2e97e21bfb3065005' }, h("span", { key: 'e06f399f1b71353f595532fe4d75679c9a30585c', id: "dialog-description", class: "sr-only" }, dialogDescription), h("div", { key: '3b9e98f7360131d40e34072162f5b1b3a62df79b', role: "dialog", "aria-modal": "true", "aria-label": dialogLabel, "aria-describedBy": "dialog-description", class: {
+            } }, h("div", { key: '642c68aca8dac1c2c65d6fc30da6fbf7cae083e9', class: "date-input-container" }, h("ic-date-input", Object.assign({ key: '7c360a109491013c58b40d0dde1cea2fa8bdf49d', ref: (el) => (this.inputEl = el) }, dateInputProps), h("slot", { key: 'e26b8ae6d4bd987ed81bb193a3de998372479ba5', name: "helper-text", slot: "helper-text" }))), calendarOpen && (h("div", { key: '4e97c468fb44045378e5a936f3f40a49e4eba65d' }, h("span", { key: 'd619d8b0db95cc30b36b4499872b29cbf25cfec2', id: "dialog-description", class: "sr-only" }, dialogDescription), h("div", { key: 'd84f35cdcff05860927ffc0f2541ebe10971937d', 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: '8b9d2af7ec25c7f4390b6367ba61d1cc4edc6862', ref: (el) => (this.liveRegionEl = el), id: "live-region", "aria-live": "assertive", class: "sr-only" }), h("div", { key: '8de6382adeab06868cc3679812c9dc7003a0dc38', class: {
+            }, onMouseDown: this.handleCalendarMouseDown, onClick: this.handleCalendarClick }, h("span", { key: 'e17eb60cf60cae2ddfdc620c8170f3fd20c8948f', ref: (el) => (this.liveRegionEl = el), id: "live-region", "aria-live": "assertive", class: "sr-only" }), h("div", { key: 'e5553e29abf290e5e38f7a111946bd4bb9cf0f34', class: {
                 "month-year-nav-container": true,
-            } }, h("div", { key: '595f1d3b587316a0a8a9401759802794379bb01a', class: "month-year-nav" }, this.previousMonthButton(), h("span", { key: 'db4136ca3865227558dce4bf7d53ff9ed745be56', id: "select-month-hint", "aria-hidden": "true" }, monthButtonText), h("ic-button", { key: '58856c4d545e0c925ff484f0268bb15c2359cb43', 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: 'd43213b8bf2c1850d3b2edc7abac54b9a601e862', class: "month-year-nav" }, this.previousYearButton(), h("span", { key: 'ba3bd8c4eed337839606019aff6f7a03c5c35b3a', id: "select-year-hint", "aria-hidden": "true" }, yearButtonText), h("ic-button", { key: '15c6ec0144f58dc3c76360f7ccfa28000c36af77', 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: '913a72924b2cc1db4b398a1faecfa2cf1bf4be42', class: {
+            } }, h("div", { key: '92ac58ac5dd9df901278bd025cf914f80e480d85', class: "month-year-nav" }, this.previousMonthButton(), h("span", { key: '27da769612a75c1e902a3167d7e9cb348fdfe343', id: "select-month-hint", "aria-hidden": "true" }, monthButtonText), h("ic-button", { key: 'a7e05080ddf126e9446bcf977ef4bec599ab953a', 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: '9287686fe19a31a1cea431402ec91eb33463a859', class: "month-year-nav" }, this.previousYearButton(), h("span", { key: '49bff3660edba939bb848a052b2904d81ce2ee54', id: "select-year-hint", "aria-hidden": "true" }, yearButtonText), h("ic-button", { key: '9f05b2770f7c14c976f6c3f09a1661856f1a57f8', 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: '1a7880de3748d7d033a43599aabd2798af90f32b', class: {
                 calendar: true,
                 hidden: monthPickerVisible || yearPickerVisible,
-            }, onKeyDown: this.handleCalendarKeyDown }, h("div", { key: '5f9784f58378b05de6e52a2763acab163ab6e3e5', class: "weekdays", "aria-hidden": "true" }, orderedDaysOfWeek.map((dayName) => {
+            }, onKeyDown: this.handleCalendarKeyDown }, h("div", { key: '0a3e3df8eab3fb77e1ce9c2550c20cf160f4f650', 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: '1c1cfe77f48e7b50e6a014db13a597b924baab06', class: "calendar-days-container" }, this.currMonthView.map((day) => {
+        })), h("div", { key: 'f2415a435dea0633bd42657f9f19bd3bd49e6936', 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: '8b064369e1271b56085a85e0c00822ff7232d6e8', class: {
+        })))), h("div", { key: '1ed1a8c793883412ded234f949a7e7b65e66c414', class: {
                 "month-picker-container": true,
                 hidden: !monthPickerVisible,
-            } }, monthPickerVisible && (h(MonthPicker, { key: 'cdd9f6ccb301355eb31a1607413396f44b828ca9', size: size, onSelectMonth: this.handleSelectMonth, monthInView: monthInView, focussedMonth: focussedMonth, onKeyDown: this.monthPickerKeyDownHandler, focussedMonthRef: this.setFocussedMonthEl, minDate: minDate, maxDate: maxDate, yearInView: yearInView }))), h("div", { key: 'a629d2297686220a678d2ba7870fcc386b735c84', class: {
+            } }, monthPickerVisible && (h(MonthPicker, { key: 'd847bce743c2c7289184bb6cb881d81639986934', size: size, onSelectMonth: this.handleSelectMonth, monthInView: monthInView, focussedMonth: focussedMonth, onKeyDown: this.monthPickerKeyDownHandler, focussedMonthRef: this.setFocussedMonthEl, minDate: minDate, maxDate: maxDate, yearInView: yearInView }))), h("div", { key: 'e56d5c9d5a31b6b3f530ac96b81182720ef264c8', class: {
                 "year-picker-container": true,
                 hidden: !yearPickerVisible,
-            } }, yearPickerVisible && (h(YearPicker, { key: '113dfbbb61d28495a6aa0ec0c2d2aa6be1c3e881', 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: '5a3a56a0fe0af5771e88a5d6573b5b4e2e491d4f', class: {
+            } }, yearPickerVisible && (h(YearPicker, { key: 'd40cc0d0384bb04d63628a4e21f9e7cec0fe1c5f', 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: 'f59442e70666f9a8216e1657d2e1099b2436e376', class: {
                 "bottom-buttons": true,
                 "no-today": !showPickerTodayButton,
-            } }, showPickerTodayButton && (h("ic-button", { key: '67e78d82526a164797c8dfa3c60b4eff27f77193', 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: 'cd6f21520ba94b85cc078b4478ff3dffaac2bb15', 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: '506f36d5bec283f11df7cbdc3431f4f5bd5a80f6', 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: 'ad295135a146065f627b66081ad96a1820b144ce', 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"))))))));
     }