@ukic/canary-web-components 3.0.0-canary.13 → 3.0.0-canary.14

package/dist/esm/ic-date-input.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-163fe708.js';
-import { b as isEmptyString, s as stringEnumToArray, t as getInputDescribedByText, r as removeDisabledFalse, u as removeFormResetListener, v as addFormResetListener, o as onComponentRequiredPropUndefined, w as isNumeric, x as IcInformationStatus, y as renderHiddenInput, k as IcDayNames, l as IcDateInputMonths } from './helpers-4e38ba2b.js';
+import { b as isEmptyString, s as stringEnumToArray, u as getInputDescribedByText, r as removeDisabledFalse, v as removeFormResetListener, w as addFormResetListener, o as onComponentRequiredPropUndefined, x as isNumeric, y as IcInformationStatus, z as renderHiddenInput, k as IcDayNames, l as IcDateInputMonths } from './helpers-5479985d.js';
 import { b as dateMatches, i as isDateOrEpoch, j as convertToDoubleDigits, s as splitStringDate, h as createDate, k as extractDateFromZuluDateTime } from './date-helpers-0e5e32a7.js';
 
 const Clear = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -41,20 +41,25 @@ const DateInput = class {
         this.KEYBOARD_EVENT_OBJECT_STRING = "[object KeyboardEvent]";
         this.MAX_DAY = 31;
         this.MAX_MONTH = 12;
-        this.previousEmittedDate = undefined;
         this.previousSelectedDate = null;
         this.selectedDate = null;
-        this.day = "";
-        this.month = "";
-        this.year = "";
+        this.externalSetDate = false;
+        this.clearInput = false;
         this.calendarFocused = false;
         this.clearButtonFocused = false;
         this.removeLabelledBy = false;
+        this.day = "";
+        this.month = "";
+        this.year = "";
         /**
          * The format in which the date will be displayed.
          */
         // eslint-disable-next-line sonarjs/no-duplicate-string
         this.dateFormat = "DD/MM/YYYY";
+        /**
+         * If `true`, every individual input field completed will emit an icChange event.
+         */
+        this.emitDatePartChange = false;
         /**
          * If `true`, the disabled state will be set.
          */
@@ -441,9 +446,12 @@ const DateInput = class {
         };
         this.setDate = (date) => {
             if (date === null || date === "" || date === undefined) {
-                this.day = null;
-                this.month = null;
-                this.year = null;
+                if (this.day)
+                    this.day = null;
+                if (this.month)
+                    this.month = null;
+                if (this.year)
+                    this.year = null;
                 this.inputsInOrder.forEach((input) => {
                     input.classList.remove(this.FIT_TO_VALUE);
                     this.setPreventInput(input, false);
@@ -466,9 +474,11 @@ const DateInput = class {
                 }
                 else if (typeof date === "string") {
                     const defaultDateArray = splitStringDate(date, this.dateFormat);
+                    this.selectedDate = new Date(Number(defaultDateArray[0]), Number(defaultDateArray[1]) - 1, Number(defaultDateArray[2]));
                     this.year = defaultDateArray[0];
                     this.month = defaultDateArray[1];
                     this.day = defaultDateArray[2];
+                    this.setValueAndEmitChange(this.selectedDate);
                 }
             }
             this.setValidationMessage();
@@ -863,11 +873,13 @@ const DateInput = class {
             }
         };
         this.handleClear = () => {
+            this.clearInput = true;
             this.inputsInOrder.forEach((input) => {
                 input.classList.remove(this.FIT_TO_VALUE);
                 this.setInputValue(input, true);
                 this.setPreventInput(input, false);
             });
+            this.clearInput = false;
             this.isDateSetFromKeyboardEvent = false;
             this.setValidationMessage();
             this.handleDateChange(true);
@@ -907,13 +919,31 @@ const DateInput = class {
             this.removeLabelledBy = true;
         };
         this.emitIcChange = (d) => {
-            if (!(d === null && this.previousEmittedDate === null) &&
-                !dateMatches(d, this.previousEmittedDate)) {
-                this.previousEmittedDate = d;
-                this.icChange.emit({ value: d });
+            this.selectedDate = d;
+            if (!dateMatches(this.selectedDate, d) ||
+                this.day !== null ||
+                this.month !== null ||
+                this.year !== null) {
+                this.icChange.emit({
+                    value: d,
+                    dateObject: {
+                        day: this.day === "" ? null : this.day,
+                        month: this.month === "" ? null : this.month,
+                        year: this.year === "" ? null : this.year,
+                    },
+                });
             }
         };
     }
+    watchInputHandler() {
+        if (this.emitDatePartChange &&
+            !this.externalSetDate &&
+            !this.clearInput &&
+            !(this.day && this.month && this.year) &&
+            this.selectedDate === null) {
+            this.emitIcChange(this.selectedDate);
+        }
+    }
     watchDisabledHandler() {
         removeDisabledFalse(this.disabled, this.el);
     }
@@ -967,11 +997,8 @@ const DateInput = class {
         this.watchMinHandler();
         this.watchMaxHandler();
         if (this.value) {
+            this.externalSetDate = true;
             this.setDate(this.value);
-            this.previousEmittedDate = this.selectedDate;
-        }
-        else {
-            this.previousEmittedDate = null;
         }
         this.screenReaderInfoId = `${this.inputId}-screen-reader-info`;
         this.assistiveHintId = `${this.inputId}-assistive-hint`;
@@ -1040,7 +1067,10 @@ const DateInput = class {
      * @internal Used to enable other components to invoke an IcChange event from the input.
      */
     async triggerIcChange(d) {
+        this.externalSetDate = true;
+        this.setDate(d);
         this.emitIcChange(d);
+        this.externalSetDate = false;
     }
     removeAriaLabelledBy() {
         this.inputCompContainerEl.removeAttribute(this.ARIA_LABELLED_BY);
@@ -1157,19 +1187,22 @@ const DateInput = class {
                 : "";
         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: '08b8f65934b55fd86e9abe2fad8f232af68b3754', class: {
+        return (h(Host, { key: 'a37b652ab1896d583a970f2fe3f23480fe923406', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 [`ic-date-input-disabled`]: disabled,
-            }, onBlur: this.handleHostBlur, onFocus: this.handleHostFocus }, h("ic-input-container", { key: '285bb0e746630a08c3e4e29bc8a24f5d97b4b4e5', disabled: disabled }, !(hideLabel && hideHelperText) && (h("ic-input-label", { key: 'f1facdecd84445133a67c87a2d6e5ba4dfbfbceb', for: inputId, label: label, hideLabel: hideLabel, helperText: !hideHelperText ? helperText : "", disabled: disabled })), h("span", { key: '25ae3fae1dc4f2862ec14e348138adfadf0dc3c7', id: this.screenReaderInfoId, class: "sr-only", "aria-hidden": "true" }, this.getScreenReaderInfo(validationStatus), hideLabel && `${label}\n`, hideHelperText && `${helperText}\n`, `${this.defaultHelperText}.`), h("span", { key: 'd3c34084b3b846795063f799720b7d918f10f5a9', id: this.assistiveHintId, class: "sr-only", "aria-hidden": "true" }, assistiveHint), h("span", { key: '37ecdc3ee7ced98dac405591cb106e1a03add976', id: "live-region", "aria-live": "assertive", class: "sr-only" }), h("ic-input-component-container", { key: 'cfcfae24a49a49e0f2a878a7c024818e1cce125a', id: inputId, ref: (el) => (this.inputCompContainerEl = el), disabled: disabled, validationStatus: validationStatus, size: size, role: "group", class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, h("div", { key: '4d090542f2fb72fae8cda326af45278552707cd6', class: "input-container" }, h("div", { key: '4eef737c2a8d25353a41ea31b2e8bc21ec55ff9a', class: "date-inputs" }, this.getInputsInOrder()[0], "/", this.getInputsInOrder()[1], "/", this.getInputsInOrder()[2]), h("div", { key: 'bc1cb74a96f75b4018f2e39f8712a870f5f4bf6e', class: "action-buttons" }, showClearButton && (h("ic-button", { key: 'e58854f9e3b74a7f46a253a8421c8c9775047069', id: "clear-button", "aria-label": "Clear input", class: {
+            }, onBlur: this.handleHostBlur, onFocus: this.handleHostFocus }, h("ic-input-container", { key: '41c1cd439879613d8920593309e19c050e5d451e', disabled: disabled }, !(hideLabel && hideHelperText) && (h("ic-input-label", { key: 'a598faa23eda4cf283cd5e542008aad20150736e', for: inputId, label: label, hideLabel: hideLabel, helperText: !hideHelperText ? helperText : "", disabled: disabled })), h("span", { key: '71265eb5808610652efe874a2ad9828c970a9176', id: this.screenReaderInfoId, class: "sr-only", "aria-hidden": "true" }, this.getScreenReaderInfo(validationStatus), hideLabel && `${label}\n`, hideHelperText && `${helperText}\n`, `${this.defaultHelperText}.`), h("span", { key: '67121b1b28fa69acd5c143d8dacb9c634db15f05', id: this.assistiveHintId, class: "sr-only", "aria-hidden": "true" }, assistiveHint), h("span", { key: '2af3f97d24ed25ba868b08d13b4467075b350a36', id: "live-region", "aria-live": "assertive", class: "sr-only" }), h("ic-input-component-container", { key: 'c7c455f3f16458f6a56e604e8f8499834f277933', id: inputId, ref: (el) => (this.inputCompContainerEl = el), disabled: disabled, validationStatus: validationStatus, size: size, role: "group", class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, h("div", { key: 'ccf2a9ca8154cdc108fdbbe4a8b1cf2fd6fb5070', class: "input-container" }, h("div", { key: 'c044b44ee99dcf32722bdbfa481c8464a9a4d7bb', class: "date-inputs" }, this.getInputsInOrder()[0], "/", this.getInputsInOrder()[1], "/", this.getInputsInOrder()[2]), h("div", { key: '30818ad45a24cdca204f8b629f064840420afb44', class: "action-buttons" }, showClearButton && (h("ic-button", { key: '99a6a5b62893e56cf5d3a4f6645ce2aa1b77e538', 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: 'd7e3f4e87e69d949a1c9e56230ae78b22dfd23f8', class: "show-calendar-button-wrapper" }, h("div", { key: '21bcae037bcb6d81bd89ba1eb51f279f048fa2df', class: { divider: true, [size]: true } }), h("ic-button", { key: '3bad8c476367e3aac94092078fe9d8aa52f396ff', 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: 'c11a9f0fc1eae4efc3a3a29ebdd1eb65a6de7630', id: this.selectedDateInfoId, class: "sr-only", "aria-live": "polite" }, h("span", { key: '2930c304db0ad50b6991454d9375fdc2e1a4547a', ref: (el) => (this.selectedDateInfoEl = el), role: "status" })), (hasCustomValidation || !isEmptyString(this.invalidDateText)) && (h("ic-input-validation", { key: '5fc1473b568a1f82c3c1ee9f73e20a19f7c28d85', 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: '77a0ba0e9dfa3b99a97252178e42f49261619503', class: "show-calendar-button-wrapper" }, h("div", { key: '70408bceb4963e3ba54fe5630ba95905d15be0a6', class: { divider: true, [size]: true } }), h("ic-button", { key: 'f38c632d59fe23bfda2f20a8a9646028ac40f99b', 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: '614cc74c88f8d83e04ec9bde0d984567c536d65c', id: this.selectedDateInfoId, class: "sr-only", "aria-live": "polite" }, h("span", { key: 'f1dea32613b9f162808ffef69baa6231c86998d3', ref: (el) => (this.selectedDateInfoEl = el), role: "status" })), (hasCustomValidation || !isEmptyString(this.invalidDateText)) && (h("ic-input-validation", { key: '802cdf9f7bc52c9164137059b46f5c1dfcbcdb80', status: validationStatus, message: hasCustomValidation ? this.validationText : this.invalidDateText, for: inputId })))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
     static get watchers() { return {
+        "day": ["watchInputHandler"],
+        "month": ["watchInputHandler"],
+        "year": ["watchInputHandler"],
         "disabled": ["watchDisabledHandler"],
         "disableFuture": ["watchDisableFutureHandler"],
         "disablePast": ["watchDisablePastHandler"],