@mgdis/mg-components 5.19.2 → 5.20.0

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

@@ -1,783 +1,800 @@
 import { h } from "@stencil/core";
 import { MgInput } from "../MgInput";
+import { Handler } from "../MgInput.conf";
 import { ClassList, isValidString } from "../../../../utils/components.utils";
 import { initLocales } from "../../../../locales";
 const isDatalistOption = (options) => Array.isArray(options) && options.every(option => typeof option === 'string');
 export class MgInputText {
-  constructor() {
-    /************
-     * Internal *
-     ************/
-    // Classes
-    this.classFocus = 'mg-u-is-focused';
-    this.classIsInputGroupAppend = 'mg-c-input--is-input-group-append';
-    this.classHasIcon = 'mg-c-input--has-icon';
-    // hasDisplayedError (triggered by blur event)
-    this.hasDisplayedError = false;
-    /**
-     * Handle input event
-     */
-    this.handleInput = () => {
-      this.checkValidity();
-      if (this.hasDisplayedError) {
-        this.setErrorMessage();
-      }
-      this.value = this.input.value;
-    };
+    constructor() {
+        /************
+         * Internal *
+         ************/
+        // Classes
+        this.classFocus = 'mg-u-is-focused';
+        this.classIsInputGroupAppend = 'mg-c-input--is-input-group-append';
+        this.classHasIcon = 'mg-c-input--has-icon';
+        // hasDisplayedError (triggered by blur event)
+        this.hasDisplayedError = false;
+        /**
+         * Handle input event
+         */
+        this.handleInput = () => {
+            this.checkValidity();
+            if (this.hasDisplayedError) {
+                this.setErrorMessage();
+            }
+            this.value = this.input.value;
+        };
+        /**
+         * Handle focus event
+         */
+        this.handleFocus = () => {
+            this.classCollection.add(this.classFocus);
+            this.classCollection = new ClassList(this.classCollection.classes);
+        };
+        /**
+         * Handle blur event
+         */
+        this.handleBlur = () => {
+            // Manage focus
+            this.classCollection.delete(this.classFocus);
+            this.classCollection = new ClassList(this.classCollection.classes);
+            // Display Error
+            this.handlerInProgress = Handler.BLUR;
+            this.displayError().finally(() => {
+                // reset guard
+                this.handlerInProgress = undefined;
+            });
+        };
+        /**
+         * Check if input is valid
+         */
+        this.checkValidity = () => {
+            var _a;
+            this.setValidity(this.readonly || this.disabled || (((_a = this.input) === null || _a === void 0 ? void 0 : _a.checkValidity) !== undefined ? this.input.checkValidity() : true));
+        };
+        /**
+         * Set input error message
+         * @param errorMessage - errorMessage override
+         */
+        this.setErrorMessage = (errorMessage) => {
+            // Set error message
+            this.errorMessage = undefined;
+            // Does have a custom error message
+            if (!this.valid && errorMessage !== undefined) {
+                this.errorMessage = errorMessage;
+            }
+            // Does not match pattern
+            else if (!this.valid && this.input.validity.patternMismatch) {
+                this.errorMessage = this.patternErrorMessage;
+            }
+            // required
+            else if (!this.valid && this.input.validity.valueMissing) {
+                this.errorMessage = this.messages.errors.required;
+            }
+        };
+        /**
+         * Validate append slot
+         */
+        this.validateAppendSlot = () => {
+            const slotAppendInput = Array.from(this.element.querySelectorAll('[slot="append-input"]'));
+            if (slotAppendInput.length === 1) {
+                this.classCollection.add(slotAppendInput[0].nodeName === 'MG-BUTTON' ? this.classIsInputGroupAppend : 'mg-c-input--is-append-input-slot-content');
+            }
+            else if (slotAppendInput.filter(slot => slot.nodeName === 'MG-BUTTON').length > 1) {
+                this.classCollection.add(this.classIsInputGroupAppend);
+                this.classCollection.add('mg-c-input--has-buttons-group-append');
+            }
+        };
+        /**
+         * Methode to control datalist display condition
+         * @returns true if display condition success
+         */
+        this.hasDatalist = () => isDatalistOption(this.datalistoptions) && this.datalistoptions.length > 0;
+        this.value = undefined;
+        this.identifier = undefined;
+        this.name = this.identifier;
+        this.label = undefined;
+        this.type = 'text';
+        this.icon = undefined;
+        this.labelOnTop = undefined;
+        this.labelHide = false;
+        this.placeholder = undefined;
+        this.datalistoptions = undefined;
+        this.maxlength = 400;
+        this.required = false;
+        this.readonly = false;
+        this.disabled = false;
+        this.mgWidth = 'full';
+        this.pattern = undefined;
+        this.patternErrorMessage = undefined;
+        this.tooltip = undefined;
+        this.displayCharacterLeft = true;
+        this.helpText = undefined;
+        this.valid = undefined;
+        this.invalid = undefined;
+        this.classCollection = new ClassList(['mg-c-input--text']);
+        this.errorMessage = undefined;
+    }
+    handleValue(newValue) {
+        this.valueChange.emit(newValue);
+    }
+    validateIcon(newValue) {
+        if (newValue !== undefined) {
+            this.classCollection.add(this.classHasIcon);
+        }
+        else {
+            this.classCollection.delete(this.classHasIcon);
+        }
+    }
+    validateDatalistoptions(newValue) {
+        if (Boolean(newValue) && !isDatalistOption(newValue)) {
+            throw new Error('<mg-input-text> prop "datalistoptions" values must be the same type, string.');
+        }
+    }
+    handleValidityChange(newValue, _oldValue, prop) {
+        if (this.input !== undefined) {
+            this.input[prop] = newValue;
+            this.checkValidity();
+            if (this.hasDisplayedError) {
+                this.setErrorMessage();
+                this.hasDisplayedError = false;
+            }
+        }
+    }
+    validatePattern(newValue) {
+        if (newValue !== undefined && !(isValidString(this.pattern) && isValidString(this.patternErrorMessage))) {
+            throw new Error('<mg-input-text> props "pattern" and "patternErrorMessage" must be non-empty string and paired.');
+        }
+    }
     /**
-     * Handle focus event
+     * Public method to play input focus
      */
-    this.handleFocus = () => {
-      this.classCollection.add(this.classFocus);
-      this.classCollection = new ClassList(this.classCollection.classes);
-    };
+    async setFocus() {
+        this.input.focus();
+    }
     /**
-     * Handle blur event
+     * Display input error if it exists.
      */
-    this.handleBlur = () => {
-      // Manage focus
-      this.classCollection.delete(this.classFocus);
-      this.classCollection = new ClassList(this.classCollection.classes);
-      // Display Error
-      this.displayError();
-    };
+    async displayError() {
+        this.checkValidity();
+        this.setErrorMessage();
+        this.hasDisplayedError = this.invalid;
+    }
     /**
-     * Check if input is valid
+     * 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.checkValidity = () => {
-      var _a;
-      this.setValidity(this.readonly || this.disabled || (((_a = this.input) === null || _a === void 0 ? void 0 : _a.checkValidity) !== undefined ? this.input.checkValidity() : true));
-    };
+    async setError(valid, errorMessage) {
+        if (typeof valid !== 'boolean') {
+            throw new Error('<mg-input-text> method "setError()" param "valid" must be a boolean');
+        }
+        else if (!isValidString(errorMessage)) {
+            throw new Error('<mg-input-text> method "setError()" param "errorMessage" must be a string');
+        }
+        else {
+            this.setValidity(valid);
+            this.setErrorMessage(valid ? undefined : errorMessage);
+            this.hasDisplayedError = this.invalid;
+        }
+    }
     /**
-     * Set input error message
-     * @param errorMessage - errorMessage override
+     * Method to set validity values
+     * @param newValue - valid new value
      */
-    this.setErrorMessage = (errorMessage) => {
-      // Set error message
-      this.errorMessage = undefined;
-      // Does have a custom error message
-      if (!this.valid && errorMessage !== undefined) {
-        this.errorMessage = errorMessage;
-      }
-      // Does not match pattern
-      else if (!this.valid && this.input.validity.patternMismatch) {
-        this.errorMessage = this.patternErrorMessage;
-      }
-      // required
-      else if (!this.valid && this.input.validity.valueMissing) {
-        this.errorMessage = this.messages.errors.required;
-      }
-    };
+    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);
+    }
+    /*************
+     * Lifecycle *
+     *************/
     /**
-     * Validate append slot
+     * Check if component props are well configured on init
+     * @returns timeout
      */
