@mgdis/mg-components 6.7.0 → 6.9.0

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

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import { allItemsAreString, ClassList, isValidString, toString } from "@mgdis/stencil-helpers";
+import { helpTextTypes, textTypes } from "./mg-input-text.conf";
 import { widths, classReadonly, classDisabled } from "../mg-input/mg-input.conf";
 import { initLocales } from "../../../../locales";
 /**
@@ -36,13 +37,17 @@ export class MgInputText {
          */
         this.name = this.identifier;
         /**
-         * Input type
+         * Define if label is displayed on top
          */
-        this.type = 'text';
+        this.labelOnTop = false;
         /**
          * Define if label is visible
          */
         this.labelHide = false;
+        /**
+         * Input type
+         */
+        this.type = 'text';
         /**
          * Input max length
          */
@@ -75,6 +80,16 @@ export class MgInputText {
          * Component classes
          */
         this.classCollection = new ClassList(['mg-c-input--text']);
+        /**
+         * Validate pattern configuration
+         */
+        this.validatePattern = () => {
+            if ((this.pattern !== undefined || this.patternErrorMessage !== undefined) && // At least one is defined
+                (!isValidString(this.pattern) || (!helpTextTypes.includes(this.type) && !isValidString(this.patternErrorMessage))) // Both must be defined
+            ) {
+                throw new Error(`<mg-input-text> props "pattern" and "patternErrorMessage" must be non-empty string and paired. Passed value: "pattern='${this.pattern}'" and "patternErrorMessage='${this.patternErrorMessage}'".`);
+            }
+        };
         /**
          * Handle input event
          */
@@ -117,15 +132,20 @@ export class MgInputText {
          * @param errorMessage - errorMessage override
          */
         this.setErrorMessage = (errorMessage) => {
+            var _a;
             // Set error message
             this.errorMessage = undefined;
             // Does have a custom error message
             if (!this.valid && errorMessage !== undefined) {
                 this.errorMessage = errorMessage;
             }
+            // Does not match type (email, emails, tel, url, etc.)
+            else if (!this.valid && this.input.validity.typeMismatch) {
+                this.errorMessage = this.messages.input.text.errors.typeMismatch[this.type];
+            }
             // Does not match pattern
             else if (!this.valid && this.input.validity.patternMismatch) {
-                this.errorMessage = this.patternErrorMessage;
+                this.errorMessage = (_a = this.patternErrorMessage) !== null && _a !== void 0 ? _a : this.messages.input.text.errors.typeMismatch[this.type];
             }
             // required
             else if (!this.valid && this.input.validity.valueMissing) {
@@ -173,6 +193,11 @@ export class MgInputText {
             this.valueChange.emit(newValue);
         }
     }
+    validateType(newValue) {
+        if (!textTypes.includes(newValue)) {
+            throw new Error(`<mg-input-text> prop "type" must be one of the following values: ${textTypes.join(', ')}. Passed value: ${newValue}.`);
+        }
+    }
     validateIcon(newValue) {
         if (newValue !== undefined) {
             this.classCollection.add(this.classHasIcon);
@@ -217,9 +242,12 @@ export class MgInputText {
         if (newValue !== undefined)
             this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);
     }
-    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. Passed value: "pattern='${toString(this.pattern)}'" and "patternErrorMessage='${toString(this.patternErrorMessage)}'".`);
+    watchPattern() {
+        this.validatePattern();
+    }
+    watchHelpText(newValue) {
+        if (!isValidString(newValue) && helpTextTypes.includes(this.type)) {
+            this.helpText = this.messages.input.text.helpText[this.type];
         }
     }
     /**
@@ -306,12 +334,13 @@ export class MgInputText {
         // Validate
         this.validateIcon(this.icon);
         this.validateDatalistoptions(this.datalistoptions);
-        this.validatePattern(this.pattern);
-        this.validatePattern(this.patternErrorMessage);
+        this.watchPattern();
         this.validateAppendSlot();
         this.watchMgWidth(this.mgWidth);
         this.watchReadonly(this.readonly);
         this.watchDisabled(this.disabled);
+        this.validateType(this.type);
+        this.watchHelpText(this.helpText);
         // Check validity when component is ready
         // return a promise to process action only in the FIRST render().
         // https://stenciljs.com/docs/component-lifecycle#componentwillload
@@ -324,12 +353,12 @@ export class MgInputText {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '3677b48b65765727f36e9379af1282d5a8f3762c', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [this.characterLeftId], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly
+        return (h("mg-input", { key: 'ee11d031a4bb2be299f594fee631be8fd1ef33e5', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [this.characterLeftId], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly
             ? this.value && this.renderReadonly()
             : [
                 h("div", { key: "input", class: "mg-c-input__with-character-left", style: {
                         '--mg-c-character-left-message-length': (!this.characterLeftHide ? this.maxlength.toString().length * 2 + 1 : 0).toString(),
-                    } }, this.icon !== undefined && h("mg-icon", { icon: this.icon }), h("input", { type: this.type, class: "mg-c-input__box mg-c-input__box--width", 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) => {
+                    } }, this.icon !== undefined && h("mg-icon", { icon: this.icon }), h("input", { type: this.type === 'emails' ? 'email' : this.type, multiple: this.type === 'emails', class: "mg-c-input__box mg-c-input__box--width", 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: isOption(option) ? option.title : option, key: option }))))), !this.characterLeftHide && this.maxlength > 0 && (h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength }))),
@@ -427,12 +456,52 @@ export class MgInputText {
                 "attribute": "label",
                 "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"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label-on-top",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "labelHide": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if label is visible"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label-hide",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "type": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "TextType",
-                    "resolved": "\"search\" | \"text\"",
+                    "resolved": "\"email\" | \"emails\" | \"search\" | \"tel\" | \"text\" | \"url\"",
                     "references": {
                         "TextType": {
                             "location": "import",
@@ -478,45 +547,6 @@ export class MgInputText {
                 "attribute": "icon",
                 "reflect": false
             },
-            "labelOnTop": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Define if label is displayed on top"
-                },
-                "getter": false,
-                "setter": false,
-                "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"
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "label-hide",
-                "reflect": false,
-                "defaultValue": "false"
-            },
             "placeholder": {
                 "type": "string",
                 "mutable": false,
@@ -770,7 +800,7 @@ export class MgInputText {
             },
             "helpText": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -971,6 +1001,9 @@ export class MgInputText {
         return [{
                 "propName": "value",
                 "methodName": "handleValue"
+            }, {
+                "propName": "type",
+                "methodName": "validateType"
             }, {
                 "propName": "icon",
                 "methodName": "validateIcon"
@@ -997,10 +1030,13 @@ export class MgInputText {
                 "methodName": "watchMgWidth"
             }, {
                 "propName": "pattern",
-                "methodName": "validatePattern"
+                "methodName": "watchPattern"
             }, {
                 "propName": "patternErrorMessage",
-                "methodName": "validatePattern"
+                "methodName": "watchPattern"
+            }, {
+                "propName": "helpText",
+                "methodName": "watchHelpText"
             }];
     }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"mg-input-text.js","sourceRoot":"","sources":["../../../../../src/components/molecules/inputs/mg-input-text/mg-input-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAgB,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACvG,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAE/F,OAAO,EAAoD,MAAM,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACnI,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAGlD;;;;GAIG;AAEH,MAAM,QAAQ,GAAG,CAAC,MAAe,EAAwB,EAAE,CACzD,OAAO,MAAM,KAAK,QAAQ,IAAI,OAAQ,MAAqB,CAAC,KAAK,KAAK,QAAQ,IAAK,MAAqB,CAAC,KAAK,KAAK,SAAS,CAAC;AAE/H;;;;GAIG;AACH,MAAM,iBAAiB,GAAG,CAAC,OAAkB,EAAuB,EAAE,CAAC,iBAAiB,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;AAEzJ;;GAEG;AAMH,MAAM,OAAO,WAAW;IALxB;QAME;;sBAEc;QAEd,UAAU;QACO,eAAU,GAAG,iBAAiB,CAAC;QAC/B,4BAAuB,GAAG,mCAAmC,CAAC;QAC9D,iBAAY,GAAG,sBAAsB,CAAC;QACtC,+BAA0B,GAAG,sCAAsC,CAAC;QACpE,kCAA6B,GAAG,0CAA0C,CAAC;QAa5F,8CAA8C;QACtC,sBAAiB,GAAG,KAAK,CAAC;QA+BlC;;;WAGG;QACK,SAAI,GAAW,IAAI,CAAC,UAAU,CAAC;QAOvC;;WAEG;QACK,SAAI,GAAa,MAAM,CAAC;QAoBhC;;WAEG;QACK,cAAS,GAAG,KAAK,CAAC;QAmB1B;;WAEG;QACK,cAAS,GAAG,GAAG,CAAC;QAExB;;WAEG;QACK,aAAQ,GAAG,KAAK,CAAC;QAEzB;;WAEG;QACK,aAAQ,GAAG,KAAK,CAAC;QAOzB;;WAEG;QACK,aAAQ,GAAG,KAAK,CAAC;QAqBzB;;WAEG;QACK,YAAO,GAAU,MAAM,CAAC;QAqChC;;WAEG;QACK,oBAAe,GAAoB,OAAO,CAAC;QAEnD;;WAEG;QACK,sBAAiB,GAAG,KAAK,CAAC;QAiBlC;;WAEG;QACM,oBAAe,GAAc,IAAI,SAAS,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC;QA4F1E;;WAEG;QACK,gBAAW,GAAG,GAAS,EAAE;YAC/B,IAAI,CAAC,aAAa,EAAE,CAAC;YACrB,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;gBAC3B,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,CAAC;YACD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;QAChC,CAAC,CAAC;QAEF;;WAEG;QACK,gBAAW,GAAG,GAAS,EAAE;YAC/B,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YAC1C,IAAI,CAAC,eAAe,GAAG,IAAI,SAAS,CAAC,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;QACrE,CAAC,CAAC;QAEF;;WAEG;QACK,eAAU,GAAG,GAAS,EAAE;YAC9B,eAAe;YACf,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YAC7C,IAAI,CAAC,eAAe,GAAG,IAAI,SAAS,CAAC,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;YACnE,gBAAgB;YAChB,IAAI,CAAC,iBAAiB,GAAG,MAAM,CAAC;YAChC,IAAI,CAAC,YAAY,EAAE,CAAC,OAAO,CAAC,GAAG,EAAE;gBAC/B,cAAc;gBACd,IAAI,CAAC,iBAAiB,GAAG,SAAS,CAAC;YACrC,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QAEF;;WAEG;QACK,kBAAa,GAAG,GAAS,EAAE;YACjC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC,CAAC;QACjF,CAAC,CAAC;QAEF;;;WAGG;QACK,oBAAe,GAAG,CAAC,YAAqB,EAAQ,EAAE;YACxD,oBAAoB;YACpB,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;YAC9B,mCAAmC;YACnC,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,YAAY,KAAK,SAAS,EAAE,CAAC;gBAC9C,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;YACnC,CAAC;YACD,yBAAyB;iBACpB,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,eAAe,EAAE,CAAC;gBAC5D,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,mBAAmB,CAAC;YAC/C,CAAC;YACD,WAAW;iBACN,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC;gBACzD,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC;YACpD,CAAC;QACH,CAAC,CAAC;QAEF;;WAEG;QACK,uBAAkB,GAAG,GAAS,EAAE;YACtC,MAAM,eAAe,GAAsB,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC,CAAC;YAE9G,IAAI,eAAe,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;gBACjC,IAAI,eAAe,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,WAAW,EAAE,CAAC;oBAChD,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;gBACzD,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,6BAA6B,CAAC,CAAC;oBAC7D,IAAI,CAAC,WAAW,GAAG,eAAe,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC;gBACpD,CAAC;YACH,CAAC;iBAAM,IAAI,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,KAAK,WAAW,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBACpF,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;gBACvD,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;YAC5D,CAAC;QACH,CAAC,CAAC;QAEF;;;WAGG;QACK,gBAAW,GAAG,GAAY,EAAE,CAAC,iBAAiB,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC;QAgChH;;;WAGG;QACK,mBAAc,GAAG,GAAgB,EAAE;YACzC,OAAO,IAAI,CAAC,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,CACtC,YAAM,KAAK,EAAC,4BAA4B;gBACtC,aAAI,IAAI,CAAC,KAAK,CAAK;gBAClB,IAAI,CAAC,WAAW,CACZ,CACR,CAAC,CAAC,CAAC,CACF,SAAG,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,KAAK,CAAK,CACvD,CAAC;QACJ,CAAC,CAAC;KAsEH;IAzdC,WAAW,CAAC,QAAgB;;QAC1B,IAAI,MAAA,IAAI,CAAC,eAAe,0CAAE,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC1C,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,QAAQ,CAAC,0CAAE,KAAK,KAAI,QAAQ,CAAC,CAAC;QAC3G,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAClC,CAAC;IACH,CAAC;IA4BD,YAAY,CAAC,QAAgB;QAC3B,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;YAC3B,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC9C,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACjD,CAAC;IACH,CAAC;IAuBD,uBAAuB,CAAC,QAAwC;QAC9D,IAAI,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,EAAE,CAAC;YACtD,MAAM,IAAI,KAAK,CAAC,4GAA4G,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QACrJ,CAAC;IACH,CAAC;IAiBD,aAAa,CAAC,QAAiC;QAC7C,IAAI,QAAQ;YAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;;YACjD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;IAClD,CAAC;IASD,oBAAoB,CAAC,QAAiB,EAAE,SAAkB,EAAE,IAAY;QACtE,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;YAC7B,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC;YAC5B,IAAI,CAAC,aAAa,EAAE,CAAC;YACrB,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;gBAC3B,IAAI,CAAC,eAAe,EAAE,CAAC;gBACvB,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;YACjC,CAAC;QACH,CAAC;IACH,CAAC;IAGD,aAAa,CAAC,QAAiC;QAC7C,IAAI,QAAQ;YAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;;YACjD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;IAClD,CAAC;IAOD,YAAY,CAAC,QAAgC;QAC3C,oBAAoB;QACpB,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YACrB,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,qBAAqB,KAAK,EAAE,CAAC,CAAC;QAC5D,CAAC,CAAC,CAAC;QAEH,kBAAkB;QAClB,IAAI,QAAQ,KAAK,SAAS;YAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,qBAAqB,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;IAC5F,CAAC;IAcD,eAAe,CAAC,QAAgB;QAC9B,IAAI,QAAQ,KAAK,SAAS,IAAI,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,aAAa,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,EAAE,CAAC;YACxG,MAAM,IAAI,KAAK,CACb,0HAA0H,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,gCAAgC,QAAQ,CAAC,IAAI,CAAC,mBAAmB,CAAC,KAAK,CACxN,CAAC;QACJ,CAAC;IACH,CAAC;IAoDD;;OAEG;IAEH,KAAK,CAAC,QAAQ;QACZ,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;IACrB,CAAC;IAED;;OAEG;IAEH,YAAY;QACV,gDAAgD;QAChD,yCAAyC;QACzC,2CAA2C;QAC3C,mCAAmC;QACnC,iDAAiD;QACjD,kEAAkE;QAClE,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE;YAC3B,qBAAqB,CAAC,GAAG,EAAE;gBACzB,IAAI,CAAC,aAAa,EAAE,CAAC;gBACrB,IAAI,CAAC,eAAe,EAAE,CAAC;gBACvB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,OAAO,CAAC;gBACtC,OAAO,EAAE,CAAC;YACZ,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;;;;;;OAOG;IAEH,KAAK,CAAC,QAAQ,CAAC,KAA2B,EAAE,YAAoB;QAC9D,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE,CAAC;YAC/B,MAAM,IAAI,KAAK,CAAC,sEAAsE,CAAC,CAAC;QAC1F,CAAC;aAAM,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,EAAE,CAAC;YACxC,MAAM,IAAI,KAAK,CAAC,4EAA4E,CAAC,CAAC;QAChG,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;YACxB,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC;YACvD,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,OAAO,CAAC;QACxC,CAAC;IACH,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,KAAK;QACT,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;YAChB,IAAI,CAAC,aAAa,EAAE,CAAC;YACrB,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;YAC9B,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;QACjC,CAAC;IACH,CAAC;IAED;;;OAGG;IACK,WAAW,CAAC,QAA8B;QAChD,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;QACjC,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;QACtB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC;QAC3B,2DAA2D;QAC3D,IAAI,IAAI,CAAC,iBAAiB,KAAK,SAAS,IAAI,CAAC,IAAI,CAAC,iBAAiB,KAAK,MAAM,IAAI,IAAI,CAAC,KAAK,KAAK,aAAa,CAAC;YAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACpJ,CAAC;IAyFD;;mBAEe;IAEf;;;OAGG;IACH,iBAAiB;QACf,cAAc;QACd,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;QACnD,IAAI,CAAC,eAAe,GAAG,GAAG,IAAI,CAAC,UAAU,iBAAiB,CAAC;QAC3D,IAAI,CAAC,UAAU,GAAG,GAAG,IAAI,CAAC,UAAU,WAAW,CAAC;QAChD,WAAW;QACX,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC7B,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QACnD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACnC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;QAC/C,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAChC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAClC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAClC,yCAAyC;QACzC,iEAAiE;QACjE,mEAAmE;QACnE,OAAO,UAAU,CAAC,GAAG,EAAE;YACrB,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC,EAAE,CAAC,CAAC,CAAC;IACR,CAAC;IAiBD;;;OAGG;IACH,MAAM;QACJ,OAAO,CACL,iEACE,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,EAClC,kBAAkB,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,EAC1C,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,eAAe,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,EAC3F,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,YAAY,EAAE,IAAI,CAAC,YAAY,IAE9B,IAAI,CAAC,QAAQ;YACZ,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,cAAc,EAAE;YACrC,CAAC,CAAC;gBACE,WACE,GAAG,EAAC,OAAO,EACX,KAAK,EAAC,iCAAiC,EACvC,KAAK,EAAE;wBACL,sCAAsC,EAAE,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE;qBAC5H;oBAEA,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,eAAS,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY;oBAChE,aACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAC,wCAAwC,EAC9C,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EACtD,YAAY,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,EACpD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,IAAI,CAAC,WAAW,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,kBACT,CAAC,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,CAAC,QAAQ,EAAE,EAChD,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,GAAG,EAAE,CAAC,EAAoB,EAAE,EAAE;4BAC5B,IAAI,EAAE,KAAK,IAAI;gCAAE,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;wBACnC,CAAC,GACD;oBACD,IAAI,CAAC,WAAW,EAAE,IAAI,CACrB,gBAAU,EAAE,EAAE,IAAI,CAAC,UAAU,IAC1B,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAClC,cAAQ,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,EAAE,GAAG,EAAE,MAAM,GAAW,CAChF,CAAC,CACO,CACZ;oBACA,CAAC,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAChD,yBAAmB,UAAU,EAAE,IAAI,CAAC,eAAe,EAAE,UAAU,EAAE,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,GAAsB,CAC7H,CACG;gBACN,YAAM,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,cAAc,GAAQ;aAC7C,CACI,CACZ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, h, Prop, EventEmitter, State, Element, Method, Watch } from '@stencil/core';\nimport { allItemsAreString, ClassList, isValidString, toString } from '@mgdis/stencil-helpers';\nimport { OptionType, TextType } from './mg-input-text.conf';\nimport { type TooltipPosition, type Width, type EventType, widths, classReadonly, classDisabled } from '../mg-input/mg-input.conf';\nimport { initLocales } from '../../../../locales';\nimport { IconType } from '../../../../components';\n\n/**\n * Check if object is an option\n * @param option - object to validate\n * @returns true id object is an option\n */\n\nconst isOption = (option: unknown): option is OptionType =>\n  typeof option === 'object' && typeof (option as OptionType).title === 'string' && (option as OptionType).value !== undefined;\n\n/**\n * Check if datalist options are well structured.\n * @param options - Datalist options to check.\n * @returns True if datalist is well structured.\n */\nconst isDatalistOptions = (options: unknown[]): options is string[] => allItemsAreString(options) || (Array.isArray(options) && options.every(isOption));\n\n/**\n * @slot append-input - Content to display next to the input\n */\n@Component({\n  tag: 'mg-input-text',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-text.css',\n  shadow: true,\n})\nexport class MgInputText {\n  /************\n   * Internal *\n   ************/\n\n  // Classes\n  private readonly classFocus = 'mg-u-is-focused';\n  private readonly classIsInputGroupAppend = 'mg-c-input--is-input-group-append';\n  private readonly classHasIcon = 'mg-c-input--has-icon';\n  private readonly classHasButtonsGroupAppend = 'mg-c-input--has-buttons-group-append';\n  private readonly classIsAppendInputSlotContent = 'mg-c-input--is-append-input-slot-content';\n\n  // IDs\n  private characterLeftId: string;\n  private datalistId: string;\n  private slotContent: string;\n\n  // HTML selector\n  private input: HTMLInputElement;\n\n  // Locales\n  private messages;\n\n  // hasDisplayedError (triggered by blur event)\n  private hasDisplayedError = false;\n\n  private handlerInProgress: EventType;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgInputTextElement;\n\n  /**\n   * Component value\n   */\n  @Prop({ mutable: true, reflect: true }) value: any; // eslint-disable-line @typescript-eslint/no-explicit-any\n  @Watch('value')\n  handleValue(newValue: string): void {\n    if (this.datalistoptions?.every(isOption)) {\n      this.valueChange.emit(this.datalistoptions.find(option => option.title === newValue)?.value || newValue);\n    } else {\n      this.valueChange.emit(newValue);\n    }\n  }\n\n  /**\n   * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n   */\n  @Prop() identifier!: string;\n\n  /**\n   * Input name\n   * If not set the value equals the identifier\n   */\n  @Prop() name: string = this.identifier;\n\n  /**\n   * Input label\n   */\n  @Prop() label!: string;\n\n  /**\n   * Input type\n   */\n  @Prop() type: TextType = 'text';\n\n  /**\n   * Input icon\n   */\n  @Prop() icon?: IconType;\n  @Watch('icon')\n  validateIcon(newValue: string): void {\n    if (newValue !== undefined) {\n      this.classCollection.add(this.classHasIcon);\n    } else {\n      this.classCollection.delete(this.classHasIcon);\n    }\n  }\n\n  /**\n   * Define if label is displayed on top\n   */\n  @Prop() labelOnTop?: boolean;\n\n  /**\n   * Define if label is visible\n   */\n  @Prop() labelHide = false;\n\n  /**\n   * Input placeholder.\n   * It should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * Define datalist options\n   */\n  @Prop() datalistoptions: string[] | OptionType[];\n  @Watch('datalistoptions')\n  validateDatalistoptions(newValue: MgInputText['datalistoptions']) {\n    if (Boolean(newValue) && !isDatalistOptions(newValue)) {\n      throw new Error(`<mg-input-text> prop \"datalistoptions\" values must be the same type, string or OptionType. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Input max length\n   */\n  @Prop() maxlength = 400;\n\n  /**\n   * Define if input is required\n   */\n  @Prop() required = false;\n\n  /**\n   * Define if input is readonly\n   */\n  @Prop() readonly = false;\n  @Watch('readonly')\n  watchReadonly(newValue: MgInputText['readonly']): void {\n    if (newValue) this.classCollection.add(classReadonly);\n    else this.classCollection.delete(classReadonly);\n  }\n\n  /**\n   * Define if input is disabled\n   */\n  @Prop() disabled = false;\n  @Watch('required')\n  @Watch('readonly')\n  @Watch('disabled')\n  handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void {\n    if (this.input !== undefined) {\n      this.input[prop] = newValue;\n      this.checkValidity();\n      if (this.hasDisplayedError) {\n        this.setErrorMessage();\n        this.hasDisplayedError = false;\n      }\n    }\n  }\n\n  @Watch('disabled')\n  watchDisabled(newValue: MgInputText['disabled']): void {\n    if (newValue) this.classCollection.add(classDisabled);\n    else this.classCollection.delete(classDisabled);\n  }\n\n  /**\n   * Define input width\n   */\n  @Prop() mgWidth: Width = 'full';\n  @Watch('mgWidth')\n  watchMgWidth(newValue: MgInputText['mgWidth']): void {\n    // reset width class\n    widths.forEach(width => {\n      this.classCollection.delete(`mg-c-input--width-${width}`);\n    });\n\n    // apply new width\n    if (newValue !== undefined) this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);\n  }\n\n  /**\n   * Define input pattern to validate\n   * Please refer to the Pattern section in the input documentation for detailed information on using regular expressions in components.\n   */\n  @Prop() pattern?: string;\n\n  /**\n   * Define input pattern error message\n   */\n  @Prop() patternErrorMessage?: string;\n  @Watch('pattern')\n  @Watch('patternErrorMessage')\n  validatePattern(newValue: string): void {\n    if (newValue !== undefined && !(isValidString(this.pattern) && isValidString(this.patternErrorMessage))) {\n      throw new Error(\n        `<mg-input-text> props \"pattern\" and \"patternErrorMessage\" must be non-empty string and paired. Passed value: \"pattern='${toString(this.pattern)}'\" and \"patternErrorMessage='${toString(this.patternErrorMessage)}'\".`,\n      );\n    }\n  }\n\n  /**\n   * Add a tooltip message next to the input\n   */\n  @Prop() tooltip?: string;\n\n  /**\n   * Define tooltip position\n   */\n  @Prop() tooltipPosition: TooltipPosition = 'input';\n\n  /**\n   * Define if component should display character left\n   */\n  @Prop() characterLeftHide = false;\n\n  /**\n   * Add a help text under the input, usually expected data format and example\n   */\n  @Prop() helpText?: string;\n\n  /**\n   * Define input valid state\n   */\n  @Prop({ mutable: true }) valid: boolean;\n\n  /**\n   * Define input invalid state\n   */\n  @Prop({ mutable: true }) invalid: boolean;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-input--text']);\n\n  /**\n   * Error message to display\n   */\n  @State() errorMessage: string;\n\n  /**\n   * Emited event when value change\n   */\n  @Event({ eventName: 'value-change' }) valueChange: EventEmitter<HTMLMgInputTextElement['value']>;\n\n  /**\n   * Emited event when checking validity\n   */\n  @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<HTMLMgInputTextElement['valid']>;\n\n  /**\n   * Public method to play input focus\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.input.focus();\n  }\n\n  /**\n   * Display input error if it exists.\n   */\n  @Method()\n  displayError(): Promise<void> {\n    // Use `Promise` as requested for stencil method\n    // Use `requestAnimationFrame` to ensure:\n    // - DOM is fully updated before validation\n    // - Async operations are completed\n    // - No timing issues with Stencil's render cycle\n    // - Keep everything in sync both inside and outside the component\n    return new Promise(resolve => {\n      requestAnimationFrame(() => {\n        this.checkValidity();\n        this.setErrorMessage();\n        this.hasDisplayedError = this.invalid;\n        resolve();\n      });\n    });\n  }\n\n  /**\n   * Set an error and display a custom error message.\n   * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\n   * It must be paired with an error message to display for the given context.\n   * When used to set validity to `false`, you should use this method again to reset the validity to `true`.\n   * @param valid - value indicating the validity\n   * @param errorMessage - the error message to display\n   */\n  @Method()\n  async setError(valid: MgInputText['valid'], errorMessage: string): Promise<void> {\n    if (typeof valid !== 'boolean') {\n      throw new Error('<mg-input-text> method \"setError()\" param \"valid\" must be a boolean.');\n    } else if (!isValidString(errorMessage)) {\n      throw new Error('<mg-input-text> method \"setError()\" param \"errorMessage\" must be a string.');\n    } else {\n      this.setValidity(valid);\n      this.setErrorMessage(valid ? undefined : errorMessage);\n      this.hasDisplayedError = this.invalid;\n    }\n  }\n\n  /**\n   * Reset value, validity and error state\n   */\n  @Method()\n  async reset(): Promise<void> {\n    if (!this.readonly) {\n      this.value = '';\n      this.checkValidity();\n      this.errorMessage = undefined;\n      this.hasDisplayedError = false;\n    }\n  }\n\n  /**\n   * Method to set validity values\n   * @param newValue - valid new value\n   */\n  private setValidity(newValue: MgInputText['valid']) {\n    const oldValidValue = this.valid;\n    this.valid = newValue;\n    this.invalid = !this.valid;\n    // We need to send valid event even if it is the same value\n    if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValidValue)) this.inputValid.emit(this.valid);\n  }\n\n  /**\n   * Handle input event\n   */\n  private handleInput = (): void => {\n    this.checkValidity();\n    if (this.hasDisplayedError) {\n      this.setErrorMessage();\n    }\n    this.value = this.input.value;\n  };\n\n  /**\n   * Handle focus event\n   */\n  private handleFocus = (): void => {\n    this.classCollection.add(this.classFocus);\n    this.classCollection = new ClassList(this.classCollection.classes);\n  };\n\n  /**\n   * Handle blur event\n   */\n  private handleBlur = (): void => {\n    // Manage focus\n    this.classCollection.delete(this.classFocus);\n    this.classCollection = new ClassList(this.classCollection.classes);\n    // Display Error\n    this.handlerInProgress = 'blur';\n    this.displayError().finally(() => {\n      // reset guard\n      this.handlerInProgress = undefined;\n    });\n  };\n\n  /**\n   * Check if input is valid\n   */\n  private checkValidity = (): void => {\n    this.setValidity(this.readonly || this.disabled || this.input.checkValidity());\n  };\n\n  /**\n   * Set input error message\n   * @param errorMessage - errorMessage override\n   */\n  private setErrorMessage = (errorMessage?: string): void => {\n    // Set error message\n    this.errorMessage = undefined;\n    // Does have a custom error message\n    if (!this.valid && errorMessage !== undefined) {\n      this.errorMessage = errorMessage;\n    }\n    // Does not match pattern\n    else if (!this.valid && this.input.validity.patternMismatch) {\n      this.errorMessage = this.patternErrorMessage;\n    }\n    // required\n    else if (!this.valid && this.input.validity.valueMissing) {\n      this.errorMessage = this.messages.errors.required;\n    }\n  };\n\n  /**\n   * Validate append slot\n   */\n  private validateAppendSlot = (): void => {\n    const slotAppendInput: HTMLSlotElement[] = Array.from(this.element.querySelectorAll('[slot=\"append-input\"]'));\n\n    if (slotAppendInput.length === 1) {\n      if (slotAppendInput[0].nodeName === 'MG-BUTTON') {\n        this.classCollection.add(this.classIsInputGroupAppend);\n      } else {\n        this.classCollection.add(this.classIsAppendInputSlotContent);\n        this.slotContent = slotAppendInput[0].textContent;\n      }\n    } else if (slotAppendInput.filter(slot => slot.nodeName === 'MG-BUTTON').length > 1) {\n      this.classCollection.add(this.classIsInputGroupAppend);\n      this.classCollection.add(this.classHasButtonsGroupAppend);\n    }\n  };\n\n  /**\n   * Method to control datalist display condition\n   * @returns true if display condition success\n   */\n  private hasDatalist = (): boolean => isDatalistOptions(this.datalistoptions) && this.datalistoptions.length > 0;\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   * @returns timeout\n   */\n  componentWillLoad(): ReturnType<typeof setTimeout> {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n    this.characterLeftId = `${this.identifier}-character-left`;\n    this.datalistId = `${this.identifier}-datalist`;\n    // Validate\n    this.validateIcon(this.icon);\n    this.validateDatalistoptions(this.datalistoptions);\n    this.validatePattern(this.pattern);\n    this.validatePattern(this.patternErrorMessage);\n    this.validateAppendSlot();\n    this.watchMgWidth(this.mgWidth);\n    this.watchReadonly(this.readonly);\n    this.watchDisabled(this.disabled);\n    // Check validity when component is ready\n    // return a promise to process action only in the FIRST render().\n    // https://stenciljs.com/docs/component-lifecycle#componentwillload\n    return setTimeout(() => {\n      this.checkValidity();\n    }, 0);\n  }\n\n  /**\n   * Renders the readonly content of the input component.\n   * @returns The readonly content element.\n   */\n  private renderReadonly = (): HTMLElement => {\n    return this.slotContent !== undefined ? (\n      <span class=\"mg-c-input__readonly-value\">\n        <b>{this.value}</b>\n        {this.slotContent}\n      </span>\n    ) : (\n      <b class=\"mg-c-input__readonly-value\">{this.value}</b>\n    );\n  };\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <mg-input\n        label={this.label}\n        identifier={this.identifier}\n        class={this.classCollection.join()}\n        ariaDescribedbyIDs={[this.characterLeftId]}\n        labelOnTop={this.labelOnTop}\n        labelHide={this.labelHide}\n        required={this.required}\n        tooltip={this.tooltip}\n        tooltipPosition={this.readonly && this.value === undefined ? 'label' : this.tooltipPosition}\n        helpText={this.helpText}\n        errorMessage={this.errorMessage}\n      >\n        {this.readonly\n          ? this.value && this.renderReadonly()\n          : [\n              <div\n                key=\"input\"\n                class=\"mg-c-input__with-character-left\"\n                style={{\n                  '--mg-c-character-left-message-length': (!this.characterLeftHide ? this.maxlength.toString().length * 2 + 1 : 0).toString(),\n                }}\n              >\n                {this.icon !== undefined && <mg-icon icon={this.icon}></mg-icon>}\n                <input\n                  type={this.type}\n                  class=\"mg-c-input__box mg-c-input__box--width\"\n                  value={this.value}\n                  id={this.identifier}\n                  list={this.hasDatalist() ? this.datalistId : undefined}\n                  autocomplete={this.hasDatalist() ? 'off' : undefined}\n                  name={this.name}\n                  placeholder={this.placeholder}\n                  title={this.placeholder}\n                  maxlength={this.maxlength}\n                  disabled={this.disabled}\n                  required={this.required}\n                  aria-invalid={(this.invalid === true).toString()}\n                  pattern={this.pattern}\n                  onInput={this.handleInput}\n                  onFocus={this.handleFocus}\n                  onBlur={this.handleBlur}\n                  ref={(el: HTMLInputElement) => {\n                    if (el !== null) this.input = el;\n                  }}\n                />\n                {this.hasDatalist() && (\n                  <datalist id={this.datalistId}>\n                    {this.datalistoptions.map(option => (\n                      <option value={isOption(option) ? option.title : option} key={option}></option>\n                    ))}\n                  </datalist>\n                )}\n                {!this.characterLeftHide && this.maxlength > 0 && (\n                  <mg-character-left identifier={this.characterLeftId} characters={this.value} maxlength={this.maxlength}></mg-character-left>\n                )}\n              </div>,\n              <slot key=\"slot\" name=\"append-input\"></slot>,\n            ]}\n      </mg-input>\n    );\n  }\n}\n"]}
+{"version":3,"file":"mg-input-text.js","sourceRoot":"","sources":["../../../../../src/components/molecules/inputs/mg-input-text/mg-input-text.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, h, Prop, EventEmitter, State, Element, Method, Watch } from '@stencil/core';\nimport { allItemsAreString, ClassList, isValidString, toString } from '@mgdis/stencil-helpers';\nimport { helpTextTypes, type OptionType, type TextType, textTypes } from './mg-input-text.conf';\nimport { type TooltipPosition, type Width, type EventType, widths, classReadonly, classDisabled } from '../mg-input/mg-input.conf';\nimport { initLocales } from '../../../../locales';\nimport { IconType } from '../../../../components';\n\n/**\n * Check if object is an option\n * @param option - object to validate\n * @returns true id object is an option\n */\n\nconst isOption = (option: unknown): option is OptionType =>\n  typeof option === 'object' && typeof (option as OptionType).title === 'string' && (option as OptionType).value !== undefined;\n\n/**\n * Check if datalist options are well structured.\n * @param options - Datalist options to check.\n * @returns True if datalist is well structured.\n */\nconst isDatalistOptions = (options: unknown[]): options is string[] => allItemsAreString(options) || (Array.isArray(options) && options.every(isOption));\n\n/**\n * @slot append-input - Content to display next to the input\n */\n@Component({\n  tag: 'mg-input-text',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-text.css',\n  shadow: true,\n})\nexport class MgInputText {\n  /************\n   * Internal *\n   ************/\n\n  // Classes\n  private readonly classFocus = 'mg-u-is-focused';\n  private readonly classIsInputGroupAppend = 'mg-c-input--is-input-group-append';\n  private readonly classHasIcon = 'mg-c-input--has-icon';\n  private readonly classHasButtonsGroupAppend = 'mg-c-input--has-buttons-group-append';\n  private readonly classIsAppendInputSlotContent = 'mg-c-input--is-append-input-slot-content';\n\n  // IDs\n  private characterLeftId: string;\n  private datalistId: string;\n  private slotContent: string;\n\n  // HTML selector\n  private input: HTMLInputElement;\n\n  // Locales\n  private messages;\n\n  // hasDisplayedError (triggered by blur event)\n  private hasDisplayedError = false;\n\n  private handlerInProgress: EventType;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgInputTextElement;\n\n  /**\n   * Component value\n   */\n  @Prop({ mutable: true, reflect: true }) value: any; // eslint-disable-line @typescript-eslint/no-explicit-any\n  @Watch('value')\n  handleValue(newValue: string): void {\n    if (this.datalistoptions?.every(isOption)) {\n      this.valueChange.emit(this.datalistoptions.find(option => option.title === newValue)?.value || newValue);\n    } else {\n      this.valueChange.emit(newValue);\n    }\n  }\n\n  /**\n   * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n   */\n  @Prop() identifier!: string;\n\n  /**\n   * Input name\n   * If not set the value equals the identifier\n   */\n  @Prop() name: string = this.identifier;\n\n  /**\n   * Input label\n   */\n  @Prop() label!: string;\n\n  /**\n   * Define if label is displayed on top\n   */\n  @Prop() labelOnTop = false;\n\n  /**\n   * Define if label is visible\n   */\n  @Prop() labelHide = false;\n\n  /**\n   * Input type\n   */\n  @Prop() type: TextType = 'text';\n  @Watch('type')\n  validateType(newValue: TextType): void {\n    if (!textTypes.includes(newValue)) {\n      throw new Error(`<mg-input-text> prop \"type\" must be one of the following values: ${textTypes.join(', ')}. Passed value: ${newValue}.`);\n    }\n  }\n\n  /**\n   * Input icon\n   */\n  @Prop() icon?: IconType;\n  @Watch('icon')\n  validateIcon(newValue: string): void {\n    if (newValue !== undefined) {\n      this.classCollection.add(this.classHasIcon);\n    } else {\n      this.classCollection.delete(this.classHasIcon);\n    }\n  }\n\n  /**\n   * Input placeholder.\n   * It should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * Define datalist options\n   */\n  @Prop() datalistoptions: string[] | OptionType[];\n  @Watch('datalistoptions')\n  validateDatalistoptions(newValue: MgInputText['datalistoptions']) {\n    if (Boolean(newValue) && !isDatalistOptions(newValue)) {\n      throw new Error(`<mg-input-text> prop \"datalistoptions\" values must be the same type, string or OptionType. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Input max length\n   */\n  @Prop() maxlength = 400;\n\n  /**\n   * Define if input is required\n   */\n  @Prop() required = false;\n\n  /**\n   * Define if input is readonly\n   */\n  @Prop() readonly = false;\n  @Watch('readonly')\n  watchReadonly(newValue: MgInputText['readonly']): void {\n    if (newValue) this.classCollection.add(classReadonly);\n    else this.classCollection.delete(classReadonly);\n  }\n\n  /**\n   * Define if input is disabled\n   */\n  @Prop() disabled = false;\n  @Watch('required')\n  @Watch('readonly')\n  @Watch('disabled')\n  handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void {\n    if (this.input !== undefined) {\n      this.input[prop] = newValue;\n      this.checkValidity();\n      if (this.hasDisplayedError) {\n        this.setErrorMessage();\n        this.hasDisplayedError = false;\n      }\n    }\n  }\n\n  @Watch('disabled')\n  watchDisabled(newValue: MgInputText['disabled']): void {\n    if (newValue) this.classCollection.add(classDisabled);\n    else this.classCollection.delete(classDisabled);\n  }\n\n  /**\n   * Define input width\n   */\n  @Prop() mgWidth: Width = 'full';\n  @Watch('mgWidth')\n  watchMgWidth(newValue: MgInputText['mgWidth']): void {\n    // reset width class\n    widths.forEach(width => {\n      this.classCollection.delete(`mg-c-input--width-${width}`);\n    });\n    // apply new width\n    if (newValue !== undefined) this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);\n  }\n\n  /**\n   * Define input pattern to validate\n   * Please refer to the Pattern section in the input documentation for detailed information on using regular expressions in components.\n   */\n  @Prop() pattern?: string;\n\n  /**\n   * Define input pattern error message\n   */\n  @Prop() patternErrorMessage?: string;\n  @Watch('pattern')\n  @Watch('patternErrorMessage')\n  watchPattern(): void {\n    this.validatePattern();\n  }\n\n  /**\n   * Add a tooltip message next to the input\n   */\n  @Prop() tooltip?: string;\n\n  /**\n   * Define tooltip position\n   */\n  @Prop() tooltipPosition: TooltipPosition = 'input';\n\n  /**\n   * Define if component should display character left\n   */\n  @Prop() characterLeftHide = false;\n\n  /**\n   * Add a help text under the input, usually expected data format and example\n   */\n  @Prop({ mutable: true }) helpText?: string;\n  @Watch('helpText')\n  watchHelpText(newValue: string): void {\n    if (!isValidString(newValue) && (helpTextTypes as unknown as string).includes(this.type)) {\n      this.helpText = this.messages.input.text.helpText[this.type];\n    }\n  }\n\n  /**\n   * Define input valid state\n   */\n  @Prop({ mutable: true }) valid: boolean;\n\n  /**\n   * Define input invalid state\n   */\n  @Prop({ mutable: true }) invalid: boolean;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-input--text']);\n\n  /**\n   * Error message to display\n   */\n  @State() errorMessage: string;\n\n  /**\n   * Emited event when value change\n   */\n  @Event({ eventName: 'value-change' }) valueChange: EventEmitter<HTMLMgInputTextElement['value']>;\n\n  /**\n   * Emited event when checking validity\n   */\n  @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<HTMLMgInputTextElement['valid']>;\n\n  /**\n   * Public method to play input focus\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.input.focus();\n  }\n\n  /**\n   * Display input error if it exists.\n   */\n  @Method()\n  displayError(): Promise<void> {\n    // Use `Promise` as requested for stencil method\n    // Use `requestAnimationFrame` to ensure:\n    // - DOM is fully updated before validation\n    // - Async operations are completed\n    // - No timing issues with Stencil's render cycle\n    // - Keep everything in sync both inside and outside the component\n    return new Promise(resolve => {\n      requestAnimationFrame(() => {\n        this.checkValidity();\n        this.setErrorMessage();\n        this.hasDisplayedError = this.invalid;\n        resolve();\n      });\n    });\n  }\n\n  /**\n   * Set an error and display a custom error message.\n   * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\n   * It must be paired with an error message to display for the given context.\n   * When used to set validity to `false`, you should use this method again to reset the validity to `true`.\n   * @param valid - value indicating the validity\n   * @param errorMessage - the error message to display\n   */\n  @Method()\n  async setError(valid: MgInputText['valid'], errorMessage: string): Promise<void> {\n    if (typeof valid !== 'boolean') {\n      throw new Error('<mg-input-text> method \"setError()\" param \"valid\" must be a boolean.');\n    } else if (!isValidString(errorMessage)) {\n      throw new Error('<mg-input-text> method \"setError()\" param \"errorMessage\" must be a string.');\n    } else {\n      this.setValidity(valid);\n      this.setErrorMessage(valid ? undefined : errorMessage);\n      this.hasDisplayedError = this.invalid;\n    }\n  }\n\n  /**\n   * Reset value, validity and error state\n   */\n  @Method()\n  async reset(): Promise<void> {\n    if (!this.readonly) {\n      this.value = '';\n      this.checkValidity();\n      this.errorMessage = undefined;\n      this.hasDisplayedError = false;\n    }\n  }\n\n  /**\n   * Method to set validity values\n   * @param newValue - valid new value\n   */\n  private setValidity(newValue: MgInputText['valid']) {\n    const oldValidValue = this.valid;\n    this.valid = newValue;\n    this.invalid = !this.valid;\n    // We need to send valid event even if it is the same value\n    if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValidValue)) this.inputValid.emit(this.valid);\n  }\n\n  /**\n   * Validate pattern configuration\n   */\n  private validatePattern = (): void => {\n    if (\n      (this.pattern !== undefined || this.patternErrorMessage !== undefined) && // At least one is defined\n      (!isValidString(this.pattern) || (!(helpTextTypes as unknown as string).includes(this.type) && !isValidString(this.patternErrorMessage))) // Both must be defined\n    ) {\n      throw new Error(\n        `<mg-input-text> props \"pattern\" and \"patternErrorMessage\" must be non-empty string and paired. Passed value: \"pattern='${this.pattern}'\" and \"patternErrorMessage='${this.patternErrorMessage}'\".`,\n      );\n    }\n  };\n\n  /**\n   * Handle input event\n   */\n  private handleInput = (): void => {\n    this.checkValidity();\n    if (this.hasDisplayedError) {\n      this.setErrorMessage();\n    }\n    this.value = this.input.value;\n  };\n\n  /**\n   * Handle focus event\n   */\n  private handleFocus = (): void => {\n    this.classCollection.add(this.classFocus);\n    this.classCollection = new ClassList(this.classCollection.classes);\n  };\n\n  /**\n   * Handle blur event\n   */\n  private handleBlur = (): void => {\n    // Manage focus\n    this.classCollection.delete(this.classFocus);\n    this.classCollection = new ClassList(this.classCollection.classes);\n    // Display Error\n    this.handlerInProgress = 'blur';\n    this.displayError().finally(() => {\n      // reset guard\n      this.handlerInProgress = undefined;\n    });\n  };\n\n  /**\n   * Check if input is valid\n   */\n  private checkValidity = (): void => {\n    this.setValidity(this.readonly || this.disabled || this.input.checkValidity());\n  };\n\n  /**\n   * Set input error message\n   * @param errorMessage - errorMessage override\n   */\n  private setErrorMessage = (errorMessage?: string): void => {\n    // Set error message\n    this.errorMessage = undefined;\n    // Does have a custom error message\n    if (!this.valid && errorMessage !== undefined) {\n      this.errorMessage = errorMessage;\n    }\n    // Does not match type (email, emails, tel, url, etc.)\n    else if (!this.valid && this.input.validity.typeMismatch) {\n      this.errorMessage = this.messages.input.text.errors.typeMismatch[this.type];\n    }\n    // Does not match pattern\n    else if (!this.valid && this.input.validity.patternMismatch) {\n      this.errorMessage = this.patternErrorMessage ?? this.messages.input.text.errors.typeMismatch[this.type];\n    }\n    // required\n    else if (!this.valid && this.input.validity.valueMissing) {\n      this.errorMessage = this.messages.errors.required;\n    }\n  };\n\n  /**\n   * Validate append slot\n   */\n  private validateAppendSlot = (): void => {\n    const slotAppendInput: HTMLSlotElement[] = Array.from(this.element.querySelectorAll('[slot=\"append-input\"]'));\n\n    if (slotAppendInput.length === 1) {\n      if (slotAppendInput[0].nodeName === 'MG-BUTTON') {\n        this.classCollection.add(this.classIsInputGroupAppend);\n      } else {\n        this.classCollection.add(this.classIsAppendInputSlotContent);\n        this.slotContent = slotAppendInput[0].textContent;\n      }\n    } else if (slotAppendInput.filter(slot => slot.nodeName === 'MG-BUTTON').length > 1) {\n      this.classCollection.add(this.classIsInputGroupAppend);\n      this.classCollection.add(this.classHasButtonsGroupAppend);\n    }\n  };\n\n  /**\n   * Method to control datalist display condition\n   * @returns true if display condition success\n   */\n  private hasDatalist = (): boolean => isDatalistOptions(this.datalistoptions) && this.datalistoptions.length > 0;\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   * @returns timeout\n   */\n  componentWillLoad(): ReturnType<typeof setTimeout> {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n    this.characterLeftId = `${this.identifier}-character-left`;\n    this.datalistId = `${this.identifier}-datalist`;\n    // Validate\n    this.validateIcon(this.icon);\n    this.validateDatalistoptions(this.datalistoptions);\n    this.watchPattern();\n    this.validateAppendSlot();\n    this.watchMgWidth(this.mgWidth);\n    this.watchReadonly(this.readonly);\n    this.watchDisabled(this.disabled);\n    this.validateType(this.type);\n    this.watchHelpText(this.helpText);\n    // Check validity when component is ready\n    // return a promise to process action only in the FIRST render().\n    // https://stenciljs.com/docs/component-lifecycle#componentwillload\n    return setTimeout(() => {\n      this.checkValidity();\n    }, 0);\n  }\n\n  /**\n   * Renders the readonly content of the input component.\n   * @returns The readonly content element.\n   */\n  private renderReadonly = (): HTMLElement => {\n    return this.slotContent !== undefined ? (\n      <span class=\"mg-c-input__readonly-value\">\n        <b>{this.value}</b>\n        {this.slotContent}\n      </span>\n    ) : (\n      <b class=\"mg-c-input__readonly-value\">{this.value}</b>\n    );\n  };\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <mg-input\n        label={this.label}\n        identifier={this.identifier}\n        class={this.classCollection.join()}\n        ariaDescribedbyIDs={[this.characterLeftId]}\n        labelOnTop={this.labelOnTop}\n        labelHide={this.labelHide}\n        required={this.required}\n        tooltip={this.tooltip}\n        tooltipPosition={this.readonly && this.value === undefined ? 'label' : this.tooltipPosition}\n        helpText={this.helpText}\n        errorMessage={this.errorMessage}\n      >\n        {this.readonly\n          ? this.value && this.renderReadonly()\n          : [\n              <div\n                key=\"input\"\n                class=\"mg-c-input__with-character-left\"\n                style={{\n                  '--mg-c-character-left-message-length': (!this.characterLeftHide ? this.maxlength.toString().length * 2 + 1 : 0).toString(),\n                }}\n              >\n                {this.icon !== undefined && <mg-icon icon={this.icon}></mg-icon>}\n                <input\n                  type={this.type === 'emails' ? 'email' : this.type}\n                  multiple={this.type === 'emails'}\n                  class=\"mg-c-input__box mg-c-input__box--width\"\n                  value={this.value}\n                  id={this.identifier}\n                  list={this.hasDatalist() ? this.datalistId : undefined}\n                  autocomplete={this.hasDatalist() ? 'off' : undefined}\n                  name={this.name}\n                  placeholder={this.placeholder}\n                  title={this.placeholder}\n                  maxlength={this.maxlength}\n                  disabled={this.disabled}\n                  required={this.required}\n                  aria-invalid={(this.invalid === true).toString()}\n                  pattern={this.pattern}\n                  onInput={this.handleInput}\n                  onFocus={this.handleFocus}\n                  onBlur={this.handleBlur}\n                  ref={(el: HTMLInputElement) => {\n                    if (el !== null) this.input = el;\n                  }}\n                />\n                {this.hasDatalist() && (\n                  <datalist id={this.datalistId}>\n                    {this.datalistoptions.map(option => (\n                      <option value={isOption(option) ? option.title : option} key={option}></option>\n                    ))}\n                  </datalist>\n                )}\n                {!this.characterLeftHide && this.maxlength > 0 && (\n                  <mg-character-left identifier={this.characterLeftId} characters={this.value} maxlength={this.maxlength}></mg-character-left>\n                )}\n              </div>,\n              <slot key=\"slot\" name=\"append-input\"></slot>,\n            ]}\n      </mg-input>\n    );\n  }\n}\n"]}

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

@@ -17,6 +17,10 @@ export class MgInputTextarea {
          * If not set the value equals the identifier
          */
         this.name = this.identifier;
+        /**
+         * Define if label is displayed on top
+         */
+        this.labelOnTop = false;
         /**
          * Define if label is visible
          */
@@ -267,7 +271,7 @@ export class MgInputTextarea {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '02f06e7eb60af078d6ddba8d998cd57132cbf7f0', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [this.characterLeftId], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value && h("b", { class: "mg-c-input__readonly-value" }, this.value)) : (h("div", { class: "mg-c-input__with-character-left" }, h("textarea", { class: {
+        return (h("mg-input", { key: 'e7cc627386b7e46fdcb52758a525a729e55d572b', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [this.characterLeftId], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value && h("b", { class: "mg-c-input__readonly-value" }, this.value)) : (h("div", { class: "mg-c-input__with-character-left" }, h("textarea", { class: {
                 'mg-c-input__box': true,
                 'mg-c-input__box--width': true,
                 'mg-c-input__box--resizable': this.resizable === 'both',
@@ -378,7 +382,7 @@ export class MgInputTextarea {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "Define if label is displayed on top"
@@ -386,7 +390,8 @@ export class MgInputTextarea {
                 "getter": false,
                 "setter": false,
                 "attribute": "label-on-top",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "false"
             },
             "labelHide": {
                 "type": "boolean",
@@ -675,26 +680,27 @@ export class MgInputTextarea {
                 "attribute": "help-text",
                 "reflect": false
             },
-            "valid": {
-                "type": "boolean",
-                "mutable": true,
+            "resizable": {
+                "type": "string",
+                "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "'none' | 'both' | 'horizontal' | 'vertical'",
+                    "resolved": "\"both\" | \"horizontal\" | \"none\" | \"vertical\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Define input valid state"
+                    "text": "Define if input is resizable"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "valid",
-                "reflect": false
+                "attribute": "resizable",
+                "reflect": false,
+                "defaultValue": "'none'"
             },
-            "invalid": {
+            "valid": {
                 "type": "boolean",
                 "mutable": true,
                 "complexType": {
@@ -706,32 +712,31 @@ export class MgInputTextarea {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Define input invalid state"
+                    "text": "Define input valid state"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "invalid",
+                "attribute": "valid",
                 "reflect": false
             },
-            "resizable": {
-                "type": "string",
-                "mutable": false,
+            "invalid": {
+                "type": "boolean",
+                "mutable": true,
                 "complexType": {
-                    "original": "'none' | 'both' | 'horizontal' | 'vertical'",
-                    "resolved": "\"both\" | \"horizontal\" | \"none\" | \"vertical\"",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Define if input is resizable"
+                    "text": "Define input invalid state"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "resizable",
-                "reflect": false,
-                "defaultValue": "'none'"
+                "attribute": "invalid",
+                "reflect": false
             }
         };
     }