@mgdis/mg-components 3.1.0 → 3.2.0

package/dist/cjs/mg-badge_21.cjs.entry.js

@@ -0,0 +1,3313 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-bead7dbd.js');
+const index$1 = require('./index-369388eb.js');
+const popper = require('./popper-0c3964e7.js');
+
+/**
+ * List of all possibles variants
+ */
+const variants$4 = ['info', 'primary', 'secondary', 'success', 'warning', 'danger'];
+
+const mgBadgeCss = ".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-badge{padding:0 0.4rem;height:var(--mg-badge-size);min-width:var(--mg-badge-size);-webkit-box-sizing:border-box;box-sizing:border-box;border:0.1rem solid;border-radius:50%;border-radius:calc(var(--mg-badge-size) / 2);font-size:var(--mg-badge-font-size);font-weight:600;text-align:center;line-height:var(--mg-badge-size)}.mg-badge.mg-badge--primary{background-color:hsl(var(--color-dark));border-color:hsl(var(--color-dark));color:hsl(var(--color-light))}.mg-badge.mg-badge--primary.mg-badge--outline{background-color:transparent;color:hsl(var(--color-dark))}.mg-badge.mg-badge--secondary{background-color:hsl(var(--color-light));border-color:hsl(var(--color-light));color:hsl(var(--color-dark))}.mg-badge.mg-badge--secondary.mg-badge--outline{background-color:transparent;color:hsl(var(--color-light))}.mg-badge.mg-badge--success{background-color:hsl(var(--color-success));border-color:hsl(var(--color-success));color:hsl(var(--color-dark))}.mg-badge.mg-badge--success.mg-badge--outline{background-color:transparent;color:hsl(var(--color-success))}.mg-badge.mg-badge--warning{background-color:hsl(var(--color-warning));border-color:hsl(var(--color-warning));color:hsl(var(--color-dark))}.mg-badge.mg-badge--warning.mg-badge--outline{background-color:transparent;color:hsl(var(--color-warning))}.mg-badge.mg-badge--danger{background-color:hsl(var(--color-danger));border-color:hsl(var(--color-danger));color:hsl(var(--color-light))}.mg-badge.mg-badge--danger.mg-badge--outline{background-color:transparent;color:hsl(var(--color-danger))}.mg-badge.mg-badge--info{background-color:hsl(var(--color-info));border-color:hsl(var(--color-info));color:hsl(var(--color-light))}.mg-badge.mg-badge--info.mg-badge--outline{background-color:transparent;color:hsl(var(--color-info))}.mg-badge,mg-badge{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}";
+
+const MgBadge = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Define button variant
+     */
+    this.variant = variants$4[0]; // info
+    /**
+     * Component classes
+     */
+    this.classList = new index$1.ClassList(['mg-badge']);
+  }
+  validateValue(newValue) {
+    if (`${newValue}`.match(/^(\d+|[?*!a-z])$/i) === null) {
+      throw new Error('<mg-badge> prop "value" must be interger or ponctuation character.');
+    }
+  }
+  validateVariant(newValue) {
+    if (!variants$4.includes(newValue)) {
+      throw new Error(`<mg-badge> prop "variant" must be one of : ${variants$4.join(', ')}.`);
+    }
+    this.classList.add(`mg-badge--${this.variant}`);
+  }
+  validateOutline(newValue) {
+    if (newValue)
+      this.classList.add(`mg-badge--outline`);
+  }
+  /**
+   * Check if props are well configured on init
+   *
+   * @returns {void}
+   */
+  componentWillLoad() {
+    this.validateValue(this.value);
+    this.validateVariant(this.variant);
+    this.validateOutline(this.outline);
+  }
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render() {
+    return (index.h("span", { class: this.classList.join() }, this.value, index.h("span", { class: "sr-only" }, this.label)));
+  }
+  static get watchers() { return {
+    "value": ["validateValue"],
+    "variant": ["validateVariant"],
+    "outline": ["validateOutline"]
+  }; }
+};
+MgBadge.style = mgBadgeCss;
+
+/**
+ * List of all possibles variants
+ */
+const variants$3 = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat'];
+
+const mgButtonCss = ".mg-button.sc-mg-button{position:relative;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-webkit-column-gap:0.6rem;-moz-column-gap:0.6rem;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);-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-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;-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:default}.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-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-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) - var(--mg-button-gradient) * 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) - var(--mg-button-gradient) * 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) - var(--mg-button-gradient) * 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) - var(--mg-button-gradient) * 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) - var(--mg-button-gradient) * 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) - var(--mg-button-gradient) * 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) - var(--mg-button-gradient) * 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) - var(--mg-button-gradient) * 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) - var(--mg-button-gradient) * 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) - var(--mg-button-gradient) * 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 mg-icon.sc-mg-button:only-child,.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.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.mg-button--loading.sc-mg-button .mg-button__content.sc-mg-button{opacity:0}.mg-button__content.sc-mg-button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-column-gap:0.6rem;-moz-column-gap:0.6rem;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 = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /************
+     * Internal *
+     ************/
+    this.onClickElementFn = null;
+    /**
+     * Define button variant
+     */
+    this.variant = variants$3[0]; // Primary
+    /**
+     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+     * If not set, it will be created.
+     */
+    this.identifier = index$1.createID('mg-button');
+    /**
+     * Disable button
+     */
+    this.disabled = false;
+    /**
+     * Define if button is round.
+     * Used for icon button.
+     */
+    this.isIcon = false;
+    /**
+     * Option to set input disable on click, in order to prevent multi-click.
+     * 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.
+     * It's required to reset to false when action/promise in parent is done to stop the loading state
+     */
+    this.loading = false;
+    /**
+     * Component classes
+     */
+    this.classList = new index$1.ClassList(['mg-button']);
+    /**
+     * Trigger actions onClick event
+     *
+     * @param {MouseEvent} event click event
+     * @returns {void}
+     */
+    this.handleClick = (event) => {
+      if (this.disabled)
+        event.stopPropagation();
+      // Used to prevent multi-click.
+      if (this.disableOnClick && !this.disabled) {
+        this.loading = true;
+        this.disabled = true;
+      }
+    };
+  }
+  validateVariant(newValue) {
+    if (!variants$3.includes(newValue)) {
+      throw new Error(`<mg-button> prop "variant" must be one of : ${variants$3.join(', ')}`);
+    }
+    this.classList.add(`mg-button--${this.variant}`);
+  }
+  disabledHandler(isDisabled) {
+    // Remove loading when enable
+    // Will be set back onclick
+    if (!isDisabled && this.disableOnClick) {
+      this.loading = false;
+    }
+    // Manage if onclick
+    this.element.onclick = isDisabled ? undefined : this.onClickElementFn;
+  }
+  loadingHandler(newValue) {
+    // we add loading style if it newvalue is true else we remove it
+    if (newValue) {
+      this.classList.add('mg-button--loading');
+    }
+    else {
+      this.classList.delete('mg-button--loading');
+    }
+  }
+  /**
+   * Check if props are well configured on init
+   *
+   * @returns {void}
+   */
+  componentWillLoad() {
+    this.validateVariant(this.variant);
+    if (this.isIcon) {
+      this.classList.add(`mg-button--icon`);
+      if (typeof this.label !== 'string' || this.label === '') {
+        throw new Error(`<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.`);
+      }
+    }
+    // Store the onclick fn
+    this.onClickElementFn = this.element.onclick;
+    this.disabledHandler(this.disabled);
+  }
+  /**
+   * Render component
+   *
+   * @returns {HTMLElement} html element
+   */
+  render() {
+    return (index.h("button", { id: this.identifier, class: this.classList.join(), "aria-label": this.label, "aria-disabled": this.disabled, "aria-expanded": this.expanded, "aria-controls": this.controls, "aria-haspopup": this.haspopup, onClick: this.handleClick }, this.loading && index.h("mg-icon", { icon: "loader", spin: true }), index.h("div", { class: "mg-button__content" }, index.h("slot", null))));
+  }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "variant": ["validateVariant"],
+    "disabled": ["disabledHandler"],
+    "loading": ["loadingHandler"]
+  }; }
+};
+MgButton.style = mgButtonCss;
+
+const mgCharacterLeftCss = "mg-character-left.sc-mg-character-left{display:block}";
+
+const MgCharacterLeft = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /************
+     * Internal *
+     ************/
+    this.mustacheCounter = '{counter}';
+    /**
+     * Template to display remaining characters.
+     * Must have {counter} inside
+     */
+    this.template = index$1.messages.nbCharLeft;
+    /**
+     * Sets the characters to count
+     */
+    this.characters = '';
+    /**
+     * Calculate number character left
+     *
+     * @returns {string} message
+     */
+    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') {
+      throw new Error('<mg-character-left> prop "maxlength" is required.');
+    }
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Check if props are well configured on init
+   *
+   * @returns {void}
+   */
+  componentWillLoad() {
+    this.validateTemplate(this.template);
+    this.validateMaxlength(this.maxlength);
+  }
+  /**
+   * Render component
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render() {
+    return index.h("span", { id: this.identifier, innerHTML: this.getMessage(), "aria-live": "polite" });
+  }
+  static get watchers() { return {
+    "template": ["validateTemplate"],
+    "maxlength": ["validateMaxlength"]
+  }; }
+};
+MgCharacterLeft.style = mgCharacterLeftCss;
+
+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}";
+
+const MgForm = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.formValid = index.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 = index$1.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 index$1.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 = index$1.messages.form.allRequired;
+        this.classList.add('mg-form--all-required');
+      }
+      // Some fields are required
+      else if (requiredInputs.length > 0) {
+        this.requiredMessage = index$1.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 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 (index.h("form", { class: this.classList.join(), id: this.identifier, name: this.name }, this.requiredMessage && index.h("p", { innerHTML: this.requiredMessage }), index.h("slot", null), !this.readonly && !this.disabled && index.h("slot", { name: "actions" })));
+  }
+  get element() { return index.getElement(this); }
+};
+MgForm.style = mgFormCss;
+
+/**
+ * Icon SVG paths
+ */
+const icons = {
+  'arrow-down': () => (index.h("path", { fill: "currentColor", d: "M13,10.1H10.23a.31.31,0,0,1-.32-.28h0V.94A.3.3,0,0,0,9.59.65H6.37A.32.32,0,0,0,6,.94H6V9.81a.29.29,0,0,1-.31.29H3a.3.3,0,0,0-.31.29.27.27,0,0,0,.08.22l5.06,4.58a.36.36,0,0,0,.46,0l5-4.58a.29.29,0,0,0,0-.42C13.22,10.1,13.12,10.1,13,10.1Z" })),
+  'arrow-left': () => (index.h("path", { fill: "currentColor", d: "M5.88,12.93V10.18a.3.3,0,0,1,.28-.32H15a.31.31,0,0,0,.29-.33h0V6.32A.31.31,0,0,0,15,6H6.17a.32.32,0,0,1-.29-.31h0V2.93a.3.3,0,0,0-.28-.32.32.32,0,0,0-.23.09L.79,7.76a.36.36,0,0,0,0,.46l4.58,5a.31.31,0,0,0,.43,0A.4.4,0,0,0,5.88,12.93Z" })),
+  'arrow-right': () => (index.h("path", { fill: "currentColor", d: "M10.16,3V5.75a.3.3,0,0,1-.28.32H1a.31.31,0,0,0-.29.33h0V9.61A.31.31,0,0,0,1,9.94H9.87a.29.29,0,0,1,.29.31h0V13a.3.3,0,0,0,.28.32.32.32,0,0,0,.23-.09l4.58-5.06a.36.36,0,0,0,0-.46l-4.58-5a.3.3,0,0,0-.42,0C10.16,2.76,10.16,2.87,10.16,3Z" })),
+  'arrow-up': () => (index.h("path", { fill: "currentColor", d: "M3.06,5.82H5.81a.31.31,0,0,1,.32.28h0V15a.31.31,0,0,0,.33.29H9.67A.3.3,0,0,0,10,15h0V6.11a.3.3,0,0,1,.31-.29h2.75a.3.3,0,0,0,.23-.51L8.23.73a.36.36,0,0,0-.46,0l-5,4.58a.3.3,0,0,0,0,.43C2.82,5.83,2.92,5.82,3.06,5.82Z" })),
+  'arrow-up-right-square': () => (index.h("path", { fill: "currentColor", d: "M14.33 3v10A1.34 1.34 0 0 1 13 14.33H3A1.34 1.34 0 0 1 1.67 13V3A1.34 1.34 0 0 1 3 1.67h10A1.34 1.34 0 0 1 14.33 3Zm-2.48.46H8.68a.67.67 0 0 0-.68.7.63.63 0 0 0 .2.47l.91.91-5.53 5.53a.33.33 0 0 0 0 .48l.87.87a.33.33 0 0 0 .48 0l5.53-5.52.91.9a.69.69 0 0 0 1 0 .71.71 0 0 0 .19-.48V4.15a.67.67 0 0 0-.67-.67Z" })),
+  'arrows-rotate': () => (index.h("path", { fill: "currentColor", d: "M2.3,7h3.4c0.3,0,0.6-0.3,0.6-0.6c0-0.1-0.1-0.3-0.2-0.4L5.1,4.9c1.7-1.6,4.4-1.5,6,0.2c0,0,0,0,0,0  c0.5,0.5,0.8,1.2,1,1.9h2.1C13.7,3.5,10.4,1.2,7,1.8C5.7,2,4.6,2.6,3.6,3.4L2.7,2.5c-0.2-0.2-0.6-0.2-0.8,0c0,0,0,0,0,0l0,0  C1.8,2.6,1.7,2.8,1.7,2.9v3.4C1.7,6.7,1.9,7,2.3,7z M13.7,9h-3.4C9.9,9,9.7,9.3,9.7,9.6c0,0.2,0.1,0.3,0.2,0.4l1.1,1.1  c-1.7,1.6-4.4,1.5-6-0.2C4.4,10.4,4,9.7,3.8,9H1.7c0.6,3.5,3.9,5.8,7.3,5.2c1.3-0.2,2.4-0.8,3.3-1.7l0.9,0.9c0.2,0.2,0.6,0.2,0.8,0  c0,0,0,0,0,0l0,0c0.1-0.1,0.2-0.3,0.2-0.4V9.6C14.3,9.3,14.1,9,13.7,9z" })),
+  'ban': () => (index.h("path", { fill: "currentColor", d: "M8 .67A7.33 7.33 0 1 0 15.33 8 7.33 7.33 0 0 0 8 .67Zm3.85 3.48a5.46 5.46 0 0 1 .61 7L4.88 3.54a5.46 5.46 0 0 1 6.97.61Zm-7.7 7.7a5.45 5.45 0 0 1-.61-7l7.58 7.58a5.46 5.46 0 0 1-7-.61Z" })),
+  'calculator': () => (index.h("path", { fill: "currentColor", d: "M12.83.67H3.17a.5.5 0 0 0-.5.5v13.66a.5.5 0 0 0 .5.5h9.66a.5.5 0 0 0 .5-.5V1.17a.5.5 0 0 0-.5-.5ZM5.58 13.39a.29.29 0 0 1-.28.3H4.1a.29.29 0 0 1-.3-.28v-1.2a.29.29 0 0 1 .28-.3h1.2a.29.29 0 0 1 .3.28v1.2Zm0-3.28a.29.29 0 0 1-.3.3H4.1a.29.29 0 0 1-.3-.3V8.93a.29.29 0 0 1 .28-.3h1.2a.29.29 0 0 1 .3.28v1.2Zm3.29 3.28a.29.29 0 0 1-.3.3H7.38a.29.29 0 0 1-.3-.3v-1.18a.29.29 0 0 1 .3-.3h1.19a.29.29 0 0 1 .3.3Zm0-3.28a.32.32 0 0 1-.3.3H7.38a.32.32 0 0 1-.3-.3V8.93a.29.29 0 0 1 .3-.3h1.19a.29.29 0 0 1 .3.3Zm3.33 3.28a.29.29 0 0 1-.28.3h-1.25a.29.29 0 0 1-.3-.28V8.93a.29.29 0 0 1 .28-.3h1.25a.29.29 0 0 1 .3.28v4.48Zm0-7.15a.29.29 0 0 1-.3.3H4.1a.29.29 0 0 1-.3-.3V2.61a.29.29 0 0 1 .28-.3h7.82a.29.29 0 0 1 .3.28v3.65Z" })),
+  'check': () => (index.h("path", { fill: "currentColor", d: "M15.3,4.2L14.2,3c-0.1-0.1-0.3-0.1-0.4,0L6,10.4l-3.8-4C2.2,6.3,2.1,6.3,2,6.4L0.7,7.6c-0.1,0.1-0.1,0.2,0,0.3l5.1,5.4c0.1,0.1,0.2,0.1,0.3,0c0,0,0,0,0,0L7.4,12l0,0l7.9-7.4C15.4,4.5,15.4,4.3,15.3,4.2C15.3,4.2,15.3,4.2,15.3,4.2z" })),
+  'check-circle': () => (index.h("path", { fill: "currentColor", d: "M15.33 8A7.33 7.33 0 1 1 8 .67 7.33 7.33 0 0 1 15.33 8Zm-8.18 3.88 5.44-5.44a.46.46 0 0 0 0-.65l-.67-.67a.48.48 0 0 0-.67 0L6.82 9.54 4.75 7.47a.46.46 0 0 0-.65 0l-.67.67a.46.46 0 0 0 0 .65l3.07 3.07a.46.46 0 0 0 .65 0Z" })),
+  'chevron-down': () => (index.h("path", { fill: "currentColor", d: "M7.43,12.21.9,5.69a.81.81,0,0,1,0-1.14h0l.76-.77a.81.81,0,0,1,1.14,0L8,9l5.2-5.18a.81.81,0,0,1,1.14,0l.76.77a.8.8,0,0,1,0,1.13h0L8.57,12.21a.79.79,0,0,1-1.13,0Z" })),
+  'chevron-left': () => (index.h("path", { fill: "currentColor", d: "M3.79,7.43,10.31.9a.81.81,0,0,1,1.14,0h0l.77.76a.81.81,0,0,1,0,1.14L7,8l5.18,5.2a.81.81,0,0,1,0,1.14l-.77.76a.8.8,0,0,1-1.13,0h0L3.79,8.57a.79.79,0,0,1,0-1.13Z" })),
+  'chevron-right': () => (index.h("path", { fill: "currentColor", d: "M12.21,8.57,5.69,15.1a.81.81,0,0,1-1.14,0h0l-.77-.76a.81.81,0,0,1,0-1.14L9,8,3.78,2.8a.81.81,0,0,1,0-1.14L4.55.9A.8.8,0,0,1,5.68.9h0l6.53,6.53a.79.79,0,0,1,0,1.13Z" })),
+  'chevron-up': () => (index.h("path", { fill: "currentColor", d: "M8.57,3.79l6.53,6.52a.81.81,0,0,1,0,1.14h0l-.76.77a.81.81,0,0,1-1.14,0L8,7,2.8,12.22a.81.81,0,0,1-1.14,0L.9,11.45a.8.8,0,0,1,0-1.13h0L7.43,3.79a.79.79,0,0,1,1.13,0Z" })),
+  'cross': () => (index.h("path", { fill: "currentColor", d: "M14.26 12.74 9.52 8l4.7-4.7a.29.29 0 0 0 0-.41l-1.1-1.1a.29.29 0 0 0-.41 0L8 6.48 3.26 1.74a.24.24 0 0 0-.34 0L1.74 2.91a.24.24 0 0 0 0 .34L6.48 8l-4.7 4.7a.29.29 0 0 0 0 .41l1.1 1.1a.29.29 0 0 0 .41 0L8 9.52l4.74 4.74a.24.24 0 0 0 .34 0l1.17-1.17a.24.24 0 0 0 0-.34Z" })),
+  'cross-circle': () => (index.h("path", { fill: "currentColor", d: "M8.06.67H8A7.33 7.33 0 0 0 .68 8v.1a7.42 7.42 0 0 0 7.23 7.23A7.33 7.33 0 1 0 8.06.67Zm3.6 9.57a.28.28 0 0 1 0 .4l-.19.2-.61.61-.2.19a.27.27 0 0 1-.39 0L8 9.41l-2.23 2.24a.27.27 0 0 1-.39 0l-.2-.2-.6-.6-.19-.2a.28.28 0 0 1 0-.4L6.6 8 4.36 5.76a.28.28 0 0 1 0-.4l1-1a.28.28 0 0 1 .4 0L8 6.59l2.24-2.24a.28.28 0 0 1 .4 0l.2.2.6.6.2.2a.28.28 0 0 1 0 .4L9.42 8Z" })),
+  'download': () => (index.h("path", { fill: "currentColor", d: "M6.44,2V6.09a.31.31,0,0,1-.31.31H4a.31.31,0,0,0-.31.29.33.33,0,0,0,.1.23l4,4a.29.29,0,0,0,.41,0h0l4-4a.3.3,0,0,0,0-.42A.29.29,0,0,0,12,6.4H9.91a.31.31,0,0,1-.31-.31h0V2a.29.29,0,0,0-.28-.3H6.74a.29.29,0,0,0-.3.28ZM1.69,13v1a.29.29,0,0,0,.29.29H14a.29.29,0,0,0,.29-.29V13a.29.29,0,0,0-.28-.3H2a.29.29,0,0,0-.33.25Z" })),
+  'exclamation-circle': () => (index.h("path", { fill: "currentColor", d: "M8 15.33A7.33 7.33 0 1 0 .67 8 7.33 7.33 0 0 0 8 15.33ZM7 4a.29.29 0 0 1 .3-.3h1.35A.29.29 0 0 1 9 4v4.68a.29.29 0 0 1-.28.3H7.35a.29.29 0 0 1-.3-.28Zm0 6.78a.29.29 0 0 1 .3-.3h1.35a.29.29 0 0 1 .3.3H9V12a.29.29 0 0 1-.28.3H7.35a.29.29 0 0 1-.3-.28Z" })),
+  'exclamation-triangle': () => (index.h("path", { fill: "currentColor", d: "m14.28 13.87-6-12a.32.32 0 0 0-.41-.15.36.36 0 0 0-.15.15l-6 12a.31.31 0 0 0 .14.42.33.33 0 0 0 .14 0h12a.3.3 0 0 0 .33-.28.31.31 0 0 0-.05-.14ZM7 6a.29.29 0 0 1 .28-.28h1.44A.28.28 0 0 1 9 6v4a.28.28 0 0 1-.28.29H7.28A.29.29 0 0 1 7 10Zm2 7a.31.31 0 0 1-.3.32H7.32A.32.32 0 0 1 7 13v-1.38a.31.31 0 0 1 .31-.31h1.4a.31.31 0 0 1 .31.31H9Z" })),
+  'file-cog': () => (index.h("path", { fill: "currentColor", d: "M9,10.1C9,10.6,8.5,11,8,11l0,0c-0.6,0-1-0.4-1-1c0-0.6,0.4-1,1-1C8.6,9,9,9.4,9,10.1C9,10,9,10,9,10.1z   M13.2,3.7l-2.8-2.8c-0.1-0.1-0.3-0.2-0.5-0.2H9.8v3.7h3.5V4.2C13.3,4,13.2,3.8,13.2,3.7L13.2,3.7z M9.6,5.3h3.8v9.4  c0,0.4-0.3,0.6-0.7,0.7H3.3c-0.4,0-0.7-0.3-0.7-0.7c0,0,0,0,0,0V1.3C2.7,1,3,0.7,3.3,0.7h5.5v3.9l0,0C8.9,4.9,9.2,5.2,9.6,5.3  C9.5,5.2,9.5,5.2,9.6,5.3z M10,8L9.5,8.3C9.3,8.1,9,8,8.8,7.9V7.3c0-0.1,0-0.1-0.1-0.1c-0.4-0.1-0.9-0.1-1.3,0  c-0.1,0-0.1,0.1-0.1,0.1v0.6C7,8,6.7,8.1,6.5,8.3L6,8C5.9,8,5.9,8,5.8,8C5.5,8.3,5.3,8.7,5.2,9.1c0,0.1,0,0.1,0.1,0.2l0.5,0.3  c-0.1,0.3-0.1,0.6,0,0.8l-0.5,0.3c-0.1,0-0.1,0.1-0.1,0.2c0.1,0.4,0.4,0.8,0.7,1.1c0.1,0,0.1,0,0.2,0l0.5-0.3  C6.7,11.9,7,12,7.2,12.1v0.6c0,0.1,0,0.1,0.1,0.1c0.4,0.1,0.9,0.1,1.3,0c0.1,0,0.1-0.1,0.1-0.1v-0.5C9,12.1,9.3,12,9.5,11.8l0.5,0.3  c0.1,0,0.1,0,0.2,0c0.3-0.3,0.5-0.7,0.6-1.1c0-0.1,0-0.1-0.1-0.2l0,0l-0.5-0.3c0-0.3,0-0.6,0-0.8l0.5-0.3c0.1,0,0.1-0.1,0.1-0.2  c-0.1-0.4-0.4-0.8-0.6-1.1C10.1,8,10.1,8,10,8z" })),
+  'file-text': () => (index.h("path", { fill: "currentColor", d: "M8.9 4.6V.7H3.3c-.3 0-.6.3-.6.6v13.3c0 .4.3.7.7.7h9.3c.4 0 .7-.3.7-.7V5.3H9.6c-.4-.1-.7-.4-.7-.7zm1.8 6.7c0 .2-.2.3-.3.4H5.7c-.2 0-.3-.2-.3-.4v-.2c0-.2.2-.3.3-.3h4.6c.2 0 .3.2.3.3v.2zm0-1.8c0 .2-.2.3-.3.3H5.7c-.2 0-.3-.2-.3-.3v-.2c0-.2.2-.3.3-.3h4.6c.2 0 .3.2.3.3v.2zm0-2.1v.2c0 .2-.2.3-.3.3H5.7c-.2.1-.4-.1-.4-.2v-.3c0-.2.2-.3.3-.3h4.6c.3 0 .5.1.5.3zm2.6-3.2v.2H9.8V.7h.2c.2 0 .3.1.5.2l2.7 2.8c0 .1.1.3.1.5z" })),
+  'file-upload': () => [
+    index.h("path", { fill: "currentColor", d: "M13.1 3.7 10.4.9c-.1-.1-.3-.2-.5-.2h-.1v3.7h3.5v-.2c0-.2-.1-.4-.2-.5z" }),
+    index.h("path", { fill: "currentColor", d: "M13.3 14.6V5.3H9.6c-.4 0-.7-.3-.7-.7V.7H3.3c-.3 0-.6.3-.6.6v13.3c0 .4.3.7.7.7h9.3c.3 0 .6-.3.6-.7zm-3-4.6H8.9c-.1 0-.2.1-.2.2v2.6c0 .1-.1.2-.2.2H6.9c-.1 0-.2-.1-.2-.2v-2.6c0-.1-.1-.2-.2-.2H5.1C5 9.9 5 9.8 5 9.7l2.5-2.6c.1-.1.2-.1.3 0l2.5 2.5.1.1c.1.2 0 .3-.1.3z" }),
+  ],
+  'floppy-disk': () => (index.h("path", { fill: "currentColor", d: "m13.94 4.44-2.38-2.38a1.39 1.39 0 0 0-1-.39H3A1.35 1.35 0 0 0 1.67 3v10A1.35 1.35 0 0 0 3 14.33h10A1.35 1.35 0 0 0 14.33 13V5.4a1.39 1.39 0 0 0-.39-1ZM8 12.52a1.81 1.81 0 1 1 1.81-1.81A1.81 1.81 0 0 1 8 12.52Zm2.71-8.6v2.84a.34.34 0 0 1-.34.34H3.82a.34.34 0 0 1-.34-.34V3.82a.34.34 0 0 1 .34-.34h6.46a.35.35 0 0 1 .24.1l.1.1a.35.35 0 0 1 .1.24Z" })),
+  'info-circle': () => (index.h("path", { fill: "currentColor", d: "M8 .67A7.33 7.33 0 1 0 15.33 8 7.33 7.33 0 0 0 8 .67ZM9 12a.29.29 0 0 1-.3.3H7.35a.29.29 0 0 1-.3-.3V7.32A.29.29 0 0 1 7.33 7h1.32a.29.29 0 0 1 .35.3Zm0-6.74a.29.29 0 0 1-.3.3H7.35a.29.29 0 0 1-.3-.3V4a.29.29 0 0 1 .28-.3h1.32a.29.29 0 0 1 .3.28V4Z" })),
+  'loader': () => [
+    index.h("path", { fill: "currentColor", class: "loader__full-circle", d: "M8 2.67A5.33 5.33 0 1 1 2.67 8 5.33 5.33 0 0 1 8 2.67m0-2A7.33 7.33 0 1 0 15.33 8 7.33 7.33 0 0 0 8 .67Z" }),
+    index.h("path", { fill: "currentColor", d: "M8 2.67v-2A7.33 7.33 0 0 0 .67 8h2A5.33 5.33 0 0 1 8 2.67Z" }),
+  ],
+  'log-in': () => (index.h("path", { fill: "currentColor", d: "M10.97,7.78h0L6.97,3.78c-.12-.12-.31-.12-.42,0h0c-.07,.06-.12,.15-.13,.24v2.07c0,.17-.13,.3-.3,.32H1.97c-.16,0-.29,.12-.3,.28h0v2.58c0,.16,.12,.29,.28,.3H6.11c.17,0,.3,.14,.3,.31v2.14c0,.16,.12,.29,.28,.3h0c.11,.01,.21-.03,.28-.11l4-4c.11-.12,.11-.3,0-.42Zm3.37,5.26h0v1c0,.16-.13,.28-.28,.28h-4.77c-.16,0-.28-.13-.28-.28v-1c0-.16,.13-.28,.28-.28h3.43V3.3h-3.42c-.16,0-.29-.13-.29-.29V1.97c0-.16,.13-.29,.29-.29h4.76c.16,0,.29,.13,.29,.29v.68h0V13.04Z" })),
+  'log-out': () => [
+    index.h("path", { fill: "currentColor", d: "M14.25,7.77h0l-4-4a.31.31,0,0,0-.43,0A.34.34,0,0,0,9.7,4V6.07a.32.32,0,0,1-.3.32H5.23a.3.3,0,0,0-.3.3V9.25a.3.3,0,0,0,.3.3H9.4a.31.31,0,0,1,.3.31V12a.3.3,0,0,0,.3.3.33.33,0,0,0,.23-.09l4-4A.29.29,0,0,0,14.25,7.77Z" }),
+    index.h("path", { fill: "currentColor", d: "M6.71,12.72H3.27V3.26H6.69A.31.31,0,0,0,7,3V2a.3.3,0,0,0-.31-.3H2A.29.29,0,0,0,1.67,2h0V3h0V14a.27.27,0,0,0,.1.24h0a.32.32,0,0,0,.14.08H6.71A.3.3,0,0,0,7,14V13A.3.3,0,0,0,6.71,12.72Z" }),
+  ],
+  'magnifying-glass': () => (index.h("path", { fill: "currentColor", d: "M11.24,9.52A5.17,5.17,0,0,0,9.51,2.41l-.17-.09A5.18,5.18,0,0,0,4,11.18a5.16,5.16,0,0,0,5.54.11L12.3,14a1,1,0,0,0,1.41,0l.33-.33a1,1,0,0,0,0-1.41Zm-4.4.5A3.19,3.19,0,1,1,10,6.8v.06A3.19,3.19,0,0,1,6.84,10Z" })),
+  'paper-plane': () => (index.h("path", { fill: "currentColor", d: "M14 1.69 1.84 7a.28.28 0 0 0-.15.36.29.29 0 0 0 .16.15l3.27 1.82a.57.57 0 0 0 .61-.06l6.45-5.57c.05 0 .15-.1.19-.06s0 .14-.06.18l-5.59 6.29a.52.52 0 0 0 0 .63l2.09 3.44a.28.28 0 0 0 .37.12.3.3 0 0 0 .13-.12l5-12.11a.3.3 0 0 0-.14-.37.28.28 0 0 0-.17-.01Z" })),
+  'paper-plane-slash': () => (index.h("path", { fill: "currentColor", d: "M2.67,1.69,14.26,13.28l-1,1-2.79-2.8-1.1,2.67a.3.3,0,0,1-.13.12.28.28,0,0,1-.37-.12L6.75,10.74a.52.52,0,0,1,0-.63L7.82,8.9l-.76-.76L5.76,9.27a.57.57,0,0,1-.61.06L1.88,7.51a.29.29,0,0,1-.16-.15A.28.28,0,0,1,1.87,7L4.68,5.76l-3-3Zm11.53,0a.28.28,0,0,0-.22,0L7.53,4.51,9.26,6.24l3-2.54s.15-.1.19-.06,0,.14-.06.18L9.75,6.73l1.88,1.88,2.71-6.54A.3.3,0,0,0,14.2,1.7Z" })),
+  'pen': () => (index.h("path", { fill: "currentColor", d: "M1.67,11.69v2.64h2.64l7.78-7.78-2.64-2.64L1.67,11.69ZM14.13,4.51c.27-.28,.27-.72,0-1h0l-1.65-1.64c-.28-.27-.72-.27-1,0h0l-1.28,1.29,2.64,2.64,1.29-1.29Z" })),
+  'pen-fancy': () => (index.h("path", { fill: "currentColor", d: "M3.63,8.65c-.24,.07-.43,.26-.5,.5l-1.46,4.37,.11,.12,2.3-2.3c0-.06,0-.13,0-.19,0-.44,.35-.8,.79-.81,.44,0,.8,.35,.81,.79,0,.44-.35,.8-.79,.81,0,0-.01,0-.02,0h-.19l-2.3,2.3,.12,.11,4.37-1.46c.24-.07,.43-.26,.5-.5l.82-2.08-2.49-2.48-2.07,.82ZM10.8,2.35L6.27,7.28l2.42,2.42,4.94-4.52c2.1-1.86-.99-4.92-2.83-2.83Z" })),
+  'plus-circle': () => (index.h("path", { fill: "currentColor", d: "M8,0.7C4,0.7,0.7,4,0.7,8S4,15.3,8,15.3S15.3,12,15.3,8l0,0C15.3,4,12,0.7,8,0.7  C8,0.7,8,0.7,8,0.7z M12.3,8.8c0,0.2-0.2,0.4-0.4,0.4H9.2v2.7c0,0.2-0.2,0.4-0.4,0.4H7.2c-0.2,0-0.4-0.2-0.3-0.4V9.2H4.1  C3.9,9.2,3.7,9,3.7,8.8V7.2c0-0.2,0.2-0.4,0.4-0.3h2.7V4.1c0-0.2,0.2-0.4,0.3-0.4h1.7c0.2,0,0.4,0.2,0.4,0.4v2.7h2.7  c0.2,0,0.4,0.2,0.4,0.3L12.3,8.8z" })),
+  'trash': () => [
+    index.h("path", { fill: "currentColor", d: "M11.5,14.8h-7    c-0.6,0-1.1-0.5-1.1-1.1V4.4h9.3v9.2C12.6,14.2,12.1,14.8,11.5,14.8 M6.9,6.8c0-0.3-0.3-0.6-0.6-0.6S5.8,6.5,5.8,6.8v5.2    c0,0.3,0.3,0.6,0.6,0.6s0.6-0.3,0.6-0.6V6.8z M10.3,6.8c0-0.3-0.3-0.6-0.6-0.6S9.2,6.5,9.2,6.8v5.2c0,0.3,0.3,0.6,0.6,0.6    s0.6-0.3,0.6-0.6V6.8z" }),
+    index.h("path", { fill: "currentColor", d: "M13,2h-2.9L9.9,1.6    C9.8,1.4,9.6,1.2,9.4,1.2H6.6c-0.2,0-0.4,0.1-0.5,0.3L5.8,2H2.9C2.7,2,2.5,2.2,2.5,2.4c0,0,0,0,0,0v0.8c0,0.2,0.2,0.4,0.4,0.4H13    c0.2,0,0.4-0.2,0.4-0.4V2.4C13.4,2.2,13.2,2,13,2z" }),
+  ],
+  'user-plus': () => (index.h("path", { fill: "currentColor", d: "M14,3.33H12.65V2a.36.36,0,0,0-.35-.33h-.65A.36.36,0,0,0,11.3,2V3.33H10a.34.34,0,0,0-.33.34v.66a.34.34,0,0,0,.33.34H11.3V6a.37.37,0,0,0,.35.33h.65A.37.37,0,0,0,12.65,6V4.67H14a.34.34,0,0,0,.32-.34V3.67A.34.34,0,0,0,14,3.33ZM9.28,9.77h-.2a5.19,5.19,0,0,1-3.91,0H5A3,3,0,0,0,1.7,12.46h0v.72A1.27,1.27,0,0,0,3,14.33h8.25a1.26,1.26,0,0,0,1.36-1.14v-.68A3,3,0,0,0,9.37,9.76H9.28ZM7.13,3.7A2.64,2.64,0,1,1,4.5,6.34h0A2.64,2.64,0,0,1,7.13,3.7Z" })),
+  'users': () => (index.h("path", { fill: "currentColor", d: "M12,8.76h-.2a5.24,5.24,0,0,1-3.93,0H7.61a3.05,3.05,0,0,0-3.3,2.75v.69a1.28,1.28,0,0,0,1.38,1.14H14a1.27,1.27,0,0,0,1.37-1.14v-.69A3.07,3.07,0,0,0,12,8.75Zm-6.4-.32A2,2,0,0,0,4.31,8H2.48A1.69,1.69,0,0,0,.65,9.53v.76a.85.85,0,0,0,.91.76H3.45A3.58,3.58,0,0,1,5.61,8.44ZM9.81,2.66A2.65,2.65,0,1,1,7.16,5.31h0A2.65,2.65,0,0,1,9.81,2.66ZM3.31,4.18A1.51,1.51,0,1,1,1.8,5.69,1.51,1.51,0,0,1,3.31,4.18Z" })),
+};
+/**
+ * List of all possibles sizes
+ */
+const sizes$1 = ['regular', 'large', 'extra-large'];
+/**
+ * List of all possibles variants
+ */
+const variants$2 = ['success', 'warning', 'danger', 'info'];
+
+const mgIconCss = ":host{display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}.mg-icon[size=regular],.mg-icon.mg-icon--size-regular{width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size)}.mg-icon[size=large],.mg-icon.mg-icon--size-large{width:var(--mg-icon-large-size);height:var(--mg-icon-large-size)}.mg-icon[size=extra-large],.mg-icon.mg-icon--size-extra-large{width:var(--mg-icon-extra-large-size);height:var(--mg-icon-extra-large-size)}.mg-icon[class*=mg-icon--variant-]{border-radius:var(--mg-message-border-radius);padding:0.3rem}.mg-icon.mg-icon--variant-success{background-color:hsl(var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) + 20%))}.mg-icon.mg-icon--variant-warning{background-color:hsl(var(--color-warning-h), var(--color-warning-s), calc(var(--color-warning-l) + 20%))}.mg-icon.mg-icon--variant-danger{background-color:hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) + 20%))}.mg-icon.mg-icon--variant-info{background-color:hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) + 20%))}.loader__full-circle{opacity:0.2}.mg-icon--spin{-webkit-animation-name:rotate;animation-name:rotate;-webkit-animation-duration:0.75s;animation-duration:0.75s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}@-webkit-keyframes rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}";
+
+const MgIcon = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Define icon size
+     */
+    this.size = 'regular';
+    /**
+     * Make the icon spin
+     */
+    this.spin = false;
+    /**
+     * Component classes
+     */
+    this.classList = new index$1.ClassList(['mg-icon']);
+    /**
+     * getIcon
+     *
+     * @returns {HTMLElement} icon html
+     */
+    this.getIcon = () => icons[this.icon]();
+  }
+  validateIcon(newValue) {
+    if (!Object.keys(icons).includes(newValue)) {
+      throw new Error(`<mg-icon> prop "icon" must be one of : ${Object.keys(icons).join(', ')}`);
+    }
+    this.classList.add(`mg-icon--${this.icon}`);
+  }
+  validateSize(newValue) {
+    if (!sizes$1.includes(newValue)) {
+      throw new Error(`<mg-icon> prop "size" must be one of : ${sizes$1.join(', ')}`);
+    }
+    this.classList.add(`mg-icon--size-${this.size}`);
+  }
+  validateVariant(newValue) {
+    if (newValue !== undefined && !variants$2.includes(newValue)) {
+      throw new Error(`<mg-icon> prop "variant" must be one of : ${variants$2.join(', ')}`);
+    }
+    else if (newValue !== undefined) {
+      this.classList.add(`mg-icon--variant-${this.variant}`);
+    }
+  }
+  handleSpin(newValue) {
+    if (newValue) {
+      this.classList.add('mg-icon--spin');
+    }
+  }
+  /**
+   * Check if props are well configured on init
+   *
+   * @returns {void}
+   */
+  componentWillLoad() {
+    this.validateIcon(this.icon);
+    this.validateSize(this.size);
+    this.validateVariant(this.variant);
+    this.handleSpin(this.spin);
+  }
+  /**
+   * Render component
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render() {
+    return (index.h("svg", { class: this.classList.join(), "aria-hidden": "true", focusable: "false", viewBox: "0 0 16 16" }, this.getIcon()));
+  }
+  static get watchers() { return {
+    "icon": ["validateIcon"],
+    "size": ["validateSize"],
+    "variant": ["validateVariant"],
+    "spin": ["handleSpin"]
+  }; }
+};
+MgIcon.style = mgIconCss;
+
+/**
+ * Possible input classes
+ */
+var InputClass;
+(function (InputClass) {
+  InputClass["ERROR"] = "is-not-valid";
+})(InputClass || (InputClass = {}));
+
+/**
+ * Apply in all input child node the aria-describedby attribute
+ *
+ * @param {VNode[]} children Represent scoped elements
+ * @param {Set<string>} ariaDescribedbyIDs List of IDs
+ * @param {FunctionalUtilities} utils Stencil.js utils
+ * @returns {VNode[]} Children with aria-describedby attribute
+ */
+const applyAriadescribedBy = (children, ariaDescribedbyIDs, utils) => utils.map(children, child => {
+  if (['input', 'select', 'textarea'].includes(child.vtag)) {
+    return Object.assign(Object.assign({}, child), { vattrs: Object.assign(Object.assign({}, child.vattrs), { 'aria-describedby': [...ariaDescribedbyIDs].join(' ') }) });
+  }
+  // we recursively apply ariadescribedBy attributes to child input nodes if exists
+  if (child.vchildren === null)
+    return Object.assign({}, child);
+  return Object.assign(Object.assign({}, child), { vchildren: applyAriadescribedBy(child.vchildren, ariaDescribedbyIDs, utils) });
+});
+/**
+ * Add classes based on props
+ *
+ * @param {MgInputProps} props MgInput Interface Props
+ */
+const manageClasses = (props) => {
+  props.classList.add('mg-input');
+  if (props.labelOnTop)
+    props.classList.add('mg-input--label-on-top');
+  if (props.readonly)
+    props.classList.add('mg-input--readonly');
+  if (props.width !== undefined)
+    props.classList.add(`mg-input--width-${props.width}`);
+  if (props.readonly || props.disabled) {
+    props.classList.delete(InputClass.ERROR);
+  }
+};
+/**
+ * Get tagname
+ *
+ * @param {boolean} isFieldset is fieldset
+ * @returns {string} tag name
+ */
+const getTagName = (isFieldset) => (isFieldset ? 'fieldset' : 'div');
+/**
+ * Get input template
+ *
+ * @param {MgInputProps} props MgInput Interface Props
+ * @param {VNode[]} children Represent scoped elements
+ * @param {FunctionalUtilities} utils Stencil.js utils
+ * @returns {VNode[]} input template
+ */
+const MgInput = (props, children, utils) => {
+  /**
+   * Check required properties
+   */
+  if (typeof props.label !== 'string' || props.label === '') {
+    throw new Error('<mg-input> prop "label" is required');
+  }
+  if (props.labelOnTop && props.labelHide) {
+    throw new Error('<mg-input> prop "labelOnTop" must not be paired with the prop "labelHide"');
+  }
+  /**
+   * Component classes
+   */
+  manageClasses(props);
+  /**
+   * a11y IDs
+   */
+  const ariaDescribedbyIDs = new Set();
+  // Character Left
+  const characterLeftId = `${props.identifier}-character-left`;
+  if (props.classList.has('is-focused') && props.displayCharacterLeft) {
+    ariaDescribedbyIDs.add(characterLeftId);
+  }
+  // Help text
+  const helpTextId = `${props.identifier}-help-text`;
+  if (typeof props.helpText === 'string' && props.helpText !== '') {
+    ariaDescribedbyIDs.add(helpTextId);
+  }
+  // Error Message
+  const helpTextErrorId = `${props.identifier}-error`;
+  if (typeof props.errorMessage === 'string' && props.errorMessage !== '') {
+    ariaDescribedbyIDs.add(helpTextErrorId);
+  }
+  /**
+   * Update input(s) in children
+   */
+  if (props.readonly) {
+    children = children.filter(child => child.$name$ === 'append-input');
+  }
+  else {
+    children = applyAriadescribedBy(children, ariaDescribedbyIDs, utils);
+  }
+  /**
+   * Return template
+   *
+   * +--------+--------------+---------+
+   * |  label | input        | tooltip |
+   * |        +--------------+---------+
+   * |        | nb Char Left           |
+   * |        +------------------------+
+   * |        | Help Text              |
+   * |        +------------------------+
+   * |        | Error                  |
+   * +--------+------------------------+
+   *
+   * Error message is based on this aria method: https://www.w3.org/WAI/tutorials/forms/notifications/#on-focus-change
+   */
+  const TagName = getTagName(props.isFieldset);
+  /**
+   * Get tooltip node
+   *
+   * @returns {VNode[]} mg-tooltip
+   */
+  const getTooltip = () => (index.h("mg-tooltip", { identifier: `${props.identifier}-tooltip`, message: props.tooltip },
+    index.h("mg-icon", { icon: "info-circle" })));
+  /**
+   * Get input title (label) node
+   *
+   * @returns {VNode[]} mg-input-title
+   */
+  const getInputTitle = () => (index.h("mg-input-title", { identifier: props.identifier, class: props.labelHide ? 'sr-only' : undefined, required: props.required && !props.disabled, "is-legend": props.isFieldset }, props.label));
+  return (index.h(TagName, { class: props.classList.join() },
+    props.labelOnTop ? (index.h("div", { class: "mg-input__title" },
+      getInputTitle(),
+      !props.readonly && props.tooltip && getTooltip())) : (getInputTitle()),
+    props.readonly ? (index.h("div", { class: "mg-input__input-container" },
+      index.h("strong", null, props.readonlyValue || props.value),
+      children)) : (index.h("div", { class: "mg-input__input-container" },
+      index.h("div", { class: "mg-input__input" },
+        children,
+        !props.labelOnTop && props.tooltip && getTooltip()),
+      props.displayCharacterLeft && props.maxlength && props.classList.has('is-focused') && (index.h("mg-character-left", { identifier: characterLeftId, characters: props.value, maxlength: props.maxlength, template: props.characterLeftTemplate })),
+      props.helpText && index.h("div", { id: helpTextId, class: "mg-input__help-text", innerHTML: props.helpText }),
+      props.errorMessage && index.h("div", { id: helpTextErrorId, class: "mg-input__error", innerHTML: props.errorMessage, "aria-live": "assertive" })))));
+};
+
+const mgInputCheckboxCss = ":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%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.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}fieldset.mg-input{border:0;margin-left:0;margin-right:0;padding:0}fieldset.mg-input input[type=radio],fieldset.mg-input input[type=checkbox]{-ms-flex-negative:0;flex-shrink:0;width:var(--mg-input-check-size);height:var(--mg-input-check-size);margin-top:calc((var(--font-size) * var(--line-height) - var(--mg-input-check-size)) / 2);margin-right:0.6rem;margin-bottom:0;margin-left:0}fieldset.mg-input.mg-input--label-on-top .mg-input__input-group-container{margin-top:0.7rem}fieldset.mg-input.is-not-valid .mg-input__input-group{color:initial}.mg-input__input-container mg-tooltip{margin-left:2rem}.mg-input__input-group-container{margin:0;padding:0;list-style:none;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-column-gap:2.3rem;-moz-column-gap:2.3rem;column-gap:2.3rem;row-gap:1rem;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2)}.mg-input__input-group-container--vertical{-ms-flex-direction:column;flex-direction:column}.mg-input__input-group{display:-ms-flexbox;display:flex;-ms-flex-align:top;align-items:top}.mg-input__input-group.mg-input__input-group--disabled label{opacity:0.3}.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}";
+
+/**
+ * type CheckboxItem validation function
+ *
+ * @param {CheckboxItem} item Checkbox item
+ * @returns {boolean} match item expectations
+ */
+const isCheckboxItem = (item) => typeof item === 'object' && typeof item.title === 'string' && (item.value === null || typeof item.value === 'boolean') && item.value !== undefined;
+const MgInputCheckbox = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.valueChange = index.createEvent(this, "value-change", 7);
+    this.inputValid = index.createEvent(this, "input-valid", 7);
+    /************
+     * Internal *
+     ************/
+    // classes
+    this.classError = InputClass.ERROR;
+    // HTML selector
+    this.inputs = [];
+    /**
+     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+     * If not set, it will be created.
+     */
+    this.identifier = index$1.createID('mg-input-checkbox');
+    /**
+     * Input name
+     * If not set the value equals the identifier
+     */
+    this.name = this.identifier;
+    /**
+     * Define if label is visible
+     */
+    this.labelHide = false;
+    /**
+     * Define if inputs are display verticaly
+     */
+    this.inputVerticalList = false;
+    /**
+     * Define if input is required
+     */
+    this.required = false;
+    /**
+     * Define if input is readonly
+     */
+    this.readonly = false;
+    /**
+     * Define if input is disabled
+     */
+    this.disabled = false;
+    /**
+     * Component classes
+     */
+    this.classList = new index$1.ClassList(['mg-input--checkbox']);
+    /**
+     * Formated value for display
+     */
+    this.checkboxItems = [];
+    /**
+     * Handle input event
+     *
+     * @param {InputEvent} event input event
+     */
+    this.handleInput = (event) => {
+      this.checkboxItems = this.checkboxItems.map(item => {
+        if (item.id === event.target.id) {
+          item.value = Boolean(event.target.checked);
+        }
+        return item;
+      });
+      this.value = this.checkboxItems.map(o => ({ value: o.value, title: o.title, disabled: o.disabled }));
+      this.checkValidity();
+    };
+    /**
+     * Handle blur event
+     */
+    this.handleBlur = () => {
+      // Check validity
+      this.checkValidity();
+      this.checkError();
+    };
+    /**
+     * Check if input is valid
+     */
+    this.checkValidity = () => {
+      if (!this.readonly) {
+        const validity = this.getInvalidElement() === undefined;
+        // Set validity
+        this.valid = validity;
+        this.invalid = !validity;
+        //Send event
+        this.inputValid.emit(validity);
+      }
+    };
+    /**
+     * Check input errors
+     */
+    this.checkError = () => {
+      const invalidElement = this.getInvalidElement();
+      // Set error message
+      this.errorMessage = undefined;
+      if (!this.valid && invalidElement.validity.valueMissing) {
+        this.errorMessage = index$1.messages.errors.required;
+      }
+      // Update class
+      if (this.valid) {
+        this.classList.delete(this.classError);
+      }
+      else {
+        this.classList.add(this.classError);
+      }
+    };
+    /**
+     * get invalid element
+     *
+     * @returns {HTMLInputElement} element
+     */
+    this.getInvalidElement = () => this.inputs.find((element) => !element.disabled && !element.checkValidity());
+  }
+  validateValue(newValue) {
+    if (newValue && newValue.every(item => isCheckboxItem(item))) {
+      this.checkboxItems = newValue.map((item, index) => ({
+        id: `${this.identifier}_${index.toString()}`,
+        title: item.title,
+        value: item.value,
+        disabled: item.disabled,
+      }));
+      this.valueChange.emit(newValue);
+    }
+    else {
+      throw new Error('<mg-input-checkbox> prop "value" is required and all values must be the same type, CheckboxItem.');
+    }
+  }
+  handleReadOnly() {
+    this.classList.delete(this.classError);
+  }
+  /**
+   * Public method to display errors
+   *
+   * @returns {Promise<void>}
+   */
+  async displayError() {
+    this.checkValidity();
+    this.checkError();
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Check if component props are well configured on init
+   *
+   * @returns {ReturnType<typeof setTimeout>} timeout
+   */
+  componentWillLoad() {
+    // Check values format
+    this.validateValue(this.value);
+    // 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 (index.h(MgInput, { identifier: this.identifier, classList: this.classList, label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: undefined, width: undefined, disabled: this.disabled, value: this.value && this.value.toString(), readonlyValue: undefined, tooltip: !this.readonly && this.tooltip, displayCharacterLeft: undefined, characterLeftTemplate: undefined, maxlength: undefined, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: true }, index.h("ul", { class: { 'mg-input__input-group-container': true, 'mg-input__input-group-container--vertical': this.inputVerticalList } }, this.checkboxItems
+      .filter(item => {
+      return !this.readonly || item.value;
+    })
+      .map(input => (index.h("li", { class: { 'mg-input__input-group': true, 'mg-input__input-group--disabled': this.disabled || input.disabled } }, index.h("input", { type: "checkbox", id: input.id, name: this.identifier, value: input.value && input.value.toString(), checked: Boolean(input.value), disabled: this.readonly || this.disabled || input.disabled, required: this.required, indeterminate: input.value === null, onInput: this.handleInput, onBlur: this.handleBlur, ref: el => this.inputs.push(el) }), index.h("label", { htmlFor: input.id }, input.title)))))));
+  }
+  static get watchers() { return {
+    "value": ["validateValue"],
+    "readonly": ["handleReadOnly"]
+  }; }
+};
+MgInputCheckbox.style = mgInputCheckboxCss;
+
+var InputError$1;
+(function (InputError) {
+  InputError["MIN"] = "min";
+  InputError["MAX"] = "max";
+  InputError["MINMAX"] = "minMax";
+  InputError["REQUIRED"] = "required";
+})(InputError$1 || (InputError$1 = {}));
+
+/**
+ * Format number to the locale currency
+ *
+ * @param {number} number number to format
+ * @returns {string} formatted currency
+ */
+function localeCurrency(number) {
+  return new Intl.NumberFormat(index$1.locale, { style: 'currency', currency: index$1.currency }).format(number);
+}
+/**
+ * Format number to locale
+ *
+ * @param {number} number number to format
+ * @returns {string} formatted number
+ */
+function localeNumber(number) {
+  return new Intl.NumberFormat(index$1.locale).format(number);
+}
+/**
+ * Date RegExp
+ */
+const dateRegExp = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/;
+/**
+ * Locale date format
+ *
+ * @param {string} date date to format
+ * @returns {string} formatted date
+ */
+function localeDate(date) {
+  if (typeof date !== 'string' || date === '' || !dateRegExp.test(date)) {
+    return '';
+  }
+  return new Intl.DateTimeFormat(index$1.locale).format(new Date(date));
+}
+
+const mgInputDateCss = ":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%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.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);width:100%;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--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-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left: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-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.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)}.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}";
+
+const MgInputDate = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.valueChange = index.createEvent(this, "value-change", 7);
+    this.inputValid = index.createEvent(this, "input-valid", 7);
+    /************
+     * Internal *
+     ************/
+    // classes
+    this.classError = InputClass.ERROR;
+    /**
+     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+     * If not set, it will be created.
+     */
+    this.identifier = index$1.createID('mg-input-date');
+    /**
+     * Input name
+     * If not set the value equals the identifier
+     */
+    this.name = this.identifier;
+    /**
+     * Define if label is visible
+     */
+    this.labelHide = false;
+    /**
+     * Define if input is required
+     */
+    this.required = false;
+    /**
+     * Define if input is readonly
+     */
+    this.readonly = false;
+    /**
+     * Define if input is disabled
+     */
+    this.disabled = false;
+    /**
+     * Component classes
+     */
+    this.classList = new index$1.ClassList(['mg-input--date']);
+    /**
+     * Handle input event
+     */
+    this.handleInput = () => {
+      this.checkValidity();
+      this.value = this.input.value;
+    };
+    /**
+     * Handle blur event
+     */
+    this.handleBlur = () => {
+      this.checkValidity();
+      this.checkError();
+    };
+    /**
+     * 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);
+      }
+    };
+    /**
+     * get input error code
+     *
+     * @returns {null | InputError} error code
+     */
+    this.getInputError = () => {
+      var _a, _b;
+      let inputError = null;
+      // required
+      if (this.input.validity.valueMissing) {
+        inputError = InputError$1.REQUIRED;
+      }
+      // min & max
+      else if ((this.input.validity.rangeUnderflow || this.input.validity.rangeOverflow) && ((_a = this.min) === null || _a === void 0 ? void 0 : _a.length) > 0 && ((_b = this.max) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+        inputError = InputError$1.MINMAX;
+      }
+      // min
+      else if (this.input.validity.rangeUnderflow) {
+        inputError = InputError$1.MIN;
+      }
+      //max
+      else if (this.input.validity.rangeOverflow) {
+        inputError = InputError$1.MAX;
+      }
+      return inputError;
+    };
+    /**
+     * Set error message
+     *
+     * @returns {void}
+     */
+    this.setErrorMessage = () => {
+      var _a;
+      const inputError = this.getInputError();
+      // required
+      if (inputError === InputError$1.REQUIRED) {
+        this.errorMessage = index$1.messages.errors[inputError];
+      }
+      // min, max & minMax
+      else if ([InputError$1.MIN, InputError$1.MAX, InputError$1.MINMAX].includes(inputError)) {
+        this.errorMessage = index$1.messages.errors.date[inputError].replace('{min}', localeDate(this.min)).replace('{max}', localeDate(this.max));
+      }
+      // wrong date format
+      // element.validity.badInput is default error message
+      else {
+        this.errorMessage = index$1.messages.errors.date.badInput.replace('{min}', ((_a = this.min) === null || _a === void 0 ? void 0 : _a.length) > 0 ? localeDate(this.min) : localeDate('1900-01-01'));
+      }
+    };
+    /**
+     * Check input errors
+     *
+     * @returns {void}
+     */
+    this.checkError = () => {
+      // Set error message
+      this.errorMessage = undefined;
+      if (!this.valid) {
+        this.setErrorMessage();
+        this.classList.add(this.classError);
+      }
+      else {
+        this.classList.delete(this.classError);
+      }
+    };
+  }
+  validateValue(newValue) {
+    if (newValue !== undefined && newValue !== '' && !(typeof newValue === 'string' && dateRegExp.test(newValue))) {
+      throw new Error("<mg-input-date> props 'value' doesn't match pattern: yyyy-mm-dd");
+    }
+    else {
+      this.valueChange.emit(this.value);
+    }
+  }
+  validateMin(newValue) {
+    this.validateDateFormat(newValue);
+  }
+  validateMax(newValue) {
+    this.validateDateFormat(newValue);
+  }
+  /**
+   * Public method to display errors
+   *
+   * @returns {Promise<void>}
+   */
+  async displayError() {
+    this.checkValidity();
+    this.checkError();
+  }
+  /**
+   * Date format validation
+   *
+   * @param {string} date date to validate
+   * @returns {void}
+   */
+  validateDateFormat(date) {
+    if ((date === null || date === void 0 ? void 0 : date.length) > 0 && !(typeof date === 'string' && dateRegExp.test(date))) {
+      throw new Error("<mg-input-date> props 'min/max' doesn't match pattern: yyyy-mm-dd");
+    }
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Check if component props are well configured on init
+   *
+   * @returns {ReturnType<typeof setTimeout>} timeout
+   */
+  componentWillLoad() {
+    this.validateValue(this.value);
+    this.validateMin(this.min);
+    this.validateMax(this.max);
+    // 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 (index.h(MgInput, { identifier: this.identifier, classList: this.classList, label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, width: undefined, disabled: this.disabled, value: this.value, readonlyValue: localeDate(this.value), tooltip: this.tooltip, displayCharacterLeft: undefined, characterLeftTemplate: undefined, maxlength: undefined, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, index.h("input", { type: "date", class: "mg-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, onInput: this.handleInput, onBlur: this.handleBlur, pattern: "[0-9]{4}-[0-9]{2}-[0-9]{2}", ref: el => (this.input = el) })));
+  }
+  static get watchers() { return {
+    "value": ["validateValue"],
+    "min": ["validateMin"],
+    "max": ["validateMax"]
+  }; }
+};
+MgInputDate.style = mgInputDateCss;
+
+/**
+ * List of all possibles types
+ */
+const types = ['decimal', 'integer', 'currency'];
+var InputError;
+(function (InputError) {
+  InputError["MIN"] = "min";
+  InputError["MAX"] = "max";
+  InputError["MINMAX"] = "minMax";
+  InputError["REQUIRED"] = "required";
+})(InputError || (InputError = {}));
+
+const mgInputNumericCss = ":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%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.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);width:100%;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--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-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left: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-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.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}.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{text-align:right}";
+
+const MgInputNumeric = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.valueChange = index.createEvent(this, "value-change", 7);
+    this.inputValid = index.createEvent(this, "input-valid", 7);
+    // Classes
+    this.classError = InputClass.ERROR;
+    /**
+     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+     * If not set, it will be created.
+     */
+    this.identifier = index$1.createID('mg-input-numeric');
+    /**
+     * Input name
+     * If not set the value equals the identifier
+     */
+    this.name = this.identifier;
+    /**
+     * Define if label is visible
+     */
+    this.labelHide = false;
+    /**
+     * 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 numeric type
+     */
+    this.type = types[0];
+    /**
+     * Override integer length
+     * integer is the number before the decimal point
+     */
+    this.integerLength = 13;
+    /**
+     * Override decimal length
+     * decimal is the number after the decimal point
+     */
+    this.decimalLength = 2;
+    /**
+     * Component classes
+     */
+    this.classList = new index$1.ClassList(['mg-input--numeric']);
+    /**
+     * Define if input has focus
+     */
+    this.hasFocus = false;
+    /**
+     * Handle input event
+     *
+     * @returns {void}
+     */
+    this.handleInput = () => {
+      // Check validity
+      this.checkValidity();
+      this.value = this.input.value;
+    };
+    /**
+     * Handle focus event
+     *
+     * @returns {void}
+     */
+    this.handleFocus = () => {
+      this.hasFocus = true;
+    };
+    /**
+     * Handle blur event
+     *
+     * @returns {void}
+     */
+    this.handleBlur = () => {
+      // Check validity
+      this.checkValidity();
+      this.checkError();
+      this.hasFocus = false;
+    };
+    /**
+     * Check if input is valid
+     *
+     * @returns {void}
+     */
+    this.checkValidity = () => {
+      if (!this.readonly) {
+        const validity = this.getInputError() === null;
+        // Set validity
+        this.valid = validity;
+        this.invalid = !validity;
+        //Send event
+        this.inputValid.emit(validity);
+      }
+    };
+    /**
+     * Set error message
+     *
+     * @returns {void}
+     */
+    this.setErrorMessage = () => {
+      const inputError = this.getInputError();
+      if (inputError === InputError.REQUIRED) {
+        this.errorMessage = index$1.messages.errors[inputError];
+      }
+      else {
+        this.errorMessage = index$1.messages.errors.numeric[inputError].replace('{min}', `${this.formatValue(this.min)}`).replace('{max}', `${this.formatValue(this.max)}`);
+      }
+    };
+    /**
+     * Check input errors
+     *
+     * @returns {void}
+     */
+    this.checkError = () => {
+      // Set error message
+      this.errorMessage = undefined;
+      // Update class
+      if (!this.valid) {
+        this.setErrorMessage();
+        this.classList.add(this.classError);
+      }
+      else {
+        this.classList.delete(this.classError);
+      }
+    };
+    /**
+     * Get input error code
+     *
+     * @returns {null | InputError} error code
+     */
+    this.getInputError = () => {
+      let inputError = null;
+      if (this.input === undefined)
+        return inputError;
+      // required
+      if (!this.input.checkValidity() && this.input.validity.valueMissing) {
+        inputError = InputError.REQUIRED;
+      }
+      // Min & Max
+      else if (this.min !== undefined && this.numericValue < this.min && this.max === undefined) {
+        // Only a min value is set
+        inputError = InputError.MIN;
+      }
+      else if (this.max !== undefined && this.numericValue > this.max && this.min === undefined) {
+        // Only a max value is set
+        inputError = InputError.MAX;
+      }
+      else if ((this.min !== undefined && this.numericValue < this.min) || (this.max !== undefined && this.numericValue > this.max)) {
+        // both min and max values are set
+        inputError = InputError.MINMAX;
+      }
+      return inputError;
+    };
+    /**
+     * Format value based on type
+     *
+     * @param {number} value value to format
+     * @returns {string} formated local value
+     */
+    this.formatValue = (value) => (this.type === 'currency' ? localeCurrency(value) : localeNumber(value));
+    /**
+     * Validate append slot
+     *
+     * @returns {void}
+     */
+    this.validateAppendSlot = () => {
+      const slotAppendInput = this.element.querySelector('[slot="append-input"]');
+      if (slotAppendInput !== null) {
+        this.classList.add(slotAppendInput.nodeName === 'MG-BUTTON' ? 'mg-input--is-input-group-append' : 'mg-input--is-append-input-slot-content');
+      }
+    };
+  }
+  validateValue(newValue) {
+    if (newValue !== undefined && newValue !== null) {
+      // Split number and decimal
+      const [integer, decimal = ''] = newValue.replace('-', '').split(/[\.,]/);
+      // Regex
+      const regex = this.type === 'integer' ? /^[\-]?\d+$/ : /^[\-]?\d+[.,]?\d*$/;
+      // Filter input
+      if (newValue === '' || (newValue.match(regex) && integer.length <= this.integerLength && decimal.length <= (this.type === 'integer' ? 0 : this.decimalLength))) {
+        this.storedValue = newValue;
+      }
+      else if (this.storedValue !== undefined) {
+        newValue = this.storedValue;
+      }
+      else {
+        newValue = null;
+      }
+      // Set value and input value
+      this.value = newValue;
+      if (this.input !== undefined)
+        this.input.value = this.value;
+      // emit numeric value
+      this.numericValue = this.value !== '' && this.value !== null ? parseFloat(this.value.replace(',', '.')) : null;
+      this.valueChange.emit(this.numericValue);
+      // Set readOnlyValue
+      this.readonlyValue = this.numericValue !== null ? this.formatValue(this.numericValue) : '';
+    }
+  }
+  validateType(newValue) {
+    if (!types.includes(newValue)) {
+      throw new Error(`<mg-input-numeric> prop "type" must be one of : ${types.join(', ')}`);
+    }
+    this.classList.add(`mg-input--numeric--${this.type}`);
+  }
+  validateIntegerLength(newValue) {
+    if (newValue < 1) {
+      throw new Error(`<mg-input-numeric> prop "integer-length" must be a positive number.`);
+    }
+  }
+  validateDecimalLength(newValue) {
+    if (newValue < 1) {
+      throw new Error(`<mg-input-numeric> prop "decimal-length" must be a positive number, consider using prop "type" to "integer" instead.`);
+    }
+  }
+  /**
+   * Public method to display errors
+   *
+   * @returns {Promise<void>}
+   */
+  async displayError() {
+    this.checkValidity();
+    this.checkError();
+  }
+  /**
+   * Displayed value in input
+   * Change on focus/blur
+   *
+   * @returns {string} display value
+   */
+  displayValue() {
+    return this.hasFocus ? this.value : this.readonlyValue;
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Check if component props are well configured on init
+   *
+   * @returns {ReturnType<typeof setTimeout>} timeout
+   */
+  componentWillLoad() {
+    this.validateValue(this.value);
+    this.validateType(this.type);
+    this.validateIntegerLength(this.integerLength);
+    this.validateDecimalLength(this.decimalLength);
+    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 (index.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: this.readonlyValue, tooltip: this.tooltip, displayCharacterLeft: undefined, characterLeftTemplate: undefined, maxlength: undefined, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, index.h("input", { type: "text", class: "mg-input__box", value: this.displayValue(), id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: el => (this.input = el) }), index.h("slot", { name: "append-input" })));
+  }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "value": ["validateValue"],
+    "type": ["validateType"],
+    "integerLength": ["validateIntegerLength"],
+    "decimalLength": ["validateDecimalLength"]
+  }; }
+};
+MgInputNumeric.style = mgInputNumericCss;
+
+const mgInputPasswordCss = ":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%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.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);width:100%;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--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-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left: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-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.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}.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}";
+
+const MgInputPassword = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.valueChange = index.createEvent(this, "value-change", 7);
+    this.inputValid = index.createEvent(this, "input-valid", 7);
+    /************
+     * Internal *
+     ************/
+    // classes
+    this.classError = InputClass.ERROR;
+    /**
+     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+     * If not set, it will be created.
+     */
+    this.identifier = index$1.createID('mg-input-password');
+    /**
+     * Input name
+     * If not set the value equals the identifier
+     */
+    this.name = this.identifier;
+    /**
+     * Define if label is visible
+     */
+    this.labelHide = false;
+    /**
+     * 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.width = 'full';
+    /**
+     * Component classes
+     */
+    this.classList = new index$1.ClassList(['mg-input--password']);
+    /**
+     * Handle input event
+     */
+    this.handleInput = () => {
+      this.checkValidity();
+      this.value = this.input.value;
+    };
+    /**
+     * Handle blur event
+     */
+    this.handleBlur = () => {
+      this.checkValidity();
+      this.checkError();
+    };
+    /**
+     * 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);
+      }
+    };
+    /**
+     * Check input errors
+     */
+    this.checkError = () => {
+      // Set error message
+      this.errorMessage = undefined;
+      // required
+      if (!this.valid && this.input.validity.valueMissing) {
+        this.errorMessage = index$1.messages.errors.required;
+      }
+      // Update class
+      if (this.valid) {
+        this.classList.delete(this.classError);
+      }
+      else {
+        this.classList.add(this.classError);
+      }
+    };
+  }
+  handleValue(newValue) {
+    this.valueChange.emit(newValue);
+  }
+  /**
+   * Public method to display errors
+   *
+   * @returns {Promise<void>}
+   */
+  async displayError() {
+    this.checkValidity();
+    this.checkError();
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Check if component props are well configured on init
+   *
+   * @returns {ReturnType<typeof setTimeout>} timeout
+   */
+  componentWillLoad() {
+    // 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 (index.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: this.value !== undefined ? '•'.repeat(this.value.length) : undefined, tooltip: this.tooltip, displayCharacterLeft: false, characterLeftTemplate: undefined, maxlength: undefined, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, index.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) })));
+  }
+  static get watchers() { return {
+    "value": ["handleValue"]
+  }; }
+};
+MgInputPassword.style = mgInputPasswordCss;
+
+const mgInputRadioCss = ":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%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.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}fieldset.mg-input{border:0;margin-left:0;margin-right:0;padding:0}fieldset.mg-input input[type=radio],fieldset.mg-input input[type=checkbox]{-ms-flex-negative:0;flex-shrink:0;width:var(--mg-input-check-size);height:var(--mg-input-check-size);margin-top:calc((var(--font-size) * var(--line-height) - var(--mg-input-check-size)) / 2);margin-right:0.6rem;margin-bottom:0;margin-left:0}fieldset.mg-input.mg-input--label-on-top .mg-input__input-group-container{margin-top:0.7rem}fieldset.mg-input.is-not-valid .mg-input__input-group{color:initial}.mg-input__input-container mg-tooltip{margin-left:2rem}.mg-input__input-group-container{margin:0;padding:0;list-style:none;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-column-gap:2.3rem;-moz-column-gap:2.3rem;column-gap:2.3rem;row-gap:1rem;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2)}.mg-input__input-group-container--vertical{-ms-flex-direction:column;flex-direction:column}.mg-input__input-group{display:-ms-flexbox;display:flex;-ms-flex-align:top;align-items:top}.mg-input__input-group.mg-input__input-group--disabled label{opacity:0.3}.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}";
+
+/**
+ * type Option validation function
+ *
+ * @param {RadioOption} option radio option
+ * @returns {boolean} radio option type is valid
+ */
+const isOption$2 = (option) => typeof option === 'object' && typeof option.title === 'string' && option.value !== undefined;
+const MgInputRadio = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.valueChange = index.createEvent(this, "value-change", 7);
+    this.inputValid = index.createEvent(this, "input-valid", 7);
+    /************
+     * Internal *
+     ************/
+    // classes
+    this.classError = InputClass.ERROR;
+    // HTML selector
+    this.inputs = [];
+    /**
+     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+     * If not set, it will be created.
+     */
+    this.identifier = index$1.createID('mg-input-radio');
+    /**
+     * Input name
+     * If not set the value equals the identifier
+     */
+    this.name = this.identifier;
+    /**
+     * Define if label is displayed on top
+     */
+    this.labelOnTop = false;
+    /**
+     * Define if label is visible
+     */
+    this.labelHide = false;
+    /**
+     * Define if inputs are display verticaly
+     */
+    this.inputVerticalList = false;
+    /**
+     * Define if input is required
+     */
+    this.required = false;
+    /**
+     * Define if input is readonly
+     */
+    this.readonly = false;
+    /**
+     * Define if input is disabled
+     */
+    this.disabled = false;
+    /**
+     * Component classes
+     */
+    this.classList = new index$1.ClassList(['mg-input--radio']);
+    /**
+     * Handle input event
+     *
+     * @param {event} event input event
+     * @returns {void}
+     */
+    this.handleInput = (event) => {
+      this.checkValidity();
+      this.value = this.options[event.target.value].value;
+    };
+    /**
+     * Handle blur event
+     *
+     * @returns {void}
+     */
+    this.handleBlur = () => {
+      this.checkValidity();
+      this.checkError();
+    };
+    /**
+     * Check if input is valid
+     *
+     * @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);
+      }
+    };
+    /**
+     * Check input errors
+     *
+     * @returns {void}
+     */
+    this.checkError = () => {
+      const invalidElement = this.getInvalidElement();
+      // Set error message
+      this.errorMessage = undefined;
+      if (!this.valid && invalidElement.validity.valueMissing) {
+        this.errorMessage = index$1.messages.errors.required;
+      }
+      // Update class
+      if (this.valid) {
+        this.classList.delete(this.classError);
+      }
+      else {
+        this.classList.add(this.classError);
+      }
+    };
+    /**
+     * get invalid element
+     *
+     * @returns {HTMLInputElement} element
+     */
+    this.getInvalidElement = () => this.inputs.find((element) => !element.disabled && !element.checkValidity());
+  }
+  handleValue(newValue) {
+    this.valueChange.emit(newValue);
+  }
+  validateItems(newValue) {
+    // Validate if items have required min length
+    if (typeof newValue === 'object' && newValue.length < 2) {
+      throw new Error('<mg-input-radio> prop "items" require at least 2 items.');
+    }
+    // String array
+    else if (index$1.allItemsAreString(newValue)) {
+      this.options = newValue.map(item => ({ title: item, value: item, disabled: this.disabled }));
+    }
+    // Object array
+    else if (newValue && newValue.every(item => isOption$2(item))) {
+      this.options = newValue;
+    }
+    else {
+      throw new Error('<mg-input-radio> prop "items" is required and all items must be the same type, string or RadioOption.');
+    }
+  }
+  /**
+   * Public method to display errors
+   *
+   * @returns {Promise<void>}
+   */
+  async displayError() {
+    this.checkValidity();
+    this.checkError();
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Check if component props are well configured on init
+   *
+   * @returns {ReturnType<typeof setTimeout>} timeout
+   */
+  componentWillLoad() {
+    // Check items format
+    this.validateItems(this.items);
+    // 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 (index.h(MgInput, { identifier: this.identifier, classList: this.classList, label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, disabled: this.disabled, readonly: this.readonly, width: undefined, value: this.value, readonlyValue: this.value, tooltip: this.tooltip, displayCharacterLeft: undefined, characterLeftTemplate: undefined, maxlength: undefined, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: true }, index.h("ul", { class: { 'mg-input__input-group-container': true, 'mg-input__input-group-container--vertical': this.inputVerticalList } }, this.options.map((input, index$1) => (index.h("li", { class: { 'mg-input__input-group': true, 'mg-input__input-group--disabled': this.disabled || input.disabled } }, index.h("input", { type: "radio", id: this.identifier + '_' + index$1, name: this.identifier, value: index$1, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index$1].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: el => this.inputs.push(el) }), index.h("label", { htmlFor: this.identifier + '_' + index$1 }, input.title)))))));
+  }
+  static get watchers() { return {
+    "value": ["handleValue"],
+    "items": ["validateItems"]
+  }; }
+};
+MgInputRadio.style = mgInputRadioCss;
+
+const mgInputSelectCss = ":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%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.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);width:100%;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--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-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left: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-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.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}.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__box{padding-top:0;padding-bottom:0;padding-right:1rem}";
+
+/**
+ * Check if item is a well configured option
+ *
+ * @param {SelectOption} option select option
+ * @returns {boolean} select option type is valid
+ */
+const isOption$1 = (option) => typeof option === 'object' && typeof option.title === 'string' && option.value !== undefined;
+/**
+ * Group options
+ *
+ * @param {(SelectOption | OptGroup)[]} acc reduce accumulator
+ * @param {SelectOption} item item to add
+ * @param {string} item.group item group
+ * @param {string} item.title item title
+ * @param {unknown} item.value item value
+ * @param {boolean} item.disabled is item disabled
+ * @returns {(SelectOption | OptGroup)[]} grouped options
+ */
+const groupOptions = (acc, { group, title, value, disabled }) => {
+  if (group !== undefined) {
+    // Check if group is already created
+    const optGroup = acc.find(grp => grp.group === group);
+    // Add to group
+    if (optGroup !== undefined) {
+      optGroup.options.push({ title, value, disabled });
+    }
+    // Create group
+    else {
+      acc.push({ group, options: [{ title, value, disabled }] });
+    }
+  }
+  else {
+    acc.push({ title, value, disabled });
+  }
+  return acc;
+};
+const MgInputSelect = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.valueChange = index.createEvent(this, "value-change", 7);
+    this.inputValid = index.createEvent(this, "input-valid", 7);
+    /************
+     * Internal *
+     ************/
+    // classes
+    this.classError = InputClass.ERROR;
+    /**
+     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+     * If not set, it will be created.
+     */
+    this.identifier = index$1.createID('mg-input-select');
+    /**
+     * Input name
+     * If not set the value equals the identifier
+     */
+    this.name = this.identifier;
+    /**
+     * Define if label is visible
+     */
+    this.labelHide = false;
+    /**
+     * Input placeholder.
+     * It should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.
+     */
+    this.placeholder = index$1.messages.input.select.placeholder;
+    /**
+     * Option to remove placeholder
+     */
+    this.placeholderHide = false;
+    /**
+     * Option to disable placeholder
+     */
+    this.placeholderDisabled = false;
+    /**
+     * Define if input is required
+     */
+    this.required = false;
+    /**
+     * Define if input is readonly
+     */
+    this.readonly = false;
+    /**
+     * Define if input is disabled
+     */
+    this.disabled = false;
+    /**
+     * Component classes
+     */
+    this.classList = new index$1.ClassList(['mg-input--select']);
+    /**
+     * Handle input event
+     */
+    this.handleInput = () => {
+      this.checkValidity();
+      if (this.input.value !== '') {
+        this.value = index$1.allItemsAreString(this.items) ? this.input.value : this.items.find(item => item.title === this.input.value).value;
+      }
+      else {
+        this.value = null;
+      }
+    };
+    /**
+     * Handle blur event
+     */
+    this.handleBlur = () => {
+      this.checkValidity();
+      this.checkError();
+    };
+    /**
+     * 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);
+      }
+    };
+    /**
+     * Check input errors
+     */
+    this.checkError = () => {
+      // Set error message
+      this.errorMessage = undefined;
+      if (!this.valid && this.input.validity.valueMissing) {
+        this.errorMessage = index$1.messages.errors.required;
+      }
+      // Update class
+      if (this.valid) {
+        this.classList.delete(this.classError);
+      }
+      else {
+        this.classList.add(this.classError);
+      }
+    };
+  }
+  handleValue(newValue) {
+    if (newValue !== null) {
+      this.readonlyValue = index$1.allItemsAreString(this.items) ? this.input.value : this.items.find(item => item.value === newValue).title;
+    }
+    else {
+      this.readonlyValue = null;
+    }
+    this.valueChange.emit(newValue);
+  }
+  validateItems(newValue) {
+    // String array
+    if (index$1.allItemsAreString(newValue)) {
+      this.valueExist = newValue.includes(this.value);
+      this.options = newValue.map((item) => ({ title: item, value: item }));
+    }
+    // Object array
+    else if (newValue && newValue.every(item => isOption$1(item))) {
+      this.valueExist = newValue.map(item => item.value).includes(this.value);
+      // Grouped object options
+      if (newValue.some(item => item.group !== undefined)) {
+        this.options = newValue.reduce(groupOptions, []);
+      }
+      // Standart object options
+      else {
+        this.options = newValue;
+      }
+    }
+    else {
+      throw new Error('<mg-input-select> prop "items" is required and all items must be the same type, string or Option.');
+    }
+  }
+  /**
+   * Public method to display errors
+   *
+   * @returns {Promise<void>}
+   */
+  async displayError() {
+    this.checkValidity();
+    this.checkError();
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Check if component props are well configured on init
+   *
+   * @returns {ReturnType<typeof setTimeout>} timeout
+   */
+  componentWillLoad() {
+    // Check items format
+    this.validateItems(this.items);
+    // 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 (index.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: this.readonlyValue, tooltip: this.tooltip, displayCharacterLeft: undefined, characterLeftTemplate: undefined, maxlength: undefined, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, index.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
+    index.h("option", { value: "", disabled: this.placeholderDisabled && this.valueExist }, this.placeholder)), this.options.map(option => option.group !== undefined ? (index.h("optgroup", { label: option.group }, option.options.map(optgroup => (index.h("option", { value: optgroup.title, selected: JSON.stringify(this.value) === JSON.stringify(optgroup.value), disabled: optgroup.disabled }, optgroup.title))))) : (index.h("option", { value: option.title, selected: JSON.stringify(this.value) === JSON.stringify(option.value), disabled: option.disabled }, option.title))))));
+  }
+  static get watchers() { return {
+    "value": ["handleValue"],
+    "items": ["validateItems"]
+  }; }
+};
+MgInputSelect.style = mgInputSelectCss;
+
+const mgInputTextCss = ":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%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.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);width:100%;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--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-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left: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-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.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--has-icon .mg-input__input{position:relative}.mg-input.mg-input--has-icon .mg-input__input>mg-icon{position:absolute;top:calc(var(--default-size) - var(--mg-icon-regular-size));left:var(--mg-inputs-spacer);color:var(--mg-inputs-color);-webkit-transform:translateY(-50%);transform:translateY(-50%)}.mg-input.mg-input--has-icon .mg-input__input .mg-input__box{padding-left:calc(var(--mg-icon-regular-size) + var(--mg-inputs-spacer) * 2)}";
+
+const MgInputText = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.valueChange = index.createEvent(this, "value-change", 7);
+    this.inputValid = index.createEvent(this, "input-valid", 7);
+    /************
+     * Internal *
+     ************/
+    // classes
+    this.classFocus = 'is-focused';
+    this.isInputGroupAppend = 'mg-input--is-input-group-append';
+    this.classError = InputClass.ERROR;
+    /**
+     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+     * If not set, it will be created.
+     */
+    this.identifier = index$1.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.width = 'full';
+    /**
+     * Define if component should display character left
+     */
+    this.displayCharacterLeft = true;
+    /**
+     * Component classes
+     */
+    this.classList = new index$1.ClassList(['mg-input--text']);
+    /**
+     * Handle input event
+     *
+     * @returns {void}
+     */
+    this.handleInput = () => {
+      this.checkValidity();
+      this.value = this.input.value;
+    };
+    /**
+     * Handle focus event
+     *
+     * @returns {void}
+     */
+    this.handleFocus = () => {
+      this.classList.add(this.classFocus);
+      this.classList = new index$1.ClassList(this.classList.classes);
+    };
+    /**
+     * Handle blur event
+     *
+     * @returns {void}
+     */
+    this.handleBlur = () => {
+      // Manage focus
+      this.classList.delete(this.classFocus);
+      this.classList = new index$1.ClassList(this.classList.classes);
+      // Check validity
+      this.checkValidity();
+      this.checkError();
+    };
+    /**
+     * 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 = index$1.messages.errors.required;
+      }
+      // Update class
+      if (this.valid) {
+        this.classList.delete(this.classError);
+      }
+      else {
+        this.classList.add(this.classError);
+      }
+    };
+    /**
+     * 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.isInputGroupAppend : 'mg-input--is-append-input-slot-content');
+      }
+      else if (slotAppendInput.filter(slot => slot.nodeName === 'MG-BUTTON').length > 1) {
+        this.classList.add(this.isInputGroupAppend);
+        this.classList.add('mg-input--has-buttons-group-append');
+      }
+    };
+  }
+  handleValue(newValue) {
+    this.valueChange.emit(newValue);
+  }
+  /**
+   * 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();
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Check if component props are well configured on init
+   *
+   * @returns {ReturnType<typeof setTimeout>} timeout
+   */
+  componentWillLoad() {
+    if (this.icon !== undefined) {
+      this.classList.add('mg-input--has-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 (index.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 }, this.icon !== undefined && index.h("mg-icon", { icon: this.icon }), index.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) }), index.h("slot", { name: "append-input" })));
+  }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "value": ["handleValue"]
+  }; }
+};
+MgInputText.style = mgInputTextCss;
+
+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%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.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);width:100%;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--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-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left: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-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.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 MgInputTextarea = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.valueChange = index.createEvent(this, "value-change", 7);
+    this.inputValid = index.createEvent(this, "input-valid", 7);
+    /************
+     * Internal *
+     ************/
+    // classes
+    this.classFocus = 'is-focused';
+    this.classError = InputClass.ERROR;
+    /**
+     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+     * If not set, it will be created.
+     */
+    this.identifier = index$1.createID('mg-input-textarea');
+    /**
+     * Input name
+     * If not set the value equals the identifier
+     */
+    this.name = this.identifier;
+    /**
+     * Define if label is visible
+     */
+    this.labelHide = false;
+    /**
+     * Input max length
+     */
+    this.maxlength = 4000;
+    /**
+     * 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.width = 'full';
+    /**
+     * Define input pattern error message
+     */
+    this.rows = 3;
+    /**
+     * Define if component should display character left
+     */
+    this.displayCharacterLeft = true;
+    /**
+     * Component classes
+     */
+    this.classList = new index$1.ClassList(['mg-input--textarea']);
+    /**
+     * Handle input event
+     */
+    this.handleInput = () => {
+      this.value = this.input.value;
+    };
+    /**
+     * Handle focus event
+     */
+    this.handleFocus = () => {
+      this.classList.add(this.classFocus);
+      this.classList = new index$1.ClassList(this.classList.classes);
+    };
+    /**
+     * Handle blur event
+     */
+    this.handleBlur = () => {
+      // Manage focus
+      this.classList.delete(this.classFocus);
+      this.classList = new index$1.ClassList(this.classList.classes);
+      // Check validity
+      this.checkValidity();
+      this.checkError();
+    };
+    /**
+     * Get pattern validity
+     * Pattern is not defined on textarea field : https://developer.mozilla.org/fr/docs/Web/HTML/Element/Textarea
+     *
+     * @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 = index$1.messages.errors.required;
+      }
+      // Update class
+      if (this.valid) {
+        this.classList.delete(this.classError);
+      }
+      else {
+        this.classList.add(this.classError);
+      }
+    };
+    /**
+     * Validate pattern configuration
+     */
+    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-textarea> prop "pattern" must be paired with the prop "patternErrorMessage"');
+      }
+    };
+  }
+  handleValue(newValue) {
+    this.checkValidity();
+    this.valueChange.emit(newValue);
+  }
+  /**
+   * Public method to display errors
+   *
+   * @returns {Promise<void>}
+   */
+  async displayError() {
+    this.checkValidity();
+    this.checkError();
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Check if component props are well configured on init
+   *
+   * @returns {ReturnType<typeof setTimeout>} timeout
+   */
+  componentWillLoad() {
+    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);
+  }
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render() {
+    return (index.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 }, index.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) })));
+  }
+  static get watchers() { return {
+    "value": ["handleValue"]
+  }; }
+};
+MgInputTextarea.style = mgInputTextareaCss;
+
+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 = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Switch from label to fieldset sementic
+     */
+    this.isLegend = false;
+    /**
+     * Component parent tagname
+     */
+    this.tagName = 'label';
+    this.getTagName = () => {
+      this.tagName = this.isLegend ? 'legend' : 'label';
+    };
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Init tag name
+   *
+   * @returns {void}
+   */
+  componentWillLoad() {
+    this.getTagName();
+  }
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render() {
+    const TagName = this.tagName;
+    // \u00A0 represent a &nbsp;
+    return (index.h(TagName, { class: "mg-input-title", htmlFor: this.isLegend ? undefined : this.identifier }, index.h("slot", null), this.required && (index.h("span", { class: "mg-input-title__required" }, "\u00A0", index.h("span", { class: "is-asterisk" }, "*")))));
+  }
+};
+MgInputTitle.style = mgInputTitleCss;
+
+const mgInputToggleCss = ":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%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.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}.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.mg-input--toggle .mg-input__input-container{-ms-flex:auto;flex:auto;min-width:0}.mg-input__button-toggle{display:-ms-flexbox;display:flex;padding:0.2rem;min-width:0;background-color:hsl(var(--color-light));border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:calc((var(--font-size) * var(--line-height) + 2 * (0.7rem + var(--mg-inputs-border-width))) / var(--mg-input-toggle-border-radius-ratio));font-size:inherit;line-height:inherit;cursor:pointer}.mg-input__button-toggle:disabled{cursor:default}.mg-input__toggle-item-container{padding:0.5rem 0.9rem;border:0;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:calc((var(--font-size) * var(--line-height) + 1rem) / var(--mg-input-toggle-border-radius-ratio));background-color:unset;font-weight:unset;color:hsl(var(--color-dark));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mg-input__toggle-item-container:first-of-type{font-weight:600;color:hsl(var(--color-info));background-color:hsl(var(--color-info-h), calc(var(--color-info-s) - 64%), calc(var(--color-info-l) + 55%))}.mg-input.mg-input--toggle-is-active .mg-input__toggle-item-container:first-of-type{background-color:unset;font-weight:unset;color:hsl(var(--color-dark))}.mg-input.mg-input--toggle-is-active .mg-input__toggle-item-container:last-of-type{font-weight:600;color:hsl(var(--color-info));background-color:hsl(var(--color-info-h), calc(var(--color-info-s) - 64%), calc(var(--color-info-l) + 55%))}.mg-input.mg-input--toggle-icon .mg-input__toggle-item-container{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;width:calc(var(--font-size) * var(--line-height) + 1rem);height:calc(var(--font-size) * var(--line-height) + 1rem);padding:0;visibility:hidden}.mg-input.mg-input--toggle-icon .mg-input__toggle-item-container:first-of-type{visibility:visible}.mg-input.mg-input--toggle-icon .mg-input__toggle-item-container ::slotted(mg-icon){display:-ms-flexbox;display:flex}.mg-input.mg-input--toggle-icon.mg-input--toggle-is-active .mg-input__toggle-item-container:first-of-type{visibility:hidden}.mg-input.mg-input--toggle-icon.mg-input--toggle-is-active .mg-input__toggle-item-container:last-of-type{visibility:visible}.mg-input.mg-input--toggle-on-off .mg-input__toggle-item-container:first-of-type{font-weight:600;color:hsl(var(--color-dark));background-color:hsl(var(--color-dark-h), calc(var(--color-dark-s) - 30%), calc(var(--color-dark-l) + 75%))}.mg-input.mg-input--toggle-on-off.mg-input--toggle-is-active .mg-input__toggle-item-container:first-of-type{background-color:unset;font-weight:unset;color:hsl(var(--color-dark))}.mg-input.mg-input--toggle-readonly .mg-input__button-toggle{border-color:transparent;background-color:transparent;cursor:initial}.mg-input.mg-input--toggle-readonly .mg-input__toggle-item-container:last-of-type{display:none}.mg-input.mg-input--toggle-readonly.mg-input--toggle-is-active .mg-input__toggle-item-container:first-of-type{display:none}.mg-input.mg-input--toggle-readonly.mg-input--toggle-is-active .mg-input__toggle-item-container:last-of-type{display:-ms-flexbox;display:flex}.mg-input.mg-input--toggle-disabled .mg-input__button-toggle{opacity:0.3}";
+
+/**
+ * type Option validation function
+ *
+ * @param {ToggleValue} option radio option
+ * @returns {boolean} toggle option type is valid
+ */
+const isOption = (option) => typeof option === 'object' && typeof option.title === 'string' && option.value !== undefined;
+const MgInputToggle = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.valueChange = index.createEvent(this, "value-change", 7);
+    this.inputValid = index.createEvent(this, "input-valid", 7);
+    /************
+     * Internal *
+     ************/
+    // classes
+    this.classReadonly = 'mg-input--toggle-readonly';
+    this.classDisabled = 'mg-input--toggle-disabled';
+    this.classIsActive = 'mg-input--toggle-is-active';
+    /**
+     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+     * If not set, it will be created.
+     */
+    this.identifier = index$1.createID('mg-input-toggle');
+    /**
+     * Input name
+     * If not set the value equals the identifier
+     */
+    this.name = this.identifier;
+    /**
+     * Define if label is visible
+     */
+    this.labelHide = false;
+    /**
+     * Define if toggle have on/off style
+     */
+    this.isOnOff = false;
+    /**
+     * Define if toggle display icon
+     */
+    this.isIcon = false;
+    /**
+     * Define if input is readonly
+     */
+    this.readonly = false;
+    /**
+     * Define if input is disabled
+     */
+    this.disabled = false;
+    /**
+     * Component classes
+     */
+    this.classList = new index$1.ClassList(['mg-input--toggle']);
+    /**
+     * Checked internal value
+     */
+    this.checked = false;
+    /**
+     * Change checked value
+     *
+     * @returns {void}
+     */
+    this.toggleChecked = () => {
+      this.checked = !this.checked;
+    };
+    /**
+     * Slots validation
+     *
+     * @returns {void}
+     */
+    this.validateSlots = () => {
+      const slots = Array.from(this.element.children);
+      if (slots.length !== 2) {
+        throw new Error('<mg-input-toggle> 2 slots are required.');
+      }
+      else if (!this.isIcon) {
+        // Due to text-overflow set to ellipsis
+        // we need to ensure that slot element have title to display value on mouse over
+        slots.forEach(slot => slot.setAttribute('title', slot.textContent));
+      }
+    };
+  }
+  handleValue(newValue) {
+    // Swich to the right option
+    this.setChecked();
+    // Emit value-change event
+    this.valueChange.emit(newValue);
+  }
+  validateItems(newValue) {
+    if (typeof newValue === 'object' && this.items.length !== 2) {
+      throw new Error('<mg-input-toggle> prop "items" require 2 items.');
+    }
+    // String array
+    else if (index$1.allItemsAreString(newValue)) {
+      this.options = newValue.map(item => ({ title: item, value: item }));
+    }
+    // Object array
+    else if (newValue && newValue.every(item => isOption(item))) {
+      this.options = newValue;
+    }
+    else {
+      throw new Error('<mg-input-toggle> prop "items" is required and all items must be the same type: ToggleValue.');
+    }
+  }
+  handleIsOnOff(newValue) {
+    if (newValue)
+      this.classList.add(`mg-input--toggle-on-off`);
+  }
+  handleIsIcon(newValue) {
+    if (newValue)
+      this.classList.add(`mg-input--toggle-icon`);
+  }
+  handleReadonly(newValue) {
+    if (newValue)
+      this.classList.add(this.classReadonly);
+    else
+      this.classList.delete(this.classReadonly);
+  }
+  handleDisabled(newValue) {
+    if (newValue)
+      this.classList.add(this.classDisabled);
+    else
+      this.classList.delete(this.classDisabled);
+  }
+  handleChecked(newValue) {
+    // style
+    if (newValue)
+      this.classList.add(this.classIsActive);
+    else
+      this.classList.delete(this.classIsActive);
+    // update value
+    this.value = this.options[newValue ? 1 : 0].value;
+  }
+  /**
+   * set checked state
+   *
+   * @returns {void}
+   */
+  setChecked() {
+    // has "value" props type is not a boolean, it is bind/render as an attributes/props
+    // true props will be represent by "true" string so we convert it has boolean
+    // true attribute will be represent by "" string so we convert it has boolean
+    // https://stenciljs.com/docs/properties
+    if (['', 'true'].includes(this.value) && this.options.find(option => option.value) !== undefined) {
+      this.value = true;
+    }
+    this.checked = this.value === this.options[1].value;
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Check if component props are well configured on init
+   */
+  componentWillLoad() {
+    // Check items format
+    this.validateItems(this.items);
+    // Check slots
+    this.validateSlots();
+    // init checked value
+    this.setChecked();
+    // apply handler
+    this.handleIsOnOff(this.isOnOff);
+    this.handleIsIcon(this.isIcon);
+    this.handleReadonly(this.readonly);
+    this.handleDisabled(this.disabled);
+  }
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render() {
+    return (index.h(MgInput, { identifier: this.identifier, classList: this.classList, label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, readonly: undefined, width: undefined, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: !this.readonly && this.tooltip, displayCharacterLeft: undefined, characterLeftTemplate: undefined, maxlength: undefined, helpText: this.helpText, errorMessage: undefined, isFieldset: false }, index.h("button", { type: "button", role: "switch", "aria-checked": this.checked, "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked }, index.h("span", { "aria-hidden": "true", class: "mg-input__toggle-item-container" }, index.h("slot", { name: "item-1" })), index.h("span", { "aria-hidden": "true", class: "mg-input__toggle-item-container" }, index.h("slot", { name: "item-2" })))));
+  }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "value": ["handleValue"],
+    "items": ["validateItems"],
+    "isOnOff": ["handleIsOnOff"],
+    "isIcon": ["handleIsIcon"],
+    "readonly": ["handleReadonly"],
+    "disabled": ["handleDisabled"],
+    "checked": ["handleChecked"]
+  }; }
+};
+MgInputToggle.style = mgInputToggleCss;
+
+/**
+ * List of all possibles message variants
+ */
+const variants$1 = ['info', 'warning', 'success', 'danger'];
+
+const mgMessageCss = ".mg-message{display:inline-block;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;min-height:var(--default-size);overflow:hidden;background-color:white;border-radius:var(--mg-message-border-radius);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}.mg-message::before{content:\"\";position:absolute;top:0;left:0;width:0.3rem;height:100%}.mg-message.mg-message--info::before{background-color:hsl(var(--color-info))}.mg-message.mg-message--info .mg-message__icon{color:hsl(var(--color-info))}.mg-message.mg-message--warning::before{background-color:hsl(var(--color-warning))}.mg-message.mg-message--warning .mg-message__icon{color:hsl(var(--color-warning))}.mg-message.mg-message--success::before{background-color:hsl(var(--color-success))}.mg-message.mg-message--success .mg-message__icon{color:hsl(var(--color-success))}.mg-message.mg-message--danger::before{background-color:hsl(var(--color-danger))}.mg-message.mg-message--danger .mg-message__icon{color:hsl(var(--color-danger))}.mg-message.mg-message--close-button{padding-right:3.4rem}.mg-message.mg-message--hide{display:none}.mg-message ::slotted(*){margin:0;padding:0}.mg-message__icon{position:absolute;top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2);left:1.3rem;line-height:1}.mg-message__content{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-line-pack:stretch;align-content:stretch;padding:0 1rem 0 3.8rem}.mg-message__content-slot{-ms-flex-positive:1;flex-grow:1;margin:0.84rem 0}.mg-message__content-separator{display:inline-block;width:4.5rem;height:0}.mg-message__content-actions-slot{padding:1rem 0;text-align:right}.mg-message__close-button{position:absolute;top:0;right:0}.mg-message,mg-message{max-width:100%}";
+
+const MgMessage = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.componentShow = index.createEvent(this, "component-show", 7);
+    this.componentHide = index.createEvent(this, "component-hide", 7);
+    /************
+     * Internal *
+     ************/
+    this.closeButtonId = '';
+    // Stored timer setted when hide action is run from setTimeOut
+    this.storedTimer = null;
+    /**
+     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+     * If not set, it will be created.
+     */
+    this.identifier = index$1.createID('mg-message');
+    /**
+     * Message variant
+     */
+    this.variant = variants$1[0]; // info
+    /**
+     * Define if message has a cross button
+     * RG 01: https://jira.mgdis.fr/browse/PDA9-140
+     */
+    this.closeButton = false;
+    /**
+     * Define if message is hidden
+     */
+    this.hide = false;
+    /**
+     * Component classes
+     */
+    this.classList = new index$1.ClassList(['mg-message']);
+    /**
+     * Define if component is using actions slot
+     */
+    this.hasActions = false;
+    /**
+     * Handle close button
+     */
+    this.handleClose = () => {
+      this.hide = true;
+    };
+    /**
+     * Hide component whith delay
+     */
+    this.hideWithDelay = () => {
+      if (this.delay > 0 && this.hide !== true) {
+        this.storedTimer = setTimeout(() => (this.hide = true), this.delay * 1000);
+      }
+      else if (this.storedTimer !== null) {
+        clearTimeout(this.storedTimer);
+      }
+    };
+    /**
+     * Get icon corresponding to variant
+     *
+     * @returns {string} icon
+     */
+    this.getIcon = () => {
+      switch (this.variant) {
+        case 'info':
+          return 'info-circle';
+        case 'warning':
+          return 'exclamation-triangle';
+        case 'success':
+          return 'check-circle';
+        case 'danger':
+          return 'exclamation-circle';
+      }
+    };
+  }
+  validateDelay(newValue) {
+    if (newValue && newValue < 2) {
+      throw new Error(`<mg-message> prop "delay" must be greater than 2 seconds.`);
+    }
+  }
+  validateVariant(newValue, oldValue) {
+    if (!variants$1.includes(newValue)) {
+      throw new Error(`<mg-message> prop "variant" must be one of : ${variants$1.join(', ')}`);
+    }
+    if (oldValue !== undefined) {
+      this.classList.delete(`mg-message--${oldValue}`);
+    }
+    this.classList.add(`mg-message--${this.variant}`);
+  }
+  validateCloseButton(newValue) {
+    if (newValue && this.hasActions) {
+      this.closeButton = false;
+      throw new Error('<mg-message> prop "close-button" can\'t be used with the actions slot.');
+    }
+  }
+  validateHide(newValue) {
+    if (newValue) {
+      this.componentHide.emit();
+      this.classList.add('mg-message--hide');
+    }
+    else {
+      this.componentShow.emit();
+      this.classList.delete('mg-message--hide');
+    }
+    this.hideWithDelay();
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Check if component props are well configured on init
+   */
+  componentWillLoad() {
+    this.validateVariant(this.variant);
+    // Check if close button is an can be activated
+    this.hasActions = this.element.querySelector('[slot="actions"]') !== null;
+    this.validateCloseButton(this.closeButton);
+    if (this.closeButton) {
+      this.classList.add('mg-message--close-button');
+      this.closeButtonId = `${this.identifier}-close-button`;
+    }
+    this.validateDelay(this.delay);
+    this.validateHide(this.hide);
+  }
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render() {
+    return (index.h("div", { id: this.identifier, class: this.classList.join(), role: this.variant === 'info' ? 'status' : 'alert' }, index.h("span", { class: "mg-message__icon" }, index.h("mg-icon", { icon: this.getIcon() })), index.h("div", { class: "mg-message__content" }, index.h("span", { class: "mg-message__content-slot" }, index.h("slot", null)), this.hasActions && index.h("span", { class: "mg-message__content-separator" }), this.hasActions && (index.h("span", { class: "mg-message__content-actions-slot" }, index.h("slot", { name: "actions" })))), this.closeButton && (index.h("span", { class: "mg-message__close-button" }, index.h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: index$1.messages.message.closeButton, onClick: this.handleClose }, index.h("mg-icon", { icon: "cross" }))))));
+  }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "delay": ["validateDelay"],
+    "variant": ["validateVariant"],
+    "closeButton": ["validateCloseButton"],
+    "hide": ["validateHide"]
+  }; }
+};
+MgMessage.style = mgMessageCss;
+
+var NavigationAction;
+(function (NavigationAction) {
+  NavigationAction["NEXT"] = "next";
+  NavigationAction["PREVIOUS"] = "previous";
+})(NavigationAction || (NavigationAction = {}));
+
+const mgPaginationCss = ".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-pagination__nav{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}.mg-pagination__nav mg-input-select{margin-right:0.5rem}.mg-pagination__button{display:-ms-flexbox;display:flex}.mg-pagination__button:first-of-type{margin-right:1rem}.mg-pagination__button:last-of-type{margin-left:1rem}";
+
+/**
+ * Range generator
+ *
+ * start by get the range length, add "+ 1" to include last value, ex: Math.ceil((3 + 1 - 1) / 1) => 3
+ * then with Array(Math.ceil...) we get the final array with empty values, ex: Array(Math.ceil(2 + 1 - 1) / 1)) => [empty, empty, empty]
+ * then with Array(Math.ceil...).keys() we get the Array Iterator from empty values
+ * then with Array.from(Array(...)) we get the complete array with "index" values instead of "empty" values
+ * ex: Array.from(Array(Math.ceil((2 + 1 - 1) / 1) || 1).keys()) => [0, 1, 2]
+ * finaly we map values from "start" range and apply the "step" coefficiant,
+ * ex: Array.from(Array(Math.ceil((2 + 1 - 1) / 1) || 1).keys()).map(x => 1 + x * 1) => [1, 2, 3]
+ *
+ * range(1, 1) = [1]
+ * range(1, 5) = [1, 2, 3, 4, 5]
+ * range(10, 20, 2) = [10, 12, 14, 16, 18, 20]
+ *
+ * @param {number} start start range
+ * @param {number} end start end
+ * @param {number} step step size
+ * @returns {number[]} range numbers
+ */
+const range = (start, end, step = 1) => Array.from(Array(Math.ceil((end + 1 - start) / step)).keys()).map(x => start + x * step);
+const MgPagination = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.currentPageChange = index.createEvent(this, "current-page-change", 7);
+    /**************
+     * Decorators *
+     **************/
+    /**
+     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+     * If not set, it will be created.
+     */
+    this.identifier = index$1.createID('mg-pagination');
+    /**
+     * Panignation label. Is a short description.
+     * Customize default value can be usefull to improve accessibility
+     */
+    this.label = 'pagination';
+    /**
+     * Component total pages
+     */
+    this.totalPages = 1;
+    /**
+     * Component current page
+     */
+    this.currentPage = 1;
+    /**
+     * Change current page from target
+     *
+     * @param {number} target target page
+     * @returns {void}
+     */
+    this.goToPage = (target) => {
+      this.currentPage = target;
+    };
+    /************
+     * Handlers *
+     ************/
+    /**
+     * select handler
+     *
+     * @param {InputEvent} event value change event
+     * @returns {void}
+     */
+    this.handleSelect = (event) => {
+      const to = Number(event.target.value);
+      this.goToPage(to > 0 ? to : 1);
+    };
+    /**
+     * Go to 'previous/next' page button handler
+     *
+     * @param {string} action navigation action
+     * @returns {void}
+     */
+    this.handleGoToPage = (action) => {
+      this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);
+    };
+  }
+  validateTotalPages(newValue) {
+    if (newValue < 1) {
+      throw new Error('<mg-pagination> prop "totalPages" must be greater than 0');
+    }
+  }
+  validateCurrentPage(newValue) {
+    if (newValue < 1) {
+      throw new Error('<mg-pagination> prop "currentPage" must be greater than 0');
+    }
+    else if (newValue > this.totalPages) {
+      throw new Error('<mg-pagination> prop "currentPage" can not be greater than total page');
+    }
+    this.currentPageChange.emit(newValue);
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Check if props are well configured on init
+   *
+   * @returns {void}
+   */
+  componentWillLoad() {
+    this.validateTotalPages(this.totalPages);
+    this.validateCurrentPage(this.currentPage);
+  }
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render() {
+    const navigationActionButton = (disabled, action) => (index.h("mg-button", { identifier: `${this.identifier}-button-${action}`, class: "mg-pagination__button", label: index$1.messages.pagination[`${action}Page`],
+      // eslint-disable-next-line react/jsx-no-bind
+      onClick: () => this.handleGoToPage(action), disabled: disabled, variant: "flat" }, action === NavigationAction.PREVIOUS && index.h("mg-icon", { icon: "chevron-left" }), index$1.messages.general[action], action === NavigationAction.NEXT && index.h("mg-icon", { icon: "chevron-right" })));
+    return (index.h("nav", { "aria-label": this.label, id: this.identifier, class: "mg-pagination__nav" }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), index.h("mg-input-select", { identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map(page => page.toString()), label: index$1.messages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true }), index.h("span", { class: "sr-only" }, index$1.messages.pagination.page, " ", this.currentPage), index.h("span", null, "/ ", this.totalPages, " ", this.totalPages > 1 ? index$1.messages.pagination.pages : index$1.messages.pagination.page), navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT)));
+  }
+  static get watchers() { return {
+    "totalPages": ["validateTotalPages"],
+    "currentPage": ["validateCurrentPage"]
+  }; }
+};
+MgPagination.style = mgPaginationCss;
+
+const mgPanelCss = ".mg-panel{background-color:hsl(var(--mg-panel-background));border-radius:var(--mg-panel-border-radius);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}.mg-panel__header{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:justify;justify-content:space-between;padding:0 1rem 0 0.3rem;-ms-flex-align:center;align-items:center}.mg-panel__header-left,.mg-panel__header-right{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;margin:0.3rem 0}.mg-panel__header-left mg-input-text{-ms-flex-positive:1;flex-grow:1}.mg-panel__collapse-button{font-family:var(--font-family-heading);font-size:1.4rem;font-weight:500;margin:0 0.3rem 0 0}.mg-panel__content{padding:1.5rem}.mg-panel ::slotted([slot=header-right]){display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:1rem;margin-left:auto}";
+
+const MgPanel = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.titleChange = index.createEvent(this, "title-change", 7);
+    /**************
+     * Decorators *
+     **************/
+    /**
+     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+     * If not set, it will be created.
+     */
+    this.identifier = index$1.createID('mg-panel');
+    /**
+     * Panel is opened
+     */
+    this.expanded = false;
+    /**
+     * Panel title is editabled
+     */
+    this.titleEditable = false;
+    /**
+     * Component classes
+     */
+    this.classList = new index$1.ClassList(['mg-panel']);
+    /**
+     * Title is in edition mode
+     */
+    this.isEditing = false;
+    /************
+     * Methods *
+     ************/
+    /**
+     * Toggle is editing state
+     *
+     * @returns {void}
+     */
+    this.toggleIsEditing = () => {
+      this.isEditing = !this.isEditing;
+    };
+    /************
+     * Handlers *
+     ************/
+    /**
+     * Collapse button click handler
+     *
+     * @returns {void}
+     */
+    this.handleCollapseButton = () => {
+      this.expanded = !this.expanded;
+    };
+    /**
+     * Edit button click handler
+     *
+     * @returns {void}
+     */
+    this.handleEditButton = () => {
+      this.toggleIsEditing();
+    };
+    /**
+     * Update title handler
+     *
+     * @param {CustomEvent<string>} event input value change event
+     * @returns {void}
+     */
+    this.handleUpdateTitle = (event) => {
+      this.updatedPanelTitle = event.detail;
+    };
+    /**
+     * Cancel edition button handler
+     *
+     * @returns {void}
+     */
+    this.handleCancelEditButton = () => {
+      this.updatedPanelTitle = undefined;
+      this.toggleIsEditing();
+    };
+    /**
+     * Validate edition button handler
+     *
+     * @returns {void}
+     */
+    this.handleValidateEditButton = () => {
+      if (this.updatedPanelTitle !== undefined)
+        this.panelTitle = this.updatedPanelTitle;
+      this.toggleIsEditing();
+    };
+    /*************
+     * Lifecycle *
+     *************/
+    /**
+     * Header left conditional render
+     *
+     * @typedef {HTMLElement} HTMLMgButtonElement
+     * @returns {HTMLMgButtonElement | HTMLElement | HTMLElement[]} header left element
+     */
+    this.headerLeft = () => {
+      const collapseButton = () => (index.h("mg-button", { onClick: this.handleCollapseButton, variant: "flat", class: "mg-panel__collapse-button", identifier: `${this.identifier}-collapse-button`, expanded: this.expanded, controls: `${this.identifier}-content` }, index.h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down' }), !this.isEditing && this.panelTitle));
+      if (this.titleEditable && !this.isEditing) {
+        return [
+          collapseButton(),
+          index.h("mg-button", { "is-icon": true, variant: "secondary", label: index$1.messages.panel.editLabel, onClick: this.handleEditButton, identifier: `${this.identifier}-edit-button` }, index.h("mg-icon", { icon: "pen" })),
+        ];
+      }
+      if (this.titleEditable && this.isEditing) {
+        return [
+          collapseButton(),
+          index.h("mg-input-text", { label: index$1.messages.panel.editLabel, "label-hide": true, value: this.panelTitle, "onValue-change": this.handleUpdateTitle, displayCharacterLeft: false, identifier: `${this.identifier}-edition-input`, ref: el => (this.editInputElement = el) }, index.h("mg-button", { slot: "append-input", label: index$1.messages.general.cancel, "is-icon": true, variant: "secondary", onClick: this.handleCancelEditButton, identifier: `${this.identifier}-edition-button-cancel` }, index.h("mg-icon", { icon: "cross" })), index.h("mg-button", { slot: "append-input", label: index$1.messages.general.validate, "is-icon": true, variant: "secondary", onClick: this.handleValidateEditButton, identifier: `${this.identifier}-edition-button-validate` }, index.h("mg-icon", { icon: "check" }))),
+        ];
+      }
+      return collapseButton();
+    };
+  }
+  handelTileChange(newValue) {
+    this.titleChange.emit(newValue);
+  }
+  /**
+   * Edit DOM after render
+   *
+   * @returns {void}
+   */
+  componentDidRender() {
+    // when we are editing we get focus on edition input
+    if (this.isEditing) {
+      this.editInputElement.setFocus();
+    }
+  }
+  /**
+   * Render component
+   *
+   * @returns {HTMLElement} html element
+   */
+  render() {
+    return (index.h("section", { class: this.classList.join(), id: this.identifier }, index.h("header", { class: "mg-panel__header", id: `${this.identifier}-header` }, index.h("div", { class: "mg-panel__header-left" }, this.headerLeft()), index.h("div", { class: "mg-panel__header-right" }, index.h("slot", { name: "header-right" }))), index.h("article", { class: "mg-panel__content", id: `${this.identifier}-content`, "aria-labelledby": `${this.identifier}-header`, hidden: !this.expanded }, index.h("slot", null))));
+  }
+  static get watchers() { return {
+    "panelTitle": ["handelTileChange"]
+  }; }
+};
+MgPanel.style = mgPanelCss;
+
+/**
+ * List of all possibles sizes
+ */
+const sizes = ['regular', 'large'];
+
+const mgTabsCss = ".mg-tabs.mg-tabs--size-regular.sc-mg-tabs .mg-tabs__navigation-button.sc-mg-tabs{padding:calc(1rem + 0.3rem) calc(1rem * 1.3) 1rem}.mg-tabs.mg-tabs--size-large.sc-mg-tabs .mg-tabs__navigation-button.sc-mg-tabs{padding:calc(1.8rem + 0.3rem) calc(1.8rem * 1.3) 1.8rem}.mg-tabs__header.sc-mg-tabs{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}.mg-tabs__navigation-button.sc-mg-tabs{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-column-gap:0.5rem;-moz-column-gap:0.5rem;column-gap:0.5rem;background:none;border:none;border-bottom:0.3rem solid transparent;color:hsl(var(--color-dark));line-height:var(--line-height);cursor:pointer}.mg-tabs__navigation-button.sc-mg-tabs:disabled,.mg-tabs__navigation-button--disabled.sc-mg-tabs{cursor:default;opacity:30%}.mg-tabs__navigation-button.sc-mg-tabs:hover:not(:disabled),.mg-tabs__navigation-button.sc-mg-tabs:focus:not(:disabled){background-color:hsla(var(--color-info-h), var(--color-info-s), var(--color-info-l), 10%)}.mg-tabs__navigation-button.mg-tabs__navigation-button--active.sc-mg-tabs{color:hsl(var(--color-info));border-bottom-color:hsl(var(--color-info));font-weight:700}.mg-tabs__content-container.sc-mg-tabs:focus-visible{outline:none}";
+
+/**
+ * type TabItem validation function
+ *
+ * @param {TabItem} tab tab item
+ * @returns {boolean} tab item type is valid
+ */
+const isTabItem = (tab) => typeof tab === 'object' && typeof tab.label === 'string';
+const MgTabs = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+     * If not set, it will be created.
+     */
+    this.identifier = index$1.createID('mg-tabs');
+    /**
+     * Define tabs size
+     */
+    this.size = 'regular';
+    /**
+     * Active tab number
+     * default: first is 1
+     */
+    this.activeTab = 1;
+    /**
+     * Component tabs
+     */
+    this.tabs = [];
+    /**
+     * Component classes
+     */
+    this.classList = new index$1.ClassList(['mg-tabs']);
+    /**
+     * Handle click events on tabs
+     *
+     * @param {MouseEvent} event mouse event
+     */
+    this.handleClick = (event) => {
+      const tabId = event.currentTarget.getAttribute('data-index');
+      this.activeTab = Number(tabId);
+    };
+    /**
+     * Handle keyboard event on tabs
+     *
+     * @param {MouseEvent} event mouse event
+     * @returns {void}
+     */
+    this.handleKeydown = (event) => {
+      let tabId = Number(event.target.getAttribute('data-index'));
+      const parent = event.target.parentElement;
+      // change selected id from key code
+      // /* IE FIX */ delete 'Right'
+      if (['ArrowRight', 'Right'].includes(event.key)) {
+        tabId++;
+        // /* IE FIX */ delete 'Left'
+      }
+      else if (['ArrowLeft', 'Left'].includes(event.key)) {
+        tabId--;
+      }
+      // get selected tab
+      const selectedTab = parent.querySelector(`[data-index="${tabId}"]`);
+      // apply selected tab if exist
+      if (selectedTab !== null) {
+        selectedTab.focus();
+        this.activeTab = tabId;
+      }
+    };
+    /**
+     * Validate slots setting
+     */
+    this.validateSlots = () => {
+      const slots = Array.from(this.element.children).filter(slot => { var _a; return (_a = slot.getAttribute('slot')) === null || _a === void 0 ? void 0 : _a.includes('tab_content-'); });
+      if (slots.length !== this.tabs.length) {
+        throw new Error('<mg-tabs> Must have slots counts equal to tabs count.');
+      }
+    };
+  }
+  validateSize(newValue) {
+    if (!sizes.includes(newValue)) {
+      throw new Error(`<mg-tabs> prop "size" must be one of : ${sizes.join(', ')}`);
+    }
+    this.classList.add(`mg-tabs--size-${this.size}`);
+  }
+  validateItems(newValue) {
+    // String array
+    if (index$1.allItemsAreString(newValue)) {
+      this.tabs = newValue.map(item => ({ label: item, disabled: false }));
+    }
+    // Object array
+    else if (newValue && newValue.every(item => isTabItem(item))) {
+      this.tabs = newValue;
+    }
+    else {
+      throw new Error('<mg-tabs> prop "items" is required and all items must be the same type: TabItem.');
+    }
+  }
+  validateActiveTab(newValue) {
+    if (Number(newValue) < 1 || Number(newValue) > this.tabs.length) {
+      throw new Error('<mg-tabs> prop "activeTab" must be between 1 and tabs length.');
+    }
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Check if component props are well configured on init
+   *
+   * @returns {void}
+   */
+  componentWillLoad() {
+    // Check tabs format
+    this.validateItems(this.items);
+    this.validateActiveTab(this.activeTab);
+    this.validateSize(this.size);
+    this.validateSlots();
+  }
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: this.classList.join() }, index.h("header", { role: "tablist", "aria-label": this.label, class: "mg-tabs__header" }, this.tabs.map((tab, index$1) => {
+      const tabIndex = index$1 + 1;
+      return (index.h("button", { role: "tab", id: `${this.identifier}-${tabIndex}`, class: {
+          'mg-tabs__navigation-button': true,
+          'mg-tabs__navigation-button--active': tabIndex === this.activeTab,
+          'mg-tabs__navigation-button--disabled': tab.disabled,
+        }, tabindex: tabIndex === this.activeTab ? 0 : -1, "aria-selected": (tabIndex === this.activeTab).toString(), "aria-controls": `pannel-${tabIndex}`, onClick: this.handleClick, onKeyDown: this.handleKeydown, "data-index": tabIndex, disabled: tab.disabled }, tab.icon !== undefined && index.h("mg-icon", { icon: tab.icon }), tab.label, tab.badge !== undefined && index.h("mg-badge", { variant: "info", value: tab.badge.value, label: tab.badge.label })));
+    })), this.tabs.map((_tab, index$1) => {
+      const tabIndex = index$1 + 1;
+      return (index.h("article", { role: "tabpanel", id: `pannel-${tabIndex}`, hidden: tabIndex !== this.activeTab, "aria-labelledby": `${this.identifier}-${this.activeTab}`, tabindex: tabIndex === this.activeTab ? 0 : -1, class: "mg-tabs__content-container" }, index.h("slot", { name: `tab_content-${tabIndex}` })));
+    }))));
+  }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "size": ["validateSize"],
+    "items": ["validateItems"],
+    "activeTab": ["validateActiveTab"]
+  }; }
+};
+MgTabs.style = mgTabsCss;
+
+/**
+ * List of all possibles variants
+ */
+const variants = ['primary', 'secondary', 'success', 'warning', 'danger', 'info'];
+
+const mgTagCss = ".mg-tag{padding:calc((var(--mg-tag-height) - 0.2rem - var(--mg-tag-font-size) * var(--line-height)) / 2) 0.6rem;min-height:var(--mg-tag-height);-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:var(--mg-tag-border-radius);border:0.1rem solid;font-size:var(--mg-tag-font-size);font-weight:600;text-align:center}.mg-tag.mg-tag--primary{background-color:hsl(var(--color-dark));border-color:hsl(var(--color-dark));color:hsl(var(--color-light))}.mg-tag.mg-tag--primary.mg-tag--outline{background-color:transparent;color:hsl(var(--color-dark))}.mg-tag.mg-tag--secondary{background-color:hsl(var(--color-light));border-color:hsl(var(--color-light));color:hsl(var(--color-dark))}.mg-tag.mg-tag--secondary.mg-tag--outline{background-color:transparent;color:hsl(var(--color-light))}.mg-tag.mg-tag--success{background-color:hsl(var(--color-success));border-color:hsl(var(--color-success));color:hsl(var(--color-dark))}.mg-tag.mg-tag--success.mg-tag--outline{background-color:transparent;color:hsl(var(--color-success))}.mg-tag.mg-tag--warning{background-color:hsl(var(--color-warning));border-color:hsl(var(--color-warning));color:hsl(var(--color-dark))}.mg-tag.mg-tag--warning.mg-tag--outline{background-color:transparent;color:hsl(var(--color-warning))}.mg-tag.mg-tag--danger{background-color:hsl(var(--color-danger));border-color:hsl(var(--color-danger));color:hsl(var(--color-light))}.mg-tag.mg-tag--danger.mg-tag--outline{background-color:transparent;color:hsl(var(--color-danger))}.mg-tag.mg-tag--info{background-color:hsl(var(--color-info));border-color:hsl(var(--color-info));color:hsl(var(--color-light))}.mg-tag.mg-tag--info.mg-tag--outline{background-color:transparent;color:hsl(var(--color-info))}.mg-tag,mg-tag{display:inline-block;vertical-align:middle}";
+
+const MgTag = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Define button variant
+     */
+    this.variant = variants[0]; // info
+    /**
+     * Component classes
+     */
+    this.classList = new index$1.ClassList(['mg-tag']);
+  }
+  validateVariant(newValue) {
+    if (!variants.includes(newValue)) {
+      throw new Error(`<mg-tag> prop "variant" must be one of : ${variants.join(', ')}.`);
+    }
+    this.classList.add(`mg-tag--${this.variant}`);
+  }
+  validateOutline(newValue) {
+    if (newValue)
+      this.classList.add(`mg-tag--outline`);
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Check if props are well configured on init
+   *
+   * @returns {void}
+   */
+  componentWillLoad() {
+    this.validateVariant(this.variant);
+    this.validateOutline(this.outline);
+  }
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render() {
+    return (index.h("span", { class: this.classList.join() }, index.h("slot", null)));
+  }
+  static get watchers() { return {
+    "variant": ["validateVariant"],
+    "outline": ["validateOutline"]
+  }; }
+};
+MgTag.style = mgTagCss;
+
+const mgTooltipCss = ".sc-mg-tooltip-h{display:inline-block}.mg-tooltip.sc-mg-tooltip{display:none;padding:0.5rem 0.8rem;z-index:9999;border-radius:var(--mg-tooltip-border-radius);background-color:hsl(var(--mg-tooltip-background-color));color:hsl(var(--mg-tooltip-font-color));text-align:start}.mg-tooltip[data-show].sc-mg-tooltip{display:block}.mg-tooltip.sc-mg-tooltip .mg-tooltip__arrow.sc-mg-tooltip,.mg-tooltip.sc-mg-tooltip .mg-tooltip__arrow.sc-mg-tooltip::before{position:absolute;width:0.8rem;height:0.8rem;z-index:9999;background:inherit}.mg-tooltip.sc-mg-tooltip .mg-tooltip__arrow.sc-mg-tooltip{visibility:hidden}.mg-tooltip.sc-mg-tooltip .mg-tooltip__arrow.sc-mg-tooltip::before{visibility:visible;content:\"\";-webkit-transform:rotate(45deg);transform:rotate(45deg)}.mg-tooltip[data-popper-placement^=top].sc-mg-tooltip>.mg-tooltip__arrow.sc-mg-tooltip{bottom:-4px}.mg-tooltip[data-popper-placement^=bottom].sc-mg-tooltip>.mg-tooltip__arrow.sc-mg-tooltip{top:-4px}.mg-tooltip[data-popper-placement^=left].sc-mg-tooltip>.mg-tooltip__arrow.sc-mg-tooltip{right:-4px}.mg-tooltip[data-popper-placement^=right].sc-mg-tooltip>.mg-tooltip__arrow.sc-mg-tooltip{left:-4px}";
+
+const MgTooltip = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Sets an `id` attribute.
+     * Needed by the input for accessibility `aria-decribedby`.
+     */
+    this.identifier = index$1.createID('mg-tooltip');
+    /**
+     * Tooltip placement
+     */
+    this.placement = 'bottom';
+    /**
+     * Display tooltip
+     */
+    this.display = false;
+    /**
+     * Disable tooltip
+     */
+    this.disabled = false;
+    /**
+     * Show tooltip
+     *
+     * @returns {void}
+     */
+    this.show = () => {
+      // Make the tooltip visible
+      this.tooltip.setAttribute('data-show', '');
+      // Enable the event listeners
+      this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
+      // Update its position
+      this.popper.update();
+    };
+    /**
+     * Hide tooltip
+     *
+     * @returns {void}
+     */
+    this.hide = () => {
+      // Hide the tooltip
+      this.tooltip.removeAttribute('data-show');
+      // Disable the event listeners
+      this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }] })));
+    };
+  }
+  handleDisplay(newVal) {
+    if (newVal) {
+      this.show();
+    }
+    else {
+      this.hide();
+    }
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Get slotted element
+   * Check if it already contain an interactive element, if not we need to add a tabIndex attribute
+   * We need to attach the focused element to the tooltip (aria-describedby)
+   *
+   * @returns {void}
+   */
+  componentDidLoad() {
+    var _a;
+    // Get tooltip element
+    this.tooltip = this.element.querySelector(`#${this.identifier}`);
+    // get slotted element
+    const slotElement = this.element.firstElementChild;
+    // Get interactive element
+    const interactiveElements = ['a', 'button', 'input', 'textarea', 'select']; //! Might needs updates
+    const interactiveElement = this.element.querySelector(interactiveElements.join(',')) || ((_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(interactiveElements.join(',')));
+    // define selected element to become tooltip selector
+    const tooltipedElement = interactiveElement || slotElement;
+    // Add tabindex to slotted element if we can't find any interactive element
+    if (interactiveElement === null || interactiveElement === undefined)
+      slotElement.tabIndex = 0;
+    // Set aria-describedby
+    const ariaDescribedby = slotElement.getAttribute('aria-describedby');
+    if (ariaDescribedby === null) {
+      tooltipedElement.setAttribute('aria-describedby', this.identifier);
+    }
+    else {
+      slotElement.setAttribute('aria-describedby', `${ariaDescribedby} ${this.identifier}`);
+    }
+    // Create popperjs tooltip
+    this.popper = popper.createPopper(tooltipedElement, this.tooltip, {
+      placement: this.placement,
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: [0, 8],
+          },
+        },
+      ],
+    });
+    // Add events
+    ['mouseenter', 'focus'].forEach(event => {
+      tooltipedElement.addEventListener(event, () => {
+        if (!this.disabled)
+          this.display = true;
+      });
+    });
+    ['mouseleave', 'blur', 'keydown'].forEach(event => {
+      tooltipedElement.addEventListener(event, (e) => {
+        // we continue to process ONLY for KeyboardEvents 'Escape'
+        if (e.type === 'keydown' && e.code !== 'Escape') {
+          return;
+        }
+        if (!this.disabled)
+          this.display = false;
+      });
+    });
+    this.handleDisplay(this.display);
+  }
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render() {
+    return (index.h(index.Host, null, index.h("slot", null), index.h("div", { role: "tooltip", id: this.identifier, class: "mg-tooltip", innerHTML: this.message }, index.h("div", { class: "mg-tooltip__arrow", "data-popper-arrow": true }))));
+  }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "display": ["handleDisplay"]
+  }; }
+};
+MgTooltip.style = mgTooltipCss;
+
+exports.mg_badge = MgBadge;
+exports.mg_button = MgButton;
+exports.mg_character_left = MgCharacterLeft;
+exports.mg_form = MgForm;
+exports.mg_icon = MgIcon;
+exports.mg_input_checkbox = MgInputCheckbox;
+exports.mg_input_date = MgInputDate;
+exports.mg_input_numeric = MgInputNumeric;
+exports.mg_input_password = MgInputPassword;
+exports.mg_input_radio = MgInputRadio;
+exports.mg_input_select = MgInputSelect;
+exports.mg_input_text = MgInputText;
+exports.mg_input_textarea = MgInputTextarea;
+exports.mg_input_title = MgInputTitle;
+exports.mg_input_toggle = MgInputToggle;
+exports.mg_message = MgMessage;
+exports.mg_pagination = MgPagination;
+exports.mg_panel = MgPanel;
+exports.mg_tabs = MgTabs;
+exports.mg_tag = MgTag;
+exports.mg_tooltip = MgTooltip;