@mgdis/mg-components 3.3.0 → 4.1.0

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

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