@mgdis/mg-components 5.19.3 → 5.21.0

package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { createID, focusableElements, getWindows, isValidString } from "../../../utils/components.utils";
+import { createID, focusableElements, getWindows, isValidString, nextTick } from "../../../utils/components.utils";
 import { createPopper } from "@popperjs/core";
 import { Guard } from "./mg-tooltip.conf";
 /**
@@ -9,418 +9,418 @@ import { Guard } from "./mg-tooltip.conf";
  */
 const isButton = (element) => typeof element === 'object' && ['MG-BUTTON', 'BUTTON'].includes(element.tagName);
 export class MgTooltip {
-  constructor() {
-    /**
-     * Show tooltip
-     */
-    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
-      // setTimeout is used to prevent event to trigger after creation
-      setTimeout(() => {
-        this.windows.forEach((localWindow) => {
-          localWindow.addEventListener('click', this.clickOutside, false);
-          localWindow.addEventListener('keydown', this.pressEscape, false);
-        });
-      }, 0);
-    };
-    /**
-     * Hide tooltip
-     */
-    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.clickOutside, false);
-        localWindow.removeEventListener('keyboard', this.pressEscape, false);
-      });
-    };
-    /**
-     * Check if clicked outside of component and hidde tooltip
-     * @param event - mouse event
-     */
-    this.clickOutside = (event) => {
-      if (event.target.closest('mg-tooltip') !== this.element)
-        this.setDisplay(false);
-    };
-    /**
-     * Check if 'Escape' key is pressed of component and hidde tooltip
-     * @param event - keyboard event
-     */
-    this.pressEscape = (event) => {
-      if (event.code === 'Escape') {
-        this.setDisplay(false);
-        this.resetGuard();
-      }
-    };
-    /**
-     * Method to set display prop
-     * @param newValue - display prop new value
-     * @param condition - additionnal condition to apply display prop newValue
-     */
-    this.setDisplay = (newValue, condition = true) => {
-      if (!this.disabled && condition)
-        this.display = newValue;
-    };
+    constructor() {
+        /**
+         * Show tooltip
+         */
+        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
+            nextTick(() => {
+                this.windows.forEach((localWindow) => {
+                    localWindow.addEventListener('click', this.clickOutside, false);
+                    localWindow.addEventListener('keydown', this.pressEscape, false);
+                });
+            });
+        };
+        /**
+         * Hide tooltip
+         */
+        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.clickOutside, false);
+                localWindow.removeEventListener('keyboard', this.pressEscape, false);
+            });
+        };
+        /**
+         * Check if clicked outside of component and hidde tooltip
+         * @param event - mouse event
+         */
+        this.clickOutside = (event) => {
+            if (event.target.closest('mg-tooltip') !== this.element)
+                this.setDisplay(false);
+        };
+        /**
+         * Check if 'Escape' key is pressed of component and hidde tooltip
+         * @param event - keyboard event
+         */
+        this.pressEscape = (event) => {
+            if (event.code === 'Escape') {
+                this.setDisplay(false);
+                this.resetGuard();
+            }
+        };
+        /**
+         * Method to set display prop
+         * @param newValue - display prop new value
+         * @param condition - additionnal condition to apply display prop newValue
+         */
+        this.setDisplay = (newValue, condition = true) => {
+            if (!this.disabled && condition)
+                this.display = newValue;
+        };
+        /**
+         * Action for tooltip element and tooltiped element mouse listener
+         * @param elementGuard -  tooltip element guard
+         * @param isMouseenter - mouseenter validation
+         * @param conditionalGuard - guard condition
+         */
+        this.tooltipMouseListenerAction = (elementGuard, isMouseenter, conditionalGuard) => {
+            // we mutate elementGuard
+            if (this.guard !== Guard.FOCUS) {
+                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);
+                }
+            }
+        };
+        /**
+         * Method to reset guard value
+         */
+        this.resetGuard = () => {
+            this.guard = undefined;
+        };
+        /**
+         * Update slot content when it is a mg-button
+         * @param mgButton - slotted mg-button
+         */
+        this.setMgButtonWrapper = (mgButton) => {
+            if (mgButton.disabled) {
+                const div = document.createElement('div');
+                div.classList.add('mg-c-tooltip__mg-button-wrapper');
+                mgButton.parentNode.insertBefore(div, mgButton);
+                div.appendChild(mgButton);
+                this.tooltipedElement = div;
+            }
+            else if (mgButton.parentElement.classList.contains('mg-c-tooltip__mg-button-wrapper')) {
+                this.element.firstElementChild.replaceWith(mgButton);
+                this.tooltipedElement = mgButton;
+            }
+        };
+        /**
+         * Init tooltip
+         * @param slotElement - slotted element
+         * @param interactiveElement - interactive element
+         */
+        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(' ')}`);
+            }
+            // Create popperjs tooltip
+            this.popper = createPopper(this.tooltipedElement, this.mgTooltipContent, {
+                placement: this.placement,
+                strategy: 'fixed',
+                modifiers: [
+                    {
+                        name: 'offset',
+                        options: {
+                            offset: [0, 8],
+                        },
+                    },
+                    {
+                        name: 'flip',
+                        options: {
+                            fallbackPlacements: ['auto'],
+                        },
+                    },
+                ],
+            });
+            // Manage tooltipedElement focus/blur events
+            this.tooltipedElement.addEventListener('focus', () => {
+                this.guard = Guard.FOCUS;
+                this.setDisplay(true);
+            });
+            // as `click` event is the composition of `mousedown` and `mouseup` event,
+            // and `click` event trigger `focus` event after a success `mousedown` wich set the `guard` to `Guard.FOCUS`
+            // we reset the guard on `mouseup` event to unlock tooltip
+            this.tooltipedElement.addEventListener('mouseup', () => {
+                this.resetGuard();
+            });
+            this.tooltipedElement.addEventListener('blur', () => {
+                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.identifier = createID('mg-tooltip');
+        this.message = undefined;
+        this.placement = 'bottom';
+        this.display = false;
+        this.disabled = false;
+    }
+    validateIdentifier() {
+        // use renderTooltipContent to update tooltip-content id
+        this.renderTooltipContent();
+    }
+    validateMessage(newValue) {
+        if (!isValidString(newValue)) {
+            throw new Error('<mg-tooltip> prop "message" is required.');
+        }
+        this.mgTooltipContent.message = newValue;
+    }
+    handleDisplay(newValue) {
+        if (newValue) {
+            this.show();
+        }
+        else {
+            this.hide();
+        }
+    }
+    validateDisabled(newValue) {
+        if (this.hasCustomTabIndex) {
+            if (newValue)
+                this.tooltipedElement.removeAttribute('tabindex');
+            else if (this.tooltipedElement.getAttribute('tabindex') === null)
+                this.tooltipedElement.setAttribute('tabindex', '0');
+        }
+    }
     /**
-     * Action for tooltip element and tooltiped element mouse listener
-     * @param elementGuard -  tooltip element guard
-     * @param isMouseenter - mouseenter validation
-     * @param conditionalGuard - guard condition
+     * Render tooltip content element
      */
-    this.tooltipMouseListenerAction = (elementGuard, isMouseenter, conditionalGuard) => {
-      // we mutate elementGuard
-      if (this.guard !== Guard.FOCUS) {
-        this.guard = elementGuard;
-        if (!isMouseenter) {
-          setTimeout(() => {
-            this.setDisplay(isMouseenter, this.guard !== conditionalGuard);
-            this.resetGuard();
-          }, 100);
+    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);
+            const arrow = document.createElement('div');
+            arrow.setAttribute('slot', 'arrow');
+            arrow.dataset.popperArrow = '';
+            mgTooltipContent.appendChild(arrow);
+            // append tooltip element to component
+            this.element.appendChild(mgTooltipContent);
         }
-        else if (this.guard === Guard.HOVER_TOOLTIPED_ELEMENT) {
-          this.setDisplay(isMouseenter);
+        else {
+            mgTooltipContent.setAttribute('id', this.identifier);
         }
-      }
-    };
+    }
+    /*************
+     * Lifecycle *
+     *************/
     /**
-     * Method to reset guard value
+     * set variables
      */
-    this.resetGuard = () => {
-      this.guard = undefined;
-    };
+    componentWillLoad() {
+        // Get windows to attach events
+        this.windows = getWindows(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();
+    }
     /**
-     * Update slot content when it is a mg-button
-     * @param mgButton - slotted mg-button
+     * 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)
      */
-    this.setMgButtonWrapper = (mgButton) => {
-      if (mgButton.disabled) {
-        const div = document.createElement('div');
-        div.classList.add('mg-c-tooltip__mg-button-wrapper');
-        mgButton.parentNode.insertBefore(div, mgButton);
-        div.appendChild(mgButton);
-        this.tooltipedElement = div;
-      }
-      else if (mgButton.parentElement.classList.contains('mg-c-tooltip__mg-button-wrapper')) {
-        this.element.firstElementChild.replaceWith(mgButton);
-        this.tooltipedElement = mgButton;
-      }
-    };
+    componentDidLoad() {
+        var _a;
+        // get slotted element wich is not the tooltip
+        const slotElement = this.element.querySelector(`*:not(#${this.identifier})`);
+        // Get interactive element
+        const interactiveElement = slotElement.matches(focusableElements) ? slotElement : (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(focusableElements);
+        // define selected element to become tooltip selector
+        this.tooltipedElement = 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.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.setMgButtonWrapper(slotElement);
+        }
+        // Init Tooltip
+        this.initTooltip(slotElement, interactiveElement);
+        this.handleDisplay(this.display);
+    }
     /**
-     * Init tooltip
-     * @param slotElement - slotted element
-     * @param interactiveElement - interactive element
+     * update popper position after props change on component did update hook to benefit from render ended
      */
