@mgdis/mg-components 5.1.0 → 5.2.0

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

@@ -4,8 +4,8 @@ import { ClassList } from '../../../../utils/components.utils';
 import { initLocales } from '../../../../locales';
 export class MgInputPassword {
   constructor() {
-    // hasError (triggered by blur event)
-    this.hasError = false;
+    // hasDisplayedError (triggered by blur event)
+    this.hasDisplayedError = false;
     /**
      * Input name
      * If not set the value equals the identifier
@@ -40,8 +40,8 @@ export class MgInputPassword {
      */
     this.handleInput = () => {
       this.checkValidity();
-      if (this.hasError) {
-        this.checkError();
+      if (this.hasDisplayedError) {
+        this.setErrorMessage();
       }
       this.value = this.input.value;
     };
@@ -55,19 +55,16 @@ export class MgInputPassword {
      * Check if input is valid
      */
     this.checkValidity = () => {
-      if (!this.readonly && this.input !== undefined) {
-        const validity = this.input.checkValidity();
-        // Set validity
-        this.valid = validity;
-        this.invalid = !validity;
-        //Send event
-        this.inputValid.emit(validity);
-      }
+      var _a;
+      this.valid = this.readonly || this.disabled || (((_a = this.input) === null || _a === void 0 ? void 0 : _a.checkValidity) !== undefined ? this.input.checkValidity() : true);
+      this.invalid = !this.valid;
+      // We need to send valid event even if it is the same value
+      this.inputValid.emit(this.valid);
     };
     /**
-     * Check input errors
+     * Set input error message
      */
-    this.checkError = () => {
+    this.setErrorMessage = () => {
       // Set error message
       this.errorMessage = undefined;
       // required
@@ -79,6 +76,16 @@ export class MgInputPassword {
   handleValue(newValue) {
     this.valueChange.emit(newValue);
   }
+  handleValidityChange(newValue, _oldValue, prop) {
+    if (this.input !== undefined) {
+      this.input[prop] = newValue;
+      this.checkValidity();
+      if (this.hasDisplayedError) {
+        this.setErrorMessage();
+        this.hasDisplayedError = false;
+      }
+    }
+  }
   /**
    * Public method to display errors
    *
@@ -86,8 +93,8 @@ export class MgInputPassword {
    */
   async displayError() {
     this.checkValidity();
-    this.checkError();
-    this.hasError = this.invalid;
+    this.setErrorMessage();
+    this.hasDisplayedError = this.invalid;
   }
   /*************
    * Lifecycle *
@@ -113,7 +120,10 @@ export class MgInputPassword {
    * @returns {HTMLElement} 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 => (this.input = el) })));
+    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 => {
+        if (el !== null)
+          this.input = el;
+      } })));
   }
   static get is() { return "mg-input-password"; }
   static get encapsulation() { return "shadow"; }
@@ -464,6 +474,15 @@ export class MgInputPassword {
     return [{
         "propName": "value",
         "methodName": "handleValue"
+      }, {
+        "propName": "required",
+        "methodName": "handleValidityChange"
+      }, {
+        "propName": "readonly",
+        "methodName": "handleValidityChange"
+      }, {
+        "propName": "disabled",
+        "methodName": "handleValidityChange"
       }];
   }
 }

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

@@ -18,6 +18,8 @@ export class MgInputRadio {
      ************/
     // HTML selector
     this.inputs = [];
+    // hasDisplayedError (triggered by blur event)
+    this.hasDisplayedError = false;
     /**
      * Input name
      * If not set the value equals the identifier
@@ -68,7 +70,7 @@ export class MgInputRadio {
      */
     this.handleBlur = () => {
       this.checkValidity();
-      this.checkError();
+      this.setErrorMessage();
     };
     /**
      * Check if input is valid
@@ -76,21 +78,17 @@ export class MgInputRadio {
      * @returns {void}
      */
     this.checkValidity = () => {
-      if (!this.readonly) {
-        const validity = this.getInvalidElement() === undefined;
-        // Set validity
-        this.valid = validity;
-        this.invalid = !validity;
-        //Send event
-        this.inputValid.emit(validity);
-      }
+      this.valid = this.readonly || this.disabled || this.getInvalidElement() === undefined;
+      this.invalid = !this.valid;
+      // We need to send valid event even if it is the same value
+      this.inputValid.emit(this.valid);
     };
     /**
-     * Check input errors
+     * Set input error message
      *
      * @returns {void}
      */
-    this.checkError = () => {
+    this.setErrorMessage = () => {
       const invalidElement = this.getInvalidElement();
       // Set error message
       this.errorMessage = undefined;
@@ -103,7 +101,7 @@ export class MgInputRadio {
      *
      * @returns {HTMLInputElement} element
      */
-    this.getInvalidElement = () => this.inputs.find((element) => !element.disabled && !element.checkValidity());
+    this.getInvalidElement = () => this.inputs.find((input) => !input.disabled && !input.readOnly && !input.checkValidity());
   }
   handleValue(newValue) {
     this.valueChange.emit(newValue);
@@ -125,6 +123,16 @@ export class MgInputRadio {
       throw new Error('<mg-input-radio> prop "items" is required and all items must be the same type, string or RadioOption.');
     }
   }
+  handleValidityChange(newValue, _oldValue, prop) {
+    this.inputs.forEach(input => {
+      input[prop] = newValue;
+    });
+    this.checkValidity();
+    if (this.hasDisplayedError) {
+      this.setErrorMessage();
+      this.hasDisplayedError = false;
+    }
+  }
   /**
    * Public method to display errors
    *
@@ -132,7 +140,8 @@ export class MgInputRadio {
    */
   async displayError() {
     this.checkValidity();
-    this.checkError();
+    this.setErrorMessage();
+    this.hasDisplayedError = this.invalid;
   }
   /*************
    * Lifecycle *
@@ -160,7 +169,10 @@ export class MgInputRadio {
    * @returns {HTMLElement} 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 } }, this.options.map((input, index) => (h("li", { 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 => this.inputs.push(el) }), h("label", { htmlFor: this.identifier + '_' + index }, input.title)))))));
+    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 } }, this.options.map((input, index) => (h("li", { 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)))))));
   }
   static get is() { return "mg-input-radio"; }
   static get encapsulation() { return "shadow"; }
@@ -514,6 +526,15 @@ export class MgInputRadio {
       }, {
         "propName": "items",
         "methodName": "validateItems"
+      }, {
+        "propName": "required",
+        "methodName": "handleValidityChange"
+      }, {
+        "propName": "readonly",
+        "methodName": "handleValidityChange"
+      }, {
+        "propName": "disabled",
+        "methodName": "handleValidityChange"
       }];
   }
 }

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

@@ -18,8 +18,7 @@ export default {
   parameters: { actions: { handles: ['value-change', 'input-valid'] } },
 };
 /**
- * 1. camelCase arguments must be written in the template, for exemple labelOnTop must be placed in the template as label-on-top={args.labelOnTop}
- * 2. boolean arguments with a default true value must be added like display-character-left={args.displayCharacterLeft ? 'true' : 'false'}
+ * Template
  *
  * @param {any} args component arguments
  * @returns {HTMLElement} HTMLElement
@@ -40,7 +39,7 @@ MgInputSelect.args = {
   required: true,
   readonly: false,
   disabled: false,
-  items: ['blu', 'bli', 'blo', 'bla'],
+  items: ['blu', 'bli', 'blo', 'le long libellé qui va faire sortir le champ mg-input-select de sa zone de confort'],
   mgWidth: undefined,
   // Tooltip
   tooltip: 'This is a tooltip',

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

@@ -185,21 +185,40 @@
 .mg-input.mg-input--width-full:not(.mg-input--label-on-top) {
   justify-content: space-between;
 }
+.mg-input.mg-input--width-full.mg-input--label-on-top .mg-input__box {
+  width: 100%;
+}
 .mg-input.mg-input--width-full .mg-input__input-container {
   flex: auto;
   width: 100%;
 }
 .mg-input.mg-input--width-full .mg-input__input-container .mg-input__box {
+  max-width: 100%;
+}
+.mg-input:not(.mg-input--label-on-top) .mg-input__box {
   width: 100%;
+  max-width: calc(17.7rem + var(--mg-inputs-spacer) * 2);
+  min-width: 5rem;
 }
-.mg-input.mg-input--width-16 .mg-input__box {
-  width: 21rem;
+.mg-input.mg-input--width-16 .mg-input__input-container {
+  width: 100%;
 }
-.mg-input.mg-input--width-4 .mg-input__box {
-  width: 7rem;
+.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__input {
+  width: 100%;
+  max-width: 21rem;
 }
-.mg-input.mg-input--width-2 .mg-input__box {
-  width: 5rem;
+.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__with-character-left {
+  width: 100%;
+}
+.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__box {
+  max-width: 21rem;
+  min-width: 100%;
+}
+.mg-input.mg-input--width-4 .mg-input__input-container .mg-input__box {
+  max-width: 7rem;
+}
+.mg-input.mg-input--width-2 .mg-input__input-container .mg-input__box {
+  max-width: 5rem;
 }
 
 /**
@@ -228,4 +247,7 @@
   padding-top: 0;
   padding-bottom: 0;
   padding-right: 1rem;
+}
+.mg-input.mg-input--select:not(.mg-input--label-on-top) .mg-input__box {
+  max-width: unset;
 }

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

@@ -42,8 +42,8 @@ const groupOptions = (acc, { group, title, value, disabled }) => {
 };
 export class MgInputSelect {
   constructor() {
-    // hasError (triggered by blur event)
-    this.hasError = false;
+    // hasDisplayedError (triggered by blur event)
+    this.hasDisplayedError = false;
     /**
      * Input name
      * If not set the value equals the identifier
@@ -82,8 +82,8 @@ export class MgInputSelect {
      */
     this.handleInput = () => {
       this.checkValidity();
-      if (this.hasError) {
-        this.checkError();
+      if (this.hasDisplayedError) {
+        this.setErrorMessage();
       }
       if (this.input.value !== '') {
         this.value = allItemsAreString(this.items) ? this.input.value : this.items.find(item => item.title === this.input.value).value;
@@ -102,19 +102,16 @@ export class MgInputSelect {
      * Check if input is valid
      */
     this.checkValidity = () => {
-      if (!this.readonly && this.input !== undefined) {
-        const validity = this.input.checkValidity && this.input.checkValidity();
-        // Set validity
-        this.valid = validity;
-        this.invalid = !validity;
-        //Send event
-        this.inputValid.emit(validity);
-      }
+      var _a;
+      this.valid = this.readonly || this.disabled || (((_a = this.input) === null || _a === void 0 ? void 0 : _a.checkValidity) !== undefined ? this.input.checkValidity() : true);
+      this.invalid = !this.valid;
+      // We need to send valid event even if it is the same value
+      this.inputValid.emit(this.valid);
     };
     /**
-     * Check input errors
+     * Set input error message
      */
-    this.checkError = () => {
+    this.setErrorMessage = () => {
       // Set error message
       this.errorMessage = undefined;
       if (!this.valid && this.input.validity.valueMissing) {
@@ -153,6 +150,16 @@ export class MgInputSelect {
       throw new Error('<mg-input-select> prop "items" is required and all items must be the same type, string or Option.');
     }
   }
+  handleValidityChange(newValue, _oldValue, prop) {
+    if (this.input !== undefined) {
+      this.input[prop] = newValue;
+      this.checkValidity();
+      if (this.hasDisplayedError) {
+        this.setErrorMessage();
+        this.hasDisplayedError = false;
+      }
+    }
+  }
   /**
    * Public method to display errors
    *
@@ -160,8 +167,8 @@ export class MgInputSelect {
    */
   async displayError() {
     this.checkValidity();
-    this.checkError();
-    this.hasError = this.invalid;
+    this.setErrorMessage();
+    this.hasDisplayedError = this.invalid;
   }
   /*************
    * Lifecycle *
@@ -193,7 +200,10 @@ export class MgInputSelect {
    * @returns {HTMLElement} 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("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 => (this.input = el) }, (!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder
+    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("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
     h("option", { value: "", disabled: this.placeholderDisabled && this.valueExist }, this.placeholder)), this.options.map(option => option.group !== undefined ? (h("optgroup", { label: option.group }, option.options.map(optgroup => (h("option", { value: optgroup.title, selected: JSON.stringify(this.value) === JSON.stringify(optgroup.value), disabled: optgroup.disabled }, optgroup.title))))) : (h("option", { value: option.title, selected: JSON.stringify(this.value) === JSON.stringify(option.value), disabled: option.disabled }, option.title))))));
   }
   static get is() { return "mg-input-select"; }
@@ -606,6 +616,15 @@ export class MgInputSelect {
       }, {
         "propName": "items",
         "methodName": "validateItems"
+      }, {
+        "propName": "required",
+        "methodName": "handleValidityChange"
+      }, {
+        "propName": "readonly",
+        "methodName": "handleValidityChange"
+      }, {
+        "propName": "disabled",
+        "methodName": "handleValidityChange"
       }];
   }
 }

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

@@ -185,21 +185,40 @@
 .mg-input.mg-input--width-full:not(.mg-input--label-on-top) {
   justify-content: space-between;
 }
+.mg-input.mg-input--width-full.mg-input--label-on-top .mg-input__box {
+  width: 100%;
+}
 .mg-input.mg-input--width-full .mg-input__input-container {
   flex: auto;
   width: 100%;
 }
 .mg-input.mg-input--width-full .mg-input__input-container .mg-input__box {
+  max-width: 100%;
+}
+.mg-input:not(.mg-input--label-on-top) .mg-input__box {
+  width: 100%;
+  max-width: calc(17.7rem + var(--mg-inputs-spacer) * 2);
+  min-width: 5rem;
+}
+.mg-input.mg-input--width-16 .mg-input__input-container {
+  width: 100%;
+}
+.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__input {
+  width: 100%;
+  max-width: 21rem;
+}
+.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__with-character-left {
   width: 100%;
 }
-.mg-input.mg-input--width-16 .mg-input__box {
-  width: 21rem;
+.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__box {
+  max-width: 21rem;
+  min-width: 100%;
 }
-.mg-input.mg-input--width-4 .mg-input__box {
-  width: 7rem;
+.mg-input.mg-input--width-4 .mg-input__input-container .mg-input__box {
+  max-width: 7rem;
 }
-.mg-input.mg-input--width-2 .mg-input__box {
-  width: 5rem;
+.mg-input.mg-input--width-2 .mg-input__input-container .mg-input__box {
+  max-width: 5rem;
 }
 
 /**

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

@@ -7,12 +7,12 @@ export class MgInputText {
     /************
      * Internal *
      ************/
-    // classes
+    // Classes
     this.classFocus = 'is-focused';
     this.classIsInputGroupAppend = 'mg-input--is-input-group-append';
     this.classHasIcon = 'mg-input--has-icon';
-    // hasError (triggered by blur event)
-    this.hasError = false;
+    // hasDisplayedError (triggered by blur event)
+    this.hasDisplayedError = false;
     /**
      * Input name
      * If not set the value equals the identifier
@@ -61,8 +61,8 @@ export class MgInputText {
      */
     this.handleInput = () => {
       this.checkValidity();
-      if (this.hasError) {
-        this.checkError();
+      if (this.hasDisplayedError) {
+        this.setErrorMessage();
       }
       this.value = this.input.value;
     };
@@ -93,21 +93,18 @@ export class MgInputText {
      * @returns {void}
      */
     this.checkValidity = () => {
-      if (!this.readonly && this.input !== undefined) {
-        const validity = this.input.checkValidity();
-        // Set validity
-        this.valid = validity;
-        this.invalid = !validity;
-        //Send event
-        this.inputValid.emit(validity);
-      }
+      var _a;
+      this.valid = this.readonly || this.disabled || (((_a = this.input) === null || _a === void 0 ? void 0 : _a.checkValidity) !== undefined ? this.input.checkValidity() : true);
+      this.invalid = !this.valid;
+      // We need to send valid event even if it is the same value
+      this.inputValid.emit(this.valid);
     };
     /**
-     * Check input errors
+     * Set input error message
      *
      * @returns {void}
      */
-    this.checkError = () => {
+    this.setErrorMessage = () => {
       // Set error message
       this.errorMessage = undefined;
       // Does not match pattern
@@ -120,7 +117,7 @@ export class MgInputText {
       }
     };
     /**
-     * Validate patern configuration
+     * Validate pattern configuration
      *
      * @returns {void}
      */
@@ -159,6 +156,16 @@ export class MgInputText {
       this.classList.delete(this.classHasIcon);
     }
   }
+  handleValidityChange(newValue, _oldValue, prop) {
+    if (this.input !== undefined) {
+      this.input[prop] = newValue;
+      this.checkValidity();
+      if (this.hasDisplayedError) {
+        this.setErrorMessage();
+        this.hasDisplayedError = false;
+      }
+    }
+  }
   /**
    * Public method to play input focus
    *
@@ -174,8 +181,8 @@ export class MgInputText {
    */
   async displayError() {
     this.checkValidity();
-    this.checkError();
-    this.hasError = this.invalid;
+    this.setErrorMessage();
+    this.hasDisplayedError = this.invalid;
   }
   /*************
    * Lifecycle *
@@ -210,7 +217,10 @@ export class MgInputText {
         '--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", { type: this.type, class: "mg-input__box", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, maxlength: this.maxlength, disabled: this.disabled, required: this.required, pattern: this.pattern, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: el => (this.input = el) }), this.displayCharacterLeft && this.maxlength > 0 && (h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength }))), h("slot", { name: "append-input" })));
+      } }, this.icon !== undefined && h("mg-icon", { icon: this.icon }), h("input", { type: this.type, class: "mg-input__box", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, maxlength: this.maxlength, disabled: this.disabled, required: this.required, pattern: this.pattern, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: el => {
+        if (el !== null)
+          this.input = el;
+      } }), this.displayCharacterLeft && this.maxlength > 0 && (h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength }))), h("slot", { name: "append-input" })));
   }
   static get is() { return "mg-input-text"; }
   static get encapsulation() { return "shadow"; }
@@ -688,6 +698,15 @@ export class MgInputText {
       }, {
         "propName": "icon",
         "methodName": "validateIcon"
+      }, {
+        "propName": "required",
+        "methodName": "handleValidityChange"
+      }, {
+        "propName": "readonly",
+        "methodName": "handleValidityChange"
+      }, {
+        "propName": "disabled",
+        "methodName": "handleValidityChange"
       }];
   }
 }

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

@@ -185,21 +185,40 @@
 .mg-input.mg-input--width-full:not(.mg-input--label-on-top) {
   justify-content: space-between;
 }
+.mg-input.mg-input--width-full.mg-input--label-on-top .mg-input__box {
+  width: 100%;
+}
 .mg-input.mg-input--width-full .mg-input__input-container {
   flex: auto;
   width: 100%;
 }
 .mg-input.mg-input--width-full .mg-input__input-container .mg-input__box {
+  max-width: 100%;
+}
+.mg-input:not(.mg-input--label-on-top) .mg-input__box {
+  width: 100%;
+  max-width: calc(17.7rem + var(--mg-inputs-spacer) * 2);
+  min-width: 5rem;
+}
+.mg-input.mg-input--width-16 .mg-input__input-container {
+  width: 100%;
+}
+.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__input {
+  width: 100%;
+  max-width: 21rem;
+}
+.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__with-character-left {
   width: 100%;
 }
-.mg-input.mg-input--width-16 .mg-input__box {
-  width: 21rem;
+.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__box {
+  max-width: 21rem;
+  min-width: 100%;
 }
-.mg-input.mg-input--width-4 .mg-input__box {
-  width: 7rem;
+.mg-input.mg-input--width-4 .mg-input__input-container .mg-input__box {
+  max-width: 7rem;
 }
-.mg-input.mg-input--width-2 .mg-input__box {
-  width: 5rem;
+.mg-input.mg-input--width-2 .mg-input__input-container .mg-input__box {
+  max-width: 5rem;
 }
 
 /**