@mgdis/mg-components 5.10.0 → 5.10.1

package/dist/components/mg-input-checkbox.js

@@ -10,8 +10,8 @@ const mgInputCheckboxCss = ":host{display:block}.mg-input{display:flex;align-ite
 
 /**
  * type CheckboxItem validation function
- * @param {unknown} items Checkbox item
- * @returns {boolean} match item type
+ * @param items - Checkbox item
+ * @returns match item type
  */
 const isCheckboxItems = (items) => Array.isArray(items) &&
   items.every(item => typeof item === 'object' && typeof item.title === 'string' && (item.value === null || typeof item.value === 'boolean') && item.value !== undefined);
@@ -31,7 +31,7 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     this.hasDisplayedError = false;
     /**
      * Handle input event
-     * @param {InputEvent} event input event
+     * @param event - input event
      */
     this.handleInput = (event) => {
       this.checkboxItems = this.checkboxItems.map(item => {
@@ -53,7 +53,7 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     };
     /**
      * get invalid element
-     * @returns {HTMLInputElement} element
+     * @returns element
      */
     this.getInvalidElement = () => this.inputs.find((input) => input !== null && !input.disabled && !input.checkValidity());
     /**
@@ -90,7 +90,7 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     this.helpText = undefined;
     this.valid = undefined;
     this.invalid = undefined;
-    this.classList = new ClassList(['mg-input--checkbox']);
+    this.classCollection = new ClassList(['mg-input--checkbox']);
     this.errorMessage = undefined;
     this.checkboxItems = [];
   }
@@ -120,7 +120,6 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
   }
   /**
    * Public method to display errors
-   * @returns {Promise<void>}
    */
   async displayError() {
     this.checkValidity();
@@ -132,7 +131,7 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
    *************/
   /**
    * Check if component props are well configured on init
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentWillLoad() {
     // Get locales
@@ -148,10 +147,10 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
   }
   /**
    * 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.readonly ? this.required : undefined, readonly: undefined, mgWidth: undefined, disabled: this.disabled, value: this.value && this.value.toString(), readonlyValue: undefined, tooltip: !this.readonly ? this.tooltip : undefined, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined, isFieldset: true }, h("ul", { class: { 'mg-input__input-group-container': true, 'mg-input__input-group-container--vertical': this.inputVerticalList }, role: "list" }, this.checkboxItems
+    return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, readonly: undefined, mgWidth: undefined, disabled: this.disabled, value: this.value && this.value.toString(), readonlyValue: undefined, tooltip: !this.readonly ? this.tooltip : undefined, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined, isFieldset: true }, h("ul", { class: { 'mg-input__input-group-container': true, 'mg-input__input-group-container--vertical': this.inputVerticalList }, role: "list" }, this.checkboxItems
       .filter(item => {
       return !this.readonly || item.value;
     })
@@ -183,7 +182,7 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     "helpText": [1, "help-text"],
     "valid": [1028],
     "invalid": [1028],
-    "classList": [32],
+    "classCollection": [32],
     "errorMessage": [32],
     "checkboxItems": [32],
     "displayError": [64]

package/dist/components/mg-input-date.js

@@ -53,7 +53,7 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     };
     /**
      * get input error code
-     * @returns {null | InputError} error code
+     * @returns error code
      */
     this.getInputError = () => {
       var _a, _b;
@@ -78,7 +78,6 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     };
     /**
      * Check input errors
-     * @returns {void}
      */
     this.setErrorMessage = () => {
       var _a;
@@ -116,7 +115,7 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.invalid = undefined;
     this.min = undefined;
     this.max = undefined;
-    this.classList = new ClassList(['mg-input--date']);
+    this.classCollection = new ClassList(['mg-input--date']);
     this.errorMessage = undefined;
   }
   validateValue(newValue) {
@@ -147,7 +146,6 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   }
   /**
    * Public method to display errors
-   * @returns {Promise<void>}
    */
   async displayError() {
     this.checkValidity();
@@ -159,7 +157,7 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
    *************/
   /**
    * Check if component props are well configured on init
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentWillLoad() {
     // Get locales
@@ -179,10 +177,10 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   }
   /**
    * 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: undefined, disabled: this.disabled, value: this.value, readonlyValue: localeDate(this.value, this.locale), tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("input", { type: "date", class: "mg-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, 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: undefined, disabled: this.disabled, value: this.value, readonlyValue: localeDate(this.value, this.locale), tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("input", { type: "date", class: "mg-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, onInput: this.handleInput, onBlur: this.handleBlur, ref: el => {
         if (el !== null)
           this.input = el;
       } })));
@@ -213,7 +211,7 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "invalid": [1028],
     "min": [1],
     "max": [1],
-    "classList": [32],
+    "classCollection": [32],
     "errorMessage": [32],
     "displayError": [64]
   }]);

package/dist/components/mg-input-numeric.js

@@ -31,7 +31,6 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     this.hasDisplayedError = false;
     /**
      * Handle input event
-     * @returns {void}
      */
     this.handleInput = () => {
       // Check validity
@@ -43,23 +42,22 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     };
     /**
      * 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;
@@ -69,7 +67,6 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     };
     /**
      * Set input error message
-     * @returns {void}
      */
     this.setErrorMessage = () => {
       // Set error message
@@ -86,7 +83,7 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     };
     /**
      * Get input error code
-     * @returns {null | InputError} error code
+     * @returns error code
      */
     this.getInputError = () => {
       let inputError = null;
@@ -114,18 +111,17 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     };
     /**
      * 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;
@@ -149,7 +145,7 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     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;
   }
@@ -161,7 +157,7 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
       // 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) {
@@ -208,7 +204,6 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
   }
   /**
    * Public method to display errors
-   * @returns {Promise<void>}
    */
   async displayError() {
     this.checkValidity();
@@ -218,7 +213,7 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
   /**
    * 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;
@@ -228,7 +223,7 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
    *************/
   /**
    * Check if component props are well configured on init
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentWillLoad() {
     // Get locales
@@ -251,10 +246,10 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
   }
   /**
    * 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" })));
@@ -292,7 +287,7 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     "decimalLength": [2, "decimal-length"],
     "valid": [1028],
     "invalid": [1028],
-    "classList": [32],
+    "classCollection": [32],
     "errorMessage": [32],
     "hasFocus": [32],
     "displayError": [64]

package/dist/components/mg-input-password.js

@@ -69,7 +69,7 @@ const MgInputPassword$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     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) {
@@ -87,7 +87,6 @@ const MgInputPassword$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
   }
   /**
    * Public method to display errors
-   * @returns {Promise<void>}
    */
   async displayError() {
     this.checkValidity();
@@ -99,7 +98,7 @@ const MgInputPassword$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
    *************/
   /**
    * Check if component props are well configured on init
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentWillLoad() {
     // Get locales
@@ -113,10 +112,10 @@ const MgInputPassword$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
   }
   /**
    * 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;
       } })));
@@ -145,7 +144,7 @@ const MgInputPassword$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     "helpText": [1, "help-text"],
     "valid": [1028],
     "invalid": [1028],
-    "classList": [32],
+    "classCollection": [32],
     "errorMessage": [32],
     "displayError": [64]
   }]);

package/dist/components/mg-input-radio.js

@@ -10,8 +10,8 @@ const mgInputRadioCss = ":host{display:block}.mg-input{display:flex;align-items:
 
 /**
  * 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;
 const MgInputRadio$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -30,8 +30,7 @@ const MgInputRadio$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     this.hasDisplayedError = false;
     /**
      * Handle input event
-     * @param {event} event input event
-     * @returns {void}
+     * @param event - input event
      */
     this.handleInput = (event) => {
       this.checkValidity();
@@ -39,7 +38,6 @@ const MgInputRadio$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     };
     /**
      * Handle blur event
-     * @returns {void}
      */
     this.handleBlur = () => {
       this.checkValidity();
@@ -47,7 +45,6 @@ const MgInputRadio$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     };
     /**
      * Check if input is valid
-     * @returns {void}
      */
     this.checkValidity = () => {
       this.valid = this.readonly || this.disabled || this.getInvalidElement() === undefined;
@@ -57,7 +54,6 @@ const MgInputRadio$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     };
     /**
      * Set input error message
-     * @returns {void}
      */
     this.setErrorMessage = () => {
       const invalidElement = this.getInvalidElement();
@@ -69,7 +65,7 @@ const MgInputRadio$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     };
     /**
      * get invalid element
-     * @returns {HTMLInputElement} element
+     * @returns element
      */
     this.getInvalidElement = () => this.inputs.find((input) => !input.disabled && !input.readOnly && !input.checkValidity());
     this.value = undefined;
@@ -87,7 +83,7 @@ const MgInputRadio$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     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;
   }
@@ -123,7 +119,6 @@ const MgInputRadio$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   }
   /**
    * Public method to display errors
-   * @returns {Promise<void>}
    */
   async displayError() {
     this.checkValidity();
@@ -135,7 +130,7 @@ const MgInputRadio$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
    *************/
   /**
    * Check if component props are well configured on init
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentWillLoad() {
     // Get locales
@@ -151,10 +146,10 @@ const MgInputRadio$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   }
   /**
    * 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)))))));
@@ -184,7 +179,7 @@ const MgInputRadio$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     "helpText": [1, "help-text"],
     "valid": [1028],
     "invalid": [1028],
-    "classList": [32],
+    "classCollection": [32],
     "errorMessage": [32],
     "options": [32],
     "displayError": [64]

package/dist/components/mg-input-select2.js

@@ -10,31 +10,27 @@ const mgInputSelectCss = ":host{display:block}.mg-input{display:flex;align-items
 
 /**
  * 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) {
@@ -65,7 +61,6 @@ const MgInputSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.hasDisplayedError = false;
     /**
      * Handle input event
-     * @returns {void}
      */
     this.handleInput = () => {
       this.updateValue();
@@ -74,14 +69,13 @@ const MgInputSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     };
     /**
      * 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();
@@ -89,7 +83,6 @@ const MgInputSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     };
     /**
      * Update value from input.value
-     * @returns {void}
      */
     this.updateValue = () => {
       if (this.input.value === '') {
@@ -115,7 +108,7 @@ const MgInputSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     };
     /**
      * 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; };
     /**
@@ -140,8 +133,8 @@ const MgInputSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     };
     /**
      * 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;
@@ -162,7 +155,7 @@ const MgInputSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     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;
@@ -220,7 +213,6 @@ const MgInputSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   }
   /**
    * Public method to display errors
-   * @returns {Promise<void>}
    */
   async displayError() {
     this.checkValidity();
@@ -232,7 +224,7 @@ const MgInputSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
    *************/
   /**
    * Check if component props are well configured on init
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentWillLoad() {
     // Get locales
@@ -253,10 +245,10 @@ const MgInputSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   }
   /**
    * 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
@@ -290,7 +282,7 @@ const MgInputSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "helpText": [1, "help-text"],
     "valid": [1028],
     "invalid": [1028],
-    "classList": [32],
+    "classCollection": [32],
     "errorMessage": [32],
     "options": [32],
     "valueExist": [32],