@mgdis/mg-components 6.16.0 → 6.18.0

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

@@ -16,14 +16,17 @@ const formats = ['none', 'number', 'currency', 'percent', 'unit'];
 const mgInputNumericCss = ".mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input.mg-c-input--has-icon .mg-c-input__with-character-left>mg-icon:first-of-type,.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container>mg-icon:first-of-type{position:absolute;top:50%;left:var(--mg-b-size-8);color:var(--mg-c-input-color-icon);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__with-character-left .mg-c-input__box,.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container .mg-c-input__box{padding-left:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2)}.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-c-input__input-container{width:100%;flex:1 auto}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left,.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left,.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left{width:max-content}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left:has(textarea),.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left:has(textarea),.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left:has(textarea){flex-grow:inherit}.mg-c-input.mg-c-input--width-2 .mg-c-input__box{width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(var(--mg-b-size-48) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-4 .mg-c-input__box{width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(var(--mg-b-size-72) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-16 .mg-c-input__box{width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(calc(26 * var(--mg-b-size-8)) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input .mg-c-input__box{width:auto;text-align:var(--mg-c-input-text-align, right)}";
 
 const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class MgInputNumeric extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.valueChange = createEvent(this, "value-change", 7);
         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
@@ -129,23 +132,26 @@ 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);
-                    this.errorMessage = this.messages.input.numeric.helpText[inputError].replace('{min}', formattedMin).replace('{max}', formattedMax);
+                    this.errorMessage = this.messages.input.numeric.error[inputError].replace('{min}', formattedMin).replace('{max}', formattedMax);
                 }
             }
         };
@@ -224,23 +230,8 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class MgInputNumeric e
             if (this.min === undefined && this.max === undefined && text === undefined) {
                 return undefined;
             }
-            // Generate range message based on available constraints
-            let rangeMessage;
-            if (this.min !== undefined && this.max !== undefined) {
-                rangeMessage = this.messages.input.numeric.helpText.minMax.replace('{min}', this.formatErrorValue(this.min)).replace('{max}', this.formatErrorValue(this.max));
-            }
-            else if (this.min !== undefined) {
-                rangeMessage = this.messages.input.numeric.helpText.min.replace('{min}', this.formatErrorValue(this.min));
-            }
-            else if (this.max !== undefined) {
-                rangeMessage = this.messages.input.numeric.helpText.max.replace('{max}', this.formatErrorValue(this.max));
-            }
-            // Combine custom helpText with range message if both exist
-            if (text !== undefined && rangeMessage !== undefined) {
-                return `${text}<br>${rangeMessage}`;
-            }
             // Return either custom helpText or range message
-            return text || rangeMessage;
+            return text;
         };
         /**
          * Renders the readonly content of the input component.
@@ -358,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;
         }
     }
@@ -386,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;
@@ -399,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);
     }
     /**
@@ -475,7 +475,7 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class MgInputNumeric e
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: 'ca551b49b1b4dc98fd4e943e51de8a32bc78882b', 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

@@ -11,14 +11,17 @@ import { d as defineCustomElement$2 } from './mg-tooltip-content2.js';
 const mgInputPasswordCss = ".mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input.mg-c-input--has-icon .mg-c-input__with-character-left>mg-icon:first-of-type,.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container>mg-icon:first-of-type{position:absolute;top:50%;left:var(--mg-b-size-8);color:var(--mg-c-input-color-icon);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__with-character-left .mg-c-input__box,.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container .mg-c-input__box{padding-left:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2)}.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-c-input__input-container{width:100%;flex:1 auto}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left,.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left,.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left{width:max-content}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left:has(textarea),.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left:has(textarea),.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left:has(textarea){flex-grow:inherit}.mg-c-input.mg-c-input--width-2 .mg-c-input__box{width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(var(--mg-b-size-48) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-4 .mg-c-input__box{width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(var(--mg-b-size-72) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-16 .mg-c-input__box{width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(calc(26 * var(--mg-b-size-8)) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input.mg-c-input--password .mg-c-input__input-icon{color:var(--mg-b-color-dark)}.mg-c-input.mg-c-input--password .mg-c-input__input-group{position:relative;flex-grow:1}.mg-c-input.mg-c-input--password .mg-c-input__append-button{position:absolute;right:0}.mg-c-input.mg-c-input--password .mg-c-input__box{padding-right:calc(var(--mg-b-size-min-height) + var(--mg-b-size-8))}.mg-c-input.mg-c-input--password .mg-c-input__box::-ms-reveal{display:none}";
 
 const MgInputPassword$1 = /*@__PURE__*/ proxyCustomElement(class MgInputPassword extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.valueChange = createEvent(this, "value-change", 7);
         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
@@ -94,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) {
@@ -177,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;
         }
     }
