@mgdis/mg-components 3.1.0

package/dist/components/mg-popover.js

@@ -0,0 +1,183 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as createID } from './components.utils.js';
+import { m as messages } from './index2.js';
+import { d as defineCustomElement$3 } from './mg-button2.js';
+import { d as defineCustomElement$2 } from './mg-icon2.js';
+import { c as createPopper } from './popper.js';
+
+const mgPopoverCss = "mg-popover.sc-mg-popover{display:contents}mg-popover.sc-mg-popover-s>*{display:inline-block}.mg-popover.sc-mg-popover{display:none;padding:1.5rem;z-index:9999;border-radius:0.5rem;background-color:hsl(var(--mg-popover-background-color));-webkit-box-shadow:0 0.3rem 0.8rem 0 rgba(0, 0, 0, 0.1);box-shadow:0 0.3rem 0.8rem 0 rgba(0, 0, 0, 0.1);color:hsl(var(--mg-popover-font-color))}.mg-popover[data-show].sc-mg-popover{display:block}.mg-popover.sc-mg-popover mg-button.sc-mg-popover{float:right;margin-right:calc(0rem - (var(--default-size) - var(--mg-icon-regular-size)) / 2);margin-top:calc(0rem - (var(--default-size) - var(--mg-popover-title-font-size) * var(--line-height)) / 2);margin-left:3rem}.mg-popover.sc-mg-popover .mg-popover__arrow.sc-mg-popover,.mg-popover.sc-mg-popover .mg-popover__arrow.sc-mg-popover::before{position:absolute;width:2rem;height:2rem;z-index:9999;background:inherit}.mg-popover.sc-mg-popover .mg-popover__arrow.sc-mg-popover{visibility:hidden}.mg-popover.sc-mg-popover .mg-popover__arrow.sc-mg-popover::before{visibility:visible;content:\"\";-webkit-transform:rotate(45deg);transform:rotate(45deg)}.mg-popover[data-popper-placement^=top].sc-mg-popover>.mg-popover__arrow.sc-mg-popover{bottom:-6px}.mg-popover[data-popper-placement^=bottom].sc-mg-popover>.mg-popover__arrow.sc-mg-popover{top:-6px}.mg-popover[data-popper-placement^=left].sc-mg-popover>.mg-popover__arrow.sc-mg-popover{right:-6px}.mg-popover[data-popper-placement^=right].sc-mg-popover>.mg-popover__arrow.sc-mg-popover{left:-6px}.mg-popover__title.sc-mg-popover-s>*,.mg-popover__title .sc-mg-popover-s>*{margin:0 0 1rem;font-size:var(--mg-popover-title-font-size);font-weight:600}";
+
+const MgPopover$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.closeButtonId = '';
+    /**
+     * Sets an `id` attribute.
+     * Needed by the input for accessibility `aria-decribedby`.
+     */
+    this.identifier = createID('mg-popover');
+    /**
+     * Popover placement
+     */
+    this.placement = 'bottom';
+    /**
+     * Define if popover has a cross button
+     */
+    this.closeButton = false;
+    /**
+     * Display popover
+     */
+    this.display = false;
+    /**
+     * Disable popover
+     */
+    this.disabled = false;
+    /**
+     * Check if clicked outside of component
+     * @param e {event}
+     */
+    // Unable to trigger document events in unit tests:  https://gitlab.mgdis.fr/core/core-ui/mg-components/-/issues/57
+    /* istanbul ignore next */
+    this.clickOutside = e => {
+      var _a;
+      if (!this.disabled && ((_a = e.target.closest(`#${this.identifier}`)) === null || _a === void 0 ? void 0 : _a.parentElement.nodeName) !== 'MG-POPOVER') {
+        this.display = false;
+      }
+    };
+    /**
+     * Show popover
+     * @returns {void}
+     */
+    this.show = () => {
+      // Make the popover visible
+      this.popover.setAttribute('data-show', '');
+      // Enable the event listeners
+      this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
+      // Update its position
+      this.popper.update();
+      // hide when click outside
+      // setTimeout is used to prevent event to trigger after creation
+      setTimeout(() => {
+        // Unable to trigger document events in unit tests:  https://gitlab.mgdis.fr/core/core-ui/mg-components/-/issues/57
+        /* istanbul ignore next */
+        document.addEventListener('click', this.clickOutside, false);
+      }, 0);
+    };
+    /**
+     * Hide popover
+     * @returns {void}
+     */
+    this.hide = () => {
+      // Hide the popover
+      this.popover.removeAttribute('data-show');
+      // Disable the event listeners
+      this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }] })));
+      // Remove even listener
+      document.removeEventListener('click', this.clickOutside, false);
+    };
+    /**
+     * Handle action for close button
+     * @returns {void}
+     */
+    this.handleCloseButton = () => {
+      this.display = false;
+    };
+  }
+  handleDisplay(newVal) {
+    if (newVal) {
+      this.show();
+    }
+    else {
+      this.hide();
+    }
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  componentDidLoad() {
+    //Check if slotted title is a heading
+    const headingElements = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+    const slotedTitleElement = this.element.querySelector('[slot="title"]');
+    if (slotedTitleElement !== null && !headingElements.includes(slotedTitleElement.tagName.toLowerCase())) {
+      throw new Error(`<mg-popover> Slotted title must be a heading:  ${headingElements.join(', ')}.`);
+    }
+    // Set close button id
+    if (this.closeButton) {
+      this.closeButtonId = `${this.identifier}-close-button`;
+    }
+    // Get popover content
+    this.popover = this.element.querySelector(`#${this.identifier}`);
+    //Get interactive element
+    const interactiveElement = this.element.firstElementChild;
+    // Add aria attributes
+    interactiveElement.setAttribute('aria-controls', this.identifier);
+    interactiveElement.setAttribute('aria-expanded', `${this.display}`);
+    // Create popperjs popover
+    this.popper = createPopper(interactiveElement, this.popover, {
+      placement: this.placement,
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: [0, 10],
+          },
+        },
+      ],
+    });
+    // Add events to toggle display
+    interactiveElement.addEventListener('click', () => {
+      if (!this.disabled)
+        this.display = !this.display;
+    });
+    // Add events to hide popover
+    this.element.addEventListener('keydown', e => {
+      if (!this.disabled && e.code === 'Escape')
+        this.display = false;
+    });
+    this.handleDisplay(this.display);
+  }
+  render() {
+    return (h(Host, null, h("slot", null), h("div", { id: this.identifier, class: "mg-popover" }, !this.disabled && this.closeButton && (h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: messages.popover.closeButton, onClick: this.handleCloseButton }, h("mg-icon", { icon: "cross" }))), h("div", { class: "mg-popover__title" }, h("slot", { name: "title" })), h("slot", { name: "content" }), h("div", { class: "mg-popover__arrow", "data-popper-arrow": true }))));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "display": ["handleDisplay"]
+  }; }
+  static get style() { return mgPopoverCss; }
+}, [6, "mg-popover", {
+    "identifier": [1],
+    "placement": [1],
+    "closeButton": [4, "close-button"],
+    "display": [1028],
+    "disabled": [1028]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["mg-popover", "mg-button", "mg-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "mg-popover":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, MgPopover$1);
+      }
+      break;
+    case "mg-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "mg-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const MgPopover = MgPopover$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { MgPopover, defineCustomElement };

package/dist/components/mg-tabs.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface MgTabs extends Components.MgTabs, HTMLElement {}
+export const MgTabs: {
+  prototype: MgTabs;
+  new (): MgTabs;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/mg-tabs.js

@@ -0,0 +1,160 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as createID, C as ClassList, a as allItemsAreString } from './components.utils.js';
+import { d as defineCustomElement$3 } from './mg-badge2.js';
+import { d as defineCustomElement$2 } from './mg-icon2.js';
+
+const mgTabsCss = ".mg-tabs__header.sc-mg-tabs{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}.mg-tabs__navigation-button.sc-mg-tabs{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-column-gap:0.5rem;-moz-column-gap:0.5rem;column-gap:0.5rem;padding:1.8rem 2.4rem 1.5rem;background:none;border:none;border-bottom:0.3rem solid transparent;color:hsl(var(--color-dark));line-height:var(--line-height);cursor:pointer}.mg-tabs__navigation-button.sc-mg-tabs:hover,.mg-tabs__navigation-button.sc-mg-tabs:focus{background-color:hsla(var(--color-info-h), var(--color-info-s), var(--color-info-l), 10%)}.mg-tabs__navigation-button.mg-tabs__navigation-button--active.sc-mg-tabs{color:hsl(var(--color-info));border-bottom-color:hsl(var(--color-info));font-weight:700}.mg-tabs__content-container.sc-mg-tabs:focus-visible{outline-color:transparent}";
+
+/**
+ * type TabItem validation function
+ * @param tab
+ * @returns {boolean}
+ */
+const isTabItem = (tab) => typeof tab === 'object' && typeof tab.label === 'string';
+const MgTabs$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    /**
+     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+     * If not set, it will be created.
+     */
+    this.identifier = createID('mg-tabs');
+    /**
+     * Active tab number
+     * default: first is 1
+     */
+    this.activeTab = 1;
+    /**
+     * Component tabs
+     */
+    this.tabs = [];
+    /**
+     * Component classes
+     */
+    this.classList = new ClassList(['mg-tabs']);
+    /**
+     * Handle click events on tabs
+     * @param event
+     */
+    this.handleClick = (event) => {
+      const tabId = event.currentTarget.getAttribute('data-index');
+      this.activeTab = Number(tabId);
+    };
+    /**
+     * Handle keyboard event on tabs
+     * @param event
+     */
+    this.handleKeydown = (event) => {
+      let selectedTab;
+      let tabId = Number(event.target.getAttribute('data-index'));
+      const parent = event.target.parentElement;
+      // change selected id from key code
+      // /* IE FIX */ delete 'Right'
+      if (['ArrowRight', 'Right'].includes(event.key)) {
+        tabId++;
+        // /* IE FIX */ delete 'Left'
+      }
+      else if (['ArrowLeft', 'Left'].includes(event.key)) {
+        tabId--;
+      }
+      // get selected tab
+      selectedTab = parent.querySelector(`[data-index="${tabId}"]`);
+      // apply selected tab if exist
+      if (selectedTab !== null) {
+        selectedTab.focus();
+        this.activeTab = tabId;
+      }
+    };
+    /**
+     * Validate slots setting
+     */
+    this.validateSlots = () => {
+      const slots = Array.from(this.element.children).filter(slot => { var _a; return (_a = slot.getAttribute('slot')) === null || _a === void 0 ? void 0 : _a.includes('tab_content-'); });
+      if (slots.length !== this.tabs.length) {
+        throw new Error('<mg-tabs> Must have slots counts equal to tabs count.');
+      }
+    };
+  }
+  validateItems(newValue) {
+    // String array
+    if (allItemsAreString(newValue)) {
+      this.tabs = newValue.map(item => ({ label: item }));
+    }
+    // Object array
+    else if (newValue && newValue.every(item => isTabItem(item))) {
+      this.tabs = newValue;
+    }
+    else {
+      throw new Error('<mg-tabs> prop "items" is required and all items must be the same type: TabItem.');
+    }
+  }
+  validateActiveTab(newValue) {
+    if (Number(newValue) < 1 || Number(newValue) > this.tabs.length) {
+      throw new Error('<mg-tabs> prop "activeTab" must be between 1 and tabs length.');
+    }
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Check if component props are well configured on init
+   */
+  componentWillLoad() {
+    // Check tabs format
+    this.validateItems(this.items);
+    this.validateActiveTab(this.activeTab);
+    this.validateSlots();
+  }
+  render() {
+    return (h(Host, null, h("header", { role: "tablist", "aria-label": this.label, class: "mg-tabs__header" }, this.tabs.map((tab, index) => {
+      const tabIndex = index + 1;
+      return (h("button", { role: "tab", id: `${this.identifier}-${tabIndex}`, class: `mg-tabs__navigation-button ${tabIndex === this.activeTab ? 'mg-tabs__navigation-button--active' : ''}`, tabindex: tabIndex === this.activeTab ? 0 : -1, "aria-selected": (tabIndex === this.activeTab).toString(), "aria-controls": `pannel-${tabIndex}`, onClick: this.handleClick, onKeyDown: this.handleKeydown, "data-index": tabIndex }, tab.icon !== undefined && h("mg-icon", { icon: tab.icon }), tab.label, tab.badge !== undefined && h("mg-badge", { variant: "info", value: tab.badge.value, label: tab.badge.label })));
+    })), this.tabs.map((_tab, index) => {
+      const tabIndex = index + 1;
+      return (h("article", { role: "tabpanel", id: `pannel-${tabIndex}`, hidden: tabIndex !== this.activeTab, "aria-labelledby": `${this.identifier}-${this.activeTab}`, tabindex: tabIndex === this.activeTab ? 0 : -1, class: "mg-tabs__content-container" }, h("slot", { name: `tab_content-${tabIndex}` })));
+    })));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "items": ["validateItems"],
+    "activeTab": ["validateActiveTab"]
+  }; }
+  static get style() { return mgTabsCss; }
+}, [6, "mg-tabs", {
+    "identifier": [1],
+    "label": [1],
+    "items": [16],
+    "activeTab": [1538, "active-tab"],
+    "tabs": [32],
+    "classList": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["mg-tabs", "mg-badge", "mg-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "mg-tabs":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, MgTabs$1);
+      }
+      break;
+    case "mg-badge":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "mg-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const MgTabs = MgTabs$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { MgTabs, defineCustomElement };

package/dist/components/mg-tag.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface MgTag extends Components.MgTag, HTMLElement {}
+export const MgTag: {
+  prototype: MgTag;
+  new (): MgTag;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/mg-tag.js

@@ -0,0 +1,76 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { C as ClassList } from './components.utils.js';
+
+/**
+ * List of all possibles variants
+ */
+const variants = ['primary', 'secondary', 'success', 'warning', 'danger', 'info'];
+
+const mgTagCss = ".mg-tag{padding:calc((var(--mg-tag-height) - 0.2rem - var(--mg-tag-font-size) * var(--line-height)) / 2) 0.6rem;min-height:var(--mg-tag-height);-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:var(--mg-tag-border-radius);border:0.1rem solid;font-size:var(--mg-tag-font-size);font-weight:600;text-align:center}.mg-tag.mg-tag--primary{background-color:hsl(var(--color-dark));border-color:hsl(var(--color-dark));color:hsl(var(--color-light))}.mg-tag.mg-tag--primary.mg-tag--outline{background-color:transparent;color:hsl(var(--color-dark))}.mg-tag.mg-tag--secondary{background-color:hsl(var(--color-light));border-color:hsl(var(--color-light));color:hsl(var(--color-dark))}.mg-tag.mg-tag--secondary.mg-tag--outline{background-color:transparent;color:hsl(var(--color-light))}.mg-tag.mg-tag--success{background-color:hsl(var(--color-success));border-color:hsl(var(--color-success));color:hsl(var(--color-dark))}.mg-tag.mg-tag--success.mg-tag--outline{background-color:transparent;color:hsl(var(--color-success))}.mg-tag.mg-tag--warning{background-color:hsl(var(--color-warning));border-color:hsl(var(--color-warning));color:hsl(var(--color-dark))}.mg-tag.mg-tag--warning.mg-tag--outline{background-color:transparent;color:hsl(var(--color-warning))}.mg-tag.mg-tag--danger{background-color:hsl(var(--color-danger));border-color:hsl(var(--color-danger));color:hsl(var(--color-light))}.mg-tag.mg-tag--danger.mg-tag--outline{background-color:transparent;color:hsl(var(--color-danger))}.mg-tag.mg-tag--info{background-color:hsl(var(--color-info));border-color:hsl(var(--color-info));color:hsl(var(--color-light))}.mg-tag.mg-tag--info.mg-tag--outline{background-color:transparent;color:hsl(var(--color-info))}.mg-tag,mg-tag{display:inline-block;vertical-align:middle}";
+
+const MgTag$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Define button variant
+     */
+    this.variant = variants[0];
+    /**
+     * Component classes
+     */
+    this.classList = new ClassList(['mg-tag']);
+  }
+  validateVariant(newValue) {
+    if (!variants.includes(newValue)) {
+      throw new Error(`<mg-tag> prop "variant" must be one of : ${variants.join(', ')}.`);
+    }
+    this.classList.add(`mg-tag--${this.variant}`);
+  }
+  validateOutline(newValue) {
+    if (newValue)
+      this.classList.add(`mg-tag--outline`);
+  }
+  /**
+   * Check if props are well configured on init
+   */
+  componentWillLoad() {
+    this.validateVariant(this.variant);
+    this.validateOutline(this.outline);
+  }
+  /**
+   * Render
+   */
+  render() {
+    return (h("span", { class: this.classList.join() }, h("slot", null)));
+  }
+  static get watchers() { return {
+    "variant": ["validateVariant"],
+    "outline": ["validateOutline"]
+  }; }
+  static get style() { return mgTagCss; }
+}, [1, "mg-tag", {
+    "variant": [1],
+    "outline": [4],
+    "classList": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["mg-tag"];
+  components.forEach(tagName => { switch (tagName) {
+    case "mg-tag":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, MgTag$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const MgTag = MgTag$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { MgTag, defineCustomElement };

package/dist/components/mg-tooltip.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface MgTooltip extends Components.MgTooltip, HTMLElement {}
+export const MgTooltip: {
+  prototype: MgTooltip;
+  new (): MgTooltip;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/mg-tooltip.js

@@ -0,0 +1,6 @@
+import { M as MgTooltip$1, d as defineCustomElement$1 } from './mg-tooltip2.js';
+
+const MgTooltip = MgTooltip$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { MgTooltip, defineCustomElement };

package/dist/components/mg-tooltip2.js

@@ -0,0 +1,150 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as createID } from './components.utils.js';
+import { c as createPopper } from './popper.js';
+
+const mgTooltipCss = ".sc-mg-tooltip-h{display:inline-block}.mg-tooltip.sc-mg-tooltip{display:none;padding:0.5rem 0.8rem;z-index:9999;border-radius:var(--mg-tooltip-border-radius);background-color:hsl(var(--mg-tooltip-background-color));color:hsl(var(--mg-tooltip-font-color));text-align:start}.mg-tooltip[data-show].sc-mg-tooltip{display:block}.mg-tooltip.sc-mg-tooltip .mg-tooltip__arrow.sc-mg-tooltip,.mg-tooltip.sc-mg-tooltip .mg-tooltip__arrow.sc-mg-tooltip::before{position:absolute;width:0.8rem;height:0.8rem;z-index:9999;background:inherit}.mg-tooltip.sc-mg-tooltip .mg-tooltip__arrow.sc-mg-tooltip{visibility:hidden}.mg-tooltip.sc-mg-tooltip .mg-tooltip__arrow.sc-mg-tooltip::before{visibility:visible;content:\"\";-webkit-transform:rotate(45deg);transform:rotate(45deg)}.mg-tooltip[data-popper-placement^=top].sc-mg-tooltip>.mg-tooltip__arrow.sc-mg-tooltip{bottom:-4px}.mg-tooltip[data-popper-placement^=bottom].sc-mg-tooltip>.mg-tooltip__arrow.sc-mg-tooltip{top:-4px}.mg-tooltip[data-popper-placement^=left].sc-mg-tooltip>.mg-tooltip__arrow.sc-mg-tooltip{right:-4px}.mg-tooltip[data-popper-placement^=right].sc-mg-tooltip>.mg-tooltip__arrow.sc-mg-tooltip{left:-4px}";
+
+const MgTooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    /**
+     * Sets an `id` attribute.
+     * Needed by the input for accessibility `aria-decribedby`.
+     */
+    this.identifier = createID('mg-tooltip');
+    /**
+     * Tooltip placement
+     */
+    this.placement = 'bottom';
+    /**
+     * Display tooltip
+     */
+    this.display = false;
+    /**
+     * Disable tooltip
+     */
+    this.disabled = false;
+    /**
+     * Show tooltip
+     * @returns {void}
+     */
+    this.show = () => {
+      // Make the tooltip visible
+      this.tooltip.setAttribute('data-show', '');
+      // Enable the event listeners
+      this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
+      // Update its position
+      this.popper.update();
+    };
+    /**
+     * Hide tooltip
+     * @returns {void}
+     */
+    this.hide = () => {
+      // Hide the tooltip
+      this.tooltip.removeAttribute('data-show');
+      // Disable the event listeners
+      this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }] })));
+    };
+  }
+  handleDisplay(newVal) {
+    if (newVal) {
+      this.show();
+    }
+    else {
+      this.hide();
+    }
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Get slotted element
+   * Check if it already contain an interactive element, if not we need to add a tabIndex attribute
+   * We need to attach the focused element to the tooltip (aria-describedby)
+   */
+  componentDidLoad() {
+    var _a;
+    // Get tooltip element
+    this.tooltip = this.element.querySelector(`#${this.identifier}`);
+    // get slotted element
+    const slotElement = this.element.firstElementChild;
+    // Get interactive element
+    const interactiveElements = ['a', 'button', 'input', 'textarea', 'select']; //! Might needs updates
+    const interactiveElement = this.element.querySelector(interactiveElements.join(',')) || ((_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(interactiveElements.join(',')));
+    // define selected element to become tooltip selector
+    const tooltipedElement = interactiveElement || slotElement;
+    // Add tabindex to slotted element if we can't find any interactive element
+    if (interactiveElement === null || interactiveElement === undefined)
+      slotElement.tabIndex = 0;
+    // Set aria-describedby
+    const ariaDescribedby = slotElement.getAttribute('aria-describedby');
+    if (ariaDescribedby === null) {
+      tooltipedElement.setAttribute('aria-describedby', this.identifier);
+    }
+    else {
+      slotElement.setAttribute('aria-describedby', `${ariaDescribedby} ${this.identifier}`);
+    }
+    // Create popperjs tooltip
+    this.popper = createPopper(tooltipedElement, this.tooltip, {
+      placement: this.placement,
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: [0, 8],
+          },
+        },
+      ],
+    });
+    // Add events
+    ['mouseenter', 'focus'].forEach(event => {
+      tooltipedElement.addEventListener(event, () => {
+        if (!this.disabled)
+          this.display = true;
+      });
+    });
+    ['mouseleave', 'blur', 'keydown'].forEach(event => {
+      tooltipedElement.addEventListener(event, (e) => {
+        // we continue to process ONLY for KeyboardEvents 'Escape'
+        if (e.type === 'keydown' && e.code !== 'Escape') {
+          return;
+        }
+        if (!this.disabled)
+          this.display = false;
+      });
+    });
+    this.handleDisplay(this.display);
+  }
+  render() {
+    return (h(Host, null, h("slot", null), h("div", { role: "tooltip", id: this.identifier, class: "mg-tooltip", innerHTML: this.message }, h("div", { class: "mg-tooltip__arrow", "data-popper-arrow": true }))));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "display": ["handleDisplay"]
+  }; }
+  static get style() { return mgTooltipCss; }
+}, [6, "mg-tooltip", {
+    "identifier": [1],
+    "message": [1],
+    "placement": [1],
+    "display": [1028],
+    "disabled": [1028]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["mg-tooltip"];
+  components.forEach(tagName => { switch (tagName) {
+    case "mg-tooltip":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, MgTooltip);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { MgTooltip as M, defineCustomElement as d };