@mgdis/mg-components 3.1.0 → 4.0.0

package/dist/components/mg-button2.js

@@ -5,9 +5,9 @@ import { d as defineCustomElement$1 } from './mg-icon2.js';
 /**
  * List of all possibles variants
  */
-const variants = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat'];
+const variants = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat', 'success'];
 
-const mgButtonCss = ".mg-button.sc-mg-button{position:relative;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;padding:calc((var(--default-size) - 0.2rem - var(--font-size) * var(--line-height)) / 2) 1.1rem;min-height:var(--default-size);-webkit-box-sizing:border-box;box-sizing:border-box;border-top-right-radius:var(--mg-button-border-radius-top-right, var(--mg-button-border-radius));border-top-left-radius:var(--mg-button-border-radius-top-left, var(--mg-button-border-radius));border-bottom-right-radius:var(--mg-button-border-radius-bottom-right, var(--mg-button-border-radius));border-bottom-left-radius:var(--mg-button-border-radius-bottom-left, var(--mg-button-border-radius));cursor:pointer;background-image:none;border:0.1rem solid;font-family:inherit;text-decoration:none;font-weight:normal;text-align:left;-ms-touch-action:manipulation;touch-action:manipulation}.mg-button[disabled].sc-mg-button,.mg-button[aria-disabled].sc-mg-button,.mg-button.disabled.sc-mg-button{opacity:var(--mg-button-disabled-opacity);cursor:not-allowed}.mg-button.mg-button--icon.sc-mg-button{padding:0;-ms-flex-pack:center;justify-content:center;width:var(--default-size);height:var(--default-size);border-radius:var(--mg-button-icon-border-radius)}.mg-button.mg-button--primary.sc-mg-button{border-color:hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l));border-color:hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - 10%));color:hsl(var(--mg-button-primary-font-color));background:hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l));background:-webkit-gradient(linear, left top, left bottom, from(hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l))), to(hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - 10%))));background:linear-gradient(to bottom, hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l)), hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - 10%)))}.mg-button.mg-button--primary.sc-mg-button:hover:not([disabled],[aria-disabled].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--primary.sc-mg-button:focus:not([disabled],[aria-disabled].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--primary.sc-mg-button:active:not([disabled],[aria-disabled].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l))}.mg-button.mg-button--secondary.sc-mg-button{border-color:hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l));border-color:hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - 10%));color:hsl(var(--mg-button-secondary-font-color));background:hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l));background:-webkit-gradient(linear, left top, left bottom, from(hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l))), to(hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - 10%))));background:linear-gradient(to bottom, hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l)), hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - 10%)))}.mg-button.mg-button--secondary.sc-mg-button:hover:not([disabled],[aria-disabled].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--secondary.sc-mg-button:focus:not([disabled],[aria-disabled].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--secondary.sc-mg-button:active:not([disabled],[aria-disabled].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l))}.mg-button.mg-button--danger.sc-mg-button{border-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l));border-color:hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - 10%));color:hsl(var(--color-neutral));background:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l));background:-webkit-gradient(linear, left top, left bottom, from(hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))), to(hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - 10%))));background:linear-gradient(to bottom, hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l)), hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - 10%)))}.mg-button.mg-button--danger.sc-mg-button:hover:not([disabled],[aria-disabled].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--danger.sc-mg-button:focus:not([disabled],[aria-disabled].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--danger.sc-mg-button:active:not([disabled],[aria-disabled].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))}.mg-button.mg-button--danger-alt.sc-mg-button{border-color:hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l));border-color:hsl(var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - 10%));color:hsl(var(--color-danger));background:hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l));background:-webkit-gradient(linear, left top, left bottom, from(hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l))), to(hsl(var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - 10%))));background:linear-gradient(to bottom, hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l)), hsl(var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - 10%)))}.mg-button.mg-button--danger-alt.sc-mg-button:hover:not([disabled],[aria-disabled].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--danger-alt.sc-mg-button:focus:not([disabled],[aria-disabled].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--danger-alt.sc-mg-button:active:not([disabled],[aria-disabled].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l))}.mg-button.mg-button--info.sc-mg-button{border-color:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l));border-color:hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - 10%));color:hsl(var(--color-neutral));background:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l));background:-webkit-gradient(linear, left top, left bottom, from(hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))), to(hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - 10%))));background:linear-gradient(to bottom, hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l)), hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - 10%)))}.mg-button.mg-button--info.sc-mg-button:hover:not([disabled],[aria-disabled].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--info.sc-mg-button:focus:not([disabled],[aria-disabled].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--info.sc-mg-button:active:not([disabled],[aria-disabled].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))}.mg-button.mg-button--flat.sc-mg-button{background:none;border:none}.mg-button.mg-button--flat.sc-mg-button:hover:not([disabled],[aria-disabled].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--flat.sc-mg-button:focus:not([disabled],[aria-disabled].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--flat.sc-mg-button:active:not([disabled],[aria-disabled].sc-mg-button,.disabled).sc-mg-button{background:hsla(var(--color-dark), 0.1)}.mg-button.sc-mg-button-s>mg-icon,.mg-button .sc-mg-button-s>mg-icon{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-negative:0;flex-shrink:0;line-height:1;margin:auto 0}.mg-button__content.sc-mg-button{display:-ms-flexbox;display:flex;-ms-flex-align:baseline;align-items:baseline;-webkit-column-gap:0.6rem;-moz-column-gap:0.6rem;column-gap:0.6rem}.mg-button--loading.sc-mg-button>mg-icon.sc-mg-button{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.mg-button--loading.sc-mg-button .mg-button__content.sc-mg-button{opacity:0}.mg-button.sc-mg-button-s>mg-badge,.mg-button .sc-mg-button-s>mg-badge{margin-left:0.3rem}mg-button.sc-mg-button{display:inline-block}.mg-button.sc-mg-button,mg-button.sc-mg-button{vertical-align:middle;max-width:100%}";
+const mgButtonCss = ".mg-button.sc-mg-button{position:relative;display:inline-flex;align-items:center;column-gap:0.6rem;padding:calc((var(--default-size) - 0.2rem - var(--font-size) * var(--line-height)) / 2) 1.1rem;min-height:var(--default-size);box-sizing:border-box;border-top-right-radius:var(--mg-button-border-radius-top-right, var(--mg-button-border-radius));border-top-left-radius:var(--mg-button-border-radius-top-left, var(--mg-button-border-radius));border-bottom-right-radius:var(--mg-button-border-radius-bottom-right, var(--mg-button-border-radius));border-bottom-left-radius:var(--mg-button-border-radius-bottom-left, var(--mg-button-border-radius));cursor:pointer;background-image:none;border-top-width:var(--mg-button-border-top-width, 0.1rem);border-right-width:var(--mg-button-border-right-width, 0.1rem);border-bottom-width:var(--mg-button-border-bottom-width, 0.1rem);border-left-width:var(--mg-button-border-left-width, 0.1rem);border-style:solid;font-family:inherit;text-decoration:none;font-weight:normal;text-align:left;touch-action:manipulation}.mg-button[disabled].sc-mg-button,.mg-button[aria-disabled=true].sc-mg-button,.mg-button.disabled.sc-mg-button{opacity:var(--mg-button-disabled-opacity);cursor:default}.mg-button.mg-button--icon.sc-mg-button{padding:0;justify-content:center;width:var(--default-size);height:var(--default-size);border-top-right-radius:var(--mg-button-border-radius-top-right, var(--mg-button-icon-border-radius));border-top-left-radius:var(--mg-button-border-radius-top-left, var(--mg-button-icon-border-radius));border-bottom-right-radius:var(--mg-button-border-radius-bottom-right, var(--mg-button-icon-border-radius));border-bottom-left-radius:var(--mg-button-border-radius-bottom-left, var(--mg-button-icon-border-radius));font-size:var(--font-size);line-height:var(--font-size)}.mg-button.mg-button--primary.sc-mg-button{border-color:hsl(var(--mg-button-primary-border-color, var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--mg-button-primary-font-color));background:linear-gradient(to bottom, hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l)), hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-gradient) * 10%)))}.mg-button.mg-button--primary.sc-mg-button:hover:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--primary.sc-mg-button:focus:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--primary.sc-mg-button:active:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l))}.mg-button.mg-button--secondary.sc-mg-button{border-color:hsl(var(--mg-button-secondary-border-color, var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--mg-button-secondary-font-color));background:linear-gradient(to bottom, hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l)), hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-gradient) * 10%)))}.mg-button.mg-button--secondary.sc-mg-button:hover:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--secondary.sc-mg-button:focus:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--secondary.sc-mg-button:active:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l))}.mg-button.mg-button--danger.sc-mg-button{border-color:hsl(var(--mg-button-danger-border-color, var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-neutral));background:linear-gradient(to bottom, hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l)), hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-gradient) * 10%)))}.mg-button.mg-button--danger.sc-mg-button:hover:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--danger.sc-mg-button:focus:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--danger.sc-mg-button:active:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))}.mg-button.mg-button--danger-alt.sc-mg-button{border-color:hsl(var(--mg-button-danger-alt-border-color, var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-danger));background:linear-gradient(to bottom, hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l)), hsl(var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-gradient) * 10%)))}.mg-button.mg-button--danger-alt.sc-mg-button:hover:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--danger-alt.sc-mg-button:focus:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--danger-alt.sc-mg-button:active:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l))}.mg-button.mg-button--info.sc-mg-button{border-color:hsl(var(--mg-button-info-border-color, var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-neutral));background:linear-gradient(to bottom, hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l)), hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-gradient) * 10%)))}.mg-button.mg-button--info.sc-mg-button:hover:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--info.sc-mg-button:focus:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--info.sc-mg-button:active:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))}.mg-button.mg-button--success.sc-mg-button{border-color:hsl(var(--mg-button-success-border-color, var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-dark));background:linear-gradient(to bottom, hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l)), hsl(var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-gradient) * 10%)))}.mg-button.mg-button--success.sc-mg-button:hover:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--success.sc-mg-button:focus:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--success.sc-mg-button:active:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l))}.mg-button.mg-button--flat.sc-mg-button{background:none;border:none}.mg-button.mg-button--flat.sc-mg-button:hover:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--flat.sc-mg-button:focus:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--flat.sc-mg-button:active:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button{background:hsla(var(--color-dark), 0.1)}.mg-button.sc-mg-button mg-icon.sc-mg-button:only-child,.mg-button .sc-mg-button-s>mg-icon{display:inline-flex;flex-shrink:0;line-height:1;margin:auto 0}.mg-button.mg-button--loading.sc-mg-button>mg-icon.sc-mg-button{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)}.mg-button.mg-button--loading.sc-mg-button .mg-button__content.sc-mg-button{opacity:0}.mg-button__content.sc-mg-button{display:flex;align-items:center;column-gap:0.6rem}mg-button.sc-mg-button{display:inline-block}.mg-button.sc-mg-button,mg-button.sc-mg-button{vertical-align:middle;max-width:100%}";
 
 const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -40,6 +40,15 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * Parent component have to remove the attribute 'disabled' when the process ends.
      */
     this.disableOnClick = false;
