@mgdis/mg-components 5.26.0 → 5.27.1

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

@@ -1,9 +1,8 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { h } from "@stencil/core";
-import { MgInput } from "../MgInput";
-import { Handler } from "../MgInput.conf";
 import { ClassList, allItemsAreString, isValidString } from "@mgdis/stencil-helpers";
+import { Handler, classReadonly, classDisabled, widths } from "../mg-input/mg-input.conf";
 import { initLocales } from "../../../../locales";
 /**
  * Check if item is a well configured option
@@ -64,7 +63,7 @@ export class MgInputSelect {
          * @param item - item to compare with
          * @returns truthy if input.value is an item
          */
-        this.isInputValue = (item) => { var _a; return item.title === ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value); };
+        this.isInputValue = (item) => item.title === this.input.value;
         /**
          * value props setter
          * @param newValue - value to update with
@@ -111,8 +110,7 @@ export class MgInputSelect {
          * Check if input is valid
          */
         this.checkValidity = () => {
-            var _a;
-            this.setValidity(!this.isDisabledValue() && (this.readonly || this.disabled || (((_a = this.input) === null || _a === void 0 ? void 0 : _a.checkValidity) !== undefined ? this.input.checkValidity() : true)));
+            this.setValidity(!this.isDisabledValue() && (this.readonly || this.disabled || this.input.checkValidity()));
         };
         /**
          * Set input error message
@@ -201,6 +199,12 @@ export class MgInputSelect {
             throw new Error('<mg-input-select> prop "items" is required, can be an empty Array or all items must be the same type: string or Option.');
         }
     }
+    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;
@@ -211,6 +215,21 @@ export class MgInputSelect {
             }
         }
     }
+    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}`);
+    }
     /**
      * Display input error if it exists.
      */
