@mgdis/mg-components 5.4.0 → 5.6.0

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

@@ -13,49 +13,50 @@ export class MgMessage {
     this.closeButtonId = '';
     // Stored timer setted when hide action is run from setTimeOut
     this.storedTimer = null;
+    // Manage hover
+    this.isFocused = false;
+    this.isHovered = false;
     /**
-     * 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-message');
-    /**
-     * Message variant
-     */
-    this.variant = variants[0]; // info
-    /**
-     * Define if message has a cross button
-     * RG 01: https://jira.mgdis.fr/browse/PDA9-140
-     */
-    this.closeButton = false;
-    /**
-     * Define if message is hidden
+     * Set timer
+     *
+     * @returns {void}
      */
-    this.hide = false;
+    this.setTimer = () => {
+      this.storedTimer = setTimeout(() => (this.hide = true), this.delay * 1000);
+    };
     /**
-     * Component classes
+     * Clear timer
+     *
+     * @returns {void}
      */
-    this.classList = new ClassList(['mg-message']);
+    this.clearTimer = () => {
+      clearTimeout(this.storedTimer);
+    };
     /**
-     * Define if component is using actions slot
+     * Event to add on element
+     *
+     * @param {MouseEvent | FocusEvent} event  event
+     * @returns {void}
      */
-    this.hasActions = false;
+    this.timerEvents = (event) => {
+      this.clearTimer();
+      const isMouseEvent = event.type === 'mouseenter';
+      // Needed to ensure we don't start the timer
+      this[isMouseEvent ? 'isHovered' : 'isFocused'] = true;
+      // Restart timer when loose focus AND mouse leave
+      this.element.addEventListener(isMouseEvent ? 'mouseleave' : 'focusout', eventOut => {
+        this[eventOut.type === 'mouseleave' ? 'isHovered' : 'isFocused'] = false;
+        // Start timer if needed
+        if (!this.isFocused && !this.isHovered)
+          this.setTimer();
+      }, { once: true });
+    };
     /**
      * Handle close button
      */
     this.handleClose = () => {
       this.hide = true;
     };
-    /**
-     * Hide component whith delay
-     */
-    this.hideWithDelay = () => {
-      if (this.delay > 0 && this.hide !== true) {
-        this.storedTimer = setTimeout(() => (this.hide = true), this.delay * 1000);
-      }
-      else if (this.storedTimer !== null) {
-        clearTimeout(this.storedTimer);
-      }
-    };
     /**
      * Get icon corresponding to variant
      *
@@ -75,6 +76,13 @@ export class MgMessage {
           break;
       }
     };
+    this.identifier = createID('mg-message');
+    this.delay = undefined;
+    this.variant = variants[0];
+    this.closeButton = false;
+    this.hide = false;
+    this.classList = new ClassList(['mg-message']);
+    this.hasActions = false;
   }
   validateDelay(newValue) {
     if (newValue && newValue < 2) {
@@ -102,12 +110,26 @@ export class MgMessage {
     if (newValue) {
       this.componentHide.emit();
       this.classList.add(this.classHide);
+      // Remove event Listener
+      ['focusin', 'mouseenter'].forEach(event => {
+        this.element.removeEventListener(event, this.timerEvents);
+      });
+      // Clear Timer
+      this.clearTimer();
     }
     else {
       this.componentShow.emit();
       this.classList.delete(this.classHide);
+      // If delay is set
+      if (this.delay > 1) {
+        // Start timer
+        this.setTimer();
+        // Stop timer when get focus or mouse enter
+        ['focusin', 'mouseenter'].forEach(event => {
+          this.element.addEventListener(event, this.timerEvents);
+        });
+      }
     }
-    this.hideWithDelay();
   }
   /*************
    * Lifecycle *
@@ -136,7 +158,7 @@ export class MgMessage {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h("div", { id: this.identifier, class: this.classList.join(), role: this.variant === 'info' ? 'status' : 'alert' }, h("span", { class: "mg-message__icon" }, h("mg-icon", { icon: this.getIcon() })), h("div", { class: "mg-message__content" }, h("span", { class: "mg-message__content-slot" }, h("slot", null)), this.hasActions && h("span", { class: "mg-message__content-separator" }), this.hasActions && (h("span", { class: "mg-message__content-actions-slot" }, h("slot", { name: "actions" })))), this.closeButton && (h("span", { class: "mg-message__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.message.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" }))))));
+    return (h("div", { id: this.identifier, class: this.classList.join(), role: this.variant === 'info' ? 'status' : 'alert' }, h("mg-card", null, h("span", { class: "mg-message__bar" }), h("span", { class: "mg-message__icon" }, h("mg-icon", { icon: this.getIcon() })), h("div", { class: "mg-message__content" }, h("span", { class: "mg-message__content-slot" }, h("slot", null)), this.hasActions && h("span", { class: "mg-message__content-separator" }), this.hasActions && (h("span", { class: "mg-message__content-actions-slot" }, h("slot", { name: "actions" })))), this.closeButton && (h("span", { class: "mg-message__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.message.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" })))))));
   }
   static get is() { return "mg-message"; }
   static get encapsulation() { return "shadow"; }

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

@@ -1,3 +1,9 @@
+:host {
+  --mg-card-border-radius: var(--mg-modal-border-radius);
+  --mg-card-padding: 1.5rem 2.5rem;
+  --mg-card-border: none;
+}
+
 .mg-modal {
   display: flex;
   justify-content: center;
@@ -9,7 +15,13 @@
   left: 0;
   z-index: 2000;
   padding: 2rem 0;
-  background-color: hsla(var(--color-light), 85%);
+  background-color: hsl(var(--color-light), 0.85);
+}
+.mg-modal mg-card {
+  display: flex;
+  width: 60rem;
+  max-width: 100%;
+  max-height: 100%;
 }
 .mg-modal__dialog {
   display: flex;
@@ -17,15 +29,8 @@
   flex-direction: column;
   align-self: center;
   row-gap: 3rem;
-  padding: 1.5rem 2.5rem;
-  width: 60rem;
   height: fit-content;
-  max-width: 100%;
   max-height: 100%;
-  box-sizing: border-box;
-  background-color: hsl(var(--color-light));
-  box-shadow: var(--box-shadow);
-  border-radius: var(--mg-modal-border-radius);
 }
 .mg-modal__header {
   margin-bottom: 0.5rem;
@@ -50,4 +55,11 @@
 }
 .mg-modal.mg-modal--hide {
   display: none;
+}
+.mg-modal ::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);
 }

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

@@ -8,31 +8,6 @@ export class MgModal {
     // IDs
     this.closeButtonId = '';
     this.titleId = '';
-    /**
-     * 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-modal');
-    /**
-     * Define if modal has a cross button
-     */
-    this.closeButton = false;
-    /**
-     * Define if modal is hidden
-     */
-    this.hide = false;
-    /**
-     * Define if component is using actions slot
-     */
-    this.hasActions = false;
-    /**
-     * Define if component is using content slot
-     */
-    this.hasContent = false;
-    /**
-     * Component classes
-     */
-    this.classList = new ClassList(['mg-modal']);
     this.setFocus = () => {
       // Get all focusable elements
       this.modalFocusableElements = Array.from(this.element.querySelectorAll(focusableElements)).reduce((acc, focusableElement) => {
@@ -75,6 +50,13 @@ export class MgModal {
     this.handleClose = () => {
       this.hide = true;
     };
+    this.identifier = createID('mg-modal');
+    this.modalTitle = undefined;
+    this.closeButton = false;
+    this.hide = false;
+    this.hasActions = false;
+    this.hasContent = false;
+    this.classList = new ClassList(['mg-modal']);
   }
   validateModalTitle(newValue) {
     if (typeof newValue !== 'string' || newValue.trim() === '') {
@@ -150,7 +132,7 @@ export class MgModal {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h("section", { role: "dialog", id: this.identifier, class: this.classList.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide }, h("article", { class: "mg-modal__dialog" }, h("header", { class: "mg-modal__header" }, this.closeButton && (h("span", { class: "mg-modal__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" })))), h("h1", { class: "mg-modal__title", id: this.titleId }, this.modalTitle)), this.hasContent && (h("article", { class: "mg-modal__content" }, h("slot", { name: "content" }))), this.hasActions && (h("footer", { class: "mg-modal__footer" }, h("slot", { name: "actions" }))))));
+    return (h("div", { role: "alertdialog", id: this.identifier, class: this.classList.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide }, h("mg-card", null, h("div", { class: "mg-modal__dialog" }, h("header", { class: "mg-modal__header" }, this.closeButton && (h("span", { class: "mg-modal__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" })))), h("h1", { class: "mg-modal__title", id: this.titleId }, this.modalTitle)), this.hasContent && (h("article", { class: "mg-modal__content" }, h("slot", { name: "content" }))), this.hasActions && (h("footer", { class: "mg-modal__footer" }, h("slot", { name: "actions" })))))));
   }
   static get is() { return "mg-modal"; }
   static get encapsulation() { return "shadow"; }

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

@@ -25,19 +25,6 @@ import { initLocales } from './../../../locales';
 const range = (start, end, step = 1) => Array.from(Array(Math.ceil((end + 1 - start) / step)).keys()).map(x => start + x * step);
 export class MgPagination {
   constructor() {
-    /**
-     * 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-pagination');
-    /**
-     * Component total pages
-     */
-    this.totalPages = 1;
-    /**
-     * Component current page
-     */
-    this.currentPage = 1;
     /**
      * Change current page from target
      *
@@ -70,6 +57,10 @@ export class MgPagination {
     this.handleGoToPage = (action, disabled) => {
       !disabled && this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);
     };
+    this.identifier = createID('mg-pagination');
+    this.label = undefined;
+    this.totalPages = 1;
+    this.currentPage = 1;
   }
   validateTotalPages(newValue) {
     if (newValue < 1) {

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

@@ -1,8 +1,11 @@
-.mg-panel {
-  background-color: hsl(var(--mg-panel-background));
-  border-radius: var(--mg-panel-border-radius);
-  box-shadow: var(--mg-panel-box-shadow);
-}
+:host {
+  --mg-card-border: none;
+  --mg-card-padding: 0;
+  --mg-card-border-radius: var(--mg-panel-border-radius);
+  --mg-card-background: hsl(var(--mg-panel-background));
+  --mg-card-box-shadow: var(--mg-panel-box-shadow);
+}
+
 .mg-panel__header {
   display: flex;
   flex-wrap: wrap;
@@ -17,6 +20,8 @@
 .mg-panel__header-right {
   padding-left: 0.3rem;
   flex: 1 auto;
+  min-height: var(--default-size);
+  align-items: center;
 }
 .mg-panel__header-left mg-input-text {
   flex-grow: 1;
@@ -40,4 +45,11 @@
   flex-wrap: wrap;
   gap: 1rem;
   margin-left: auto;
+}
+.mg-panel ::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);
 }

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

@@ -3,27 +3,6 @@ import { createID, ClassList } from '../../../utils/components.utils';
 import { initLocales } from '../../../locales';
 export class MgPanel {
   constructor() {
-    /**
-     * 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-panel');
-    /**
-     * Panel is opened
-     */
-    this.expanded = false;
-    /**
-     * Panel title is editabled
-     */
-    this.titleEditable = false;
-    /**
-     * Component classes
-     */
-    this.classList = new ClassList(['mg-panel']);
-    /**
-     * Title is in edition mode
-     */
-    this.isEditing = false;
     /************
      * Methods *
      ************/
@@ -108,6 +87,16 @@ export class MgPanel {
       }
       return collapseButton();
     };
+    this.identifier = createID('mg-panel');
+    this.panelTitle = undefined;
+    this.titlePattern = undefined;
+    this.titlePatternErrorMessage = undefined;
+    this.expanded = false;
+    this.expandToggleDisabled = undefined;
+    this.titleEditable = false;
+    this.classList = new ClassList(['mg-panel']);
+    this.isEditing = false;
+    this.updatedPanelTitle = undefined;
   }
   validatePanelTitle(newValue) {
     if (typeof newValue !== 'string' || newValue.trim() === '') {
@@ -158,7 +147,7 @@ export class MgPanel {
    * @returns {HTMLElement} html element
    */
   render() {
-    return (h("section", { class: this.classList.join(), id: this.identifier }, h("header", { class: "mg-panel__header", id: `${this.identifier}-header` }, h("div", { class: `mg-panel__header-left ${this.isEditing ? 'mg-panel__header-left--full' : ''}` }, this.headerLeft()), h("div", { class: "mg-panel__header-right" }, h("slot", { name: "header-right" }))), h("article", { class: "mg-panel__content", id: `${this.identifier}-content`, "aria-labelledby": `${this.identifier}-header`, hidden: !this.expanded }, h("slot", null))));
+    return (h("section", { class: this.classList.join(), id: this.identifier }, h("mg-card", null, h("header", { class: "mg-panel__header", id: `${this.identifier}-header` }, h("div", { class: `mg-panel__header-left ${this.isEditing ? 'mg-panel__header-left--full' : ''}` }, this.headerLeft()), h("div", { class: "mg-panel__header-right" }, h("slot", { name: "header-right" }))), h("article", { class: "mg-panel__content", id: `${this.identifier}-content`, "aria-labelledby": `${this.identifier}-header`, hidden: !this.expanded }, h("slot", null)))));
   }
   static get is() { return "mg-panel"; }
   static get encapsulation() { return "shadow"; }

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

@@ -1,19 +1,25 @@
-mg-popover {
+:host {
+  --mg-card-padding: var(--mg-popover-padding-vertical, 1.5rem) var(--mg-popover-padding-horizontal, var(--mg-popover-padding-vertical, 1.5rem));
+  --mg-card-border: none;
+  --mg-card-border-radius: 0.5rem;
+  --mg-card-background: hsl(var(--mg-popover-background-color));
+  position: relative;
   display: contents;
 }
-mg-popover::slotted(*) {
+:host::slotted(*) {
   display: inline-block;
 }
 
 .mg-popover {
   display: none;
-  padding: 1.5rem;
-  z-index: 1000;
-  border-radius: 0.5rem;
-  background-color: hsl(var(--mg-popover-background-color));
-  box-shadow: var(--box-shadow);
+  padding: 1rem;
+  z-index: 2000;
   color: hsl(var(--mg-popover-font-color));
 }
+.mg-popover mg-card {
+  position: relative;
+  z-index: -1;
+}
 .mg-popover[data-show] {
   display: block;
 }
@@ -23,35 +29,91 @@ mg-popover::slotted(*) {
   margin-top: calc(0rem - (var(--default-size) - var(--mg-popover-title-font-size) * var(--line-height)) / 2);
   margin-left: 3rem;
 }
-.mg-popover__arrow, .mg-popover__arrow::before {
-  position: absolute;
-  width: 2rem;
-  height: 2rem;
-  z-index: -1;
-  background: inherit;
-}
 .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 {
+.mg-popover__arrow:before {
   visibility: visible;
   content: "";
-  transform: rotate(45deg);
+  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: -6px;
+  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: -6px;
+  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: -6px;
+  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: -6px;
+  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);
 }

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

@@ -1,31 +1,13 @@
 import { Host, h } from '@stencil/core';
 import { createID, isTagName } from '../../../utils/components.utils';
 import { createPopper } from '@popperjs/core';
+import { getWindows, ClassList } from '../../../utils/components.utils';
 import { initLocales } from '../../../locales';
 export class MgPopover {
   constructor() {
     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;
+    // Classes
+    this.classArrowHide = `mg-popover--arrow-hide`;
     /**
      * Check if clicked outside of component
      *
@@ -52,7 +34,9 @@ export class MgPopover {
       // hide when click outside
       // setTimeout is used to prevent event to trigger after creation
       setTimeout(() => {
-        document.addEventListener('click', this.clickOutside, false);
+        this.windows.forEach((localWindow) => {
+          localWindow.addEventListener('click', this.clickOutside, false);
+        });
       }, 0);
     };
     /**
@@ -66,7 +50,9 @@ export class MgPopover {
       // Disable the event listeners
       this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }] })));
       // Remove event listener
-      document.removeEventListener('click', this.clickOutside, false);
+      this.windows.forEach((localWindow) => {
+        localWindow.removeEventListener('click', this.clickOutside, false);
+      });
     };
     /**
      * Handle action for close button
@@ -76,6 +62,19 @@ export class MgPopover {
     this.handleCloseButton = () => {
       this.display = false;
     };
+    this.identifier = createID('mg-popover');
+    this.placement = 'bottom';
+    this.arrowHide = false;
+    this.closeButton = false;
+    this.display = false;
+    this.disabled = false;
+    this.classList = new ClassList(['mg-popover']);
+  }
+  validateArrowHide(newValue) {
+    if (newValue)
+      this.classList.add(this.classArrowHide);
+    else
+      this.classList.delete(this.classArrowHide);
   }
   handleDisplay(newValue) {
     if (newValue) {
@@ -95,8 +94,11 @@ export class MgPopover {
    * @returns {void} timeout
    */
   componentWillLoad() {
+    // Get windows to attach events
+    this.windows = getWindows(window);
     // Get locales
     this.messages = initLocales(this.element).messages;
+    this.validateArrowHide(this.arrowHide);
   }
   /**
    * Check if component props are well configured on init
@@ -114,7 +116,7 @@ export class MgPopover {
       this.closeButtonId = `${this.identifier}-close-button`;
     }
     // Get popover content
-    this.popover = this.element.shadowRoot.querySelector(`#${this.identifier}`);
+    this.popover = this.element.shadowRoot.getElementById(this.identifier);
     //Get interactive element (first element without slot attribute)
     const interactiveElement = this.element.querySelector(':not([slot])');
     // Add aria attributes
@@ -128,7 +130,7 @@ export class MgPopover {
         {
           name: 'offset',
           options: {
-            offset: [0, 10],
+            offset: [0, 0],
           },
         },
       ],
@@ -151,7 +153,7 @@ export class MgPopover {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h(Host, null, h("slot", null), h("div", { id: this.identifier, class: "mg-popover" }, 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" }), h("div", { class: "mg-popover__arrow", "data-popper-arrow": true }))));
+    return (h(Host, null, h("slot", null), h("div", { id: this.identifier, class: this.classList.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 }))));
   }
   static get is() { return "mg-popover"; }
   static get encapsulation() { return "shadow"; }
@@ -208,6 +210,24 @@ export class MgPopover {
         "reflect": false,
         "defaultValue": "'bottom'"
       },
+      "arrowHide": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Hide popover arrow"
+        },
+        "attribute": "arrow-hide",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "closeButton": {
         "type": "boolean",
         "mutable": false,
@@ -264,6 +284,11 @@ export class MgPopover {
       }
     };
   }
+  static get states() {
+    return {
+      "classList": {}
+    };
+  }
   static get events() {
     return [{
         "method": "displayChange",
@@ -285,6 +310,9 @@ export class MgPopover {
   static get elementRef() { return "element"; }
   static get watchers() {
     return [{
+        "propName": "arrowHide",
+        "methodName": "validateArrowHide"
+      }, {
         "propName": "display",
         "methodName": "handleDisplay"
       }];