-    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(' ')}`);
-      }
-      // Create popperjs tooltip
-      this.popper = createPopper(this.tooltipedElement, this.mgTooltipContent, {
-        placement: this.placement,
-        strategy: 'fixed',
-        modifiers: [
-          {
-            name: 'offset',
-            options: {
-              offset: [0, 8],
-            },
-          },
-          {
-            name: 'flip',
-            options: {
-              fallbackPlacements: ['auto'],
-            },
-          },
-        ],
-      });
-      // Manage tooltipedElement focus/blur events
-      this.tooltipedElement.addEventListener('focus', () => {
-        this.guard = Guard.FOCUS;
-        this.setDisplay(true);
-      });
-      // as `click` event is the composition of `mousedown` and `mouseup` event,
-      // and `click` event trigger `focus` event after a success `mousedown` wich set the `guard` to `Guard.FOCUS`
-      // we reset the guard on `mouseup` event to unlock tooltip
-      this.tooltipedElement.addEventListener('mouseup', () => {
-        this.resetGuard();
-      });
-      this.tooltipedElement.addEventListener('blur', () => {
-        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.identifier = createID('mg-tooltip');
-    this.message = undefined;
-    this.placement = 'bottom';
-    this.display = false;
-    this.disabled = false;
-  }
-  validateIdentifier() {
-    // use renderTooltipContent to update tooltip-content id
-    this.renderTooltipContent();
-  }
-  validateMessage(newValue) {
-    if (!isValidString(newValue)) {
-      throw new Error('<mg-tooltip> prop "message" is required.');
+    componentDidUpdate() {
+        this.popper.update();
     }
-    this.mgTooltipContent.message = newValue;
-  }
-  handleDisplay(newValue) {
-    if (newValue) {
-      this.show();
-    }
-    else {
-      this.hide();
+    /**
+     * Render
+     * @returns HTML Element
+     */
+    render() {
+        return (h(Host, null, h("slot", null), h("slot", { name: "content" })));
     }
-  }
-  validateDisabled(newValue) {
-    if (this.hasCustomTabIndex) {
-      if (newValue)
-        this.tooltipedElement.removeAttribute('tabindex');
-      else if (this.tooltipedElement.getAttribute('tabindex') === null)
-        this.tooltipedElement.setAttribute('tabindex', '0');
+    static get is() { return "mg-tooltip"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-tooltip.css"]
+        };
     }
-  }
-  /**
-   * Render tooltip content element
-   */
-  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);
-      const arrow = document.createElement('div');
-      arrow.setAttribute('slot', 'arrow');
-      arrow.dataset.popperArrow = '';
-      mgTooltipContent.appendChild(arrow);
-      // append tooltip element to component
-      this.element.appendChild(mgTooltipContent);
+    static get styleUrls() {
+        return {
+            "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-tooltip.css"]
+        };
     }
-    else {
-      mgTooltipContent.setAttribute('id', this.identifier);
+    static get properties() {
+        return {
+            "identifier": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets an `id` attribute.\nNeeded by the input for accessibility `aria-decribedby`."
+                },
+                "attribute": "identifier",
+                "reflect": false,
+                "defaultValue": "createID('mg-tooltip')"
+            },
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Displayed message in the tooltip"
+                },
+                "attribute": "message",
+                "reflect": false
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Placement",
+                    "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "Placement": {
+                            "location": "import",
+                            "path": "@popperjs/core",
+                            "id": "../../node_modules/.pnpm/@popperjs+core@2.11.8/node_modules/@popperjs/core/index.d.ts::Placement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip placement"
+                },
+                "attribute": "placement",
+                "reflect": false,
+                "defaultValue": "'bottom'"
+            },
+            "display": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Display tooltip"
+                },
+                "attribute": "display",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disable tooltip"
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
     }
-  }
-  /*************
-   * Lifecycle *
-   *************/
-  /**
-   * set variables
-   */
-  componentWillLoad() {
-    // Get windows to attach events
-    this.windows = getWindows(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();
-  }
-  /**
-   * 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)
-   */
-  componentDidLoad() {
-    var _a;
-    // get slotted element wich is not the tooltip
-    const slotElement = this.element.querySelector(`*:not(#${this.identifier})`);
-    // Get interactive element
-    const interactiveElement = slotElement.matches(focusableElements) ? slotElement : (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(focusableElements);
-    // define selected element to become tooltip selector
-    this.tooltipedElement = 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.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.setMgButtonWrapper(slotElement);
+    static get elementRef() { return "element"; }
+    static get watchers() {
+        return [{
+                "propName": "identifier",
+                "methodName": "validateIdentifier"
+            }, {
+                "propName": "message",
+                "methodName": "validateMessage"
+            }, {
+                "propName": "display",
+                "methodName": "handleDisplay"
+            }, {
+                "propName": "disabled",
+                "methodName": "validateDisabled"
+            }];
     }
-    // Init Tooltip
-    this.initTooltip(slotElement, interactiveElement);
-    this.handleDisplay(this.display);
-  }
-  /**
-   * update popper position after props change on component did update hook to benefit from render ended
-   */
-  componentDidUpdate() {
-    this.popper.update();
-  }
-  /**
-   * Render
-   * @returns HTML Element
-   */
-  render() {
-    return (h(Host, null, h("slot", null), h("slot", { name: "content" })));
-  }
-  static get is() { return "mg-tooltip"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-tooltip.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-tooltip.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "identifier": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Sets an `id` attribute.\nNeeded by the input for accessibility `aria-decribedby`."
-        },
-        "attribute": "identifier",
-        "reflect": false,
-        "defaultValue": "createID('mg-tooltip')"
-      },
-      "message": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": true,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Displayed message in the tooltip"
-        },
-        "attribute": "message",
-        "reflect": false
-      },
-      "placement": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "Placement",
-          "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
-          "references": {
-            "Placement": {
-              "location": "import",
-              "path": "@popperjs/core",
-              "id": "../../node_modules/.pnpm/@popperjs+core@2.11.8/node_modules/@popperjs/core/index.d.ts::Placement"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Tooltip placement"
-        },
-        "attribute": "placement",
-        "reflect": false,
-        "defaultValue": "'bottom'"
-      },
-      "display": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Display tooltip"
-        },
-        "attribute": "display",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Disable tooltip"
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get elementRef() { return "element"; }
-  static get watchers() {
-    return [{
-        "propName": "identifier",
-        "methodName": "validateIdentifier"
-      }, {
-        "propName": "message",
-        "methodName": "validateMessage"
-      }, {
-        "propName": "display",
-        "methodName": "handleDisplay"
-      }, {
-        "propName": "disabled",
-        "methodName": "validateDisabled"
-      }];
-  }
 }
 //# sourceMappingURL=mg-tooltip.js.map