@@ -265,6 +284,9 @@ export class MgInputSelect {
         // Validate
         this.validateItems(this.items);
         this.validateValue(this.value);
+        this.watchMgWidth(this.mgWidth);
+        this.watchReadonly(this.readonly);
+        this.watchDisabled(this.disabled);
         // Set default placeholder
         if (this.placeholder === undefined || this.placeholder === '') {
             this.placeholder = this.messages.input.select.placeholder;
@@ -281,7 +303,7 @@ export class MgInputSelect {
      * @returns HTML Element
      */
     render() {
-        return (h(MgInput, { key: 'd87b66d5c851e222a80331812969c08601f3d84b', 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: undefined, readonlyValue: this.readonlyValue, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("select", { key: 'c7804f7d8c652e566d2d4cbf015c70517cf5537c', class: "mg-c-input__box", id: this.identifier, name: this.name, title: this.placeholder, 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: '66df624f7671f6403b623718110403a83c8282ad', 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("select", { key: '005b1893fb651cbaebfbb66ca816b4605d874808', class: "mg-c-input__box", id: this.identifier, name: this.name, title: this.placeholder, 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;
             } }, (!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder
@@ -400,7 +422,7 @@ export class MgInputSelect {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Define if label is displayed on top"
@@ -542,8 +564,8 @@ export class MgInputSelect {
                     "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"
                         }
                     }
                 },
@@ -565,7 +587,7 @@ export class MgInputSelect {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Add a tooltip message next to the input"
@@ -582,8 +604,8 @@ export class MgInputSelect {
                     "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"
                         }
                     }
                 },
@@ -606,7 +628,7 @@ export class MgInputSelect {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Add a help text under the input, usually expected data format and example"
@@ -766,6 +788,9 @@ export class MgInputSelect {
             }, {
                 "propName": "items",
                 "methodName": "validateItems"
+            }, {
+                "propName": "readonly",
+                "methodName": "watchReadonly"
             }, {
                 "propName": "required",
                 "methodName": "handleValidityChange"
@@ -775,6 +800,12 @@ export class MgInputSelect {
             }, {
                 "propName": "disabled",
                 "methodName": "handleValidityChange"
+            }, {
+                "propName": "disabled",
+                "methodName": "watchDisabled"
+            }, {
+                "propName": "mgWidth",
+                "methodName": "watchMgWidth"
             }];
     }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"mg-input-select.js","sourceRoot":"","sources":["../../../../../src/components/molecules/inputs/mg-input-select/mg-input-select.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { Component, Element, Event, h, Prop, State, EventEmitter, Watch, Method } from '@stencil/core';\nimport { MgInput } from '../MgInput';\nimport { Handler, type TooltipPosition, type Width } from '../MgInput.conf';\nimport { ClassList, allItemsAreString, isValidString } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../../locales';\nimport { SelectOption, OptGroup } from './mg-input-select.conf';\n\n/**\n * Check if item is a well configured option\n * @param option - select option\n * @returns select option type is valid\n */\nconst isOption = (option: unknown): option is SelectOption => typeof option === 'object' && typeof (option as SelectOption).title === 'string';\n\n/**\n * Check if items[] is SelectOption\n * @param items - select option\n * @returns select option array type is valid\n */\nconst allItemsAreOptions = (items: unknown[]): items is SelectOption[] => Array.isArray(items) && items.every(item => isOption(item));\n\n/**\n * Check if item is a well configured optgroup\n * @param optgroup - select option\n * @returns select optgroup type is valid\n */\nconst isOptGroup = (optgroup: unknown): optgroup is OptGroup =>\n  typeof optgroup === 'object' && typeof (optgroup as OptGroup).group === 'string' && allItemsAreOptions((optgroup as OptGroup).options);\n\n/**\n * Group options\n * @param acc - reduce accumulator\n * @param item - item to add\n * @returns grouped options\n */\nconst groupOptions = (acc: (SelectOption | OptGroup)[], { group, title, value, disabled }: SelectOption): (SelectOption | OptGroup)[] => {\n  if (group !== undefined) {\n    // Check if group is already created\n    const optGroup: OptGroup = (acc as OptGroup[]).find(grp => grp.group === group);\n    // Add to group\n    if (optGroup !== undefined) {\n      optGroup.options.push({ title, value, disabled });\n    }\n    // Create group\n    else {\n      acc.push({ group, options: [{ title, value, disabled }] });\n    }\n  } else {\n    acc.push({ title, value, disabled });\n  }\n  return acc;\n};\n\n@Component({\n  tag: 'mg-input-select',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-select.css',\n  shadow: true,\n})\nexport class MgInputSelect {\n  /************\n   * Internal *\n   ************/\n\n  // HTML selector\n  private input: HTMLSelectElement;\n\n  // Locales\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: HTMLMgInputSelectElement;\n\n  /**\n   * Component value\n   */\n  @Prop({ mutable: true }) value: any;\n  @Watch('value')\n  validateValue(newValue: MgInputSelect['value']): void {\n    if (allItemsAreString(this.items) && typeof newValue === 'string') {\n      this.readonlyValue = this.input?.value ? this.input.value : newValue;\n    } else if (allItemsAreOptions(this.items)) {\n      this.readonlyValue = this.items.find(item => item.value === newValue)?.title;\n    } else {\n      this.readonlyValue = null;\n    }\n    this.valueChange.emit(newValue);\n  }\n\n  /**\n   * Items are the possible options to select\n   */\n  @Prop() items!: (string | SelectOption)[];\n  @Watch('items')\n  validateItems(newValue: MgInputSelect['items']): void {\n    // Empty options\n    if (newValue.length === 0) {\n      this.options = [];\n    }\n    // String array\n    else if (allItemsAreString(newValue)) {\n      if (typeof this.value === 'string') this.valueExist = newValue.includes(this.value);\n      this.options = newValue.map(item => ({ title: item, value: item }));\n    }\n    // Object array\n    else if (allItemsAreOptions(newValue)) {\n      this.valueExist = newValue.map(item => item.value).includes(this.value);\n      // Grouped object options\n      if (newValue.some(item => Boolean(item.group))) {\n        this.options = newValue.reduce(groupOptions, []);\n      }\n      // Standart object options\n      else {\n        this.options = newValue;\n      }\n    } else {\n      throw new Error('<mg-input-select> prop \"items\" is required, can be an empty Array or all items must be the same type: string or Option.');\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 = 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({ mutable: true }) placeholder: string;\n\n  /**\n   * Option to remove placeholder\n   */\n  @Prop() placeholderHide = false;\n\n  /**\n   * Option to disable placeholder\n   */\n  @Prop() placeholderDisabled = 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 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({ reflect: true }) 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 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--select']);\n\n  /**\n   * Error message to display\n   */\n  @State() errorMessage: string;\n\n  /**\n   * Formated items for display\n   */\n  @State() options: (SelectOption | OptGroup)[];\n\n  /**\n   * Does value match any item option\n   */\n  @State() valueExist: boolean;\n\n  /**\n   * Does value match any item option\n   */\n  @State() readonlyValue: string;\n\n  /**\n   * Emited event when value change\n   */\n  @Event({ eventName: 'value-change' }) valueChange: EventEmitter<HTMLMgInputCheckboxElement['value']>;\n\n  /**\n   * Emited event when checking validity\n   */\n  @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<HTMLMgInputCheckboxElement['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: MgInputSelect['valid'], errorMessage: string): Promise<void> {\n    if (typeof valid !== 'boolean') {\n      throw new Error('<mg-input-select> method \"setError()\" param \"valid\" must be a boolean');\n    } else if (!isValidString(errorMessage)) {\n      throw new Error('<mg-input-select> 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: MgInputSelect['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   * Handle input event\n   */\n  private handleInput = (): void => {\n    this.updateValue();\n    if (this.hasDisplayedError) this.setErrorMessage();\n  };\n\n  /**\n   * Method to compare item.title with input.value\n   * @param item - item to compare with\n   * @returns truthy if input.value is an item\n   */\n  private isInputValue = (item: SelectOption): boolean => item.title === this.input?.value;\n\n  /**\n   * value props setter\n   * @param newValue - value to update with\n   */\n  private setValue = (newValue: MgInputSelect['value']): void => {\n    this.checkValidity();\n    this.value = newValue;\n  };\n\n  /**\n   * Update value from input.value\n   */\n  private updateValue = (): void => {\n    if (this.input.value === '') {\n      this.setValue(null);\n    } else if (allItemsAreString(this.items) && this.items.includes(this.input.value)) {\n      this.setValue(this.input.value);\n    } else if (allItemsAreOptions(this.items) && typeof this.input.value === 'string' && this.items.some(this.isInputValue)) {\n      this.setValue(this.items.find(this.isInputValue).value);\n    } else {\n      // before set newValue with push to options[] the unknown input.value with a disable satus\n      this.options.push({ title: this.input.value, value: this.input.value, disabled: true });\n      this.setValue(this.input.value);\n    }\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   * Input value is disabled\n   * @returns truthy if input value is disabled\n   */\n  private isDisabledValue = (): boolean => allItemsAreOptions(this.options) && this.options.find(this.isInputValue)?.disabled === true;\n\n  /**\n   * Check if input is valid\n   */\n  private checkValidity = (): void => {\n    this.setValidity(!this.isDisabledValue() && (this.readonly || this.disabled || (this.input?.checkValidity !== undefined ? this.input.checkValidity() : true)));\n  };\n\n  /**\n   * Set input error message\n   * @param errorMessage - errorMessage override\n   */\n  private setErrorMessage = (errorMessage?: string): void => {\n    // Set error message\n    this.errorMessage = undefined;\n    if (!this.valid) {\n      if (errorMessage !== undefined) {\n        this.errorMessage = errorMessage;\n      } else if (this.input.validity.valueMissing) {\n        this.errorMessage = this.messages.errors.required;\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    this.messages = initLocales(this.element).messages;\n    // Validate\n    this.validateItems(this.items);\n    this.validateValue(this.value);\n    // Set default placeholder\n    if (this.placeholder === undefined || this.placeholder === '') {\n      this.placeholder = this.messages.input.select.placeholder;\n    }\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 option\n   * @param option - to render\n   * @returns render option\n   */\n  private renderOption = (option: SelectOption): HTMLElement => (\n    <option key={option.title} value={option.title} selected={JSON.stringify(this.value) === JSON.stringify(option.value)} disabled={option.disabled}>\n      {option.title}\n    </option>\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={undefined}\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        <select\n          class=\"mg-c-input__box\"\n          id={this.identifier}\n          name={this.name}\n          title={this.placeholder}\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: HTMLSelectElement) => {\n            if (el !== null) this.input = el;\n          }}\n        >\n          {(!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder\n            <option value=\"\" disabled={this.placeholderDisabled && this.valueExist}>\n              {this.placeholder}\n            </option>\n          )}\n          {this.options.map(option =>\n            isOptGroup(option) ? (\n              <optgroup label={option.group} key={option.group}>\n                {option.options.map(this.renderOption)}\n              </optgroup>\n            ) : (\n              isOption(option) && this.renderOption(option)\n            ),\n          )}\n        </select>\n      </MgInput>\n    );\n  }\n}\n"]}
+{"version":3,"file":"mg-input-select.js","sourceRoot":"","sources":["../../../../../src/components/molecules/inputs/mg-input-select/mg-input-select.tsx"],"names":[],"mappings":"AAAA,sEAAsE;AACtE,uDAAuD;AACvD,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvG,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAErF,OAAO,EAAoC,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAC5H,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD;;;;GAIG;AACH,MAAM,QAAQ,GAAG,CAAC,MAAe,EAA0B,EAAE,CAAC,OAAO,MAAM,KAAK,QAAQ,IAAI,OAAQ,MAAuB,CAAC,KAAK,KAAK,QAAQ,CAAC;AAE/I;;;;GAIG;AACH,MAAM,kBAAkB,GAAG,CAAC,KAAgB,EAA2B,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;AAEtI;;;;GAIG;AACH,MAAM,UAAU,GAAG,CAAC,QAAiB,EAAwB,EAAE,CAC7D,OAAO,QAAQ,KAAK,QAAQ,IAAI,OAAQ,QAAqB,CAAC,KAAK,KAAK,QAAQ,IAAI,kBAAkB,CAAE,QAAqB,CAAC,OAAO,CAAC,CAAC;AAEzI;;;;;GAKG;AACH,MAAM,YAAY,GAAG,CAAC,GAAgC,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAgB,EAA+B,EAAE;IACtI,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;QACxB,oCAAoC;QACpC,MAAM,QAAQ,GAAc,GAAkB,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;QAChF,eAAe;QACf,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;YAC3B,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC;QACpD,CAAC;QACD,eAAe;aACV,CAAC;YACJ,GAAG,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC;QAC7D,CAAC;IACH,CAAC;SAAM,CAAC;QACN,GAAG,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC;IACvC,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC,CAAC;AAOF,MAAM,OAAO,aAAa;;QAWxB,8CAA8C;QACtC,sBAAiB,GAAG,KAAK,CAAC;QAiQlC;;WAEG;QACK,gBAAW,GAAG,GAAS,EAAE;YAC/B,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,IAAI,IAAI,CAAC,iBAAiB;gBAAE,IAAI,CAAC,eAAe,EAAE,CAAC;QACrD,CAAC,CAAC;QAEF;;;;WAIG;QACK,iBAAY,GAAG,CAAC,IAAkB,EAAW,EAAE,CAAC,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;QAExF;;;WAGG;QACK,aAAQ,GAAG,CAAC,QAAgC,EAAQ,EAAE;YAC5D,IAAI,CAAC,aAAa,EAAE,CAAC;YACrB,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;QACxB,CAAC,CAAC;QAEF;;WAEG;QACK,gBAAW,GAAG,GAAS,EAAE;YAC/B,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,EAAE,EAAE,CAAC;gBAC5B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;YACtB,CAAC;iBAAM,IAAI,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;gBAClF,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YAClC,CAAC;iBAAM,IAAI,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC;gBACxH,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,KAAK,CAAC,CAAC;YAC1D,CAAC;iBAAM,CAAC;gBACN,0FAA0F;gBAC1F,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;gBACxF,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YAClC,CAAC;QACH,CAAC,CAAC;QAEF;;WAEG;QACK,eAAU,GAAG,GAAS,EAAE;YAC9B,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,IAAI,CAAC;YACtC,IAAI,CAAC,YAAY,EAAE,CAAC,OAAO,CAAC,GAAG,EAAE;gBAC/B,cAAc;gBACd,IAAI,CAAC,iBAAiB,GAAG,SAAS,CAAC;YACrC,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QAEF;;;WAGG;QACK,oBAAe,GAAG,GAAY,EAAE,WAAC,OAAA,kBAAkB,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAA,MAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,0CAAE,QAAQ,MAAK,IAAI,CAAA,EAAA,CAAC;QAErI;;WAEG;QACK,kBAAa,GAAG,GAAS,EAAE;YACjC,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC;QAC9G,CAAC,CAAC;QAEF;;;WAGG;QACK,oBAAe,GAAG,CAAC,YAAqB,EAAQ,EAAE;YACxD,oBAAoB;YACpB,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;YAC9B,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;gBAChB,IAAI,YAAY,KAAK,SAAS,EAAE,CAAC;oBAC/B,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;gBACnC,CAAC;qBAAM,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC;oBAC5C,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC;gBACpD,CAAC;YACH,CAAC;QACH,CAAC,CAAC;QA+BF;;;;WAIG;QACK,iBAAY,GAAG,CAAC,MAAoB,EAAe,EAAE,CAAC,CAC5D,cAAQ,GAAG,EAAE,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAE,MAAM,CAAC,QAAQ,IAC7I,MAAM,CAAC,KAAK,CACN,CACV,CAAC;;;;oBApTa,IAAI,CAAC,UAAU;;;yBAeV,KAAK;;+BAWC,KAAK;mCAKD,KAAK;wBAKhB,KAAK;wBAKL,KAAK;wBAUL,KAAK;;;+BA4CmB,OAAO;;;;+BAoBZ,IAAI,SAAS,CAAC,CAAC,oBAAoB,CAAC,CAAC;;;;;;IAtK3E,aAAa,CAAC,QAAgC;;QAC5C,IAAI,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE,CAAC;YAClE,IAAI,CAAC,aAAa,GAAG,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK,EAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC;QACvE,CAAC;aAAM,IAAI,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;YAC1C,IAAI,CAAC,aAAa,GAAG,MAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,0CAAE,KAAK,CAAC;QAC/E,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC5B,CAAC;QACD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAClC,CAAC;IAOD,aAAa,CAAC,QAAgC;QAC5C,gBAAgB;QAChB,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC1B,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;QACpB,CAAC;QACD,eAAe;aACV,IAAI,iBAAiB,CAAC,QAAQ,CAAC,EAAE,CAAC;YACrC,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ;gBAAE,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACpF,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QACtE,CAAC;QACD,eAAe;aACV,IAAI,kBAAkB,CAAC,QAAQ,CAAC,EAAE,CAAC;YACtC,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACxE,yBAAyB;YACzB,IAAI,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC;gBAC/C,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,MAAM,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;YACnD,CAAC;YACD,0BAA0B;iBACrB,CAAC;gBACJ,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC;YAC1B,CAAC;QACH,CAAC;aAAM,CAAC;YACN,MAAM,IAAI,KAAK,CAAC,yHAAyH,CAAC,CAAC;QAC7I,CAAC;IACH,CAAC;IAsDD,aAAa,CAAC,QAAmC;QAC/C,IAAI,QAAQ;YAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;;YACjD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;IAClD,CAAC;IASD,oBAAoB,CAAC,QAAiB,EAAE,SAAkB,EAAE,IAAY;QACtE,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;YAC7B,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC;YAC5B,IAAI,CAAC,aAAa,EAAE,CAAC;YACrB,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;gBAC3B,IAAI,CAAC,eAAe,EAAE,CAAC;gBACvB,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;YACjC,CAAC;QACH,CAAC;IACH,CAAC;IAGD,aAAa,CAAC,QAAmC;QAC/C,IAAI,QAAQ;YAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;;YACjD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;IAClD,CAAC;IAOD,YAAY,CAAC,QAAkC;QAC7C,oBAAoB;QACpB,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YACrB,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,qBAAqB,KAAK,EAAE,CAAC,CAAC;QAC5D,CAAC,CAAC,CAAC;QAEH,kBAAkB;QAClB,IAAI,QAAQ;YAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,qBAAqB,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;IAC9E,CAAC;IA8DD;;OAEG;IAEH,KAAK,CAAC,YAAY;QAChB,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,OAAO,CAAC;IACxC,CAAC;IAED;;;;;;;OAOG;IAEH,KAAK,CAAC,QAAQ,CAAC,KAA6B,EAAE,YAAoB;QAChE,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE,CAAC;YAC/B,MAAM,IAAI,KAAK,CAAC,uEAAuE,CAAC,CAAC;QAC3F,CAAC;aAAM,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,EAAE,CAAC;YACxC,MAAM,IAAI,KAAK,CAAC,6EAA6E,CAAC,CAAC;QACjG,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;YACxB,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC;YACvD,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,OAAO,CAAC;QACxC,CAAC;IACH,CAAC;IAED;;;OAGG;IACK,WAAW,CAAC,QAAgC;QAClD,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;QACjC,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;QACtB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC;QAC3B,2DAA2D;QAC3D,IAAI,IAAI,CAAC,iBAAiB,KAAK,SAAS,IAAI,CAAC,IAAI,CAAC,iBAAiB,KAAK,OAAO,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,aAAa,CAAC;YAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1J,CAAC;IAkFD;;mBAEe;IAEf;;;OAGG;IACH,iBAAiB;QACf,cAAc;QACd,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;QACnD,WAAW;QACX,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC/B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAChC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAClC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAClC,0BAA0B;QAC1B,IAAI,IAAI,CAAC,WAAW,KAAK,SAAS,IAAI,IAAI,CAAC,WAAW,KAAK,EAAE,EAAE,CAAC;YAC9D,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC;QAC5D,CAAC;QACD,yCAAyC;QACzC,iEAAiE;QACjE,mEAAmE;QACnE,OAAO,UAAU,CAAC,GAAG,EAAE;YACrB,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC,EAAE,CAAC,CAAC,CAAC;IACR,CAAC;IAaD;;;OAGG;IACH,MAAM;QACJ,OAAO,CACL,iEACE,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,EAClC,kBAAkB,EAAE,EAAE,EACtB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,YAAY,EAAE,IAAI,CAAC,YAAY;YAE/B,+DACE,KAAK,EAAC,iBAAiB,EACvB,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,WAAW,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,kBACT,CAAC,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,CAAC,QAAQ,EAAE,EAChD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,GAAG,EAAE,CAAC,EAAqB,EAAE,EAAE;oBAC7B,IAAI,EAAE,KAAK,IAAI;wBAAE,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;gBACnC,CAAC;gBAEA,CAAC,CAAC,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,4EAA4E;gBAC5H,cAAQ,KAAK,EAAC,EAAE,EAAC,QAAQ,EAAE,IAAI,CAAC,mBAAmB,IAAI,IAAI,CAAC,UAAU,IACnE,IAAI,CAAC,WAAW,CACV,CACV;gBACA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CACzB,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CACnB,gBAAU,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,GAAG,EAAE,MAAM,CAAC,KAAK,IAC7C,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,CAC7B,CACZ,CAAC,CAAC,CAAC,CACF,QAAQ,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAC9C,CACF,CACM,CACA,CACZ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { Component, Element, Event, h, Prop, State, EventEmitter, Watch, Method } from '@stencil/core';\nimport { ClassList, allItemsAreString, isValidString } from '@mgdis/stencil-helpers';\nimport { SelectOption, OptGroup } from './mg-input-select.conf';\nimport { type TooltipPosition, type Width, Handler, classReadonly, classDisabled, widths } from '../mg-input/mg-input.conf';\nimport { initLocales } from '../../../../locales';\n\n/**\n * Check if item is a well configured option\n * @param option - select option\n * @returns select option type is valid\n */\nconst isOption = (option: unknown): option is SelectOption => typeof option === 'object' && typeof (option as SelectOption).title === 'string';\n\n/**\n * Check if items[] is SelectOption\n * @param items - select option\n * @returns select option array type is valid\n */\nconst allItemsAreOptions = (items: unknown[]): items is SelectOption[] => Array.isArray(items) && items.every(item => isOption(item));\n\n/**\n * Check if item is a well configured optgroup\n * @param optgroup - select option\n * @returns select optgroup type is valid\n */\nconst isOptGroup = (optgroup: unknown): optgroup is OptGroup =>\n  typeof optgroup === 'object' && typeof (optgroup as OptGroup).group === 'string' && allItemsAreOptions((optgroup as OptGroup).options);\n\n/**\n * Group options\n * @param acc - reduce accumulator\n * @param item - item to add\n * @returns grouped options\n */\nconst groupOptions = (acc: (SelectOption | OptGroup)[], { group, title, value, disabled }: SelectOption): (SelectOption | OptGroup)[] => {\n  if (group !== undefined) {\n    // Check if group is already created\n    const optGroup: OptGroup = (acc as OptGroup[]).find(grp => grp.group === group);\n    // Add to group\n    if (optGroup !== undefined) {\n      optGroup.options.push({ title, value, disabled });\n    }\n    // Create group\n    else {\n      acc.push({ group, options: [{ title, value, disabled }] });\n    }\n  } else {\n    acc.push({ title, value, disabled });\n  }\n  return acc;\n};\n\n@Component({\n  tag: 'mg-input-select',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-select.css',\n  shadow: true,\n})\nexport class MgInputSelect {\n  /************\n   * Internal *\n   ************/\n\n  // HTML selector\n  private input: HTMLSelectElement;\n\n  // Locales\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: HTMLMgInputSelectElement;\n\n  /**\n   * Component value\n   */\n  @Prop({ mutable: true }) value: any;\n  @Watch('value')\n  validateValue(newValue: MgInputSelect['value']): void {\n    if (allItemsAreString(this.items) && typeof newValue === 'string') {\n      this.readonlyValue = this.input?.value ? this.input.value : newValue;\n    } else if (allItemsAreOptions(this.items)) {\n      this.readonlyValue = this.items.find(item => item.value === newValue)?.title;\n    } else {\n      this.readonlyValue = null;\n    }\n    this.valueChange.emit(newValue);\n  }\n\n  /**\n   * Items are the possible options to select\n   */\n  @Prop() items!: (string | SelectOption)[];\n  @Watch('items')\n  validateItems(newValue: MgInputSelect['items']): void {\n    // Empty options\n    if (newValue.length === 0) {\n      this.options = [];\n    }\n    // String array\n    else if (allItemsAreString(newValue)) {\n      if (typeof this.value === 'string') this.valueExist = newValue.includes(this.value);\n      this.options = newValue.map(item => ({ title: item, value: item }));\n    }\n    // Object array\n    else if (allItemsAreOptions(newValue)) {\n      this.valueExist = newValue.map(item => item.value).includes(this.value);\n      // Grouped object options\n      if (newValue.some(item => Boolean(item.group))) {\n        this.options = newValue.reduce(groupOptions, []);\n      }\n      // Standart object options\n      else {\n        this.options = newValue;\n      }\n    } else {\n      throw new Error('<mg-input-select> prop \"items\" is required, can be an empty Array or all items must be the same type: string or Option.');\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 = 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({ mutable: true }) placeholder: string;\n\n  /**\n   * Option to remove placeholder\n   */\n  @Prop() placeholderHide = false;\n\n  /**\n   * Option to disable placeholder\n   */\n  @Prop() placeholderDisabled = 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: MgInputSelect['readonly']): void {\n    if (newValue) this.classCollection.add(classReadonly);\n    else this.classCollection.delete(classReadonly);\n  }\n\n  /**\n   * Define if input is disabled\n   */\n  @Prop() disabled = false;\n  @Watch('required')\n  @Watch('readonly')\n  @Watch('disabled')\n  handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void {\n    if (this.input !== undefined) {\n      this.input[prop] = newValue;\n      this.checkValidity();\n      if (this.hasDisplayedError) {\n        this.setErrorMessage();\n        this.hasDisplayedError = false;\n      }\n    }\n  }\n\n  @Watch('disabled')\n  watchDisabled(newValue: MgInputSelect['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({ reflect: true }) mgWidth: Width;\n  @Watch('mgWidth')\n  watchMgWidth(newValue: MgInputSelect['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 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--select']);\n\n  /**\n   * Error message to display\n   */\n  @State() errorMessage: string;\n\n  /**\n   * Formated items for display\n   */\n  @State() options: (SelectOption | OptGroup)[];\n\n  /**\n   * Does value match any item option\n   */\n  @State() valueExist: boolean;\n\n  /**\n   * Does value match any item option\n   */\n  @State() readonlyValue: string;\n\n  /**\n   * Emited event when value change\n   */\n  @Event({ eventName: 'value-change' }) valueChange: EventEmitter<HTMLMgInputCheckboxElement['value']>;\n\n  /**\n   * Emited event when checking validity\n   */\n  @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<HTMLMgInputCheckboxElement['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: MgInputSelect['valid'], errorMessage: string): Promise<void> {\n    if (typeof valid !== 'boolean') {\n      throw new Error('<mg-input-select> method \"setError()\" param \"valid\" must be a boolean');\n    } else if (!isValidString(errorMessage)) {\n      throw new Error('<mg-input-select> 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: MgInputSelect['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   * Handle input event\n   */\n  private handleInput = (): void => {\n    this.updateValue();\n    if (this.hasDisplayedError) this.setErrorMessage();\n  };\n\n  /**\n   * Method to compare item.title with input.value\n   * @param item - item to compare with\n   * @returns truthy if input.value is an item\n   */\n  private isInputValue = (item: SelectOption): boolean => item.title === this.input.value;\n\n  /**\n   * value props setter\n   * @param newValue - value to update with\n   */\n  private setValue = (newValue: MgInputSelect['value']): void => {\n    this.checkValidity();\n    this.value = newValue;\n  };\n\n  /**\n   * Update value from input.value\n   */\n  private updateValue = (): void => {\n    if (this.input.value === '') {\n      this.setValue(null);\n    } else if (allItemsAreString(this.items) && this.items.includes(this.input.value)) {\n      this.setValue(this.input.value);\n    } else if (allItemsAreOptions(this.items) && typeof this.input.value === 'string' && this.items.some(this.isInputValue)) {\n      this.setValue(this.items.find(this.isInputValue).value);\n    } else {\n      // before set newValue with push to options[] the unknown input.value with a disable satus\n      this.options.push({ title: this.input.value, value: this.input.value, disabled: true });\n      this.setValue(this.input.value);\n    }\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   * Input value is disabled\n   * @returns truthy if input value is disabled\n   */\n  private isDisabledValue = (): boolean => allItemsAreOptions(this.options) && this.options.find(this.isInputValue)?.disabled === true;\n\n  /**\n   * Check if input is valid\n   */\n  private checkValidity = (): void => {\n    this.setValidity(!this.isDisabledValue() && (this.readonly || this.disabled || this.input.checkValidity()));\n  };\n\n  /**\n   * Set input error message\n   * @param errorMessage - errorMessage override\n   */\n  private setErrorMessage = (errorMessage?: string): void => {\n    // Set error message\n    this.errorMessage = undefined;\n    if (!this.valid) {\n      if (errorMessage !== undefined) {\n        this.errorMessage = errorMessage;\n      } else if (this.input.validity.valueMissing) {\n        this.errorMessage = this.messages.errors.required;\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    this.messages = initLocales(this.element).messages;\n    // Validate\n    this.validateItems(this.items);\n    this.validateValue(this.value);\n    this.watchMgWidth(this.mgWidth);\n    this.watchReadonly(this.readonly);\n    this.watchDisabled(this.disabled);\n    // Set default placeholder\n    if (this.placeholder === undefined || this.placeholder === '') {\n      this.placeholder = this.messages.input.select.placeholder;\n    }\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 option\n   * @param option - to render\n   * @returns render option\n   */\n  private renderOption = (option: SelectOption): HTMLElement => (\n    <option key={option.title} value={option.title} selected={JSON.stringify(this.value) === JSON.stringify(option.value)} disabled={option.disabled}>\n      {option.title}\n    </option>\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        <select\n          class=\"mg-c-input__box\"\n          id={this.identifier}\n          name={this.name}\n          title={this.placeholder}\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: HTMLSelectElement) => {\n            if (el !== null) this.input = el;\n          }}\n        >\n          {(!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder\n            <option value=\"\" disabled={this.placeholderDisabled && this.valueExist}>\n              {this.placeholder}\n            </option>\n          )}\n          {this.options.map(option =>\n            isOptGroup(option) ? (\n              <optgroup label={option.group} key={option.group}>\n                {option.options.map(this.renderOption)}\n              </optgroup>\n            ) : (\n              isOption(option) && this.renderOption(option)\n            ),\n          )}\n        </select>\n      </mg-input>\n    );\n  }\n}\n"]}

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

@@ -1,9 +1,17 @@
 import { h } from "@stencil/core";
-import { MgInput } from "../MgInput";
-import { Handler } from "../MgInput.conf";
 import { ClassList, isValidString } from "@mgdis/stencil-helpers";
+import { Handler, widths, classReadonly, classDisabled } from "../mg-input/mg-input.conf";
 import { initLocales } from "../../../../locales";
+/**
+ * Check if datalist options are well structured.
+ *
+ * @param options - Datalist options to check.
+ * @returns True if datalist is well structured.
+ */
 const isDatalistOption = (options) => Array.isArray(options) && options.every(option => typeof option === 'string');
+/**
+ * @slot append-input - Content to display next to the input
+ */
 export class MgInputText {
     constructor() {
         /************
@@ -13,6 +21,8 @@ export class MgInputText {
         this.classFocus = 'mg-u-is-focused';
         this.classIsInputGroupAppend = 'mg-c-input--is-input-group-append';
         this.classHasIcon = 'mg-c-input--has-icon';
+        this.classHasButtonsGroupAppend = 'mg-c-input--has-buttons-group-append';
+        this.classIsAppendInputSlotContent = 'mg-c-input--is-append-input-slot-content';
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
         /**
@@ -50,8 +60,7 @@ export class MgInputText {
          * 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());
         };
         /**
          * Set input error message
@@ -79,15 +88,15 @@ export class MgInputText {
         this.validateAppendSlot = () => {
             const slotAppendInput = Array.from(this.element.querySelectorAll('[slot="append-input"]'));
             if (slotAppendInput.length === 1) {
-                this.classCollection.add(slotAppendInput[0].nodeName === 'MG-BUTTON' ? this.classIsInputGroupAppend : 'mg-c-input--is-append-input-slot-content');
+                this.classCollection.add(slotAppendInput[0].nodeName === 'MG-BUTTON' ? this.classIsInputGroupAppend : this.classIsAppendInputSlotContent);
             }
             else if (slotAppendInput.filter(slot => slot.nodeName === 'MG-BUTTON').length > 1) {
                 this.classCollection.add(this.classIsInputGroupAppend);
-                this.classCollection.add('mg-c-input--has-buttons-group-append');
+                this.classCollection.add(this.classHasButtonsGroupAppend);
             }
         };
         /**
-         * Methode to control datalist display condition
+         * Method to control datalist display condition
          * @returns true if display condition success
          */
         this.hasDatalist = () => isDatalistOption(this.datalistoptions) && this.datalistoptions.length > 0;
@@ -133,6 +142,12 @@ export class MgInputText {
             throw new Error('<mg-input-text> prop "datalistoptions" values must be the same type, string.');
         }
     }
+    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;
@@ -143,6 +158,21 @@ export class MgInputText {
             }
         }
     }
+    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}`);
+    }
     validatePattern(newValue) {
         if (newValue !== undefined && !(isValidString(this.pattern) && isValidString(this.patternErrorMessage))) {
             throw new Error('<mg-input-text> props "pattern" and "patternErrorMessage" must be non-empty string and paired.');
@@ -213,6 +243,9 @@ export class MgInputText {
         this.validatePattern(this.pattern);
         this.validatePattern(this.patternErrorMessage);
         this.validateAppendSlot();
+        this.watchMgWidth(this.mgWidth);
+        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
@@ -225,14 +258,14 @@ export class MgInputText {
      * @returns HTML Element
      */
     render() {
-        return (h(MgInput, { key: '588874f4ce3dfe230190636fdb985f1c7cd667f6', identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [this.characterLeftId], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("div", { key: '0c543cdc61727ffac94b2b550257e69e12c6c2bf', class: "mg-c-input__with-character-left", style: {
+        return (h("mg-input", { key: '0bcc765df96b4183f70e03f0579bc64f0d2455d2', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [this.characterLeftId], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonlyValue: this.value, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, h("div", { key: 'fdbfcdc5be2946e3c25b4ea1bc3e1824a205e4fe', class: "mg-c-input__with-character-left", style: {
                 '--mg-character-left-message-length': (this.displayCharacterLeft
                     ? (this.maxlength - (this.value || '').length).toString().length + this.maxlength.toString().length + 1
                     : 0).toString(),
-            } }, this.icon !== undefined && h("mg-icon", { icon: this.icon }), h("input", { key: '7ec8b525e055f345e21af55bc7d68c92241c3cd8', type: this.type, class: "mg-c-input__box", value: this.value, id: this.identifier, list: this.hasDatalist() ? this.datalistId : undefined, autocomplete: this.hasDatalist() ? 'off' : undefined, name: this.name, placeholder: this.placeholder, title: this.placeholder, maxlength: this.maxlength, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), pattern: this.pattern, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
+            } }, this.icon !== undefined && h("mg-icon", { icon: this.icon }), h("input", { key: '1fa97359a69a9ab7093dbcbe4349638f121931c7', type: this.type, class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, list: this.hasDatalist() ? this.datalistId : undefined, autocomplete: this.hasDatalist() ? 'off' : undefined, name: this.name, placeholder: this.placeholder, title: this.placeholder, maxlength: this.maxlength, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), pattern: this.pattern, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
                 if (el !== null)
                     this.input = el;
-            } }), this.hasDatalist() && (h("datalist", { id: this.datalistId }, this.datalistoptions.map(option => (h("option", { value: option, key: option }))))), this.displayCharacterLeft && this.maxlength > 0 && (h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength }))), h("slot", { key: 'b68af1be76d8513119dd9b3c50f1feedd0a011f5', name: "append-input" })));
+            } }), this.hasDatalist() && (h("datalist", { id: this.datalistId }, this.datalistoptions.map(option => (h("option", { value: option, key: option }))))), this.displayCharacterLeft && this.maxlength > 0 && (h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength }))), h("slot", { key: 'e6e209266d3525fb2dcd3eecf1dc054d2d7750b4', name: "append-input" })));
     }
     static get is() { return "mg-input-text"; }
     static get encapsulation() { return "shadow"; }
@@ -345,12 +378,18 @@ export class MgInputText {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "IconType",
+                    "resolved": "\"filter\" | \"copy\" | \"link\" | \"picture\" | \"table\" | \"circle\" | \"download\" | \"history\" | \"location\" | \"key\" | \"loader\" | \"address-card\" | \"align-center\" | \"align-justify\" | \"align-left\" | \"align-right\" | \"api\" | \"archive\" | \"archive-outline\" | \"arrow-clock\" | \"arrow-down\" | \"arrow-down-a-z\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-right\" | \"arrow-rotate\" | \"arrow-rotate-backward\" | \"arrow-up\" | \"arrow-up-right\" | \"arrow-up-right-square\" | \"arrow-up-z-a\" | \"arrows-compare\" | \"arrows-right-down\" | \"arrows-right-left\" | \"arrows-rotate\" | \"arrows-rotate-backward\" | \"ban\" | \"bell\" | \"bell-outline\" | \"book\" | \"book-outline\" | \"briefcase\" | \"briefcase-outline\" | \"building-outline\" | \"calculator\" | \"calendar\" | \"calendar-euro\" | \"calendar-euro-outline\" | \"calendar-outline\" | \"check\" | \"check-circle\" | \"check-circle-outline\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"clock\" | \"clock-outline\" | \"code-square-outline\" | \"cog\" | \"cog-outline\" | \"comment\" | \"comment-outline\" | \"comment-sms\" | \"conversation\" | \"conversation-outline\" | \"copy-file\" | \"copy-file-outline\" | \"copy-outline\" | \"credit-card\" | \"cross\" | \"cross-circle\" | \"cross-circle-outline\" | \"dashboard\" | \"dashboard-outline\" | \"earth\" | \"earth-outline\" | \"ellipsis\" | \"ellipsis-vertical\" | \"euro\" | \"euro-circle\" | \"exclamation-circle\" | \"exclamation-circle-outline\" | \"exclamation-stamp\" | \"exclamation-triangle\" | \"exclamation-triangle-outline\" | \"eye\" | \"eye-slash\" | \"fax\" | \"fax-outline\" | \"file\" | \"file-cog\" | \"file-download\" | \"file-excel\" | \"file-excel-outline\" | \"file-outline\" | \"file-pdf\" | \"file-pdf-outline\" | \"file-text\" | \"file-text-outline\" | \"file-upload\" | \"file-word\" | \"file-word-outline\" | \"filter-outline\" | \"floppy-disk\" | \"floppy-disk-outline\" | \"folder\" | \"folder-check\" | \"folder-check-outline\" | \"folder-lines\" | \"folder-lines-outline\" | \"folder-link\" | \"folder-link-outline\" | \"folder-outline\" | \"folder-star\" | \"folders\" | \"folders-outline\" | \"gavel\" | \"gavel-outline\" | \"graduation-cap\" | \"graduation-cap-outline\" | \"hand-up\" | \"home\" | \"home-outline\" | \"info-circle\" | \"info-circle-outline\" | \"interrogation-circle\" | \"interrogation-circle-outline\" | \"laptop\" | \"life-ring\" | \"lines-rectangle\" | \"lines-rectangle-outline\" | \"list\" | \"location-outline\" | \"lock\" | \"lock-outline\" | \"log-in\" | \"log-out\" | \"magnifying-glass\" | \"mail\" | \"mail-outline\" | \"messages-square\" | \"messages-square-outline\" | \"mobile\" | \"mobile-outline\" | \"notes\" | \"notes-outline\" | \"paper-plane\" | \"paper-plane-slash\" | \"paperclip\" | \"pen\" | \"pen-circle\" | \"pen-fancy\" | \"pen-fancy-files-outline\" | \"pen-fancy-outline\" | \"pen-outline\" | \"phone\" | \"phone-outline\" | \"picture-outline\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"question-circle\" | \"share\" | \"share-outline\" | \"shuffle\" | \"sitemap\" | \"sliders\" | \"sliders-outline\" | \"squares\" | \"star\" | \"star-outline\" | \"tag\" | \"tags\" | \"thumb-down\" | \"thumb-down-outline\" | \"thumb-up\" | \"thumb-up-outline\" | \"thumbtack\" | \"thumbtack-outline\" | \"trash\" | \"trash-outline\" | \"universal-access\" | \"unlink\" | \"unlock\" | \"unlock-outline\" | \"upload\" | \"user\" | \"user-circle\" | \"user-group\" | \"user-lock\" | \"user-outline\" | \"user-pen-fancy-outline\" | \"user-plus\" | \"user-question-outline\" | \"user-shield-outline\" | \"users\" | \"users-outline\" | \"wallet\" | \"wallet-outline\"",
+                    "references": {
+                        "IconType": {
+                            "location": "import",
+                            "path": "../../../../components",
+                            "id": "src/components.d.ts::IconType"
+                        }
+                    }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Input icon"
@@ -367,7 +406,7 @@ export class MgInputText {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Define if label is displayed on top"
@@ -402,7 +441,7 @@ export class MgInputText {
                     "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."
@@ -506,8 +545,8 @@ export class MgInputText {
                     "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"
                         }
                     }
                 },
@@ -530,7 +569,7 @@ export class MgInputText {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Define input pattern to validate\nPlease refer to the Pattern section in the input documentation for detailed information on using regular expressions in components."
@@ -547,7 +586,7 @@ export class MgInputText {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Define input pattern error message"
@@ -564,7 +603,7 @@ export class MgInputText {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Add a tooltip message next to the input"
@@ -581,8 +620,8 @@ export class MgInputText {
                     "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"
                         }
                     }
                 },
@@ -623,7 +662,7 @@ export class MgInputText {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Add a help text under the input, usually expected data format and example"
@@ -800,6 +839,9 @@ export class MgInputText {
             }, {
                 "propName": "datalistoptions",
                 "methodName": "validateDatalistoptions"
+            }, {
+                "propName": "readonly",
+                "methodName": "watchReadonly"
             }, {
                 "propName": "required",
                 "methodName": "handleValidityChange"
@@ -809,6 +851,12 @@ export class MgInputText {
             }, {
                 "propName": "disabled",
                 "methodName": "handleValidityChange"
+            }, {
+                "propName": "disabled",
+                "methodName": "watchDisabled"
+            }, {
+                "propName": "mgWidth",
+                "methodName": "watchMgWidth"
             }, {
                 "propName": "pattern",
                 "methodName": "validatePattern"