+    /**
+     * Prop to set aria-expanded on button element
+     */
+    this.expanded = false;
+    /**
+     * Option to set aria-haspopup
+     * The aria-haspopup state informs assistive technology users that there is a popup and the type of popup it is, but provides no interactivity.
+     */
+    this.haspopup = false;
     /**
      * Define if button is loading, default to false.
      * Trigger when button is clicked or key-up ['enter', 'space], then value change to true.
@@ -52,6 +61,9 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.classList = new ClassList(['mg-button']);
     /**
      * Trigger actions onClick event
+     *
+     * @param {MouseEvent} event click event
+     * @returns {void}
      */
     this.handleClick = (event) => {
       if (this.disabled)
@@ -63,11 +75,16 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       }
     };
   }
-  validateVariant(newValue) {
+  validateVariant(newValue, oldValue) {
     if (!variants.includes(newValue)) {
       throw new Error(`<mg-button> prop "variant" must be one of : ${variants.join(', ')}`);
     }
-    this.classList.add(`mg-button--${this.variant}`);
+    else {
+      if (oldValue !== undefined) {
+        this.classList.delete(`mg-button--${oldValue}`);
+      }
+      this.classList.add(`mg-button--${newValue}`);
+    }
   }
   disabledHandler(isDisabled) {
     // Remove loading when enable
@@ -89,6 +106,8 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /**
    * Check if props are well configured on init
+   *
+   * @returns {void}
    */
   componentWillLoad() {
     this.validateVariant(this.variant);
@@ -104,9 +123,11 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /**
    * Render component
+   *
+   * @returns {HTMLElement} html element
    */
   render() {
-    return (h("button", { id: this.identifier, class: this.classList.join(), "aria-label": this.label, "aria-disabled": this.disabled, onClick: this.handleClick }, this.loading && h("mg-icon", { icon: "loader", spin: true }), h("div", { class: "mg-button__content" }, h("slot", null))));
+    return (h("button", { id: this.identifier, class: this.classList.join(), "aria-label": this.label, "aria-disabled": this.disabled.toString(), "aria-expanded": this.expanded, "aria-controls": this.controls, "aria-haspopup": this.haspopup, onClick: this.handleClick }, this.loading && h("mg-icon", { icon: "loader", spin: true }), h("div", { class: "mg-button__content" }, h("slot", null))));
   }
   get element() { return this; }
   static get watchers() { return {
@@ -122,6 +143,9 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "disabled": [1028],
     "isIcon": [4, "is-icon"],
     "disableOnClick": [4, "disable-on-click"],
+    "expanded": [4],
+    "controls": [1],
+    "haspopup": [8],
     "loading": [32],
     "classList": [32]
   }]);

package/dist/components/mg-character-left2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { m as messages } from './index2.js';
+import { i as initLocales } from './index2.js';
 
 const mgCharacterLeftCss = "mg-character-left.sc-mg-character-left{display:block}";
 
@@ -7,31 +7,10 @@ const MgCharacterLeft = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   constructor() {
     super();
     this.__registerHost();
-    /************
-     * Internal *
-     ************/
-    this.mustacheCounter = '{counter}';
-    /**
-     * Template to display remaining characters.
-     * Must have {counter} inside
-     */
-    this.template = messages.nbCharLeft;
     /**
      * Sets the characters to count
      */
     this.characters = '';
-    /**
-     * Calculate number character left
-     * @returns {string}
-     */
-    this.getMessage = () => {
-      return this.template.replace(this.mustacheCounter, `<strong>${this.maxlength - this.characters.length}</strong>`);
-    };
-  }
-  validateTemplate(newValue) {
-    if (typeof newValue !== 'string' || newValue === '' || newValue.indexOf(this.mustacheCounter) === -1) {
-      throw new Error(`<mg-character-left> prop "template" must contain "${this.mustacheCounter}".`);
-    }
   }
   validateMaxlength(newValue) {
     if (typeof newValue !== 'number') {
@@ -41,21 +20,30 @@ const MgCharacterLeft = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   /*************
    * Lifecycle *
    *************/
+  /**
+   * Check if props are well configured on init
+   *
+   * @returns {void}
+   */
   componentWillLoad() {
-    this.validateTemplate(this.template);
     this.validateMaxlength(this.maxlength);
+    this.messages = initLocales(this.element).messages;
   }
+  /**
+   * Render component
+   *
+   * @returns {HTMLElement} HTML Element
+   */
   render() {
-    return h("span", { id: this.identifier, innerHTML: this.getMessage(), "aria-live": "polite" });
+    return (h("span", { id: this.identifier, "aria-live": "polite" }, h("span", { "aria-hidden": "true" }, this.maxlength - this.characters.length, "/", this.maxlength), h("span", { class: "sr-only" }, this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length))));
   }
+  get element() { return this; }
   static get watchers() { return {
-    "template": ["validateTemplate"],
     "maxlength": ["validateMaxlength"]
   }; }
   static get style() { return mgCharacterLeftCss; }
 }, [2, "mg-character-left", {
     "identifier": [1],
-    "template": [1],
     "characters": [1],
     "maxlength": [2]
   }]);

package/dist/components/mg-form.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface MgForm extends Components.MgForm, HTMLElement {}
+export const MgForm: {
+  prototype: MgForm;
+  new (): MgForm;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/mg-form.js

@@ -0,0 +1,148 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { c as createID, C as ClassList } from './components.utils.js';
+import { i as initLocales } from './index2.js';
+
+const mgFormCss = ".is-asterisk{color:hsl(var(--color-danger))}.mg-form,.mg-form-group{--mg-inputs-margin-bottom:1.5rem;--mg-inputs-title-horizontal-space:3rem;--mg-inputs-title-width:15rem;--mg-inputs-shrink:0}.mg-form.mg-form--all-required,.mg-form-group.mg-form--all-required{--mg-input-title-display:none}.mg-form>p,.mg-form-group>p{font-size:1.2rem}";
+
+const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.formValid = createEvent(this, "form-valid", 7);
+    /**
+     * 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-form');
+    /**
+     * Input name
+     * If not set the value equals the identifier
+     */
+    this.name = this.identifier;
+    /**
+     * Define if form is readonly
+     */
+    this.readonly = false;
+    /**
+     * Define if form is disabled
+     */
+    this.disabled = false;
+    /**
+     * Component classes
+     */
+    this.classList = new ClassList(['mg-form']);
+    /**
+     * Define required message based on mg-inputs required elements
+     * Also
+     *
+     * @returns {void}
+     */
+    this.setRequiredMessage = () => {
+      // Get required fields
+      const requiredInputs = this.mgInputs.filter(input => input.required && !input.disabled && !this.disabled);
+      // All fields are required
+      // mg-input-toggle can not be required
+      if (requiredInputs.length > 0 && requiredInputs.length === this.mgInputs.filter(input => input.nodeName !== 'MG-INPUT-TOGGLE').length) {
+        this.requiredMessage = this.messages.form.allRequired;
+        this.classList.add('mg-form--all-required');
+      }
+      // Some fields are required
+      else if (requiredInputs.length > 0) {
+        this.requiredMessage = this.messages.form.required;
+      }
+    };
+    /**
+     * Check if form is valid
+     *
+     * @returns {void}
+     */
+    this.checkValidity = () => {
+      const validity = !this.mgInputs.some(input => input.invalid);
+      this.valid = validity;
+      this.invalid = !validity;
+      this.formValid.emit(validity);
+    };
+  }
+  /**
+   * Public method to display errors
+   *
+   * @returns {Promise<void>}
+   */
+  async displayError() {
+    if (!this.readonly) {
+      this.mgInputs.forEach(input => {
+        input.displayError && input.displayError();
+      });
+      this.checkValidity();
+    }
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Check if component props are well configured on init
+   *
+   * @returns {void}
+   */
+  componentWillLoad() {
+    // Get locales
+    this.messages = initLocales(this.element).messages;
+    // Get slotted mgIputs
+    this.mgInputs = Array.from(this.element.querySelectorAll('*')).filter((node) => node.nodeName.startsWith('MG-INPUT-'));
+    // Define required message
+    this.setRequiredMessage();
+    // Check validity when slotted mgImputs are ready
+    Promise.all(this.mgInputs.map(async (input) => {
+      // Set inputs readonly or disabled based on form configuration
+      // Othewise listen to events
+      if (this.readonly)
+        input.readonly = true;
+      else if (this.disabled)
+        input.disabled = true;
+      else
+        input.addEventListener('input-valid', this.checkValidity);
+      await input.componentOnReady();
+    })).then(() => {
+      this.checkValidity();
+    });
+  }
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render() {
+    return (h("form", { class: this.classList.join(), id: this.identifier, name: this.name }, this.requiredMessage && h("p", { innerHTML: this.requiredMessage }), h("slot", null), !this.readonly && !this.disabled && h("slot", { name: "actions" })));
+  }
+  get element() { return this; }
+  static get style() { return mgFormCss; }
+}, [1, "mg-form", {
+    "identifier": [1],
+    "name": [1],
+    "readonly": [4],
+    "disabled": [4],
+    "valid": [1028],
+    "invalid": [1028],
+    "classList": [32],
+    "displayError": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["mg-form"];
+  components.forEach(tagName => { switch (tagName) {
+    case "mg-form":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, MgForm$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const MgForm = MgForm$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { MgForm, defineCustomElement };