npm - @mgdis/mg-components - Versions diffs - 3.1.0 → 3.2.0 - Mend

@mgdis/mg-components 3.1.0 → 3.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (225) hide show

package/dist/esm/mg-badge_21.entry.js ADDED Viewed

@@ -0,0 +1,3289 @@
+import { r as registerInstance, h, g as getElement, c as createEvent, H as Host } from './index-9e877561.js';
+import { C as ClassList, c as createID, m as messages, l as locale, a as currency, b as allItemsAreString } from './index-c346f52d.js';
+import { c as createPopper } from './popper-8874fd6c.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) {
+    registerInstance(this, hostRef);
+    /**
+     * Define button variant
+     */
+    this.variant = variants$4[0]; // info
+    /**
+     * Component classes
+     */
+    this.classList = new 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 (h("span", { class: this.classList.join() }, this.value, 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) {
+    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 = 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 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 (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 && h("mg-icon", { icon: "loader", spin: true }), h("div", { class: "mg-button__content" }, h("slot", null))));
+  }
+  get element() { return 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) {
+    registerInstance(this, hostRef);
+    /************
+     * Internal *
+     ************/
+    this.mustacheCounter = '{counter}';
+    /**
+     * Template to display remaining characters.
+     * Must have {counter} inside
+     */
+    this.template = messages.nbCharLeft;
+    /**
+     * Sets the characters to count
+     */
+    this.characters = '';
+    /**
+     * Calculate number character left
+     *
+     * @returns {string} 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 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) {
+    registerInstance(this, hostRef);
+    this.formValid = createEvent(this, "form-valid", 7);
+    /**
+     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+     * If not set, it will be created.
+     */
+    this.identifier = createID('mg-form');
+    /**
+     * Input name
+     * If not set the value equals the identifier
+     */
+    this.name = this.identifier;
+    /**
+     * Define if form is readonly
+     */
+    this.readonly = false;
+    /**
+     * Define if form is disabled
+     */
+    this.disabled = false;
+    /**
+     * Component classes
+     */
+    this.classList = new ClassList(['mg-form']);
+    /**
+     * Define required message based on mg-inputs required elements
+     * Also
+     *
+     * @returns {void}
+     */
+    this.setRequiredMessage = () => {
+      // Get required fields
+      const requiredInputs = this.mgInputs.filter(input => input.required && !input.disabled && !this.disabled);
+      // All fields are required
+      // mg-input-toggle can not be required
+      if (requiredInputs.length > 0 && requiredInputs.length === this.mgInputs.filter(input => input.nodeName !== 'MG-INPUT-TOGGLE').length) {
+        this.requiredMessage = messages.form.allRequired;
+        this.classList.add('mg-form--all-required');
+      }
+      // Some fields are required
+      else if (requiredInputs.length > 0) {
+        this.requiredMessage = 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 (h("form", { class: this.classList.join(), id: this.identifier, name: this.name }, this.requiredMessage && h("p", { innerHTML: this.requiredMessage }), h("slot", null), !this.readonly && !this.disabled && h("slot", { name: "actions" })));
+  }
+  get element() { return getElement(this); }
+};
+MgForm.style = mgFormCss;
+/**
+ * Icon SVG paths
+ */
+const icons = {
+  'arrow-down': () => (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': () => (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': () => (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': () => (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': () => (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': () => (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': () => (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': () => (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': () => (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': () => (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': () => (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': () => (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': () => (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': () => (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': () => (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': () => (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': () => (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': () => (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': () => (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': () => (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': () => (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': () => [
+    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" }),
+    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': () => (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': () => (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': () => [
+    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" }),
+    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': () => (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': () => [
+    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" }),
+    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': () => (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': () => (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': () => (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': () => (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': () => (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': () => (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': () => [
+    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" }),
+    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': () => (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': () => (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) {
+    registerInstance(this, hostRef);
+    /**
+     * Define icon size
+     */
+    this.size = 'regular';
+    /**
+     * Make the icon spin
+     */
+    this.spin = false;
+    /**
+     * Component classes
+     */
+    this.classList = new 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 (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 = () => (h("mg-tooltip", { identifier: `${props.identifier}-tooltip`, message: props.tooltip },
+    h("mg-icon", { icon: "info-circle" })));
+  /**
+   * Get input title (label) node
+   *
+   * @returns {VNode[]} mg-input-title
+   */
+  const getInputTitle = () => (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 (h(TagName, { class: props.classList.join() },
+    props.labelOnTop ? (h("div", { class: "mg-input__title" },
+      getInputTitle(),
+      !props.readonly && props.tooltip && getTooltip())) : (getInputTitle()),
+    props.readonly ? (h("div", { class: "mg-input__input-container" },
+      h("strong", null, props.readonlyValue || props.value),
+      children)) : (h("div", { class: "mg-input__input-container" },
+      h("div", { class: "mg-input__input" },
+        children,
+        !props.labelOnTop && props.tooltip && getTooltip()),
+      props.displayCharacterLeft && props.maxlength && props.classList.has('is-focused') && (h("mg-character-left", { identifier: characterLeftId, characters: props.value, maxlength: props.maxlength, template: props.characterLeftTemplate })),
+      props.helpText && h("div", { id: helpTextId, class: "mg-input__help-text", innerHTML: props.helpText }),
+      props.errorMessage && 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) {
+    registerInstance(this, hostRef);
+    this.valueChange = createEvent(this, "value-change", 7);
+    this.inputValid = 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 = 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 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 = 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 (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 }, 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 => (h("li", { class: { 'mg-input__input-group': true, 'mg-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "checkbox", id: input.id, name: this.identifier, value: input.value && input.value.toString(), checked: Boolean(input.value), disabled: this.readonly || this.disabled || input.disabled, required: this.required, indeterminate: input.value === null, onInput: this.handleInput, onBlur: this.handleBlur, ref: el => this.inputs.push(el) }), 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(locale, { style: 'currency', currency }).format(number);
+}
+/**
+ * Format number to locale
+ *
+ * @param {number} number number to format
+ * @returns {string} formatted number
+ */
+function localeNumber(number) {
+  return new Intl.NumberFormat(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(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) {
+    registerInstance(this, hostRef);
+    this.valueChange = createEvent(this, "value-change", 7);
+    this.inputValid = 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 = 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 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 = messages.errors[inputError];
+      }
+      // min, max & minMax
+      else if ([InputError$1.MIN, InputError$1.MAX, InputError$1.MINMAX].includes(inputError)) {
+        this.errorMessage = 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 = 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 (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 }, 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) {
+    registerInstance(this, hostRef);
+    this.valueChange = createEvent(this, "value-change", 7);
+    this.inputValid = 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 = 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 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 = messages.errors[inputError];
+      }
+      else {
+        this.errorMessage = 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 (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 }, 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) }), h("slot", { name: "append-input" })));
+  }
+  get element() { return 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) {
+    registerInstance(this, hostRef);
+    this.valueChange = createEvent(this, "value-change", 7);
+    this.inputValid = 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 = 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 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 = 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 (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 }, 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) {
+    registerInstance(this, hostRef);
+    this.valueChange = createEvent(this, "value-change", 7);
+    this.inputValid = 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 = 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 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 = 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 (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 (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 }, h("ul", { class: { 'mg-input__input-group-container': true, 'mg-input__input-group-container--vertical': this.inputVerticalList } }, this.options.map((input, index) => (h("li", { class: { 'mg-input__input-group': true, 'mg-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "radio", id: this.identifier + '_' + index, name: this.identifier, value: index, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: el => this.inputs.push(el) }), h("label", { htmlFor: this.identifier + '_' + index }, input.title)))))));
+  }
+  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) {
+    registerInstance(this, hostRef);
+    this.valueChange = createEvent(this, "value-change", 7);
+    this.inputValid = 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 = 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 = 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 ClassList(['mg-input--select']);
+    /**
+     * Handle input event
+     */
+    this.handleInput = () => {
+      this.checkValidity();
+      if (this.input.value !== '') {
+        this.value = 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 = 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 = 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 (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 (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 }, 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
+    h("option", { value: "", disabled: this.placeholderDisabled && this.valueExist }, this.placeholder)), this.options.map(option => option.group !== undefined ? (h("optgroup", { label: option.group }, option.options.map(optgroup => (h("option", { value: optgroup.title, selected: JSON.stringify(this.value) === JSON.stringify(optgroup.value), disabled: optgroup.disabled }, optgroup.title))))) : (h("option", { value: option.title, selected: JSON.stringify(this.value) === JSON.stringify(option.value), disabled: option.disabled }, option.title))))));
+  }
+  static get 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) {
+    registerInstance(this, hostRef);
+    this.valueChange = createEvent(this, "value-change", 7);
+    this.inputValid = 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 = 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 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 ClassList(this.classList.classes);
+    };
+    /**
+     * Handle blur event
+     *
+     * @returns {void}
+     */
+    this.handleBlur = () => {
+      // Manage focus
+      this.classList.delete(this.classFocus);
+      this.classList = new ClassList(this.classList.classes);
+      // 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 = 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 (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 && h("mg-icon", { icon: this.icon }), h("input", { type: this.type, class: "mg-input__box", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, maxlength: this.maxlength, disabled: this.disabled, required: this.required, pattern: this.pattern, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: el => (this.input = el) }), h("slot", { name: "append-input" })));
+  }
+  get element() { return 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) {
+    registerInstance(this, hostRef);
+    this.valueChange = createEvent(this, "value-change", 7);
+    this.inputValid = 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 = 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 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 ClassList(this.classList.classes);
+    };
+    /**
+     * Handle blur event
+     */
+    this.handleBlur = () => {
+      // Manage focus
+      this.classList.delete(this.classFocus);
+      this.classList = new 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 = 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 (h(MgInput, { identifier: this.identifier, classList: this.classList, label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, width: this.width, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: this.tooltip, displayCharacterLeft: this.displayCharacterLeft, characterLeftTemplate: this.characterLeftTemplate, maxlength: this.maxlength, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("textarea", { class: "mg-input__box", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, rows: this.rows, maxlength: this.maxlength, disabled: this.disabled, required: this.required, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: el => (this.input = el) })));
+  }
+  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) {
+    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 (h(TagName, { class: "mg-input-title", htmlFor: this.isLegend ? undefined : this.identifier }, h("slot", null), this.required && (h("span", { class: "mg-input-title__required" }, "\u00A0", h("span", { class: "is-asterisk" }, "*")))));
+  }
+};
+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) {
+    registerInstance(this, hostRef);
+    this.valueChange = createEvent(this, "value-change", 7);
+    this.inputValid = 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 = 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 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 (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 (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 }, 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 }, h("span", { "aria-hidden": "true", class: "mg-input__toggle-item-container" }, h("slot", { name: "item-1" })), h("span", { "aria-hidden": "true", class: "mg-input__toggle-item-container" }, h("slot", { name: "item-2" })))));
+  }
+  get element() { return 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) {
+    registerInstance(this, hostRef);
+    this.componentShow = createEvent(this, "component-show", 7);
+    this.componentHide = 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 = 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 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 (h("div", { id: this.identifier, class: this.classList.join(), role: this.variant === 'info' ? 'status' : 'alert' }, h("span", { class: "mg-message__icon" }, h("mg-icon", { icon: this.getIcon() })), h("div", { class: "mg-message__content" }, h("span", { class: "mg-message__content-slot" }, h("slot", null)), this.hasActions && h("span", { class: "mg-message__content-separator" }), this.hasActions && (h("span", { class: "mg-message__content-actions-slot" }, h("slot", { name: "actions" })))), this.closeButton && (h("span", { class: "mg-message__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: messages.message.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" }))))));
+  }
+  get element() { return 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) {
+    registerInstance(this, hostRef);
+    this.currentPageChange = 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 = 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) => (h("mg-button", { identifier: `${this.identifier}-button-${action}`, class: "mg-pagination__button", label: messages.pagination[`${action}Page`],
+      // eslint-disable-next-line react/jsx-no-bind
+      onClick: () => this.handleGoToPage(action), disabled: disabled, variant: "flat" }, action === NavigationAction.PREVIOUS && h("mg-icon", { icon: "chevron-left" }), messages.general[action], action === NavigationAction.NEXT && h("mg-icon", { icon: "chevron-right" })));
+    return (h("nav", { "aria-label": this.label, id: this.identifier, class: "mg-pagination__nav" }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), h("mg-input-select", { identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map(page => page.toString()), label: messages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true }), h("span", { class: "sr-only" }, messages.pagination.page, " ", this.currentPage), h("span", null, "/ ", this.totalPages, " ", this.totalPages > 1 ? messages.pagination.pages : 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) {
+    registerInstance(this, hostRef);
+    this.titleChange = 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 = createID('mg-panel');
+    /**
+     * Panel is opened
+     */
+    this.expanded = false;
+    /**
+     * Panel title is editabled
+     */
+    this.titleEditable = false;
+    /**
+     * Component classes
+     */
+    this.classList = new 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 = () => (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` }, h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down' }), !this.isEditing && this.panelTitle));
+      if (this.titleEditable && !this.isEditing) {
+        return [
+          collapseButton(),
+          h("mg-button", { "is-icon": true, variant: "secondary", label: messages.panel.editLabel, onClick: this.handleEditButton, identifier: `${this.identifier}-edit-button` }, h("mg-icon", { icon: "pen" })),
+        ];
+      }
+      if (this.titleEditable && this.isEditing) {
+        return [
+          collapseButton(),
+          h("mg-input-text", { label: 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) }, h("mg-button", { slot: "append-input", label: messages.general.cancel, "is-icon": true, variant: "secondary", onClick: this.handleCancelEditButton, identifier: `${this.identifier}-edition-button-cancel` }, h("mg-icon", { icon: "cross" })), h("mg-button", { slot: "append-input", label: messages.general.validate, "is-icon": true, variant: "secondary", onClick: this.handleValidateEditButton, identifier: `${this.identifier}-edition-button-validate` }, 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 (h("section", { class: this.classList.join(), id: this.identifier }, h("header", { class: "mg-panel__header", id: `${this.identifier}-header` }, h("div", { class: "mg-panel__header-left" }, this.headerLeft()), h("div", { class: "mg-panel__header-right" }, h("slot", { name: "header-right" }))), h("article", { class: "mg-panel__content", id: `${this.identifier}-content`, "aria-labelledby": `${this.identifier}-header`, hidden: !this.expanded }, 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) {
+    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 = 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 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 (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 (h(Host, null, h("div", { class: this.classList.join() }, h("header", { role: "tablist", "aria-label": this.label, class: "mg-tabs__header" }, this.tabs.map((tab, index) => {
+      const tabIndex = index + 1;
+      return (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 && h("mg-icon", { icon: tab.icon }), tab.label, tab.badge !== undefined && h("mg-badge", { variant: "info", value: tab.badge.value, label: tab.badge.label })));
+    })), this.tabs.map((_tab, index) => {
+      const tabIndex = index + 1;
+      return (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" }, h("slot", { name: `tab_content-${tabIndex}` })));
+    }))));
+  }
+  get element() { return 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) {
+    registerInstance(this, hostRef);
+    /**
+     * Define button variant
+     */
+    this.variant = variants[0]; // info
+    /**
+     * Component classes
+     */
+    this.classList = new 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 (h("span", { class: this.classList.join() }, 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) {
+    registerInstance(this, hostRef);
+    /**
+     * Sets an `id` attribute.
+     * Needed by the input for accessibility `aria-decribedby`.
+     */
+    this.identifier = 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 = 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 (h(Host, null, h("slot", null), h("div", { role: "tooltip", id: this.identifier, class: "mg-tooltip", innerHTML: this.message }, h("div", { class: "mg-tooltip__arrow", "data-popper-arrow": true }))));
+  }
+  get element() { return getElement(this); }
+  static get watchers() { return {
+    "display": ["handleDisplay"]
+  }; }
+};
+MgTooltip.style = mgTooltipCss;
+export { MgBadge as mg_badge, MgButton as mg_button, MgCharacterLeft as mg_character_left, MgForm as mg_form, MgIcon as mg_icon, MgInputCheckbox as mg_input_checkbox, MgInputDate as mg_input_date, MgInputNumeric as mg_input_numeric, MgInputPassword as mg_input_password, MgInputRadio as mg_input_radio, MgInputSelect as mg_input_select, MgInputText as mg_input_text, MgInputTextarea as mg_input_textarea, MgInputTitle as mg_input_title, MgInputToggle as mg_input_toggle, MgMessage as mg_message, MgPagination as mg_pagination, MgPanel as mg_panel, MgTabs as mg_tabs, MgTag as mg_tag, MgTooltip as mg_tooltip };