@mgdis/mg-components 3.1.0 → 4.0.0

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

@@ -0,0 +1,300 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { M as MgInput } from './MgInput.js';
+import { c as createID, C as ClassList } from './components.utils.js';
+import { i as initLocales } from './index2.js';
+import { d as defineCustomElement$4 } from './mg-character-left2.js';
+import { d as defineCustomElement$3 } from './mg-icon2.js';
+import { d as defineCustomElement$2 } from './mg-input-title2.js';
+import { d as defineCustomElement$1 } from './mg-tooltip2.js';
+
+const mgInputTextCss = ":host{display:block}.mg-input{display:flex;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input mg-input-title{flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:flex;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container mg-icon{display:flex}.mg-input__input-container .mg-input__help-text,.mg-input__input-container .mg-input__error{text-align:start;font-size:1.2rem}.mg-input__input{display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input.mg-input__input--has-error .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input__input+.mg-input__help-text,.mg-input__input+.mg-input__error{margin-top:0.5rem}.mg-input__error{display:inline-block;margin-top:0.2rem;padding:0.3rem 0.8rem;border-radius:0.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-input__box{padding:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2) var(--mg-inputs-spacer);height:var(--default-size);box-sizing:border-box;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));font-family:inherit;color:hsl(var(--color-dark));font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:focus{box-shadow:0 0 0.6rem hsla(var(--mg-inputs-color-shadow-focus-hsl), 0.5)}.mg-input__box:disabled{opacity:0.3}.mg-input.mg-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--is-input-group-append .mg-input__box{margin-right:-0.1rem;border-top-right-radius:0%;border-bottom-right-radius:0%}.mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible{outline-style:solid;outline-offset:-0.2rem;outline-width:0.2rem}.mg-input.mg-input--is-input-group-append.mg-input--readonly slot[name=append-input]{display:none}.mg-input.mg-input--label-on-top .mg-input__box{width:auto;max-width:100%}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius)}.mg-input.mg-input--is-append-input-slot-content:not(.mg-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input.mg-input--width-full:not(.mg-input--label-on-top){justify-content:space-between}.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{width:100%}.mg-input.mg-input--width-16 .mg-input__box{width:21rem}.mg-input.mg-input--width-4 .mg-input__box{width:7rem}.mg-input.mg-input--width-2 .mg-input__box{width:5rem}.mg-input mg-character-left{opacity:0.6;font-size:1.1rem}.mg-input.mg-input--has-display-character-left .mg-input__input+.mg-input__help-text,.mg-input.mg-input--has-display-character-left .mg-input__input+.mg-input__error{margin-top:0}.sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}.mg-input.mg-input--has-icon .mg-input__with-character-left>mg-icon{position:absolute;top:50%;left:var(--mg-inputs-spacer);color:var(--mg-inputs-color);transform:translateY(-50%)}.mg-input.mg-input--has-icon .mg-input__with-character-left .mg-input__box{padding-left:calc(var(--mg-icon-regular-size) + var(--mg-inputs-spacer) * 2)}.mg-input__with-character-left{position:relative;display:inline-flex;width:100%}.mg-input.is-focused .mg-input__with-character-left .mg-input__box{padding-right:calc(var(--mg-character-left-message-length) * 1ch + 0.8rem)}.mg-input__with-character-left mg-character-left{position:absolute;display:none;top:50%;right:1rem;opacity:0.6;transform:translateY(-50%);font-size:1.1rem}.mg-input.is-focused .mg-input__with-character-left mg-character-left{display:block}";
+
+const MgInputText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.valueChange = createEvent(this, "value-change", 7);
+    this.inputValid = createEvent(this, "input-valid", 7);
+    /************
+     * Internal *
+     ************/
+    // 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;
+    /**
+     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+     * If not set, it will be created.
+     */
+    this.identifier = createID('mg-input-text');
+    /**
+     * Input name
+     * If not set the value equals the identifier
+     */
+    this.name = this.identifier;
+    /**
+     * Input type
+     */
+    this.type = 'text';
+    /**
+     * Define if label is visible
+     */
+    this.labelHide = false;
+    /**
+     * Input max length
+     */
+    this.maxlength = 400;
+    /**
+     * Define if input is required
+     */
+    this.required = false;
+    /**
+     * Define if input is readonly
+     */
+    this.readonly = false;
+    /**
+     * Define if input is disabled
+     */
+    this.disabled = false;
+    /**
+     * Define input width
+     */
+    this.mgWidth = 'full';
+    /**
+     * Define if component should display character left
+     */
+    this.displayCharacterLeft = true;
+    /**
+     * Component classes
+     */
+    this.classList = new ClassList(['mg-input--text']);
+    /**
+     * Handle input event
+     *
+     * @returns {void}
+     */
+    this.handleInput = () => {
+      this.checkValidity();
+      if (this.hasError) {
+        this.checkError();
+      }
+      this.value = this.input.value;
+    };
+    /**
+     * Handle focus event
+     *
+     * @returns {void}
+     */
+    this.handleFocus = () => {
+      this.classList.add(this.classFocus);
+      this.classList = new ClassList(this.classList.classes);
+    };
+    /**
+     * Handle blur event
+     *
+     * @returns {void}
+     */
+    this.handleBlur = () => {
+      // Manage focus
+      this.classList.delete(this.classFocus);
+      this.classList = new ClassList(this.classList.classes);
+      // Display Error
+      this.displayError();
+    };
+    /**
+     * Check if input is valid
+     *
+     * @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);
+      }
+    };
+    /**
+     * Check input errors
+     *
+     * @returns {void}
+     */
+    this.checkError = () => {
+      // Set error message
+      this.errorMessage = undefined;
+      // Does not match pattern
+      if (!this.valid && this.input.validity.patternMismatch) {
+        this.errorMessage = this.patternErrorMessage;
+      }
+      // required
+      else if (!this.valid && this.input.validity.valueMissing) {
+        this.errorMessage = this.messages.errors.required;
+      }
+    };
+    /**
+     * Validate patern configuration
+     *
+     * @returns {void}
+     */
+    this.validatePattern = () => {
+      if (this.pattern &&
+        typeof this.pattern === 'string' &&
+        this.pattern !== '' &&
+        (this.patternErrorMessage === undefined || typeof this.patternErrorMessage !== 'string' || this.patternErrorMessage === '')) {
+        throw new Error('<mg-input-text> prop "pattern" must be paired with the prop "patternErrorMessage"');
+      }
+    };
+    /**
+     * 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');
+      }
+      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');
+      }
+    };
+  }
+  handleValue(newValue) {
+    this.valueChange.emit(newValue);
+  }
+  validateIcon(newValue) {
+    if (newValue !== undefined) {
+      this.classList.add(this.classHasIcon);
+    }
+    else {
+      this.classList.delete(this.classHasIcon);
+    }
+  }
+  /**
+   * 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();
+    this.checkError();
+    this.hasError = this.invalid;
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Check if component props are well configured on init
+   *
+   * @returns {ReturnType<typeof setTimeout>} timeout
+   */
+  componentWillLoad() {
+    // Get locales
+    this.messages = initLocales(this.element).messages;
+    this.characterLeftId = `${this.identifier}-character-left`;
+    // Validate
+    this.validateIcon(this.icon);
+    this.validatePattern();
+    this.validateAppendSlot();
+    // Check validity when component is ready
+    // return a promise to process action only in the FIRST render().
+    // https://stenciljs.com/docs/component-lifecycle#componentwillload
+    return setTimeout(() => {
+      this.checkValidity();
+    }, 0);
+  }
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} 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: {
+        '--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 && (h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength }))), h("slot", { name: "append-input" })));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "value": ["handleValue"],
+    "icon": ["validateIcon"]
+  }; }
+  static get style() { return mgInputTextCss; }
+}, [1, "mg-input-text", {
+    "value": [1537],
+    "identifier": [1],
+    "name": [1],
+    "label": [1],
+    "type": [1],
+    "icon": [1],
+    "labelOnTop": [4, "label-on-top"],
+    "labelHide": [4, "label-hide"],
+    "placeholder": [1],
+    "maxlength": [2],
+    "required": [4],
+    "readonly": [4],
+    "disabled": [4],
+    "mgWidth": [8, "mg-width"],
+    "pattern": [1],
+    "patternErrorMessage": [1, "pattern-error-message"],
+    "tooltip": [1],
+    "displayCharacterLeft": [4, "display-character-left"],
+    "helpText": [1, "help-text"],
+    "valid": [1028],
+    "invalid": [1028],
+    "classList": [32],
+    "errorMessage": [32],
+    "setFocus": [64],
+    "displayError": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["mg-input-text", "mg-character-left", "mg-icon", "mg-input-title", "mg-tooltip"];
+  components.forEach(tagName => { switch (tagName) {
+    case "mg-input-text":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, MgInputText);
+      }
+      break;
+    case "mg-character-left":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "mg-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "mg-input-title":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "mg-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { MgInputText as M, defineCustomElement as d };

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

@@ -1,13 +1,13 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { I as InputClass, M as MgInput } from './MgInput.js';
+import { M as MgInput } from './MgInput.js';
 import { c as createID, C as ClassList } from './components.utils.js';
-import { m as messages } from './index2.js';
+import { i as initLocales } from './index2.js';
 import { d as defineCustomElement$5 } from './mg-character-left2.js';
 import { d as defineCustomElement$4 } from './mg-icon2.js';
 import { d as defineCustomElement$3 } from './mg-input-title2.js';
 import { d as defineCustomElement$2 } from './mg-tooltip2.js';
 
-const mgInputTextareaCss = ":host{display:block}.mg-input{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;min-height:var(--default-size);max-width:100%;}.mg-input.is-not-valid{color:hsl(var(--color-danger))}.mg-input.is-not-valid .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input mg-input-title{-ms-flex-negative:var(--mg-inputs-shrink, 1);flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{-ms-flex-direction:column;flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:-ms-flexbox;display:flex;-ms-flex-align:baseline;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{-ms-flex-negative:1;flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:-ms-inline-flexbox;display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:-ms-inline-flexbox;display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container mg-icon{display:-ms-flexbox;display:flex}.mg-input__input{display:-ms-flexbox;display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input+*{text-align:start;margin-top:0.5rem}.mg-input__box{padding:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2) var(--mg-inputs-spacer);height:var(--default-size);-webkit-box-sizing:border-box;box-sizing:border-box;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));font-family:inherit;color:hsl(var(--color-dark));font-size:var(--font-size)}.mg-input__box::-webkit-input-placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box::-moz-placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:-ms-input-placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box::-ms-input-placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:focus{-webkit-box-shadow:0 0 0.6rem hsla(var(--mg-inputs-color-shadow-focus-hsl), 0.5);box-shadow:0 0 0.6rem hsla(var(--mg-inputs-color-shadow-focus-hsl), 0.5)}.mg-input__box:disabled{opacity:0.3}.mg-input.mg-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--is-input-group-append .mg-input__box{margin-right:-0.1rem;border-top-right-radius:0%;border-bottom-right-radius:0%}.mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible{outline-style:solid;outline-offset:-0.2rem;outline-width:0.2rem}.mg-input.mg-input--is-input-group-append.mg-input--readonly slot[name=append-input]{display:none}.mg-input.mg-input--is-append-input-slot-content:not(.mg-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input.mg-input--width-full:not(.mg-input--label-on-top){-ms-flex-pack:justify;justify-content:space-between}.mg-input.mg-input--width-full .mg-input__input-container{-ms-flex:auto;flex:auto;width:100%}.mg-input.mg-input--width-full .mg-input__input-container .mg-input__box{width:100%}.mg-input.mg-input--width-16 .mg-input__box{width:21rem}.mg-input.mg-input--width-4 .mg-input__box{width:7rem}.mg-input.mg-input--width-2 .mg-input__box{width:5rem}.mg-input mg-character-left{display:none}.mg-input.is-focused mg-character-left{display:block}.sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}.mg-input .mg-input__box{height:auto}@-moz-document url-prefix(){.mg-input__box{overflow-x:hidden}}";
+const mgInputTextareaCss = ":host{display:block}.mg-input{display:flex;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input mg-input-title{flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:flex;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container mg-icon{display:flex}.mg-input__input-container .mg-input__help-text,.mg-input__input-container .mg-input__error{text-align:start;font-size:1.2rem}.mg-input__input{display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input.mg-input__input--has-error .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input__input+.mg-input__help-text,.mg-input__input+.mg-input__error{margin-top:0.5rem}.mg-input__error{display:inline-block;margin-top:0.2rem;padding:0.3rem 0.8rem;border-radius:0.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-input__box{padding:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2) var(--mg-inputs-spacer);height:var(--default-size);box-sizing:border-box;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));font-family:inherit;color:hsl(var(--color-dark));font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:focus{box-shadow:0 0 0.6rem hsla(var(--mg-inputs-color-shadow-focus-hsl), 0.5)}.mg-input__box:disabled{opacity:0.3}.mg-input.mg-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--is-input-group-append .mg-input__box{margin-right:-0.1rem;border-top-right-radius:0%;border-bottom-right-radius:0%}.mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible{outline-style:solid;outline-offset:-0.2rem;outline-width:0.2rem}.mg-input.mg-input--is-input-group-append.mg-input--readonly slot[name=append-input]{display:none}.mg-input.mg-input--label-on-top .mg-input__box{width:auto;max-width:100%}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius)}.mg-input.mg-input--is-append-input-slot-content:not(.mg-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input.mg-input--width-full:not(.mg-input--label-on-top){justify-content:space-between}.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{width:100%}.mg-input.mg-input--width-16 .mg-input__box{width:21rem}.mg-input.mg-input--width-4 .mg-input__box{width:7rem}.mg-input.mg-input--width-2 .mg-input__box{width:5rem}.mg-input mg-character-left{opacity:0.6;font-size:1.1rem}.mg-input.mg-input--has-display-character-left .mg-input__input+.mg-input__help-text,.mg-input.mg-input--has-display-character-left .mg-input__input+.mg-input__error{margin-top:0}.sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}.mg-input .mg-input__box{display:block;height:auto;resize:none}.mg-input .mg-input__box.mg-input__box--resizable{resize:both}.mg-input .mg-input__box.mg-input__box--resizable-horizontal{resize:horizontal}.mg-input .mg-input__box.mg-input__box--resizable-vertical{resize:vertical}.mg-input__with-character-left{width:100%}.mg-input__with-character-left mg-character-left{display:block;visibility:hidden;margin-top:0.2rem;text-align:end}.mg-input.is-focused .mg-input__with-character-left mg-character-left{visibility:visible}@-moz-document url-prefix(){.mg-input__box{overflow-x:hidden}}";
 
 const MgInputTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -15,12 +15,15 @@ const MgInputTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     this.__registerHost();
     this.__attachShadow();
     this.valueChange = createEvent(this, "value-change", 7);
+    this.inputValid = createEvent(this, "input-valid", 7);
     /************
      * Internal *
      ************/
     // classes
     this.classFocus = 'is-focused';
-    this.classError = InputClass.ERROR;
+    this.classHasDisplayCharacterLeft = 'mg-input--has-display-character-left';
+    // hasError (triggered by blur event)
+    this.hasError = false;
     /**
      * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
      * If not set, it will be created.
@@ -54,15 +57,19 @@ const MgInputTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     /**
      * Define input width
      */
-    this.width = 'full';
+    this.mgWidth = 'full';
     /**
-     * Define input pattern error message
+     * Define the number of visible text lines for the control
      */
     this.rows = 3;
     /**
      * Define if component should display character left
      */
     this.displayCharacterLeft = true;
+    /**
+     * Define if input is resizable
+     */
+    this.resizable = 'none';
     /**
      * Component classes
      */
@@ -71,9 +78,11 @@ const MgInputTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
      * Handle input event
      */
     this.handleInput = () => {
-      this.checkValidity();
+      if (this.hasError) {
+        this.checkValidity();
+        this.checkError();
+      }
       this.value = this.input.value;
-      this.valueChange.emit(this.value);
     };
     /**
      * Handle focus event
@@ -89,16 +98,44 @@ const MgInputTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
       // Manage focus
       this.classList.delete(this.classFocus);
       this.classList = new ClassList(this.classList.classes);
-      // Check validity
-      this.checkValidity();
-      this.checkError();
+      // Display Error
+      this.displayError();
     };
     /**
      * Get pattern validity
      * Pattern is not defined on textarea field : https://developer.mozilla.org/fr/docs/Web/HTML/Element/Textarea
-     * @returns {boolean}
+     *
+     * @returns {boolean} is pattern valid
      */
     this.getPatternValidity = () => this.pattern === undefined || new RegExp(`^${this.pattern}$`, 'u').test(this.value);
+    /**
+     * Check if input is valid
+     */
+    this.checkValidity = () => {
+      if (!this.readonly && this.input !== undefined) {
+        const validity = this.input.checkValidity && this.input.checkValidity() && this.getPatternValidity();
+        // Set validity
+        this.valid = validity;
+        this.invalid = !validity;
+        //Send event
+        this.inputValid.emit(validity);
+      }
+    };
+    /**
+     * Check input errors
+     */
+    this.checkError = () => {
+      // Set error message
+      this.errorMessage = undefined;
+      // Does not match pattern
+      if (!this.valid && !this.getPatternValidity()) {
+        this.errorMessage = this.patternErrorMessage;
+      }
+      // required
+      else if (!this.valid && this.input.validity.valueMissing) {
+        this.errorMessage = this.messages.errors.required;
+      }
+    };
     /**
      * Validate pattern configuration
      */
@@ -111,52 +148,68 @@ const MgInputTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
       }
     };
   }
