@mgdis/mg-components 5.17.0 → 5.19.0

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

@@ -1,16 +1,17 @@
 import { h } from "@stencil/core";
 import { MgInput } from "../MgInput";
-import { ClassList } from "../../../../utils/components.utils";
+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 = 'is-focused';
-    this.classIsInputGroupAppend = 'mg-input--is-input-group-append';
-    this.classHasIcon = 'mg-input--has-icon';
+    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;
     /**
@@ -45,19 +46,21 @@ export class MgInputText {
      */
     this.checkValidity = () => {
       var _a;
-      this.valid = this.readonly || this.disabled || (((_a = this.input) === null || _a === void 0 ? void 0 : _a.checkValidity) !== undefined ? this.input.checkValidity() : true);
-      this.invalid = !this.valid;
-      // We need to send valid event even if it is the same value
-      this.inputValid.emit(this.valid);
+      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 = () => {
+    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
-      if (!this.valid && this.input.validity.patternMismatch) {
+      else if (!this.valid && this.input.validity.patternMismatch) {
         this.errorMessage = this.patternErrorMessage;
       }
       // required
@@ -65,30 +68,24 @@ export class MgInputText {
         this.errorMessage = this.messages.errors.required;
       }
     };
-    /**
-     * Validate pattern configuration
-     */
-    this.validatePattern = () => {
-      if (this.pattern !== undefined &&
-        typeof this.pattern === 'string' &&
-        this.pattern !== '' &&
-        (this.patternErrorMessage === undefined || typeof this.patternErrorMessage !== 'string' || this.patternErrorMessage === '')) {
-        throw new Error('<mg-input-text> prop "pattern" must be paired with the prop "patternErrorMessage"');
-      }
-    };
     /**
      * 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-input--is-append-input-slot-content');
+        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-input--has-buttons-group-append');
+        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;
@@ -98,6 +95,7 @@ export class MgInputText {
     this.labelOnTop = undefined;
     this.labelHide = false;
     this.placeholder = undefined;
+    this.datalistoptions = undefined;
     this.maxlength = 400;
     this.required = false;
     this.readonly = false;
@@ -110,7 +108,7 @@ export class MgInputText {
     this.helpText = undefined;
     this.valid = undefined;
     this.invalid = undefined;
-    this.classCollection = new ClassList(['mg-input--text']);
+    this.classCollection = new ClassList(['mg-c-input--text']);
     this.errorMessage = undefined;
   }
   handleValue(newValue) {
@@ -124,6 +122,11 @@ export class MgInputText {
       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, DatalistOption.');
+    }
+  }
   handleValidityChange(newValue, _oldValue, prop) {
     if (this.input !== undefined) {
       this.input[prop] = newValue;
@@ -134,6 +137,11 @@ export class MgInputText {
       }
     }
   }
+  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.');
+    }
+  }
   /**
    * Public method to play input focus
    */
@@ -141,13 +149,44 @@ export class MgInputText {
     this.input.focus();
   }
   /**
-   * Public method to display errors
+   * 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');
+    }
+    else {
+      this.setValidity(valid);
+      this.setErrorMessage(valid ? undefined : errorMessage);
+      this.hasDisplayedError = this.invalid;
+    }
+  }
+  /**
+   * 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 *
    *************/
@@ -159,9 +198,12 @@ export class MgInputText {
     // 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.validatePattern();
+    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().
@@ -175,25 +217,25 @@ export class MgInputText {
    * @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-input__with-character-left", style: {
+    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-input__box", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, maxlength: this.maxlength, disabled: this.disabled, required: this.required, 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, 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, pattern: this.pattern, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
         if (el !== null)
           this.input = el;
-      } }), this.displayCharacterLeft && this.maxlength > 0 && (h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength }))), h("slot", { name: "append-input" })));
+      } }), 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 {
-      "$": ["mg-input-text.scss"]
+      "$": ["../../../../../node_modules/@mgdis/styles/dist/components/mg-input-text.css"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["mg-input-text.css"]
+      "$": ["../../../../../node_modules/@mgdis/styles/dist/components/mg-input-text.css"]
     };
   }
   static get properties() {
@@ -271,9 +313,15 @@ export class MgInputText {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'text' | 'search'",
+          "original": "TextType",
           "resolved": "\"search\" | \"text\"",
-          "references": {}
+          "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,
@@ -354,6 +402,27 @@ export class MgInputText {
         "attribute": "placeholder",
         "reflect": false
       },
+      "datalistoptions": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "DatalistOption[]",
+          "resolved": "string[]",
+          "references": {
+            "DatalistOption": {
+              "location": "import",
+              "path": "./mg-input-text.conf",
+              "id": "src/components/molecules/inputs/mg-input-text/mg-input-text.conf.ts::DatalistOption"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define datalist options"
+        }
+      },
       "maxlength": {
         "type": "number",
         "mutable": false,
@@ -643,9 +712,48 @@ export class MgInputText {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Public method to display errors",
+          "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"
+            }, {
+              "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"
+            }]
+        }
       }
     };
   }
