@mgdis/mg-components 5.16.0 → 5.18.0

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

@@ -1,9 +1,9 @@
-import { h } from '@stencil/core';
-import { MgInput } from '../MgInput';
-import { types, InputError } from './mg-input-numeric.conf';
-import { ClassList } from '../../../../utils/components.utils';
-import { initLocales } from '../../../../locales/';
-import { localeCurrency, localeNumber } from '../../../../utils/locale.utils';
+import { h } from "@stencil/core";
+import { MgInput } from "../MgInput";
+import { types, InputError } from "./mg-input-numeric.conf";
+import { ClassList } from "../../../../utils/components.utils";
+import { initLocales } from "../../../../locales/";
+import { localeCurrency, localeNumber } from "../../../../utils/locale.utils";
 export class MgInputNumeric {
   constructor() {
     // hasDisplayedError (triggered by blur event)
@@ -39,20 +39,21 @@ export class MgInputNumeric {
      * Check if input is valid
      */
     this.checkValidity = () => {
-      this.valid = this.readonly || this.disabled || this.getInputError() === null;
-      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 || this.getInputError() === null);
     };
     /**
      * Set input error message
+     * @param errorMessage - errorMessage override
      */
-    this.setErrorMessage = () => {
+    this.setErrorMessage = (errorMessage) => {
       // Set error message
       this.errorMessage = undefined;
       if (!this.valid) {
         const inputError = this.getInputError();
-        if (inputError === InputError.REQUIRED) {
+        if (errorMessage !== undefined) {
+          this.errorMessage = errorMessage;
+        }
+        else if (inputError === InputError.REQUIRED) {
           this.errorMessage = this.messages.errors[inputError];
         }
         else {
@@ -146,36 +147,6 @@ export class MgInputNumeric {
       this.updateValues(newValue);
     }
   }
-  /**
-   * Checks if the given value is valid according to the defined rules.
-   * @param value - The input value to validate.
-   * @param regex - The regular expression for validation.
-   * @param integer - The integer part of the value.
-   * @param decimal - The decimal part of the value.
-   * @returns Returns true if the value is valid, otherwise false.
-   */
-  isValidValue(value, regex, integer, decimal) {
-    return ['', '-'].includes(value) || (value.match(regex) && integer.length <= this.integerLength && decimal.length <= (this.type === 'integer' ? 0 : this.decimalLength));
-  }
-  /**
-   * Handles invalid input values and returns a corrected value.
-   * @returns The corrected value.
-   */
-  handleInvalidValue() {
-    return this.storedValue !== undefined ? this.storedValue : null;
-  }
-  /**
-   * Updates the component values based on the validated input value.
-   * @param newValue - The validated input value.
-   */
-  updateValues(newValue) {
-    this.value = newValue;
-    if (this.input !== undefined)
-      this.input.value = this.value;
-    this.numericValue = !['', null].includes(this.value) ? parseFloat(this.value.replace(',', '.')) : null;
-    this.valueChange.emit(this.numericValue);
-    this.readonlyValue = this.numericValue !== null ? this.formatValue(this.numericValue) : '';
-  }
   handleValidityChange(newValue, _oldValue, prop) {
     if (this.input !== undefined) {
       this.input[prop] = newValue;
@@ -202,13 +173,74 @@ export class MgInputNumeric {
     }
   }
   /**
-   * 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-numeric> method "setError()" param "valid" must be a boolean');
+    }
+    else if (typeof errorMessage !== 'string' || errorMessage.trim() === '') {
+      throw new Error('<mg-input-numeric> 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);
+  }
+  /**
+   * Checks if the given value is valid according to the defined rules.
+   * @param value - The input value to validate.
+   * @param regex - The regular expression for validation.
+   * @param integer - The integer part of the value.
+   * @param decimal - The decimal part of the value.
+   * @returns Returns true if the value is valid, otherwise false.
+   */
+  isValidValue(value, regex, integer, decimal) {
+    return ['', '-'].includes(value) || (value.match(regex) && integer.length <= this.integerLength && decimal.length <= (this.type === 'integer' ? 0 : this.decimalLength));
+  }
+  /**
+   * Handles invalid input values and returns a corrected value.
+   * @returns The corrected value.
+   */
+  handleInvalidValue() {
+    return this.storedValue !== undefined ? this.storedValue : null;
+  }
+  /**
+   * Updates the component values based on the validated input value.
+   * @param newValue - The validated input value.
+   */
+  updateValues(newValue) {
+    this.value = newValue;
+    if (this.input !== undefined)
+      this.input.value = this.value;
+    this.numericValue = !['', null].includes(this.value) ? parseFloat(this.value.replace(',', '.')) : null;
+    this.valueChange.emit(this.numericValue);
+    this.readonlyValue = this.numericValue !== null ? this.formatValue(this.numericValue) : '';
+  }
   /**
    * Displayed value in input
    * Change on focus/blur
@@ -451,7 +483,8 @@ export class MgInputNumeric {
           "references": {
             "Width": {
               "location": "import",
-              "path": "../MgInput.conf"
+              "path": "../MgInput.conf",
+              "id": "src/components/molecules/inputs/MgInput.conf.ts::Width"
             }
           }
         },
@@ -688,15 +721,55 @@ export class MgInputNumeric {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Public method to display errors",
+          "text": "Display input error if it exists.",
           "tags": []
         }
+      },
+      "setError": {
+        "complexType": {
+          "signature": "(valid: MgInputNumeric['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"
+            },
+            "MgInputNumeric": {
+              "location": "global",
+              "id": "global::MgInputNumeric"
+            }
+          },
+          "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"
+            }]
+        }
       }
     };
   }
@@ -726,3 +799,4 @@ export class MgInputNumeric {
       }];
   }
 }
+//# sourceMappingURL=mg-input-numeric.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-input-numeric.js","sourceRoot":"","sources":["../../../../../src/components/molecules/inputs/mg-input-numeric/mg-input-numeric.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, h, Prop, EventEmitter, State, Watch, Method } from '@stencil/core';\nimport { MgInput } from '../MgInput';\nimport { Width } from '../MgInput.conf';\nimport { types, InputError } from './mg-input-numeric.conf';\nimport { ClassList } from '../../../../utils/components.utils';\nimport { initLocales } from '../../../../locales/';\nimport { localeCurrency, localeNumber } from '../../../../utils/locale.utils';\n\n@Component({\n  tag: 'mg-input-numeric',\n  styleUrl: 'mg-input-numeric.scss',\n  shadow: true,\n})\nexport class MgInputNumeric {\n  /************\n   * Internal *\n   ************/\n\n  // Manage different values\n  private storedValue: string;\n  private numericValue: number;\n  private readonlyValue: string;\n\n  // HTML selector\n  private input: HTMLInputElement;\n\n  // Locales\n  private locale: string;\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: HTMLMgInputNumericElement;\n\n  /**\n   * Component value\n   */\n  @Prop({ mutable: true, reflect: true }) value: string;\n  @Watch('value')\n  validateValue(newValue: MgInputNumeric['value']): void {\n    // has input value is always render as string we get a stringified value or a '' for nullish value, so we test string type\n    if (typeof newValue === 'string') {\n      // Split number and decimal\n      const [integer, decimal = ''] = newValue.replace('-', '').split(/[\\.,]/);\n      // Regex\n      const regex = this.type === 'integer' ? /^-?\\d+$/ : /^-?\\d+(?:[.,]\\d*)?$/;\n      // Filter input\n      if (this.isValidValue(newValue, regex, integer, decimal)) {\n        this.storedValue = newValue;\n      } else {\n        newValue = this.handleInvalidValue();\n      }\n      // Set value and input value\n      this.updateValues(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: 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 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;\n\n  /**\n   * Add a tooltip message next to the input\n   */\n  @Prop() tooltip: string;\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 numeric type\n   */\n  @Prop() type: string = types[0];\n  @Watch('type')\n  validateType(newValue: MgInputNumeric['type']): void {\n    if (!types.includes(newValue)) {\n      throw new Error(`<mg-input-numeric> prop \"type\" must be one of: ${types.join(', ')}`);\n    }\n  }\n\n  /**\n   * Define currency\n   */\n  @Prop() currency = 'USD';\n\n  /**\n   * Maximum value\n   */\n  @Prop() max: number;\n\n  /**\n   * Minimum value\n   */\n  @Prop() min: number;\n\n  /**\n   * Override integer length\n   * integer is the number before the decimal point\n   */\n  @Prop() integerLength = 13;\n  @Watch('integerLength')\n  validateIntegerLength(newValue: MgInputNumeric['integerLength']): void {\n    if (newValue < 1) {\n      throw new Error(`<mg-input-numeric> prop \"integer-length\" must be a positive number.`);\n    }\n  }\n\n  /**\n   * Override decimal length\n   * decimal is the number after the decimal point\n   */\n  @Prop() decimalLength = 2;\n  @Watch('decimalLength')\n  validateDecimalLength(newValue: MgInputNumeric['decimalLength']): void {\n    if (newValue < 1) {\n      throw new Error(`<mg-input-numeric> prop \"decimal-length\" must be a positive number, consider using prop \"type\" to \"integer\" instead.`);\n    }\n  }\n\n  /**\n   * Define input pattern to validate\n   */\n  @Prop({ mutable: true }) valid: boolean;\n\n  /**\n   * Define input pattern error message\n   */\n  @Prop({ mutable: true }) invalid: boolean;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-input--numeric']);\n\n  /**\n   * Error message to display\n   */\n  @State() errorMessage: string;\n\n  /**\n   * Define if input has focus\n   */\n  @State() hasFocus = false;\n\n  /**\n   * Emited event when value change\n   */\n  @Event({ eventName: 'value-change' }) valueChange: EventEmitter<number>;\n\n  /**\n   * Emited event when checking validity\n   */\n  @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<boolean>;\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: MgInputNumeric['valid'], errorMessage: string): Promise<void> {\n    if (typeof valid !== 'boolean') {\n      throw new Error('<mg-input-numeric> method \"setError()\" param \"valid\" must be a boolean');\n    } else if (typeof errorMessage !== 'string' || errorMessage.trim() === '') {\n      throw new Error('<mg-input-numeric> 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: MgInputNumeric['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   * Checks if the given value is valid according to the defined rules.\n   * @param value - The input value to validate.\n   * @param regex - The regular expression for validation.\n   * @param integer - The integer part of the value.\n   * @param decimal - The decimal part of the value.\n   * @returns Returns true if the value is valid, otherwise false.\n   */\n  private isValidValue(value: string, regex: RegExp, integer: string, decimal: string): boolean {\n    return ['', '-'].includes(value) || (value.match(regex) && integer.length <= this.integerLength && decimal.length <= (this.type === 'integer' ? 0 : this.decimalLength));\n  }\n\n  /**\n   * Handles invalid input values and returns a corrected value.\n   * @returns The corrected value.\n   */\n  private handleInvalidValue(): string | null {\n    return this.storedValue !== undefined ? this.storedValue : null;\n  }\n\n  /**\n   * Updates the component values based on the validated input value.\n   * @param newValue - The validated input value.\n   */\n  private updateValues(newValue: string | null): void {\n    this.value = newValue;\n    if (this.input !== undefined) this.input.value = this.value;\n\n    this.numericValue = !['', null].includes(this.value) ? parseFloat(this.value.replace(',', '.')) : null;\n    this.valueChange.emit(this.numericValue);\n\n    this.readonlyValue = this.numericValue !== null ? this.formatValue(this.numericValue) : '';\n  }\n\n  /**\n   * Displayed value in input\n   * Change on focus/blur\n   * @returns display value\n   */\n  private displayValue(): MgInputNumeric['value'] | MgInputNumeric['readonlyValue'] {\n    return this.hasFocus ? this.value : this.readonlyValue;\n  }\n\n  /**\n   * Handle input event\n   */\n  private handleInput = (): void => {\n    // Check validity\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.hasFocus = true;\n  };\n\n  /**\n   * Handle blur event\n   */\n  private handleBlur = (): void => {\n    if (this.value === '-') this.value = '';\n    // Display Error\n    this.displayError();\n    this.hasFocus = false;\n  };\n\n  /**\n   * Check if input is valid\n   */\n  private checkValidity = (): void => {\n    this.setValidity(this.readonly || this.disabled || this.getInputError() === null);\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    if (!this.valid) {\n      const inputError = this.getInputError();\n      if (errorMessage !== undefined) {\n        this.errorMessage = errorMessage;\n      } else if (inputError === InputError.REQUIRED) {\n        this.errorMessage = this.messages.errors[inputError];\n      } else {\n        this.errorMessage = this.messages.errors.numeric[inputError].replace('{min}', `${this.formatValue(this.min)}`).replace('{max}', `${this.formatValue(this.max)}`);\n      }\n    }\n  };\n\n  /**\n   * Get input error code\n   * @returns error code\n   */\n  private getInputError = (): null | InputError => {\n    let inputError = null;\n    const hasNotEmptyValues = (toControl: unknown[]) => !toControl.some(value => [null, undefined].includes(value));\n\n    if (!hasNotEmptyValues([this.input])) return inputError;\n\n    // required\n    if (!this.input.checkValidity() && this.input.validity.valueMissing) {\n      inputError = InputError.REQUIRED;\n    }\n    // Min & Max\n    else if (hasNotEmptyValues([this.min, this.numericValue]) && this.numericValue < this.min && this.max === undefined) {\n      // Only a min value is set\n      inputError = InputError.MIN;\n    } else if (hasNotEmptyValues([this.max, this.numericValue]) && this.numericValue > this.max && this.min === undefined) {\n      // Only a max value is set\n      inputError = InputError.MAX;\n    } else if (hasNotEmptyValues([this.min, this.max, this.numericValue]) && (this.numericValue < this.min || this.numericValue > this.max)) {\n      // both min and max values are set\n      inputError = InputError.MINMAX;\n    }\n    return inputError;\n  };\n\n  /**\n   * Format value based on type\n   * @param value - value to format\n   * @returns formated local value\n   */\n  private formatValue = (value: number): string => (this.type === 'currency' ? localeCurrency(value, this.locale, this.currency) : localeNumber(value, this.locale));\n\n  /**\n   * Validate append slot\n   */\n  private validateAppendSlot = (): void => {\n    const slotAppendInput: HTMLSlotElement = this.element.querySelector('[slot=\"append-input\"]');\n    if (slotAppendInput !== null) {\n      this.classCollection.add(slotAppendInput.nodeName === 'MG-BUTTON' ? 'mg-input--is-input-group-append' : 'mg-input--is-append-input-slot-content');\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    const locales = initLocales(this.element);\n    this.locale = locales.locale;\n    this.messages = locales.messages;\n    // Validate component config\n    this.validateType(this.type);\n    this.validateIntegerLength(this.integerLength);\n    this.validateDecimalLength(this.decimalLength);\n    // validate value\n    this.validateValue(this.value);\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={[]}\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={this.readonlyValue}\n        tooltip={this.tooltip}\n        helpText={this.helpText}\n        errorMessage={this.errorMessage}\n        isFieldset={false}\n      >\n        <input\n          type=\"text\"\n          class=\"mg-input__box\"\n          value={this.displayValue()}\n          id={this.identifier}\n          name={this.name}\n          placeholder={this.placeholder}\n          title={this.placeholder}\n          disabled={this.disabled}\n          required={this.required}\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        <slot name=\"append-input\"></slot>\n      </MgInput>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,212 @@
+import { createPage } from "../../../../../utils/stencil.e2e.test.utils";
+describe('mg-input-numeric', () => {
+  describe.each([
+    `<mg-input-numeric identifier="identifier" label="label"></mg-input-numeric>`,
+    `<mg-input-numeric identifier="identifier" label="label" label-on-top></mg-input-numeric>`,
+    `<mg-input-numeric identifier="identifier" label="label" label-hide></mg-input-numeric>`,
+    `<mg-input-numeric identifier="identifier" label="label" placeholder="placeholder" help-text="HelpText Message"></mg-input-numeric>`,
+    `<mg-input-numeric identifier="identifier" label="label" type="integer"></mg-input-numeric>`,
+  ])('without tooltip', html => {
+    test('render', async () => {
+      const page = await createPage(html);
+      const element = await page.find('mg-input-numeric');
+      const input = await page.find('mg-input-numeric >>> input');
+      // Hide caret for screenshots
+      await page.$eval('mg-input-numeric', elm => {
+        const input = elm.shadowRoot.querySelector('input');
+        input.style.caretColor = 'transparent';
+      });
+      expect(element).toHaveClass('hydrated');
+      const screenshot = await page.screenshot();
+      expect(screenshot).toMatchImageSnapshot();
+      await page.keyboard.down('Tab');
+      await page.waitForChanges();
+      const screenshotFocus = await page.screenshot();
+      expect(screenshotFocus).toMatchImageSnapshot();
+      await input.press('1');
+      await input.press('2');
+      await input.press('3');
+      await input.press('4');
+      await input.press('5');
+      await input.press(',');
+      await input.press('6');
+      await input.press('7');
+      await page.waitForChanges();
+      const screenshotType = await page.screenshot();
+      expect(screenshotType).toMatchImageSnapshot();
+    });
+  });
+  test.each([true, false])('render with tooltip, case label-on-top %s', async (labelOnTop) => {
+    const page = await createPage(`<mg-input-numeric identifier="identifier" label="label" tooltip="Tooltip message" label-on-top="${labelOnTop}"></mg-input-numeric>`);
+    const element = await page.find('mg-input-numeric');
+    expect(element).toHaveClass('hydrated');
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+    await page.keyboard.down('Tab');
+    if (!labelOnTop) {
+      // Ensure to display tooltip
+      await page.setViewport({ width: 600, height: 65 });
+      // when label on top tooltip is on fist tab (next to label)
+      await page.keyboard.down('Tab');
+    }
+    await page.waitForChanges();
+    const screenshotTooltip = await page.screenshot();
+    expect(screenshotTooltip).toMatchImageSnapshot();
+  });
+  describe.each([
+    `<mg-input-numeric identifier="identifier" label="label" readonly></mg-input-numeric>`,
+    `<mg-input-numeric identifier="identifier" label="label" value="123,45"></mg-input-numeric>`,
+    `<mg-input-numeric identifier="identifier" label="label" value="123,45" readonly></mg-input-numeric>`,
+    `<mg-input-numeric identifier="identifier" label="label" disabled></mg-input-numeric>`,
+    `<mg-input-numeric identifier="identifier" label="label" value="123,45" disabled></mg-input-numeric>`,
+    `<mg-input-numeric identifier="identifier" label="label" value="123,45" lang="fr"></mg-input-numeric>`,
+    `<mg-input-numeric identifier="identifier" label="label" value="123,45" lang="fr" type="currency"></mg-input-numeric>`,
+    `<mg-input-numeric identifier="identifier" label="label" value="123,45" lang="fr" type="currency" currency="EUR"></mg-input-numeric>`,
+    `<mg-input-numeric identifier="identifier" label="label" value="123,45" readonly lang="fr"></mg-input-numeric>`,
+    `<mg-input-numeric identifier="identifier" label="label" value="123,45" readonly lang="fr" type="currency"></mg-input-numeric>`,
+    `<mg-input-numeric identifier="identifier" label="label" value="123,45" readonly lang="fr" type="currency" currency="EUR"></mg-input-numeric>`,
+    `<mg-input-numeric identifier="identifier" label="label" value="123,45" help-text='<mg-icon icon="user" size="small"></mg-icon> Welcome batman'></mg-input-numeric>`,
+    `<mg-input-numeric identifier="identifier" label="label" value="123,45" help-text="HelpText Message" required></mg-input-numeric>`,
+    `<mg-input-numeric identifier="identifier" label="label" value="123,45" help-text="HelpText Message" required readonly></mg-input-numeric>`,
+    `<mg-input-numeric identifier="identifier" label="label" value="123,45" help-text="HelpText Message" required disabled></mg-input-numeric>`,
+  ])('Should render with template', html => {
+    test('render', async () => {
+      const page = await createPage(html);
+      const element = await page.find('mg-input-numeric');
+      expect(element).toHaveClass('hydrated');
+      const screenshot = await page.screenshot();
+      expect(screenshot).toMatchImageSnapshot();
+    });
+  });
+  test('Should render currency symbol', async () => {
+    const page = await createPage(`<mg-input-numeric identifier="identifier" label="label" type="currency"></mg-input-numeric>`);
+    const element = await page.find('mg-input-numeric');
+    const input = await page.find('mg-input-numeric >>> input');
+    expect(element).toHaveClass('hydrated');
+    await page.keyboard.down('Tab');
+    await input.press('1');
+    await input.press('2');
+    await input.press('3');
+    await input.press('4');
+    await input.press('5');
+    await input.press(',');
+    await input.press('6');
+    await input.press('7');
+    await page.keyboard.down('Tab');
+    await page.waitForChanges();
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+  });
+  describe.each([
+    `<mg-input-numeric identifier="identifier" label="label" required></mg-input-numeric>`,
+    `<mg-input-numeric identifier="identifier" label="label" required lang="fr"></mg-input-numeric>`,
+  ])('%s', html => {
+    test('Should render error when leaving an empty required input', async () => {
+      const page = await createPage(html);
+      const element = await page.find('mg-input-numeric');
+      expect(element).toHaveClass('hydrated');
+      await page.keyboard.down('Tab');
+      await page.keyboard.down('Tab');
+      await page.waitForChanges();
+      const screenshot = await page.screenshot();
+      expect(screenshot).toMatchImageSnapshot();
+    });
+  });
+  describe.each([
+    `<mg-input-numeric identifier="identifier" label="label" min="120"></mg-input-numeric>`,
+    `<mg-input-numeric identifier="identifier" label="label" max="100"></mg-input-numeric>`,
+    `<mg-input-numeric identifier="identifier" label="label" min="10" max="100"></mg-input-numeric>`,
+  ])('Should render error when value does not respect min max attributes', html => {
+    test('render', async () => {
+      const page = await createPage(html);
+      const element = await page.find('mg-input-numeric');
+      const input = await page.find('mg-input-numeric >>> input');
+      expect(element).toHaveClass('hydrated');
+      await page.keyboard.down('Tab');
+      await input.press('1');
+      await input.press('1');
+      await input.press('0');
+      await page.keyboard.down('Tab');
+      await page.waitForChanges();
+      const screenshot = await page.screenshot();
+      expect(screenshot).toMatchImageSnapshot();
+    });
+  });
+  test('Should not allow invalid characters', async () => {
+    const page = await createPage(`<mg-input-numeric identifier="identifier" label="label"></mg-input-numeric>`);
+    const element = await page.find('mg-input-numeric');
+    const input = await page.find('mg-input-numeric >>> input');
+    expect(element).toHaveClass('hydrated');
+    await page.keyboard.down('Tab');
+    await input.press('1');
+    await input.press('KeyB'); // Should not be included
+    await input.press('2');
+    await input.press('KeyL'); // Should not be included
+    await input.press('3');
+    await input.press('KeyU'); // Should not be included
+    await input.press('4');
+    await input.press('5');
+    await input.press('6');
+    await input.press('7');
+    await input.press('8');
+    await input.press('9');
+    await input.press('0');
+    await input.press('1');
+    await input.press('2');
+    await input.press('3');
+    await input.press('4'); // Should not be included
+    await input.press(',');
+    await input.press('.'); // Should not be included
+    await input.press('4');
+    await input.press('5');
+    await input.press('6'); // Should not be included
+    const value = await input.getProperty('value');
+    expect(value).toEqual('1234567890123,45');
+  });
+  describe.each([
+    '<mg-input-numeric identifier="identifier" 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"></mg-input-numeric>',
+    '<mg-input-numeric identifier="identifier" 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" label-on-top></mg-input-numeric>',
+  ])('inside a div.mg-form-group', html => {
+    test('render', async () => {
+      const page = await createPage(`<div class="mg-form-group">${html}</div>`);
+      const element = await page.find('mg-input-numeric');
+      expect(element).toHaveClass('hydrated');
+      const screenshot = await page.screenshot();
+      expect(screenshot).toMatchImageSnapshot();
+    });
+  });
+  describe.each([true, false])('using append-input slot, case readonly %s', readonly => {
+    test.each([
+      `<mg-button slot="append-input" label="search">
+        <mg-icon icon="calculator"></mg-icon> Calculate
+      </mg-button>`,
+      '<span slot="append-input">km</span>',
+    ])('render', async (slot) => {
+      const page = await createPage(`
+        <mg-input-numeric identifier="identifier" label="label" readonly="${readonly}" value="1">
+          ${slot}
+        </mg-input-numeric>
+      `);
+      const screenshot = await page.screenshot();
+      expect(screenshot).toMatchImageSnapshot();
+    });
+  });
+  describe.each(['full', 16, 4, 2])('with custom width: %s', width => {
+    test.each([false, true])('with label on top: %s', async (labelOnTop) => {
+      const page = await createPage(`<mg-input-numeric identifier="identifier" label="label" mg-width="${width}" label-on-top="${labelOnTop}"></mg-input-numeric>`);
+      const element = await page.find('mg-input-numeric');
+      expect(element).toHaveClass('hydrated');
+      const screenshot = await page.screenshot();
+      expect(screenshot).toMatchImageSnapshot();
+    });
+  });
+  test.each([false, true])('Ensure component fit in width 150px with label-on-top: %s', async (labelOnTop) => {
+    const page = await createPage(`<mg-input-numeric identifier="identifier" label="label" label-on-top="${labelOnTop}"></mg-input-numeric>`);
+    const element = await page.find('mg-input-numeric');
+    expect(element).toHaveClass('hydrated');
+    await page.setViewport({ width: 150, height: 100 });
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+  });
+});
+//# sourceMappingURL=mg-input-numeric.e2e.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-input-numeric.e2e.js","sourceRoot":"","sources":["../../../../../../src/components/molecules/inputs/mg-input-numeric/test/mg-input-numeric.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { createPage } from '../../../../../utils/stencil.e2e.test.utils';\n\ndescribe('mg-input-numeric', () => {\n  describe.each([\n    `<mg-input-numeric identifier=\"identifier\" label=\"label\"></mg-input-numeric>`,\n    `<mg-input-numeric identifier=\"identifier\" label=\"label\" label-on-top></mg-input-numeric>`,\n    `<mg-input-numeric identifier=\"identifier\" label=\"label\" label-hide></mg-input-numeric>`,\n    `<mg-input-numeric identifier=\"identifier\" label=\"label\" placeholder=\"placeholder\" help-text=\"HelpText Message\"></mg-input-numeric>`,\n    `<mg-input-numeric identifier=\"identifier\" label=\"label\" type=\"integer\"></mg-input-numeric>`,\n  ])('without tooltip', html => {\n    test('render', async () => {\n      const page = await createPage(html);\n\n      const element = await page.find('mg-input-numeric');\n      const input = await page.find('mg-input-numeric >>> input');\n\n      // Hide caret for screenshots\n      await page.$eval('mg-input-numeric', elm => {\n        const input = elm.shadowRoot.querySelector('input');\n        input.style.caretColor = 'transparent';\n      });\n\n      expect(element).toHaveClass('hydrated');\n\n      const screenshot = await page.screenshot();\n      expect(screenshot).toMatchImageSnapshot();\n\n      await page.keyboard.down('Tab');\n\n      await page.waitForChanges();\n\n      const screenshotFocus = await page.screenshot();\n      expect(screenshotFocus).toMatchImageSnapshot();\n\n      await input.press('1');\n      await input.press('2');\n      await input.press('3');\n      await input.press('4');\n      await input.press('5');\n      await input.press(',');\n      await input.press('6');\n      await input.press('7');\n\n      await page.waitForChanges();\n\n      const screenshotType = await page.screenshot();\n      expect(screenshotType).toMatchImageSnapshot();\n    });\n  });\n\n  test.each([true, false])('render with tooltip, case label-on-top %s', async labelOnTop => {\n    const page = await createPage(`<mg-input-numeric identifier=\"identifier\" label=\"label\" tooltip=\"Tooltip message\" label-on-top=\"${labelOnTop}\"></mg-input-numeric>`);\n\n    const element = await page.find('mg-input-numeric');\n\n    expect(element).toHaveClass('hydrated');\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n\n    await page.keyboard.down('Tab');\n\n    if (!labelOnTop) {\n      // Ensure to display tooltip\n      await page.setViewport({ width: 600, height: 65 });\n      // when label on top tooltip is on fist tab (next to label)\n      await page.keyboard.down('Tab');\n    }\n\n    await page.waitForChanges();\n\n    const screenshotTooltip = await page.screenshot();\n    expect(screenshotTooltip).toMatchImageSnapshot();\n  });\n\n  describe.each([\n    `<mg-input-numeric identifier=\"identifier\" label=\"label\" readonly></mg-input-numeric>`,\n    `<mg-input-numeric identifier=\"identifier\" label=\"label\" value=\"123,45\"></mg-input-numeric>`,\n    `<mg-input-numeric identifier=\"identifier\" label=\"label\" value=\"123,45\" readonly></mg-input-numeric>`,\n    `<mg-input-numeric identifier=\"identifier\" label=\"label\" disabled></mg-input-numeric>`,\n    `<mg-input-numeric identifier=\"identifier\" label=\"label\" value=\"123,45\" disabled></mg-input-numeric>`,\n    `<mg-input-numeric identifier=\"identifier\" label=\"label\" value=\"123,45\" lang=\"fr\"></mg-input-numeric>`,\n    `<mg-input-numeric identifier=\"identifier\" label=\"label\" value=\"123,45\" lang=\"fr\" type=\"currency\"></mg-input-numeric>`,\n    `<mg-input-numeric identifier=\"identifier\" label=\"label\" value=\"123,45\" lang=\"fr\" type=\"currency\" currency=\"EUR\"></mg-input-numeric>`,\n    `<mg-input-numeric identifier=\"identifier\" label=\"label\" value=\"123,45\" readonly lang=\"fr\"></mg-input-numeric>`,\n    `<mg-input-numeric identifier=\"identifier\" label=\"label\" value=\"123,45\" readonly lang=\"fr\" type=\"currency\"></mg-input-numeric>`,\n    `<mg-input-numeric identifier=\"identifier\" label=\"label\" value=\"123,45\" readonly lang=\"fr\" type=\"currency\" currency=\"EUR\"></mg-input-numeric>`,\n    `<mg-input-numeric identifier=\"identifier\" label=\"label\" value=\"123,45\" help-text='<mg-icon icon=\"user\" size=\"small\"></mg-icon> Welcome batman'></mg-input-numeric>`,\n    `<mg-input-numeric identifier=\"identifier\" label=\"label\" value=\"123,45\" help-text=\"HelpText Message\" required></mg-input-numeric>`,\n    `<mg-input-numeric identifier=\"identifier\" label=\"label\" value=\"123,45\" help-text=\"HelpText Message\" required readonly></mg-input-numeric>`,\n    `<mg-input-numeric identifier=\"identifier\" label=\"label\" value=\"123,45\" help-text=\"HelpText Message\" required disabled></mg-input-numeric>`,\n  ])('Should render with template', html => {\n    test('render', async () => {\n      const page = await createPage(html);\n\n      const element = await page.find('mg-input-numeric');\n\n      expect(element).toHaveClass('hydrated');\n\n      const screenshot = await page.screenshot();\n      expect(screenshot).toMatchImageSnapshot();\n    });\n  });\n\n  test('Should render currency symbol', async () => {\n    const page = await createPage(`<mg-input-numeric identifier=\"identifier\" label=\"label\" type=\"currency\"></mg-input-numeric>`);\n\n    const element = await page.find('mg-input-numeric');\n    const input = await page.find('mg-input-numeric >>> input');\n\n    expect(element).toHaveClass('hydrated');\n\n    await page.keyboard.down('Tab');\n\n    await input.press('1');\n    await input.press('2');\n    await input.press('3');\n    await input.press('4');\n    await input.press('5');\n    await input.press(',');\n    await input.press('6');\n    await input.press('7');\n\n    await page.keyboard.down('Tab');\n\n    await page.waitForChanges();\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n  });\n\n  describe.each([\n    `<mg-input-numeric identifier=\"identifier\" label=\"label\" required></mg-input-numeric>`,\n    `<mg-input-numeric identifier=\"identifier\" label=\"label\" required lang=\"fr\"></mg-input-numeric>`,\n  ])('%s', html => {\n    test('Should render error when leaving an empty required input', async () => {\n      const page = await createPage(html);\n\n      const element = await page.find('mg-input-numeric');\n\n      expect(element).toHaveClass('hydrated');\n\n      await page.keyboard.down('Tab');\n      await page.keyboard.down('Tab');\n\n      await page.waitForChanges();\n\n      const screenshot = await page.screenshot();\n      expect(screenshot).toMatchImageSnapshot();\n    });\n  });\n\n  describe.each([\n    `<mg-input-numeric identifier=\"identifier\" label=\"label\" min=\"120\"></mg-input-numeric>`,\n    `<mg-input-numeric identifier=\"identifier\" label=\"label\" max=\"100\"></mg-input-numeric>`,\n    `<mg-input-numeric identifier=\"identifier\" label=\"label\" min=\"10\" max=\"100\"></mg-input-numeric>`,\n  ])('Should render error when value does not respect min max attributes', html => {\n    test('render', async () => {\n      const page = await createPage(html);\n\n      const element = await page.find('mg-input-numeric');\n      const input = await page.find('mg-input-numeric >>> input');\n\n      expect(element).toHaveClass('hydrated');\n\n      await page.keyboard.down('Tab');\n\n      await input.press('1');\n      await input.press('1');\n      await input.press('0');\n\n      await page.keyboard.down('Tab');\n\n      await page.waitForChanges();\n\n      const screenshot = await page.screenshot();\n      expect(screenshot).toMatchImageSnapshot();\n    });\n  });\n\n  test('Should not allow invalid characters', async () => {\n    const page = await createPage(`<mg-input-numeric identifier=\"identifier\" label=\"label\"></mg-input-numeric>`);\n\n    const element = await page.find('mg-input-numeric');\n    const input = await page.find('mg-input-numeric >>> input');\n\n    expect(element).toHaveClass('hydrated');\n\n    await page.keyboard.down('Tab');\n\n    await input.press('1');\n    await input.press('KeyB'); // Should not be included\n    await input.press('2');\n    await input.press('KeyL'); // Should not be included\n    await input.press('3');\n    await input.press('KeyU'); // Should not be included\n    await input.press('4');\n    await input.press('5');\n    await input.press('6');\n    await input.press('7');\n    await input.press('8');\n    await input.press('9');\n    await input.press('0');\n    await input.press('1');\n    await input.press('2');\n    await input.press('3');\n    await input.press('4'); // Should not be included\n    await input.press(',');\n    await input.press('.'); // Should not be included\n    await input.press('4');\n    await input.press('5');\n    await input.press('6'); // Should not be included\n\n    const value = await input.getProperty('value');\n    expect(value).toEqual('1234567890123,45');\n  });\n\n  describe.each([\n    '<mg-input-numeric identifier=\"identifier\" 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\"></mg-input-numeric>',\n    '<mg-input-numeric identifier=\"identifier\" 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\" label-on-top></mg-input-numeric>',\n  ])('inside a div.mg-form-group', html => {\n    test('render', async () => {\n      const page = await createPage(`<div class=\"mg-form-group\">${html}</div>`);\n\n      const element = await page.find('mg-input-numeric');\n\n      expect(element).toHaveClass('hydrated');\n\n      const screenshot = await page.screenshot();\n      expect(screenshot).toMatchImageSnapshot();\n    });\n  });\n\n  describe.each([true, false])('using append-input slot, case readonly %s', readonly => {\n    test.each([\n      `<mg-button slot=\"append-input\" label=\"search\">\n        <mg-icon icon=\"calculator\"></mg-icon> Calculate\n      </mg-button>`,\n      '<span slot=\"append-input\">km</span>',\n    ])('render', async slot => {\n      const page = await createPage(`\n        <mg-input-numeric identifier=\"identifier\" label=\"label\" readonly=\"${readonly}\" value=\"1\">\n          ${slot}\n        </mg-input-numeric>\n      `);\n\n      const screenshot = await page.screenshot();\n      expect(screenshot).toMatchImageSnapshot();\n    });\n  });\n\n  describe.each(['full', 16, 4, 2])('with custom width: %s', width => {\n    test.each([false, true])('with label on top: %s', async labelOnTop => {\n      const page = await createPage(`<mg-input-numeric identifier=\"identifier\" label=\"label\" mg-width=\"${width}\" label-on-top=\"${labelOnTop}\"></mg-input-numeric>`);\n\n      const element = await page.find('mg-input-numeric');\n\n      expect(element).toHaveClass('hydrated');\n\n      const screenshot = await page.screenshot();\n      expect(screenshot).toMatchImageSnapshot();\n    });\n  });\n\n  test.each([false, true])('Ensure component fit in width 150px with label-on-top: %s', async labelOnTop => {\n    const page = await createPage(`<mg-input-numeric identifier=\"identifier\" label=\"label\" label-on-top=\"${labelOnTop}\"></mg-input-numeric>`);\n\n    const element = await page.find('mg-input-numeric');\n\n    expect(element).toHaveClass('hydrated');\n\n    await page.setViewport({ width: 150, height: 100 });\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n  });\n});\n"]}