@mgdis/mg-components 5.27.2 → 5.27.4

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 { N as Ne } from './index.es.js';
+import { I as Ie } from './index.es.js';
 
 const mgSkipLinksCss = ".mg-c-skip-links{position:absolute;background:hsl(var(--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:.64rem 1.8rem;margin:0;gap:.6rem;list-style:none}.mg-c-skip-links__link{display:inline-block;padding:1.2rem;color:hsl(var(--color-dark))}.mg-c-skip-links__link:hover{background:hsl(var(--color-dark)/10%)}";
 const MgSkipLinksStyle0 = mgSkipLinksCss;
@@ -25,7 +25,7 @@ const MgSkipLinks$1 = /*@__PURE__*/ proxyCustomElement(class MgSkipLinks extends
         this.links = undefined;
     }
     validateLinks(links) {
-        if (links === undefined || links.length === 0 || links.some(link => !Ne(link.href) || !link.href.startsWith('#') || !Ne(link.label))) {
+        if (links === undefined || links.length === 0 || links.some(link => !Ie(link.href) || !link.href.startsWith('#') || !Ie(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-tabs.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { C as Ce, M as Me, O as Oe, N as Ne, F as Fe } from './index.es.js';
+import { G as Ge, C as Ce, H as He, I as Ie, P as Pe } from './index.es.js';
 import { d as defineCustomElement$3 } from './mg-badge2.js';
 import { d as defineCustomElement$2 } from './mg-icon2.js';
 
@@ -129,7 +129,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
-            Ce(() => {
+            Ge(() => {
                 this.tabFocus = undefined;
                 Array.from(this.element.shadowRoot.querySelectorAll('[data-index]')).forEach((tab, index) => {
                     tab.setAttribute('tabindex', this.activeTab - this.startIndex !== index ? '-1' : '0');
@@ -144,16 +144,16 @@ const MgTabs$1 = /*@__PURE__*/ proxyCustomElement(class MgTabs extends HTMLEleme
             if (slots.length !== this.tabs.length)
                 throw new Error('<mg-tabs> Must have slots counts equal to tabs count.');
         };
-        this.identifier = Me('mg-tabs');
+        this.identifier = Ce('mg-tabs');
         this.label = undefined;
         this.size = 'regular';
         this.items = undefined;
         this.activeTab = undefined;
         this.tabs = [];
-        this.classCollection = new Oe(['mg-c-tabs']);
+        this.classCollection = new He(['mg-c-tabs']);
     }
     validateLabel(newValue) {
-        if (!Ne(newValue)) {
+        if (!Ie(newValue)) {
             throw new Error('<mg-tabs> prop "label" is required.');
         }
     }
@@ -165,7 +165,7 @@ const MgTabs$1 = /*@__PURE__*/ proxyCustomElement(class MgTabs extends HTMLEleme
     }
     validateItems(newValue) {
         // String array
-        if (Fe(newValue))
+        if (Pe(newValue))
             this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));
         // Object array
         else if (Array.isArray(newValue) && newValue.length > 0 && newValue.every(isTabItem))

package/dist/components/mg-tag.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { O as Oe, N as Ne } from './index.es.js';
+import { H as He, I as Ie } from './index.es.js';
 
 /**
  * List of all possibles variants
@@ -23,7 +23,7 @@ const MgTag$1 = /*@__PURE__*/ proxyCustomElement(class MgTag extends HTMLElement
         this.variant = variants[0];
         this.outline = undefined;
         this.soft = undefined;
-        this.classCollection = new Oe(['mg-c-tag']);
+        this.classCollection = new He(['mg-c-tag']);
     }
     validateVariant(newValue, oldValue) {
         if (!variants.includes(newValue)) {
@@ -60,7 +60,7 @@ const MgTag$1 = /*@__PURE__*/ proxyCustomElement(class MgTag extends HTMLElement
      * @param textContent - html element textContent property
      */
     validateTextContent(textContent) {
-        if (!Ne(textContent))
+        if (!Ie(textContent))
             throw new Error('<mg-tag> slot must contain a text content.');
     }
     /*************

package/dist/components/mg-tooltip2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { C as Ce, M as Me, N as Ne, B as Be, _ as _e } from './index.es.js';
+import { G as Ge, C as Ce, I as Ie, z as ze, W as We } from './index.es.js';
 import { d as defineCustomElement$1 } from './mg-tooltip-content2.js';
 import { c as createPopper } from './popper.js';
 
@@ -34,10 +34,10 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
             // 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
-            Ce(() => {
+            Ge(() => {
                 this.windows.forEach((localWindow) => {
-                    localWindow.addEventListener('click', this.clickOutside, false);
-                    localWindow.addEventListener('keydown', this.pressEscape, false);
+                    localWindow.addEventListener('click', this.handleClickOutside, false);
+                    localWindow.addEventListener('keydown', this.handlePressEscape, false);
                 });
             });
         };
@@ -51,15 +51,15 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
             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.clickOutside, false);
-                localWindow.removeEventListener('keyboard', this.pressEscape, false);
+                localWindow.removeEventListener('click', this.handleClickOutside, false);
+                localWindow.removeEventListener('keyboard', this.handlePressEscape, false);
             });
         };
         /**
          * Check if clicked outside of component and hidde tooltip
          * @param event - mouse event
          */
-        this.clickOutside = (event) => {
+        this.handleClickOutside = (event) => {
             if (event.target.closest('mg-tooltip') !== this.element)
                 this.setDisplay(false);
         };
@@ -67,7 +67,7 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
          * Check if 'Escape' key is pressed of component and hidde tooltip
          * @param event - keyboard event
          */
-        this.pressEscape = (event) => {
+        this.handlePressEscape = (event) => {
             if (event.code === 'Escape') {
                 this.setDisplay(false);
                 this.resetGuard();
@@ -85,23 +85,25 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
         /**
          * Action for tooltip element and tooltiped element mouse listener
          * @param elementGuard -  tooltip element guard
-         * @param isMouseenter - mouseenter validation
+         * @param eventName - event name
          * @param conditionalGuard - guard condition
          */
-        this.tooltipMouseListenerAction = (elementGuard, isMouseenter, conditionalGuard) => {
-            // we mutate elementGuard
-            if (![Guard.FOCUS, Guard.DISABLE_ON_CLICK].includes(this.guard)) {
-                this.guard = elementGuard;
-                if (!isMouseenter) {
-                    // process action in the next event loop macro task
-                    setTimeout(() => {
-                        this.setDisplay(isMouseenter, this.guard !== conditionalGuard);
-                        this.resetGuard();
-                    }, 100);
-                }
-                else if (this.guard === Guard.HOVER_TOOLTIPED_ELEMENT) {
-                    this.setDisplay(isMouseenter);
-                }
+        this.tooltipMouseListenerAction = (elementGuard, eventName, conditionalGuard) => {
+            // active FOCUS guard cancel process
+            if ([Guard.FOCUS, Guard.DISABLE_ON_CLICK].includes(this.guard)) {
+                return;
+            }
+            // Update guard by element guard
+            this.guard = elementGuard;
+            if (eventName !== 'mouseenter') {
+                // process action in the next event loop macro task
+                setTimeout(() => {
+                    this.setDisplay(false, this.guard !== conditionalGuard);
+                    this.resetGuard();
+                }, 100);
+            }
+            else if (this.guard === Guard.HOVER_TOOLTIPED_ELEMENT) {
+                this.setDisplay(true);
             }
         };
         /**
@@ -128,27 +130,9 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
             }
         };
         /**
-         * Init tooltip
-         * @param slotElement - slotted element
-         * @param interactiveElement - interactive element
+         * Set popper instance
          */
-        this.initTooltip = (slotElement, interactiveElement) => {
-            // Add tabindex to slotted element if we can't find any interactive element
-            if (!this.disabled && !interactiveElement) {
-                this.hasCustomTabIndex = true;
-                slotElement.tabIndex = 0;
-                // Add role on non-interactive element to work with "aria-describedby" for screen readers
-                slotElement.setAttribute('role', 'button');
-            }
-            // Set aria-describedby
-            const ariaDescribedby = slotElement.getAttribute('aria-describedby');
-            if (ariaDescribedby === null) {
-                this.tooltipedElement.setAttribute('aria-describedby', this.identifier);
-            }
-            else {
-                // We ensure to have uniq ids
-                slotElement.setAttribute('aria-describedby', `${[...new Set([...ariaDescribedby.split(' '), this.identifier])].join(' ')}`);
-            }
+        this.setPopper = () => {
             // use element data attribute: `data-popper-strategy`, in order to get popper strategy configuration
             const strategy = (this.element.dataset.popperStrategy || 'fixed');
             // Create popperjs tooltip
@@ -170,13 +154,14 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
                     },
                 ],
             });
-            // Manage tooltipedElement focus/blur events
-            this.tooltipedElement.addEventListener('disabled-change', (event) => {
-                if (event.target.disableOnClick) {
-                    this.guard = event.detail ? Guard.DISABLE_ON_CLICK : null;
-                }
-            });
-            // Manage tooltipedElement focus/blur events
+        };
+        /**
+         * Define selected element to become tooltip selector and init listeners
+         * @param element - tooltiped element
+         */
+        this.setTooltipedElement = (element) => {
+            this.tooltipedElement = element;
+            // Manage tooltipedElement focus events
             this.tooltipedElement.addEventListener('focus', () => {
                 this.guard = Guard.FOCUS;
                 this.setDisplay(true);
@@ -191,37 +176,71 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
                 this.resetGuard();
                 this.setDisplay(false);
             });
-            document.addEventListener('keydown', this.pressEscape);
             // manage tooltipElement & tooltipedElement mouseenter/mouseleave events
-            ['mouseenter', 'mouseleave'].forEach(eventType => {
-                const isMouseenter = eventType === 'mouseenter';
-                [
-                    { element: this.mgTooltipContent, action: () => this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIP_ELEMENT, isMouseenter, Guard.HOVER_TOOLTIPED_ELEMENT) },
-                    { element: this.tooltipedElement, action: () => this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIPED_ELEMENT, isMouseenter, Guard.HOVER_TOOLTIP_ELEMENT) },
-                ].forEach(({ element, action }) => {
-                    element.addEventListener(eventType, () => {
-                        action();
-                    });
-                });
+            this.tooltipedElement.addEventListener('mouseenter', () => {
+                this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIPED_ELEMENT, 'mouseenter', Guard.HOVER_TOOLTIP_ELEMENT);
+            });
+            this.tooltipedElement.addEventListener('mouseleave', () => {
+                this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIPED_ELEMENT, 'mouseleave', Guard.HOVER_TOOLTIP_ELEMENT);
             });
         };
-        this.identifier = Me('mg-tooltip');
+        /**
+         * Set button mutation observer
+         * @param mgButton - mg-button to observe
+         */
+        this.setMgButtonMutationObserver = (mgButton) => {
+            new MutationObserver(mutationList => {
+                // stop process when none of mutations attributed is disabled
+                if (!mutationList.some(mutation => ['aria-disabled', 'disabled'].includes(mutation.attributeName)))
+                    return;
+                // 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;
+                }
+                // 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 popper instance
+                this.popper.update();
+            }).observe(mgButton, { attributes: true });
+        };
+        /**
+         * Set tooltiped element aria-describedby
+         * @param element - element to update
+         */
+        this.setAriaDescribedby = (element) => {
+            // Set aria-describedby
+            const ariaDescribedby = element.getAttribute('aria-describedby');
+            if (ariaDescribedby === null) {
+                this.tooltipedElement.setAttribute('aria-describedby', this.identifier);
+            }
+            else {
+                // We ensure to have uniq ids
+                element.setAttribute('aria-describedby', `${[...new Set([...ariaDescribedby.split(' '), this.identifier])].join(' ')}`);
+            }
+        };
+        this.identifier = Ce('mg-tooltip');
         this.message = undefined;
         this.placement = 'bottom';
         this.display = false;
         this.disabled = false;
     }
-    validateIdentifier() {
+    watchIdentifier() {
         // use renderTooltipContent to update tooltip-content id
         this.renderTooltipContent();
     }
-    validateMessage(newValue) {
-        if (!Ne(newValue)) {
+    watchMessage(newValue) {
+        if (!Ie(newValue)) {
             throw new Error('<mg-tooltip> prop "message" is required.');
         }
         this.mgTooltipContent.message = newValue;
     }
-    handleDisplay(newValue) {
+    watchDisplay(newValue) {
         if (newValue) {
             this.show();
         }
@@ -229,7 +248,7 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
             this.hide();
         }
     }
-    validateDisabled(newValue) {
+    watchDisabled(newValue) {
         if (this.hasCustomTabIndex) {
             if (newValue)
                 this.tooltipedElement.removeAttribute('tabindex');
@@ -238,23 +257,29 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
         }
     }
     /**
-     * Render tooltip content element
+     * Render tooltip content element and init listeners
      */
     renderTooltipContent() {
-        const mgTooltipContent = this.element.querySelector('mg-tooltip-content');
-        if (mgTooltipContent === null) {
-            const mgTooltipContent = document.createElement('mg-tooltip-content');
-            mgTooltipContent.setAttribute('slot', 'content');
-            mgTooltipContent.setAttribute('id', this.identifier);
+        if (this.mgTooltipContent) {
+            this.mgTooltipContent.setAttribute('id', this.identifier);
+        }
+        else {
+            this.mgTooltipContent = document.createElement('mg-tooltip-content');
+            this.mgTooltipContent.setAttribute('slot', 'content');
+            this.mgTooltipContent.setAttribute('id', this.identifier);
             const arrow = document.createElement('div');
             arrow.setAttribute('slot', 'arrow');
             arrow.dataset.popperArrow = '';
-            mgTooltipContent.appendChild(arrow);
+            this.mgTooltipContent.appendChild(arrow);
+            // manage tooltipElement & tooltipedElement mouseenter/mouseleave events
+            this.mgTooltipContent.addEventListener('mouseenter', () => {
+                this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIP_ELEMENT, 'mouseenter', Guard.HOVER_TOOLTIPED_ELEMENT);
+            });
+            this.mgTooltipContent.addEventListener('mouseleave', () => {
+                this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIP_ELEMENT, 'mouseleave', Guard.HOVER_TOOLTIPED_ELEMENT);
+            });
             // append tooltip element to component
-            this.element.appendChild(mgTooltipContent);
-        }
-        else {
-            mgTooltipContent.setAttribute('id', this.identifier);
+            this.element.appendChild(this.mgTooltipContent);
         }
     }
     /*************
@@ -265,14 +290,13 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
      */
     componentWillLoad() {
         // Get windows to attach events
-        this.windows = Be(window);
+        this.windows = ze(window);
         // Get tooltip element
         this.renderTooltipContent();
-        this.mgTooltipContent = this.element.querySelector(`#${this.identifier}`);
         //validate properties
-        this.validateDisabled(this.disabled);
-        this.validateMessage(this.message);
-        this.validateIdentifier();
+        this.watchDisabled(this.disabled);
+        this.watchMessage(this.message);
+        this.watchIdentifier();
     }
     /**
      * Get slotted element
@@ -284,26 +308,29 @@ 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(_e) ? slotElement : (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(_e);
-        // define selected element to become tooltip selector
-        this.tooltipedElement = interactiveElement || slotElement;
+        const interactiveElement = slotElement.matches(We) ? slotElement : (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(We);
+        this.setTooltipedElement(interactiveElement || slotElement);
         // 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)) {
-            new MutationObserver(mutationList => {
-                if (mutationList.some(mutation => ['aria-disabled', 'disabled'].includes(mutation.attributeName)) && this.guard !== Guard.DISABLE_ON_CLICK) {
-                    this.setMgButtonWrapper(slotElement);
-                    // 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();
-                    this.initTooltip(slotElement, interactiveElement);
-                }
-            }).observe(slotElement, { attributes: true });
+            this.setMgButtonMutationObserver(slotElement);
             this.setMgButtonWrapper(slotElement);
         }
-        // Init Tooltip
-        this.initTooltip(slotElement, interactiveElement);
-        this.handleDisplay(this.display);
+        // Add tabindex to slotted element if we can't find any interactive element
+        if (!this.disabled && !interactiveElement) {
+            this.hasCustomTabIndex = true;
+            slotElement.tabIndex = 0;
+            // Add role on non-interactive element to work with "aria-describedby" for screen readers
+            slotElement.setAttribute('role', 'button');
+        }
+        // apply a11y aria
+        this.setAriaDescribedby(slotElement);
+        // set Tooltip
+        this.setPopper();
+        // add document keyboard handler
+        document.addEventListener('keydown', this.handlePressEscape);
+        // check props
+        this.watchDisplay(this.display);
     }
     /**
      * update popper position after props change on component did update hook to benefit from render ended
@@ -316,14 +343,14 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: 'bc92b38b5934945abf8657aeb56804c81274a11e' }, h("slot", { key: '5fca70b68f35c72c92252106d4b26766e2f671bb' }), h("slot", { key: '4426a5f6f55f549791ff22cc7220d728d2cca04f', name: "content" })));
+        return (h(Host, { key: '9d7c428ba22f6b8e41ad1b62837d7b369e38314d' }, h("slot", { key: 'f5bdcac81a64674dd57e88e1c00b540dd49310f6' }), h("slot", { key: '8d40b6f4f1d3f385dcdf582509f89b3ec0dbd676', name: "content" })));
     }
     get element() { return this; }
     static get watchers() { return {
-        "identifier": ["validateIdentifier"],
-        "message": ["validateMessage"],
-        "display": ["handleDisplay"],
-        "disabled": ["validateDisabled"]
+        "identifier": ["watchIdentifier"],
+        "message": ["watchMessage"],
+        "display": ["watchDisplay"],
+        "disabled": ["watchDisabled"]
     }; }
     static get style() { return MgTooltipStyle0; }
 }, [1, "mg-tooltip", {
@@ -333,10 +360,10 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
         "display": [1028],
         "disabled": [4]
     }, undefined, {
-        "identifier": ["validateIdentifier"],
-        "message": ["validateMessage"],
-        "display": ["handleDisplay"],
-        "disabled": ["validateDisabled"]
+        "identifier": ["watchIdentifier"],
+        "message": ["watchMessage"],
+        "display": ["watchDisplay"],
+        "disabled": ["watchDisabled"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/mg-tooltip2.js.map

@@ -1 +1 @@
-{"file":"mg-tooltip2.js","mappings":"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","names":["nextTick","createID","isValidString","getWindows","focusableElements"],"sources":["src/components/atoms/mg-tooltip/mg-tooltip.conf.tsx","../styles/dist/components/mg-tooltip.css?tag=mg-tooltip&encapsulation=shadow","src/components/atoms/mg-tooltip/mg-tooltip.tsx"],"sourcesContent":["export enum Guard {\n  FOCUS = 'focus',\n  HOVER_TOOLTIP_ELEMENT = 'hoverTooltipGuard',\n  HOVER_TOOLTIPED_ELEMENT = 'hoverTooltipedGuard',\n  DISABLE_ON_CLICK = 'disableOnClick',\n}\n",":host{display:inline-block}mg-tooltip-content{font-family:var(--font-family);font-size:var(--font-size);font-weight:200}/*# sourceMappingURL=mg-tooltip.css.map */\n","import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\nimport { createID, focusableElements, getWindows, isValidString, nextTick } from '@mgdis/stencil-helpers';\nimport { Instance as PopperInstance, createPopper, Placement, PositioningStrategy } from '@popperjs/core';\nimport { Guard } from './mg-tooltip.conf';\n\n/**\n * HTMLMgButtonElement type guard\n * @param element - element to check\n * @returns return true if type is HTMLMgButtonElement\n */\nconst isButton = (element: unknown): element is HTMLMgButtonElement => typeof element === 'object' && ['MG-BUTTON', 'BUTTON'].includes((element as Element).tagName);\n\n/**\n * @slot - Element that will display the tooltip\n * @slot content - Tooltip content\n */\n@Component({\n  tag: 'mg-tooltip',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-tooltip.css',\n  shadow: true,\n})\nexport class MgTooltip {\n  /************\n   * Internal *\n   ************/\n\n  private popper: PopperInstance;\n  private mgTooltipContent: HTMLMgTooltipContentElement;\n  private tooltipedElement: HTMLElement;\n  private windows: Window[];\n  private hasCustomTabIndex: boolean;\n\n  // tooltip actions guards\n  private guard: Guard;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgTooltipElement;\n\n  /**\n   * Sets an `id` attribute.\n   * Needed by the input for accessibility `aria-decribedby`.\n   */\n  @Prop() identifier: string = createID('mg-tooltip');\n  @Watch('identifier')\n  validateIdentifier(): void {\n    // use renderTooltipContent to update tooltip-content id\n    this.renderTooltipContent();\n  }\n\n  /**\n   * Displayed message in the tooltip\n   */\n  @Prop() message!: string;\n  @Watch('message')\n  validateMessage(newValue: MgTooltip['message']): void {\n    if (!isValidString(newValue)) {\n      throw new Error('<mg-tooltip> prop \"message\" is required.');\n    }\n    this.mgTooltipContent.message = newValue;\n  }\n\n  /**\n   * Tooltip placement\n   */\n  @Prop() placement: Placement = 'bottom';\n\n  /**\n   * Display tooltip\n   */\n  @Prop({ mutable: true }) display = false;\n  @Watch('display')\n  handleDisplay(newValue: MgTooltip['display']): void {\n    if (newValue) {\n      this.show();\n    } else {\n      this.hide();\n    }\n  }\n\n  /**\n   * Disable tooltip\n   */\n  @Prop() disabled = false;\n  @Watch('disabled')\n  validateDisabled(newValue: MgTooltip['disabled']): void {\n    if (this.hasCustomTabIndex) {\n      if (newValue) this.tooltipedElement.removeAttribute('tabindex');\n      else if (this.tooltipedElement.getAttribute('tabindex') === null) this.tooltipedElement.setAttribute('tabindex', '0');\n    }\n  }\n\n  /**\n   * Show tooltip\n   */\n  private show = (): void => {\n    // Make the tooltip visible\n    this.mgTooltipContent.dataset.show = '';\n    // Enable the event listeners\n    this.popper.setOptions(options => ({\n      ...options,\n      modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }],\n    }));\n    // hide when click outside on nextTick to prevent event to trigger after creation\n    nextTick(() => {\n      this.windows.forEach((localWindow: Window) => {\n        localWindow.addEventListener('click', this.clickOutside, false);\n        localWindow.addEventListener('keydown', this.pressEscape, false);\n      });\n    });\n  };\n\n  /**\n   * Hide tooltip\n   */\n  private hide = (): void => {\n    // Hide the tooltip\n    this.mgTooltipContent.removeAttribute('data-show');\n    // Disable the event listeners\n    this.popper.setOptions(options => ({\n      ...options,\n      modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }],\n    }));\n    // Remove event listener\n    this.windows.forEach((localWindow: Window) => {\n      localWindow.removeEventListener('click', this.clickOutside, false);\n      localWindow.removeEventListener('keyboard', this.pressEscape, false);\n    });\n  };\n\n  /**\n   * Check if clicked outside of component and hidde tooltip\n   * @param event - mouse event\n   */\n  private clickOutside = (event: MouseEvent & { target: HTMLElement }): void => {\n    if (event.target.closest('mg-tooltip') !== this.element) this.setDisplay(false);\n  };\n\n  /**\n   * Check if 'Escape' key is pressed of component and hidde tooltip\n   * @param event - keyboard event\n   */\n  private pressEscape = (event: KeyboardEvent): void => {\n    if (event.code === 'Escape') {\n      this.setDisplay(false);\n      this.resetGuard();\n    }\n  };\n\n  /**\n   * Method to set display prop\n   * @param newValue - display prop new value\n   * @param condition - additionnal condition to apply display prop newValue\n   */\n  private setDisplay = (newValue: MgTooltip['display'], condition = true): void => {\n    if (!this.disabled && condition) this.display = newValue;\n  };\n\n  /**\n   * Action for tooltip element and tooltiped element mouse listener\n   * @param elementGuard -  tooltip element guard\n   * @param isMouseenter - mouseenter validation\n   * @param conditionalGuard - guard condition\n   */\n  private tooltipMouseListenerAction = (elementGuard: Guard, isMouseenter: boolean, conditionalGuard: Guard): void => {\n    // we mutate elementGuard\n    if (![Guard.FOCUS, Guard.DISABLE_ON_CLICK].includes(this.guard)) {\n      this.guard = elementGuard;\n      if (!isMouseenter) {\n        // process action in the next event loop macro task\n        setTimeout(() => {\n          this.setDisplay(isMouseenter, this.guard !== conditionalGuard);\n          this.resetGuard();\n        }, 100);\n      } else if (this.guard === Guard.HOVER_TOOLTIPED_ELEMENT) {\n        this.setDisplay(isMouseenter);\n      }\n    }\n  };\n\n  /**\n   * Method to reset guard value\n   */\n  private resetGuard = (): void => {\n    this.guard = undefined;\n  };\n\n  /**\n   * Update slot content when it is a mg-button\n   * @param mgButton - slotted mg-button\n   */\n  private setMgButtonWrapper = (mgButton: HTMLMgButtonElement): void => {\n    if (mgButton.disabled) {\n      const div = document.createElement('div');\n      div.classList.add('mg-c-tooltip__mg-button-wrapper');\n      mgButton.parentNode.insertBefore(div, mgButton);\n      div.appendChild(mgButton);\n      this.tooltipedElement = div;\n    } else if (mgButton.parentElement.classList.contains('mg-c-tooltip__mg-button-wrapper')) {\n      this.element.firstElementChild.replaceWith(mgButton);\n      this.tooltipedElement = mgButton;\n    }\n  };\n\n  /**\n   * Init tooltip\n   * @param slotElement - slotted element\n   * @param interactiveElement - interactive element\n   */\n  private initTooltip = (slotElement: HTMLElement, interactiveElement: HTMLElement): void => {\n    // Add tabindex to slotted element if we can't find any interactive element\n    if (!this.disabled && !interactiveElement) {\n      this.hasCustomTabIndex = true;\n      slotElement.tabIndex = 0;\n      // Add role on non-interactive element to work with \"aria-describedby\" for screen readers\n      slotElement.setAttribute('role', 'button');\n    }\n    // Set aria-describedby\n    const ariaDescribedby = slotElement.getAttribute('aria-describedby');\n\n    if (ariaDescribedby === null) {\n      this.tooltipedElement.setAttribute('aria-describedby', this.identifier);\n    } else {\n      // We ensure to have uniq ids\n      slotElement.setAttribute('aria-describedby', `${[...new Set([...ariaDescribedby.split(' '), this.identifier])].join(' ')}`);\n    }\n\n    // use element data attribute: `data-popper-strategy`, in order to get popper strategy configuration\n    const strategy = (this.element.dataset.popperStrategy || 'fixed') as PositioningStrategy;\n\n    // Create popperjs tooltip\n    this.popper = createPopper(this.tooltipedElement, this.mgTooltipContent, {\n      placement: this.placement,\n      strategy,\n      modifiers: [\n        {\n          name: 'offset',\n          options: {\n            offset: [0, 8],\n          },\n        },\n        {\n          name: 'flip',\n          options: {\n            fallbackPlacements: ['auto'],\n          },\n        },\n      ],\n    });\n\n    // Manage tooltipedElement focus/blur events\n    this.tooltipedElement.addEventListener('disabled-change', (event: CustomEvent & { target: HTMLMgButtonElement }) => {\n      if (event.target.disableOnClick) {\n        this.guard = event.detail ? Guard.DISABLE_ON_CLICK : null;\n      }\n    });\n\n    // Manage tooltipedElement focus/blur events\n    this.tooltipedElement.addEventListener('focus', () => {\n      this.guard = Guard.FOCUS;\n      this.setDisplay(true);\n    });\n\n    // as `click` event is the composition of `mousedown` and `mouseup` event,\n    // and `click` event trigger `focus` event after a success `mousedown` wich set the `guard` to `Guard.FOCUS`\n    // we reset the guard on `mouseup` event to unlock tooltip\n    this.tooltipedElement.addEventListener('mouseup', () => {\n      this.resetGuard();\n    });\n\n    this.tooltipedElement.addEventListener('blur', () => {\n      this.resetGuard();\n      this.setDisplay(false);\n    });\n\n    document.addEventListener('keydown', this.pressEscape);\n\n    // manage tooltipElement & tooltipedElement mouseenter/mouseleave events\n    ['mouseenter', 'mouseleave'].forEach(eventType => {\n      const isMouseenter = eventType === 'mouseenter';\n      [\n        { element: this.mgTooltipContent, action: () => this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIP_ELEMENT, isMouseenter, Guard.HOVER_TOOLTIPED_ELEMENT) },\n        { element: this.tooltipedElement, action: () => this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIPED_ELEMENT, isMouseenter, Guard.HOVER_TOOLTIP_ELEMENT) },\n      ].forEach(({ element, action }) => {\n        element.addEventListener(eventType, () => {\n          action();\n        });\n      });\n    });\n  };\n\n  /**\n   * Render tooltip content element\n   */\n  private renderTooltipContent(): void {\n    const mgTooltipContent = this.element.querySelector('mg-tooltip-content');\n    if (mgTooltipContent === null) {\n      const mgTooltipContent = document.createElement('mg-tooltip-content');\n      mgTooltipContent.setAttribute('slot', 'content');\n      mgTooltipContent.setAttribute('id', this.identifier);\n\n      const arrow = document.createElement('div');\n      arrow.setAttribute('slot', 'arrow');\n      arrow.dataset.popperArrow = '';\n      mgTooltipContent.appendChild(arrow);\n\n      // append tooltip element to component\n      this.element.appendChild(mgTooltipContent);\n    } else {\n      mgTooltipContent.setAttribute('id', this.identifier);\n    }\n  }\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * set variables\n   */\n  componentWillLoad(): void {\n    // Get windows to attach events\n    this.windows = getWindows(window);\n\n    // Get tooltip element\n    this.renderTooltipContent();\n    this.mgTooltipContent = this.element.querySelector(`#${this.identifier}`);\n\n    //validate properties\n    this.validateDisabled(this.disabled);\n    this.validateMessage(this.message);\n    this.validateIdentifier();\n  }\n\n  /**\n   * Get slotted element\n   * Check if it already contain an interactive element, if not we need to add a tabIndex attribute\n   * We need to attach the focused element to the tooltip (aria-describedby)\n   */\n  componentDidLoad(): void {\n    // get slotted element wich is not the tooltip\n    const slotElement: HTMLElement = this.element.querySelector(`*:not(#${this.identifier})`);\n\n    // Get interactive element\n    const interactiveElement: HTMLElement = slotElement.matches(focusableElements) ? slotElement : slotElement.shadowRoot?.querySelector(focusableElements);\n\n    // define selected element to become tooltip selector\n    this.tooltipedElement = interactiveElement || slotElement;\n\n    // Check if slotted element is a disabled mg-button\n    // In this case we wrap the mg-button into a div to enable the tooltip\n    if (isButton(slotElement)) {\n      new MutationObserver(mutationList => {\n        if (mutationList.some(mutation => ['aria-disabled', 'disabled'].includes(mutation.attributeName)) && this.guard !== Guard.DISABLE_ON_CLICK) {\n          this.setMgButtonWrapper(slotElement);\n          // Since Firefox doesn't trigger a \"blur\" event when the \"disabled\" attribute is added or removed from a button\n          // we have to manually unlock the guard because the \"blur\" handler of the tooltipedElement won't do it.\n          this.resetGuard();\n          this.initTooltip(slotElement, interactiveElement);\n        }\n      }).observe(slotElement, { attributes: true });\n      this.setMgButtonWrapper(slotElement);\n    }\n\n    // Init Tooltip\n    this.initTooltip(slotElement, interactiveElement);\n\n    this.handleDisplay(this.display);\n  }\n\n  /**\n   * update popper position after props change on component did update hook to benefit from render ended\n   */\n  componentDidUpdate(): void {\n    this.popper.update();\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <Host>\n        <slot></slot>\n        <slot name=\"content\"></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"mg-tooltip2.js","mappings":"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","names":["nextTick","createID","isValidString","getWindows","focusableElements"],"sources":["src/components/atoms/mg-tooltip/mg-tooltip.conf.tsx","../styles/dist/components/mg-tooltip.css?tag=mg-tooltip&encapsulation=shadow","src/components/atoms/mg-tooltip/mg-tooltip.tsx"],"sourcesContent":["export enum Guard {\n  FOCUS = 'focus',\n  HOVER_TOOLTIP_ELEMENT = 'hoverTooltipGuard',\n  HOVER_TOOLTIPED_ELEMENT = 'hoverTooltipedGuard',\n  DISABLE_ON_CLICK = 'disableOnClick',\n}\n",":host{display:inline-block}mg-tooltip-content{font-family:var(--font-family);font-size:var(--font-size);font-weight:200}/*# sourceMappingURL=mg-tooltip.css.map */\n","import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\nimport { createID, focusableElements, getWindows, isValidString, nextTick } from '@mgdis/stencil-helpers';\nimport { Instance as PopperInstance, createPopper, Placement, PositioningStrategy } from '@popperjs/core';\nimport { Guard } from './mg-tooltip.conf';\n\n/**\n * HTMLMgButtonElement type guard\n * @param element - element to check\n * @returns return true if type is HTMLMgButtonElement\n */\nconst isButton = (element: unknown): element is HTMLMgButtonElement => typeof element === 'object' && ['MG-BUTTON', 'BUTTON'].includes((element as Element).tagName);\n\n/**\n * @slot - Element that will display the tooltip\n * @slot content - Tooltip content\n */\n@Component({\n  tag: 'mg-tooltip',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-tooltip.css',\n  shadow: true,\n})\nexport class MgTooltip {\n  /************\n   * Internal *\n   ************/\n\n  private popper: PopperInstance;\n  private mgTooltipContent: HTMLMgTooltipContentElement;\n  private tooltipedElement: HTMLElement;\n  private windows: Window[];\n  private hasCustomTabIndex: boolean;\n\n  // tooltip actions guards\n  private guard: Guard;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgTooltipElement;\n\n  /**\n   * Sets an `id` attribute.\n   * Needed by the input for accessibility `aria-decribedby`.\n   */\n  @Prop() identifier: string = createID('mg-tooltip');\n  @Watch('identifier')\n  watchIdentifier(): void {\n    // use renderTooltipContent to update tooltip-content id\n    this.renderTooltipContent();\n  }\n\n  /**\n   * Displayed message in the tooltip\n   */\n  @Prop() message!: string;\n  @Watch('message')\n  watchMessage(newValue: MgTooltip['message']): void {\n    if (!isValidString(newValue)) {\n      throw new Error('<mg-tooltip> prop \"message\" is required.');\n    }\n    this.mgTooltipContent.message = newValue;\n  }\n\n  /**\n   * Tooltip placement\n   */\n  @Prop() placement: Placement = 'bottom';\n\n  /**\n   * Display tooltip\n   */\n  @Prop({ mutable: true }) display = false;\n  @Watch('display')\n  watchDisplay(newValue: MgTooltip['display']): void {\n    if (newValue) {\n      this.show();\n    } else {\n      this.hide();\n    }\n  }\n\n  /**\n   * Disable tooltip\n   */\n  @Prop() disabled = false;\n  @Watch('disabled')\n  watchDisabled(newValue: MgTooltip['disabled']): void {\n    if (this.hasCustomTabIndex) {\n      if (newValue) this.tooltipedElement.removeAttribute('tabindex');\n      else if (this.tooltipedElement.getAttribute('tabindex') === null) this.tooltipedElement.setAttribute('tabindex', '0');\n    }\n  }\n\n  /**\n   * Show tooltip\n   */\n  private show = (): void => {\n    // Make the tooltip visible\n    this.mgTooltipContent.dataset.show = '';\n    // Enable the event listeners\n    this.popper.setOptions(options => ({\n      ...options,\n      modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }],\n    }));\n    // hide when click outside on nextTick to prevent event to trigger after creation\n    nextTick(() => {\n      this.windows.forEach((localWindow: Window) => {\n        localWindow.addEventListener('click', this.handleClickOutside, false);\n        localWindow.addEventListener('keydown', this.handlePressEscape, false);\n      });\n    });\n  };\n\n  /**\n   * Hide tooltip\n   */\n  private hide = (): void => {\n    // Hide the tooltip\n    this.mgTooltipContent.removeAttribute('data-show');\n    // Disable the event listeners\n    this.popper.setOptions(options => ({\n      ...options,\n      modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }],\n    }));\n    // Remove event listener\n    this.windows.forEach((localWindow: Window) => {\n      localWindow.removeEventListener('click', this.handleClickOutside, false);\n      localWindow.removeEventListener('keyboard', this.handlePressEscape, false);\n    });\n  };\n\n  /**\n   * Check if clicked outside of component and hidde tooltip\n   * @param event - mouse event\n   */\n  private handleClickOutside = (event: MouseEvent & { target: HTMLElement }): void => {\n    if (event.target.closest('mg-tooltip') !== this.element) this.setDisplay(false);\n  };\n\n  /**\n   * Check if 'Escape' key is pressed of component and hidde tooltip\n   * @param event - keyboard event\n   */\n  private handlePressEscape = (event: KeyboardEvent): void => {\n    if (event.code === 'Escape') {\n      this.setDisplay(false);\n      this.resetGuard();\n    }\n  };\n\n  /**\n   * Method to set display prop\n   * @param newValue - display prop new value\n   * @param condition - additionnal condition to apply display prop newValue\n   */\n  private setDisplay = (newValue: MgTooltip['display'], condition = true): void => {\n    if (!this.disabled && condition) this.display = newValue;\n  };\n\n  /**\n   * Action for tooltip element and tooltiped element mouse listener\n   * @param elementGuard -  tooltip element guard\n   * @param eventName - event name\n   * @param conditionalGuard - guard condition\n   */\n  private tooltipMouseListenerAction = (elementGuard: Guard, eventName: 'mouseenter' | 'mouseleave', conditionalGuard: Guard): void => {\n    // active FOCUS guard cancel process\n    if ([Guard.FOCUS, Guard.DISABLE_ON_CLICK].includes(this.guard)) {\n      return;\n    }\n\n    // Update guard by element guard\n    this.guard = elementGuard;\n\n    if (eventName !== 'mouseenter') {\n      // process action in the next event loop macro task\n      setTimeout(() => {\n        this.setDisplay(false, this.guard !== conditionalGuard);\n        this.resetGuard();\n      }, 100);\n    } else if (this.guard === Guard.HOVER_TOOLTIPED_ELEMENT) {\n      this.setDisplay(true);\n    }\n  };\n\n  /**\n   * Method to reset guard value\n   */\n  private resetGuard = (): void => {\n    this.guard = undefined;\n  };\n\n  /**\n   * Update slot content when it is a mg-button\n   * @param mgButton - slotted mg-button\n   */\n  private setMgButtonWrapper = (mgButton: HTMLMgButtonElement): void => {\n    if (mgButton.disabled) {\n      const div = document.createElement('div');\n      div.classList.add('mg-c-tooltip__mg-button-wrapper');\n      mgButton.parentNode.insertBefore(div, mgButton);\n      div.appendChild(mgButton);\n      this.tooltipedElement = div;\n    } else if (mgButton.parentElement.classList.contains('mg-c-tooltip__mg-button-wrapper')) {\n      this.element.firstElementChild.replaceWith(mgButton);\n      this.tooltipedElement = mgButton;\n    }\n  };\n\n  /**\n   * Set popper instance\n   */\n  private setPopper = (): void => {\n    // use element data attribute: `data-popper-strategy`, in order to get popper strategy configuration\n    const strategy = (this.element.dataset.popperStrategy || 'fixed') as PositioningStrategy;\n\n    // Create popperjs tooltip\n    this.popper = createPopper(this.tooltipedElement, this.mgTooltipContent, {\n      placement: this.placement,\n      strategy,\n      modifiers: [\n        {\n          name: 'offset',\n          options: {\n            offset: [0, 8],\n          },\n        },\n        {\n          name: 'flip',\n          options: {\n            fallbackPlacements: ['auto'],\n          },\n        },\n      ],\n    });\n  };\n\n  /**\n   * Define selected element to become tooltip selector and init listeners\n   * @param element - tooltiped element\n   */\n  private setTooltipedElement = (element: HTMLElement): void => {\n    this.tooltipedElement = element;\n\n    // Manage tooltipedElement focus events\n    this.tooltipedElement.addEventListener('focus', () => {\n      this.guard = Guard.FOCUS;\n      this.setDisplay(true);\n    });\n\n    // as `click` event is the composition of `mousedown` and `mouseup` event,\n    // and `click` event trigger `focus` event after a success `mousedown` wich set the `guard` to `Guard.FOCUS`\n    // we reset the guard on `mouseup` event to unlock tooltip\n    this.tooltipedElement.addEventListener('mouseup', () => {\n      this.resetGuard();\n    });\n\n    this.tooltipedElement.addEventListener('blur', () => {\n      this.resetGuard();\n      this.setDisplay(false);\n    });\n\n    // manage tooltipElement & tooltipedElement mouseenter/mouseleave events\n    this.tooltipedElement.addEventListener('mouseenter', () => {\n      this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIPED_ELEMENT, 'mouseenter', Guard.HOVER_TOOLTIP_ELEMENT);\n    });\n\n    this.tooltipedElement.addEventListener('mouseleave', () => {\n      this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIPED_ELEMENT, 'mouseleave', Guard.HOVER_TOOLTIP_ELEMENT);\n    });\n  };\n\n  /**\n   * Set button mutation observer\n   * @param mgButton - mg-button to observe\n   */\n  private setMgButtonMutationObserver = (mgButton: HTMLMgButtonElement): void => {\n    new MutationObserver(mutationList => {\n      // stop process when none of mutations attributed is disabled\n      if (!mutationList.some(mutation => ['aria-disabled', 'disabled'].includes(mutation.attributeName))) return;\n\n      // set guard when one of mutations is for a disabled with disabled-on-click\n      if (mutationList.some((mutation: MutationRecord & { target: HTMLMgButtonElement }) => mutation.target.disabled && mutation.target.disableOnClick)) {\n        this.guard = Guard.DISABLE_ON_CLICK;\n      }\n\n      // when the disabled-on-click guard is running we stop process\n      if (this.guard === Guard.DISABLE_ON_CLICK) return;\n\n      // update button wrapper\n      this.setMgButtonWrapper(mgButton);\n\n      // Since Firefox doesn't trigger a \"blur\" event when the \"disabled\" attribute is added or removed from a button\n      // we have to manually unlock the guard because the \"blur\" handler of the tooltipedElement won't do it.\n      this.resetGuard();\n\n      // update popper instance\n      this.popper.update();\n    }).observe(mgButton, { attributes: true });\n  };\n\n  /**\n   * Set tooltiped element aria-describedby\n   * @param element - element to update\n   */\n  private setAriaDescribedby = (element: HTMLElement): void => {\n    // Set aria-describedby\n    const ariaDescribedby = element.getAttribute('aria-describedby');\n\n    if (ariaDescribedby === null) {\n      this.tooltipedElement.setAttribute('aria-describedby', this.identifier);\n    } else {\n      // We ensure to have uniq ids\n      element.setAttribute('aria-describedby', `${[...new Set([...ariaDescribedby.split(' '), this.identifier])].join(' ')}`);\n    }\n  };\n\n  /**\n   * Render tooltip content element and init listeners\n   */\n  private renderTooltipContent(): void {\n    if (this.mgTooltipContent) {\n      this.mgTooltipContent.setAttribute('id', this.identifier);\n    } else {\n      this.mgTooltipContent = document.createElement('mg-tooltip-content');\n      this.mgTooltipContent.setAttribute('slot', 'content');\n      this.mgTooltipContent.setAttribute('id', this.identifier);\n\n      const arrow = document.createElement('div');\n      arrow.setAttribute('slot', 'arrow');\n      arrow.dataset.popperArrow = '';\n      this.mgTooltipContent.appendChild(arrow);\n\n      // manage tooltipElement & tooltipedElement mouseenter/mouseleave events\n      this.mgTooltipContent.addEventListener('mouseenter', () => {\n        this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIP_ELEMENT, 'mouseenter', Guard.HOVER_TOOLTIPED_ELEMENT);\n      });\n      this.mgTooltipContent.addEventListener('mouseleave', () => {\n        this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIP_ELEMENT, 'mouseleave', Guard.HOVER_TOOLTIPED_ELEMENT);\n      });\n\n      // append tooltip element to component\n      this.element.appendChild(this.mgTooltipContent);\n    }\n  }\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * set variables\n   */\n  componentWillLoad(): void {\n    // Get windows to attach events\n    this.windows = getWindows(window);\n\n    // Get tooltip element\n    this.renderTooltipContent();\n\n    //validate properties\n    this.watchDisabled(this.disabled);\n    this.watchMessage(this.message);\n    this.watchIdentifier();\n  }\n\n  /**\n   * Get slotted element\n   * Check if it already contain an interactive element, if not we need to add a tabIndex attribute\n   * We need to attach the focused element to the tooltip (aria-describedby)\n   */\n  componentDidLoad(): void {\n    // get slotted element wich is not the tooltip\n    const slotElement: HTMLElement = this.element.querySelector(`*:not(#${this.identifier})`);\n\n    // Get interactive element\n    const interactiveElement: HTMLElement = slotElement.matches(focusableElements) ? slotElement : slotElement.shadowRoot?.querySelector(focusableElements);\n\n    this.setTooltipedElement(interactiveElement || slotElement);\n\n    // Check if slotted element is a disabled mg-button\n    // In this case we wrap the mg-button into a div to enable the tooltip\n    if (isButton(slotElement)) {\n      this.setMgButtonMutationObserver(slotElement);\n      this.setMgButtonWrapper(slotElement);\n    }\n\n    // Add tabindex to slotted element if we can't find any interactive element\n    if (!this.disabled && !interactiveElement) {\n      this.hasCustomTabIndex = true;\n      slotElement.tabIndex = 0;\n      // Add role on non-interactive element to work with \"aria-describedby\" for screen readers\n      slotElement.setAttribute('role', 'button');\n    }\n\n    // apply a11y aria\n    this.setAriaDescribedby(slotElement);\n\n    // set Tooltip\n    this.setPopper();\n\n    // add document keyboard handler\n    document.addEventListener('keydown', this.handlePressEscape);\n\n    // check props\n    this.watchDisplay(this.display);\n  }\n\n  /**\n   * update popper position after props change on component did update hook to benefit from render ended\n   */\n  componentDidUpdate(): void {\n    this.popper.update();\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <Host>\n        <slot></slot>\n        <slot name=\"content\"></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}