@mgdis/mg-components 6.16.0 → 6.18.0

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

@@ -11,6 +11,7 @@ export class MgInputNumeric {
     constructor() {
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
+        this.customErrorMessage = { lock: false };
         /**
          * Input name
          * If not set the value equals the identifier
@@ -116,23 +117,26 @@ export class MgInputNumeric {
         this.formatErrorValue = (value) => localeNumber(value, this.locale, !Number.isInteger(value) && this.type === 'decimal' ? this.decimalLength : 0);
         /**
          * Set input error message
-         * @param errorMessage - errorMessage override
+         * @param fromSetErrorContext - context come from `setError` method
          */
-        this.setErrorMessage = (errorMessage) => {
+        this.setErrorMessage = (fromSetErrorContext = false) => {
             // Set error message
             this.errorMessage = undefined;
             if (!this.valid) {
                 const inputError = this.getInputError();
-                if (errorMessage !== undefined) {
-                    this.errorMessage = errorMessage;
+                // Does have a new custom error message OR does have a custom error message locked
+                if (fromSetErrorContext || (this.customErrorMessage.lock && this.customErrorMessage.message !== undefined)) {
+                    this.errorMessage = this.customErrorMessage.message;
                 }
+                // required
                 else if (inputError === 'required') {
                     this.errorMessage = this.messages.errors[inputError];
                 }
+                // min/max
                 else {
                     const formattedMin = this.formatErrorValue(this.min);
                     const formattedMax = this.formatErrorValue(this.max);
-                    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);
                 }
             }
         };
@@ -211,23 +215,8 @@ export class MgInputNumeric {
             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.
@@ -345,17 +334,22 @@ export class MgInputNumeric {
      * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
      * @param valid - value indicating the validity
      * @param errorMessage - the error message to display
+     * @param errorMessageLock - lock the error message and validity state
      */
-    async setError(valid, errorMessage) {
+    async setError(valid, errorMessage, errorMessageLock = false) {
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-numeric> method "setError()" param "valid" must be a boolean.');
         }
-        else if (!isValidString(errorMessage)) {
+        else if (errorMessage !== undefined && !isValidString(errorMessage)) {
             throw new Error('<mg-input-numeric> method "setError()" param "errorMessage" must be a string.');
         }
         else {
+            this.customErrorMessage = {
+                lock: valid ? false : errorMessageLock,
+                message: valid ? undefined : errorMessage,
+            };
             this.setValidity(valid);
-            this.setErrorMessage(valid ? undefined : errorMessage);
+            this.setErrorMessage(true);
             this.hasDisplayedError = this.invalid;
         }
     }
@@ -373,6 +367,8 @@ export class MgInputNumeric {
             // - Keep everything in sync both inside and outside the component
             return new Promise(resolve => {
                 requestAnimationFrame(() => {
+                    // unlock validity check by reseting customErrorMessage
+                    this.customErrorMessage = { lock: false };
                     this.checkValidity();
                     this.errorMessage = undefined;
                     this.hasDisplayedError = false;
@@ -386,11 +382,13 @@ export class MgInputNumeric {
      * @param newValue - valid new value
      */
     setValidity(newValue) {
-        const oldValidValue = this.valid;
-        this.valid = newValue;
+        const oldValue = this.valid;
+        if (!this.customErrorMessage.lock || (this.customErrorMessage.message !== undefined && !newValue)) {
+            this.valid = newValue;
+        }
         this.invalid = !this.valid;
         // We need to send valid event even if it is the same value
-        if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValidValue))
+        if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValue))
             this.inputValid.emit(this.valid);
     }
     /**
@@ -462,7 +460,7 @@ export class MgInputNumeric {
      * @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) => {
@@ -488,7 +486,6 @@ export class MgInputNumeric {
         return {
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -503,11 +500,11 @@ export class MgInputNumeric {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "value"
             },
             "identifier": {
                 "type": "string",
-                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -522,11 +519,11 @@ export class MgInputNumeric {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "identifier"
             },
             "name": {
                 "type": "string",
-                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -542,11 +539,11 @@ export class MgInputNumeric {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "name",
                 "defaultValue": "this.identifier"
             },
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -561,11 +558,11 @@ export class MgInputNumeric {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "label"
             },
             "labelOnTop": {
                 "type": "boolean",
-                "attribute": "label-on-top",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -581,11 +578,11 @@ export class MgInputNumeric {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "label-on-top",
                 "defaultValue": "false"
             },
             "labelHide": {
                 "type": "boolean",
-                "attribute": "label-hide",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -601,11 +598,11 @@ export class MgInputNumeric {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "label-hide",
                 "defaultValue": "false"
             },
             "placeholder": {
                 "type": "string",
-                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -620,11 +617,11 @@ export class MgInputNumeric {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "placeholder"
             },
             "required": {
                 "type": "boolean",
-                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -640,11 +637,11 @@ export class MgInputNumeric {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "required",
                 "defaultValue": "false"
             },
             "readonly": {
                 "type": "boolean",
-                "attribute": "readonly",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -660,11 +657,11 @@ export class MgInputNumeric {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "readonly",
                 "defaultValue": "false"
             },
             "max": {
                 "type": "number",
-                "attribute": "max",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -679,11 +676,11 @@ export class MgInputNumeric {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "max"
             },
             "min": {
                 "type": "number",
-                "attribute": "min",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -698,11 +695,11 @@ export class MgInputNumeric {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "min"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -718,11 +715,11 @@ export class MgInputNumeric {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "mgWidth": {
                 "type": "any",
-                "attribute": "mg-width",
                 "mutable": false,
                 "complexType": {
                     "original": "Width",
@@ -743,11 +740,11 @@ export class MgInputNumeric {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "mg-width"
             },
             "tooltip": {
                 "type": "string",
-                "attribute": "tooltip",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -762,11 +759,11 @@ export class MgInputNumeric {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "tooltip"
             },
             "tooltipPosition": {
                 "type": "string",
-                "attribute": "tooltip-position",
                 "mutable": false,
                 "complexType": {
                     "original": "TooltipPosition",
@@ -788,11 +785,11 @@ export class MgInputNumeric {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "tooltip-position",
                 "defaultValue": "'input'"
             },
             "helpText": {
                 "type": "string",
-                "attribute": "help-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -807,11 +804,11 @@ export class MgInputNumeric {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "help-text"
             },
             "type": {
                 "type": "string",
-                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "NumericType",
@@ -833,11 +830,11 @@ export class MgInputNumeric {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "type",
                 "defaultValue": "'decimal'"
             },
             "format": {
                 "type": "string",
-                "attribute": "format",
                 "mutable": false,
                 "complexType": {
                     "original": "Format",
@@ -859,11 +856,11 @@ export class MgInputNumeric {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "format",
                 "defaultValue": "'number'"
             },
             "currency": {
                 "type": "string",
-                "attribute": "currency",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -879,11 +876,11 @@ export class MgInputNumeric {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "currency",
                 "defaultValue": "'EUR'"
             },
             "unit": {
                 "type": "string",
-                "attribute": "unit",
                 "mutable": false,
                 "complexType": {
                     "original": "Intl.NumberFormatOptions['unit']",
@@ -903,11 +900,11 @@ export class MgInputNumeric {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "unit"
             },
             "unitDisplay": {
                 "type": "string",
-                "attribute": "unit-display",
                 "mutable": false,
                 "complexType": {
                     "original": "Intl.NumberFormatOptions['unitDisplay']",
@@ -928,11 +925,11 @@ export class MgInputNumeric {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "unit-display",
                 "defaultValue": "'short'"
             },
             "integerLength": {
                 "type": "number",
-                "attribute": "integer-length",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -948,11 +945,11 @@ export class MgInputNumeric {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "integer-length",
                 "defaultValue": "13"
             },
             "decimalLength": {
                 "type": "number",
-                "attribute": "decimal-length",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -968,11 +965,11 @@ export class MgInputNumeric {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "decimal-length",
                 "defaultValue": "2"
             },
             "valid": {
                 "type": "boolean",
-                "attribute": "valid",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -987,11 +984,11 @@ export class MgInputNumeric {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "valid"
             },
             "invalid": {
                 "type": "boolean",
-                "attribute": "invalid",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -1006,7 +1003,8 @@ export class MgInputNumeric {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "invalid"
             }
         };
     }
@@ -1093,7 +1091,7 @@ export class MgInputNumeric {
             },
             "setError": {
                 "complexType": {
-                    "signature": "(valid: MgInputNumeric[\"valid\"], errorMessage: string) => Promise<void>",
+                    "signature": "(valid: MgInputNumeric[\"valid\"], errorMessage?: string, errorMessageLock?: boolean) => Promise<void>",
                     "parameters": [{
                             "name": "valid",
                             "type": "boolean",
@@ -1102,6 +1100,10 @@ export class MgInputNumeric {
                             "name": "errorMessage",
                             "type": "string",
                             "docs": "- the error message to display"
+                        }, {
+                            "name": "errorMessageLock",
+                            "type": "boolean",
+                            "docs": "- lock the error message and validity state"
                         }],
                     "references": {
                         "Promise": {
@@ -1123,6 +1125,9 @@ export class MgInputNumeric {
                         }, {
                             "name": "param",
                             "text": "errorMessage - the error message to display"
+                        }, {
+                            "name": "param",
+                            "text": "errorMessageLock - lock the error message and validity state"
                         }]
                 }
             },