@mgdis/mg-components 6.16.0 → 6.18.0

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
@@ -382,7 +394,6 @@ export class MgInputSelect {
         return {
             "value": {
                 "type": "any",
-                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "any",
@@ -397,11 +408,11 @@ export class MgInputSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "value"
             },
             "items": {
                 "type": "unknown",
-                "attribute": "items",
                 "mutable": false,
                 "complexType": {
                     "original": "(string | SelectOption)[]",
@@ -425,7 +436,6 @@ export class MgInputSelect {
             },
             "identifier": {
                 "type": "string",
-                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -440,11 +450,11 @@ export class MgInputSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "identifier"
             },
             "name": {
                 "type": "string",
-                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -460,11 +470,11 @@ export class MgInputSelect {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "name",
                 "defaultValue": "this.identifier"
             },
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -479,11 +489,11 @@ export class MgInputSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "label"
             },
             "labelOnTop": {
                 "type": "boolean",
-                "attribute": "label-on-top",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -499,11 +509,11 @@ export class MgInputSelect {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "label-on-top",
                 "defaultValue": "false"
             },
             "labelHide": {
                 "type": "boolean",
-                "attribute": "label-hide",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -519,11 +529,11 @@ export class MgInputSelect {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "label-hide",
                 "defaultValue": "false"
             },
             "placeholder": {
                 "type": "string",
-                "attribute": "placeholder",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -538,11 +548,11 @@ export class MgInputSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "placeholder"
             },
             "placeholderHide": {
                 "type": "boolean",
-                "attribute": "placeholder-hide",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -558,11 +568,11 @@ export class MgInputSelect {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "placeholder-hide",
                 "defaultValue": "false"
             },
             "placeholderDisabled": {
                 "type": "boolean",
-                "attribute": "placeholder-disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -578,11 +588,11 @@ export class MgInputSelect {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "placeholder-disabled",
                 "defaultValue": "false"
             },
             "required": {
                 "type": "boolean",
-                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -598,11 +608,11 @@ export class MgInputSelect {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "required",
                 "defaultValue": "false"
             },
             "readonly": {
                 "type": "boolean",
-                "attribute": "readonly",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -618,11 +628,11 @@ export class MgInputSelect {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "readonly",
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -638,11 +648,11 @@ export class MgInputSelect {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "mgWidth": {
                 "type": "any",
-                "attribute": "mg-width",
                 "mutable": false,
                 "complexType": {
                     "original": "Width",
@@ -663,11 +673,11 @@ export class MgInputSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "mg-width"
             },
             "tooltip": {
                 "type": "string",
-                "attribute": "tooltip",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -682,11 +692,11 @@ export class MgInputSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "tooltip"
             },
             "tooltipPosition": {
                 "type": "string",
-                "attribute": "tooltip-position",
                 "mutable": false,
                 "complexType": {
                     "original": "TooltipPosition",
@@ -708,11 +718,11 @@ export class MgInputSelect {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "tooltip-position",
                 "defaultValue": "'input'"
             },
             "helpText": {
                 "type": "string",
-                "attribute": "help-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -727,11 +737,11 @@ export class MgInputSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "help-text"
             },
             "valid": {
                 "type": "boolean",
-                "attribute": "valid",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -746,11 +756,11 @@ export class MgInputSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "valid"
             },
             "invalid": {
                 "type": "boolean",
-                "attribute": "invalid",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -765,7 +775,8 @@ export class MgInputSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "invalid"
             }
         };
     }
@@ -858,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",
@@ -867,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": {
@@ -888,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"
                         }]
                 }
             },