@ukic/canary-web-components 2.0.0-canary.9 → 3.0.0-canary.2

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

@@ -455,12 +455,12 @@ video {
   --input-field-width: var(--input-width, 19.125rem);
 }
 
-:host(.large) {
+:host(.ic-date-picker-large) {
   --month-button-width: 6.3125rem;
   --input-field-width: var(--input-width, 21.125rem);
 }
 
-:host(.small) {
+:host(.ic-date-picker-small) {
   --month-button-width: 6.25rem;
   --input-field-width: var(--input-width, 17.125rem);
 }
@@ -493,12 +493,12 @@ ic-date-input {
   animation: fade-in-calendar var(--ic-transition-duration-slow);
 }
 
-:host(.small) .calendar-container {
+:host(.ic-date-picker-small) .calendar-container {
   min-width: 17rem;
   max-width: 21.5rem;
 }
 
-:host(.large) .calendar-container {
+:host(.ic-date-picker-large) .calendar-container {
   min-width: 21rem;
   max-width: 25.5rem;
 }
@@ -536,13 +536,13 @@ ic-date-input {
   row-gap: var(--ic-space-xxs);
 }
 
-:host(.small) .month-picker,
-:host(.small) .year-picker {
+:host(.ic-date-picker-small) .month-picker,
+:host(.ic-date-picker-small) .year-picker {
   width: 13.125rem;
 }
 
-:host(.large) .month-picker,
-:host(.large) .year-picker {
+:host(.ic-date-picker-large) .month-picker,
+:host(.ic-date-picker-large) .year-picker {
   width: 20rem;
 }
 
@@ -578,7 +578,7 @@ ic-date-input {
   padding-right: var(--ic-space-lg);
 }
 
-:host(.small) .prev-decade .year-button::part(button) {
+:host(.ic-date-picker-small) .prev-decade .year-button::part(button) {
   padding-left: 0;
   padding-right: calc(var(--ic-space-lg) + var(--ic-space-xxs));
 }
@@ -593,8 +593,8 @@ ic-date-input {
   padding-left: var(--ic-space-lg);
 }
 
-:host(.small) .next-decade .year-button::part(button),
-:host(.large) .next-decade .year-button::part(button) {
+:host(.ic-date-picker-small) .next-decade .year-button::part(button),
+:host(.ic-date-picker-large) .next-decade .year-button::part(button) {
   padding-left: var(--ic-space-xl);
 }
 
@@ -607,7 +607,7 @@ ic-date-input {
   animation: fade-in-buttons var(--ic-transition-duration-slow);
 }
 
-:host(.small) .bottom-buttons {
+:host(.ic-date-picker-small) .bottom-buttons {
   padding-top: var(--ic-space-xxs);
 }
 
@@ -628,11 +628,11 @@ ic-date-input {
   animation: fade-in-buttons var(--ic-transition-duration-slow);
 }
 
-:host(.large) .calendar {
+:host(.ic-date-picker-large) .calendar {
   width: 19.25rem;
 }
 
-:host(.small) .calendar {
+:host(.ic-date-picker-small) .calendar {
   padding-bottom: var(--ic-space-xxs);
   width: 14rem;
 }
@@ -657,11 +657,11 @@ ic-date-input {
   padding: var(--ic-space-xxs) 0;
 }
 
-:host(.small) .calendar-days-container {
+:host(.ic-date-picker-small) .calendar-days-container {
   padding: var(--ic-space-xxxs) 0;
 }
 
-:host(.large) .calendar-days-container {
+:host(.ic-date-picker-large) .calendar-days-container {
   padding: var(--ic-space-xs) 0;
 }
 
@@ -673,13 +673,14 @@ ic-date-input {
   align-items: center;
 }
 
-:host(.small) .calendar-day-header,
-:host(.large) .calendar-day-header {
+:host(.ic-date-picker-small) .calendar-day-header,
+:host(.ic-date-picker-large) .calendar-day-header {
   padding: var(--ic-space-xxs);
 }
 
 :host .calendar-day-header ic-typography {
-  color: var(--ic-color-tertiary-text);
+  --ic-typography-color: var(--ic-color-text-tertiary);
+
   text-align: center;
 }
 
@@ -691,12 +692,12 @@ ic-date-input {
   height: 2.25rem;
 }
 
-:host(.small) .day-button-container {
+:host(.ic-date-picker-small) .day-button-container {
   width: 2rem;
   height: 2rem;
 }
 
-:host(.large) .day-button-container {
+:host(.ic-date-picker-large) .day-button-container {
   width: 2.5rem;
   height: 2.5rem;
 }
@@ -720,23 +721,24 @@ ic-date-input {
   cursor: default;
 }
 
-:host(.large) .day-button {
+:host(.ic-date-picker-large) .day-button {
   width: 2.25rem;
   height: 2.25rem;
 }
 
-:host(.small) .day-button {
+:host(.ic-date-picker-small) .day-button {
   width: 1.75rem;
   height: 1.75rem;
 }
 
 :host .day-button ic-typography {
   width: 1.75rem;
-  color: var(--ic-color-primary-text);
+
+  --ic-typography-color: var(--ic-color-text-primary);
 }
 
 :host .day-button.outside-range ic-typography {
-  color: var(--ic-architectural-400);
+  --ic-typography-color: var(--ic-architectural-400);
 }
 
 :host .day-button.outside-month ic-typography {
@@ -746,7 +748,7 @@ ic-date-input {
 :host
   .day-button.outside-month:not(.outside-range):not(.selected)
   ic-typography {
-  color: var(--ic-color-primary-text);
+  --ic-typography-color: var(--ic-color-text-primary);
 }
 
 :host .day-button:hover:not(.disabled) {
@@ -754,7 +756,7 @@ ic-date-input {
 }
 
 :host .day-button:active:not(.disabled) {
-  background-color: var(--ic-action-dark-bg-active);
+  background-color: var(--ic-action-dark-bg-pressed);
 }
 
 @media (prefers-reduced-motion: no-preference) {
@@ -769,7 +771,7 @@ ic-date-input {
 }
 
 :host .day-button.selected ic-typography {
-  color: var(--ic-color-white-text);
+  --ic-typography-color: var(--ic-color-white-text);
 }
 
 :host .day-button.selected:not(.hidden):hover {
@@ -777,7 +779,7 @@ ic-date-input {
 }
 
 :host .day-button.selected:not(.hidden):active {
-  background-color: var(--ic-action-default-active);
+  background-color: var(--ic-action-default-pressed);
 }
 
 :host .day-button.focussed {
@@ -802,11 +804,11 @@ ic-date-input {
   background-color: var(--ic-action-default);
 }
 
-:host(.small) .day-button.today::after {
+:host(.ic-date-picker-small) .day-button.today::after {
   bottom: 0.35rem;
 }
 
-:host(.large) .day-button.today::after {
+:host(.ic-date-picker-large) .day-button.today::after {
   width: 1rem;
 }
 
@@ -868,7 +870,7 @@ ic-date-input {
   }
 
   :host .day-button.focussed:focus {
-    border: var(--ic-hc-border);
+    border: var(--ic-border-hc);
   }
 
   :host .month-button.selected::part(button),

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

@@ -41,9 +41,14 @@ export class DatePicker {
             this.decadeStart = decadeArr[1];
             this.decadeEnd = decadeArr[10];
         };
-        this.setSelectedDate = (d) => {
-            this.selectedDate = d;
-            this.value = d === null ? "" : d;
+        this.setSelectedDate = (d, emit = true) => {
+            if (d === null || !dateMatches(d, this.selectedDate)) {
+                this.selectedDate = d;
+                this.value = d;
+                if (emit) {
+                    this.inputEl.triggerIcChange(d);
+                }
+            }
         };
         this.handleCalendarMouseDown = (event) => {
             const target = event.target;
@@ -60,13 +65,16 @@ export class DatePicker {
         };
         this.keyDownHandler = (event) => {
             if (event.key === "Escape") {
-                this.closeButtonClickHandler();
-                this.inputEl.setCalendarFocus();
+                if (this.calendarOpen) {
+                    this.closeButtonClickHandler();
+                    this.inputEl.setCalendarFocus();
+                    event.stopImmediatePropagation();
+                }
             }
             else {
                 this.clearDialogDescription();
+                event.stopImmediatePropagation();
             }
-            event.stopImmediatePropagation();
         };
         this.closeButtonClickHandler = () => {
             this.calendarOpen = false;
@@ -159,7 +167,7 @@ export class DatePicker {
             return `${this.decadeStart} to ${this.decadeEnd} currently in view.`;
         };
         this.setAriaLiveRegionText = (text) => {
-            this.liveRegionEl.innerText = text;
+            this.liveRegionEl && (this.liveRegionEl.innerText = text);
         };
         this.clearDialogDescription = () => {
             this.dialogDescription = "";
@@ -633,78 +641,72 @@ export class DatePicker {
             }
         };
         this.setDateInputProps = () => {
-            const untilNowMsg = !this.disablePast ||
-                this.disablePastMessage === DEFAULT_DISABLE_DATES_UNTIL_NOW_MSG
-                ? ""
-                : this.disablePastMessage;
-            const fromNowMsg = !this.disableFuture ||
-                this.disableFutureMessage === DEFAULT_DISABLE_DATES_FROM_NOW_MSG
-                ? ""
-                : this.disableFutureMessage;
-            const disableDaysMsg = !this.disableDays.length ||
-                this.disableDaysMessage === DEFAULT_DISABLE_DAYS_MSG
-                ? ""
-                : this.disableDaysMessage;
+            const inputProps = {
+                invalidDateMessage: this.invalidDateMessage,
+                label: this.label,
+                showClearButton: true,
+                showCalendarButton: true,
+                value: this.value,
+            };
             if (this.dateFormat !== DEFAULT_DATE_FORMAT) {
-                this.dateInputProps.dateFormat = this.dateFormat;
+                inputProps.dateFormat = this.dateFormat;
             }
             if (this.disableFuture) {
-                this.dateInputProps.disableFuture = this.disableFuture;
-                if (fromNowMsg !== "") {
-                    this.dateInputProps.disableFutureMessage = fromNowMsg;
+                inputProps.disableFuture = this.disableFuture;
+                if (this.disableFutureMessage !== DEFAULT_DISABLE_DATES_FROM_NOW_MSG) {
+                    inputProps.disableFutureMessage = this.disableFutureMessage;
                 }
             }
             if (this.disablePast) {
-                this.dateInputProps.disablePast = this.disablePast;
-                if (untilNowMsg !== "") {
-                    this.dateInputProps.disablePastMessage = untilNowMsg;
+                inputProps.disablePast = this.disablePast;
+                if (this.disablePastMessage !== DEFAULT_DISABLE_DATES_UNTIL_NOW_MSG) {
+                    inputProps.disablePastMessage = this.disablePastMessage;
                 }
             }
             if (this.disableDays.length > 0) {
-                this.dateInputProps.disableDays = this.disableDays;
-                if (disableDaysMsg !== "") {
-                    this.dateInputProps.disableDaysMessage = disableDaysMsg;
+                inputProps.disableDays = this.disableDays;
+                if (this.disableDaysMessage !== DEFAULT_DISABLE_DAYS_MSG) {
+                    inputProps.disableDaysMessage = this.disableDaysMessage;
                 }
             }
-            this.dateInputProps.label = this.label;
             if (this.max !== null && this.max !== "") {
-                this.dateInputProps.max = this.maxDate;
+                inputProps.max = this.maxDate;
             }
             if (this.min !== null && this.min !== "") {
-                this.dateInputProps.min = this.minDate;
+                inputProps.min = this.minDate;
             }
             if (this.helperText !== undefined) {
-                this.dateInputProps.helperText = this.helperText;
+                inputProps.helperText = this.helperText;
+            }
+            if (this.hideHelperText !== false) {
+                inputProps.hideHelperText = this.hideHelperText;
             }
             if (this.inputId !== undefined) {
-                this.dateInputProps.inputId = this.inputId;
+                inputProps.inputId = this.inputId;
             }
             if (this.name !== undefined) {
-                this.dateInputProps.name = this.name;
+                inputProps.name = this.name;
             }
-            this.dateInputProps.showClearButton = true;
-            this.dateInputProps.showCalendarButton = true;
             if (this.disabled) {
-                this.dateInputProps.disabled = this.disabled;
+                inputProps.disabled = this.disabled;
             }
             if (this.required) {
-                this.dateInputProps.required = this.required;
+                inputProps.required = this.required;
             }
-            if (this.size !== "default") {
-                this.dateInputProps.size = this.size;
+            if (this.size !== "medium") {
+                inputProps.size = this.size;
             }
             if (this.validationStatus !== "") {
-                this.dateInputProps.validationStatus = this.validationStatus;
+                inputProps.validationStatus = this.validationStatus;
             }
             if (this.validationText !== "") {
-                this.dateInputProps.validationText = this.validationText;
+                inputProps.validationText = this.validationText;
             }
-            this.dateInputProps.value = this.value;
+            return inputProps;
         };
         this.calendarOpen = false;
         this.currMonthView = [];
         this.currYearPickerView = [];
-        this.dateInputProps = { label: "" };
         this.decadeView = [];
         this.focussedDate = null;
         this.focussedDay = undefined;
@@ -729,7 +731,9 @@ export class DatePicker {
         this.disablePast = false;
         this.disablePastMessage = "Dates in the past are not allowed. Please select a date in the future.";
         this.helperText = undefined;
+        this.hideHelperText = false;
         this.inputId = undefined;
+        this.invalidDateMessage = "Please enter a valid date.";
         this.label = undefined;
         this.max = "";
         this.min = "";
@@ -739,12 +743,18 @@ export class DatePicker {
         this.showDaysOutsideMonth = true;
         this.showPickerClearButton = true;
         this.showPickerTodayButton = true;
-        this.size = "default";
+        this.size = "medium";
         this.startOfWeek = IcWeekDays.Monday;
         this.validationStatus = "";
         this.validationText = "";
         this.value = "";
     }
+    watchDisableFutureHandler() {
+        this.watchMaxHandler();
+    }
+    watchDisablePastHandler() {
+        this.watchMinHandler();
+    }
     watchMaxHandler() {
         if (this.disableFuture) {
             this.maxDate = new Date();
@@ -761,6 +771,14 @@ export class DatePicker {
             this.minDate = createDate(this.min, this.dateFormat);
         }
     }
+    watchStartOfWeekHandler() {
+        this.orderedDaysOfWeek = this.daysOfWeek
+            .slice(this.startOfWeek)
+            .concat(this.daysOfWeek.slice(0, this.startOfWeek));
+        if (this.calendarOpen) {
+            this.updateMonthInView();
+        }
+    }
     watchOpenHandler() {
         if (this.calendarOpen) {
             if (this.inputEl) {
@@ -840,16 +858,20 @@ export class DatePicker {
         onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Date Picker");
         this.monthNames = stringEnumToArray(IcDateInputMonths);
         this.daysOfWeek = stringEnumToArray(IcShortDayNames);
-        this.orderedDaysOfWeek = this.daysOfWeek
-            .splice(this.startOfWeek, this.daysOfWeek.length)
-            .concat(this.daysOfWeek.splice(0, this.startOfWeek));
+        this.watchStartOfWeekHandler();
         this.watchMaxHandler();
         this.watchMinHandler();
     }
+    componentWillRender() {
+        this.dateInputProps = this.setDateInputProps();
+    }
+    componentWillUpdate() {
+        this.dateInputProps = this.setDateInputProps();
+    }
     localCalendarButtonClickHandler(ev) {
         this.myCalendarButtonClicked = true;
         if (!this.calendarOpen) {
-            this.setSelectedDate(ev.detail.value);
+            this.setSelectedDate(ev.detail.value, false);
         }
         this.calendarOpen = !this.calendarOpen;
     }
@@ -876,7 +898,6 @@ export class DatePicker {
         else {
             yearButtonText = `Press Enter or Space to open year picker view or use the arrow keys to change the selected year.`;
         }
-        this.setDateInputProps();
         const dialogLabel = "choose date";
         const monthLabel = monthNames && monthNames[monthInView]
             ? monthNames[monthInView]
@@ -888,7 +909,7 @@ export class DatePicker {
             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: {
+        return (h(Host, { onKeyDown: this.keyDownHandler, class: { [`ic-date-picker-${size}`]: true } }, 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: {
@@ -908,7 +929,9 @@ export class DatePicker {
             } }, 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 === "" }, "Clear"))))))));
+            } }, 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"))))))));
     }
     static get is() { return "ic-date-picker"; }
     static get encapsulation() { return "shadow"; }
@@ -1096,6 +1119,24 @@ export class DatePicker {
                 "attribute": "helper-text",
                 "reflect": false
             },
+            "hideHelperText": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the helper text will be visually hidden, but still read out by screenreaders."
+                },
+                "attribute": "hide-helper-text",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "inputId": {
                 "type": "string",
                 "mutable": false,
@@ -1113,6 +1154,24 @@ export class DatePicker {
                 "attribute": "input-id",
                 "reflect": false
             },
+            "invalidDateMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The text to display as the validation message when an invalid date is entered."
+                },
+                "attribute": "invalid-date-message",
+                "reflect": false,
+                "defaultValue": "\"Please enter a valid date.\""
+            },
             "label": {
                 "type": "string",
                 "mutable": false,
@@ -1293,7 +1352,7 @@ export class DatePicker {
                 "mutable": false,
                 "complexType": {
                     "original": "IcSizes",
-                    "resolved": "\"default\" | \"large\" | \"small\"",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
                     "references": {
                         "IcSizes": {
                             "location": "import",
@@ -1310,7 +1369,7 @@ export class DatePicker {
                 },
                 "attribute": "size",
                 "reflect": false,
-                "defaultValue": "\"default\""
+                "defaultValue": "\"medium\""
             },
             "startOfWeek": {
                 "type": "number",
@@ -1408,7 +1467,6 @@ export class DatePicker {
             "calendarOpen": {},
             "currMonthView": {},
             "currYearPickerView": {},
-            "dateInputProps": {},
             "decadeView": {},
             "focussedDate": {},
             "focussedDay": {},
@@ -1452,11 +1510,20 @@ export class DatePicker {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "disableFuture",
+                "methodName": "watchDisableFutureHandler"
+            }, {
+                "propName": "disablePast",
+                "methodName": "watchDisablePastHandler"
+            }, {
                 "propName": "max",
                 "methodName": "watchMaxHandler"
             }, {
                 "propName": "min",
                 "methodName": "watchMinHandler"
+            }, {
+                "propName": "startOfWeek",
+                "methodName": "watchStartOfWeekHandler"
             }, {
                 "propName": "calendarOpen",
                 "methodName": "watchOpenHandler"