@mgdis/mg-components 6.17.0 → 6.18.0

package/dist/components/mg-input-combobox.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { P as Paginate, C as ClassList, f as formatID, e as Cursor, n as nextTick, h as Page, j as getObjectValueFromKey, t as toString, d as allItemsAreString, k as isObject, i as isValidString } from './index2.js';
+import { P as Paginate, C as ClassList, f as formatID, e as Cursor, t as toString, n as nextTick, h as Page, j as getObjectValueFromKey, d as allItemsAreString, i as isValidString, k as isObject } from './index2.js';
 import { d as defineCustomElement$8, c as classReadonly, a as classDisabled, w as widths } from './mg-input2.js';
 import { i as initLocales } from './index3.js';
 import { K as Keys } from './events.utils.js';
@@ -70,6 +70,7 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
         this.classFocus = 'mg-u-is-focused';
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
+        this.customErrorMessage = { lock: false };
         /**
          * Input name
          * If not set the value equals the identifier
@@ -204,7 +205,7 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
             // override keys actions
             switch (event.key) {
                 case Keys.TAB:
-                case Keys.ENTER:
+                case Keys.ENTER: {
                     guard = event.key === Keys.ENTER;
                     const option = (_a = this.option) !== null && _a !== void 0 ? _a : this.options.items.find(this.isCurrentOption);
                     // Sets the value to the content of the focused option in the listbox.
@@ -214,12 +215,13 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
                     // Closes the popover.
                     this.popoverDisplay = false;
                     break;
+                }
                 case Keys.DOWN:
                 case Keys.ARROWDOWN:
                 case Keys.UP:
-                case Keys.ARROWUP:
+                case Keys.ARROWUP: {
                     guard = true;
-                    if (this.isLoading || !(this.page.total > 0)) {
+                    if (this.isLoading || this.page.total === 0) {
                         this.popoverDisplay = true;
                         break;
                     }
@@ -250,12 +252,13 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
                     // open popover
                     this.popoverDisplay = true;
                     break;
+                }
                 case Keys.LEFT:
                 case Keys.ARROWLEFT:
                 case Keys.HOME:
                 case Keys.RIGHT:
                 case Keys.ARROWRIGHT:
-                case Keys.END:
+                case Keys.END: {
                     // skip process if visual focus is not in popover
                     if (!isItem(this.option))
                         break;
@@ -275,8 +278,9 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
                         this.input.setSelectionRange(index, index);
                     }
                     break;
+                }
                 case Keys.ESC:
-                case Keys.ESCAPE:
+                case Keys.ESCAPE: {
                     guard = true;
                     if (this.popoverDisplay) {
                         // If the popover is displayed, closes it.
@@ -290,10 +294,12 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
                         this.option = null;
                     }
                     break;
-                default:
+                }
+                default: {
                     // Remove visual focus from popover options
                     this.option = null;
                     break;
+                }
             }
             if (guard) {
                 event.stopPropagation();
@@ -339,18 +345,20 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
         };
         /**
          * Set input error message
-         * @param errorMessage - errorMessage override
+         * @param fromSetErrorContext - context come from `setError` method
          */