@@ -205,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;
@@ -218,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);
     }
     /*************
@@ -250,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' }))))));

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

@@ -16,9 +16,11 @@ const mgInputRadioCss = ".mg-c-input__readonly-value{min-height:var(--mg-b-font-
  */
 const isOption = (option) => typeof option === 'object' && typeof option.title === 'string' && option.value !== undefined;
 const MgInputRadio$1 = /*@__PURE__*/ proxyCustomElement(class MgInputRadio extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.valueChange = createEvent(this, "value-change", 7);
         this.inputValid = createEvent(this, "input-valid", 7);
@@ -31,6 +33,7 @@ const MgInputRadio$1 = /*@__PURE__*/ proxyCustomElement(class MgInputRadio exten
         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
@@ -94,16 +97,18 @@ const MgInputRadio$1 = /*@__PURE__*/ proxyCustomElement(class MgInputRadio exten
         };
         /**
          * 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;
                 }
@@ -208,17 +213,22 @@ const MgInputRadio$1 = /*@__PURE__*/ proxyCustomElement(class MgInputRadio exten
      * 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;
         }
     }
@@ -236,6 +246,8 @@ const MgInputRadio$1 = /*@__PURE__*/ proxyCustomElement(class MgInputRadio exten
             // - 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;
@@ -249,11 +261,13 @@ const MgInputRadio$1 = /*@__PURE__*/ proxyCustomElement(class MgInputRadio exten
      * @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);
     }
     /*************
@@ -284,7 +298,7 @@ const MgInputRadio$1 = /*@__PURE__*/ proxyCustomElement(class MgInputRadio exten
      * @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))))))));

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

@@ -16382,17 +16382,20 @@ const quillSnowCss = "/*!\n * Quill Editor v2.0.3\n * https://quilljs.com\n * Co
 
 const editorScss = quillSnowCss + "";
 