-  /**
-   * Check if input is valid
-   */
-  checkValidity() {
-    if (!this.readonly && this.input !== undefined) {
-      const patternValidity = this.getPatternValidity();
-      const validity = this.input.checkValidity && this.input.checkValidity() && patternValidity;
-      // Set validity
-      this.valid = validity;
-      this.invalid = !validity;
-    }
+  handleValue(newValue) {
+    this.checkValidity();
+    this.valueChange.emit(newValue);
   }
-  /**
-   * Check input errors
-   */
-  checkError() {
-    const patternValidity = this.getPatternValidity();
-    // Set error message
-    this.errorMessage = undefined;
-    if (!this.valid && !patternValidity) {
-      this.errorMessage = this.patternErrorMessage;
-    }
-    // required
-    else if (!this.valid && this.input.validity.valueMissing) {
-      this.errorMessage = messages.errors.required;
-    }
-    // Update class
-    if (this.valid) {
-      this.classList.delete(this.classError);
+  validateDisplayCharacterLeft(newValue) {
+    if (newValue) {
+      this.classList.add(this.classHasDisplayCharacterLeft);
     }
     else {
-      this.classList.add(this.classError);
+      this.classList.delete(this.classHasDisplayCharacterLeft);
     }
   }
+  /**
+   * Public method to display errors
+   *
+   * @returns {Promise<void>}
+   */
+  async displayError() {
+    this.checkValidity();
+    this.checkError();
+    this.hasError = this.invalid;
+  }
   /*************
    * Lifecycle *
    *************/
+  /**
+   * Check if component props are well configured on init
+   *
+   * @returns {ReturnType<typeof setTimeout>} timeout
+   */
   componentWillLoad() {
+    // Get locales
+    this.messages = initLocales(this.element).messages;
+    this.characterLeftId = `${this.identifier}-character-left`;
+    // Validate
+    this.validateDisplayCharacterLeft(this.displayCharacterLeft);
     this.validatePattern();
+    // Check validity when component is ready
     // return a promise to process action only in the FIRST render().
     // https://stenciljs.com/docs/component-lifecycle#componentwillload
-    return setTimeout(() => this.checkValidity(), 0);
+    return setTimeout(() => {
+      this.checkValidity();
+    }, 0);
   }
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
   render() {
-    return (h(MgInput, { identifier: this.identifier, classList: this.classList, label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, width: this.width, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: this.tooltip, displayCharacterLeft: this.displayCharacterLeft, characterLeftTemplate: this.characterLeftTemplate, maxlength: this.maxlength, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("textarea", { class: "mg-input__box", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, rows: this.rows, maxlength: this.maxlength, disabled: this.disabled, required: this.required, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: el => (this.input = el) })));
+    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" }, h("textarea", { class: {
+        'mg-input__box': true,
+        'mg-input__box--resizable': this.resizable === 'both',
+        'mg-input__box--resizable-horizontal': this.resizable === 'horizontal',
+        'mg-input__box--resizable-vertical': this.resizable === 'vertical',
+      }, value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, rows: this.rows, maxlength: this.maxlength, disabled: this.disabled, required: this.required, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: el => (this.input = el) }), this.displayCharacterLeft && this.maxlength && (h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength })))));
   }
