@mgdis/mg-components 5.14.0 → 5.16.0

package/dist/collection/components/molecules/mg-popover/mg-popover-content/mg-popover-content.css

@@ -0,0 +1,135 @@
+:host {
+  display: none;
+  padding: 1rem;
+  z-index: 2000;
+  color: hsl(var(--mg-popover-font-color));
+  position: relative;
+}
+
+:host([data-show]) {
+  display: block;
+}
+
+:host([data-popper-placement^=left-start]),
+:host([data-popper-placement^=left-end]),
+:host([data-popper-placement^=right-start]),
+:host([data-popper-placement^=right-end]) {
+  padding: 0 1rem;
+}
+
+.mg-popover-content {
+  --mg-card-max-width: var(--mg-popover-max-width);
+  --mg-card-min-width: var(--mg-popover-min-width);
+}
+.mg-popover-content mg-button {
+  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-content__title ::slotted([slot=title]) {
+  margin: 0 0 1rem !important;
+  font-size: var(--mg-popover-title-font-size) !important;
+  font-weight: 600;
+}
+.mg-popover-content ::slotted(*) {
+  --mg-card-border: var(--mg-card-border-default);
+  --mg-card-padding: var(--mg-card-padding-default);
+  --mg-card-border-radius: var(--mg-card-border-radius-default);
+  --mg-card-background: var(--mg-card-background-default);
+  --mg-card-box-shadow: var(--mg-card-box-shadow-default);
+  --mg-card-max-width: unset;
+  --mg-card-min-width: unset;
+}
+
+/**
+* Arrow hide
+*/
+:host([data-popper-placement^=top][data-arrow-hide]) {
+  padding-bottom: 0;
+}
+
+:host([data-popper-placement^=bottom][data-arrow-hide]) {
+  padding-top: 0;
+}
+
+:host([data-popper-placement$=end][data-arrow-hide]),
+:host([data-popper-placement^=left][data-arrow-hide]) {
+  padding-right: 0;
+}
+
+:host([data-popper-placement$=start][data-arrow-hide]),
+:host([data-popper-placement^=right][data-arrow-hide]) {
+  padding-left: 0;
+}
+
+/**
+* Arrow style
+*/
+::slotted([slot=arrow]) {
+  position: absolute;
+  visibility: hidden;
+  width: calc(3rem + 2 * var(--mg-card-border-radius) + 2rem);
+  height: calc(3rem + 2 * var(--mg-card-border-radius) + 2rem);
+  /**
+  * Arrow position
+  */
+}
+::slotted([slot=arrow]):before {
+  visibility: visible;
+  content: "";
+  position: absolute;
+}
+:host([data-arrow-hide]) ::slotted([slot=arrow]) {
+  display: none;
+}
+:host([data-popper-placement^=top]) ::slotted([slot=arrow]), :host([data-popper-placement^=bottom]) ::slotted([slot=arrow]) {
+  height: 1rem;
+}
+:host([data-popper-placement^=top]) ::slotted([slot=arrow]):before, :host([data-popper-placement^=bottom]) ::slotted([slot=arrow]):before {
+  left: calc(var(--mg-card-border-radius) + 1rem);
+  border-right: calc(3rem / 2) solid transparent;
+  border-left: calc(3rem / 2) solid transparent;
+}
+:host([data-popper-placement^=top]) ::slotted([slot=arrow]) {
+  bottom: 0.1rem;
+  filter: drop-shadow(0 0.5rem 0.25rem hsl(var(--color-dark), 0.15));
+}
+:host([data-popper-placement^=top]) ::slotted([slot=arrow]):before {
+  border-top: 1rem solid hsl(var(--mg-popover-background-color));
+}
+:host([data-popper-placement^=bottom]) ::slotted([slot=arrow]) {
+  top: 0.1rem;
+  filter: drop-shadow(0 -0.5rem 0.25rem hsl(var(--color-dark), 0.15));
+}
+:host([data-popper-placement^=bottom]) ::slotted([slot=arrow]):before {
+  border-bottom: 1rem solid hsl(var(--mg-popover-background-color));
+}
+:host([data-popper-placement^=left]) ::slotted([slot=arrow]), :host([data-popper-placement^=right]) ::slotted([slot=arrow]) {
+  width: 1rem;
+}
+:host([data-popper-placement^=left]) ::slotted([slot=arrow]):before, :host([data-popper-placement^=right]) ::slotted([slot=arrow]):before {
+  top: calc(var(--mg-card-border-radius) + 1rem);
+  border-top: calc(3rem / 2) solid transparent;
+  border-bottom: calc(3rem / 2) solid transparent;
+}
+:host([data-popper-placement^=left]) ::slotted([slot=arrow]) {
+  right: 0.1rem;
+  filter: drop-shadow(0.5rem 0 0.25rem hsl(var(--color-dark), 0.15));
+}
+:host([data-popper-placement^=left]) ::slotted([slot=arrow]):before {
+  border-left: 1rem solid hsl(var(--mg-popover-background-color));
+}
+:host([data-popper-placement^=right]) ::slotted([slot=arrow]) {
+  left: 0.1rem;
+  filter: drop-shadow(-0.5rem 0 0.25rem hsl(var(--color-dark), 0.15));
+}
+:host([data-popper-placement^=right]) ::slotted([slot=arrow]):before {
+  border-right: 1rem solid hsl(var(--mg-popover-background-color));
+}
+:host([data-popper-placement^=left-start]) ::slotted([slot=arrow]), :host([data-popper-placement^=left-end]) ::slotted([slot=arrow]), :host([data-popper-placement^=right-start]) ::slotted([slot=arrow]), :host([data-popper-placement^=right-end]) ::slotted([slot=arrow]) {
+  height: calc(3rem + 2 * var(--mg-card-border-radius));
+}
+:host([data-popper-placement^=left-start]) ::slotted([slot=arrow]):before, :host([data-popper-placement^=left-end]) ::slotted([slot=arrow]):before, :host([data-popper-placement^=right-start]) ::slotted([slot=arrow]):before, :host([data-popper-placement^=right-end]) ::slotted([slot=arrow]):before {
+  top: var(--mg-card-border-radius);
+}

package/dist/collection/components/molecules/mg-popover/mg-popover-content/mg-popover-content.js

@@ -0,0 +1,100 @@
+import { Host, h } from '@stencil/core';
+import { isTagName, ClassList } from '../../../../utils/components.utils';
+import { initLocales } from '../../../../locales';
+export class MgPopoverContent {
+  constructor() {
+    /**
+     * Handle action for close button
+     */
+    this.handleCloseButton = () => {
+      this.hideContent.emit();
+    };
+    this.closeButton = false;
+    this.classCollection = new ClassList(['mg-popover-content']);
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Check if component props are valide
+   */
+  componentWillLoad() {
+    // Get locales
+    this.messages = initLocales(this.element).messages;
+  }
+  /**
+   * Check if component slots are valide
+   */
+  componentDidLoad() {
+    const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+    const slottedTitleElement = this.element.querySelector('[slot="title"]');
+    if (slottedTitleElement && !isTagName(slottedTitleElement, headingTags)) {
+      throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}`);
+    }
+  }
+  /**
+   * Render
+   * @returns HTML Element
+   */
+  render() {
+    return (h(Host, null, h("mg-card", { class: this.classCollection.join() }, this.closeButton && (h("mg-button", { "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { icon: "cross" }))), h("div", { class: "mg-popover-content__title" }, h("slot", { name: "title" })), h("slot", { name: "content" })), h("slot", { name: "arrow" })));
+  }
+  static get is() { return "mg-popover-content"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["mg-popover-content.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["mg-popover-content.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "closeButton": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define if popover has a cross button"
+        },
+        "attribute": "close-button",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "classCollection": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "hideContent",
+        "name": "hide-content",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emited event when close button is clicked"
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "element"; }
+}

package/dist/collection/components/molecules/mg-popover/mg-popover.css

@@ -8,115 +8,4 @@
 }
 :host::slotted(*) {
   display: inline-block;
-}
-
-.mg-popover {
-  display: none;
-  padding: 1rem;
-  z-index: 2000;
-  color: hsl(var(--mg-popover-font-color));
-}
-.mg-popover mg-card {
-  --mg-card-max-width: var(--mg-popover-max-width);
-  --mg-card-min-width: var(--mg-popover-min-width);
-  position: relative;
-}
-.mg-popover[data-show] {
-  display: block;
-}
-.mg-popover mg-button {
-  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__arrow {
-  position: absolute;
-  visibility: hidden;
-  width: calc(3rem + 2 * var(--mg-card-border-radius) + 2rem);
-  height: calc(3rem + 2 * var(--mg-card-border-radius) + 2rem);
-}
-.mg-popover__arrow:before {
-  visibility: visible;
-  content: "";
-  position: absolute;
-}
-.mg-popover[data-popper-placement^=top] > .mg-popover__arrow, .mg-popover[data-popper-placement^=bottom] > .mg-popover__arrow {
-  height: 1rem;
-}
-.mg-popover[data-popper-placement^=top] > .mg-popover__arrow:before, .mg-popover[data-popper-placement^=bottom] > .mg-popover__arrow:before {
-  left: calc(var(--mg-card-border-radius) + 1rem);
-  border-right: calc(3rem / 2) solid transparent;
-  border-left: calc(3rem / 2) solid transparent;
-}
-.mg-popover[data-popper-placement^=top] > .mg-popover__arrow {
-  bottom: 0.1rem;
-  filter: drop-shadow(0 0.5rem 0.25rem hsl(var(--color-dark), 0.15));
-}
-.mg-popover[data-popper-placement^=top] > .mg-popover__arrow:before {
-  border-top: 1rem solid hsl(var(--mg-popover-background-color));
-}
-.mg-popover[data-popper-placement^=bottom] > .mg-popover__arrow {
-  top: 0.1rem;
-  filter: drop-shadow(0 -0.5rem 0.25rem hsl(var(--color-dark), 0.15));
-}
-.mg-popover[data-popper-placement^=bottom] > .mg-popover__arrow:before {
-  border-bottom: 1rem solid hsl(var(--mg-popover-background-color));
-}
-.mg-popover[data-popper-placement^=left] > .mg-popover__arrow, .mg-popover[data-popper-placement^=right] > .mg-popover__arrow {
-  width: 1rem;
-}
-.mg-popover[data-popper-placement^=left] > .mg-popover__arrow:before, .mg-popover[data-popper-placement^=right] > .mg-popover__arrow:before {
-  top: calc(var(--mg-card-border-radius) + 1rem);
-  border-top: calc(3rem / 2) solid transparent;
-  border-bottom: calc(3rem / 2) solid transparent;
-}
-.mg-popover[data-popper-placement^=left] > .mg-popover__arrow {
-  right: 0.1rem;
-  filter: drop-shadow(0.5rem 0 0.25rem hsl(var(--color-dark), 0.15));
-}
-.mg-popover[data-popper-placement^=left] > .mg-popover__arrow:before {
-  border-left: 1rem solid hsl(var(--mg-popover-background-color));
-}
-.mg-popover[data-popper-placement^=right] > .mg-popover__arrow {
-  left: 0.1rem;
-  filter: drop-shadow(-0.5rem 0 0.25rem hsl(var(--color-dark), 0.15));
-}
-.mg-popover[data-popper-placement^=right] > .mg-popover__arrow:before {
-  border-right: 1rem solid hsl(var(--mg-popover-background-color));
-}
-.mg-popover[data-popper-placement^=left-start], .mg-popover[data-popper-placement^=left-end], .mg-popover[data-popper-placement^=right-start], .mg-popover[data-popper-placement^=right-end] {
-  padding: 0 1rem;
-}
-.mg-popover[data-popper-placement^=left-start] > .mg-popover__arrow, .mg-popover[data-popper-placement^=left-end] > .mg-popover__arrow, .mg-popover[data-popper-placement^=right-start] > .mg-popover__arrow, .mg-popover[data-popper-placement^=right-end] > .mg-popover__arrow {
-  height: calc(3rem + 2 * var(--mg-card-border-radius));
-}
-.mg-popover[data-popper-placement^=left-start] > .mg-popover__arrow:before, .mg-popover[data-popper-placement^=left-end] > .mg-popover__arrow:before, .mg-popover[data-popper-placement^=right-start] > .mg-popover__arrow:before, .mg-popover[data-popper-placement^=right-end] > .mg-popover__arrow:before {
-  top: var(--mg-card-border-radius);
-}
-.mg-popover__title ::slotted([slot=title]) {
-  margin: 0 0 1rem !important;
-  font-size: var(--mg-popover-title-font-size) !important;
-  font-weight: 600;
-}
-.mg-popover--arrow-hide.mg-popover[data-popper-placement^=top] {
-  padding-bottom: 0;
-}
-.mg-popover--arrow-hide.mg-popover[data-popper-placement^=bottom] {
-  padding-top: 0;
-}
-.mg-popover--arrow-hide.mg-popover[data-popper-placement$=end], .mg-popover--arrow-hide.mg-popover[data-popper-placement^=left] {
-  padding-right: 0;
-}
-.mg-popover--arrow-hide.mg-popover[data-popper-placement$=start], .mg-popover--arrow-hide.mg-popover[data-popper-placement^=right] {
-  padding-left: 0;
-}
-.mg-popover ::slotted(*) {
-  --mg-card-border: var(--mg-card-border-default);
-  --mg-card-padding: var(--mg-card-padding-default);
-  --mg-card-border-radius: var(--mg-card-border-radius-default);
-  --mg-card-background: var(--mg-card-background-default);
-  --mg-card-box-shadow: var(--mg-card-box-shadow-default);
-  --mg-card-max-width: unset;
-  --mg-card-min-width: unset;
 }

package/dist/collection/components/molecules/mg-popover/mg-popover.js

@@ -1,21 +1,15 @@
 import { Host, h } from '@stencil/core';
-import { createID, isTagName, getWindows, ClassList } from '../../../utils/components.utils';
+import { createID, getWindows } from '../../../utils/components.utils';
 import { createPopper } from '@popperjs/core';
-import { initLocales } from '../../../locales';
 export class MgPopover {
   constructor() {
-    this.closeButtonId = '';
-    // Classes
-    this.classArrowHide = `mg-popover--arrow-hide`;
     /**
      * Check if clicked outside of component
      * @param event - mouse event
      */
     this.clickOutside = (event) => {
-      var _a;
-      if (!this.disabled &&
-        event.target.closest('mg-popover') !== this.element &&
-        !(((_a = event.target.closest(`[data-mg-popover-guard]`)) === null || _a === void 0 ? void 0 : _a.dataset.mgPopoverGuard) === this.identifier)) {
+      const closestElement = event.target.closest(`[data-mg-popover-guard]`);
+      if (!this.disabled && event.target.closest('mg-popover') !== this.element && (closestElement === null || closestElement === void 0 ? void 0 : closestElement.dataset.mgPopoverGuard) !== this.identifier) {
         this.display = false;
       }
     };
@@ -49,24 +43,46 @@ export class MgPopover {
       });
     };
     /**
-     * Handle action for close button
+     * Handle content hide event
      */
-    this.handleCloseButton = () => {
+    this.handleHideContent = () => {
       this.display = false;
     };
+    /**
+     * Render popover content element
+     */
+    this.renderPopoverContent = () => {
+      this.mgPopoverContent = document.createElement('mg-popover-content');
+      this.mgPopoverContent.setAttribute('slot', 'content');
+      this.mgPopoverContent.setAttribute('id', this.identifier);
+      this.mgPopoverContent.addEventListener('hide-content', this.handleHideContent);
+      const arrow = document.createElement('div');
+      arrow.setAttribute('slot', 'arrow');
+      arrow.dataset.popperArrow = '';
+      this.mgPopoverContent.appendChild(arrow);
+      // insert elements in DOM
+      ['[slot="title"]', '[slot="content"]:not(mg-popover-content)'].forEach(slotType => {
+        Array.from(this.element.querySelectorAll(slotType)).forEach(slot => {
+          this.mgPopoverContent.appendChild(slot);
+        });
+      });
+      this.element.appendChild(this.mgPopoverContent);
+    };
     this.identifier = createID('mg-popover');
     this.placement = 'bottom';
     this.arrowHide = false;
     this.closeButton = false;
     this.display = false;
     this.disabled = false;
-    this.classCollection = new ClassList(['mg-popover']);
   }
   validateArrowHide(newValue) {
     if (newValue)
-      this.classCollection.add(this.classArrowHide);
+      this.mgPopoverContent.dataset.arrowHide = '';
     else
-      this.classCollection.delete(this.classArrowHide);
+      delete this.mgPopoverContent.dataset.arrowHide;
+  }
+  validateCloseButton(newValue) {
+    this.mgPopoverContent.closeButton = newValue;
   }
   handleDisplay(newValue) {
     if (newValue) {
@@ -92,25 +108,17 @@ export class MgPopover {
   componentWillLoad() {
     // Get windows to attach events
     this.windows = getWindows(window);
-    // Get locales
-    this.messages = initLocales(this.element).messages;
+    // render mg-popover-content slot
+    this.renderPopoverContent();
+    this.validateCloseButton(this.closeButton);
     this.validateArrowHide(this.arrowHide);
   }
   /**
    * Check if component props are well configured on init
    */
   componentDidLoad() {
-    const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
-    const slottedTitleElement = this.element.querySelector('[slot="title"]');
-    if (slottedTitleElement && !isTagName(slottedTitleElement, headingTags)) {
-      throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}`);
-    }
-    // Set close button id
-    if (this.closeButton) {
-      this.closeButtonId = `${this.identifier}-close-button`;
-    }
     // Get popover content
-    this.mgPopover = this.element.shadowRoot.getElementById(this.identifier);
+    this.mgPopover = this.element.querySelector(`#${this.identifier}`);
     //Get interactive element (first element without slot attribute)
     const interactiveElement = this.element.querySelector(':not([slot])');
     // Add aria attributes
@@ -129,17 +137,10 @@ export class MgPopover {
         },
       ],
     });
