@mgdis/mg-components 5.10.0 → 5.11.0

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

@@ -3,10 +3,11 @@ import { h } from '@stencil/core';
 import { MgInput } from '../MgInput';
 import { ClassList } from '../../../../utils/components.utils';
 import { initLocales } from '../../../../locales';
+import { checkboxTypes } from './mg-input-checkbox.conf';
 /**
  * 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);
@@ -19,9 +20,11 @@ export class MgInputCheckbox {
     this.inputs = [];
     // hasDisplayedError (triggered by blur event)
     this.hasDisplayedError = false;
+    // style
+    this.baseClassName = 'mg-input--checkbox';
     /**
      * Handle input event
-     * @param {InputEvent} event input event
+     * @param event - input event
      */
     this.handleInput = (event) => {
       this.checkboxItems = this.checkboxItems.map(item => {
@@ -33,6 +36,21 @@ export class MgInputCheckbox {
       this.value = this.checkboxItems.map(o => ({ value: o.value, title: o.title, disabled: o.disabled }));
       this.checkValidity();
     };
+    /**
+     * Keyboard handler
+     * @param event - to trak "tab" key
+     */
+    this.handleKeydown = (event) => {
+      var _a;
+      // track "Tab" key event when popover display (is "multi" type selected)
+      if (event.key === 'Tab' && ((_a = this.popover) === null || _a === void 0 ? void 0 : _a.display)) {
+        const enableInputs = this.checkboxItems.filter(input => !input.disabled).map(({ id }) => id);
+        const originInputIndex = enableInputs.findIndex(id => id === event.target.id);
+        // close popover when tab trigger focus outside its DOM
+        if ((originInputIndex + 1 >= enableInputs.length && !event.shiftKey) || (originInputIndex === 0 && event.shiftKey))
+          this.popover.display = false;
+      }
+    };
     /**
      * Handle blur event
      */
@@ -43,7 +61,7 @@ export class MgInputCheckbox {
     };
     /**
      * get invalid element
-     * @returns {HTMLInputElement} element
+     * @returns element
      */
     this.getInvalidElement = () => this.inputs.find((input) => input !== null && !input.disabled && !input.checkValidity());
     /**
@@ -55,6 +73,19 @@ export class MgInputCheckbox {
       // We need to send valid event even if it is the same value
       this.inputValid.emit(this.valid);
     };
+    /**
+     * Render button text
+     * @param selectedValuesNb - nb of selected values
+     * @returns translated message
+     */
+    this.renderButtonText = (selectedValuesNb) => {
+      let messageKey = 'editButton';
+      if (this.disabled)
+        messageKey = 'showButton';
+      else if (selectedValuesNb < 1)
+        messageKey = 'selectButton';
+      return this.messages.input.checkbox[messageKey];
+    };
     /**
      * Set input error message
      */
@@ -66,7 +97,13 @@ export class MgInputCheckbox {
         this.errorMessage = this.messages.errors.required;
       }
     };
+    /**
+     * Method to get mg-popover identifier
+     * @returns MgPopover identifier
+     */
+    this.getMgPopoverIdentifier = () => `${this.identifier}-input-mg-popover`;
     this.value = undefined;
+    this.type = checkboxTypes[0];
     this.identifier = undefined;
     this.name = this.identifier;
     this.label = undefined;
@@ -80,14 +117,14 @@ export class MgInputCheckbox {
     this.helpText = undefined;
     this.valid = undefined;
     this.invalid = undefined;
-    this.classList = new ClassList(['mg-input--checkbox']);
+    this.classCollection = new ClassList([this.baseClassName]);
     this.errorMessage = undefined;
     this.checkboxItems = [];
   }
   validateValue(newValue) {
     if (isCheckboxItems(newValue)) {
       this.checkboxItems = newValue.map((item, index) => ({
-        id: `${this.identifier}_${index.toString()}`,
+        id: `${this.identifier}_${index}`,
         title: item.title,
         value: item.value,
         disabled: item.disabled,
@@ -98,6 +135,18 @@ export class MgInputCheckbox {
       throw new Error('<mg-input-checkbox> prop "value" is required and all values must be the same type, CheckboxItem.');
     }
   }
+  validateType(newValue) {
+    if (!checkboxTypes.includes(newValue)) {
+      throw new Error('<mg-input-checkbox> prop "type" must be a CheckboxType.');
+    }
+    else {
+      const className = `${this.baseClassName}-multi`;
+      if (newValue === 'multi')
+        this.classCollection.add(className);
+      else
+        this.classCollection.delete(className);
+    }
+  }
   handleValidityChange(newValue, _oldValue, prop) {
     this.inputs.forEach(input => {
       input[prop] = newValue;
@@ -108,9 +157,15 @@ export class MgInputCheckbox {
       this.hasDisplayedError = false;
     }
   }
+  validateDisabled(newValue) {
+    const className = `${this.baseClassName}-multi-disabled`;
+    if (newValue && this.type === 'multi')
+      this.classCollection.add(className);
+    else
+      this.classCollection.delete(className);
+  }
   /**
    * Public method to display errors
-   * @returns {Promise<void>}
    */
   async displayError() {
     this.checkValidity();
@@ -122,13 +177,17 @@ export class MgInputCheckbox {
    *************/
   /**
    * Check if component props are well configured on init
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentWillLoad() {
     // Get locales
     this.messages = initLocales(this.element).messages;
+    if (this.type === 'multi')
+      this.element.dataset.mgPopoverGuard = this.getMgPopoverIdentifier();
     // Validate
     this.validateValue(this.value);
+    this.validateDisabled(this.disabled);
+    this.validateType(this.type);
     // Check validity when component is ready
     // return a promise to process action only in the FIRST render().
     // https://stenciljs.com/docs/component-lifecycle#componentwillload
@@ -137,18 +196,40 @@ export class MgInputCheckbox {
     }, 0);
   }
   /**
-   * Render
-   * @returns {HTMLElement} HTML Element
+   * render checkbox multi 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
+  renderCheckboxMulti() {
+    const selectedValuesNb = this.checkboxItems.filter(({ value }) => value).length;
+    return (h("div", { class: "mg-input__input-container mg-input__input-checkbox-multi" }, h("strong", null, this.messages.input.checkbox[selectedValuesNb > 1 ? 'selectedValues' : 'selectedValue'].replace('{nb}', selectedValuesNb)), h("mg-popover", { arrowHide: true, identifier: this.getMgPopoverIdentifier(), ref: el => {
+        if (Boolean(el))
+          this.popover = el;
+      } }, h("mg-button", { variant: "secondary" }, h("mg-icon", { icon: "list" }), this.renderButtonText(selectedValuesNb)), h("div", { slot: "content" }, this.renderCheckboxes()))));
+  }
+  /**
+   * Render checkbox element
+   * @returns HTML Element
+   */
+  renderCheckboxes() {
+    return (h("ul", { class: {
+        'mg-input__input-group-container': true,
+        'mg-input__input-group-container--vertical': this.inputVerticalList || (this.type === 'multi' && !this.readonly),
+        'mg-input__input-checkbox-multi-inputs': this.type === 'multi' && !this.readonly,
+      }, role: "list" }, this.checkboxItems
       .filter(item => {
       return !this.readonly || item.value;
     })
-      .map((input, index) => (h("li", { key: input.id, class: { 'mg-input__input-group': true, 'mg-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "checkbox", id: input.id, name: this.identifier, value: input.value && input.value.toString(), checked: Boolean(input.value), disabled: this.readonly || this.disabled || input.disabled, required: this.required, indeterminate: input.value === null, onInput: this.handleInput, onBlur: this.handleBlur, ref: el => {
+      .map((input, index) => (h("li", { key: input.id, class: { 'mg-input__input-group': true, 'mg-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "checkbox", id: input.id, name: this.identifier, value: input.value && input.value.toString(), checked: Boolean(input.value), disabled: this.readonly || this.disabled || input.disabled, required: this.required, indeterminate: input.value === null, onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeydown, ref: el => {
         if (el !== null)
           this.inputs[index] = el;
-      } }), h("label", { htmlFor: input.id }, input.title)))))));
+      } }), h("label", { htmlFor: input.id }, input.title))))));
+  }
+  /**
+   * Render
+   * @returns HTML Element
+   */
+  render() {
+    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 }, this.type === 'checkbox' || this.readonly ? this.renderCheckboxes() : this.renderCheckboxMulti()));
   }
   static get is() { return "mg-input-checkbox"; }
   static get encapsulation() { return "shadow"; }
@@ -184,6 +265,29 @@ export class MgInputCheckbox {
           "text": "Component value\nIf item.value is `null`, checkbox will be indeterminate by default\nRequired"
         }
       },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "CheckboxType",
+          "resolved": "\"checkbox\" | \"multi\"",
+          "references": {
+            "CheckboxType": {
+              "location": "import",
+              "path": "./mg-input-checkbox.conf"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define checkbox type"
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "checkboxTypes[0]"
+      },
       "identifier": {
         "type": "string",
         "mutable": false,
@@ -415,7 +519,7 @@ export class MgInputCheckbox {
   }
   static get states() {
     return {
-      "classList": {},
+      "classCollection": {},
       "errorMessage": {},
       "checkboxItems": {}
     };
@@ -476,10 +580,7 @@ export class MgInputCheckbox {
         },
         "docs": {
           "text": "Public method to display errors",
-          "tags": [{
-              "name": "returns",
-              "text": undefined
-            }]
+          "tags": []
         }
       }
     };
@@ -489,6 +590,9 @@ export class MgInputCheckbox {
     return [{
         "propName": "value",
         "methodName": "validateValue"
+      }, {
+        "propName": "type",
+        "methodName": "validateType"
       }, {
         "propName": "required",
         "methodName": "handleValidityChange"
@@ -498,6 +602,9 @@ export class MgInputCheckbox {
       }, {
         "propName": "disabled",
         "methodName": "handleValidityChange"
+      }, {
+        "propName": "disabled",
+        "methodName": "validateDisabled"
       }];
   }
 }

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

@@ -84,7 +84,7 @@
 .mg-input__input + .mg-input__help-text, .mg-input__input + .mg-input__error {
   margin-top: 0.5rem;
 }
-.mg-input__input .mg-input__box:disabled, .mg-input__input-group--disabled label, .mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle {
+.mg-input__input .mg-input__box:disabled, .mg-input__input-group--disabled label, .mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle, .mg-input.mg-input--checkbox-multi-disabled .mg-input__input strong {
   opacity: var(--mg-disabled-opacity);
 }
 

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

@@ -36,7 +36,7 @@ export class MgInputDate {
     };
     /**
      * get input error code
-     * @returns {null | InputError} error code
+     * @returns error code
      */
     this.getInputError = () => {
       var _a, _b;
@@ -61,7 +61,6 @@ export class MgInputDate {
     };
     /**
      * Check input errors
-     * @returns {void}
      */
     this.setErrorMessage = () => {
       var _a;
@@ -99,7 +98,7 @@ export class MgInputDate {
     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) {
@@ -130,7 +129,6 @@ export class MgInputDate {
   }
   /**
    * Public method to display errors
-   * @returns {Promise<void>}
    */
   async displayError() {
     this.checkValidity();
@@ -142,7 +140,7 @@ export class MgInputDate {
    *************/
   /**
    * Check if component props are well configured on init
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentWillLoad() {
     // Get locales
@@ -162,10 +160,10 @@ export class MgInputDate {
   }
   /**
    * 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;
       } })));
@@ -448,7 +446,7 @@ export class MgInputDate {
   }
   static get states() {
     return {
-      "classList": {},
+      "classCollection": {},
       "errorMessage": {}
     };
   }
@@ -500,10 +498,7 @@ export class MgInputDate {
         },
         "docs": {
           "text": "Public method to display errors",
-          "tags": [{
-              "name": "returns",
-              "text": undefined
-            }]
+          "tags": []
         }
       }
     };

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

@@ -84,7 +84,7 @@
 .mg-input__input + .mg-input__help-text, .mg-input__input + .mg-input__error {
   margin-top: 0.5rem;
 }
-.mg-input__input .mg-input__box:disabled, .mg-input__input-group--disabled label, .mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle {
+.mg-input__input .mg-input__box:disabled, .mg-input__input-group--disabled label, .mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle, .mg-input.mg-input--checkbox-multi-disabled .mg-input__input strong {
   opacity: var(--mg-disabled-opacity);
 }
 

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.css

@@ -84,7 +84,7 @@
 .mg-input__input + .mg-input__help-text, .mg-input__input + .mg-input__error {
   margin-top: 0.5rem;
 }
-.mg-input__input .mg-input__box:disabled, .mg-input__input-group--disabled label, .mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle {
+.mg-input__input .mg-input__box:disabled, .mg-input__input-group--disabled label, .mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle, .mg-input.mg-input--checkbox-multi-disabled .mg-input__input strong {
   opacity: var(--mg-disabled-opacity);
 }
 

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.css

@@ -84,7 +84,7 @@
 .mg-input__input + .mg-input__help-text, .mg-input__input + .mg-input__error {
   margin-top: 0.5rem;
 }
-.mg-input__input .mg-input__box:disabled, .mg-input__input-group--disabled label, .mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle {
+.mg-input__input .mg-input__box:disabled, .mg-input__input-group--disabled label, .mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle, .mg-input.mg-input--checkbox-multi-disabled .mg-input__input strong {
   opacity: var(--mg-disabled-opacity);
 }