@mgdis/mg-components 5.26.0 → 5.27.0

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

@@ -1,9 +1,8 @@
 import { h } from "@stencil/core";
-import { MgInput } from "../MgInput";
-import { InputError } from "./mg-input-date.conf";
 import { ClassList, isValidString, localeDate, dateRegExp, dateToString, getLocaleDatePattern } from "@mgdis/stencil-helpers";
+import { InputError } from "./mg-input-date.conf";
+import { Handler, classReadonly, classDisabled } from "../mg-input/mg-input.conf";
 import { initLocales } from "../../../../locales";
-import { Handler } from "../MgInput.conf";
 export class MgInputDate {
     constructor() {
         // hasDisplayedError (triggered by blur event)
@@ -44,8 +43,7 @@ export class MgInputDate {
          * Check if input is valid
          */
         this.checkValidity = () => {
-            var _a;
-            this.setValidity(this.readonly || this.disabled || (((_a = this.input) === null || _a === void 0 ? void 0 : _a.checkValidity) !== undefined ? this.input.checkValidity() : true));
+            this.setValidity(this.readonly || this.disabled || this.input.checkValidity());
         };
         /**
          * get input error code
@@ -142,6 +140,12 @@ export class MgInputDate {
             this.valueChange.emit(newValue);
         }
     }
+    watchReadonly(newValue) {
+        if (newValue)
+            this.classCollection.add(classReadonly);
+        else
+            this.classCollection.delete(classReadonly);
+    }
     validateMinMax(newValue) {
         if ((newValue === null || newValue === void 0 ? void 0 : newValue.length) === 0 || ((newValue === null || newValue === void 0 ? void 0 : newValue.length) > 0 && !(typeof newValue === 'string' && dateRegExp.test(newValue)))) {
             throw new Error("<mg-input-date> props 'min/max' doesn't match pattern: yyyy-mm-dd");
@@ -157,6 +161,12 @@ export class MgInputDate {
             }
         }
     }
+    watchDisabled(newValue) {
+        if (newValue)
+            this.classCollection.add(classDisabled);
+        else
+            this.classCollection.delete(classDisabled);
+    }
     /**
      * Display input error if it exists.
      */
@@ -217,6 +227,8 @@ export class MgInputDate {
         this.validateValue(this.value);
         this.validateMinMax(this.min);
         this.validateMinMax(this.max);
+        this.watchReadonly(this.readonly);
+        this.watchDisabled(this.disabled);
         // Check validity when component is ready
         // return a promise to process action only in the FIRST render().
         // https://stenciljs.com/docs/component-lifecycle#componentwillload
@@ -229,7 +241,7 @@ export class MgInputDate {
      * @returns HTML Element
      */
     render() {
-        return (h(MgInput, { key: 'd6e63d2f60d8c1b977181b35ad1c5393ebbf9f2d', identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: undefined, disabled: this.disabled, value: this.value, readonlyValue: localeDate(this.value, this.locale), tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage, isFieldset: false }, h("input", { key: 'd94cfb21684af81db4dc3fc3ba1cc1fdfdaa2793', type: "date", class: "mg-c-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
+        return (h("mg-input", { key: 'b5eea353e13d76c1fe9569b3c237bf7e787774fe', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonlyValue: localeDate(this.value, this.locale), tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, h("input", { key: '6e75312c774aadde75dc6dbd197b7224d08fd7ba', type: "date", class: "mg-c-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
                 if (el !== null)
                     this.input = el;
             } })));
@@ -326,7 +338,7 @@ export class MgInputDate {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Define if label is displayed on top"
@@ -397,7 +409,7 @@ export class MgInputDate {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Define input minimum date\nformat: yyyy-mm-dd"
@@ -414,7 +426,7 @@ export class MgInputDate {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Define input maximum date\nformat: yyyy-mm-dd"
@@ -449,7 +461,7 @@ export class MgInputDate {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Add a tooltip message next to the input"
@@ -466,8 +478,8 @@ export class MgInputDate {
                     "references": {
                         "TooltipPosition": {
                             "location": "import",
-                            "path": "../MgInput.conf",
-                            "id": "src/components/molecules/inputs/MgInput.conf.ts::TooltipPosition"
+                            "path": "../mg-input/mg-input.conf",
+                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::TooltipPosition"
                         }
                     }
                 },
@@ -490,7 +502,7 @@ export class MgInputDate {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Add a help text under the input, usually expected data format and example\nAvailable string variables:\n - `{pattern}`: render innerHTML pattern based on system\n - `{date}`: render innerText date with a pattern base format.\n - `{defaultHelpText}`: render default `helpText` usefull to concat helpText local with your custom text.\nex: `Input use {pattern} pattern` as `helpText` prop value will be render as `Input use mm/dd/yyyy pattern`"
@@ -644,6 +656,9 @@ export class MgInputDate {
         return [{
                 "propName": "value",
                 "methodName": "validateValue"
+            }, {
+                "propName": "readonly",
+                "methodName": "watchReadonly"
             }, {
                 "propName": "min",
                 "methodName": "validateMinMax"
@@ -665,6 +680,9 @@ export class MgInputDate {
             }, {
                 "propName": "max",
                 "methodName": "handleValidityChange"
+            }, {
+                "propName": "disabled",
+                "methodName": "watchDisabled"
             }];
     }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"mg-input-date.js","sourceRoot":"","sources":["../../../../../src/components/molecules/inputs/mg-input-date/mg-input-date.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Prop, State, Watch, Method } from '@stencil/core';\nimport { MgInput } from '../MgInput';\nimport { InputError } from './mg-input-date.conf';\nimport { ClassList, isValidString, localeDate, dateRegExp, dateToString, getLocaleDatePattern } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../../locales';\nimport { Handler, type TooltipPosition } from '../MgInput.conf';\n\n@Component({\n  tag: 'mg-input-date',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-date.css',\n  shadow: true,\n})\nexport class MgInputDate {\n  /************\n   * Internal *\n   ************/\n\n  // HTML selector\n  private input: HTMLInputElement;\n\n  // Locales\n  private messages;\n  private locale: string;\n  private systemLocale: string;\n\n  // hasDisplayedError (triggered by blur event)\n  private hasDisplayedError = false;\n  private handlerInProgress: Handler;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgInputDateElement;\n\n  /**\n   * Component value\n   */\n  @Prop({ mutable: true, reflect: true }) value: string;\n  @Watch('value')\n  validateValue(newValue: MgInputDate['value']): void {\n    // When the input is not fully completed or has been cleared, the value becomes an empty string.\n    if (newValue === '') newValue = null;\n    if (newValue !== undefined && newValue !== null && (typeof newValue !== 'string' || !dateRegExp.test(newValue))) {\n      throw new Error(\"<mg-input-date> props 'value' doesn't match pattern: yyyy-mm-dd\");\n    } else {\n      this.valueChange.emit(newValue);\n    }\n  }\n\n  /**\n   * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n   */\n  @Prop() identifier!: string;\n\n  /**\n   * Input name\n   * If not set the value equals the identifier\n   */\n  @Prop() name: string = this.identifier;\n\n  /**\n   * Input label\n   */\n  @Prop() label!: string;\n\n  /**\n   * Define if label is displayed on top\n   */\n  @Prop() labelOnTop: boolean;\n\n  /**\n   * Define if label is visible\n   */\n  @Prop() labelHide = false;\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 input minimum date\n   * format: yyyy-mm-dd\n   */\n  @Prop() min: string;\n\n  /**\n   * Define input maximum date\n   * format: yyyy-mm-dd\n   */\n  @Prop() max: string;\n  @Watch('min')\n  @Watch('max')\n  validateMinMax(newValue: string): void {\n    if (newValue?.length === 0 || (newValue?.length > 0 && !(typeof newValue === 'string' && dateRegExp.test(newValue)))) {\n      throw new Error(\"<mg-input-date> props 'min/max' doesn't match pattern: yyyy-mm-dd\");\n    }\n  }\n\n  /**\n   * Define if input is disabled\n   */\n  @Prop() disabled = false;\n  @Watch('required')\n  @Watch('readonly')\n  @Watch('disabled')\n  @Watch('min')\n  @Watch('max')\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   * Add a tooltip message next to the input\n   */\n  @Prop() tooltip: string;\n\n  /**\n   * Define tooltip position\n   */\n  @Prop() tooltipPosition: TooltipPosition = 'input';\n\n  /**\n   * Add a help text under the input, usually expected data format and example\n   * Available string variables:\n   *  - `{pattern}`: render innerHTML pattern based on system\n   *  - `{date}`: render innerText date with a pattern base format.\n   *  - `{defaultHelpText}`: render default `helpText` usefull to concat helpText local with your custom text.\n   * ex: `Input use {pattern} pattern` as `helpText` prop value will be render as `Input use mm/dd/yyyy pattern`\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--date']);\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<HTMLMgInputDateElement['value']>;\n\n  /**\n   * Emited event when checking validity\n   */\n  @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<HTMLMgInputDateElement['valid']>;\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: MgInputDate['valid'], errorMessage: string): Promise<void> {\n    if (typeof valid !== 'boolean') {\n      throw new Error('<mg-input-date> method \"setError()\" param \"valid\" must be a boolean');\n    } else if (!isValidString(errorMessage)) {\n      throw new Error('<mg-input-date> 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   * Format help text to display\n   * @param helpText - help text format\n   * @returns formated pattern help text. Ex: Format attendu : jj/mm/aaaa (ex : 20/12/2020)\n   */\n  private formatHelpText = (helpText: string): string => {\n    const defaultHelpTextVariable = '{defaultHelpText}';\n    let text = isValidString(helpText) ? helpText : this.messages.input.date.helpText;\n    if (text.includes(defaultHelpTextVariable)) text = text.replace(defaultHelpTextVariable, this.formatHelpText(this.messages.input.date.helpText));\n\n    return text.replace('{pattern}', this.renderPattern()).replace('{date}', localeDate(dateToString(new Date('2023-12-24')), this.systemLocale));\n  };\n\n  /**\n   * Method to set validity values\n   * @param newValue - valid new value\n   */\n  private setValidity(newValue: MgInputDate['valid']) {\n    const oldValidValue = this.valid;\n    this.valid = newValue;\n    this.invalid = !this.valid;\n    // We need to send valid event even if it is the same value\n    if (this.handlerInProgress === undefined || (this.handlerInProgress === Handler.BLUR && this.valid !== oldValidValue)) this.inputValid.emit(this.valid);\n  }\n\n  /**\n   * Handle input event\n   */\n  private handleInput = (): void => {\n    this.checkValidity();\n    if (this.hasDisplayedError) {\n      this.setErrorMessage();\n    }\n    this.value = this.input.value;\n  };\n\n  /**\n   * Handle blur event\n   */\n  private handleBlur = (): void => {\n    this.handlerInProgress = Handler.BLUR;\n    this.displayError().finally(() => {\n      // reset guard\n      this.handlerInProgress = undefined;\n    });\n  };\n\n  /**\n   * Check if input is valid\n   */\n  private checkValidity = (): void => {\n    this.setValidity(this.readonly || this.disabled || (this.input?.checkValidity !== undefined ? this.input.checkValidity() : true));\n  };\n\n  /**\n   * get input error code\n   * @returns error code\n   */\n  private getInputError = (): null | InputError => {\n    let inputError = null;\n\n    // required\n    if (this.input.validity.valueMissing) {\n      inputError = InputError.REQUIRED;\n    }\n    // min & max\n    else if ((this.input.validity.rangeUnderflow || this.input.validity.rangeOverflow) && this.min?.length > 0 && this.max?.length > 0) {\n      inputError = InputError.MINMAX;\n    }\n    // min\n    else if (this.input.validity.rangeUnderflow) {\n      inputError = InputError.MIN;\n    }\n    //max\n    else if (this.input.validity.rangeOverflow) {\n      inputError = InputError.MAX;\n    }\n\n    return inputError;\n  };\n\n  /**\n   * Check input errors\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      }\n      // required\n      else if (inputError === InputError.REQUIRED) {\n        this.errorMessage = this.messages.errors[inputError];\n      }\n      // min, max & minMax\n      else if ([InputError.MIN, InputError.MAX, InputError.MINMAX].includes(inputError)) {\n        this.errorMessage = this.messages.errors.date[inputError]\n          .replace('{min}', localeDate(this.min, this.systemLocale))\n          .replace('{max}', localeDate(this.max, this.systemLocale));\n      }\n      // wrong date format\n      // element.validity.badInput is default error message\n      else {\n        this.errorMessage = this.messages.errors.date.badInput.replace('{pattern}', this.renderPattern());\n      }\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\n    // as a native input use the OS locale to define the date pattern\n    // we need to get this locale to define the displayed pattern\n    this.systemLocale = Intl.DateTimeFormat().resolvedOptions().locale;\n\n    // Validate\n    this.validateValue(this.value);\n    this.validateMinMax(this.min);\n    this.validateMinMax(this.max);\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 pattern\n   * @returns translated html pattern\n   */\n  private renderPattern = (): string => {\n    let patternLocal = getLocaleDatePattern(this.systemLocale);\n    for (const key in this.messages.input.date.pattern) {\n      patternLocal = patternLocal.replace(key, this.messages.input.date.pattern[key]);\n    }\n\n    return `<span aria-hidden=\"true\">${patternLocal}</span><span class=\"mg-u-visually-hidden\">${[...patternLocal].join(' ')}</span>`;\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={undefined}\n        disabled={this.disabled}\n        value={this.value}\n        readonlyValue={localeDate(this.value, this.locale)}\n        tooltip={this.tooltip}\n        tooltipPosition={this.tooltipPosition}\n        helpText={this.formatHelpText(this.helpText)}\n        errorMessage={this.errorMessage}\n        isFieldset={false}\n      >\n        <input\n          type=\"date\"\n          class=\"mg-c-input__box\"\n          min={this.min}\n          max={this.max}\n          value={this.value}\n          id={this.identifier}\n          name={this.name}\n          disabled={this.disabled}\n          required={this.required}\n          aria-invalid={(this.invalid === true).toString()}\n          onInput={this.handleInput}\n          onBlur={this.handleBlur}\n          ref={(el: HTMLInputElement) => {\n            if (el !== null) this.input = el;\n          }}\n        />\n      </MgInput>\n    );\n  }\n}\n"]}
+{"version":3,"file":"mg-input-date.js","sourceRoot":"","sources":["../../../../../src/components/molecules/inputs/mg-input-date/mg-input-date.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Prop, State, Watch, Method } from '@stencil/core';\nimport { ClassList, isValidString, localeDate, dateRegExp, dateToString, getLocaleDatePattern } from '@mgdis/stencil-helpers';\nimport { InputError } from './mg-input-date.conf';\nimport { Handler, classReadonly, type TooltipPosition, classDisabled } from '../mg-input/mg-input.conf';\nimport { initLocales } from '../../../../locales';\n\n@Component({\n  tag: 'mg-input-date',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-date.css',\n  shadow: true,\n})\nexport class MgInputDate {\n  /************\n   * Internal *\n   ************/\n\n  // HTML selector\n  private input: HTMLInputElement;\n\n  // Locales\n  private messages;\n  private locale: string;\n  private systemLocale: string;\n\n  // hasDisplayedError (triggered by blur event)\n  private hasDisplayedError = false;\n  private handlerInProgress: Handler;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgInputDateElement;\n\n  /**\n   * Component value\n   */\n  @Prop({ mutable: true, reflect: true }) value: string;\n  @Watch('value')\n  validateValue(newValue: MgInputDate['value']): void {\n    // When the input is not fully completed or has been cleared, the value becomes an empty string.\n    if (newValue === '') newValue = null;\n    if (newValue !== undefined && newValue !== null && (typeof newValue !== 'string' || !dateRegExp.test(newValue))) {\n      throw new Error(\"<mg-input-date> props 'value' doesn't match pattern: yyyy-mm-dd\");\n    } else {\n      this.valueChange.emit(newValue);\n    }\n  }\n\n  /**\n   * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n   */\n  @Prop() identifier!: string;\n\n  /**\n   * Input name\n   * If not set the value equals the identifier\n   */\n  @Prop() name: string = this.identifier;\n\n  /**\n   * Input label\n   */\n  @Prop() label!: string;\n\n  /**\n   * Define if label is displayed on top\n   */\n  @Prop() labelOnTop?: boolean;\n\n  /**\n   * Define if label is visible\n   */\n  @Prop() labelHide = false;\n\n  /**\n   * Define if input is required\n   */\n  @Prop() required = false;\n\n  /**\n   * Define if input is readonly\n   */\n  @Prop() readonly = false;\n  @Watch('readonly')\n  watchReadonly(newValue: MgInputDate['readonly']): void {\n    if (newValue) this.classCollection.add(classReadonly);\n    else this.classCollection.delete(classReadonly);\n  }\n\n  /**\n   * Define input minimum date\n   * format: yyyy-mm-dd\n   */\n  @Prop() min?: string;\n\n  /**\n   * Define input maximum date\n   * format: yyyy-mm-dd\n   */\n  @Prop() max?: string;\n  @Watch('min')\n  @Watch('max')\n  validateMinMax(newValue: string): void {\n    if (newValue?.length === 0 || (newValue?.length > 0 && !(typeof newValue === 'string' && dateRegExp.test(newValue)))) {\n      throw new Error(\"<mg-input-date> props 'min/max' doesn't match pattern: yyyy-mm-dd\");\n    }\n  }\n\n  /**\n   * Define if input is disabled\n   */\n  @Prop() disabled = false;\n  @Watch('required')\n  @Watch('readonly')\n  @Watch('disabled')\n  @Watch('min')\n  @Watch('max')\n  handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void {\n    if (this.input !== undefined) {\n      this.input[prop] = newValue;\n      this.checkValidity();\n      if (this.hasDisplayedError) {\n        this.setErrorMessage();\n        this.hasDisplayedError = false;\n      }\n    }\n  }\n\n  @Watch('disabled')\n  watchDisabled(newValue: MgInputDate['disabled']): void {\n    if (newValue) this.classCollection.add(classDisabled);\n    else this.classCollection.delete(classDisabled);\n  }\n\n  /**\n   * Add a tooltip message next to the input\n   */\n  @Prop() tooltip?: string;\n\n  /**\n   * Define tooltip position\n   */\n  @Prop() tooltipPosition: TooltipPosition = 'input';\n\n  /**\n   * Add a help text under the input, usually expected data format and example\n   * Available string variables:\n   *  - `{pattern}`: render innerHTML pattern based on system\n   *  - `{date}`: render innerText date with a pattern base format.\n   *  - `{defaultHelpText}`: render default `helpText` usefull to concat helpText local with your custom text.\n   * ex: `Input use {pattern} pattern` as `helpText` prop value will be render as `Input use mm/dd/yyyy pattern`\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--date']);\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<HTMLMgInputDateElement['value']>;\n\n  /**\n   * Emited event when checking validity\n   */\n  @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<HTMLMgInputDateElement['valid']>;\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: MgInputDate['valid'], errorMessage: string): Promise<void> {\n    if (typeof valid !== 'boolean') {\n      throw new Error('<mg-input-date> method \"setError()\" param \"valid\" must be a boolean');\n    } else if (!isValidString(errorMessage)) {\n      throw new Error('<mg-input-date> 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   * Format help text to display\n   * @param helpText - help text format\n   * @returns formated pattern help text. Ex: Format attendu : jj/mm/aaaa (ex : 20/12/2020)\n   */\n  private formatHelpText = (helpText: string): string => {\n    const defaultHelpTextVariable = '{defaultHelpText}';\n    let text = isValidString(helpText) ? helpText : this.messages.input.date.helpText;\n    if (text.includes(defaultHelpTextVariable)) text = text.replace(defaultHelpTextVariable, this.formatHelpText(this.messages.input.date.helpText));\n\n    return text.replace('{pattern}', this.renderPattern()).replace('{date}', localeDate(dateToString(new Date('2023-12-24')), this.systemLocale));\n  };\n\n  /**\n   * Method to set validity values\n   * @param newValue - valid new value\n   */\n  private setValidity(newValue: MgInputDate['valid']) {\n    const oldValidValue = this.valid;\n    this.valid = newValue;\n    this.invalid = !this.valid;\n    // We need to send valid event even if it is the same value\n    if (this.handlerInProgress === undefined || (this.handlerInProgress === Handler.BLUR && this.valid !== oldValidValue)) this.inputValid.emit(this.valid);\n  }\n\n  /**\n   * Handle input event\n   */\n  private handleInput = (): void => {\n    this.checkValidity();\n    if (this.hasDisplayedError) {\n      this.setErrorMessage();\n    }\n    this.value = this.input.value;\n  };\n\n  /**\n   * Handle blur event\n   */\n  private handleBlur = (): void => {\n    this.handlerInProgress = Handler.BLUR;\n    this.displayError().finally(() => {\n      // reset guard\n      this.handlerInProgress = undefined;\n    });\n  };\n\n  /**\n   * Check if input is valid\n   */\n  private checkValidity = (): void => {\n    this.setValidity(this.readonly || this.disabled || this.input.checkValidity());\n  };\n\n  /**\n   * get input error code\n   * @returns error code\n   */\n  private getInputError = (): null | InputError => {\n    let inputError = null;\n\n    // required\n    if (this.input.validity.valueMissing) {\n      inputError = InputError.REQUIRED;\n    }\n    // min & max\n    else if ((this.input.validity.rangeUnderflow || this.input.validity.rangeOverflow) && this.min?.length > 0 && this.max?.length > 0) {\n      inputError = InputError.MINMAX;\n    }\n    // min\n    else if (this.input.validity.rangeUnderflow) {\n      inputError = InputError.MIN;\n    }\n    //max\n    else if (this.input.validity.rangeOverflow) {\n      inputError = InputError.MAX;\n    }\n\n    return inputError;\n  };\n\n  /**\n   * Check input errors\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      }\n      // required\n      else if (inputError === InputError.REQUIRED) {\n        this.errorMessage = this.messages.errors[inputError];\n      }\n      // min, max & minMax\n      else if ([InputError.MIN, InputError.MAX, InputError.MINMAX].includes(inputError)) {\n        this.errorMessage = this.messages.errors.date[inputError]\n          .replace('{min}', localeDate(this.min, this.systemLocale))\n          .replace('{max}', localeDate(this.max, this.systemLocale));\n      }\n      // wrong date format\n      // element.validity.badInput is default error message\n      else {\n        this.errorMessage = this.messages.errors.date.badInput.replace('{pattern}', this.renderPattern());\n      }\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\n    // as a native input use the OS locale to define the date pattern\n    // we need to get this locale to define the displayed pattern\n    this.systemLocale = Intl.DateTimeFormat().resolvedOptions().locale;\n\n    // Validate\n    this.validateValue(this.value);\n    this.validateMinMax(this.min);\n    this.validateMinMax(this.max);\n    this.watchReadonly(this.readonly);\n    this.watchDisabled(this.disabled);\n    // Check validity when component is ready\n    // return a promise to process action only in the FIRST render().\n    // https://stenciljs.com/docs/component-lifecycle#componentwillload\n    return setTimeout(() => {\n      this.checkValidity();\n    }, 0);\n  }\n\n  /**\n   * Render pattern\n   * @returns translated html pattern\n   */\n  private renderPattern = (): string => {\n    let patternLocal = getLocaleDatePattern(this.systemLocale);\n    for (const key in this.messages.input.date.pattern) {\n      patternLocal = patternLocal.replace(key, this.messages.input.date.pattern[key]);\n    }\n\n    return `<span aria-hidden=\"true\">${patternLocal}</span><span class=\"mg-u-visually-hidden\">${[...patternLocal].join(' ')}</span>`;\n  };\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <mg-input\n        label={this.label}\n        identifier={this.identifier}\n        class={this.classCollection.join()}\n        ariaDescribedbyIDs={[]}\n        labelOnTop={this.labelOnTop}\n        labelHide={this.labelHide}\n        required={this.required}\n        readonlyValue={localeDate(this.value, this.locale)}\n        tooltip={this.tooltip}\n        tooltipPosition={this.tooltipPosition}\n        helpText={this.formatHelpText(this.helpText)}\n        errorMessage={this.errorMessage}\n      >\n        <input\n          type=\"date\"\n          class=\"mg-c-input__box\"\n          min={this.min}\n          max={this.max}\n          value={this.value}\n          id={this.identifier}\n          name={this.name}\n          disabled={this.disabled}\n          required={this.required}\n          aria-invalid={(this.invalid === true).toString()}\n          onInput={this.handleInput}\n          onBlur={this.handleBlur}\n          ref={(el: HTMLInputElement) => {\n            if (el !== null) this.input = el;\n          }}\n        />\n      </mg-input>\n    );\n  }\n}\n"]}

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

@@ -1,8 +1,7 @@
 import { h } from "@stencil/core";
-import { MgInput } from "../MgInput";
-import { Handler } from "../MgInput.conf";
-import { types, InputError, formats } from "./mg-input-numeric.conf";
 import { ClassList, isValidString, localeCurrency, localeNumber } from "@mgdis/stencil-helpers";
+import { types, InputError, formats } from "./mg-input-numeric.conf";
+import { Handler, classReadonly, classDisabled, widths } from "../mg-input/mg-input.conf";
 import { initLocales } from "../../../../locales/";
 export class MgInputNumeric {
     constructor() {
@@ -72,8 +71,6 @@ export class MgInputNumeric {
         this.getInputError = () => {
             let inputError = null;
             const hasNotEmptyValues = (toControl) => !toControl.some(value => [null, undefined].includes(value));
-            if (!hasNotEmptyValues([this.input]))
-                return inputError;
             // required
             if (!this.input.checkValidity() && this.input.validity.valueMissing) {
                 inputError = InputError.REQUIRED;
@@ -162,6 +159,12 @@ export class MgInputNumeric {
             this.updateValues(newValue);
         }
     }
+    watchReadonly(newValue) {
+        if (newValue)
+            this.classCollection.add(classReadonly);
+        else
+            this.classCollection.delete(classReadonly);
+    }
     handleValidityChange(newValue, _oldValue, prop) {
         if (this.input !== undefined) {
             this.input[prop] = newValue;
@@ -172,6 +175,21 @@ export class MgInputNumeric {
             }
         }
     }
+    watchDisabled(newValue) {
+        if (newValue)
+            this.classCollection.add(classDisabled);
+        else
+            this.classCollection.delete(classDisabled);
+    }
+    watchMgWidth(newValue) {
+        // reset width class
+        widths.forEach(width => {
+            this.classCollection.delete(`mg-c-input--width-${width}`);
+        });
+        // apply new width
+        if (newValue)
+            this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);
+    }
     validateType(newValue) {
         if (!types.includes(newValue)) {
             throw new Error(`<mg-input-numeric> prop "type" must be one of: ${types.join(', ')}`);
@@ -295,6 +313,9 @@ export class MgInputNumeric {
         // validate value
         this.validateValue(this.value);
         this.validateAppendSlot();
+        this.watchReadonly(this.readonly);
+        this.watchDisabled(this.disabled);
+        this.watchMgWidth(this.mgWidth);
         // Check validity when component is ready
         // return a promise to process action only in the FIRST render().
         // https://stenciljs.com/docs/component-lifecycle#componentwillload
@@ -307,10 +328,10 @@ export class MgInputNumeric {
      * @returns HTML Element
      */
     render() {
-        return (h(MgInput, { key: 'f4b30471e47f934e0fa1b132f6fc3605ba0ce8f0', identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: this.readonlyValue, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("input", { key: '39a6e888cfc819c4685c93731e05da29249fb408', type: "text", class: "mg-c-input__box", value: this.displayValue(), id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
+        return (h("mg-input", { key: 'ad31254b8cd13d07b07a1fc40ddd515047ddbfed', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonlyValue: this.readonlyValue, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, h("input", { key: '9d094501fa4f4a07eb9b3d50bda55f1344099fb9', type: "text", class: "mg-c-input__box mg-c-input__box--width", value: this.displayValue(), id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
                 if (el !== null)
                     this.input = el;
-            } }), h("slot", { key: '6db575640ca6f6e7074517547d26cc096912e2a4', name: "append-input" })));
+            } }), h("slot", { key: 'c1970cbf9e7fce07abd63382d401f4e2834bc4d0', name: "append-input" })));
     }
     static get is() { return "mg-input-numeric"; }
     static get encapsulation() { return "shadow"; }
@@ -404,7 +425,7 @@ export class MgInputNumeric {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Define if label is displayed on top"
@@ -439,7 +460,7 @@ export class MgInputNumeric {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Input placeholder.\nIt should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text."
@@ -492,7 +513,7 @@ export class MgInputNumeric {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Maximum value"
@@ -509,7 +530,7 @@ export class MgInputNumeric {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Minimum value"
@@ -544,13 +565,13 @@ export class MgInputNumeric {
                     "references": {
                         "Width": {
                             "location": "import",
-                            "path": "../MgInput.conf",
-                            "id": "src/components/molecules/inputs/MgInput.conf.ts::Width"
+                            "path": "../mg-input/mg-input.conf",
+                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::Width"
                         }
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Define input width"
@@ -567,7 +588,7 @@ export class MgInputNumeric {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Add a tooltip message next to the input"
@@ -584,8 +605,8 @@ export class MgInputNumeric {
                     "references": {
                         "TooltipPosition": {
                             "location": "import",
-                            "path": "../MgInput.conf",
-                            "id": "src/components/molecules/inputs/MgInput.conf.ts::TooltipPosition"
+                            "path": "../mg-input/mg-input.conf",
+                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::TooltipPosition"
                         }
                     }
                 },
@@ -608,7 +629,7 @@ export class MgInputNumeric {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Add a help text under the input, usually expected data format and example"
@@ -860,6 +881,9 @@ export class MgInputNumeric {
         return [{
                 "propName": "value",
                 "methodName": "validateValue"
+            }, {
+                "propName": "readonly",
+                "methodName": "watchReadonly"
             }, {
                 "propName": "required",
                 "methodName": "handleValidityChange"
@@ -875,6 +899,12 @@ export class MgInputNumeric {
             }, {
                 "propName": "max",
                 "methodName": "handleValidityChange"
+            }, {
+                "propName": "disabled",
+                "methodName": "watchDisabled"
+            }, {
+                "propName": "mgWidth",
+                "methodName": "watchMgWidth"
             }, {
                 "propName": "type",
                 "methodName": "validateType"

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

@@ -1 +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 { Handler, type TooltipPosition, type Width } from '../MgInput.conf';\nimport { types, InputError, type NumericType, type Format, formats } from './mg-input-numeric.conf';\nimport { ClassList, isValidString, localeCurrency, localeNumber } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../../locales/';\n\n@Component({\n  tag: 'mg-input-numeric',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-numeric.css',\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  private handlerInProgress: Handler;\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   * Maximum value\n   */\n  @Prop() max: number;\n\n  /**\n   * Minimum value\n   */\n  @Prop() min: number;\n\n  /**\n   * Define if input is disabled\n   */\n  @Prop() disabled = false;\n  @Watch('required')\n  @Watch('readonly')\n  @Watch('disabled')\n  @Watch('min')\n  @Watch('max')\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   * Define tooltip position\n   */\n  @Prop() tooltipPosition: TooltipPosition = 'input';\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: NumericType = 'decimal';\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    } else if (newValue === 'currency') {\n      this.format = 'currency';\n    }\n  }\n\n  /**\n   * Set local formatting.\n   * Numbers are formatted based on the locale.\n   * When type is set to `currency`, formatting has no effect.\n   */\n  @Prop({ mutable: true }) format: Format = 'number'; // eslint-disable-line @stencil-community/strict-mutable\n  @Watch('format')\n  watchFormat(newValue: MgInputNumeric['format']): void {\n    if (!formats.includes(newValue)) {\n      throw new Error(`<mg-input-numeric> prop \"format\" must be one of: ${formats.join(', ')}`);\n    }\n  }\n\n  /**\n   * Define currency\n   */\n  @Prop() currency = 'USD';\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-c-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: boolean;\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<HTMLMgInputNumericElement['valid']>;\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 (!isValidString(errorMessage)) {\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    const oldValidValue = this.valid;\n    this.valid = newValue;\n    this.invalid = !this.valid;\n    // We need to send valid event even if it is the same value\n    if (this.handlerInProgress === undefined || (this.handlerInProgress === Handler.BLUR && this.valid !== oldValidValue)) 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 (\n      ['', '-'].includes(value) || (regex.exec(value) !== null && integer.length <= this.integerLength && decimal.length <= (this.type === 'integer' ? 0 : this.decimalLength))\n    );\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 ?? 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.handlerInProgress = Handler.BLUR;\n    this.displayError().finally(() => {\n      // reset guard\n      this.handlerInProgress = undefined;\n      this.hasFocus = false;\n    });\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 => {\n    switch (this.format) {\n      case 'number':\n        return localeNumber(value, this.locale);\n      case 'currency':\n        return localeCurrency(value, this.locale, this.currency);\n      case 'none':\n        return value.toString();\n    }\n  };\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-c-input--is-input-group-append' : 'mg-c-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.watchFormat(this.format);\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        tooltipPosition={this.tooltipPosition}\n        helpText={this.helpText}\n        errorMessage={this.errorMessage}\n        isFieldset={false}\n      >\n        <input\n          type=\"text\"\n          class=\"mg-c-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          aria-invalid={(this.invalid === true).toString()}\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"]}
+{"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 { ClassList, isValidString, localeCurrency, localeNumber } from '@mgdis/stencil-helpers';\nimport { types, InputError, type NumericType, type Format, formats } from './mg-input-numeric.conf';\nimport { type TooltipPosition, type Width, Handler, classReadonly, classDisabled, widths } from '../mg-input/mg-input.conf';\nimport { initLocales } from '../../../../locales/';\n\n@Component({\n  tag: 'mg-input-numeric',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-numeric.css',\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  private handlerInProgress: Handler;\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  @Watch('readonly')\n  watchReadonly(newValue: MgInputNumeric['readonly']): void {\n    if (newValue) this.classCollection.add(classReadonly);\n    else this.classCollection.delete(classReadonly);\n  }\n\n  /**\n   * Maximum value\n   */\n  @Prop() max?: number;\n\n  /**\n   * Minimum value\n   */\n  @Prop() min?: number;\n\n  /**\n   * Define if input is disabled\n   */\n  @Prop() disabled = false;\n  @Watch('required')\n  @Watch('readonly')\n  @Watch('disabled')\n  @Watch('min')\n  @Watch('max')\n  handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void {\n    if (this.input !== undefined) {\n      this.input[prop] = newValue;\n      this.checkValidity();\n      if (this.hasDisplayedError) {\n        this.setErrorMessage();\n        this.hasDisplayedError = false;\n      }\n    }\n  }\n\n  @Watch('disabled')\n  watchDisabled(newValue: MgInputNumeric['disabled']): void {\n    if (newValue) this.classCollection.add(classDisabled);\n    else this.classCollection.delete(classDisabled);\n  }\n\n  /**\n   * Define input width\n   */\n  @Prop() mgWidth?: Width;\n  @Watch('mgWidth')\n  watchMgWidth(newValue: MgInputNumeric['mgWidth']): void {\n    // reset width class\n    widths.forEach(width => {\n      this.classCollection.delete(`mg-c-input--width-${width}`);\n    });\n\n    // apply new width\n    if (newValue) this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);\n  }\n\n  /**\n   * Add a tooltip message next to the input\n   */\n  @Prop() tooltip?: string;\n\n  /**\n   * Define tooltip position\n   */\n  @Prop() tooltipPosition: TooltipPosition = 'input';\n\n  /**\n   * 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: NumericType = 'decimal';\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    } else if (newValue === 'currency') {\n      this.format = 'currency';\n    }\n  }\n\n  /**\n   * Set local formatting.\n   * Numbers are formatted based on the locale.\n   * When type is set to `currency`, formatting has no effect.\n   */\n  @Prop({ mutable: true }) format: Format = 'number'; // eslint-disable-line @stencil-community/strict-mutable\n  @Watch('format')\n  watchFormat(newValue: MgInputNumeric['format']): void {\n    if (!formats.includes(newValue)) {\n      throw new Error(`<mg-input-numeric> prop \"format\" must be one of: ${formats.join(', ')}`);\n    }\n  }\n\n  /**\n   * Define currency\n   */\n  @Prop() currency = 'USD';\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-c-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: boolean;\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<HTMLMgInputNumericElement['valid']>;\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 (!isValidString(errorMessage)) {\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    const oldValidValue = this.valid;\n    this.valid = newValue;\n    this.invalid = !this.valid;\n    // We need to send valid event even if it is the same value\n    if (this.handlerInProgress === undefined || (this.handlerInProgress === Handler.BLUR && this.valid !== oldValidValue)) 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 (\n      ['', '-'].includes(value) || (regex.exec(value) !== null && integer.length <= this.integerLength && decimal.length <= (this.type === 'integer' ? 0 : this.decimalLength))\n    );\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 ?? 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.handlerInProgress = Handler.BLUR;\n    this.displayError().finally(() => {\n      // reset guard\n      this.handlerInProgress = undefined;\n      this.hasFocus = false;\n    });\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: number[]) => !toControl.some(value => [null, undefined].includes(value));\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 => {\n    switch (this.format) {\n      case 'number':\n        return localeNumber(value, this.locale);\n      case 'currency':\n        return localeCurrency(value, this.locale, this.currency);\n      case 'none':\n        return value.toString();\n    }\n  };\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-c-input--is-input-group-append' : 'mg-c-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.watchFormat(this.format);\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    this.watchReadonly(this.readonly);\n    this.watchDisabled(this.disabled);\n    this.watchMgWidth(this.mgWidth);\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      <mg-input\n        label={this.label}\n        identifier={this.identifier}\n        class={this.classCollection.join()}\n        ariaDescribedbyIDs={[]}\n        labelOnTop={this.labelOnTop}\n        labelHide={this.labelHide}\n        required={this.required}\n        readonlyValue={this.readonlyValue}\n        tooltip={this.tooltip}\n        tooltipPosition={this.tooltipPosition}\n        helpText={this.helpText}\n        errorMessage={this.errorMessage}\n      >\n        <input\n          type=\"text\"\n          class=\"mg-c-input__box mg-c-input__box--width\"\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          aria-invalid={(this.invalid === true).toString()}\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      </mg-input>\n    );\n  }\n}\n"]}