+  get element() { return this; }
+  static get watchers() { return {
+    "value": ["handleValue"],
+    "displayCharacterLeft": ["validateDisplayCharacterLeft"]
+  }; }
   static get style() { return mgInputTextareaCss; }
 }, [1, "mg-input-textarea", {
     "value": [1537],
@@ -170,18 +223,19 @@ const MgInputTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     "required": [4],
     "readonly": [4],
     "disabled": [4],
-    "width": [8],
+    "mgWidth": [8, "mg-width"],
     "pattern": [1],
     "patternErrorMessage": [1, "pattern-error-message"],
     "rows": [2],
     "tooltip": [1],
     "displayCharacterLeft": [4, "display-character-left"],
-    "characterLeftTemplate": [1, "character-left-template"],
     "helpText": [1, "help-text"],
     "valid": [1028],
     "invalid": [1028],
+    "resizable": [1],
     "classList": [32],
-    "errorMessage": [32]
+    "errorMessage": [32],
+    "displayError": [64]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

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

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
-const mgInputTitleCss = ".is-asterisk.sc-mg-input-title{color:hsl(var(--color-danger))}legend.mg-input-title.sc-mg-input-title{padding-left:0;padding-right:0}";
+const mgInputTitleCss = ".is-asterisk.sc-mg-input-title{color:hsl(var(--color-danger))}legend.mg-input-title.sc-mg-input-title{padding-left:0;padding-right:0}.mg-input-title__required.sc-mg-input-title{display:var(--mg-input-title-display, unset)}";
 
 const MgInputTitle = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -21,14 +21,23 @@ const MgInputTitle = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   /*************
    * Lifecycle *
    *************/
+  /**
+   * Init tag name
+   *
+   * @returns {void}
+   */
   componentWillLoad() {
-    // Init tag name
     this.getTagName();
   }
-  // \u00A0 represent a  
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
   render() {
     const TagName = this.tagName;
-    return (h(TagName, { class: "mg-input-title", htmlFor: this.isLegend ? undefined : this.identifier }, h("slot", null), this.required && [`\u00A0`, h("span", { class: "is-asterisk" }, "*")]));
+    // \u00A0 represent a  
+    return (h(TagName, { class: "mg-input-title", htmlFor: this.isLegend ? undefined : this.identifier }, h("slot", null), this.required && (h("span", { class: "mg-input-title__required" }, "\u00A0", h("span", { class: "is-asterisk" }, "*")))));
   }
   static get style() { return mgInputTitleCss; }
 }, [6, "mg-input-title", {