-    if (this.resizeObserver === undefined) {
-      // add resize observer
-      this.resizeObserver = new ResizeObserver(entries => {
-        if (entries.some(entrie => entrie.target.getAttribute('slot') !== null)) {
-          this.popper.update();
-        }
-      });
-      Array.from(this.element.querySelectorAll('[slot]')).forEach(element => {
-        this.resizeObserver.observe(element);
-      });
-    }
+    // add resize observer
+    new ResizeObserver(() => {
+      this.popper.update();
+    }).observe(this.element.querySelector('mg-popover-content'));
     // Add events to toggle display
     interactiveElement.addEventListener('click', () => {
       if (!this.disabled)
@@ -159,7 +160,7 @@ export class MgPopover {
    * @returns HTML Element
    */
   render() {
-    return (h(Host, null, h("slot", null), h("div", { id: this.identifier, class: this.classCollection.join() }, h("mg-card", null, this.closeButton && (h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { icon: "cross" }))), h("div", { class: "mg-popover__title" }, h("slot", { name: "title" })), h("slot", { name: "content" })), !this.arrowHide && h("div", { class: "mg-popover__arrow", "data-popper-arrow": true }))));
+    return (h(Host, null, h("slot", null), h("slot", { name: "content" })));
   }
   static get is() { return "mg-popover"; }
   static get encapsulation() { return "shadow"; }
@@ -290,11 +291,6 @@ export class MgPopover {
       }
     };
   }
