@mgdis/mg-components 5.19.2 → 5.20.0

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { M as MgInput } from './MgInput.js';
+import { H as Handler, M as MgInput } from './MgInput.js';
 import { C as ClassList, i as isValidString } from './components.utils.js';
 import { a as localeCurrency, b as localeNumber, i as initLocales } from './index2.js';
 import { d as defineCustomElement$5 } from './mg-icon2.js';
@@ -13,380 +13,386 @@ import { d as defineCustomElement$2 } from './mg-tooltip-content2.js';
 const types = ['decimal', 'integer', 'currency'];
 var InputError;
 (function (InputError) {
-  InputError["MIN"] = "min";
-  InputError["MAX"] = "max";
-  InputError["MINMAX"] = "minMax";
-  InputError["REQUIRED"] = "required";
+    InputError["MIN"] = "min";
+    InputError["MAX"] = "max";
+    InputError["MINMAX"] = "minMax";
+    InputError["REQUIRED"] = "required";
 })(InputError || (InputError = {}));
 
 const mgInputNumericCss = ":host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;max-width:100%;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input mg-input-title{width:var(--mg-inputs-title-width, auto);flex-shrink:var(--mg-inputs-shrink, 1);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;margin-top:.2rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>strong{display:inline-block;min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-c-input__input-container .mg-c-input__help-text,.mg-c-input__input-container .mg-c-input__error{font-size:1.2rem;text-align:start}.mg-c-input.mg-c-input--label-on-top{flex-direction:column}.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-container{width:100%}.mg-c-input__title{display:flex;align-items:baseline;margin-bottom:.3rem}.mg-c-input__title mg-input-title{width:auto;flex-shrink:1;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-c-input__title mg-tooltip{margin-top:0}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__input{display:flex}.mg-c-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input.mg-c-input__input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}.mg-c-input__input+.mg-c-input__help-text,.mg-c-input__input+.mg-c-input__error{margin-top:.5rem}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--toggle-disabled .mg-c-input__input .mg-c-input__button-toggle,.mg-c-input.mg-c-input--checkbox-multi-disabled .mg-c-input__input strong{opacity:var(--mg-disabled-opacity)}.mg-c-input__box{height:var(--default-size);box-sizing:border-box;padding:calc((var(--default-size) - var(--font-size)*var(--line-height))/2) var(--mg-inputs-spacer);border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));color:hsl(var(--color-dark));font-family:inherit;font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 .6rem hsl(var(--mg-inputs-color-shadow-focus-hsl)/50%)}.mg-c-input__box:disabled{opacity:.3}.mg-c-input.mg-c-input--label-on-top .mg-c-input__box{width:auto;max-width:100%}.mg-c-input.mg-c-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:-0.1rem;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--is-input-group-append.mg-c-input--readonly slot[name=append-input]{display:none}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-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-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input:not(.mg-c-input--label-on-top) .mg-c-input__box{width:100%;min-width:5rem;max-width:calc(17.7rem + var(--mg-inputs-spacer)*2)}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:space-between}.mg-c-input.mg-c-input--width-full.mg-c-input--label-on-top .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-full .mg-c-input__input-container{width:100%;flex:auto}.mg-c-input.mg-c-input--width-full .mg-c-input__input-container .mg-c-input__box{max-width:100%}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container{width:100%}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container .mg-c-input__input{width:100%;max-width:21rem}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container .mg-c-input__with-character-left{width:100%}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container .mg-c-input__box{min-width:100%;max-width:21rem}.mg-c-input.mg-c-input--width-4 .mg-c-input__input-container .mg-c-input__box{max-width:7rem}.mg-c-input.mg-c-input--width-2 .mg-c-input__input-container .mg-c-input__box{max-width:5rem}.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}}.mg-c-input .mg-c-input__box{text-align:var(--mg-inputs-text-align, right)}";
 
 const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class MgInputNumeric extends HTMLElement {
-  constructor() {
-    super();
-    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;
+    constructor() {
+        super();
+        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;
+        /**
+         * Handle input event
+         */
+        this.handleInput = () => {
+            // Check validity
+            this.checkValidity();
+            if (this.hasDisplayedError) {
+                this.setErrorMessage();
+            }
+            this.value = this.input.value;
+        };
+        /**
+         * Handle focus event
+         */
+        this.handleFocus = () => {
+            this.hasFocus = true;
+        };
+        /**
+         * Handle blur event
+         */
+        this.handleBlur = () => {
+            if (this.value === '-')
+                this.value = '';
+            // Display Error
+            this.handlerInProgress = Handler.BLUR;
+            this.displayError().finally(() => {
+                // reset guard
+                this.handlerInProgress = undefined;
+                this.hasFocus = false;
+            });
+        };
+        /**
+         * Check if input is valid
+         */
+        this.checkValidity = () => {
+            this.setValidity(this.readonly || this.disabled || this.getInputError() === null);
+        };
+        /**
+         * Set input error message
+         * @param errorMessage - errorMessage override
+         */
+        this.setErrorMessage = (errorMessage) => {
+            // Set error message
+            this.errorMessage = undefined;
+            if (!this.valid) {
+                const inputError = this.getInputError();
+                if (errorMessage !== undefined) {
+                    this.errorMessage = errorMessage;
+                }
+                else if (inputError === InputError.REQUIRED) {
+                    this.errorMessage = this.messages.errors[inputError];
+                }
+                else {
+                    this.errorMessage = this.messages.errors.numeric[inputError].replace('{min}', `${this.formatValue(this.min)}`).replace('{max}', `${this.formatValue(this.max)}`);
+                }
+            }
+        };
+        /**
+         * Get input error code
+         * @returns error code
+         */
+        this.getInputError = () => {
+            let inputError = null;
+            const hasNotEmptyValues = (toControl) => !toControl.some(value => [null, undefined].includes(value));
+            if (!hasNotEmptyValues([this.input]))
+                return inputError;
+            // required
+            if (!this.input.checkValidity() && this.input.validity.valueMissing) {
+                inputError = InputError.REQUIRED;
+            }
+            // Min & Max
+            else if (hasNotEmptyValues([this.min, this.numericValue]) && this.numericValue < this.min && this.max === undefined) {
+                // Only a min value is set
+                inputError = InputError.MIN;
+            }
+            else if (hasNotEmptyValues([this.max, this.numericValue]) && this.numericValue > this.max && this.min === undefined) {
+                // Only a max value is set
+                inputError = InputError.MAX;
+            }
+            else if (hasNotEmptyValues([this.min, this.max, this.numericValue]) && (this.numericValue < this.min || this.numericValue > this.max)) {
+                // both min and max values are set
+                inputError = InputError.MINMAX;
+            }
+            return inputError;
+        };
+        /**
+         * Format value based on type
+         * @param value - value to format
+         * @returns formated local value
+         */
+        this.formatValue = (value) => (this.type === 'currency' ? localeCurrency(value, this.locale, this.currency) : localeNumber(value, this.locale));
+        /**
+         * Validate append slot
+         */
+        this.validateAppendSlot = () => {
+            const slotAppendInput = this.element.querySelector('[slot="append-input"]');
+            if (slotAppendInput !== null) {
+                this.classCollection.add(slotAppendInput.nodeName === 'MG-BUTTON' ? 'mg-c-input--is-input-group-append' : 'mg-c-input--is-append-input-slot-content');
+            }
+        };
+        this.value = undefined;
+        this.identifier = undefined;
+        this.name = this.identifier;
+        this.label = undefined;
+        this.labelOnTop = undefined;
+        this.labelHide = false;
+        this.placeholder = undefined;
+        this.required = false;
+        this.readonly = false;
+        this.disabled = false;
+        this.mgWidth = undefined;
+        this.tooltip = undefined;
+        this.helpText = undefined;
+        this.type = types[0];
+        this.currency = 'USD';
+        this.max = undefined;
+        this.min = undefined;
+        this.integerLength = 13;
+        this.decimalLength = 2;
+        this.valid = undefined;
+        this.invalid = undefined;
+        this.classCollection = new ClassList(['mg-c-input--numeric']);
+        this.errorMessage = undefined;
+        this.hasFocus = undefined;
+    }
+    validateValue(newValue) {
+        // has input value is always render as string we get a stringified value or a '' for nullish value, so we test string type
+        if (typeof newValue === 'string') {
+            // Split number and decimal
+            const [integer, decimal = ''] = newValue.replace('-', '').split(/[.,]/);
+            // Regex
+            const regex = this.type === 'integer' ? /^-?\d+$/ : /^-?\d+(?:[.,]\d*)?$/;
+            // Filter input
+            if (this.isValidValue(newValue, regex, integer, decimal)) {
+                this.storedValue = newValue;
+            }
+            else {
+                newValue = this.handleInvalidValue();
+            }
+            // Set value and input value
+            this.updateValues(newValue);
+        }
+    }
+    handleValidityChange(newValue, _oldValue, prop) {
+        if (this.input !== undefined) {
+            this.input[prop] = newValue;
+            this.checkValidity();
+            if (this.hasDisplayedError) {
+                this.setErrorMessage();
+                this.hasDisplayedError = false;
+            }
+        }
+    }
+    validateType(newValue) {
+        if (!types.includes(newValue)) {
+            throw new Error(`<mg-input-numeric> prop "type" must be one of: ${types.join(', ')}`);
+        }
+    }
+    validateIntegerLength(newValue) {
+        if (newValue < 1) {
+            throw new Error(`<mg-input-numeric> prop "integer-length" must be a positive number.`);
+        }
+    }
+    validateDecimalLength(newValue) {
+        if (newValue < 1) {
+            throw new Error(`<mg-input-numeric> prop "decimal-length" must be a positive number, consider using prop "type" to "integer" instead.`);
+        }
+    }
     /**
-     * Handle input event
+     * Display input error if it exists.
      */
-    this.handleInput = () => {
-      // Check validity
-      this.checkValidity();
-      if (this.hasDisplayedError) {
+    async displayError() {
+        this.checkValidity();
         this.setErrorMessage();
-      }
-      this.value = this.input.value;
-    };
-    /**
-     * Handle focus event
-     */
-    this.handleFocus = () => {
-      this.hasFocus = true;
-    };
-    /**
-     * Handle blur event
-     */
-    this.handleBlur = () => {
-      if (this.value === '-')
-        this.value = '';
-      // Display Error
-      this.displayError();
-      this.hasFocus = false;
-    };
-    /**
-     * Check if input is valid
-     */
-    this.checkValidity = () => {
-      this.setValidity(this.readonly || this.disabled || this.getInputError() === null);
-    };
+        this.hasDisplayedError = this.invalid;
+    }
     /**
-     * Set input error message
-     * @param errorMessage - errorMessage override
+     * Set an error and display a custom error message.
+     * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.
+     * It must be paired with an error message to display for the given context.
+     * 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
      */
-    this.setErrorMessage = (errorMessage) => {
-      // Set error message
-      this.errorMessage = undefined;
-      if (!this.valid) {
-        const inputError = this.getInputError();
-        if (errorMessage !== undefined) {
-          this.errorMessage = errorMessage;
+    async setError(valid, errorMessage) {
+        if (typeof valid !== 'boolean') {
+            throw new Error('<mg-input-numeric> method "setError()" param "valid" must be a boolean');
         }
-        else if (inputError === InputError.REQUIRED) {
-          this.errorMessage = this.messages.errors[inputError];
+        else if (!isValidString(errorMessage)) {
+            throw new Error('<mg-input-numeric> method "setError()" param "errorMessage" must be a string');
         }
         else {
-          this.errorMessage = this.messages.errors.numeric[inputError].replace('{min}', `${this.formatValue(this.min)}`).replace('{max}', `${this.formatValue(this.max)}`);
+            this.setValidity(valid);
+            this.setErrorMessage(valid ? undefined : errorMessage);
+            this.hasDisplayedError = this.invalid;
         }
-      }
-    };
+    }
     /**
-     * Get input error code
-     * @returns error code
+     * Method to set validity values
+     * @param newValue - valid new value
      */
-    this.getInputError = () => {
-      let inputError = null;
-      const hasNotEmptyValues = (toControl) => !toControl.some(value => [null, undefined].includes(value));
-      if (!hasNotEmptyValues([this.input]))
-        return inputError;
-      // required
-      if (!this.input.checkValidity() && this.input.validity.valueMissing) {
-        inputError = InputError.REQUIRED;
-      }
-      // Min & Max
-      else if (hasNotEmptyValues([this.min, this.numericValue]) && this.numericValue < this.min && this.max === undefined) {
-        // Only a min value is set
-        inputError = InputError.MIN;
-      }
-      else if (hasNotEmptyValues([this.max, this.numericValue]) && this.numericValue > this.max && this.min === undefined) {
-        // Only a max value is set
-        inputError = InputError.MAX;
-      }
-      else if (hasNotEmptyValues([this.min, this.max, this.numericValue]) && (this.numericValue < this.min || this.numericValue > this.max)) {
-        // both min and max values are set
-        inputError = InputError.MINMAX;
-      }
-      return inputError;
-    };
+    setValidity(newValue) {
+        const oldValidValue = this.valid;
+        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 === Handler.BLUR && this.valid !== oldValidValue))
+            this.inputValid.emit(this.valid);
+    }
     /**
-     * Format value based on type
-     * @param value - value to format
-     * @returns formated local value
+     * Checks if the given value is valid according to the defined rules.
+     * @param value - The input value to validate.
+     * @param regex - The regular expression for validation.
+     * @param integer - The integer part of the value.
+     * @param decimal - The decimal part of the value.
+     * @returns Returns true if the value is valid, otherwise false.
      */
-    this.formatValue = (value) => (this.type === 'currency' ? localeCurrency(value, this.locale, this.currency) : localeNumber(value, this.locale));
+    isValidValue(value, regex, integer, decimal) {
+        return (['', '-'].includes(value) || (regex.exec(value) !== null && integer.length <= this.integerLength && decimal.length <= (this.type === 'integer' ? 0 : this.decimalLength)));
+    }
     /**
-     * Validate append slot
+     * Handles invalid input values and returns a corrected value.
+     * @returns The corrected value.
      */
-    this.validateAppendSlot = () => {
-      const slotAppendInput = this.element.querySelector('[slot="append-input"]');
-      if (slotAppendInput !== null) {
-        this.classCollection.add(slotAppendInput.nodeName === 'MG-BUTTON' ? 'mg-c-input--is-input-group-append' : 'mg-c-input--is-append-input-slot-content');
-      }
-    };
-    this.value = undefined;
-    this.identifier = undefined;
-    this.name = this.identifier;
-    this.label = undefined;
-    this.labelOnTop = undefined;
-    this.labelHide = false;
-    this.placeholder = undefined;
-    this.required = false;
-    this.readonly = false;
-    this.disabled = false;
-    this.mgWidth = undefined;
-    this.tooltip = undefined;
-    this.helpText = undefined;
-    this.type = types[0];
-    this.currency = 'USD';
-    this.max = undefined;
-    this.min = undefined;
-    this.integerLength = 13;
-    this.decimalLength = 2;
-    this.valid = undefined;
-    this.invalid = undefined;
-    this.classCollection = new ClassList(['mg-c-input--numeric']);
-    this.errorMessage = undefined;
-    this.hasFocus = false;
-  }
-  validateValue(newValue) {
-    // has input value is always render as string we get a stringified value or a '' for nullish value, so we test string type
-    if (typeof newValue === 'string') {
-      // Split number and decimal
-      const [integer, decimal = ''] = newValue.replace('-', '').split(/[.,]/);
-      // Regex
-      const regex = this.type === 'integer' ? /^-?\d+$/ : /^-?\d+(?:[.,]\d*)?$/;
-      // Filter input
-      if (this.isValidValue(newValue, regex, integer, decimal)) {
-        this.storedValue = newValue;
-      }
-      else {
-        newValue = this.handleInvalidValue();
-      }
-      // Set value and input value
-      this.updateValues(newValue);
-    }
-  }
-  handleValidityChange(newValue, _oldValue, prop) {
-    if (this.input !== undefined) {
-      this.input[prop] = newValue;
-      this.checkValidity();
-      if (this.hasDisplayedError) {
-        this.setErrorMessage();
-        this.hasDisplayedError = false;
-      }
-    }
-  }
-  validateType(newValue) {
-    if (!types.includes(newValue)) {
-      throw new Error(`<mg-input-numeric> prop "type" must be one of: ${types.join(', ')}`);
-    }
-  }
-  validateIntegerLength(newValue) {
-    if (newValue < 1) {
-      throw new Error(`<mg-input-numeric> prop "integer-length" must be a positive number.`);
+    handleInvalidValue() {
+        var _a;
+        return (_a = this.storedValue) !== null && _a !== void 0 ? _a : null;
     }
-  }
-  validateDecimalLength(newValue) {
-    if (newValue < 1) {
-      throw new Error(`<mg-input-numeric> prop "decimal-length" must be a positive number, consider using prop "type" to "integer" instead.`);
+    /**
+     * Updates the component values based on the validated input value.
+     * @param newValue - The validated input value.
+     */
+    updateValues(newValue) {
+        this.value = newValue;
+        if (this.input !== undefined)
+            this.input.value = this.value;
+        this.numericValue = !['', null].includes(this.value) ? parseFloat(this.value.replace(',', '.')) : null;
+        this.valueChange.emit(this.numericValue);
+        this.readonlyValue = this.numericValue !== null ? this.formatValue(this.numericValue) : '';
     }
-  }
-  /**
-   * Display input error if it exists.
-   */
-  async displayError() {
-    this.checkValidity();
-    this.setErrorMessage();
-    this.hasDisplayedError = this.invalid;
-  }
-  /**
-   * Set an error and display a custom error message.
-   * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.
-   * It must be paired with an error message to display for the given context.
-   * 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
-   */
-  async setError(valid, errorMessage) {
-    if (typeof valid !== 'boolean') {
-      throw new Error('<mg-input-numeric> method "setError()" param "valid" must be a boolean');
+    /**
+     * Displayed value in input
+     * Change on focus/blur
+     * @returns display value
+     */
+    displayValue() {
+        return this.hasFocus ? this.value : this.readonlyValue;
     }
-    else if (!isValidString(errorMessage)) {
-      throw new Error('<mg-input-numeric> method "setError()" param "errorMessage" must be a string');
+    /*************
+     * Lifecycle *
+     *************/
+    /**
+     * Check if component props are well configured on init
+     * @returns timeout
+     */
+    componentWillLoad() {
+        // Get locales
+        const locales = initLocales(this.element);
+        this.locale = locales.locale;
+        this.messages = locales.messages;
+        // Validate component config
+        this.validateType(this.type);
+        this.validateIntegerLength(this.integerLength);
+        this.validateDecimalLength(this.decimalLength);
+        // validate value
+        this.validateValue(this.value);
+        this.validateAppendSlot();
+        // Check validity when component is ready
+        // return a promise to process action only in the FIRST render().
+        // https://stenciljs.com/docs/component-lifecycle#componentwillload
+        return setTimeout(() => {
+            this.checkValidity();
+        }, 0);
     }
-    else {
-      this.setValidity(valid);
-      this.setErrorMessage(valid ? undefined : errorMessage);
-      this.hasDisplayedError = this.invalid;
+    /**
+     * Render
+     * @returns HTML Element
+     */
+    render() {
+        return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: this.readonlyValue, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("input", { type: "text", class: "mg-c-input__box", value: this.displayValue(), id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
+                if (el !== null)
+                    this.input = el;
+            } }), h("slot", { name: "append-input" })));
     }
-  }
-  /**
-   * Method to set validity values
-   * @param newValue - valid new value
-   */
-  setValidity(newValue) {
-    this.valid = newValue;
-    this.invalid = !this.valid;
-    // We need to send valid event even if it is the same value
-    this.inputValid.emit(this.valid);
-  }
-  /**
-   * Checks if the given value is valid according to the defined rules.
-   * @param value - The input value to validate.
-   * @param regex - The regular expression for validation.
-   * @param integer - The integer part of the value.
-   * @param decimal - The decimal part of the value.
-   * @returns Returns true if the value is valid, otherwise false.
-   */
-  isValidValue(value, regex, integer, decimal) {
-    return (['', '-'].includes(value) || (regex.exec(value) !== null && integer.length <= this.integerLength && decimal.length <= (this.type === 'integer' ? 0 : this.decimalLength)));
-  }
-  /**
-   * Handles invalid input values and returns a corrected value.
-   * @returns The corrected value.
-   */
-  handleInvalidValue() {
-    var _a;
-    return (_a = this.storedValue) !== null && _a !== void 0 ? _a : null;
-  }
-  /**
-   * Updates the component values based on the validated input value.
-   * @param newValue - The validated input value.
-   */
-  updateValues(newValue) {
-    this.value = newValue;
-    if (this.input !== undefined)
-      this.input.value = this.value;
-    this.numericValue = !['', null].includes(this.value) ? parseFloat(this.value.replace(',', '.')) : null;
-    this.valueChange.emit(this.numericValue);
-    this.readonlyValue = this.numericValue !== null ? this.formatValue(this.numericValue) : '';
-  }
-  /**
-   * Displayed value in input
-   * Change on focus/blur
-   * @returns display value
-   */
-  displayValue() {
-    return this.hasFocus ? this.value : this.readonlyValue;
-  }
-  /*************
-   * Lifecycle *
-   *************/
-  /**
-   * Check if component props are well configured on init
-   * @returns timeout
-   */
-  componentWillLoad() {
-    // Get locales
-    const locales = initLocales(this.element);
-    this.locale = locales.locale;
-    this.messages = locales.messages;
-    // Validate component config
-    this.validateType(this.type);
-    this.validateIntegerLength(this.integerLength);
-    this.validateDecimalLength(this.decimalLength);
-    // validate value
-    this.validateValue(this.value);
-    this.validateAppendSlot();
-    // Check validity when component is ready
-    // return a promise to process action only in the FIRST render().
-    // https://stenciljs.com/docs/component-lifecycle#componentwillload
-    return setTimeout(() => {
-      this.checkValidity();
-    }, 0);
-  }
-  /**
-   * Render
-   * @returns HTML Element
-   */
-  render() {
-    return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: this.readonlyValue, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("input", { type: "text", class: "mg-c-input__box", value: this.displayValue(), id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
-        if (el !== null)
-          this.input = el;
-      } }), h("slot", { name: "append-input" })));
-  }
-  get element() { return this; }
-  static get watchers() { return {
-    "value": ["validateValue"],
-    "required": ["handleValidityChange"],
-    "readonly": ["handleValidityChange"],
-    "disabled": ["handleValidityChange"],
-    "type": ["validateType"],
-    "integerLength": ["validateIntegerLength"],
-    "decimalLength": ["validateDecimalLength"]
-  }; }
-  static get style() { return mgInputNumericCss; }
+    get element() { return this; }
+    static get watchers() { return {
+        "value": ["validateValue"],
+        "required": ["handleValidityChange"],
+        "readonly": ["handleValidityChange"],
+        "disabled": ["handleValidityChange"],
+        "type": ["validateType"],
+        "integerLength": ["validateIntegerLength"],
+        "decimalLength": ["validateDecimalLength"]
+    }; }
+    static get style() { return mgInputNumericCss; }
 }, [1, "mg-input-numeric", {
-    "value": [1537],
-    "identifier": [1],
-    "name": [1],
-    "label": [1],
-    "labelOnTop": [4, "label-on-top"],
-    "labelHide": [4, "label-hide"],
-    "placeholder": [1],
-    "required": [4],
-    "readonly": [4],
-    "disabled": [4],
-    "mgWidth": [8, "mg-width"],
-    "tooltip": [1],
-    "helpText": [1, "help-text"],
-    "type": [1],
-    "currency": [1],
-    "max": [2],
-    "min": [2],
-    "integerLength": [2, "integer-length"],
-    "decimalLength": [2, "decimal-length"],
-    "valid": [1028],
-    "invalid": [1028],
-    "classCollection": [32],
-    "errorMessage": [32],
-    "hasFocus": [32],
-    "displayError": [64],
-    "setError": [64]
-  }, undefined, {
-    "value": ["validateValue"],
-    "required": ["handleValidityChange"],
-    "readonly": ["handleValidityChange"],
-    "disabled": ["handleValidityChange"],
-    "type": ["validateType"],
-    "integerLength": ["validateIntegerLength"],
-    "decimalLength": ["validateDecimalLength"]
-  }]);
+        "value": [1537],
+        "identifier": [1],
+        "name": [1],
+        "label": [1],
+        "labelOnTop": [4, "label-on-top"],
+        "labelHide": [4, "label-hide"],
+        "placeholder": [1],
+        "required": [4],
+        "readonly": [4],
+        "disabled": [4],
+        "mgWidth": [8, "mg-width"],
+        "tooltip": [1],
+        "helpText": [1, "help-text"],
+        "type": [1],
+        "currency": [1],
+        "max": [2],
+        "min": [2],
+        "integerLength": [2, "integer-length"],
+        "decimalLength": [2, "decimal-length"],
+        "valid": [1028],
+        "invalid": [1028],
+        "classCollection": [32],
+        "errorMessage": [32],
+        "hasFocus": [32],
+        "displayError": [64],
+        "setError": [64]
+    }, undefined, {
+        "value": ["validateValue"],
+        "required": ["handleValidityChange"],
+        "readonly": ["handleValidityChange"],
+        "disabled": ["handleValidityChange"],
+        "type": ["validateType"],
+        "integerLength": ["validateIntegerLength"],
+        "decimalLength": ["validateDecimalLength"]
+    }]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["mg-input-numeric", "mg-icon", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
-  components.forEach(tagName => { switch (tagName) {
-    case "mg-input-numeric":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, MgInputNumeric$1);
-      }
-      break;
-    case "mg-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "mg-input-title":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "mg-tooltip":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "mg-tooltip-content":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["mg-input-numeric", "mg-icon", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
+    components.forEach(tagName => { switch (tagName) {
+        case "mg-input-numeric":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, MgInputNumeric$1);
+            }
+            break;
+        case "mg-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "mg-input-title":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "mg-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "mg-tooltip-content":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
 }
 defineCustomElement$1();