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

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

@@ -22,7 +22,7 @@ export class DateInput {
         this.inputsInOrder = [];
         this.isAfterMax = false;
         this.isBeforeMin = false;
-        this.isDateSetFromKeyboardEvent = false;
+        this.preventInputsUpdating = false;
         this.isDisabledDate = false;
         this.isValidDay = true;
         this.isValidMonth = true;
@@ -35,6 +35,7 @@ export class DateInput {
         this.selectedDate = null;
         this.externalSetDate = false;
         this.clearInput = false;
+        this.calendarIsOpen = false;
         this.calendarFocused = false;
         this.clearButtonFocused = false;
         this.removeLabelledBy = false;
@@ -242,7 +243,6 @@ export class DateInput {
                     this.setPreventInput(input, true);
                 }
                 else {
-                    this.setInputValue(input, true);
                     this.setPreventInput(input, false);
                 }
             }
@@ -293,7 +293,7 @@ export class DateInput {
                     break;
             }
             this.preventInput(event, isInputPrevented);
-            this.isDateSetFromKeyboardEvent = true;
+            this.preventInputsUpdating = true;
         };
         this.handleFocus = (event) => {
             // Highlight / select all characters in input for easy replacement
@@ -405,7 +405,7 @@ export class DateInput {
                     this.selectedDateInfoEl.textContent = "";
                 }
                 this.previousSelectedDate = this.selectedDate;
-                if (!this.isDateSetFromKeyboardEvent) {
+                if (!this.preventInputsUpdating) {
                     this.updateInputValues(this.day, this.month, this.year);
                 }
             }
@@ -846,7 +846,7 @@ export class DateInput {
                 this.setPreventInput(input, false);
             });
             this.clearInput = false;
-            this.isDateSetFromKeyboardEvent = false;
+            this.preventInputsUpdating = false;
             this.setValidationMessage();
             this.handleDateChange(true);
             this.inputsInOrder[0].focus();
