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

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

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { b as isEmptyString, s as stringEnumToArray, l as getInputDescribedByText, r as removeDisabledFalse, m as removeFormResetListener, n as addFormResetListener, o as onComponentRequiredPropUndefined, q as isNumeric, t as IcInformationStatus, u as renderHiddenInput, v as IcDayNames, w as IcDateInputMonths } from './helpers2.js';
+import { C as Clear } from './clear-icon.js';
 import { d as defineCustomElement$8 } from './ic-button2.js';
 import { d as defineCustomElement$7 } from './ic-input-component-container2.js';
 import { d as defineCustomElement$6 } from './ic-input-container2.js';
@@ -96,11 +97,6 @@ const dateInRange = (date, min, max) => clampDate(date, min, max) === date;
 const yearInRange = (year, min, max) => !year ||
     (!(min && year < min.getFullYear()) && !(max && year > max.getFullYear()));
 
-const Clear = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M15.8327 5.34199L14.6577 4.16699L9.99935 8.82533L5.34102 4.16699L4.16602 5.34199L8.82435 10.0003L4.16602 14.6587L5.34102 15.8337L9.99935 11.1753L14.6577 15.8337L15.8327 14.6587L11.1743 10.0003L15.8327 5.34199Z" fill="currentColor"/>
-</svg>
-`;
-
 const Calendar = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
   <path d="M16.6667 2.50004H15.8334V0.833374H14.1667V2.50004H5.83342V0.833374H4.16675V2.50004H3.33341C2.41675 2.50004 1.66675 3.25004 1.66675 4.16671V17.5C1.66675 18.4167 2.41675 19.1667 3.33341 19.1667H16.6667C17.5834 19.1667 18.3334 18.4167 18.3334 17.5V4.16671C18.3334 3.25004 17.5834 2.50004 16.6667 2.50004ZM16.6667 17.5H3.33341V6.66671H16.6667V17.5Z" fill="currentColor"/>
 </svg>`;
@@ -129,7 +125,7 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
         this.inputsInOrder = [];
         this.isAfterMax = false;
         this.isBeforeMin = false;
-        this.isDateSetFromKeyboardEvent = false;
+        this.preventInputsUpdating = false;
         this.isDisabledDate = false;
         this.isValidDay = true;
         this.isValidMonth = true;
@@ -142,6 +138,7 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
         this.selectedDate = null;
         this.externalSetDate = false;
         this.clearInput = false;
+        this.calendarIsOpen = false;
         this.calendarFocused = false;
         this.clearButtonFocused = false;
         this.removeLabelledBy = false;
@@ -349,7 +346,6 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
                     this.setPreventInput(input, true);
                 }
                 else {
-                    this.setInputValue(input, true);
                     this.setPreventInput(input, false);
                 }
             }
@@ -398,7 +394,7 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
                     break;
             }
             this.preventInput(event, isInputPrevented);
-            this.isDateSetFromKeyboardEvent = true;
+            this.preventInputsUpdating = true;
         };
         this.handleFocus = (event) => {
             // Highlight / select all characters in input for easy replacement
@@ -510,7 +506,7 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
                     this.selectedDateInfoEl.textContent = "";
                 }
                 this.previousSelectedDate = this.selectedDate;
-                if (!this.isDateSetFromKeyboardEvent) {
+                if (!this.preventInputsUpdating) {
                     this.updateInputValues(this.day, this.month, this.year);
                 }
             }
@@ -949,7 +945,7 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
                 this.setPreventInput(input, false);
             });
             this.clearInput = false;
-            this.isDateSetFromKeyboardEvent = false;
+            this.preventInputsUpdating = false;
             this.setValidationMessage();
             this.handleDateChange(true);
             this.inputsInOrder[0].focus();
@@ -960,7 +956,8 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
             (_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)) {
@@ -970,17 +967,28 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
         };
         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;
@@ -1104,11 +1112,11 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
     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) {
@@ -1238,7 +1246,7 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
             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) {
@@ -1263,15 +1271,15 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
                 : "";
         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 delegatesFocus() { return true; }
     get el() { return this; }