@mgdis/mg-components 5.10.0 → 5.10.1

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

@@ -10,7 +10,6 @@ export class MgInputNumeric {
     this.hasDisplayedError = false;
     /**
      * Handle input event
-     * @returns {void}
      */
     this.handleInput = () => {
       // Check validity
@@ -22,23 +21,22 @@ export class MgInputNumeric {
     };
     /**
      * Handle focus event
-     * @returns {void}
      */
     this.handleFocus = () => {
       this.hasFocus = true;
     };
     /**
      * Handle blur event
-     * @returns {void}
      */
     this.handleBlur = () => {
+      if (this.value === '-')
+        this.value = '';
       // Display Error
       this.displayError();
       this.hasFocus = false;
     };
     /**
      * Check if input is valid
-     * @returns {void}
      */
     this.checkValidity = () => {
       this.valid = this.readonly || this.disabled || this.getInputError() === null;
@@ -48,7 +46,6 @@ export class MgInputNumeric {
     };
     /**
      * Set input error message
-     * @returns {void}
      */
     this.setErrorMessage = () => {
       // Set error message
@@ -65,7 +62,7 @@ export class MgInputNumeric {
     };
     /**
      * Get input error code
-     * @returns {null | InputError} error code
+     * @returns error code
      */
     this.getInputError = () => {
       let inputError = null;
@@ -93,18 +90,17 @@ export class MgInputNumeric {
     };
     /**
      * Format value based on type
-     * @param {number} value value to format
-     * @returns {string} formated local value
+     * @param value - value to format
+     * @returns formated local value
      */
     this.formatValue = (value) => (this.type === 'currency' ? localeCurrency(value, this.locale, this.currency) : localeNumber(value, this.locale));
     /**
      * Validate append slot
-     * @returns {void}
      */
     this.validateAppendSlot = () => {
       const slotAppendInput = this.element.querySelector('[slot="append-input"]');
       if (slotAppendInput !== null) {
-        this.classList.add(slotAppendInput.nodeName === 'MG-BUTTON' ? 'mg-input--is-input-group-append' : 'mg-input--is-append-input-slot-content');
+        this.classCollection.add(slotAppendInput.nodeName === 'MG-BUTTON' ? 'mg-input--is-input-group-append' : 'mg-input--is-append-input-slot-content');
       }
     };
     this.value = undefined;
@@ -128,7 +124,7 @@ export class MgInputNumeric {
     this.decimalLength = 2;
     this.valid = undefined;
     this.invalid = undefined;
-    this.classList = new ClassList(['mg-input--numeric']);
+    this.classCollection = new ClassList(['mg-input--numeric']);
     this.errorMessage = undefined;
     this.hasFocus = false;
   }
@@ -140,7 +136,7 @@ export class MgInputNumeric {
       // Regex
       const regex = this.type === 'integer' ? /^-?\d+$/ : /^-?\d+[.,]?\d*$/;
       // Filter input
-      if (newValue === '' || (newValue.match(regex) && integer.length <= this.integerLength && decimal.length <= (this.type === 'integer' ? 0 : this.decimalLength))) {
+      if (['', '-'].includes(newValue) || (newValue.match(regex) && integer.length <= this.integerLength && decimal.length <= (this.type === 'integer' ? 0 : this.decimalLength))) {
         this.storedValue = newValue;
       }
       else if (this.storedValue !== undefined) {
@@ -187,7 +183,6 @@ export class MgInputNumeric {
   }
   /**
    * Public method to display errors
-   * @returns {Promise<void>}
    */
   async displayError() {
     this.checkValidity();
@@ -197,7 +192,7 @@ export class MgInputNumeric {
   /**
    * Displayed value in input
    * Change on focus/blur
-   * @returns {MgInputNumeric['value'] | MgInputNumeric['readonlyValue']} display value
+   * @returns display value
    */
   displayValue() {
     return this.hasFocus ? this.value : this.readonlyValue;
@@ -207,7 +202,7 @@ export class MgInputNumeric {
    *************/
   /**
    * Check if component props are well configured on init
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentWillLoad() {
     // Get locales
@@ -230,10 +225,10 @@ export class MgInputNumeric {
   }
   /**
    * Render
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (h(MgInput, { identifier: this.identifier, classList: this.classList, 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, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("input", { type: "text", class: "mg-input__box", value: this.displayValue(), id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: el => {
+    return (h(MgInput, { 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, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("input", { type: "text", class: "mg-input__box", value: this.displayValue(), id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: el => {
         if (el !== null)
           this.input = el;
       } }), h("slot", { name: "append-input" })));
@@ -627,7 +622,7 @@ export class MgInputNumeric {
   }
   static get states() {
     return {
-      "classList": {},
+      "classCollection": {},
       "errorMessage": {},
       "hasFocus": {}
     };
@@ -680,10 +675,7 @@ export class MgInputNumeric {
         },
         "docs": {
           "text": "Public method to display errors",
-          "tags": [{
-              "name": "returns",
-              "text": undefined
-            }]
+          "tags": []
         }
       }
     };

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

@@ -58,7 +58,7 @@ export class MgInputPassword {
     this.helpText = undefined;
     this.valid = undefined;
     this.invalid = undefined;
-    this.classList = new ClassList(['mg-input--password']);
+    this.classCollection = new ClassList(['mg-input--password']);
     this.errorMessage = undefined;
   }
   handleValue(newValue) {
@@ -76,7 +76,6 @@ export class MgInputPassword {
   }
   /**
    * Public method to display errors
-   * @returns {Promise<void>}
    */
   async displayError() {
     this.checkValidity();
@@ -88,7 +87,7 @@ export class MgInputPassword {
    *************/
   /**
    * Check if component props are well configured on init
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentWillLoad() {
     // Get locales
@@ -102,10 +101,10 @@ export class MgInputPassword {
   }
   /**
    * Render
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (h(MgInput, { identifier: this.identifier, classList: this.classList, 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.value !== undefined ? '•'.repeat(this.value.length) : undefined, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("input", { type: "password", class: "mg-input__box", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, onInput: this.handleInput, onBlur: this.handleBlur, ref: el => {
+    return (h(MgInput, { 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.value !== undefined ? '•'.repeat(this.value.length) : undefined, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("input", { type: "password", class: "mg-input__box", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, onInput: this.handleInput, onBlur: this.handleBlur, ref: el => {
         if (el !== null)
           this.input = el;
       } })));
@@ -394,7 +393,7 @@ export class MgInputPassword {
   }
   static get states() {
     return {
-      "classList": {},
+      "classCollection": {},
       "errorMessage": {}
     };
   }
@@ -446,10 +445,7 @@ export class MgInputPassword {
         },
         "docs": {
           "text": "Public method to display errors",
-          "tags": [{
-              "name": "returns",
-              "text": undefined
-            }]
+          "tags": []
         }
       }
     };

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

@@ -7,8 +7,8 @@ import { ClassList, allItemsAreString } from '../../../../utils/components.utils
 import { initLocales } from '../../../../locales';
 /**
  * type Option validation function
- * @param {RadioOption} option radio option
- * @returns {boolean} radio option type is valid
+ * @param option - radio option
+ * @returns radio option type is valid
  */
 const isOption = (option) => typeof option === 'object' && typeof option.title === 'string' && option.value !== undefined;
 export class MgInputRadio {
@@ -22,8 +22,7 @@ export class MgInputRadio {
     this.hasDisplayedError = false;
     /**
      * Handle input event
-     * @param {event} event input event
-     * @returns {void}
+     * @param event - input event
      */
     this.handleInput = (event) => {
       this.checkValidity();
@@ -31,7 +30,6 @@ export class MgInputRadio {
     };
     /**
      * Handle blur event
-     * @returns {void}
      */
     this.handleBlur = () => {
       this.checkValidity();
@@ -39,7 +37,6 @@ export class MgInputRadio {
     };
     /**
      * Check if input is valid
-     * @returns {void}
      */
     this.checkValidity = () => {
       this.valid = this.readonly || this.disabled || this.getInvalidElement() === undefined;
@@ -49,7 +46,6 @@ export class MgInputRadio {
     };
     /**
      * Set input error message
-     * @returns {void}
      */
     this.setErrorMessage = () => {
       const invalidElement = this.getInvalidElement();
@@ -61,7 +57,7 @@ export class MgInputRadio {
     };
     /**
      * get invalid element
-     * @returns {HTMLInputElement} element
+     * @returns element
      */
     this.getInvalidElement = () => this.inputs.find((input) => !input.disabled && !input.readOnly && !input.checkValidity());
     this.value = undefined;
@@ -79,7 +75,7 @@ export class MgInputRadio {
     this.helpText = undefined;
     this.valid = undefined;
     this.invalid = undefined;
-    this.classList = new ClassList(['mg-input--radio']);
+    this.classCollection = new ClassList(['mg-input--radio']);
     this.errorMessage = undefined;
     this.options = undefined;
   }
@@ -115,7 +111,6 @@ export class MgInputRadio {
   }
   /**
    * Public method to display errors
-   * @returns {Promise<void>}
    */
   async displayError() {
     this.checkValidity();
@@ -127,7 +122,7 @@ export class MgInputRadio {
    *************/
   /**
    * Check if component props are well configured on init
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentWillLoad() {
     // Get locales
@@ -143,10 +138,10 @@ export class MgInputRadio {
   }
   /**
    * Render
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, disabled: this.disabled, readonly: this.readonly, mgWidth: undefined, value: this.value, readonlyValue: this.value, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: true }, h("ul", { class: { 'mg-input__input-group-container': true, 'mg-input__input-group-container--vertical': this.inputVerticalList }, role: "list" }, this.options.map((input, index) => (h("li", { key: input.title, class: { 'mg-input__input-group': true, 'mg-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "radio", id: this.identifier + '_' + index, name: this.identifier, value: index, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: el => {
+    return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, disabled: this.disabled, readonly: this.readonly, mgWidth: undefined, value: this.value, readonlyValue: this.value, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: true }, h("ul", { class: { 'mg-input__input-group-container': true, 'mg-input__input-group-container--vertical': this.inputVerticalList }, role: "list" }, this.options.map((input, index) => (h("li", { key: input.title, class: { 'mg-input__input-group': true, 'mg-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "radio", id: this.identifier + '_' + index, name: this.identifier, value: index, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: el => {
         if (el !== null)
           this.inputs[index] = el;
       } }), h("label", { htmlFor: this.identifier + '_' + index }, input.title)))))));
@@ -434,7 +429,7 @@ export class MgInputRadio {
   }
   static get states() {
     return {
-      "classList": {},
+      "classCollection": {},
       "errorMessage": {},
       "options": {}
     };
@@ -487,10 +482,7 @@ export class MgInputRadio {
         },
         "docs": {
           "text": "Public method to display errors",
-          "tags": [{
-              "name": "returns",
-              "text": undefined
-            }]
+          "tags": []
         }
       }
     };

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

@@ -6,31 +6,27 @@ import { ClassList, allItemsAreString } from '../../../../utils/components.utils
 import { initLocales } from '../../../../locales';
 /**
  * Check if item is a well configured option
- * @param {unknown} option select option
- * @returns {boolean} select option type is valid
+ * @param option - select option
+ * @returns select option type is valid
  */
 const isOption = (option) => typeof option === 'object' && typeof option.title === 'string';
 /**
  * Check if items[] is SelectOption
- * @param {unknown[]} items select option
- * @returns {boolean} select option array type is valid
+ * @param items - select option
+ * @returns select option array type is valid
  */
 const allItemsAreOptions = (items) => Array.isArray(items) && items.every(item => isOption(item));
 /**
  * Check if item is a well configured optgroup
- * @param {unknown} optgroup select option
- * @returns {boolean} select optgroup type is valid
+ * @param optgroup - select option
+ * @returns select optgroup type is valid
  */
 const isOptGroup = (optgroup) => typeof optgroup === 'object' && typeof optgroup.group === 'string' && allItemsAreOptions(optgroup.options);
 /**
  * Group options
- * @param {(SelectOption | OptGroup)[]} acc reduce accumulator
- * @param {SelectOption} item item to add
- * @param {string} item.group item group
- * @param {string} item.title item title
- * @param {unknown} item.value item value
- * @param {boolean} item.disabled is item disabled
- * @returns {(SelectOption | OptGroup)[]} grouped options
+ * @param acc - reduce accumulator
+ * @param item - item to add
+ * @returns grouped options
  */
 const groupOptions = (acc, { group, title, value, disabled }) => {
   if (group !== undefined) {
@@ -56,7 +52,6 @@ export class MgInputSelect {
     this.hasDisplayedError = false;
     /**
      * Handle input event
-     * @returns {void}
      */
     this.handleInput = () => {
       this.updateValue();
@@ -65,14 +60,13 @@ export class MgInputSelect {
     };
     /**
      * Method to compare item.title with input.value
-     * @param {SelectOption} item item to compare with
-     * @returns {boolean} truthy if input.value is an item
+     * @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); };
     /**
      * value props setter
-     * @param {MgInputSelect['value']} newValue value to update with
-     * @returns {void}
+     * @param newValue - value to update with
      */
     this.setValue = (newValue) => {
       this.checkValidity();
@@ -80,7 +74,6 @@ export class MgInputSelect {
     };
     /**
      * Update value from input.value
-     * @returns {void}
      */
     this.updateValue = () => {
       if (this.input.value === '') {
@@ -106,7 +99,7 @@ export class MgInputSelect {
     };
     /**
      * Input value is disabled
-     * @returns {boolean} truthy if input value is disabled
+     * @returns truthy if input value is disabled
      */
     this.isDisabledValue = () => { var _a; return allItemsAreOptions(this.options) && ((_a = this.options.find(this.isInputValue)) === null || _a === void 0 ? void 0 : _a.disabled) === true; };
     /**
@@ -131,8 +124,8 @@ export class MgInputSelect {
     };
     /**
      * Render option
-     * @param {SelectOption} option to render
-     * @returns {HTMLElement} render option
+     * @param option - to render
+     * @returns render option
      */
     this.renderOption = (option) => (h("option", { key: option.title, value: option.title, selected: JSON.stringify(this.value) === JSON.stringify(option.value), disabled: option.disabled }, option.title));
     this.value = undefined;
@@ -153,7 +146,7 @@ export class MgInputSelect {
     this.helpText = undefined;
     this.valid = undefined;
     this.invalid = undefined;
-    this.classList = new ClassList(['mg-input--select']);
+    this.classCollection = new ClassList(['mg-input--select']);
     this.errorMessage = undefined;
     this.options = undefined;
     this.valueExist = undefined;
@@ -211,7 +204,6 @@ export class MgInputSelect {
   }
   /**
    * Public method to display errors
-   * @returns {Promise<void>}
    */
   async displayError() {
     this.checkValidity();
@@ -223,7 +215,7 @@ export class MgInputSelect {
    *************/
   /**
    * Check if component props are well configured on init
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentWillLoad() {
     // Get locales
@@ -244,10 +236,10 @@ export class MgInputSelect {
   }
   /**
    * Render
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (h(MgInput, { identifier: this.identifier, classList: this.classList, 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, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("select", { class: "mg-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, onInput: this.handleInput, onBlur: this.handleBlur, ref: el => {
+    return (h(MgInput, { 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, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("select", { class: "mg-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, 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
@@ -592,7 +584,7 @@ export class MgInputSelect {
   }
   static get states() {
     return {
-      "classList": {},
+      "classCollection": {},
       "errorMessage": {},
       "options": {},
       "valueExist": {},
@@ -651,10 +643,7 @@ export class MgInputSelect {
         },
         "docs": {
           "text": "Public method to display errors",
-          "tags": [{
-              "name": "returns",
-              "text": undefined
-            }]
+          "tags": []
         }
       }
     };

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

@@ -15,7 +15,6 @@ export class MgInputText {
     this.hasDisplayedError = false;
     /**
      * Handle input event
-     * @returns {void}
      */
     this.handleInput = () => {
       this.checkValidity();
@@ -26,26 +25,23 @@ export class MgInputText {
     };
     /**
      * Handle focus event
-     * @returns {void}
      */
     this.handleFocus = () => {
-      this.classList.add(this.classFocus);
-      this.classList = new ClassList(this.classList.classes);
+      this.classCollection.add(this.classFocus);
+      this.classCollection = new ClassList(this.classCollection.classes);
     };
     /**
      * Handle blur event
-     * @returns {void}
      */
     this.handleBlur = () => {
       // Manage focus
-      this.classList.delete(this.classFocus);
-      this.classList = new ClassList(this.classList.classes);
+      this.classCollection.delete(this.classFocus);
+      this.classCollection = new ClassList(this.classCollection.classes);
       // Display Error
       this.displayError();
     };
     /**
      * Check if input is valid
-     * @returns {void}
      */
     this.checkValidity = () => {
       var _a;
@@ -56,7 +52,6 @@ export class MgInputText {
     };
     /**
      * Set input error message
-     * @returns {void}
      */
     this.setErrorMessage = () => {
       // Set error message
@@ -72,7 +67,6 @@ export class MgInputText {
     };
     /**
      * Validate pattern configuration
-     * @returns {void}
      */
     this.validatePattern = () => {
       if (this.pattern !== undefined &&
@@ -84,16 +78,15 @@ export class MgInputText {
     };
     /**
      * Validate append slot
-     * @returns {void}
      */
     this.validateAppendSlot = () => {
       const slotAppendInput = Array.from(this.element.querySelectorAll('[slot="append-input"]'));
       if (slotAppendInput.length === 1) {
-        this.classList.add(slotAppendInput[0].nodeName === 'MG-BUTTON' ? this.classIsInputGroupAppend : 'mg-input--is-append-input-slot-content');
+        this.classCollection.add(slotAppendInput[0].nodeName === 'MG-BUTTON' ? this.classIsInputGroupAppend : 'mg-input--is-append-input-slot-content');
       }
       else if (slotAppendInput.filter(slot => slot.nodeName === 'MG-BUTTON').length > 1) {
-        this.classList.add(this.classIsInputGroupAppend);
-        this.classList.add('mg-input--has-buttons-group-append');
+        this.classCollection.add(this.classIsInputGroupAppend);
+        this.classCollection.add('mg-input--has-buttons-group-append');
       }
     };
     this.value = undefined;
@@ -117,7 +110,7 @@ export class MgInputText {
     this.helpText = undefined;
     this.valid = undefined;
     this.invalid = undefined;
-    this.classList = new ClassList(['mg-input--text']);
+    this.classCollection = new ClassList(['mg-input--text']);
     this.errorMessage = undefined;
   }
   handleValue(newValue) {
@@ -125,10 +118,10 @@ export class MgInputText {
   }
   validateIcon(newValue) {
     if (newValue !== undefined) {
-      this.classList.add(this.classHasIcon);
+      this.classCollection.add(this.classHasIcon);
     }
     else {
-      this.classList.delete(this.classHasIcon);
+      this.classCollection.delete(this.classHasIcon);
     }
   }
   handleValidityChange(newValue, _oldValue, prop) {
@@ -143,14 +136,12 @@ export class MgInputText {
   }
   /**
    * Public method to play input focus
-   * @returns {Promise<void>}
    */
   async setFocus() {
     this.input.focus();
   }
   /**
    * Public method to display errors
-   * @returns {Promise<void>}
    */
   async displayError() {
     this.checkValidity();
@@ -162,7 +153,7 @@ export class MgInputText {
    *************/
   /**
    * Check if component props are well configured on init
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentWillLoad() {
     // Get locales
@@ -181,10 +172,10 @@ export class MgInputText {
   }
   /**
    * Render
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [this.characterLeftId], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("div", { class: "mg-input__with-character-left", style: {
+    return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [this.characterLeftId], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("div", { class: "mg-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(),
@@ -582,7 +573,7 @@ export class MgInputText {
   }
   static get states() {
     return {
-      "classList": {},
+      "classCollection": {},
       "errorMessage": {}
     };
   }
@@ -634,10 +625,7 @@ export class MgInputText {
         },
         "docs": {
           "text": "Public method to play input focus",
-          "tags": [{
-              "name": "returns",
-              "text": undefined
-            }]
+          "tags": []
         }
       },
       "displayError": {
@@ -653,10 +641,7 @@ export class MgInputText {
         },
         "docs": {
           "text": "Public method to display errors",
-          "tags": [{
-              "name": "returns",
-              "text": undefined
-            }]
+          "tags": []
         }
       }
     };