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

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';
@@ -58,19 +59,15 @@ const getWeekStart = (date, startDay) => {
     tmpDate.setDate(tmpDate.getDate() - diff);
     return tmpDate;
 };
-const getWeekEnd = (date, startDay) => {
-    const d = new Date(date);
-    const day = d.getDay();
-    const diff = (day < startDay ? -7 : 0) + 6 - (day - startDay);
-    d.setDate(d.getDate() + diff);
-    return d;
-};
 const getMonthStart = (date) => {
     return new Date(date.getFullYear(), date.getMonth(), 1);
 };
 const getMonthEnd = (date) => {
     return new Date(date.getFullYear(), date.getMonth() + 1, 0);
 };
+const addSixWeeks = (start) => {
+    return new Date(new Date(start).setDate(start.getDate() + 41));
+};
 /**
  * Compare if two dates are equal exactly equal
  */
@@ -96,11 +93,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 +121,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 +134,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 +342,6 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
                     this.setPreventInput(input, true);
                 }
                 else {
-                    this.setInputValue(input, true);
                     this.setPreventInput(input, false);
                 }
             }
@@ -398,7 +390,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 +502,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 +941,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 +952,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 +963,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 +1108,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 +1242,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 +1267,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; }
@@ -1392,6 +1396,6 @@ function defineCustomElement() {
     } });
 }
 
-export { DateInput as D, dateInRange as a, getMonthStart as b, dateMatches as c, defineCustomElement as d, getWeekStart as e, getWeekEnd as f, getMonthEnd as g, clampDate as h, createDate as i, yearInRange as y };
+export { DateInput as D, dateInRange as a, getMonthStart as b, dateMatches as c, defineCustomElement as d, getWeekStart as e, addSixWeeks as f, getMonthEnd as g, clampDate as h, createDate as i, yearInRange as y };
 
 //# sourceMappingURL=ic-date-input2.js.map