@@ -857,7 +857,8 @@ export class DateInput {
             (_c = (_b = (_a = this.calendarButtonEl) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector("ic-tooltip")) === null || _c === void 0 ? void 0 : _c.displayTooltip(false);
             this.calendarButtonClicked.emit({ value: this.selectedDate });
             (_f = (_e = (_d = this.calendarButtonEl) === null || _d === void 0 ? void 0 : _d.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector("ic-tooltip")) === null || _f === void 0 ? void 0 : _f.displayTooltip(false);
-            this.isDateSetFromKeyboardEvent = false;
+            this.preventInputsUpdating = false;
+            this.calendarIsOpen = true;
         };
         this.setValueAndEmitChange = (value) => {
             if (!dateMatches(this.value ? new Date(this.value) : null, value)) {
@@ -867,17 +868,28 @@ export class DateInput {
         };
         this.handleCalendarFocus = () => {
             this.calendarFocused = true;
+            if (this.calendarIsOpen) {
+                // focus event triggered by closing calendar dialog so inputs should update
+                this.preventInputsUpdating = false;
+                this.calendarIsOpen = false;
+            }
+            else {
+                this.preventInputsUpdating = true;
+            }
         };
         this.handleCalendarBlur = () => {
             this.calendarFocused = false;
+            this.preventInputsUpdating = true;
         };
         this.handleClearFocus = () => {
             this.removeLabelledBy = true;
+            this.preventInputsUpdating = true;
             this.clearButtonFocused = true;
         };
         this.handleClearBlur = (ev) => {
             var _a;
             this.clearButtonFocused = false;
+            this.preventInputsUpdating = true;
             if ((_a = ev.relatedTarget) === null || _a === void 0 ? void 0 : _a.id.match(/(day|year)-input$/)) {
                 this.removeLabelledBy = false;
                 return;
@@ -1001,11 +1013,11 @@ export class DateInput {
     componentWillUpdate() {
         if (isEmptyString(this.helperText))
             this.helperText = this.defaultHelperText;
-        if (!this.isDateSetFromKeyboardEvent)
+        if (!this.preventInputsUpdating)
             this.setDate(this.value);
         this.setAriaInvalid(this.isValidDay, this.isValidMonth, this.isValidDate, this.isDisabledDate);
         this.handleDateChange(false);
-        this.isDateSetFromKeyboardEvent = false;
+        this.preventInputsUpdating = false;
     }
     componentDidRender() {
         if (this.removeLabelledBy) {
@@ -1135,7 +1147,7 @@ export class DateInput {
             this.invalidDateText = (_a = this.previousInvalidDateTest) !== null && _a !== void 0 ? _a : "";
             this.isPasteValidationDisplayed = false;
             // This is to prevent setDate from triggering within componentWillUpdate
-            this.isDateSetFromKeyboardEvent = true;
+            this.preventInputsUpdating = true;
         }
     }
     notifyScreenReader(input, event) {
@@ -1160,15 +1172,15 @@ export class DateInput {
                 : "";
         const assistiveHint = `Type or use the up and down arrow keys to change the values for the ${this.getDescOfInputsOrder()}.`;
         renderHiddenInput(true, this.el, this.name, this.convertToDate(this.year, this.month, this.day), this.disabled);
-        return (h(Host, { key: '97fbf8b8aa93b01105f7507b58a725298c638f11', class: {
+        return (h(Host, { key: '767560eabf5c5242cf11ead943b6e07cff501305', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 [`ic-date-input-disabled`]: disabled,
-            }, onBlur: this.handleHostBlur, onFocus: this.handleHostFocus }, h("ic-input-container", { key: '494c4031041d10819e5fe00f64b44b832c0c3325', disabled: disabled }, !(hideLabel && hideHelperText) && (h("ic-input-label", { key: '81439e19a018ee5ff6126f3a9154b9dbb703efa3', for: inputId, label: label, hideLabel: hideLabel, helperText: !hideHelperText ? helperText : "", disabled: disabled }, h("slot", { key: 'a1f86d4308a7cb339cd264babc668ec534f0d4e6', name: "helper-text", slot: "helper-text" }))), h("span", { key: 'bb771f6e47c2d7d33100533c37070ff8d71599a5', id: this.screenReaderInfoId, class: "sr-only", "aria-hidden": "true" }, this.getScreenReaderInfo(validationStatus), hideLabel && `${label}\n`, hideHelperText && `${helperText}\n`, `${this.defaultHelperText}.`), h("span", { key: 'aa04d09677a34c802d34a854d262fa202ec7e90c', id: this.assistiveHintId, class: "sr-only", "aria-hidden": "true" }, assistiveHint), h("span", { key: 'f8df285e10e30b60759408ddad409b4f5dadde58', id: "live-region", "aria-live": "assertive", class: "sr-only" }), h("ic-input-component-container", { key: '99d668b2f01984a0b41026da976184be33997427', id: inputId, ref: (el) => (this.inputCompContainerEl = el), disabled: disabled, validationStatus: validationStatus, size: size, role: "group", class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, h("div", { key: 'a37a03ac5d01217f113ce48ba494033d7f54615c', class: "input-container" }, h("div", { key: '95f83b51e0a70ccfaaace63e971edad754a83e32', class: "date-inputs" }, this.getInputsInOrder()[0], "/", this.getInputsInOrder()[1], "/", this.getInputsInOrder()[2]), h("div", { key: '8bcc1006fe1f95bc0ac9ee3b8fface5ff6b1b254', class: "action-buttons" }, showClearButton && (h("ic-button", { key: 'ebc769cfe906fa0e2f4c224889740b0d9ef2128c', id: "clear-button", "aria-label": "Clear input", class: {
+            }, onBlur: this.handleHostBlur, onFocus: this.handleHostFocus }, h("ic-input-container", { key: 'cd37bd9a48a9f578cdf5b3f5a03bba04e4a502d5', disabled: disabled }, !(hideLabel && hideHelperText) && (h("ic-input-label", { key: '0bdb602306aa1177106759da5f977f36869a51e1', for: inputId, label: label, hideLabel: hideLabel, helperText: !hideHelperText ? helperText : "", disabled: disabled }, h("slot", { key: '3eba48de2044efaaba63c31474597c88906cf0e7', name: "helper-text", slot: "helper-text" }))), h("span", { key: '4395cbcc455b0535a1dc51a17d43d2056894558c', id: this.screenReaderInfoId, class: "sr-only", "aria-hidden": "true" }, this.getScreenReaderInfo(validationStatus), hideLabel && `${label}\n`, hideHelperText && `${helperText}\n`, `${this.defaultHelperText}.`), h("span", { key: '2832552e06bf18c157e4b89240603c66e97d2bd7', id: this.assistiveHintId, class: "sr-only", "aria-hidden": "true" }, assistiveHint), h("span", { key: '96ea3a7bb98dec9d217c9abfde2fffe29fd8b10b', id: "live-region", "aria-live": "assertive", class: "sr-only" }), h("ic-input-component-container", { key: '239191d8b0d2f732fab91303a283d4592a6a8cbc', id: inputId, ref: (el) => (this.inputCompContainerEl = el), disabled: disabled, validationStatus: validationStatus, size: size, role: "group", class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, h("div", { key: 'b11b5d3a989391a0960b29ca54e78f9de1e41f97', class: "input-container" }, h("div", { key: '2e4106d33ee3b1ef5cf89cb61ac38f15c792a601', class: "date-inputs" }, this.getInputsInOrder()[0], "/", this.getInputsInOrder()[1], "/", this.getInputsInOrder()[2]), h("div", { key: '8da9c7b8ca40a1bba9a714de24ae33e540ed91d0', class: "action-buttons" }, showClearButton && (h("ic-button", { key: '2a7a675746e26ffdd4a6d43f4fdd268b9425f81f', id: "clear-button", "aria-label": "Clear input", class: {
                 ["clear-button"]: true,
                 ["hidden"]: isEmptyString(this.day) &&
                     isEmptyString(this.month) &&
                     isEmptyString(this.year),
-            }, disabled: this.disabled, innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearFocus, onBlur: this.handleClearBlur, variant: "icon-tertiary", theme: this.clearButtonFocused ? "light" : "dark", size: size })), showCalendarButton && (h("div", { key: 'fef96fa8c39c393203c362522df73603274173bd', class: "show-calendar-button-wrapper" }, h("div", { key: '53d4c7bd786456f9db2a12111b0ca7662347c782', class: { divider: true, [size]: true } }), h("ic-button", { key: '0a48b9d2a2f06804f3d4bdce5f52965f7ba92543', id: "calendar-button", ref: (el) => (this.calendarButtonEl = el), "aria-label": "Display calendar", "aria-haspopup": "dialog", class: "calendar-button", disabled: this.disabled, innerHTML: Calendar, onClick: this.handleCalendarOpen, variant: "icon-tertiary", size: size, onFocus: this.handleCalendarFocus, onBlur: this.handleCalendarBlur, theme: this.calendarFocused ? "light" : "dark" })))))), h("span", { key: 'c225ec78bc3533661b704d1ad66a2cc51d85d226', id: this.selectedDateInfoId, class: "sr-only", "aria-live": "polite" }, h("span", { key: '2d43a939e7ddf5cbdea76203f273194d2040b799', ref: (el) => (this.selectedDateInfoEl = el), role: "status" })), (hasCustomValidation || !isEmptyString(this.invalidDateText)) && (h("ic-input-validation", { key: '8e714f9f8eb46e7892d0333af858011e15cb9e64', status: validationStatus, message: hasCustomValidation ? this.validationText : this.invalidDateText, for: inputId })))));
+            }, disabled: this.disabled, innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearFocus, onBlur: this.handleClearBlur, variant: "icon-tertiary", theme: this.clearButtonFocused ? "light" : "dark", size: size })), showCalendarButton && (h("div", { key: '1a402f80e4ebfdb1e323b159dc2f93e412f84ff2', class: "show-calendar-button-wrapper" }, h("div", { key: '1a93e892a8808109e93eb94ecee6639f930e78ac', class: { divider: true, [size]: true } }), h("ic-button", { key: '0a4a5c7d2fd886be631ad052d02175c05900a814', id: "calendar-button", ref: (el) => (this.calendarButtonEl = el), "aria-label": "Display calendar", "aria-haspopup": "dialog", class: "calendar-button", disabled: this.disabled, innerHTML: Calendar, onClick: this.handleCalendarOpen, variant: "icon-tertiary", size: size, onFocus: this.handleCalendarFocus, onBlur: this.handleCalendarBlur, theme: this.calendarFocused ? "light" : "dark" })))))), h("span", { key: 'c3db6318bf5b2759c708d07d0b5e446d35702f38', id: this.selectedDateInfoId, class: "sr-only", "aria-live": "polite" }, h("span", { key: '6a682bf4c118014e15709e3d7099f9346a41d1a5', ref: (el) => (this.selectedDateInfoEl = el), role: "status" })), (hasCustomValidation || !isEmptyString(this.invalidDateText)) && (h("ic-input-validation", { key: '90d5948c97133f9c1028016a20bc8b09542de88c', status: validationStatus, message: hasCustomValidation ? this.validationText : this.invalidDateText, for: inputId })))));
     }
     static get is() { return "ic-date-input"; }
     static get encapsulation() { return "shadow"; }