@mgdis/mg-components 6.10.0 → 6.10.1

package/dist/components/mg-progress.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { D as De, G as Gt, W as Wt } from './index.es.js';
+import { q as qe, X as Xt, K as Kt } from './index.es.js';
 
 /**
  * List of all possibles roles
@@ -35,26 +35,26 @@ const MgProgress$1 = /*@__PURE__*/ proxyCustomElement(class MgProgress extends H
         this.max = 100;
     }
     watchLabel(newValue) {
-        if (!De(newValue)) {
-            throw new Error(`<mg-progress> prop "label" must be a valid string. Passed value: ${Gt(newValue)}.`);
+        if (!qe(newValue)) {
+            throw new Error(`<mg-progress> prop "label" must be a valid string. Passed value: ${Xt(newValue)}.`);
         }
     }
     watchAriaRole(newValue) {
         if (newValue && !roles.includes(newValue)) {
-            throw new Error(`<mg-progress> prop "ariaRole" must be one of: ${roles.join(', ')}. Passed value: ${Gt(newValue)}.`);
+            throw new Error(`<mg-progress> prop "ariaRole" must be one of: ${roles.join(', ')}. Passed value: ${Xt(newValue)}.`);
         }
     }
     watchValue(newValue) {
-        if (newValue !== undefined && (!Wt(newValue) || !(newValue >= this.min && newValue <= this.max)))
-            throw new Error(`<mg-progress> prop “value” must be a number within the range ${this.min} to ${this.max}. Passed value: ${Gt(newValue)}.`);
+        if (newValue !== undefined && (!Kt(newValue) || !(newValue >= this.min && newValue <= this.max)))
+            throw new Error(`<mg-progress> prop “value” must be a number within the range ${this.min} to ${this.max}. Passed value: ${Xt(newValue)}.`);
     }
     watchMin(newValue) {
-        if (newValue !== 0 && newValue !== undefined && (!Wt(newValue) || newValue >= this.max))
-            throw new Error(`<mg-progress> prop “min” must be a number lower than: ${this.max}. Passed value: ${Gt(newValue)}.`);
+        if (newValue !== 0 && newValue !== undefined && (!Kt(newValue) || newValue >= this.max))
+            throw new Error(`<mg-progress> prop “min” must be a number lower than: ${this.max}. Passed value: ${Xt(newValue)}.`);
     }
     watchMax(newValue) {
-        if (newValue !== 100 && newValue !== undefined && (!Wt(newValue) || newValue <= this.min))
-            throw new Error(`<mg-progress> prop “max” must be a number greater than: ${this.min}. Passed value: ${Gt(newValue)}.`);
+        if (newValue !== 100 && newValue !== undefined && (!Kt(newValue) || newValue <= this.min))
+            throw new Error(`<mg-progress> prop “max” must be a number greater than: ${this.min}. Passed value: ${Xt(newValue)}.`);
     }
     /*************
      * Lifecycle *

package/dist/components/mg-skip-links.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { i as initLocales } from './index2.js';
-import { D as De } from './index.es.js';
+import { q as qe } from './index.es.js';
 
 const mgSkipLinksCss = ".mg-c-skip-links{position:absolute;display:flex;min-height:var(--mg-b-size-56);align-items:center;background:var(--mg-b-color-light);opacity:0;transform:translateY(-100%)}.mg-c-skip-links:focus-within{position:relative;opacity:1;transform:translateY(0)}.mg-c-skip-links__list{display:flex;flex-wrap:wrap;align-items:center;padding:0 var(--mg-b-size-16);margin:0;gap:var(--mg-b-spacing-actions);list-style:none}.mg-c-skip-links__link{display:inline-block;padding:var(--mg-b-size-8) var(--mg-b-size-16);color:var(--mg-b-color-dark)}.mg-c-skip-links__link:hover{background:hsl(var(--mg-b-color-dark-h), var(--mg-b-color-dark-s), var(--mg-b-color-dark-l), 10%)}";
 
@@ -23,7 +23,7 @@ const MgSkipLinks$1 = /*@__PURE__*/ proxyCustomElement(class MgSkipLinks extends
         };
     }
     validateLinks(links) {
-        if (links === undefined || links.length === 0 || links.some(link => !De(link.href) || !link.href.startsWith('#') || !De(link.label))) {
+        if (links === undefined || links.length === 0 || links.some(link => !qe(link.href) || !link.href.startsWith('#') || !qe(link.label))) {
             throw new Error(`<mg-skip-links> prop "links": Cannot be empty and each link must contains an href starting with a "#" and a non empty label attributes.`);
         }
     }

package/dist/components/mg-table.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
-import { Z as Zt, G as Gt, D as De, P as Pt } from './index.es.js';
+import { H as Ht, X as Xt, q as qe, Z as Zt } from './index.es.js';
 import { i as initLocales } from './index2.js';
 import { d as defineCustomElement$2 } from './mg-icon2.js';
 
@@ -83,11 +83,11 @@ const MgTable$1 = /*@__PURE__*/ proxyCustomElement(class MgTable extends HTMLEle
         /**
          * Class collection
          */
-        this.classCollection = new Zt([this.componentClass]);
+        this.classCollection = new Ht([this.componentClass]);
     }
     watchSize(newValue, oldValue) {
         if (!sizes.includes(newValue)) {
-            throw new Error(`<mg-table> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${Gt(newValue)}.`);
+            throw new Error(`<mg-table> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${Xt(newValue)}.`);
         }
         else {
             if (oldValue !== undefined) {
@@ -106,7 +106,7 @@ const MgTable$1 = /*@__PURE__*/ proxyCustomElement(class MgTable extends HTMLEle
     }
     watchColumns(newValue) {
         if (newValue !== undefined && !isValidColumnsObject(newValue)) {
-            throw new Error(`<mg-table> prop "columns" must be a ColumnsType object. Passed value: ${Gt(newValue)}.`);
+            throw new Error(`<mg-table> prop "columns" must be a ColumnsType object. Passed value: ${Xt(newValue)}.`);
         }
     }
     /**
@@ -235,8 +235,8 @@ const MgTable$1 = /*@__PURE__*/ proxyCustomElement(class MgTable extends HTMLEle
             // Ensure caption is not visible (otherwhise the table does not have rounded corners)
             captionTable.className = 'mg-u-visually-hidden';
             // Link caption to div
-            if (!De(captionTable.id)) {
-                captionTable.setAttribute('id', Pt(`${this.componentClass}-caption`));
+            if (!qe(captionTable.id)) {
+                captionTable.setAttribute('id', Zt(`${this.componentClass}-caption`));
             }
             divWrapper.setAttribute('aria-labelledby', captionTable.id);
             // Add sortable caption if neeeded

package/dist/components/mg-tabs.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { P as Pt, Z as Zt, X as Xt, U as Ut, G as Gt, D as De, a as Dt } from './index.es.js';
+import { Z as Zt, H as Ht, Q as Qt, D as Dt, X as Xt, q as qe, a as qt } from './index.es.js';
 import { K as Keys } from './events.utils.js';
 import { d as defineCustomElement$3 } from './mg-badge2.js';
 import { d as defineCustomElement$2 } from './mg-icon2.js';
@@ -43,7 +43,7 @@ const MgTabs$1 = /*@__PURE__*/ proxyCustomElement(class MgTabs extends HTMLEleme
          * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
          * If not set, it will be created.
          */
-        this.identifier = Pt('mg-tabs');
+        this.identifier = Zt('mg-tabs');
         /**
          * Define tabs size
          */
@@ -55,7 +55,7 @@ const MgTabs$1 = /*@__PURE__*/ proxyCustomElement(class MgTabs extends HTMLEleme
         /**
          * Component classes
          */
-        this.classCollection = new Zt(['mg-c-tabs']);
+        this.classCollection = new Ht(['mg-c-tabs']);
         /**
          * Validate that new tab status can be `Status.ACTIVE`
          * @param tab - tab item
@@ -153,7 +153,7 @@ const MgTabs$1 = /*@__PURE__*/ proxyCustomElement(class MgTabs extends HTMLEleme
          */
         this.resetFocus = () => {
             // update asynchronously tabindex to prevent get focus on new tabindex at then end of event process
-            Xt(() => {
+            Qt(() => {
                 this.tabFocus = undefined;
                 Array.from(this.element.shadowRoot.querySelectorAll('[data-index]')).forEach((tab, index) => {
                     tab.setAttribute('tabindex', this.activeTab - this.startIndex !== index ? '-1' : '0');
@@ -170,30 +170,30 @@ const MgTabs$1 = /*@__PURE__*/ proxyCustomElement(class MgTabs extends HTMLEleme
         };
     }
     watchIdentifier(newValue) {
-        if (!Ut(newValue)) {
-            console.error(`<mg-tabs> prop "identifier" value is invalid. Passed value: ${Gt(newValue)}.`);
+        if (!Dt(newValue)) {
+            console.error(`<mg-tabs> prop "identifier" value is invalid. Passed value: ${Xt(newValue)}.`);
         }
     }
     validateLabel(newValue) {
-        if (!De(newValue)) {
-            throw new Error(`<mg-tabs> prop "label" is required and must be a string. Passed value: ${Gt(newValue)}.`);
+        if (!qe(newValue)) {
+            throw new Error(`<mg-tabs> prop "label" is required and must be a string. Passed value: ${Xt(newValue)}.`);
         }
     }
     validateSize(newValue) {
         if (!sizes.includes(newValue)) {
-            throw new Error(`<mg-tabs> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${Gt(newValue)}.`);
+            throw new Error(`<mg-tabs> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${Xt(newValue)}.`);
         }
         this.classCollection.add(`mg-c-tabs--size-${this.size}`);
     }
     validateItems(newValue) {
         // String array
-        if (Dt(newValue))
+        if (qt(newValue))
             this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));
         // Object array
         else if (Array.isArray(newValue) && newValue.length > 0 && newValue.every(isTabItem))
             this.tabs = newValue;
         else
-            throw new Error(`<mg-tabs> prop "items" is required and all items must be the same type: TabItem. Passed value: ${Gt(newValue)}.`);
+            throw new Error(`<mg-tabs> prop "items" is required and all items must be the same type: TabItem. Passed value: ${Xt(newValue)}.`);
     }
     validateActiveTab(newValue) {
         // when `active-tab` is undefined we set default value by searching an item with `Status.ACTIVE` or we use the `startIndex` has fallback value
@@ -218,7 +218,7 @@ const MgTabs$1 = /*@__PURE__*/ proxyCustomElement(class MgTabs extends HTMLEleme
             this.activeTabChange.emit(newValue);
         }
         else {
-            throw new Error(`<mg-tabs> prop "activeTab" must be a number between ${this.startIndex} and ${this.tabs.length} and new value must be "activable". Passed value: ${Gt(newValue)}.`);
+            throw new Error(`<mg-tabs> prop "activeTab" must be a number between ${this.startIndex} and ${this.tabs.length} and new value must be "activable". Passed value: ${Xt(newValue)}.`);
         }
     }
     /*************

package/dist/components/mg-tag.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { Z as Zt, G as Gt, D as De } from './index.es.js';
+import { H as Ht, X as Xt, q as qe } from './index.es.js';
 
 /**
  * List of all possibles variants
@@ -34,11 +34,11 @@ const MgTag$1 = /*@__PURE__*/ proxyCustomElement(class MgTag extends HTMLElement
         /**
          * Component classes
          */
-        this.classCollection = new Zt(['mg-c-tag']);
+        this.classCollection = new Ht(['mg-c-tag']);
     }
     validateVariant(newValue, oldValue) {
         if (!variants.includes(newValue)) {
-            throw new Error(`<mg-tag> prop "variant" must be one of: ${variants.join(', ')}. Passed value: ${Gt(newValue)}.`);
+            throw new Error(`<mg-tag> prop "variant" must be one of: ${variants.join(', ')}. Passed value: ${Xt(newValue)}.`);
         }
         else {
             if (oldValue !== undefined) {
@@ -71,7 +71,7 @@ const MgTag$1 = /*@__PURE__*/ proxyCustomElement(class MgTag extends HTMLElement
      * @param textContent - html element textContent property
      */
     validateTextContent(textContent) {
-        if (!De(textContent))
+        if (!qe(textContent))
             throw new Error('<mg-tag> slot must contain a text content.');
     }
     /*************

package/dist/components/mg-tooltip-content2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const mgTooltipContentCss = ":host{z-index:1000;top:0;left:0;display:none;width:max-content;max-width:var(--mg-b-size-floating-element-max-width);box-sizing:border-box;padding:var(--mg-b-size-4) var(--mg-b-size-8);border-radius:var(--mg-c-tooltip-border-radius);background-color:var(--mg-c-tooltip-color-background);color:var(--mg-c-tooltip-color-text);font-family:var(--mg-b-font-family);font-size:var(--mg-b-font-size);font-weight:400;text-align:start}:host([data-show]){display:block}::slotted([slot=arrow]){position:absolute;visibility:hidden}::slotted([slot=arrow])::before{content:\"\";transform:rotate(45deg);visibility:visible}::slotted([slot=arrow]),::slotted([slot=arrow])::before{position:absolute;z-index:9999;width:var(--mg-b-size-8);height:var(--mg-b-size-8);background-color:var(--mg-c-tooltip-color-background)}:host([data-placement^=top])>::slotted([slot=arrow]){bottom:calc(-1*var(--mg-b-size-4))}:host([data-placement^=bottom])>::slotted([slot=arrow]){top:calc(-1*var(--mg-b-size-4))}:host([data-placement^=left])>::slotted([slot=arrow]){right:calc(-1*var(--mg-b-size-4))}:host([data-placement^=right])>::slotted([slot=arrow]){left:calc(-1*var(--mg-b-size-4))}";
+const mgTooltipContentCss = ":host{z-index:1000;display:none;max-width:var(--mg-b-size-floating-element-max-width);box-sizing:border-box;padding:var(--mg-b-size-4) var(--mg-b-size-8);border-radius:var(--mg-c-tooltip-border-radius);background-color:var(--mg-c-tooltip-color-background);color:var(--mg-c-tooltip-color-text);font-family:var(--mg-b-font-family);font-size:var(--mg-b-font-size);font-weight:400;text-align:start}:host([data-show]){display:block}::slotted([slot=arrow]){visibility:hidden}::slotted([slot=arrow])::before{content:\"\";transform:rotate(45deg);visibility:visible}::slotted([slot=arrow]),::slotted([slot=arrow])::before{position:absolute;z-index:9999;width:var(--mg-b-size-8);height:var(--mg-b-size-8);background-color:var(--mg-c-tooltip-color-background)}:host([data-popper-placement^=top])>::slotted([slot=arrow]){bottom:calc(-1*var(--mg-b-size-4))}:host([data-popper-placement^=bottom])>::slotted([slot=arrow]){top:calc(-1*var(--mg-b-size-4))}:host([data-popper-placement^=left])>::slotted([slot=arrow]){right:calc(-1*var(--mg-b-size-4))}:host([data-popper-placement^=right])>::slotted([slot=arrow]){left:calc(-1*var(--mg-b-size-4))}";
 
 const MgTooltipContent = /*@__PURE__*/ proxyCustomElement(class MgTooltipContent extends HTMLElement {
     constructor() {

package/dist/components/mg-tooltip-content2.js.map

@@ -1 +1 @@
-{"file":"mg-tooltip-content2.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,goCAAgoC;;MCU/oC,gBAAgB,iBAAAA,kBAAA,CAAA,MAAA,gBAAA,SAAA,WAAA,CAAA;;;;;;AAM3B;;AAEe;AAEf;;;AAGG;IACH,MAAM,GAAA;QACJ,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EAClB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,SAAS,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAC,6BAA6B,EAAQ,CAAA,EAC1E,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAQ,CAAA,CACrB;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["../styles/dist/components/mg-tooltip-content.css?tag=mg-tooltip-content&encapsulation=shadow","src/components/atoms/mg-tooltip/mg-tooltip-content/mg-tooltip-content.tsx"],"sourcesContent":[":host{z-index:1000;top:0;left:0;display:none;width:max-content;max-width:var(--mg-b-size-floating-element-max-width);box-sizing:border-box;padding:var(--mg-b-size-4) var(--mg-b-size-8);border-radius:var(--mg-c-tooltip-border-radius);background-color:var(--mg-c-tooltip-color-background);color:var(--mg-c-tooltip-color-text);font-family:var(--mg-b-font-family);font-size:var(--mg-b-font-size);font-weight:400;text-align:start}:host([data-show]){display:block}::slotted([slot=arrow]){position:absolute;visibility:hidden}::slotted([slot=arrow])::before{content:\"\";transform:rotate(45deg);visibility:visible}::slotted([slot=arrow]),::slotted([slot=arrow])::before{position:absolute;z-index:9999;width:var(--mg-b-size-8);height:var(--mg-b-size-8);background-color:var(--mg-c-tooltip-color-background)}:host([data-placement^=top])>::slotted([slot=arrow]){bottom:calc(-1*var(--mg-b-size-4))}:host([data-placement^=bottom])>::slotted([slot=arrow]){top:calc(-1*var(--mg-b-size-4))}:host([data-placement^=left])>::slotted([slot=arrow]){right:calc(-1*var(--mg-b-size-4))}:host([data-placement^=right])>::slotted([slot=arrow]){left:calc(-1*var(--mg-b-size-4))}/*# sourceMappingURL=mg-tooltip-content.css.map */\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'mg-tooltip-content',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-tooltip-content.css',\n  shadow: true,\n})\nexport class MgTooltipContent {\n  /**\n   * Displayed message in the tooltip\n   */\n  @Prop() message!: string;\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <Host role=\"tooltip\">\n        <span innerHTML={this.message} class=\"mg-tooltip-content__message\"></span>\n        <slot name=\"arrow\"></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"mg-tooltip-content2.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,2mCAA2mC;;MCU1nC,gBAAgB,iBAAAA,kBAAA,CAAA,MAAA,gBAAA,SAAA,WAAA,CAAA;;;;;;AAM3B;;AAEe;AAEf;;;AAGG;IACH,MAAM,GAAA;QACJ,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EAClB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,SAAS,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAC,6BAA6B,EAAQ,CAAA,EAC1E,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAQ,CAAA,CACrB;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["../styles/dist/components/mg-tooltip-content.css?tag=mg-tooltip-content&encapsulation=shadow","src/components/atoms/mg-tooltip/mg-tooltip-content/mg-tooltip-content.tsx"],"sourcesContent":[":host{z-index:1000;display:none;max-width:var(--mg-b-size-floating-element-max-width);box-sizing:border-box;padding:var(--mg-b-size-4) var(--mg-b-size-8);border-radius:var(--mg-c-tooltip-border-radius);background-color:var(--mg-c-tooltip-color-background);color:var(--mg-c-tooltip-color-text);font-family:var(--mg-b-font-family);font-size:var(--mg-b-font-size);font-weight:400;text-align:start}:host([data-show]){display:block}::slotted([slot=arrow]){visibility:hidden}::slotted([slot=arrow])::before{content:\"\";transform:rotate(45deg);visibility:visible}::slotted([slot=arrow]),::slotted([slot=arrow])::before{position:absolute;z-index:9999;width:var(--mg-b-size-8);height:var(--mg-b-size-8);background-color:var(--mg-c-tooltip-color-background)}:host([data-popper-placement^=top])>::slotted([slot=arrow]){bottom:calc(-1*var(--mg-b-size-4))}:host([data-popper-placement^=bottom])>::slotted([slot=arrow]){top:calc(-1*var(--mg-b-size-4))}:host([data-popper-placement^=left])>::slotted([slot=arrow]){right:calc(-1*var(--mg-b-size-4))}:host([data-popper-placement^=right])>::slotted([slot=arrow]){left:calc(-1*var(--mg-b-size-4))}/*# sourceMappingURL=mg-tooltip-content.css.map */\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'mg-tooltip-content',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-tooltip-content.css',\n  shadow: true,\n})\nexport class MgTooltipContent {\n  /**\n   * Displayed message in the tooltip\n   */\n  @Prop() message!: string;\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <Host role=\"tooltip\">\n        <span innerHTML={this.message} class=\"mg-tooltip-content__message\"></span>\n        <slot name=\"arrow\"></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/mg-tooltip2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { P as Pt, X as Xt, U as Ut, G as Gt, D as De, B as Bt, c as Ht } from './index.es.js';
-import { b as autoUpdate, c as computePosition, g as getTransformation, n as numberToPx, i as isFloatingUIPlacement, o as offset, f as flip, d as shift, e as arrow, l as limitShift } from './floating-ui.utils.js';
+import { Z as Zt, Q as Qt, D as Dt, X as Xt, q as qe, J as Jt, c as Gt } from './index.es.js';
 import { d as defineCustomElement$1 } from './mg-tooltip-content2.js';
+import { c as createPopper } from './popper.js';
 
 const Guard = {
     FOCUS: 'focus',
@@ -27,7 +27,7 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
          * Sets an `id` attribute.
          * Needed by the input for accessibility `aria-decribedby`.
          */
-        this.identifier = Pt('mg-tooltip');
+        this.identifier = Zt('mg-tooltip');
         /**
          * Tooltip placement
          */
@@ -46,14 +46,15 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
         this.show = () => {
             // Make the tooltip visible
             this.mgTooltipContent.dataset.show = '';
+            // Enable the event listeners
+            this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
             // hide when click outside on nextTick to prevent event to trigger after creation
-            Xt(() => {
+            Qt(() => {
                 this.windows.forEach((localWindow) => {
                     localWindow.addEventListener('click', this.handleClickOutside, false);
                     localWindow.addEventListener('keydown', this.handlePressEscape, false);
                 });
             });
-            this.updateTooltip();
         };
         /**
          * Hide tooltip
@@ -61,6 +62,8 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
         this.hide = () => {
             // Hide the tooltip
             this.mgTooltipContent.removeAttribute('data-show');
+            // Disable the event listeners
+            this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }] })));
             // Remove event listener
             this.windows.forEach((localWindow) => {
                 localWindow.removeEventListener('click', this.handleClickOutside, false);
@@ -91,9 +94,8 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
          * @param condition - additionnal condition to apply display prop newValue
          */
         this.setDisplay = (newValue, condition = true) => {
-            if (!this.disabled && condition && this.display !== newValue) {
+            if (!this.disabled && condition)
                 this.display = newValue;
-            }
         };
         /**
          * Action for tooltip element and tooltiped element mouse listener
@@ -151,43 +153,30 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
             }
         };
         /**
-         * Update tooltip position
-         * @returns autoUpdate function
+         * Set popper instance
+         * @param strategy - popper strategy to apply on instance
          */
-        this.updateTooltip = () => autoUpdate(this.tooltipedElement, this.mgTooltipContent, async () => {
-            // Placement
-            const { x, y, placement, middlewareData } = await computePosition(this.tooltipedElement, this.mgTooltipContent, {
+        this.setPopper = (strategy) => {
+            // Create popperjs tooltip
+            this.popper = createPopper(this.tooltipedElement, this.mgTooltipContent, {
                 placement: this.placement,
-                strategy: this.tooltipStrategy,
-                middleware: [
-                    offset(8),
-                    flip(),
-                    shift({
-                        limiter: limitShift(),
-                    }),
-                    arrow({ element: this.arrowElement }),
+                strategy,
+                modifiers: [
+                    {
+                        name: 'offset',
+                        options: {
+                            offset: [0, 8],
+                        },
+                    },
+                    {
+                        name: 'flip',
+                        options: {
+                            fallbackPlacements: ['auto'],
+                        },
+                    },
                 ],
             });
-            // Positioning
-            Object.assign(this.mgTooltipContent.style, {
-                position: this.tooltipStrategy,
-                transform: getTransformation(x, y),
-            });
-            // Arrow positioning
-            const { x: arrowX, y: arrowY } = middlewareData.arrow;
-            const staticSide = {
-                top: 'bottom',
-                right: 'left',
-                bottom: 'top',
-                left: 'right',
-            }[placement.split('-')[0]];
-            Object.assign(this.arrowElement.style, {
-                left: numberToPx(arrowX),
-                top: numberToPx(arrowY),
-                [staticSide]: '-4px',
-            });
-            this.mgTooltipContent.setAttribute('data-placement', placement);
-        });
+        };
         /**
          * Define selected element to become tooltip selector and init listeners
          * @param element - tooltiped element
@@ -229,15 +218,17 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
                 // set guard when one of mutations is for a disabled with disabled-on-click
                 if (mutationList.some((mutation) => mutation.target.disabled && mutation.target.disableOnClick)) {
                     this.guard = Guard.DISABLE_ON_CLICK;
-                    return;
                 }
+                // when the disabled-on-click guard is running we stop process
+                if (this.guard === Guard.DISABLE_ON_CLICK)
+                    return;
                 // update button wrapper
                 this.setMgButtonWrapper(mgButton);
                 // Since Firefox doesn't trigger a "blur" event when the "disabled" attribute is added or removed from a button
                 // we have to manually unlock the guard because the "blur" handler of the tooltipedElement won't do it.
                 this.resetGuard();
-                // update Floating UI instance
-                this.updateTooltip();
+                // update popper instance
+                this.popper.update();
             }).observe(mgButton, { attributes: true });
         };
         /**
@@ -256,23 +247,19 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
         };
     }
     watchIdentifier(newValue) {
-        if (!Ut(newValue)) {
-            throw new Error(`<mg-tooltip> prop "identifier" value is invalid. Passed value: ${Gt(newValue)}.`);
+        if (!Dt(newValue)) {
+            throw new Error(`<mg-tooltip> prop "identifier" value is invalid. Passed value: ${Xt(newValue)}.`);
         }
         // use renderTooltipContent to update tooltip-content id
         this.renderTooltipContent();
     }
     watchMessage(newValue) {
-        if (!De(newValue)) {
-            throw new Error(`<mg-tooltip> prop "message" is required and must be a string. Passed value: ${Gt(newValue)}.`);
+        if (!qe(newValue)) {
+            throw new Error(`<mg-tooltip> prop "message" is required and must be a string. Passed value: ${Xt(newValue)}.`);
         }
         if (this.mgTooltipContent !== undefined)
             this.mgTooltipContent.message = newValue;
     }
-    watchPlacement(newValue) {
-        if (!isFloatingUIPlacement(newValue))
-            this.placement = 'bottom';
-    }
     watchDisplay(newValue) {
         if (newValue) {
             this.show();
@@ -302,7 +289,7 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
             this.mgTooltipContent.setAttribute('id', this.identifier);
             const arrow = document.createElement('div');
             arrow.setAttribute('slot', 'arrow');
-            arrow.dataset.floatingArrow = '';
+            arrow.dataset.popperArrow = '';
             this.mgTooltipContent.appendChild(arrow);
             // manage tooltipElement & tooltipedElement mouseenter/mouseleave events
             this.mgTooltipContent.addEventListener('mouseenter', () => {
@@ -323,16 +310,13 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
      */
     componentWillLoad() {
         // Get windows to attach events
-        this.windows = Bt(window);
+        this.windows = Jt(window);
         // Get tooltip element
         this.renderTooltipContent();
         //validate properties
-        this.watchPlacement(this.placement);
         this.watchDisabled(this.disabled);
         this.watchMessage(this.message);
         this.watchIdentifier(this.identifier);
-        // define if the tooltip is inside a popover
-        this.tooltipStrategy = this.element.closest('mg-popover') !== null ? 'absolute' : 'fixed';
     }
     /**
      * Get slotted element
@@ -344,10 +328,8 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
         // get slotted element wich is not the tooltip
         const slotElement = this.element.querySelector(`*:not(#${this.identifier})`);
         // Get interactive element
-        const interactiveElement = slotElement.matches(Ht) ? slotElement : (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(Ht);
+        const interactiveElement = slotElement.matches(Gt) ? slotElement : (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(Gt);
         this.setTooltipedElement(interactiveElement || slotElement);
-        // Set arrow element
-        this.arrowElement = this.mgTooltipContent.querySelector('[data-floating-arrow]');
         // Check if slotted element is a disabled mg-button
         // In this case we wrap the mg-button into a div to enable the tooltip
         if (isButton(slotElement)) {
@@ -363,6 +345,8 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
         }
         // apply a11y aria
         this.setAriaDescribedby(slotElement);
+        // set Tooltip
+        this.setPopper(this.element.closest('mg-popover') !== null ? 'absolute' : 'fixed');
         // add document keyboard handler
         document.addEventListener('keydown', this.handlePressEscape);
         // check props
@@ -372,32 +356,30 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
      * update popper position after props change on component did update hook to benefit from render ended
      */
     componentDidUpdate() {
-        this.updateTooltip();
+        this.popper.update();
     }
     /**
      * remove listeners
      */
     disconnectedCallback() {
-        var _a, _b;
+        var _a;
         document.removeEventListener('keydown', this.handlePressEscape);
         (_a = this.windows) === null || _a === void 0 ? void 0 : _a.forEach((localWindow) => {
             localWindow.removeEventListener('click', this.handleClickOutside, false);
             localWindow.removeEventListener('keydown', this.handlePressEscape, false);
         });
-        (_b = this.updateTooltip) === null || _b === void 0 ? void 0 : _b.call(this);
     }
     /**
      * Render
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: 'dab470c730b1541ab5be487222da8ba3643501ae' }, h("slot", { key: 'a6f5d444e3521d93cf9f39ccffcd68cfde4f8101' }), h("slot", { key: 'ba4d98f953453a710379cb4ce28f1c468a34ffc4', name: "content" })));
+        return (h(Host, { key: '9aae13f15c5c93d3a2e887a75e1ad54fd823f79e' }, h("slot", { key: 'd7a42dac1c0e43c1fddc08f80ba36ce5db65af0a' }), h("slot", { key: 'a89fc2e61a82de8d41d1231f5ba0136cd801f1f3', name: "content" })));
     }
     get element() { return this; }
     static get watchers() { return {
         "identifier": ["watchIdentifier"],
         "message": ["watchMessage"],
-        "placement": ["watchPlacement"],
         "display": ["watchDisplay"],
         "disabled": ["watchDisabled"]
     }; }
@@ -405,13 +387,12 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
 }, [1, "mg-tooltip", {
         "identifier": [1],
         "message": [1],
-        "placement": [1025],
+        "placement": [1],
         "display": [1028],
         "disabled": [4]
     }, undefined, {
         "identifier": ["watchIdentifier"],
         "message": ["watchMessage"],
-        "placement": ["watchPlacement"],
         "display": ["watchDisplay"],
         "disabled": ["watchDisabled"]
     }]);