-    this.validateAppendSlot = () => {
-      const slotAppendInput = Array.from(this.element.querySelectorAll('[slot="append-input"]'));
-      if (slotAppendInput.length === 1) {
-        this.classCollection.add(slotAppendInput[0].nodeName === 'MG-BUTTON' ? this.classIsInputGroupAppend : 'mg-c-input--is-append-input-slot-content');
-      }
-      else if (slotAppendInput.filter(slot => slot.nodeName === 'MG-BUTTON').length > 1) {
-        this.classCollection.add(this.classIsInputGroupAppend);
-        this.classCollection.add('mg-c-input--has-buttons-group-append');
-      }
-    };
+    componentWillLoad() {
+        // Get locales
+        this.messages = initLocales(this.element).messages;
+        this.characterLeftId = `${this.identifier}-character-left`;
+        this.datalistId = `${this.identifier}-datalist`;
+        // Validate
+        this.validateIcon(this.icon);
+        this.validateDatalistoptions(this.datalistoptions);
+        this.validatePattern(this.pattern);
+        this.validatePattern(this.patternErrorMessage);
+        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);
+    }
     /**
-     * Methode to control datalist display condition
-     * @returns true if display condition success
+     * Render
+     * @returns HTML Element
      */
-    this.hasDatalist = () => isDatalistOption(this.datalistoptions) && this.datalistoptions.length > 0;
-    this.value = undefined;
-    this.identifier = undefined;
-    this.name = this.identifier;
-    this.label = undefined;
-    this.type = 'text';
-    this.icon = undefined;
-    this.labelOnTop = undefined;
-    this.labelHide = false;
-    this.placeholder = undefined;
-    this.datalistoptions = undefined;
-    this.maxlength = 400;
-    this.required = false;
-    this.readonly = false;
-    this.disabled = false;
-    this.mgWidth = 'full';
-    this.pattern = undefined;
-    this.patternErrorMessage = undefined;
-    this.tooltip = undefined;
-    this.displayCharacterLeft = true;
-    this.helpText = undefined;
-    this.valid = undefined;
-    this.invalid = undefined;
-    this.classCollection = new ClassList(['mg-c-input--text']);
-    this.errorMessage = undefined;
-  }
-  handleValue(newValue) {
-    this.valueChange.emit(newValue);
-  }
-  validateIcon(newValue) {
-    if (newValue !== undefined) {
-      this.classCollection.add(this.classHasIcon);
-    }
-    else {
-      this.classCollection.delete(this.classHasIcon);
-    }
-  }
-  validateDatalistoptions(newValue) {
-    if (Boolean(newValue) && !isDatalistOption(newValue)) {
-      throw new Error('<mg-input-text> prop "datalistoptions" values must be the same type, string.');
+    render() {
+        return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [this.characterLeftId], 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: undefined, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("div", { class: "mg-c-input__with-character-left", style: {
+                '--mg-character-left-message-length': (this.displayCharacterLeft
+                    ? (this.maxlength - (this.value || '').length).toString().length + this.maxlength.toString().length + 1
+                    : 0).toString(),
+            } }, this.icon !== undefined && h("mg-icon", { icon: this.icon }), h("input", { type: this.type, class: "mg-c-input__box", value: this.value, id: this.identifier, list: this.hasDatalist() ? this.datalistId : undefined, autocomplete: this.hasDatalist() ? 'off' : undefined, name: this.name, placeholder: this.placeholder, title: this.placeholder, maxlength: this.maxlength, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), pattern: this.pattern, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
+                if (el !== null)
+                    this.input = el;
+            } }), this.hasDatalist() && (h("datalist", { id: this.datalistId }, this.datalistoptions.map(option => (h("option", { value: option, key: option }))))), this.displayCharacterLeft && this.maxlength > 0 && (h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength }))), h("slot", { name: "append-input" })));
     }
