@mgdis/mg-components 6.16.0 → 6.18.0

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))))))));
@@ -293,7 +305,6 @@ export class MgInputRadio {
         return {
             "value": {
                 "type": "any",
-                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "any",
@@ -308,11 +319,11 @@ export class MgInputRadio {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "value"
             },
             "items": {
                 "type": "unknown",
-                "attribute": "items",
                 "mutable": false,
                 "complexType": {
                     "original": "string[] | RadioOption[]",
@@ -336,7 +347,6 @@ export class MgInputRadio {
             },
             "identifier": {
                 "type": "string",
-                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -351,11 +361,11 @@ export class MgInputRadio {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "identifier"
             },
             "name": {
                 "type": "string",
-                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -371,11 +381,11 @@ export class MgInputRadio {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "name",
                 "defaultValue": "this.identifier"
             },
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -390,11 +400,11 @@ export class MgInputRadio {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "label"
             },
             "labelOnTop": {
                 "type": "boolean",
-                "attribute": "label-on-top",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -410,11 +420,11 @@ export class MgInputRadio {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "label-on-top",
                 "defaultValue": "false"
             },
             "labelHide": {
                 "type": "boolean",
-                "attribute": "label-hide",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -430,11 +440,11 @@ export class MgInputRadio {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "label-hide",
                 "defaultValue": "false"
             },
             "inputVerticalList": {
                 "type": "boolean",
-                "attribute": "input-vertical-list",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -450,11 +460,11 @@ export class MgInputRadio {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "input-vertical-list",
                 "defaultValue": "false"
             },
             "required": {
                 "type": "boolean",
-                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -470,11 +480,11 @@ export class MgInputRadio {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "required",
                 "defaultValue": "false"
             },
             "readonly": {
                 "type": "boolean",
-                "attribute": "readonly",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -490,11 +500,11 @@ export class MgInputRadio {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "readonly",
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -510,11 +520,11 @@ export class MgInputRadio {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "tooltip": {
                 "type": "string",
-                "attribute": "tooltip",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -529,11 +539,11 @@ export class MgInputRadio {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "tooltip"
             },
             "tooltipPosition": {
                 "type": "string",
-                "attribute": "tooltip-position",
                 "mutable": false,
                 "complexType": {
                     "original": "TooltipPosition",
@@ -555,11 +565,11 @@ export class MgInputRadio {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "tooltip-position",
                 "defaultValue": "'input'"
             },
             "helpText": {
                 "type": "string",
-                "attribute": "help-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -574,11 +584,11 @@ export class MgInputRadio {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "help-text"
             },
             "valid": {
                 "type": "boolean",
-                "attribute": "valid",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -593,11 +603,11 @@ export class MgInputRadio {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "valid"
             },
             "invalid": {
                 "type": "boolean",
-                "attribute": "invalid",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -612,7 +622,8 @@ export class MgInputRadio {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "invalid"
             }
         };
     }
@@ -705,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",
@@ -714,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": {
@@ -735,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"
                         }]
                 }
             },