@ukic/canary-web-components 2.0.0-canary.37 → 2.0.0-canary.39

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

@@ -1,7 +1,7 @@
 import { Host, h, } from "@stencil/core";
 import { createDate, clampDate, dateMatches, dateInRange, getMonthStart, getMonthEnd, getWeekEnd, getWeekStart, yearInRange, } from "../../utils/date-helpers";
 import { stringEnumToArray, onComponentRequiredPropUndefined, removeDisabledFalse, } from "../../utils/helpers";
-import { IcWeekDays, IcShortDayNames, IcDateInputMonths, } from "../../utils/types";
+import { IcDateInputMonths, IcDayNames, IcShortDayNames, IcWeekDays, } from "../../utils/types";
 import chevron from "../../assets/chevron-icon.svg";
 import { DayButton } from "./ic-day-button";
 import { MonthPicker } from "./ic-month-picker";
@@ -41,12 +41,30 @@ export class DatePicker {
             this.decadeStart = decadeArr[1];
             this.decadeEnd = decadeArr[10];
         };
+        this.notifyScreenReaderSelectedDate = () => {
+            const dayNames = stringEnumToArray(IcDayNames);
+            const months = stringEnumToArray(IcDateInputMonths);
+            this.selectedDateInfoEl.textContent = this.selectedDate
+                ? `Selected date: ${dayNames[this.selectedDate.getDay()]}, ${this.selectedDate.getDate()} ${months[this.selectedDate.getMonth()]} ${this.selectedDate.getFullYear()}`
+                : "Selected date cleared";
+        };
         this.setSelectedDate = (d, emit = true) => {
             if (d === null || !dateMatches(d, this.selectedDate)) {
                 this.selectedDate = d;
                 this.value = d;
                 if (emit) {
-                    this.inputEl.triggerIcChange(d);
+                    if (this.inputEl) {
+                        this.inputEl.triggerIcChange(d);
+                    }
+                    else {
+                        if (this.selectedDate) {
+                            this.setFocussedDate(this.selectedDate);
+                        }
+                        this.icSelectedDateChange.emit({ value: d });
+                        if (!this.showDateInput && this.selectedDateInfoEl) {
+                            this.notifyScreenReaderSelectedDate();
+                        }
+                    }
                 }
             }
         };
