@ukic/canary-web-components 3.0.0-canary.27 → 3.0.0-canary.29

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

@@ -260,6 +260,10 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
          * 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.
          */
@@ -901,6 +905,7 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
                 showCalendarButton: true,
                 value: this.value,
                 emitDatePartChange: this.emitDatePartChange,
+                validationAriaLive: this.validationAriaLive,
             };
             if (this.dateFormat !== DEFAULT_DATE_FORMAT) {
                 inputProps.dateFormat = this.dateFormat;
@@ -1126,33 +1131,33 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
             yesterday.setDate(minDate.getDate() - 1);
             minDay = yesterday;
         }
-        return (h(Host, { key: '9f01e93a809b4c0dd0a702b7716617643140601e', onKeyDown: this.keyDownHandler, class: {
+        return (h(Host, { key: 'e570b8174d8e85ebe88381088d155dfc79eb66a4', 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: '746911155d83526a80676f2a6bb76f48d0c5e9f1', class: "date-input-container" }, h("ic-date-input", Object.assign({ key: 'd5c01484b4db9760040ec20d96c73dedc2f3562f', ref: (el) => (this.inputEl = el) }, dateInputProps), h("slot", { key: '4af2a51669b6b9b8e05683e3b91fca8a807eee48', name: "helper-text", slot: "helper-text" }))), calendarOpen && (h("div", { key: 'd1fa8a019c53499d5de2726a062638016d6dd750' }, h("span", { key: '034465a0f1a144899243c8642f3b6f8bb2d3be7f', id: "dialog-description", class: "sr-only" }, dialogDescription), h("div", { key: '0d8ae853e60cbf42fce8394b2944722958516c31', 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: '67b58c1c2a95cd0602e6e78b4b7c92665d9fa450', ref: (el) => (this.liveRegionEl = el), id: "live-region", "aria-live": "assertive", class: "sr-only" }), h("div", { key: '90d97f9401bb8871dc53d6141240bf5cdd7a6e37', 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: '1844f84afbad819901ff52c9467df271d3dfa1e7', class: "month-year-nav" }, this.previousMonthButton(), h("span", { key: '6773a9e063b3f2b743ed61e84439a512536764dd', id: "select-month-hint", "aria-hidden": "true" }, monthButtonText), h("ic-button", { key: '7a7aff0e3d54d572556d8cd971defc2c9f79d92e', 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: '50133dc47a4e8e2c3e4e1d5373a92b2d7112d5ba', class: "month-year-nav" }, this.previousYearButton(), h("span", { key: 'ed7777002bb64ea4fbd3e0e16783061ccfcceb93', id: "select-year-hint", "aria-hidden": "true" }, yearButtonText), h("ic-button", { key: '9a81be66d4a62f506838f68020c6dd0192ff4ba3', 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: '2e6a4395860e1d44aee979b0a7e0a5aa9a09ac39', 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: '743dffc1a5fbb1a40456e47be2dce866d991f19d', 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: '30a8310c3ee80c9c0a85fff417c13fb7961a958c', 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: '202e8edaafb640264c52f2c2254de4124d0f03f7', 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: '3680653a0f840b509cfab1079e12590f037c5b1f', size: size, onSelectMonth: this.handleSelectMonth, monthInView: monthInView, focussedMonth: focussedMonth, onKeyDown: this.monthPickerKeyDownHandler, focussedMonthRef: this.setFocussedMonthEl, minDate: minDate, maxDate: maxDate, yearInView: yearInView }))), h("div", { key: '2e52f56752747794514a81b4bbe13e6bd7810680', 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: 'dbcf70511028f9be36dd859db8e0e7549f183ad9', 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: '7d658ffc586f119f8ca3e6d2fc3cf244a5c72dee', 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: '0e97ccab194a021105ddec5b9e6bdd20681e2390', 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: 'c3d24232ba991e18247ed07f14e519a8d17a8f19', 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"))))))));
     }
@@ -1202,6 +1207,7 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
         "size": [1],
         "startOfWeek": [2, "start-of-week"],
         "theme": [1],
+        "validationAriaLive": [1, "validation-aria-live"],
         "validationStatus": [1, "validation-status"],
         "validationText": [1, "validation-text"],
         "value": [1025],