-  }
-  handleValidityChange(newValue, _oldValue, prop) {
-    if (this.input !== undefined) {
-      this.input[prop] = newValue;
-      this.checkValidity();
-      if (this.hasDisplayedError) {
-        this.setErrorMessage();
-        this.hasDisplayedError = false;
-      }
+    static get is() { return "mg-input-text"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../../../../../node_modules/@mgdis/styles/dist/components/mg-input-text.css"]
+        };
     }
-  }
-  validatePattern(newValue) {
-    if (newValue !== undefined && !(isValidString(this.pattern) && isValidString(this.patternErrorMessage))) {
-      throw new Error('<mg-input-text> props "pattern" and "patternErrorMessage" must be non-empty string and paired.');
+    static get styleUrls() {
+        return {
+            "$": ["../../../../../node_modules/@mgdis/styles/dist/components/mg-input-text.css"]
+        };
     }
-  }
-  /**
-   * Public method to play input focus
-   */
-  async setFocus() {
-    this.input.focus();
-  }
-  /**
-   * 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-text> method "setError()" param "valid" must be a boolean');
-    }
-    else if (!isValidString(errorMessage)) {
-      throw new Error('<mg-input-text> method "setError()" param "errorMessage" must be a string');
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Component value"
+                },
+                "attribute": "value",
+                "reflect": true
+            },
+            "identifier": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Identifier is used for the element ID (id is a reserved prop in Stencil.js)"
+                },
+                "attribute": "identifier",
+                "reflect": false
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input name\nIf not set the value equals the identifier"
+                },
+                "attribute": "name",
+                "reflect": false,
+                "defaultValue": "this.identifier"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input label"
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TextType",
+                    "resolved": "\"search\" | \"text\"",
+                    "references": {
+                        "TextType": {
+                            "location": "import",
+                            "path": "./mg-input-text.conf",
+                            "id": "src/components/molecules/inputs/mg-input-text/mg-input-text.conf.ts::TextType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input type"
+                },
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "'text'"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input icon"
+                },
+                "attribute": "icon",
+                "reflect": false
+            },
+            "labelOnTop": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if label is displayed on top"
+                },
+                "attribute": "label-on-top",
+                "reflect": false
+            },
+            "labelHide": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if label is visible"
+                },
+                "attribute": "label-hide",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input placeholder.\nIt should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text."
+                },
+                "attribute": "placeholder",
+                "reflect": false
+            },
+            "datalistoptions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define datalist options"
+                }
+            },
+            "maxlength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input max length"
+                },
+                "attribute": "maxlength",
+                "reflect": false,
+                "defaultValue": "400"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if input is required"
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if input is readonly"
+                },
+                "attribute": "readonly",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if input is disabled"
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "mgWidth": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "Width",
+                    "resolved": "\"full\" | 16 | 2 | 4",
+                    "references": {
+                        "Width": {
+                            "location": "import",
+                            "path": "../MgInput.conf",
+                            "id": "src/components/molecules/inputs/MgInput.conf.ts::Width"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define input width"
+                },
+                "attribute": "mg-width",
+                "reflect": false,
+                "defaultValue": "'full'"
+            },
+            "pattern": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define input pattern to validate"
+                },
+                "attribute": "pattern",
+                "reflect": false
+            },
+            "patternErrorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define input pattern error message"
+                },
+                "attribute": "pattern-error-message",
+                "reflect": false
+            },
+            "tooltip": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Add a tooltip message next to the input"
+                },
+                "attribute": "tooltip",
+                "reflect": false
+            },
+            "displayCharacterLeft": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if component should display character left"
+                },
+                "attribute": "display-character-left",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "helpText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Add a help text under the input, usually expected data format and example"
+                },
+                "attribute": "help-text",
+                "reflect": false
+            },
+            "valid": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define input valid state"
+                },
+                "attribute": "valid",
+                "reflect": false
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define input invalid state"
+                },
+                "attribute": "invalid",
+                "reflect": false
+            }
+        };
     }
-    else {
-      this.setValidity(valid);
-      this.setErrorMessage(valid ? undefined : errorMessage);
-      this.hasDisplayedError = this.invalid;
+    static get states() {
+        return {
+            "classCollection": {},
+            "errorMessage": {}
+        };
     }
-  }
-  /**
-   * 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);
-  }
-  /*************
-   * Lifecycle *
-   *************/
-  /**
-   * Check if component props are well configured on init
-   * @returns timeout
-   */
-  componentWillLoad() {
-    // Get locales
-    this.messages = initLocales(this.element).messages;
-    this.characterLeftId = `${this.identifier}-character-left`;
-    this.datalistId = `${this.identifier}-datalist`;
-    // Validate
-    this.validateIcon(this.icon);
-    this.validateDatalistoptions(this.datalistoptions);
-    this.validatePattern(this.pattern);
-    this.validatePattern(this.patternErrorMessage);
-    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: [this.characterLeftId], 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: undefined, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("div", { class: "mg-c-input__with-character-left", style: {
-        '--mg-character-left-message-length': (this.displayCharacterLeft
-          ? (this.maxlength - (this.value || '').length).toString().length + this.maxlength.toString().length + 1
-          : 0).toString(),
-      } }, this.icon !== undefined && h("mg-icon", { icon: this.icon }), h("input", { type: this.type, class: "mg-c-input__box", value: this.value, id: this.identifier, list: this.hasDatalist() ? this.datalistId : undefined, autocomplete: this.hasDatalist() ? 'off' : undefined, name: this.name, placeholder: this.placeholder, title: this.placeholder, maxlength: this.maxlength, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), pattern: this.pattern, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
-        if (el !== null)
-          this.input = el;
-      } }), this.hasDatalist() && (h("datalist", { id: this.datalistId }, this.datalistoptions.map(option => (h("option", { value: option, key: option }))))), this.displayCharacterLeft && this.maxlength > 0 && (h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength }))), h("slot", { name: "append-input" })));
-  }
-  static get is() { return "mg-input-text"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["../../../../../node_modules/@mgdis/styles/dist/components/mg-input-text.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["../../../../../node_modules/@mgdis/styles/dist/components/mg-input-text.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "value": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Component value"
-        },
-        "attribute": "value",
-        "reflect": true
-      },
-      "identifier": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": true,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Identifier is used for the element ID (id is a reserved prop in Stencil.js)"
-        },
-        "attribute": "identifier",
-        "reflect": false
-      },
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Input name\nIf not set the value equals the identifier"
-        },
-        "attribute": "name",
-        "reflect": false,
-        "defaultValue": "this.identifier"
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": true,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Input label"
-        },
-        "attribute": "label",
-        "reflect": false
-      },
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "TextType",
-          "resolved": "\"search\" | \"text\"",
-          "references": {
-            "TextType": {
-              "location": "import",
-              "path": "./mg-input-text.conf",
-              "id": "src/components/molecules/inputs/mg-input-text/mg-input-text.conf.ts::TextType"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Input type"
-        },
-        "attribute": "type",
-        "reflect": false,
-        "defaultValue": "'text'"
-      },
-      "icon": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Input icon"
-        },
-        "attribute": "icon",
-        "reflect": false
-      },
-      "labelOnTop": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define if label is displayed on top"
-        },
-        "attribute": "label-on-top",
-        "reflect": false
-      },
-      "labelHide": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define if label is visible"
-        },
-        "attribute": "label-hide",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "placeholder": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Input placeholder.\nIt should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text."
-        },
-        "attribute": "placeholder",
-        "reflect": false
-      },
-      "datalistoptions": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "string[]",
-          "resolved": "string[]",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define datalist options"
-        }
-      },
-      "maxlength": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Input max length"
-        },
-        "attribute": "maxlength",
-        "reflect": false,
-        "defaultValue": "400"
-      },
-      "required": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define if input is required"
-        },
-        "attribute": "required",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "readonly": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define if input is readonly"
-        },
-        "attribute": "readonly",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define if input is disabled"
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "mgWidth": {
-        "type": "any",
-        "mutable": false,
-        "complexType": {
-          "original": "Width",
-          "resolved": "\"full\" | 16 | 2 | 4",
-          "references": {
-            "Width": {
-              "location": "import",
-              "path": "../MgInput.conf",
-              "id": "src/components/molecules/inputs/MgInput.conf.ts::Width"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define input width"
-        },
-        "attribute": "mg-width",
-        "reflect": false,
-        "defaultValue": "'full'"
-      },
-      "pattern": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define input pattern to validate"
-        },
-        "attribute": "pattern",
-        "reflect": false
-      },
-      "patternErrorMessage": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define input pattern error message"
-        },
-        "attribute": "pattern-error-message",
-        "reflect": false
-      },
-      "tooltip": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Add a tooltip message next to the input"
-        },
-        "attribute": "tooltip",
-        "reflect": false
-      },
-      "displayCharacterLeft": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define if component should display character left"
-        },
-        "attribute": "display-character-left",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "helpText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Add a help text under the input, usually expected data format and example"
-        },
-        "attribute": "help-text",
-        "reflect": false
-      },
-      "valid": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define input valid state"
-        },
-        "attribute": "valid",
-        "reflect": false
-      },
-      "invalid": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define input invalid state"
-        },
-        "attribute": "invalid",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "classCollection": {},
-      "errorMessage": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "valueChange",
-        "name": "value-change",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emited event when value change"
-        },
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        }
-      }, {
-        "method": "inputValid",
-        "name": "input-valid",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emited event when checking validity"
-        },
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "setFocus": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Public method to play input focus",
-          "tags": []
-        }
-      },
-      "displayError": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Display input error if it exists.",
-          "tags": []
-        }
-      },
-      "setError": {
-        "complexType": {
-          "signature": "(valid: MgInputText['valid'], errorMessage: string) => Promise<void>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "valid - value indicating the validity"
-                }],
-              "text": "- value indicating the validity"
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "value-change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emited event when value change"
+                },
+                "complexType": {
+                    "original": "HTMLMgInputTextElement['value']",
+                    "resolved": "string",
+                    "references": {
+                        "HTMLMgInputTextElement": {
+                            "location": "global",
+                            "id": "global::HTMLMgInputTextElement"
+                        }
+                    }
+                }
             }, {
-              "tags": [{
-                  "name": "param",
-                  "text": "errorMessage - the error message to display"
-                }],
-              "text": "- the error message to display"
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+                "method": "inputValid",
+                "name": "input-valid",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emited event when checking validity"
+                },
+                "complexType": {
+                    "original": "HTMLMgInputTextElement['valid']",
+                    "resolved": "boolean",
+                    "references": {
+                        "HTMLMgInputTextElement": {
+                            "location": "global",
+                            "id": "global::HTMLMgInputTextElement"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Public method to play input focus",
+                    "tags": []
+                }
+            },
+            "displayError": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Display input error if it exists.",
+                    "tags": []
+                }
             },