-  static get states() {
-    return {
-      "classCollection": {}
-    };
-  }
   static get events() {
     return [{
         "method": "displayChange",
@@ -318,6 +314,9 @@ export class MgPopover {
     return [{
         "propName": "arrowHide",
         "methodName": "validateArrowHide"
+      }, {
+        "propName": "closeButton",
+        "methodName": "validateCloseButton"
       }, {
         "propName": "display",
         "methodName": "handleDisplay"

package/dist/collection/utils/components.utils.js

@@ -5,11 +5,15 @@
  * @returns ID
  */
 export const createID = (prefix = '', length = 10) => {
-  let ID = '';
   const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';
   const charsLength = chars.length;
-  for (let i = 0; i < length; i++) {
-    ID += chars.charAt(Math.floor(Math.random() * charsLength));
+  let ID = '';
+  let now = Date.now();
+  while (length > 0) {
+    now += Math.pow(10, 6); // Add 1 millisecond to the timestamp
+    const index = now % charsLength;
+    ID += chars.charAt(index);
+    length--;
   }
   return (prefix !== '' ? `${prefix}-` : '') + ID;
 };
@@ -115,10 +119,7 @@ export const getParentWindows = (localWindow, windows = []) => {
  */
 const getChildWindows = (localWindow, windows = []) => {
   if (localWindow.frames.length > 0) {
-    // Window.frames is an array-like object, needs a classic for loop
-    // https://developer.mozilla.org/en-US/docs/Web/API/Window/frames
-    for (let i = 0; i < localWindow.frames.length; i++) {
-      const childWindow = localWindow.frames[i];
+    for (const childWindow of Array.from(localWindow.frames)) {
       windows.push(childWindow);
       getChildWindows(childWindow, windows);
     }

package/dist/collection/utils/unit.test.utils.js

@@ -99,7 +99,7 @@ export const setupSubmitEventMock = () => {
 export const forcePopoverId = (component, id, interactiveElement = 'button') => {
   const popover = component.shadowRoot.querySelector('mg-popover');
   if (popover !== null) {
-    popover.shadowRoot.querySelector('.mg-popover').setAttribute('id', id);
+    popover.querySelector('mg-popover-content').setAttribute('id', id);
     component.shadowRoot.querySelector(interactiveElement).setAttribute('aria-controls', id);
   }
 };
@@ -111,10 +111,11 @@ export const forcePopoverId = (component, id, interactiveElement = 'button') =>
  * so we only override the console.error side effect for this error
  */
 export const mockConsoleError = () => {
-  jest.spyOn(console, 'error').mockImplementation(error => {
-    const compareWith = 'Popper: "arrow" element must be an HTMLElement (not an SVGElement). To use an SVG arrow, wrap it in an HTMLElement that will be used as the arrow.';
-    if (error !== compareWith)
-      console.log(error);
+  const errorFunction = console.error;
+  const mock = jest.spyOn(console, 'error');
+  mock.mockImplementation(error => {
+    if (!error.includes('Popper'))
+      errorFunction(error);
   });
 };
 /**

package/dist/components/components.utils.js

@@ -5,11 +5,15 @@
  * @returns ID
  */
 const createID = (prefix = '', length = 10) => {
-  let ID = '';
   const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';
   const charsLength = chars.length;
-  for (let i = 0; i < length; i++) {
-    ID += chars.charAt(Math.floor(Math.random() * charsLength));
+  let ID = '';
+  let now = Date.now();
+  while (length > 0) {
+    now += Math.pow(10, 6); // Add 1 millisecond to the timestamp
+    const index = now % charsLength;
+    ID += chars.charAt(index);
+    length--;
   }
   return (prefix !== '' ? `${prefix}-` : '') + ID;
 };
@@ -115,10 +119,7 @@ const getParentWindows = (localWindow, windows = []) => {
  */
 const getChildWindows = (localWindow, windows = []) => {
   if (localWindow.frames.length > 0) {
-    // Window.frames is an array-like object, needs a classic for loop
-    // https://developer.mozilla.org/en-US/docs/Web/API/Window/frames
-    for (let i = 0; i < localWindow.frames.length; i++) {
-      const childWindow = localWindow.frames[i];
+    for (const childWindow of Array.from(localWindow.frames)) {
       windows.push(childWindow);
       getChildWindows(childWindow, windows);
     }

package/dist/components/index.d.ts

@@ -28,10 +28,12 @@ export { MgModal as MgModal } from '../types/components/molecules/mg-modal/mg-mo
 export { MgPagination as MgPagination } from '../types/components/molecules/mg-pagination/mg-pagination';
 export { MgPanel as MgPanel } from '../types/components/molecules/mg-panel/mg-panel';
 export { MgPopover as MgPopover } from '../types/components/molecules/mg-popover/mg-popover';
+export { MgPopoverContent as MgPopoverContent } from '../types/components/molecules/mg-popover/mg-popover-content/mg-popover-content';
 export { MgSkipLinks as MgSkipLinks } from '../types/components/molecules/mg-skip-links/mg-skip-links';
 export { MgTabs as MgTabs } from '../types/components/molecules/mg-tabs/mg-tabs';
 export { MgTag as MgTag } from '../types/components/atoms/mg-tag/mg-tag';
 export { MgTooltip as MgTooltip } from '../types/components/atoms/mg-tooltip/mg-tooltip';
+export { MgTooltipContent as MgTooltipContent } from '../types/components/atoms/mg-tooltip/mg-tooltip-content/mg-tooltip-content';
 
 /**
  * Used to manually set the base path where assets can be found.

package/dist/components/index.js

@@ -28,7 +28,9 @@ export { MgModal, defineCustomElement as defineCustomElementMgModal } from './mg
 export { MgPagination, defineCustomElement as defineCustomElementMgPagination } from './mg-pagination.js';
 export { MgPanel, defineCustomElement as defineCustomElementMgPanel } from './mg-panel.js';
 export { MgPopover, defineCustomElement as defineCustomElementMgPopover } from './mg-popover.js';
+export { MgPopoverContent, defineCustomElement as defineCustomElementMgPopoverContent } from './mg-popover-content.js';
 export { MgSkipLinks, defineCustomElement as defineCustomElementMgSkipLinks } from './mg-skip-links.js';
 export { MgTabs, defineCustomElement as defineCustomElementMgTabs } from './mg-tabs.js';
 export { MgTag, defineCustomElement as defineCustomElementMgTag } from './mg-tag.js';
 export { MgTooltip, defineCustomElement as defineCustomElementMgTooltip } from './mg-tooltip.js';
+export { MgTooltipContent, defineCustomElement as defineCustomElementMgTooltipContent } from './mg-tooltip-content.js';