@@ -657,6 +765,9 @@ export class MgInputText {
       }, {
         "propName": "icon",
         "methodName": "validateIcon"
+      }, {
+        "propName": "datalistoptions",
+        "methodName": "validateDatalistoptions"
       }, {
         "propName": "required",
         "methodName": "handleValidityChange"
@@ -666,6 +777,12 @@ export class MgInputText {
       }, {
         "propName": "disabled",
         "methodName": "handleValidityChange"
+      }, {
+        "propName": "pattern",
+        "methodName": "validatePattern"
+      }, {
+        "propName": "patternErrorMessage",
+        "methodName": "validatePattern"
       }];
   }
 }

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":"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","sourcesContent":["import { Component, Event, h, Prop, EventEmitter, State, Element, Method, Watch } from '@stencil/core';\nimport { MgInput } from '../MgInput';\nimport { Width } from '../MgInput.conf';\nimport { ClassList } from '../../../../utils/components.utils';\nimport { initLocales } from '../../../../locales';\n\n@Component({\n  tag: 'mg-input-text',\n  styleUrl: 'mg-input-text.scss',\n  shadow: true,\n})\nexport class MgInputText {\n  /************\n   * Internal *\n   ************/\n\n  // Classes\n  private classFocus = 'is-focused';\n  private classIsInputGroupAppend = 'mg-input--is-input-group-append';\n  private classHasIcon = 'mg-input--has-icon';\n\n  // IDs\n  private characterLeftId;\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  /**************\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: string;\n  @Watch('value')\n  handleValue(newValue: string): void {\n    this.valueChange.emit(newValue);\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: 'text' | 'search' = 'text';\n\n  /**\n   * Input icon\n   */\n  @Prop() icon: string;\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   * 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\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  /**\n   * Define input width\n   */\n  @Prop() mgWidth: Width = 'full';\n\n  /**\n   * Define input pattern to validate\n   */\n  @Prop() pattern: string;\n\n  /**\n   * Define input pattern error message\n   */\n  @Prop() patternErrorMessage: string;\n\n  /**\n   * Add a tooltip message next to the input\n   */\n  @Prop() tooltip: string;\n\n  /**\n   * Define if component should display character left\n   */\n  @Prop() displayCharacterLeft = true;\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-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<string>;\n\n  /**\n   * Emited event when checking validity\n   */\n  @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<boolean>;\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   * Public method to display errors\n   */\n  @Method()\n  async displayError(): Promise<void> {\n    this.checkValidity();\n    this.setErrorMessage();\n    this.hasDisplayedError = this.invalid;\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.displayError();\n  };\n\n  /**\n   * Check if input is valid\n   */\n  private checkValidity = (): void => {\n    this.valid = this.readonly || this.disabled || (this.input?.checkValidity !== undefined ? this.input.checkValidity() : true);\n    this.invalid = !this.valid;\n    // We need to send valid event even if it is the same value\n    this.inputValid.emit(this.valid);\n  };\n\n  /**\n   * Set input error message\n   */\n  private setErrorMessage = (): void => {\n    // Set error message\n    this.errorMessage = undefined;\n    // Does not match pattern\n    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 pattern configuration\n   */\n  private validatePattern = (): void => {\n    if (\n      this.pattern !== undefined &&\n      typeof this.pattern === 'string' &&\n      this.pattern !== '' &&\n      (this.patternErrorMessage === undefined || typeof this.patternErrorMessage !== 'string' || this.patternErrorMessage === '')\n    ) {\n      throw new Error('<mg-input-text> prop \"pattern\" must be paired with the prop \"patternErrorMessage\"');\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      this.classCollection.add(slotAppendInput[0].nodeName === 'MG-BUTTON' ? this.classIsInputGroupAppend : 'mg-input--is-append-input-slot-content');\n    } else if (slotAppendInput.filter(slot => slot.nodeName === 'MG-BUTTON').length > 1) {\n      this.classCollection.add(this.classIsInputGroupAppend);\n      this.classCollection.add('mg-input--has-buttons-group-append');\n    }\n  };\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    // Validate\n    this.validateIcon(this.icon);\n    this.validatePattern();\n    this.validateAppendSlot();\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   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <MgInput\n        identifier={this.identifier}\n        classCollection={this.classCollection}\n        ariaDescribedbyIDs={[this.characterLeftId]}\n        label={this.label}\n        labelOnTop={this.labelOnTop}\n        labelHide={this.labelHide}\n        required={this.required}\n        readonly={this.readonly}\n        mgWidth={this.mgWidth}\n        disabled={this.disabled}\n        value={this.value}\n        readonlyValue={undefined}\n        tooltip={this.tooltip}\n        helpText={this.helpText}\n        errorMessage={this.errorMessage}\n        isFieldset={false}\n      >\n        <div\n          class=\"mg-input__with-character-left\"\n          style={{\n            '--mg-character-left-message-length': (this.displayCharacterLeft\n              ? (this.maxlength - (this.value || '').length).toString().length + this.maxlength.toString().length + 1\n              : 0\n            ).toString(),\n          }}\n        >\n          {this.icon !== undefined && <mg-icon icon={this.icon}></mg-icon>}\n          <input\n            type={this.type}\n            class=\"mg-input__box\"\n            value={this.value}\n            id={this.identifier}\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            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.displayCharacterLeft && this.maxlength > 0 && (\n            <mg-character-left identifier={this.characterLeftId} characters={this.value} maxlength={this.maxlength}></mg-character-left>\n          )}\n        </div>\n        <slot name=\"append-input\"></slot>\n      </MgInput>\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 { MgInput } from '../MgInput';\nimport { Width } from '../MgInput.conf';\nimport { ClassList, isValidString } from '../../../../utils/components.utils';\nimport { initLocales } from '../../../../locales';\nimport { DatalistOption, TextType } from './mg-input-text.conf';\n\nconst isDatalistOption = (options: unknown[]): options is DatalistOption[] => Array.isArray(options) && options.every(option => typeof option === 'string');\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 classFocus = 'mg-u-is-focused';\n  private classIsInputGroupAppend = 'mg-c-input--is-input-group-append';\n  private classHasIcon = 'mg-c-input--has-icon';\n\n  // IDs\n  private characterLeftId;\n  private datalistId;\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  /**************\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: string;\n  @Watch('value')\n  handleValue(newValue: string): void {\n    this.valueChange.emit(newValue);\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: string;\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: DatalistOption[];\n  @Watch('datalistoptions')\n  validateDatalistoptions(newValue: MgInputText['datalistoptions']) {\n    if (Boolean(newValue) && !isDatalistOption(newValue)) {\n      throw new Error('<mg-input-text> prop \"datalistoptions\" values must be the same type, DatalistOption.');\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\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  /**\n   * Define input width\n   */\n  @Prop() mgWidth: Width = 'full';\n\n  /**\n   * Define input pattern to validate\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('<mg-input-text> props \"pattern\" and \"patternErrorMessage\" must be non-empty string and paired.');\n    }\n  }\n\n  /**\n   * Add a tooltip message next to the input\n   */\n  @Prop() tooltip: string;\n\n  /**\n   * Define if component should display character left\n   */\n  @Prop() displayCharacterLeft = true;\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<string>;\n\n  /**\n   * Emited event when checking validity\n   */\n  @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<boolean>;\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  async displayError(): Promise<void> {\n    this.checkValidity();\n    this.setErrorMessage();\n    this.hasDisplayedError = this.invalid;\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   * Method to set validity values\n   * @param newValue - valid new value\n   */\n  private setValidity(newValue: MgInputText['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    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.displayError();\n  };\n\n  /**\n   * Check if input is valid\n   */\n  private checkValidity = (): void => {\n    this.setValidity(this.readonly || this.disabled || (this.input?.checkValidity !== undefined ? this.input.checkValidity() : true));\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      this.classCollection.add(slotAppendInput[0].nodeName === 'MG-BUTTON' ? this.classIsInputGroupAppend : 'mg-c-input--is-append-input-slot-content');\n    } else if (slotAppendInput.filter(slot => slot.nodeName === 'MG-BUTTON').length > 1) {\n      this.classCollection.add(this.classIsInputGroupAppend);\n      this.classCollection.add('mg-c-input--has-buttons-group-append');\n    }\n  };\n\n  /**\n   * Methode to control datalist display condition\n   * @returns true if display condition success\n   */\n  private hasDatalist = (): boolean => isDatalistOption(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    // 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   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <MgInput\n        identifier={this.identifier}\n        classCollection={this.classCollection}\n        ariaDescribedbyIDs={[this.characterLeftId]}\n        label={this.label}\n        labelOnTop={this.labelOnTop}\n        labelHide={this.labelHide}\n        required={this.required}\n        readonly={this.readonly}\n        mgWidth={this.mgWidth}\n        disabled={this.disabled}\n        value={this.value}\n        readonlyValue={undefined}\n        tooltip={this.tooltip}\n        helpText={this.helpText}\n        errorMessage={this.errorMessage}\n        isFieldset={false}\n      >\n        <div\n          class=\"mg-c-input__with-character-left\"\n          style={{\n            '--mg-character-left-message-length': (this.displayCharacterLeft\n              ? (this.maxlength - (this.value || '').length).toString().length + this.maxlength.toString().length + 1\n              : 0\n            ).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\"\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            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={option} key={option}></option>\n              ))}\n            </datalist>\n          )}\n          {this.displayCharacterLeft && this.maxlength > 0 && (\n            <mg-character-left identifier={this.characterLeftId} characters={this.value} maxlength={this.maxlength}></mg-character-left>\n          )}\n        </div>\n        <slot name=\"append-input\"></slot>\n      </MgInput>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,147 @@
+import { renderAttributes, renderProperties } from "../../../../../utils/e2e.test.utils";
+import { setPageContent, expect, describe, test, testEach, updateScreenshotClass, describeEach } from "../../../../../utils/playwright.e2e.test.utils";
+const creatHtml = (props) => {
+  const slot = props.slot;
+  delete props.slot;
+  return `<mg-input-text ${renderAttributes(props)}>${slot}</mg-input-text><script>${renderProperties(props, `[identifier="${props.identifier}"]`)}</script>`;
+};
+const defaultProps = { identifier: 'identifier', label: 'label' };
+describe('mg-input-text', () => {
+  describe('render', () => {
+    testEach([
+      Object.assign({}, defaultProps),
+      Object.assign(Object.assign({}, defaultProps), { labelOnTop: true }),
+      Object.assign(Object.assign({}, defaultProps), { labelHide: true }),
+      Object.assign(Object.assign({}, defaultProps), { placeholder: 'placeholder', helpText: 'HelpText Message' }),
+    ])('without tooltip %s', async (page, props) => {
+      await setPageContent(page, creatHtml(props));
+      const element = await page.locator('mg-input-text.hydrated');
+      await element.waitFor({ timeout: 1000 });
+      const input = await page.locator('mg-input-text input');
+      // Hide caret for screenshots
+      await page.locator('mg-input-text input').evaluate(element => (element.style.caretColor = 'transparent'));
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+      await page.keyboard.down('Tab');
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+      await input.press('KeyB');
+      await input.press('KeyL');
+      await input.press('KeyU');
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+    });
+    testEach([true, false])('with tooltip, case label-on-top %s', async (page, labelOnTop) => {
+      const args = Object.assign(Object.assign({}, defaultProps), { tooltip: 'Tooltip message', labelOnTop });
+      await setPageContent(page, creatHtml(args));
+      const element = await page.locator('mg-input-text.hydrated');
+      await element.waitFor({ timeout: 1000 });
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+      await page.keyboard.down('Tab');
+      if (!labelOnTop) {
+        // Ensure to display tooltip
+        await page.setViewportSize({ height: 100, width: 500 });
+        await updateScreenshotClass(page, { height: '65px', width: '500px' });
+        // when label on top tooltip is on fist tab (next to label)
+        await page.keyboard.down('Tab');
+      }
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+    });
+    testEach([
+      Object.assign(Object.assign({}, defaultProps), { readonly: true }),
+      Object.assign(Object.assign({}, defaultProps), { value: 'blu' }),
+      Object.assign(Object.assign({}, defaultProps), { value: 'blu', readonly: true }),
+      Object.assign(Object.assign({}, defaultProps), { value: 'blu', readonly: true, labelOnTop: true }),
+      Object.assign(Object.assign({}, defaultProps), { disabled: true }),
+      Object.assign(Object.assign({}, defaultProps), { value: 'blu', disabled: true }),
+      Object.assign(Object.assign({}, defaultProps), { value: 'batman', helpText: '<mg-icon icon="user" size="small"></mg-icon> Welcome batman' }),
+      Object.assign(Object.assign({}, defaultProps), { value: 'blu', helpText: 'HelpText Message', required: true }),
+      Object.assign(Object.assign({}, defaultProps), { value: 'blu', helpText: 'HelpText Message', required: true, readonly: true }),
+      Object.assign(Object.assign({}, defaultProps), { value: 'blu', helpText: 'HelpText Message', required: true, disabled: true }),
+    ])('Should render with template %s', async (page, args) => {
+      await setPageContent(page, creatHtml(args));
+      const element = await page.locator('mg-input-text.hydrated');
+      await element.waitFor({ timeout: 1000 });
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+    });
+    testEach([
+      Object.assign(Object.assign({}, defaultProps), { required: true }),
+      Object.assign(Object.assign({}, defaultProps), { required: true, lang: 'fr' }),
+    ])('Should render error when leaving an empty required input %s', async (page, args) => {
+      await setPageContent(page, creatHtml(args));
+      const element = await page.locator('mg-input-text.hydrated');
+      await element.waitFor({ timeout: 1000 });
+      await page.keyboard.down('Tab');
+      await page.keyboard.down('Tab');
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+    });
+    testEach([16, 'full'])('Should render error when leaving input with a non matching pattern value, mg-width: %s', async (page, mgWidth) => {
+      await setPageContent(page, creatHtml(Object.assign(Object.assign({}, defaultProps), { mgWidth, pattern: '[a-z]*', patternErrorMessage: 'Vous ne pouvez saisir que des lettres minuscules.' })));
+      const element = await page.locator('mg-input-text.hydrated');
+      await element.waitFor({ timeout: 1000 });
+      const input = await page.locator('mg-input-text input');
+      expect(element).toHaveClass('hydrated');
+      await page.keyboard.down('Tab');
+      await input.press('KeyB');
+      await input.press('KeyL');
+      await input.press('KeyU');
+      await input.press('1');
+      await page.keyboard.down('Tab');
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+      await page.keyboard.down('Tab');
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+    });
+    testEach([
+      Object.assign(Object.assign({}, defaultProps), { label: 'long label long label long label long label long label long label long label long label long label long label long label', tooltip: 'tooltip message' }),
+      Object.assign(Object.assign({}, defaultProps), { label: 'long label long label long label long label long label long label long label long label long label long label long label', tooltip: 'tooltip message', labelOnTop: true }),
+    ])('inside a div.mg-form-group %s', async (page, args) => {
+      await setPageContent(page, `<div class="mg-form-group">${creatHtml(args)}</div>`);
+      const element = await page.locator('mg-input-text.hydrated');
+      await element.waitFor({ timeout: 1000 });
+      await page.setViewportSize({ height: 100, width: 500 });
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+    });
+    describeEach([true, false])('using append-input slot, case readonly %s', (readonly) => {
+      testEach([
+        Object.assign(Object.assign({}, defaultProps), { type: 'search', slot: `<mg-button slot="append-input" label="search">
+          <mg-icon icon="magnifying-glass"></mg-icon> Search
+        </mg-button>`, icon: 'magnifying-glass' }),
+        Object.assign(Object.assign({}, defaultProps), { type: 'text', slot: '<span slot="append-input">@dc.comics</span>' }),
+        Object.assign(Object.assign({}, defaultProps), { type: 'text', slot: `<mg-button is-icon slot="append-input" label="cancel" variant="secondary">
+          <mg-icon icon="cross"></mg-icon>
+        </mg-button>
+        <mg-button is-icon slot="append-input" label="validate" variant="secondary">
+          <mg-icon icon="check"></mg-icon>
+        </mg-button>
+        ` }),
+      ])('render slot %s', async (page, props) => {
+        await setPageContent(page, creatHtml(Object.assign(Object.assign({}, props), { placeholder: 'placeholder', value: 'bruce', readonly })));
+        const element = await page.locator('mg-input-text.hydrated');
+        await element.waitFor({ timeout: 1000 });
+        await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+      });
+    });
+    describeEach([16, 4, 2])('with custom width: %s', (mgWidth) => {
+      testEach([false, true])('with label on top: %s', async (page, labelOnTop) => {
+        await setPageContent(page, creatHtml(Object.assign(Object.assign({}, defaultProps), { value: 'bruce', mgWidth,
+          labelOnTop })));
+        const element = await page.locator('mg-input-text.hydrated');
+        await element.waitFor({ timeout: 1000 });
+        await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+      });
+    });
+    testEach([false, true])('Ensure component fit in width 200px with label-on-top: %s', async (page, labelOnTop) => {
+      await setPageContent(page, creatHtml(Object.assign(Object.assign({}, defaultProps), { labelOnTop })));
+      const element = await page.locator('mg-input-text.hydrated');
+      await element.waitFor({ timeout: 1000 });
+      await page.setViewportSize({ height: 100, width: 200 });
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+    });
+  });
+  describe('datalist', () => {
+    test('Should display datalist', async ({ page }) => {
+      const props = { identifier: 'identifier', label: 'label', datalistoptions: ['batman', 'robin'] };
+      await setPageContent(page, creatHtml(props));
+      await page.keyboard.down('Tab');
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+    });
+  });
+});
+//# sourceMappingURL=mg-input-text.e2e.playwright.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-input-text.e2e.playwright.js","sourceRoot":"","sources":["../../../../../../src/components/molecules/inputs/mg-input-text/test/mg-input-text.e2e.playwright.ts"],"names":[],"mappings":"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","sourcesContent":["import { renderAttributes, renderProperties } from '../../../../../utils/e2e.test.utils';\nimport { setPageContent, expect, describe, test, testEach, PageType, updateScreenshotClass, describeEach } from '../../../../../utils/playwright.e2e.test.utils';\nimport { MgInputText } from '../mg-input-text';\n\nconst creatHtml = (props: Partial<MgInputText & { slot: string }>) => {\n  const slot = props.slot;\n  delete props.slot;\n  return `<mg-input-text ${renderAttributes(props)}>${slot}</mg-input-text><script>${renderProperties(props, `[identifier=\"${props.identifier}\"]`)}</script>`;\n};\n\nconst defaultProps = { identifier: 'identifier', label: 'label' };\n\ndescribe('mg-input-text', () => {\n  describe('render', () => {\n    testEach([\n      { ...defaultProps },\n      { ...defaultProps, labelOnTop: true },\n      { ...defaultProps, labelHide: true },\n      { ...defaultProps, placeholder: 'placeholder', helpText: 'HelpText Message' },\n    ])('without tooltip %s', async (page: PageType, props: MgInputText) => {\n      await setPageContent(page, creatHtml(props));\n\n      const element = await page.locator('mg-input-text.hydrated');\n      await element.waitFor({ timeout: 1000 });\n      const input = await page.locator('mg-input-text input');\n\n      // Hide caret for screenshots\n      await page.locator('mg-input-text input').evaluate(element => (element.style.caretColor = 'transparent'));\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n\n      await page.keyboard.down('Tab');\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n\n      await input.press('KeyB');\n      await input.press('KeyL');\n      await input.press('KeyU');\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n    });\n\n    testEach([true, false])('with tooltip, case label-on-top %s', async (page: PageType, labelOnTop: boolean) => {\n      const args: Partial<MgInputText> = { ...defaultProps, tooltip: 'Tooltip message', labelOnTop };\n      await setPageContent(page, creatHtml(args));\n\n      const element = await page.locator('mg-input-text.hydrated');\n      await element.waitFor({ timeout: 1000 });\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n\n      await page.keyboard.down('Tab');\n      if (!labelOnTop) {\n        // Ensure to display tooltip\n        await page.setViewportSize({ height: 100, width: 500 });\n        await updateScreenshotClass(page, { height: '65px', width: '500px' });\n        // when label on top tooltip is on fist tab (next to label)\n        await page.keyboard.down('Tab');\n      }\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n    });\n\n    testEach([\n      { ...defaultProps, readonly: true },\n      { ...defaultProps, value: 'blu' },\n      { ...defaultProps, value: 'blu', readonly: true },\n      { ...defaultProps, value: 'blu', readonly: true, labelOnTop: true },\n      { ...defaultProps, disabled: true },\n      { ...defaultProps, value: 'blu', disabled: true },\n      { ...defaultProps, value: 'batman', helpText: '<mg-icon icon=\"user\" size=\"small\"></mg-icon> Welcome batman' },\n      { ...defaultProps, value: 'blu', helpText: 'HelpText Message', required: true },\n      { ...defaultProps, value: 'blu', helpText: 'HelpText Message', required: true, readonly: true },\n      { ...defaultProps, value: 'blu', helpText: 'HelpText Message', required: true, disabled: true },\n    ])('Should render with template %s', async (page: PageType, args) => {\n      await setPageContent(page, creatHtml(args));\n\n      const element = await page.locator('mg-input-text.hydrated');\n      await element.waitFor({ timeout: 1000 });\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n    });\n\n    testEach([\n      { ...defaultProps, required: true },\n      { ...defaultProps, required: true, lang: 'fr' },\n    ])('Should render error when leaving an empty required input %s', async (page: PageType, args) => {\n      await setPageContent(page, creatHtml(args));\n\n      const element = await page.locator('mg-input-text.hydrated');\n      await element.waitFor({ timeout: 1000 });\n\n      await page.keyboard.down('Tab');\n      await page.keyboard.down('Tab');\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n    });\n\n    testEach([16, 'full'])('Should render error when leaving input with a non matching pattern value, mg-width: %s', async (page: PageType, mgWidth: MgInputText['mgWidth']) => {\n      await setPageContent(\n        page,\n        creatHtml({\n          ...defaultProps,\n          mgWidth,\n          pattern: '[a-z]*',\n          patternErrorMessage: 'Vous ne pouvez saisir que des lettres minuscules.',\n        }),\n      );\n\n      const element = await page.locator('mg-input-text.hydrated');\n      await element.waitFor({ timeout: 1000 });\n      const input = await page.locator('mg-input-text input');\n\n      expect(element).toHaveClass('hydrated');\n\n      await page.keyboard.down('Tab');\n\n      await input.press('KeyB');\n      await input.press('KeyL');\n      await input.press('KeyU');\n      await input.press('1');\n\n      await page.keyboard.down('Tab');\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n\n      await page.keyboard.down('Tab');\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n    });\n\n    testEach([\n      {\n        ...defaultProps,\n        label: 'long label long label long label long label long label long label long label long label long label long label long label',\n        tooltip: 'tooltip message',\n      },\n      {\n        ...defaultProps,\n        label: 'long label long label long label long label long label long label long label long label long label long label long label',\n        tooltip: 'tooltip message',\n        labelOnTop: true,\n      },\n    ])('inside a div.mg-form-group %s', async (page: PageType, args) => {\n      await setPageContent(page, `<div class=\"mg-form-group\">${creatHtml(args)}</div>`);\n\n      const element = await page.locator('mg-input-text.hydrated');\n      await element.waitFor({ timeout: 1000 });\n\n      await page.setViewportSize({ height: 100, width: 500 });\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n    });\n\n    describeEach([true, false])('using append-input slot, case readonly %s', (readonly: boolean) => {\n      testEach([\n        {\n          ...defaultProps,\n          type: 'search',\n          slot: `<mg-button slot=\"append-input\" label=\"search\">\n          <mg-icon icon=\"magnifying-glass\"></mg-icon> Search\n        </mg-button>`,\n          icon: 'magnifying-glass',\n        },\n        {\n          ...defaultProps,\n          type: 'text',\n          slot: '<span slot=\"append-input\">@dc.comics</span>',\n        },\n        {\n          ...defaultProps,\n          type: 'text',\n          slot: `<mg-button is-icon slot=\"append-input\" label=\"cancel\" variant=\"secondary\">\n          <mg-icon icon=\"cross\"></mg-icon>\n        </mg-button>\n        <mg-button is-icon slot=\"append-input\" label=\"validate\" variant=\"secondary\">\n          <mg-icon icon=\"check\"></mg-icon>\n        </mg-button>\n        `,\n        },\n      ])('render slot %s', async (page: PageType, props: Record<string, unknown>) => {\n        await setPageContent(\n          page,\n          creatHtml({\n            ...props,\n            placeholder: 'placeholder',\n            value: 'bruce',\n            readonly,\n          }),\n        );\n\n        const element = await page.locator('mg-input-text.hydrated');\n        await element.waitFor({ timeout: 1000 });\n\n        await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n      });\n    });\n\n    describeEach([16, 4, 2])('with custom width: %s', (mgWidth: MgInputText['mgWidth']) => {\n      testEach([false, true])('with label on top: %s', async (page: PageType, labelOnTop: MgInputText['labelOnTop']) => {\n        await setPageContent(\n          page,\n          creatHtml({\n            ...defaultProps,\n            value: 'bruce',\n            mgWidth,\n            labelOnTop,\n          }),\n        );\n\n        const element = await page.locator('mg-input-text.hydrated');\n        await element.waitFor({ timeout: 1000 });\n\n        await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n      });\n    });\n\n    testEach([false, true])('Ensure component fit in width 200px with label-on-top: %s', async (page: PageType, labelOnTop: MgInputText['labelOnTop']) => {\n      await setPageContent(\n        page,\n        creatHtml({\n          ...defaultProps,\n          labelOnTop,\n        }),\n      );\n\n      const element = await page.locator('mg-input-text.hydrated');\n      await element.waitFor({ timeout: 1000 });\n\n      await page.setViewportSize({ height: 100, width: 200 });\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n    });\n  });\n\n  describe('datalist', () => {\n    test('Should display datalist', async ({ page }) => {\n      const props = { identifier: 'identifier', label: 'label', datalistoptions: ['batman', 'robin'] };\n      await setPageContent(page, creatHtml(props));\n\n      await page.keyboard.down('Tab');\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n    });\n  });\n});\n"]}