-const mgInputRichTextEditorCss = ".mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input__wrapper{display:flex;width:100%;flex-direction:column;border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light)}.mg-c-input__wrapper:focus-within{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus);outline:Highlight auto .1rem;outline:-webkit-focus-ring-color auto .1rem}.mg-c-input--has-error .mg-c-input__wrapper{border-color:var(--mg-b-color-danger)}.mg-c-input--disabled .mg-c-input__wrapper{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input--rich-text-editor .mg-c-input__readonly-value p{margin:0}.mg-c-input--rich-text-editor .mg-c-input__readonly-value p:not(:first-child){margin-top:1em}.mg-c-input--rich-text-editor .ql-toolbar{display:flex;flex-wrap:wrap;padding:var(--mg-b-size-8);border:0;border-radius:var(--mg-c-input-border-radius) var(--mg-c-input-border-radius) 0 0;background:var(--mg-b-color-neutral-0);border-block-end-width:var(--mg-c-input-border-width);border-block-end-color:var(--mg-c-input-color-border);border-block-end-style:solid}.mg-c-input--rich-text-editor .ql-toolbar .ql-formats{display:inline-flex;margin:inherit;gap:.2rem}.mg-c-input--rich-text-editor .ql-toolbar .ql-formats:not(:last-child)::after{width:.1rem;height:var(--mg-b-size-16);background:var(--mg-c-input-color-border);content:\"\";margin-block:var(--mg-b-size-8);margin-inline:var(--mg-b-size-8)}.mg-c-input--rich-text-editor .ql-toolbar button{display:flex;min-width:var(--mg-b-size-32);height:var(--mg-b-size-32);align-items:center;justify-content:center;padding:var(--mg-b-size-4);border:.1rem solid rgba(0,0,0,0);border-radius:var(--mg-b-size-radius);color:var(--mg-b-color-dark);float:inherit;transition-duration:.2s;transition-property:background-color,border-color;transition-timing-function:ease-in-out}.mg-c-input--rich-text-editor .ql-toolbar button .ql-fill,.mg-c-input--rich-text-editor .ql-toolbar button:hover .ql-fill,.mg-c-input--rich-text-editor .ql-toolbar button:focus .ql-fill,.mg-c-input--rich-text-editor .ql-toolbar button.ql-active .ql-fill{fill:currentcolor}.mg-c-input--rich-text-editor .ql-toolbar button:hover .ql-stroke,.mg-c-input--rich-text-editor .ql-toolbar button:focus .ql-stroke,.mg-c-input--rich-text-editor .ql-toolbar button.ql-active .ql-stroke,.mg-c-input--rich-text-editor .ql-toolbar button .ql-stroke{stroke:currentcolor}.mg-c-input--rich-text-editor .ql-toolbar button svg{width:var(--mg-b-size-20);height:var(--mg-b-size-20)}.mg-c-input--rich-text-editor .ql-toolbar button:focus{color:var(--mg-b-color-dark)}.mg-c-input--rich-text-editor .ql-toolbar button:focus-visible,.mg-c-input--rich-text-editor .ql-toolbar button:hover,.mg-c-input--rich-text-editor .ql-toolbar button.ql-active{border-color:var(--mg-b-color-neutral-70);background:var(--mg-b-color-neutral-20);color:var(--mg-b-color-dark)}.mg-c-input--rich-text-editor .ql-toolbar button .ql-stroke{stroke-width:.12rem}.mg-c-input--rich-text-editor .ql-toolbar button .ql-stroke.ql-thin{stroke-width:.1rem}.mg-c-input--rich-text-editor .ql-toolbar button.ql-bold .ql-stroke{stroke-width:.2rem}.mg-c-input--rich-text-editor .ql-container{border:0;border-radius:0 0 var(--mg-c-input-border-radius) var(--mg-c-input-border-radius);margin:0 .1rem .1rem;background:var(--mg-b-color-neutral-0)}.mg-c-input--rich-text-editor .ql-editor{min-height:calc(calc(var(--mg-b-font-size) * var(--mg-b-line-height) * var(--mg-c-input-rich-text-editor-rows, 3)) + calc((var(--mg-b-size-min-height) - var(--mg-b-font-size) * var(--mg-b-line-height)) / 2));padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);color:var(--mg-b-color-dark);font-size:var(--mg-b-font-size)}.mg-c-input--rich-text-editor .ql-editor.ql-blank::before{right:var(--mg-b-size-8);left:var(--mg-b-size-8)}.mg-c-input--rich-text-editor .ql-editor p:not(:first-child){margin-top:1em}.mg-c-input--rich-text-editor.mg-c-input--disabled .ql-toolbar{pointer-events:none}.mg-c-input--rich-text-editor.mg-c-input--has-error .ql-toolbar{border-color:var(--mg-b-color-danger)}";
+const mgInputRichTextEditorCss = ".mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input__wrapper{display:flex;width:100%;flex-direction:column;border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light)}.mg-c-input__wrapper:focus-within{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus);outline:Highlight auto .1rem;outline:-webkit-focus-ring-color auto .1rem}.mg-c-input--has-error .mg-c-input__wrapper{border-color:var(--mg-b-color-danger)}.mg-c-input--disabled .mg-c-input__wrapper{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input--rich-text-editor .mg-c-input__readonly-value p{margin:0}.mg-c-input--rich-text-editor .mg-c-input__readonly-value p:not(:first-child){margin-top:1em}.mg-c-input--rich-text-editor .ql-toolbar{display:flex;flex-wrap:wrap;padding:var(--mg-b-size-8);border:0;border-radius:var(--mg-c-input-border-radius) var(--mg-c-input-border-radius) 0 0;background:var(--mg-b-color-neutral-0);border-block-end-width:var(--mg-c-input-border-width);border-block-end-color:var(--mg-c-input-color-border);border-block-end-style:solid}.mg-c-input--rich-text-editor .ql-toolbar .ql-formats{display:inline-flex;margin:inherit;gap:.2rem}.mg-c-input--rich-text-editor .ql-toolbar .ql-formats:not(:last-child)::after{width:.1rem;height:var(--mg-b-size-16);background:var(--mg-c-input-color-border);content:\"\";margin-block:var(--mg-b-size-8);margin-inline:var(--mg-b-size-8)}.mg-c-input--rich-text-editor .ql-toolbar button .ql-fill,.mg-c-input--rich-text-editor .ql-toolbar button:hover .ql-fill,.mg-c-input--rich-text-editor .ql-toolbar button:focus .ql-fill,.mg-c-input--rich-text-editor .ql-toolbar button.ql-active .ql-fill{fill:currentcolor}.mg-c-input--rich-text-editor .ql-toolbar button:hover .ql-stroke,.mg-c-input--rich-text-editor .ql-toolbar button:focus .ql-stroke,.mg-c-input--rich-text-editor .ql-toolbar button.ql-active .ql-stroke,.mg-c-input--rich-text-editor .ql-toolbar button .ql-stroke{stroke:currentcolor}.mg-c-input--rich-text-editor .ql-toolbar button{display:flex;min-width:var(--mg-b-size-32);height:var(--mg-b-size-32);align-items:center;justify-content:center;padding:var(--mg-b-size-4);border:.1rem solid rgba(0,0,0,0);border-radius:var(--mg-b-size-radius);color:var(--mg-b-color-dark);float:inherit;transition-duration:.2s;transition-property:background-color,border-color;transition-timing-function:ease-in-out}.mg-c-input--rich-text-editor .ql-toolbar button svg{width:var(--mg-b-size-20);height:var(--mg-b-size-20)}.mg-c-input--rich-text-editor .ql-toolbar button:focus{color:var(--mg-b-color-dark)}.mg-c-input--rich-text-editor .ql-toolbar button:focus-visible,.mg-c-input--rich-text-editor .ql-toolbar button:hover,.mg-c-input--rich-text-editor .ql-toolbar button.ql-active{border-color:var(--mg-b-color-neutral-70);background:var(--mg-b-color-neutral-20);color:var(--mg-b-color-dark)}.mg-c-input--rich-text-editor .ql-toolbar button .ql-stroke{stroke-width:.12rem}.mg-c-input--rich-text-editor .ql-toolbar button .ql-stroke.ql-thin{stroke-width:.1rem}.mg-c-input--rich-text-editor .ql-toolbar button.ql-bold .ql-stroke{stroke-width:.2rem}.mg-c-input--rich-text-editor .ql-container{border:0;border-radius:0 0 var(--mg-c-input-border-radius) var(--mg-c-input-border-radius);margin:0 .1rem .1rem;background:var(--mg-b-color-neutral-0)}.mg-c-input--rich-text-editor .ql-editor{min-height:calc(calc(var(--mg-b-font-size) * var(--mg-b-line-height) * var(--mg-c-input-rich-text-editor-rows, 3)) + calc((var(--mg-b-size-min-height) - var(--mg-b-font-size) * var(--mg-b-line-height)) / 2));padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);color:var(--mg-b-color-dark);font-size:var(--mg-b-font-size)}.mg-c-input--rich-text-editor .ql-editor.ql-blank::before{right:var(--mg-b-size-8);left:var(--mg-b-size-8)}.mg-c-input--rich-text-editor .ql-editor p:not(:first-child){margin-top:1em}.mg-c-input--rich-text-editor.mg-c-input--disabled .ql-toolbar{pointer-events:none}.mg-c-input--rich-text-editor.mg-c-input--has-error .ql-toolbar{border-color:var(--mg-b-color-danger)}";
 
 const MgInputRichTextEditor$1 = /*@__PURE__*/ proxyCustomElement(class MgInputRichTextEditor extends HTMLElement$1 {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.inputValid = createEvent(this, "input-valid", 7);
         this.valueChange = createEvent(this, "value-change", 7);
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
+        this.customErrorMessage = { lock: false };
         // Classes
         this.classFocus = 'mg-u-is-focused';
         /**
@@ -16458,20 +16461,23 @@ const MgInputRichTextEditor$1 = /*@__PURE__*/ proxyCustomElement(class MgInputRi
         };
         /**
          * 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;
+                }
             }
         };
         /**
@@ -16599,17 +16605,22 @@ const MgInputRichTextEditor$1 = /*@__PURE__*/ proxyCustomElement(class MgInputRi
      * 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;
         }
     }
@@ -16628,6 +16639,8 @@ const MgInputRichTextEditor$1 = /*@__PURE__*/ proxyCustomElement(class MgInputRi
             // - 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;
@@ -16641,10 +16654,12 @@ const MgInputRichTextEditor$1 = /*@__PURE__*/ proxyCustomElement(class MgInputRi
      * @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);
         }
     }
@@ -16693,7 +16708,7 @@ const MgInputRichTextEditor$1 = /*@__PURE__*/ proxyCustomElement(class MgInputRi
      * @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: '2f8f244cb60996c9cbe891b04168b5aea420d3a0', 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)))));
     }