@@ -61,13 +79,17 @@ export class DatePicker {
             event.stopImmediatePropagation();
         };
         this.handleDocumentClick = () => {
-            this.calendarOpen = false;
+            if (this.showDateInput) {
+                this.calendarOpen = false;
+            }
         };
         this.keyDownHandler = (event) => {
             if (event.key === "Escape") {
                 if (this.calendarOpen) {
                     this.closeButtonClickHandler();
-                    this.inputEl.setCalendarFocus();
+                    if (this.inputEl) {
+                        this.inputEl.setCalendarFocus();
+                    }
                     event.stopImmediatePropagation();
                 }
             }
@@ -77,7 +99,9 @@ export class DatePicker {
             }
         };
         this.closeButtonClickHandler = () => {
-            this.calendarOpen = false;
+            if (this.showDateInput) {
+                this.calendarOpen = false;
+            }
         };
         this.focusFirstElement = () => {
             this.monthButtonEl.setFocus();
@@ -287,8 +311,12 @@ export class DatePicker {
         };
         this.handleSelectDay = (day) => {
             this.setSelectedDate(day);
-            this.calendarOpen = false;
-            this.inputEl.setCalendarFocus();
+            if (this.showDateInput) {
+                this.calendarOpen = false;
+                if (this.inputEl) {
+                    this.inputEl.setCalendarFocus();
+                }
+            }
         };
         this.handleSelectMonth = (month) => {
             this.moveMonths(month - this.monthInView);
@@ -705,6 +733,60 @@ export class DatePicker {
             }
             return inputProps;
         };
+        this.renderHiddenInput = () => !this.showDateInput ? (h("span", { id: this.selectedDateInfoId, class: "sr-only", "aria-live": "polite" }, h("span", { ref: (el) => (this.selectedDateInfoEl = el), role: "status" }))) : ("");
+        this.renderCalendar = () => {
+            const { monthNames, size, focussedMonth, focussedYear, monthInView, yearInView, monthPickerVisible, yearPickerVisible, orderedDaysOfWeek, decadeView, minDate, maxDate, showPickerClearButton, showPickerTodayButton, dialogDescription, } = this;
+            let monthButtonText = "";
+            if (monthPickerVisible) {
+                monthButtonText = `Use the arrow keys to change the selected month. To return to day picker view, press Enter or Space to select a month, or press Escape.`;
+            }
+            else {
+                monthButtonText = `Press Enter or Space to open month picker view or use the arrow keys to change month.`;
+            }
+            let yearButtonText = "";
+            if (yearPickerVisible) {
+                yearButtonText = `Use the arrow keys to change the selected year. To return to day picker view, press Enter or Space to select a year, or press Escape.`;
+            }
+            else {
+                yearButtonText = `Press Enter or Space to open year picker view or use the arrow keys to change the selected year.`;
+            }
+            const dialogLabel = "choose date";
+            const monthLabel = monthNames && monthNames[monthInView]
+                ? monthNames[monthInView]
+                : "Open month picker";
+            const yearLabel = this.yearInView ? this.yearInView : "Open year picker";
+            let minDay = minDate;
+            if (this.disablePast) {
+                const yesterday = new Date(minDate);
+                yesterday.setDate(minDate.getDate() - 1);
+                minDay = yesterday;
+            }
+            return (h("div", null, h("span", { id: "dialog-description", class: "sr-only" }, dialogDescription), h("div", { role: "dialog", "aria-modal": "true", "aria-label": dialogLabel, "aria-describedBy": "dialog-description", class: {
+                    "calendar-container": true,
+                    "show-date-input": this.showDateInput,
+                    "hide-date-input": !this.showDateInput,
+                    above: this.showPickerAbove,
+                }, onMouseDown: this.handleCalendarMouseDown, onClick: this.handleCalendarClick }, h("span", { ref: (el) => (this.liveRegionEl = el), id: "live-region", "aria-live": "assertive", class: "sr-only" }), h("div", { class: {
+                    "month-year-nav-container": true,
+                } }, h("div", { class: "month-year-nav" }, this.previousMonthButton(), h("span", { id: "select-month-hint", "aria-hidden": "true" }, monthButtonText), h("ic-button", { 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", { class: "month-year-nav" }, this.previousYearButton(), h("span", { id: "select-year-hint", "aria-hidden": "true" }, yearButtonText), h("ic-button", { 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", { class: {
+                    calendar: true,
+                    hidden: monthPickerVisible || yearPickerVisible,
+                }, onKeyDown: this.handleCalendarKeyDown }, h("div", { 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", { 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", { class: {
+                    "month-picker-container": true,
+                    hidden: !monthPickerVisible,
+                } }, monthPickerVisible && (h(MonthPicker, { size: size, onSelectMonth: this.handleSelectMonth, monthInView: monthInView, focussedMonth: focussedMonth, onKeyDown: this.monthPickerKeyDownHandler, focussedMonthRef: this.setFocussedMonthEl, minDate: minDate, maxDate: maxDate, yearInView: yearInView }))), h("div", { class: {
+                    "year-picker-container": true,
+                    hidden: !yearPickerVisible,
+                } }, yearPickerVisible && (h(YearPicker, { 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", { class: {
+                    "bottom-buttons": true,
+                    "no-today": !showPickerTodayButton,
+                } }, showPickerTodayButton && (h("ic-button", { 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", { 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")))), this.renderHiddenInput()));
+        };
         this.calendarOpen = false;
         this.currMonthView = [];
         this.currYearPickerView = [];
@@ -742,6 +824,7 @@ export class DatePicker {
         this.name = undefined;
         this.openAtDate = "";
         this.required = false;
+        this.showDateInput = true;
         this.showDaysOutsideMonth = true;
         this.showPickerClearButton = true;
         this.showPickerTodayButton = true;
@@ -776,6 +859,11 @@ export class DatePicker {
             this.minDate = createDate(this.min, this.dateFormat);
         }
     }
+    watchShowDateInputHandler() {
+        if (!this.showDateInput) {
+            this.calendarOpen = true;
+        }
+    }
     watchStartOfWeekHandler() {
         this.orderedDaysOfWeek = this.daysOfWeek
             .slice(this.startOfWeek)
@@ -867,13 +955,23 @@ export class DatePicker {
         this.watchMaxHandler();
         this.watchMinHandler();
         removeDisabledFalse(this.disabled, this.el);
+        this.selectedDateInfoId = `${this.inputId}-selected-date-info`;
     }
     componentWillRender() {
         this.dateInputProps = this.setDateInputProps();
+        if (!this.showDateInput) {
+            this.calendarOpen = true;
+        }
     }
     componentWillUpdate() {
         this.dateInputProps = this.setDateInputProps();
     }
+    componentDidLoad() {
+        if (!this.showDateInput && this.value) {
+            this.setSelectedDate(new Date(this.value));
+            this.setFocussedDate(this.selectedDate);
+        }
+    }
     localCalendarButtonClickHandler(ev) {
         this.myCalendarButtonClicked = true;
         if (!this.calendarOpen) {
@@ -883,61 +981,14 @@ export class DatePicker {
     }
     calendarButtonClickHandler() {
         //closes this picker if calendar button in another clicked
-        if (!this.myCalendarButtonClicked) {
+        if (!this.myCalendarButtonClicked && this.showDateInput) {
             this.calendarOpen = false;
         }
         this.myCalendarButtonClicked = false;
     }
     render() {
-        const { calendarOpen, dateInputProps, monthNames, size, focussedMonth, focussedYear, monthInView, yearInView, monthPickerVisible, yearPickerVisible, orderedDaysOfWeek, decadeView, minDate, maxDate, showPickerClearButton, showPickerTodayButton, dialogDescription, } = this;
-        let monthButtonText = "";
-        if (monthPickerVisible) {
-            monthButtonText = `Use the arrow keys to change the selected month. To return to day picker view, press Enter or Space to select a month, or press Escape.`;
-        }
-        else {
-            monthButtonText = `Press Enter or Space to open month picker view or use the arrow keys to change month.`;
-        }
-        let yearButtonText = "";
-        if (yearPickerVisible) {
-            yearButtonText = `Use the arrow keys to change the selected year. To return to day picker view, press Enter or Space to select a year, or press Escape.`;
-        }
-        else {
-            yearButtonText = `Press Enter or Space to open year picker view or use the arrow keys to change the selected year.`;
-        }
-        const dialogLabel = "choose date";
-        const monthLabel = monthNames && monthNames[monthInView]
-            ? monthNames[monthInView]
-            : "Open month picker";
-        const yearLabel = this.yearInView ? this.yearInView : "Open year picker";
-        let minDay = minDate;
-        if (this.disablePast) {
-            const yesterday = new Date(minDate);
-            yesterday.setDate(minDate.getDate() - 1);
-            minDay = yesterday;
-        }
-        return (h(Host, { onKeyDown: this.keyDownHandler, class: size }, h("div", { class: "date-input-container" }, h("ic-date-input", Object.assign({ ref: (el) => (this.inputEl = el) }, dateInputProps))), calendarOpen && (h("div", null, h("span", { id: "dialog-description", class: "sr-only" }, dialogDescription), h("div", { 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", { ref: (el) => (this.liveRegionEl = el), id: "live-region", "aria-live": "assertive", class: "sr-only" }), h("div", { class: {
-                "month-year-nav-container": true,
-            } }, h("div", { class: "month-year-nav" }, this.previousMonthButton(), h("span", { id: "select-month-hint", "aria-hidden": "true" }, monthButtonText), h("ic-button", { 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", { class: "month-year-nav" }, this.previousYearButton(), h("span", { id: "select-year-hint", "aria-hidden": "true" }, yearButtonText), h("ic-button", { 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", { class: {
-                calendar: true,
-                hidden: monthPickerVisible || yearPickerVisible,
-            }, onKeyDown: this.handleCalendarKeyDown }, h("div", { 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", { 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", { class: {
-                "month-picker-container": true,
-                hidden: !monthPickerVisible,
-            } }, monthPickerVisible && (h(MonthPicker, { size: size, onSelectMonth: this.handleSelectMonth, monthInView: monthInView, focussedMonth: focussedMonth, onKeyDown: this.monthPickerKeyDownHandler, focussedMonthRef: this.setFocussedMonthEl, minDate: minDate, maxDate: maxDate, yearInView: yearInView }))), h("div", { class: {
-                "year-picker-container": true,
-                hidden: !yearPickerVisible,
-            } }, yearPickerVisible && (h(YearPicker, { 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", { class: {
-                "bottom-buttons": true,
-                "no-today": !showPickerTodayButton,
-            } }, showPickerTodayButton && (h("ic-button", { 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", { 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"))))))));
+        const { calendarOpen, dateInputProps, keyDownHandler, renderCalendar, showDateInput, size, } = this;
+        return (h(Host, { onKeyDown: keyDownHandler, class: size }, showDateInput && (h("div", { class: "date-input-container" }, h("ic-date-input", Object.assign({ ref: (el) => (this.inputEl = el) }, dateInputProps)))), calendarOpen && renderCalendar()));
     }
     static get is() { return "ic-date-picker"; }
     static get encapsulation() { return "shadow"; }
@@ -1317,6 +1368,27 @@ export class DatePicker {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "showDateInput": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "This prop should not be used anymore. If `false` hides the date input control and just displays the calendar."
+                        }],
+                    "text": ""
+                },
+                "attribute": "show-date-input",
+                "reflect": false,
+                "defaultValue": "true"
+            },
             "showDaysOutsideMonth": {
                 "type": "boolean",
                 "mutable": false,
@@ -1529,6 +1601,26 @@ export class DatePicker {
                         }
                     }
                 }
+            }, {
+                "method": "icSelectedDateChange",
+                "name": "icSelectedDateChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the selected date has changed."
+                },
+                "complexType": {
+                    "original": "{ value: Date }",
+                    "resolved": "{ value: Date; }",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                }
             }];
     }
     static get elementRef() { return "el"; }
@@ -1548,6 +1640,9 @@ export class DatePicker {
             }, {
                 "propName": "min",
                 "methodName": "watchMinHandler"
+            }, {
+                "propName": "showDateInput",
+                "methodName": "watchShowDateInputHandler"
             }, {
                 "propName": "startOfWeek",
                 "methodName": "watchStartOfWeekHandler"