@mgdis/mg-components 4.0.1 → 4.1.0

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

@@ -5,6 +5,7 @@ export declare class MgTooltip {
    ************/
   private popper;
   private tooltip;
+  private guard;
   /**************
    * Decorators *
    **************/
@@ -29,7 +30,7 @@ export declare class MgTooltip {
    * Display tooltip
    */
   display: boolean;
-  handleDisplay(newVal: boolean): void;
+  handleDisplay(newValue: boolean): void;
   /**
    * Disable tooltip
    */
@@ -46,6 +47,29 @@ export declare class MgTooltip {
    * @returns {void}
    */
   private hide;
+  /**
+   * Method to set display prop
+   *
+   * @param {boolean} newValue display prop new value
+   * @param {boolean} condition additionnal condition to apply display prop newValue
+   * @returns {void}
+   */
+  private setDisplay;
+  /**
+   * Action for tooltip element and tooltiped element mouse listener
+   *
+   * @param {Guard} elementGuard tooltip element guard
+   * @param {boolean} isMouseenter mouseenter validation
+   * @param {Guard} conditionalGuard guard condition
+   * @returns {void}
+   */
+  private tooltipMouseListenerAction;
+  /**
+   * Method to reset guard value
+   *
+   * @returns {void}
+   */
+  private resetGuard;
   /*************
    * Lifecycle *
    *************/

package/dist/types/components/molecules/mg-details/doc/mg-details.stories.d.ts

@@ -0,0 +1,11 @@
+declare const _default: {
+  component: string;
+  title: string;
+  parameters: {
+    actions: {
+      handles: string[];
+    };
+  };
+};
+export default _default;
+export declare const MgDetails: any;

package/dist/types/components/molecules/mg-details/mg-details.d.ts

@@ -0,0 +1,49 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+export declare class MgDetails {
+  /************
+   * Internal *
+   ************/
+  private details;
+  /**************
+   * Decorators *
+   **************/
+  /**
+   * Displayed title when details are closed
+   */
+  toggleClosed: string;
+  /**
+   * Displayed title when details are opened
+   */
+  toggleOpened: string;
+  validateTitles(newValue: string): void;
+  /**
+   * Define if details are diplayed
+   */
+  expanded: boolean;
+  handleExpanded(newValue: boolean): void;
+  /**
+   * Emmited event when expanded change
+   */
+  expandedChange: EventEmitter<boolean>;
+  /**
+   * Handle details toggle
+   *
+   * @returns {void}
+   */
+  private handleToggle;
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Check if component props are well configured on init
+   *
+   * @returns {void}
+   */
+  componentWillLoad(): void;
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render(): HTMLElement;
+}

package/dist/types/components/molecules/mg-form/mg-form.d.ts

@@ -5,7 +5,9 @@ export declare class MgForm {
    * Internal *
    ************/
   private mgInputs;
+  private mgButtons;
   private requiredMessage;
+  private form;
   private messages;
   /**************
    * Decorators *
@@ -46,6 +48,10 @@ export declare class MgForm {
    * Tells if form is valid or not
    */
   formValid: EventEmitter<boolean>;
+  /**
+   * Emitted event on form submit
+   */
+  formSubmit: EventEmitter<boolean>;
   /**
    * Public method to display errors
    *
@@ -65,6 +71,7 @@ export declare class MgForm {
    * @returns {void}
    */
   private checkValidity;
+  private handleFormSubmit;
   /*************
    * Lifecycle *
    *************/
@@ -74,6 +81,12 @@ export declare class MgForm {
    * @returns {void}
    */
   componentWillLoad(): void;
+  /**
+   * Add slot listeners
+   *
+   * @returns {void}
+   */
+  componentDidLoad(): void;
   /**
    * Render
    *

package/dist/types/components/molecules/mg-illustrated-message/doc/mg-illustrated-message.stories.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+  component: string;
+  title: string;
+};
+export default _default;
+export declare const MgIllustratedMessage: any;

package/dist/types/components/molecules/mg-illustrated-message/mg-illustrated-message.d.ts

@@ -0,0 +1,28 @@
+export declare class MgIllustratedMessage {
+  /**************
+   * Decorators *
+   **************/
+  /**
+   * Get component DOM element
+   */
+  element: HTMLMgIllustratedMessageElement;
+  /**
+   * Define illustration size
+   */
+  size: 'regular' | 'small';
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Check if component props are well configured on init
+   *
+   * @returns {void}
+   */
+  componentDidLoad(): void;
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render(): HTMLElement;
+}

package/dist/types/components/molecules/mg-popover/doc/mg-popover.stories.d.ts

@@ -6,6 +6,9 @@ declare const _default: {
     docs: {
       iframeHeight: number;
     };
+    actions: {
+      handles: string[];
+    };
   };
   argTypes: {
     placement: {
@@ -15,7 +18,7 @@ declare const _default: {
       };
       table: {
         defaultValue: {
-          summary: "auto";
+          summary: string;
         };
       };
     };

package/dist/types/components/molecules/mg-popover/mg-popover.d.ts

@@ -1,3 +1,4 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
 import { Placement } from './mg-popover.conf';
 export declare class MgPopover {
   /************
@@ -31,11 +32,15 @@ export declare class MgPopover {
    * Display popover
    */
   display: boolean;
-  handleDisplay(newVal: boolean): void;
+  handleDisplay(newValue: boolean): void;
   /**
    * Disable popover
    */
   disabled: boolean;
+  /**
+   * Emited event when display value change
+   */
+  displayChange: EventEmitter<boolean>;
   /**
    * Check if clicked outside of component
    *

package/dist/types/components.d.ts

@@ -6,6 +6,7 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { BadgeType } from "./components/atoms/mg-badge/mg-badge.conf";
+import { ButtonType } from "./components/atoms/mg-button/mg-button.conf";
 import { CheckboxValue } from "./components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf";
 import { Width } from "./components/molecules/inputs/MgInput.conf";
 import { RadioOption } from "./components/molecules/inputs/mg-input-radio/mg-input-radio.conf";
@@ -50,6 +51,10 @@ export namespace Components {
           * Prop to set aria-expanded on button element
          */
         "expanded": boolean;
+        /**
+          * Define form id to attach button with. If this attribute is not set, the <button> is associated with its ancestor <form> element.
+         */
+        "form": string;
         /**
           * Option to set aria-haspopup The aria-haspopup state informs assistive technology users that there is a popup and the type of popup it is, but provides no interactivity.
          */
@@ -66,6 +71,10 @@ export namespace Components {
           * aria-label In case button text is not explicit enough
          */
         "label": string;
+        /**
+          * Define button type Default: 'submit', as HTMLButtonElement type is submit by default
+         */
+        "type": ButtonType;
         /**
           * Define button variant
          */
@@ -85,6 +94,20 @@ export namespace Components {
          */
         "maxlength": number;
     }
+    interface MgDetails {
+        /**
+          * Define if details are diplayed
+         */
+        "expanded": boolean;
+        /**
+          * Displayed title when details are closed
+         */
+        "toggleClosed": string;
+        /**
+          * Displayed title when details are opened
+         */
+        "toggleOpened": string;
+    }
     interface MgForm {
         /**
           * Define if form is disabled
@@ -134,6 +157,12 @@ export namespace Components {
          */
         "variant": string;
     }
+    interface MgIllustratedMessage {
+        /**
+          * Define illustration size
+         */
+        "size": 'regular' | 'small';
+    }
     interface MgInputCheckbox {
         /**
           * Define if input is disabled
@@ -989,6 +1018,10 @@ export namespace Components {
         "placement": Placement1;
     }
 }
+export interface MgDetailsCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLMgDetailsElement;
+}
 export interface MgFormCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLMgFormElement;
@@ -1045,6 +1078,10 @@ export interface MgPanelCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLMgPanelElement;
 }
+export interface MgPopoverCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLMgPopoverElement;
+}
 export interface MgTabsCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLMgTabsElement;
@@ -1068,6 +1105,12 @@ declare global {
         prototype: HTMLMgCharacterLeftElement;
         new (): HTMLMgCharacterLeftElement;
     };
+    interface HTMLMgDetailsElement extends Components.MgDetails, HTMLStencilElement {
+    }
+    var HTMLMgDetailsElement: {
+        prototype: HTMLMgDetailsElement;
+        new (): HTMLMgDetailsElement;
+    };
     interface HTMLMgFormElement extends Components.MgForm, HTMLStencilElement {
     }
     var HTMLMgFormElement: {
@@ -1080,6 +1123,12 @@ declare global {
         prototype: HTMLMgIconElement;
         new (): HTMLMgIconElement;
     };
+    interface HTMLMgIllustratedMessageElement extends Components.MgIllustratedMessage, HTMLStencilElement {
+    }
+    var HTMLMgIllustratedMessageElement: {
+        prototype: HTMLMgIllustratedMessageElement;
+        new (): HTMLMgIllustratedMessageElement;
+    };
     interface HTMLMgInputCheckboxElement extends Components.MgInputCheckbox, HTMLStencilElement {
     }
     var HTMLMgInputCheckboxElement: {
@@ -1192,8 +1241,10 @@ declare global {
         "mg-badge": HTMLMgBadgeElement;
         "mg-button": HTMLMgButtonElement;
         "mg-character-left": HTMLMgCharacterLeftElement;
+        "mg-details": HTMLMgDetailsElement;
         "mg-form": HTMLMgFormElement;
         "mg-icon": HTMLMgIconElement;
+        "mg-illustrated-message": HTMLMgIllustratedMessageElement;
         "mg-input-checkbox": HTMLMgInputCheckboxElement;
         "mg-input-date": HTMLMgInputDateElement;
         "mg-input-numeric": HTMLMgInputNumericElement;
@@ -1250,6 +1301,10 @@ declare namespace LocalJSX {
           * Prop to set aria-expanded on button element
          */
         "expanded"?: boolean;
+        /**
+          * Define form id to attach button with. If this attribute is not set, the <button> is associated with its ancestor <form> element.
+         */
+        "form"?: string;
         /**
           * Option to set aria-haspopup The aria-haspopup state informs assistive technology users that there is a popup and the type of popup it is, but provides no interactivity.
          */
@@ -1266,6 +1321,10 @@ declare namespace LocalJSX {
           * aria-label In case button text is not explicit enough
          */
         "label"?: string;
+        /**
+          * Define button type Default: 'submit', as HTMLButtonElement type is submit by default
+         */
+        "type"?: ButtonType;
         /**
           * Define button variant
          */
@@ -1285,6 +1344,24 @@ declare namespace LocalJSX {
          */
         "maxlength": number;
     }
+    interface MgDetails {
+        /**
+          * Define if details are diplayed
+         */
+        "expanded"?: boolean;
+        /**
+          * Emmited event when expanded change
+         */
+        "onExpanded-change"?: (event: MgDetailsCustomEvent<boolean>) => void;
+        /**
+          * Displayed title when details are closed
+         */
+        "toggleClosed"?: string;
+        /**
+          * Displayed title when details are opened
+         */
+        "toggleOpened"?: string;
+    }
     interface MgForm {
         /**
           * Define if form is disabled
@@ -1302,6 +1379,10 @@ declare namespace LocalJSX {
           * Input name If not set the value equals the identifier
          */
         "name"?: string;
+        /**
+          * Emitted event on form submit
+         */
+        "onForm-submit"?: (event: MgFormCustomEvent<boolean>) => void;
         /**
           * Emitted event on form validity check Tells if form is valid or not
          */
@@ -1333,6 +1414,12 @@ declare namespace LocalJSX {
          */
         "variant"?: string;
     }
+    interface MgIllustratedMessage {
+        /**
+          * Define illustration size
+         */
+        "size"?: 'regular' | 'small';
+    }
     interface MgInputCheckbox {
         /**
           * Define if input is disabled
@@ -2183,6 +2270,10 @@ declare namespace LocalJSX {
           * Sets an `id` attribute. Needed by the input for accessibility `aria-decribedby`.
          */
         "identifier"?: string;
+        /**
+          * Emited event when display value change
+         */
+        "onDisplay-change"?: (event: MgPopoverCustomEvent<boolean>) => void;
         /**
           * Popover placement
          */
@@ -2250,8 +2341,10 @@ declare namespace LocalJSX {
         "mg-badge": MgBadge;
         "mg-button": MgButton;
         "mg-character-left": MgCharacterLeft;
+        "mg-details": MgDetails;
         "mg-form": MgForm;
         "mg-icon": MgIcon;
+        "mg-illustrated-message": MgIllustratedMessage;
         "mg-input-checkbox": MgInputCheckbox;
         "mg-input-date": MgInputDate;
         "mg-input-numeric": MgInputNumeric;
@@ -2279,8 +2372,10 @@ declare module "@stencil/core" {
             "mg-badge": LocalJSX.MgBadge & JSXBase.HTMLAttributes<HTMLMgBadgeElement>;
             "mg-button": LocalJSX.MgButton & JSXBase.HTMLAttributes<HTMLMgButtonElement>;
             "mg-character-left": LocalJSX.MgCharacterLeft & JSXBase.HTMLAttributes<HTMLMgCharacterLeftElement>;
+            "mg-details": LocalJSX.MgDetails & JSXBase.HTMLAttributes<HTMLMgDetailsElement>;
             "mg-form": LocalJSX.MgForm & JSXBase.HTMLAttributes<HTMLMgFormElement>;
             "mg-icon": LocalJSX.MgIcon & JSXBase.HTMLAttributes<HTMLMgIconElement>;
+            "mg-illustrated-message": LocalJSX.MgIllustratedMessage & JSXBase.HTMLAttributes<HTMLMgIllustratedMessageElement>;
             "mg-input-checkbox": LocalJSX.MgInputCheckbox & JSXBase.HTMLAttributes<HTMLMgInputCheckboxElement>;
             "mg-input-date": LocalJSX.MgInputDate & JSXBase.HTMLAttributes<HTMLMgInputDateElement>;
             "mg-input-numeric": LocalJSX.MgInputNumeric & JSXBase.HTMLAttributes<HTMLMgInputNumericElement>;

package/dist/types/home/runner/work/mg-components/mg-components/.stencil/.storybook/utils.d.ts

@@ -0,0 +1 @@
+export declare const filterArgs: (args: any, defaultValues?: any) => any;

package/dist/types/utils/components.utils.d.ts

@@ -48,3 +48,11 @@ export declare class ClassList {
  * @returns {boolean} all items are string
  */
 export declare function allItemsAreString(items: string[]): boolean;
+/**
+ * Check if element is a heading
+ *
+ * @param {Element} element slotted element
+ * @param {string[]} tagNames allowed tag names list
+ * @returns {boolean} element is a heading
+ */
+export declare function isTagName(element: Element, tagNames: string[]): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgdis/mg-components",
-  "version": "4.0.1",
+  "version": "4.1.0",
   "description": "MG Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -42,7 +42,7 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.2",
-    "@stencil/core": "^2.17.1",
+    "@stencil/core": "^2.17.4",
     "normalize.css": "^8.0.1"
   },
   "devDependencies": {
@@ -51,12 +51,12 @@
     "@pxtrn/storybook-addon-docs-stencil": "^6.4.1",
     "@stencil/eslint-plugin": "^0.4.0",
     "@stencil/sass": "^1.5.2",
-    "@storybook/addon-a11y": "^6.5.9",
-    "@storybook/addon-actions": "^6.5.9",
-    "@storybook/addon-docs": "^6.5.9",
-    "@storybook/addon-essentials": "^6.5.9",
-    "@storybook/addon-links": "^6.5.9",
-    "@storybook/html": "^6.5.9",
+    "@storybook/addon-a11y": "^6.5.10",
+    "@storybook/addon-actions": "^6.5.10",
+    "@storybook/addon-docs": "^6.5.10",
+    "@storybook/addon-essentials": "^6.5.10",
+    "@storybook/addon-links": "^6.5.10",
+    "@storybook/html": "^6.5.10",
     "@storybook/preset-scss": "^1.0.3",
     "@types/jest": "^26.0.24",
     "@types/jest-image-snapshot": "^4.3.1",
@@ -64,13 +64,13 @@
     "@typescript-eslint/parser": "^4.33.0",
     "babel-loader": "^8.2.2",
     "babel-plugin-jsx-pragmatic": "^1.0.2",
-    "chromatic": "^6.5.4",
+    "chromatic": "^6.7.1",
     "css-loader": "^5.2.7",
     "eslint": "^7.32.0",
     "eslint-plugin-jsdoc": "^38.0.6",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-react": "^7.26.1",
-    "eslint-plugin-storybook": "^0.5.13",
+    "eslint-plugin-storybook": "^0.6.4",
     "husky": "^7.0.4",
     "jest": "^26.6.3",
     "jest-cli": "^26.6.3",

package/dist/cjs/mg-popover.cjs.entry.js

@@ -1,170 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-88560a66.js');
-const index$1 = require('./index-a39c5567.js');
-const popper = require('./popper-71bf3058.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));box-shadow:var(--box-shadow);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:-1;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:\"\";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 = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.closeButtonId = '';
-    /**
-     * Sets an `id` attribute.
-     * Needed by the input for accessibility `aria-decribedby`.
-     */
-    this.identifier = index$1.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 {MouseEvent} event mouse event
-     * @returns {void}
-     */
-    this.clickOutside = (event) => {
-      var _a;
-      if (!this.disabled && ((_a = event.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(() => {
-        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 event 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 *
-   *************/
-  /**
-   * Check if component props are well configured on init
-   *
-   * @returns {void} timeout
-   */
-  componentWillLoad() {
-    // Get locales
-    this.messages = index$1.initLocales(this.element).messages;
-  }
-  /**
-   * Check if component props are well configured on init
-   *
-   * @returns {void}
-   */
-  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 = 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
-   *
-   * @returns {HTMLElement} HTML Element
-   */
-  render() {
-    return (index.h(index.Host, null, index.h("slot", null), index.h("div", { id: this.identifier, class: "mg-popover" }, !this.disabled && this.closeButton && (index.h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, index.h("mg-icon", { icon: "cross" }))), index.h("div", { class: "mg-popover__title" }, index.h("slot", { name: "title" })), index.h("slot", { name: "content" }), index.h("div", { class: "mg-popover__arrow", "data-popper-arrow": true }))));
-  }
-  get element() { return index.getElement(this); }
-  static get watchers() { return {
-    "display": ["handleDisplay"]
-  }; }
-};
-MgPopover.style = mgPopoverCss;
-
-exports.mg_popover = MgPopover;