@mgdis/mg-components 6.16.0 → 6.18.0

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

@@ -16,6 +16,7 @@ export class MgInputCheckbox {
     constructor() {
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
+        this.customErrorMessage = { lock: false };
         this.mode = 'custom';
         // style
         this.baseClassName = 'mg-c-input--checkbox';
@@ -233,17 +234,20 @@ export class MgInputCheckbox {
         };
         /**
          * Set input error message
-         * @param displayError - dispay error condition
-         * @param errorMessage - errorMessage override
+         * @param fromSetErrorContext - context come from `setError` method
          */
-        this.setErrorMessage = (displayError = true, errorMessage) => {
+        this.setErrorMessage = (fromSetErrorContext = false) => {
             // Set error message
             this.errorMessage = undefined;
-            if (displayError && !this.valid) {
-                if (errorMessage !== undefined)
-                    this.errorMessage = errorMessage;
-                else if (!this.validateRequired())
+            if (!this.valid) {
+                // Does have a new custom error message OR does have a custom error message locked
+                if (fromSetErrorContext || (this.customErrorMessage.lock && this.customErrorMessage.message !== undefined)) {
+                    this.errorMessage = this.customErrorMessage.message;
+                }
+                // required
+                else if (!this.validateRequired()) {
                     this.errorMessage = this.messages.errors.required;
+                }
             }
         };
         /**
@@ -337,7 +341,7 @@ export class MgInputCheckbox {
         this.checkValidity();
         if (this.hasDisplayedError) {
             this.hasDisplayedError = prop !== 'required';
-            this.setErrorMessage(this.hasDisplayedError);
+            this.setErrorMessage();
         }
         this.setButtonTextKey();
     }
@@ -401,17 +405,22 @@ export class MgInputCheckbox {
      * 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-checkbox> method "setError()" param "valid" must be a boolean.');
         }
-        else if (!isValidString(errorMessage)) {
+        else if (errorMessage !== undefined && !isValidString(errorMessage)) {
             throw new Error('<mg-input-checkbox> method "setError()" param "errorMessage" must be a string.');
         }
         else {
+            this.customErrorMessage = {
+                lock: valid ? false : errorMessageLock,
+                message: valid ? undefined : errorMessage,
+            };
             this.setValidity(valid);
-            this.setErrorMessage(undefined, valid ? undefined : errorMessage);
+            this.setErrorMessage(true);
             this.hasDisplayedError = this.invalid;
         }
     }
@@ -429,6 +438,8 @@ export class MgInputCheckbox {
             // - 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;
@@ -442,11 +453,13 @@ export class MgInputCheckbox {
      * @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.valid !== oldValidValue)
+        if (this.valid !== oldValue)
             this.inputValid.emit(this.valid);
     }
     /**
@@ -565,7 +578,7 @@ export class MgInputCheckbox {
         else {
             inputContent = this.renderCheckboxMulti();
         }
-        return (h("mg-input", { key: '84d13ac702497773013daa72357e4d1dcf4ebb30', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, tooltip: this.tooltip, tooltipPosition: this.readonly && readonlyValue.length === 0 ? 'label' : this.tooltipPosition, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined }, inputContent));
+        return (h("mg-input", { key: '5addea288b5c87fec33a56449d14f861aefd465d', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, tooltip: this.tooltip, tooltipPosition: this.readonly && readonlyValue.length === 0 ? 'label' : this.tooltipPosition, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined }, inputContent));
     }
     static get is() { return "mg-input-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -583,7 +596,6 @@ export class MgInputCheckbox {
         return {
             "value": {
                 "type": "unknown",
-                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "CheckboxValue[]",
@@ -607,7 +619,6 @@ export class MgInputCheckbox {
             },
             "type": {
                 "type": "string",
-                "attribute": "type",
                 "mutable": true,
                 "complexType": {
                     "original": "CheckboxType",
@@ -628,11 +639,11 @@ export class MgInputCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "type"
             },
             "identifier": {
                 "type": "string",
-                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -647,11 +658,11 @@ export class MgInputCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "identifier"
             },
             "name": {
                 "type": "string",
-                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -667,11 +678,11 @@ export class MgInputCheckbox {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "name",
                 "defaultValue": "this.identifier"
             },
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -686,11 +697,11 @@ export class MgInputCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "label"
             },
             "labelOnTop": {
                 "type": "boolean",
-                "attribute": "label-on-top",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -706,11 +717,11 @@ export class MgInputCheckbox {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "label-on-top",
                 "defaultValue": "false"
             },
             "labelHide": {
                 "type": "boolean",
-                "attribute": "label-hide",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -726,11 +737,11 @@ export class MgInputCheckbox {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "label-hide",
                 "defaultValue": "false"
             },
             "inputVerticalList": {
                 "type": "boolean",
-                "attribute": "input-vertical-list",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -746,11 +757,11 @@ export class MgInputCheckbox {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "input-vertical-list",
                 "defaultValue": "false"
             },
             "required": {
                 "type": "boolean",
-                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -766,11 +777,11 @@ export class MgInputCheckbox {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "required",
                 "defaultValue": "false"
             },
             "readonly": {
                 "type": "boolean",
-                "attribute": "readonly",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -786,11 +797,11 @@ export class MgInputCheckbox {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "readonly",
                 "defaultValue": "false"
             },
             "displaySelectedValues": {
                 "type": "boolean",
-                "attribute": "display-selected-values",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -806,11 +817,11 @@ export class MgInputCheckbox {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "display-selected-values",
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -826,11 +837,11 @@ export class MgInputCheckbox {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "tooltip": {
                 "type": "string",
-                "attribute": "tooltip",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -845,11 +856,11 @@ export class MgInputCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "tooltip"
             },
             "tooltipPosition": {
                 "type": "string",
-                "attribute": "tooltip-position",
                 "mutable": false,
                 "complexType": {
                     "original": "TooltipPosition",
@@ -871,11 +882,11 @@ export class MgInputCheckbox {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "tooltip-position",
                 "defaultValue": "'input'"
             },
             "helpText": {
                 "type": "string",
-                "attribute": "help-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -890,11 +901,11 @@ export class MgInputCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "help-text"
             },
             "valid": {
                 "type": "boolean",
-                "attribute": "valid",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -909,11 +920,11 @@ export class MgInputCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "valid"
             },
             "invalid": {
                 "type": "boolean",
-                "attribute": "invalid",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -928,11 +939,11 @@ export class MgInputCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "invalid"
             },
             "editButtonMessage": {
                 "type": "string",
-                "attribute": "edit-button-message",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -947,11 +958,11 @@ export class MgInputCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "edit-button-message"
             },
             "showButtonMessage": {
                 "type": "string",
-                "attribute": "show-button-message",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -966,11 +977,11 @@ export class MgInputCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "show-button-message"
             },
             "selectButtonMessage": {
                 "type": "string",
-                "attribute": "select-button-message",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -985,7 +996,8 @@ export class MgInputCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "select-button-message"
             }
         };
     }
@@ -1082,7 +1094,7 @@ export class MgInputCheckbox {
             },
             "setError": {
                 "complexType": {
-                    "signature": "(valid: MgInputCheckbox[\"valid\"], errorMessage: string) => Promise<void>",
+                    "signature": "(valid: MgInputCheckbox[\"valid\"], errorMessage?: string, errorMessageLock?: boolean) => Promise<void>",
                     "parameters": [{
                             "name": "valid",
                             "type": "boolean",
@@ -1091,6 +1103,10 @@ export class MgInputCheckbox {
                             "name": "errorMessage",
                             "type": "string",
                             "docs": "- the error message to display"
+                        }, {
+                            "name": "errorMessageLock",
+                            "type": "boolean",
+                            "docs": "- lock the error message and validity state"
                         }],
                     "references": {
                         "Promise": {
@@ -1112,6 +1128,9 @@ export class MgInputCheckbox {
                         }, {
                             "name": "param",
                             "text": "errorMessage - the error message to display"
+                        }, {
+                            "name": "param",
+                            "text": "errorMessageLock - lock the error message and validity state"
                         }]
                 }
             },