-        this.setErrorMessage = (errorMessage) => {
+        this.setErrorMessage = (fromSetErrorContext = false) => {
             // Set error message
             this.errorMessage = undefined;
-            // Does have a custom error message
-            if (!this.valid && errorMessage !== undefined) {
-                this.errorMessage = errorMessage;
-            }
-            // required
-            else if (!this.valid && this.input.validity.valueMissing) {
-                this.errorMessage = this.messages.errors.required;
+            if (!this.valid) {
+                // Does have a new custom error message OR does have a custom error message locked
+                if (fromSetErrorContext || (this.customErrorMessage.lock && this.customErrorMessage.message !== undefined)) {
+                    this.errorMessage = this.customErrorMessage.message;
+                }
+                // required
+                else if (this.input.validity.valueMissing) {
+                    this.errorMessage = this.messages.errors.required;
+                }
             }
         };
         /**
@@ -364,15 +372,14 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
          * @returns promisified action
          */
         this.loadingWrapper = (action) => {
+            var _a;
             let promise;
             let index;
             // cache initial loading action if not defined
-            if (!Boolean(this.loadingAction)) {
-                this.loadingAction = action.name;
-            }
+            (_a = this.loadingAction) !== null && _a !== void 0 ? _a : (this.loadingAction = action.name);
             // update index
             if (Boolean(this.option) && this.loadingAction !== 'load-more') {
-                index = this.page.items.findIndex(option => option.value.toString() === this.option.value.toString());
+                index = this.page.items.findIndex(option => toString(option.value) === toString(this.option.value));
             }
             else if (this.loadingAction === 'load-more') {
                 index = this.page.items.length - this.page.baseIndex;
@@ -425,14 +432,14 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
          */
         this.goToNextPage = () => {
             this.showMore.emit();
-            if (Boolean(this.fetchurl)) {
+            if (this.fetchurl !== undefined) {
                 return this.getOptions(typeof this.page.next === 'string' ? this.page.next : undefined).then(nextPage => {
-                    if (!Boolean(nextPage))
-                        return;
-                    // merge items from current page and next page
-                    const items = [...this.page.items, ...nextPage.items];
-                    // create new options pagination withe merged items
-                    this.options = new Paginate(items, { total: nextPage.total, next: nextPage.next, top: items.length });
+                    if (nextPage !== undefined) {
+                        // merge items from current page and next page
+                        const items = [...this.page.items, ...nextPage.items];
+                        // create new options pagination withe merged items
+                        this.options = new Paginate(items, { total: nextPage.total, next: nextPage.next, top: items.length });
+                    }
                 });
             }
             else {
@@ -449,12 +456,12 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
          * @returns promise
          */
         this.updatePage = async () => {
-            if (Boolean(this.fetchurl)) {
+            if (this.fetchurl !== undefined) {
                 return this.getOptions().then(page => {
-                    if (!Boolean(page))
-                        return;
-                    // reset current options pagination from API response
-                    this.options = new Paginate(page.items, { total: page.total, next: page.next, top: page.top });
+                    if (page !== undefined) {
+                        // reset current options pagination from API response
+                        this.options = new Paginate(page.items, { total: page.total, next: page.next, top: page.top });
+                    }
                 });
             }
             else {
@@ -500,11 +507,11 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
         this.valueChange.emit(newValue);
     }
     watchItems(newValue) {
-        if (Boolean(this.fetchurl) && !Boolean(newValue)) {
+        if (this.fetchurl !== undefined && newValue === undefined) {
             // skip newValue check
             return;
         }
-        else if (Boolean(this.fetchurl) && Boolean(newValue)) {
+        else if (this.fetchurl !== undefined && newValue !== undefined) {
             throw new Error(`<mg-input-combobox> prop "items" values cannot be use with "fetchurl" prop defined. Passed value: ${toString(newValue)}.`);
         }
         // Empty options
@@ -524,7 +531,7 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
         }
     }
     watchIdentifier(newValue) {
-        if (Boolean(newValue)) {
+        if (isValidString(newValue)) {
             this.popoverId = `${newValue}-popover`;
             this.element.dataset.mgPopoverGuard = this.popoverId;
         }
@@ -564,7 +571,7 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
         this.classCollection = new ClassList(this.classCollection.classes);
     }
     watchFetchUrl(newValue) {
-        if (Boolean(newValue)) {
+        if (newValue !== undefined) {
             this.loadingWrapper({ name: 'load-data' });
         }
     }
@@ -572,20 +579,17 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
         if (this.fetchurl && newValue && !isObject(newValue)) {
             throw new Error(`<mg-input-combobox> prop "fetchoptions" value must be a valid RequestInit. Passed value: ${toString(newValue)}.`);
         }
-        else {
-            new Request(this.fetchurl, newValue);
-        }
     }
     watchFetchMappings(newValue) {
-        if (Boolean(this.fetchurl) && !Boolean(newValue)) {
+        if (this.fetchurl !== undefined && !isObject(newValue)) {
             throw new Error(`<mg-input-combobox> prop "fetchmappings" is required with "fetchurl" prop.`);
         }
-        else if (Boolean(newValue) && !isFetchmappings(newValue)) {
+        else if (newValue !== undefined && !isFetchmappings(newValue)) {
             throw new Error(`<mg-input-combobox> prop "fetchmappings" value must be { request: RequestMappingType, response: ResponseMappingType }. Passed value: ${toString(newValue)}.`);
         }
     }
     watchOptions(newValue) {
-        this.page = newValue.getPage(0, Boolean(this.filter) ? this.optionsFilter : undefined);
+        this.page = newValue.getPage(0, this.filter.length > 0 ? this.optionsFilter : undefined);
     }
     watchFilter(newValue) {
         this.loadingWrapper({ name: 'load-data' });
@@ -642,17 +646,22 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
      * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
      * @param valid - value indicating the validity
      * @param errorMessage - the error message to display
+     * @param errorMessageLock - lock the error message and validity state
      */
-    async setError(valid, errorMessage) {
+    async setError(valid, errorMessage, errorMessageLock = false) {
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-combobox> method "setError()" param "valid" must be a boolean.');
         }
-        else if (!isValidString(errorMessage)) {
+        else if (errorMessage !== undefined && !isValidString(errorMessage)) {
             throw new Error('<mg-input-combobox> method "setError()" param "errorMessage" must be a string.');
         }
         else {
+            this.customErrorMessage = {
+                lock: valid ? false : errorMessageLock,
+                message: valid ? undefined : errorMessage,
+            };
             this.setValidity(valid);
-            this.setErrorMessage(valid ? undefined : errorMessage);
+            this.setErrorMessage(true);
             this.hasDisplayedError = this.invalid;
         }
     }
@@ -672,6 +681,8 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
             // - Keep everything in sync both inside and outside the component
             return new Promise(resolve => {
                 requestAnimationFrame(() => {
+                    // unlock validity check by reseting customErrorMessage
+                    this.customErrorMessage = { lock: false };
                     this.checkValidity();
                     this.errorMessage = undefined;
                     this.hasDisplayedError = false;
@@ -700,11 +711,13 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
      * @param newValue - valid new value
      */
     setValidity(newValue) {
-        const oldValidValue = this.valid;
-        this.valid = newValue;
+        const oldValue = this.valid;
+        if (!this.customErrorMessage.lock || (this.customErrorMessage.message !== undefined && !newValue)) {
+            this.valid = newValue;
+        }
         this.invalid = !this.valid;
         // We need to send valid event even if it is the same value
-        if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValidValue))
+        if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValue))
             this.inputValid.emit(this.valid);
     }
     /*************
@@ -720,7 +733,7 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
         // Validate
         this.watchIdentifier(this.identifier);
         this.watchItems(this.items);
-        if (Boolean(this.fetchurl)) {
+        if (this.fetchurl !== undefined) {
             this.watchFetchOptions(this.fetchoptions);
             this.watchFetchMappings(this.fetchmappings);
             this.loadingWrapper({ name: 'load-data' });
@@ -747,14 +760,17 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
         const readonlyValue = this.getValueTitle();
         const withResetButton = this.value && !this.disabled;
         let popoverContent;
-        if (((_a = this.page) === null || _a === void 0 ? void 0 : _a.items.length) > 0)
+        if (((_a = this.page) === null || _a === void 0 ? void 0 : _a.items.length) > 0) {
             popoverContent = 'list';
-        else if (((_b = this.page) === null || _b === void 0 ? void 0 : _b.items.length) === 0 && Boolean(this.filter))
+        }
+        else if (((_b = this.page) === null || _b === void 0 ? void 0 : _b.items.length) === 0 && this.filter.length > 0) {
             popoverContent = 'notfound';
-        else if (((_c = this.page) === null || _c === void 0 ? void 0 : _c.items.length) === 0)
+        }
+        else if (((_c = this.page) === null || _c === void 0 ? void 0 : _c.items.length) === 0) {
             popoverContent = 'notavailable';
+        }
         let activeDescendant;
-        if (Boolean((_d = this.option) === null || _d === void 0 ? void 0 : _d.value)) {
+        if (((_d = this.option) === null || _d === void 0 ? void 0 : _d.value) !== undefined) {
             activeDescendant = this.option.value;
         }
         else if (typeof this.value === 'string') {
@@ -763,8 +779,8 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
         else {
             activeDescendant = (_e = this.value) === null || _e === void 0 ? void 0 : _e.value;
         }
-        return (h("mg-input", { key: '79e5263cd3b1c0fa0b3f386a547f2bdd48a33b28', label: this.label, identifier: this.identifier, class: this.classCollection.classes.join(' '), ariaDescribedbyIDs: popoverContent && popoverContent !== 'list' ? popoverContent : undefined, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, readonlyValue)) : (h("mg-popover", { identifier: this.popoverId, placement: "bottom-start", display: this.popoverDisplay, "arrow-hide": true, style: {
-                '--mg-c-input-list-width': Boolean((_f = this.input) === null || _f === void 0 ? void 0 : _f.offsetWidth) ? `${this.input.offsetWidth}px` : undefined,
+        return (h("mg-input", { key: 'bebf380dbdea1a9f9e0257a9425dcb6cd94a7a52', label: this.label, identifier: this.identifier, class: this.classCollection.classes.join(' '), ariaDescribedbyIDs: popoverContent && popoverContent !== 'list' ? popoverContent : undefined, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, readonlyValue)) : (h("mg-popover", { identifier: this.popoverId, placement: "bottom-start", display: this.popoverDisplay, "arrow-hide": true, style: {
+                '--mg-c-input-list-width': ((_f = this.input) === null || _f === void 0 ? void 0 : _f.offsetWidth) > 0 ? `${this.input.offsetWidth}px` : undefined,
             }, "data-fallback-placement": "bottom-end", "onDisplay-change": this.handlePopoverDisplay }, h("div", { class: "mg-c-input__input-group-container" }, h("mg-icon", { icon: "magnifying-glass" }), h("input", { type: "text", role: "combobox", class: "mg-c-input__box mg-c-input__box--width", value: this.filter, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, autocomplete: "off", "aria-autocomplete": "list", "aria-expanded": this.popoverDisplay.toString(), "aria-controls": listId, "aria-invalid": (this.invalid === true).toString(), "aria-activedescendant": formatID(activeDescendant), onInput: this.handleFilterInput, onBlur: this.handleFilterBlur, onFocus: this.handleFilterFocus, onKeyDown: this.handleFilterKeydown, ref: (el) => {
                 if (el !== null)
                     this.input = el;

package/dist/components/mg-input-date.js

@@ -22,6 +22,7 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class MgInputDate extends
         this.inputValid = createEvent(this, "input-valid", 7);
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
+        this.customErrorMessage = { lock: false };
         /**
          * Input name
          * If not set the value equals the identifier
@@ -134,39 +135,41 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class MgInputDate extends
          */
         this.getInputError = () => {
             var _a;
+            let error;
             // bad input or pattern
             if (this.input.validity.badInput || (this.value && !this.isValidPattern(this.value))) {
-                return 'badInput';
+                error = 'badInput';
             }
             // required
-            if (this.input.validity.valueMissing) {
-                return 'required';
+            else if (this.input.validity.valueMissing) {
+                error = 'required';
             }
             // min & max
-            if ((this.input.validity.rangeUnderflow || this.input.validity.rangeOverflow) && ((_a = this.min) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.max !== DEFAULT_MAX_DATE) {
-                return 'minMax';
+            else if ((this.input.validity.rangeUnderflow || this.input.validity.rangeOverflow) && ((_a = this.min) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.max !== DEFAULT_MAX_DATE) {
+                error = 'minMax';
             }
             // min
-            if (this.input.validity.rangeUnderflow) {
-                return 'min';
+            else if (this.input.validity.rangeUnderflow) {
+                error = 'min';
             }
             // max
-            if (this.input.validity.rangeOverflow) {
-                return 'max';
+            else if (this.input.validity.rangeOverflow) {
+                error = 'max';
             }
-            return null;
+            return error;
         };
         /**
          * Check input errors
-         * @param errorMessage - errorMessage override
+         * @param fromSetErrorContext - context come from `setError` method
          */
-        this.setErrorMessage = (errorMessage) => {
+        this.setErrorMessage = (fromSetErrorContext = false) => {
             // Set error message
             this.errorMessage = undefined;
             if (!this.valid) {
                 const inputError = this.getInputError();
-                if (errorMessage !== undefined) {
-                    this.errorMessage = errorMessage;
+                // Does have a new custom error message OR does have a custom error message locked
+                if (fromSetErrorContext || (this.customErrorMessage.lock && this.customErrorMessage.message !== undefined)) {
+                    this.errorMessage = this.customErrorMessage.message;
                 }
                 // required
                 else if (inputError === 'required') {
@@ -278,17 +281,22 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class MgInputDate extends
      * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
      * @param valid - value indicating the validity
      * @param errorMessage - the error message to display
+     * @param errorMessageLock - lock the error message and validity state
      */
-    async setError(valid, errorMessage) {
+    async setError(valid, errorMessage, errorMessageLock = false) {
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-date> method "setError()" param "valid" must be a boolean.');
         }
-        else if (!isValidString(errorMessage)) {
+        else if (errorMessage !== undefined && !isValidString(errorMessage)) {
             throw new Error('<mg-input-date> method "setError()" param "errorMessage" must be a string.');
         }
         else {
+            this.customErrorMessage = {
+                lock: valid ? false : errorMessageLock,
+                message: valid ? undefined : errorMessage,
+            };
             this.setValidity(valid);
-            this.setErrorMessage(valid ? undefined : errorMessage);
+            this.setErrorMessage(true);
             this.hasDisplayedError = this.invalid;
         }
     }
@@ -306,6 +314,8 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class MgInputDate extends
             // - Keep everything in sync both inside and outside the component
             return new Promise(resolve => {
                 requestAnimationFrame(() => {
+                    // unlock validity check by reseting customErrorMessage
+                    this.customErrorMessage = { lock: false };
                     this.checkValidity();
                     this.errorMessage = undefined;
                     this.hasDisplayedError = false;
@@ -319,11 +329,13 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class MgInputDate extends
      * @param newValue - valid new value
      */
     setValidity(newValue) {
-        const oldValidValue = this.valid;
-        this.valid = newValue;
+        const oldValue = this.valid;
+        if (!this.customErrorMessage.lock || (this.customErrorMessage.message !== undefined && !newValue)) {
+            this.valid = newValue;
+        }
         this.invalid = !this.valid;
         // We need to send valid event even if it is the same value
-        if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValidValue))
+        if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValue))
             this.inputValid.emit(this.valid);
     }
     /*************
@@ -359,7 +371,7 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class MgInputDate extends
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '31c223be6c69af4ffa89f74102c41a27040ad031', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === null ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly ? (this.value && h("b", { class: "mg-c-input__readonly-value" }, localeDate(this.value, this.locale))) : (h("input", { type: "date", class: "mg-c-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
+        return (h("mg-input", { key: '1428f0f9f11d829ec8d3ed507c8690d63839ff17', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === null ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly ? (this.value && h("b", { class: "mg-c-input__readonly-value" }, localeDate(this.value, this.locale))) : (h("input", { type: "date", class: "mg-c-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
                 if (el !== null)
                     this.input = el;
             } }))));

package/dist/components/mg-input-numeric.js

@@ -26,6 +26,7 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class MgInputNumeric e
         this.inputValid = createEvent(this, "input-valid", 7);
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
+        this.customErrorMessage = { lock: false };
         /**
          * Input name
          * If not set the value equals the identifier
@@ -131,19 +132,22 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class MgInputNumeric e
         this.formatErrorValue = (value) => localeNumber(value, this.locale, !Number.isInteger(value) && this.type === 'decimal' ? this.decimalLength : 0);
         /**
          * Set input error message
-         * @param errorMessage - errorMessage override
+         * @param fromSetErrorContext - context come from `setError` method
          */
-        this.setErrorMessage = (errorMessage) => {
+        this.setErrorMessage = (fromSetErrorContext = false) => {
             // Set error message
             this.errorMessage = undefined;
             if (!this.valid) {
                 const inputError = this.getInputError();
-                if (errorMessage !== undefined) {
-                    this.errorMessage = errorMessage;
+                // Does have a new custom error message OR does have a custom error message locked
+                if (fromSetErrorContext || (this.customErrorMessage.lock && this.customErrorMessage.message !== undefined)) {
+                    this.errorMessage = this.customErrorMessage.message;
                 }
+                // required
                 else if (inputError === 'required') {
                     this.errorMessage = this.messages.errors[inputError];
                 }
+                // min/max
                 else {
                     const formattedMin = this.formatErrorValue(this.min);
                     const formattedMax = this.formatErrorValue(this.max);
@@ -345,17 +349,22 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class MgInputNumeric e
      * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
      * @param valid - value indicating the validity
      * @param errorMessage - the error message to display
+     * @param errorMessageLock - lock the error message and validity state
      */
-    async setError(valid, errorMessage) {
+    async setError(valid, errorMessage, errorMessageLock = false) {
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-numeric> method "setError()" param "valid" must be a boolean.');
         }
-        else if (!isValidString(errorMessage)) {
+        else if (errorMessage !== undefined && !isValidString(errorMessage)) {
             throw new Error('<mg-input-numeric> method "setError()" param "errorMessage" must be a string.');
         }
         else {
+            this.customErrorMessage = {
+                lock: valid ? false : errorMessageLock,
+                message: valid ? undefined : errorMessage,
+            };
             this.setValidity(valid);
-            this.setErrorMessage(valid ? undefined : errorMessage);
+            this.setErrorMessage(true);
             this.hasDisplayedError = this.invalid;
         }
     }
@@ -373,6 +382,8 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class MgInputNumeric e
             // - Keep everything in sync both inside and outside the component
             return new Promise(resolve => {
                 requestAnimationFrame(() => {
+                    // unlock validity check by reseting customErrorMessage
+                    this.customErrorMessage = { lock: false };
                     this.checkValidity();
                     this.errorMessage = undefined;
                     this.hasDisplayedError = false;
@@ -386,11 +397,13 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class MgInputNumeric e
      * @param newValue - valid new value
      */
     setValidity(newValue) {
-        const oldValidValue = this.valid;
-        this.valid = newValue;
+        const oldValue = this.valid;
+        if (!this.customErrorMessage.lock || (this.customErrorMessage.message !== undefined && !newValue)) {
+            this.valid = newValue;
+        }
         this.invalid = !this.valid;
         // We need to send valid event even if it is the same value
-        if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValidValue))
+        if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValue))
             this.inputValid.emit(this.valid);
     }
     /**
@@ -462,7 +475,7 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class MgInputNumeric e
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '43e41f72e4cc4cf15a565167cee9e65035935e1f', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly
+        return (h("mg-input", { key: 'c47f7c310587fc3bb4e7d5ffd07854a2297958df', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly
             ? this.readonlyValue && this.renderReadonly()
             : [
                 h("input", { key: "input", type: "text", class: "mg-c-input__box mg-c-input__box--width", value: this.displayValue(), id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, autocomplete: "off", "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {

package/dist/components/mg-input-password.js

@@ -21,6 +21,7 @@ const MgInputPassword$1 = /*@__PURE__*/ proxyCustomElement(class MgInputPassword
         this.inputValid = createEvent(this, "input-valid", 7);
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
+        this.customErrorMessage = { lock: false };
         /**
          * Input name
          * If not set the value equals the identifier
@@ -96,14 +97,15 @@ const MgInputPassword$1 = /*@__PURE__*/ proxyCustomElement(class MgInputPassword
         };
         /**
          * Set input error message
-         * @param errorMessage - errorMessage override
+         * @param fromSetErrorContext - context come from `setError` method
          */
-        this.setErrorMessage = (errorMessage) => {
+        this.setErrorMessage = (fromSetErrorContext = false) => {
             // Set error message
             this.errorMessage = undefined;
             if (!this.valid) {
-                if (errorMessage !== undefined) {
-                    this.errorMessage = errorMessage;
+                // Does have a new custom error message OR does have a custom error message locked
+                if (fromSetErrorContext || (this.customErrorMessage.lock && this.customErrorMessage.message !== undefined)) {
+                    this.errorMessage = this.customErrorMessage.message;
                 }
                 // required
                 else if (this.input.validity.valueMissing) {
@@ -179,17 +181,22 @@ const MgInputPassword$1 = /*@__PURE__*/ proxyCustomElement(class MgInputPassword
      * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
      * @param valid - value indicating the validity
      * @param errorMessage - the error message to display
+     * @param errorMessageLock - lock the error message and validity state
      */
-    async setError(valid, errorMessage) {
+    async setError(valid, errorMessage, errorMessageLock = false) {
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-password> method "setError()" param "valid" must be a boolean.');
         }
-        else if (!isValidString(errorMessage)) {
+        else if (errorMessage !== undefined && !isValidString(errorMessage)) {
             throw new Error('<mg-input-password> method "setError()" param "errorMessage" must be a string.');
         }
         else {
+            this.customErrorMessage = {
+                lock: valid ? false : errorMessageLock,
+                message: valid ? undefined : errorMessage,
+            };
             this.setValidity(valid);
-            this.setErrorMessage(valid ? undefined : errorMessage);
+            this.setErrorMessage(true);
             this.hasDisplayedError = this.invalid;
         }
     }
@@ -207,6 +214,8 @@ const MgInputPassword$1 = /*@__PURE__*/ proxyCustomElement(class MgInputPassword
             // - Keep everything in sync both inside and outside the component
             return new Promise(resolve => {
                 requestAnimationFrame(() => {
+                    // unlock validity check by reseting customErrorMessage
+                    this.customErrorMessage = { lock: false };
                     this.checkValidity();
                     this.errorMessage = undefined;
                     this.hasDisplayedError = false;
@@ -220,11 +229,13 @@ const MgInputPassword$1 = /*@__PURE__*/ proxyCustomElement(class MgInputPassword
      * @param newValue - valid new value
      */
     setValidity(newValue) {
-        const oldValidValue = this.valid;
-        this.valid = newValue;
+        const oldValue = this.valid;
+        if (!this.customErrorMessage.lock || (this.customErrorMessage.message !== undefined && !newValue)) {
+            this.valid = newValue;
+        }
         this.invalid = !this.valid;
         // We need to send valid event even if it is the same value
-        if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValidValue))
+        if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValue))
             this.inputValid.emit(this.valid);
     }
     /*************
@@ -252,7 +263,7 @@ const MgInputPassword$1 = /*@__PURE__*/ proxyCustomElement(class MgInputPassword
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '4bdaa6d26811f66fa43b580ac6e85c61b308ee92', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value !== undefined && h("b", { class: "mg-c-input__readonly-value" }, '•'.repeat(this.value.length))) : (h("span", { class: "mg-c-input__input-group" }, h("input", { type: this.displayPassword ? 'text' : 'password', class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, maxlength: this.maxlength, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
+        return (h("mg-input", { key: '845c075a44c50043776b7577642254d772629eef', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value !== undefined && h("b", { class: "mg-c-input__readonly-value" }, '•'.repeat(this.value.length))) : (h("span", { class: "mg-c-input__input-group" }, h("input", { type: this.displayPassword ? 'text' : 'password', class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, maxlength: this.maxlength, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
                 if (el !== null)
                     this.input = el;
             } }), h("mg-button", { label: this.messages.input.password[this.displayPassword ? 'hide' : 'display'], disabled: this.disabled, variant: "flat", class: "mg-c-input__append-button", "is-icon": true, onClick: this.toggleDisplayPassword, "aria-controls": this.identifier }, h("mg-icon", { class: "mg-c-input__input-icon", icon: this.displayPassword ? 'eye-slash' : 'eye' }))))));