@ukic/canary-web-components 3.0.0-canary.21 → 3.0.0-canary.22

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

@@ -235,6 +235,10 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
          * If `true`, days outside the current month will be visible in the date picker.
          */
         this.showDaysOutsideMonth = true;
+        /**
+         * If 'true', the 'X' button on the date input will be visible, which clears the field.
+         */
+        this.showClearButton = true;
         /**
          * If `true`, the `Clear` button on the date picker will be visible.
          */
@@ -943,6 +947,9 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
             if (this.required) {
                 inputProps.required = this.required;
             }
+            if (this.showClearButton !== null) {
+                inputProps.showClearButton = this.showClearButton;
+            }
             if (this.size !== "medium") {
                 inputProps.size = this.size;
             }
@@ -1119,33 +1126,33 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
             yesterday.setDate(minDate.getDate() - 1);
             minDay = yesterday;
         }
-        return (h(Host, { key: 'f3e096ad765455113084b5c26571383bda7d3d75', onKeyDown: this.keyDownHandler, class: {
+        return (h(Host, { key: '531d49da81ba4f0d37c6a3644200e2b4354ef362', onKeyDown: this.keyDownHandler, class: {
                 [`ic-date-picker-${size}`]: true,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("div", { key: 'db290c92bf7a22901f7888693fdd4a501b75da0f', class: "date-input-container" }, h("ic-date-input", Object.assign({ key: '1f2b3537e582d1abb5370e4b73f7d6e4bfb7ff6c', ref: (el) => (this.inputEl = el) }, dateInputProps), h("slot", { key: 'e1bd896a33c3fe7468287e19c3959809d2e12831', name: "helper-text", slot: "helper-text" }))), calendarOpen && (h("div", { key: '3e15ffe8f4e3859197f212c232641e48ed9977fa' }, h("span", { key: '5840a049f8f278395fc09a9ed4d63ac00a1dc00e', id: "dialog-description", class: "sr-only" }, dialogDescription), h("div", { key: '4c0dcd3ba00e077ccc7feee92389cc1b6ab33e7e', role: "dialog", "aria-modal": "true", "aria-label": dialogLabel, "aria-describedBy": "dialog-description", class: {
+            } }, h("div", { key: '4481290ae95d3ae086e0d50662c200b292c082ac', class: "date-input-container" }, h("ic-date-input", Object.assign({ key: '56558836ac8b41e61149b007ac1cf16b506f8998', ref: (el) => (this.inputEl = el) }, dateInputProps), h("slot", { key: 'de8165f61fa5333e8ca05ed0a18efbcb22578e1f', name: "helper-text", slot: "helper-text" }))), calendarOpen && (h("div", { key: 'b5e7f219cc50107b5360779534094826ee4efeb5' }, h("span", { key: 'cebf92d9beea25c39fd0bf64ff376015ea416698', id: "dialog-description", class: "sr-only" }, dialogDescription), h("div", { key: '6ab22c6b303a6b91744584607fc6ad1fb349d035', 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: '5b273eb2c9651d28343c6626c1493858c87c35ec', ref: (el) => (this.liveRegionEl = el), id: "live-region", "aria-live": "assertive", class: "sr-only" }), h("div", { key: '1b8699fbe3f8de8b321f9bf2d84b26eee18b949a', class: {
+            }, onMouseDown: this.handleCalendarMouseDown, onClick: this.handleCalendarClick }, h("span", { key: '1d3e11ab36f7fff14524586a982ddd457e4509a1', ref: (el) => (this.liveRegionEl = el), id: "live-region", "aria-live": "assertive", class: "sr-only" }), h("div", { key: '499133f3a2f1cf5a79c7f7b9d695959d5ee76f0d', class: {
                 "month-year-nav-container": true,
-            } }, h("div", { key: 'f5390a3d685bc75bc220b5e6c25634301b3b3001', class: "month-year-nav" }, this.previousMonthButton(), h("span", { key: '23323f66c1fa8a68019f1c4dc7341d8e6d672adc', id: "select-month-hint", "aria-hidden": "true" }, monthButtonText), h("ic-button", { key: '1f6d75f9f18eee7acbb59359dab51eecb0051415', 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: '42a149729b419b69e976896a097bedd040879a09', class: "month-year-nav" }, this.previousYearButton(), h("span", { key: 'f94101cb4e146f26822856a009f9238109d8f9ce', id: "select-year-hint", "aria-hidden": "true" }, yearButtonText), h("ic-button", { key: 'f1edef2db467cabec041e67c72920ce07ef30738', 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: '30d7102d463465b51cce6087f9a89d4875d121fc', class: {
+            } }, h("div", { key: '519bf58003c5ca9f5bccc59e7c31a25c096e340d', class: "month-year-nav" }, this.previousMonthButton(), h("span", { key: 'a4e70c8464318199e86df119481d5f7519e8c8ee', id: "select-month-hint", "aria-hidden": "true" }, monthButtonText), h("ic-button", { key: '3c91455809a1630355b0f9f1e757da9e15ac04b6', 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: '8a9ba32ac36960d01070cab55953ff1bee71fa89', class: "month-year-nav" }, this.previousYearButton(), h("span", { key: '038dfdff3ab2164d6eb2a18803f96a293ee26503', id: "select-year-hint", "aria-hidden": "true" }, yearButtonText), h("ic-button", { key: '3a6fd2d52d8d3f52229aa08fc193ea5094825e26', 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: '78ca07c7e9b5b4737f6bef0fa40c9fb6fdeeb71c', class: {
                 calendar: true,
                 hidden: monthPickerVisible || yearPickerVisible,
-            }, onKeyDown: this.handleCalendarKeyDown }, h("div", { key: '4b4bfc6e263a68db7706310b87b0176b67652bbe', class: "weekdays", "aria-hidden": "true" }, orderedDaysOfWeek.map((dayName) => {
+            }, onKeyDown: this.handleCalendarKeyDown }, h("div", { key: 'f740560dfc757dce70213118d6a0faacd415e188', 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: '57ceb661dd3a493e49f7eea698c04125d81460d6', class: "calendar-days-container" }, this.currMonthView.map((day) => {
+        })), h("div", { key: 'c77c16fd12c3deeb1891a712ba709e6f29c970b5', 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: 'da06f9d055aa5e45a05e56171122ae63be7fc129', class: {
+        })))), h("div", { key: '3e2853724e6401a48c7307940d00a43f64cd941a', class: {
                 "month-picker-container": true,
                 hidden: !monthPickerVisible,
-            } }, monthPickerVisible && (h(MonthPicker, { key: 'af37ea4853db314da047c8d8156564897898cf5f', size: size, onSelectMonth: this.handleSelectMonth, monthInView: monthInView, focussedMonth: focussedMonth, onKeyDown: this.monthPickerKeyDownHandler, focussedMonthRef: this.setFocussedMonthEl, minDate: minDate, maxDate: maxDate, yearInView: yearInView }))), h("div", { key: '8d57c717c9e693ea67b41d08a990a898adeec130', class: {
+            } }, monthPickerVisible && (h(MonthPicker, { key: 'f3434bb526e456e46d219e7204f8e92a9c91c4b6', size: size, onSelectMonth: this.handleSelectMonth, monthInView: monthInView, focussedMonth: focussedMonth, onKeyDown: this.monthPickerKeyDownHandler, focussedMonthRef: this.setFocussedMonthEl, minDate: minDate, maxDate: maxDate, yearInView: yearInView }))), h("div", { key: '540673c1426c75f0b7b2d96a07f8437fca64457a', class: {
                 "year-picker-container": true,
                 hidden: !yearPickerVisible,
-            } }, yearPickerVisible && (h(YearPicker, { key: '71b214123bd08a4808f25eae9e3e90ad82d56460', 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: '9d6cd8b19f7adf76c8f5249e985cdcdb8dd1f0ca', class: {
+            } }, yearPickerVisible && (h(YearPicker, { key: 'd41bc6ef23d9112681165fcd423cd6fa290bce63', 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: '2cbd003e0f17165e1a9ce1c2b84eb4cff4399a72', class: {
                 "bottom-buttons": true,
                 "no-today": !showPickerTodayButton,
-            } }, showPickerTodayButton && (h("ic-button", { key: '75ab2fd1ce1d41d805e4082fe5d8e215782b59b4', 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: '5a60dca9237999a2ecbaaad8c254527178bfc94c', 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: '524161f633a38ed896c1416ca2b21f4f7cb09939', 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: 'a4525f0a27fe97bfd2ae01ef0d9205e596a09b29', 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"))))))));
     }
@@ -1189,6 +1196,7 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
         "openAtDate": [1, "open-at-date"],
         "required": [4],
         "showDaysOutsideMonth": [4, "show-days-outside-month"],
+        "showClearButton": [4, "show-clear-button"],
         "showPickerClearButton": [4, "show-picker-clear-button"],
         "showPickerTodayButton": [4, "show-picker-today-button"],
         "size": [1],