@mgdis/mg-components 6.17.0 → 6.19.0

package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js

@@ -11,6 +11,7 @@ export class MgInputNumeric {
     constructor() {
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
+        this.customErrorMessage = { lock: false };
         /**
          * Input name
          * If not set the value equals the identifier
@@ -116,19 +117,22 @@ export class MgInputNumeric {
         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);
@@ -330,17 +334,22 @@ export class MgInputNumeric {
      * 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;
         }
     }
@@ -358,6 +367,8 @@ export class MgInputNumeric {
             // - 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;
@@ -371,11 +382,13 @@ export class MgInputNumeric {
      * @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);
     }
     /**
@@ -447,7 +460,7 @@ export class MgInputNumeric {
      * @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) => {
@@ -1078,7 +1091,7 @@ export class MgInputNumeric {
             },
             "setError": {
                 "complexType": {
-                    "signature": "(valid: MgInputNumeric[\"valid\"], errorMessage: string) => Promise<void>",
+                    "signature": "(valid: MgInputNumeric[\"valid\"], errorMessage?: string, errorMessageLock?: boolean) => Promise<void>",
                     "parameters": [{
                             "name": "valid",
                             "type": "boolean",
@@ -1087,6 +1100,10 @@ export class MgInputNumeric {
                             "name": "errorMessage",
                             "type": "string",
                             "docs": "- the error message to display"
+                        }, {
+                            "name": "errorMessageLock",
+                            "type": "boolean",
+                            "docs": "- lock the error message and validity state"
                         }],
                     "references": {
                         "Promise": {
@@ -1108,6 +1125,9 @@ export class MgInputNumeric {
                         }, {
                             "name": "param",
                             "text": "errorMessage - the error message to display"
+                        }, {
+                            "name": "param",
+                            "text": "errorMessageLock - lock the error message and validity state"
                         }]
                 }
             },

package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.js

@@ -6,6 +6,7 @@ export class MgInputPassword {
     constructor() {
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
+        this.customErrorMessage = { lock: false };
         /**
          * Input name
          * If not set the value equals the identifier
@@ -81,14 +82,15 @@ export 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) {
@@ -164,17 +166,22 @@ export 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;
         }
     }
@@ -192,6 +199,8 @@ export 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;
@@ -205,11 +214,13 @@ export 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);
     }
     /*************
@@ -237,7 +248,7 @@ export 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' }))))));
@@ -689,7 +700,7 @@ export class MgInputPassword {
             },
             "setError": {
                 "complexType": {
-                    "signature": "(valid: MgInputPassword[\"valid\"], errorMessage: string) => Promise<void>",
+                    "signature": "(valid: MgInputPassword[\"valid\"], errorMessage?: string, errorMessageLock?: boolean) => Promise<void>",
                     "parameters": [{
                             "name": "valid",
                             "type": "boolean",
@@ -698,6 +709,10 @@ export class MgInputPassword {
                             "name": "errorMessage",
                             "type": "string",
                             "docs": "- the error message to display"
+                        }, {
+                            "name": "errorMessageLock",
+                            "type": "boolean",
+                            "docs": "- lock the error message and validity state"
                         }],
                     "references": {
                         "Promise": {
@@ -719,6 +734,9 @@ export class MgInputPassword {
                         }, {
                             "name": "param",
                             "text": "errorMessage - the error message to display"
+                        }, {
+                            "name": "param",
+                            "text": "errorMessageLock - lock the error message and validity state"
                         }]
                 }
             },

package/dist/collection/components/molecules/inputs/mg-input-radio/mg-input-radio.js

@@ -19,6 +19,7 @@ export class MgInputRadio {
         this.classVerticalList = 'mg-c-input--vertical-list';
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
+        this.customErrorMessage = { lock: false };
         /**
          * Input name
          * If not set the value equals the identifier
@@ -82,16 +83,18 @@ export class MgInputRadio {
         };
         /**
          * Set input error message
-         * @param errorMessage - errorMessage override
+         * @param fromSetErrorContext - context come from `setError` method
          */
-        this.setErrorMessage = (errorMessage) => {
+        this.setErrorMessage = (fromSetErrorContext = false) => {
             const invalidElement = this.getInvalidElement();
             // 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 (invalidElement.validity.valueMissing) {
                     this.errorMessage = this.messages.errors.required;
                 }
@@ -196,17 +199,22 @@ export class MgInputRadio {
      * 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-radio> method "setError()" param "valid" must be a boolean.');
         }
-        else if (!isValidString(errorMessage)) {
+        else if (errorMessage !== undefined && !isValidString(errorMessage)) {
             throw new Error('<mg-input-radio> 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;
         }
     }
@@ -224,6 +232,8 @@ export class MgInputRadio {
             // - 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;
@@ -237,11 +247,13 @@ export class MgInputRadio {
      * @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);
     }
     /*************
@@ -272,7 +284,7 @@ export class MgInputRadio {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '048aa732e7f8593701c9397e571b97584bc5e37b', 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 ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)) : (h("ul", { class: "mg-c-input__input-group-container", role: "list" }, this.options.map((input, index) => (h("li", { key: input.title, class: { 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "radio", id: this.identifier + '_' + index, name: this.identifier, value: index, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: (el) => {
+        return (h("mg-input", { key: '9290ab8e5048dd6806985ab55d13bd8b0dd93bd1', 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 ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)) : (h("ul", { class: "mg-c-input__input-group-container", role: "list" }, this.options.map((input, index) => (h("li", { key: input.title, class: { 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "radio", id: this.identifier + '_' + index, name: this.identifier, value: index, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: (el) => {
                 if (el !== null)
                     this.inputs[index] = el;
             } }), h("label", { htmlFor: this.identifier + '_' + index }, input.title))))))));
@@ -704,7 +716,7 @@ export class MgInputRadio {
             },
             "setError": {
                 "complexType": {
-                    "signature": "(valid: MgInputRadio[\"valid\"], errorMessage: string) => Promise<void>",
+                    "signature": "(valid: MgInputRadio[\"valid\"], errorMessage?: string, errorMessageLock?: boolean) => Promise<void>",
                     "parameters": [{
                             "name": "valid",
                             "type": "boolean",
@@ -713,6 +725,10 @@ export class MgInputRadio {
                             "name": "errorMessage",
                             "type": "string",
                             "docs": "- the error message to display"
+                        }, {
+                            "name": "errorMessageLock",
+                            "type": "boolean",
+                            "docs": "- lock the error message and validity state"
                         }],
                     "references": {
                         "Promise": {
@@ -734,6 +750,9 @@ export class MgInputRadio {
                         }, {
                             "name": "param",
                             "text": "errorMessage - the error message to display"
+                        }, {
+                            "name": "param",
+                            "text": "errorMessageLock - lock the error message and validity state"
                         }]
                 }
             },

package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/mg-input-rich-text-editor.js

@@ -7,8 +7,7 @@ export class MgInputRichTextEditor {
     constructor() {
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
-        // Classes
-        this.classFocus = 'mg-u-is-focused';
+        this.customErrorMessage = { lock: false };
         /**
          * Define the value of the editor
          * Can be either HTML string or plain text
@@ -72,27 +71,29 @@ export class MgInputRichTextEditor {
         };
         /**
          * 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)
-                return;
-            else if (isValidString(errorMessage)) {
-                this.errorMessage = errorMessage;
-            }
-            else if (this.required && this.isEmpty()) {
-                this.errorMessage = this.messages.errors.required;
-            }
-            else if (!this.getPatternValidity()) {
-                this.errorMessage = this.patternErrorMessage;
+            // Does have a new custom error message
+            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;
+                }
+                else if (this.required && this.isEmpty()) {
+                    this.errorMessage = this.messages.errors.required;
+                }
+                else if (!this.getPatternValidity()) {
+                    this.errorMessage = this.patternErrorMessage;
+                }
             }
         };
         /**
          * Handle focus event
          */
         this.handleFocus = () => {
-            this.classCollection.add(this.classFocus);
             this.classCollection = new ClassList(this.classCollection.classes);
         };
         /**
@@ -101,7 +102,6 @@ export class MgInputRichTextEditor {
          */
         this.handleBlur = () => {
             // Manage focus
-            this.classCollection.delete(this.classFocus);
             this.classCollection = new ClassList(this.classCollection.classes);
             if (!this.readonly) {
                 this.checkValidity();
@@ -169,7 +169,7 @@ export class MgInputRichTextEditor {
      * Get editor content as HTML
      * @returns HTML content of the editor
      */
-    async getHTML() {
+    getHTML() {
         return new Promise(resolve => {
             requestAnimationFrame(() => {
                 resolve(this.editor.getSemanticHTML());
@@ -213,17 +213,22 @@ export class MgInputRichTextEditor {
      * 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-rich-text-editor> method "setError()" param "valid" must be a boolean.');
         }
-        else if (!isValidString(errorMessage)) {
+        else if (errorMessage !== undefined && !isValidString(errorMessage)) {
             throw new Error('<mg-input-rich-text-editor> 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;
         }
     }
@@ -242,6 +247,8 @@ export class MgInputRichTextEditor {
             // - 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;
@@ -255,10 +262,12 @@ export class MgInputRichTextEditor {
      * @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;
-        if (this.valid !== oldValidValue) {
+        if (this.valid !== oldValue) {
             this.inputValid.emit(this.valid);
         }
     }
@@ -308,7 +317,7 @@ export class MgInputRichTextEditor {
      * @returns HTML mg-input Element
      */
     render() {
-        return (h("mg-input", { key: 'b7f7fe282aa00b695418fe7f055955045bbd932d', identifier: this.identifier, class: this.classCollection.join(), label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.hasDisplayedError ? this.errorMessage : undefined }, this.readonly ? (h("div", { class: "mg-c-input__readonly-value", innerHTML: this.value })) : (h("div", { ref: el => {
+        return (h("mg-input", { key: '5e807e1059704a6624a1fda63ab56a6f9a51230f', identifier: this.identifier, class: this.classCollection.join(), label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.hasDisplayedError ? this.errorMessage : undefined }, this.readonly ? (h("div", { class: "mg-c-input__readonly-value", innerHTML: this.value })) : (h("div", { ref: el => {
                 this.wrapperElement = el;
             }, id: this.identifier, class: "mg-c-input__wrapper" }, h("div", null)))));
     }
@@ -805,7 +814,7 @@ export class MgInputRichTextEditor {
             },
             "setError": {
                 "complexType": {
-                    "signature": "(valid: MgInputRichTextEditor[\"valid\"], errorMessage: string) => Promise<void>",
+                    "signature": "(valid: MgInputRichTextEditor[\"valid\"], errorMessage?: string, errorMessageLock?: boolean) => Promise<void>",
                     "parameters": [{
                             "name": "valid",
                             "type": "boolean",
@@ -814,6 +823,10 @@ export class MgInputRichTextEditor {
                             "name": "errorMessage",
                             "type": "string",
                             "docs": "- the error message to display"
+                        }, {
+                            "name": "errorMessageLock",
+                            "type": "boolean",
+                            "docs": "- lock the error message and validity state"
                         }],
                     "references": {
                         "Promise": {
@@ -835,6 +848,9 @@ export class MgInputRichTextEditor {
                         }, {
                             "name": "param",
                             "text": "errorMessage - the error message to display"
+                        }, {
+                            "name": "param",
+                            "text": "errorMessageLock - lock the error message and validity state"
                         }]
                 }
             },

package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js

@@ -48,6 +48,7 @@ export class MgInputSelect {
     constructor() {
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
+        this.customErrorMessage = { lock: false };
         /**
          * Input name
          * If not set the value equals the identifier
@@ -156,15 +157,17 @@ export class MgInputSelect {
         };
         /**
          * 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) {
                     this.errorMessage = this.messages.errors.required;
                 }
@@ -278,17 +281,22 @@ export class MgInputSelect {
      * 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-select> method "setError()" param "valid" must be a boolean.');
         }
-        else if (!isValidString(errorMessage)) {
+        else if (errorMessage !== undefined && !isValidString(errorMessage)) {
             throw new Error('<mg-input-select> 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 @@ export class MgInputSelect {
             // - 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 @@ export class MgInputSelect {
      * @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);
         }
     }
@@ -360,7 +372,7 @@ export class MgInputSelect {
      */
     render() {
         const readonlyValue = this.getReadonlyValue();
-        return (h("mg-input", { key: '1394827503d3f2dd71efc6efa389ac707573d2ec', 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 && readonlyValue === null ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, readonlyValue)) : (h("select", { class: "mg-c-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
+        return (h("mg-input", { key: '928c7d4ebccfe38ae86630d2cb8c06f07ca09a8a', 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 && readonlyValue === null ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, readonlyValue)) : (h("select", { class: "mg-c-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
                 if (el !== null)
                     this.input = el;
             } }, (!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder
@@ -857,7 +869,7 @@ export class MgInputSelect {
             },
             "setError": {
                 "complexType": {
-                    "signature": "(valid: MgInputSelect[\"valid\"], errorMessage: string) => Promise<void>",
+                    "signature": "(valid: MgInputSelect[\"valid\"], errorMessage?: string, errorMessageLock?: boolean) => Promise<void>",
                     "parameters": [{
                             "name": "valid",
                             "type": "boolean",
@@ -866,6 +878,10 @@ export class MgInputSelect {
                             "name": "errorMessage",
                             "type": "string",
                             "docs": "- the error message to display"
+                        }, {
+                            "name": "errorMessageLock",
+                            "type": "boolean",
+                            "docs": "- lock the error message and validity state"
                         }],
                     "references": {
                         "Promise": {
@@ -887,6 +903,9 @@ export class MgInputSelect {
                         }, {
                             "name": "param",
                             "text": "errorMessage - the error message to display"
+                        }, {
+                            "name": "param",
+                            "text": "errorMessageLock - lock the error message and validity state"
                         }]
                 }
             },