-            "MgInputText": {
-              "location": "global",
-              "id": "global::MgInputText"
+            "setError": {
+                "complexType": {
+                    "signature": "(valid: MgInputText['valid'], errorMessage: string) => Promise<void>",
+                    "parameters": [{
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "valid - value indicating the validity"
+                                }],
+                            "text": "- value indicating the validity"
+                        }, {
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "errorMessage - the error message to display"
+                                }],
+                            "text": "- the error message to display"
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "MgInputText": {
+                            "location": "global",
+                            "id": "global::MgInputText"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "valid - value indicating the validity"
+                        }, {
+                            "name": "param",
+                            "text": "errorMessage - the error message to display"
+                        }]
+                }
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.",
-          "tags": [{
-              "name": "param",
-              "text": "valid - value indicating the validity"
+        };
+    }
+    static get elementRef() { return "element"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleValue"
             }, {
-              "name": "param",
-              "text": "errorMessage - the error message to display"
-            }]
-        }
-      }
-    };
-  }
-  static get elementRef() { return "element"; }
-  static get watchers() {
-    return [{
-        "propName": "value",
-        "methodName": "handleValue"
-      }, {
-        "propName": "icon",
-        "methodName": "validateIcon"
-      }, {
-        "propName": "datalistoptions",
-        "methodName": "validateDatalistoptions"
-      }, {
-        "propName": "required",
-        "methodName": "handleValidityChange"
-      }, {
-        "propName": "readonly",
-        "methodName": "handleValidityChange"
-      }, {
-        "propName": "disabled",
-        "methodName": "handleValidityChange"
-      }, {
-        "propName": "pattern",
-        "methodName": "validatePattern"
-      }, {
-        "propName": "patternErrorMessage",
-        "methodName": "validatePattern"
-      }];
-  }
+                "propName": "icon",
+                "methodName": "validateIcon"
+            }, {
+                "propName": "datalistoptions",
+                "methodName": "validateDatalistoptions"
+            }, {
+                "propName": "required",
+                "methodName": "handleValidityChange"
+            }, {
+                "propName": "readonly",
+                "methodName": "handleValidityChange"
+            }, {
+                "propName": "disabled",
+                "methodName": "handleValidityChange"
+            }, {
+                "propName": "pattern",
+                "methodName": "validatePattern"
+            }, {
+                "propName": "patternErrorMessage",
+                "methodName": "validatePattern"
+            }];
+    }
 }
 //# sourceMappingURL=mg-input-text.js.map