@mgdis/mg-components 6.21.0 → 6.22.0

package/dist/collection/components/molecules/menus/mg-menu/mg-menu.js

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { directions, sizes } from "./mg-menu.conf";
+import { directions } from "./mg-menu.conf";
 import { toString } from "@mgdis/core-ui-helpers/dist/utils";
 /**
  * @slot - Menu content
@@ -14,10 +14,6 @@ export class MgMenu {
          * Component display direction.
          */
         this.direction = 'horizontal';
-        /**
-         * Define mg-menu size
-         */
-        this.size = 'medium';
         /*************
          * Methods *
          *************/
@@ -53,7 +49,6 @@ export class MgMenu {
          * render mg-item-more
          */
         this.renderMgItemMore = () => {
-            var _a;
             if (this.direction === directions.VERTICAL || (this.direction === directions.HORIZONTAL && this.isChildMenu()) || this.element.children.length <= 1) {
                 return;
             }
@@ -67,8 +62,6 @@ export class MgMenu {
             for (const propertie in this.itemmore) {
                 itemMoreElement[propertie] = this.itemmore[propertie];
             }
-            if (((_a = this.itemmore) === null || _a === void 0 ? void 0 : _a.size) === undefined)
-                itemMoreElement.size = this.size;
         };
     }
     validateLabel(newValue) {
@@ -92,11 +85,6 @@ export class MgMenu {
             this.renderMgItemMore();
         }
     }
-    validateSize(newValue) {
-        if (!sizes.includes(newValue)) {
-            throw new Error(`<${this.name}> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${toString(newValue)}.`);
-        }
-    }
     /**
      * Define mg-menu-item listener when they are loaded
      * @param event - mg-item-loaded "item-loaded" custom event
@@ -131,7 +119,6 @@ export class MgMenu {
         this.validateDirection(this.direction);
         this.validateLabel(this.label);
         this.validateItemMore(this.itemmore);
-        this.validateSize(this.size);
     }
     /**
      * Check if component slots configuration
@@ -166,7 +153,7 @@ export class MgMenu {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: '753833b01b86d6983f5d063f5598e2187b147a6e', role: "list", "aria-label": this.label }, h("slot", { key: '56702e49f5a97feddeb66e6271bd898061aa0d48' })));
+        return (h(Host, { key: '17b5111014e866939f58170452ca74ee40c8454c', role: "list", "aria-label": this.label }, h("slot", { key: '7c2a9aafccbc7526c74acaf7a505d7a33befc5ad' })));
     }
     static get is() { return "mg-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -227,54 +214,48 @@ export class MgMenu {
                 "attribute": "direction",
                 "defaultValue": "'horizontal'"
             },
-            "itemmore": {
+            "size": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "ItemMoreType",
-                    "resolved": "{ size?: \"medium\" | \"large\" | \"xlarge\"; icon?: IconType; slotlabel?: SlotLabelType; }",
-                    "references": {
-                        "ItemMoreType": {
-                            "location": "import",
-                            "path": "./mg-menu.conf",
-                            "id": "src/components/molecules/menus/mg-menu/mg-menu.conf.ts::ItemMoreType"
-                        }
-                    }
+                    "original": "never",
+                    "resolved": "never",
+                    "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Customize \"mg-item-more\" element\nUsed with direction: 'vertical' to manage overflow"
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "this prop is deprecated and will be removed in future releases"
+                        }],
+                    "text": "Size of the menu items"
                 },
                 "getter": false,
                 "setter": false
             },
-            "size": {
-                "type": "string",
+            "itemmore": {
+                "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "MenuSizeType",
-                    "resolved": "\"large\" | \"medium\" | \"xlarge\"",
+                    "original": "ItemMoreType",
+                    "resolved": "{ icon?: IconType; slotlabel?: SlotLabelType; }",
                     "references": {
-                        "MenuSizeType": {
+                        "ItemMoreType": {
                             "location": "import",
                             "path": "./mg-menu.conf",
-                            "id": "src/components/molecules/menus/mg-menu/mg-menu.conf.ts::MenuSizeType"
+                            "id": "src/components/molecules/menus/mg-menu/mg-menu.conf.ts::ItemMoreType"
                         }
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Define mg-menu size"
+                    "text": "Customize \"mg-item-more\" element\nUsed with direction: 'horizontal' to manage overflow"
                 },
                 "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "size",
-                "defaultValue": "'medium'"
+                "setter": false
             }
         };
     }
@@ -289,9 +270,6 @@ export class MgMenu {
             }, {
                 "propName": "itemmore",
                 "methodName": "validateItemMore"
-            }, {
-                "propName": "size",
-                "methodName": "validateSize"
             }];
     }
     static get listeners() {

package/dist/collection/components/molecules/menus/mg-menu-item/mg-menu-item.js

@@ -16,7 +16,7 @@ export class MgMenuItem {
          * Internal *
          ************/
         this.name = 'mg-menu-item';
-        this.navigationButton = 'mg-c-menu-item__navigation-button';
+        this.classNavigationButton = 'mg-c-menu-item__navigation-button';
         /************
          * Props *
          ************/
@@ -28,6 +28,10 @@ export class MgMenuItem {
          * Define menu-item status.
          */
         this.status = 'visible';
+        /**
+         * Define menu-item isIcon style.
+         */
+        this.isIcon = false;
         /**
          * Define menu-item content expanded.
          */
@@ -35,14 +39,10 @@ export class MgMenuItem {
         /**********
          * States *
          *********/
-        /**
-         * Define menu-item size.
-         */
-        this.size = 'medium';
         /**
          * Component button classes
          */
-        this.navigationButtonClassList = new ClassList([this.navigationButton]);
+        this.classNavigationButtonClassList = new ClassList([this.classNavigationButton]);
         /**
          * Does component have children.
          */
@@ -146,12 +146,6 @@ export class MgMenuItem {
          * @param guard - prevent action with guard
          */
         this.updateItem = (guard) => {
-            const menu = this.getParentMenu();
-            // define element size
-            if ((menu === null || menu === void 0 ? void 0 : menu.size) !== undefined && !this.isItemMore)
-                this.size = menu.size;
-            else if (this.isItemMore)
-                this.size = this.element.dataset.size;
             // when vertical main menu item contain an active item we force expanded
             this.updateExpanded(this.expanded);
             this.updateStatus(guard);
@@ -177,9 +171,6 @@ export class MgMenuItem {
                 const closePopover = (element) => {
                     if (element === null)
                         return;
-                    else if (element !== this.element && element.expanded && element.shadowRoot.querySelector('mg-popover') !== null) {
-                        element.expanded = false;
-                    }
                     else {
                         closePopover(element.parentElement.closest('mg-menu-item'));
                     }
@@ -215,8 +206,23 @@ export class MgMenuItem {
     }
     watchStatus(newValue, oldValue) {
         if (oldValue !== undefined)
-            this.navigationButtonClassList.delete(`${this.navigationButton}--${oldValue}`);
-        this.navigationButtonClassList.add(`${this.navigationButton}--${newValue}`);
+            this.classNavigationButtonClassList.delete(`${this.classNavigationButton}--${oldValue}`);
+        this.classNavigationButtonClassList.add(`${this.classNavigationButton}--${newValue}`);
+    }
+    watchIsIcon(newValue) {
+        const classIcon = `${this.classNavigationButton}--is-icon`;
+        if (newValue) {
+            // in vertical menu isIcon is not available
+            if (this.direction === 'vertical') {
+                this.isIcon = false;
+            }
+            else {
+                this.classNavigationButtonClassList.add(classIcon);
+            }
+        }
+        else {
+            this.classNavigationButtonClassList.delete(classIcon);
+        }
     }
     watchExpanded(newValue) {
         if (typeof newValue !== 'boolean') {
@@ -231,15 +237,10 @@ export class MgMenuItem {
             });
         }
     }
-    watchSize(newValue, oldValue) {
-        if (oldValue !== undefined)
-            this.navigationButtonClassList.delete(`${this.navigationButton}--size-${oldValue}`);
-        this.navigationButtonClassList.add(`${this.navigationButton}--size-${newValue}`);
-    }
     validateDirection(newValue, oldValue) {
         if (oldValue !== undefined)
-            this.navigationButtonClassList.delete(`${this.navigationButton}--${oldValue}`);
-        this.navigationButtonClassList.add(`${this.navigationButton}--${newValue}`);
+            this.classNavigationButtonClassList.delete(`${this.classNavigationButton}--${oldValue}`);
+        this.classNavigationButtonClassList.add(`${this.classNavigationButton}--${newValue}`);
         // manage all sub levels child menu-items level with data-level attribut
         Array.from(this.element.querySelectorAll('mg-menu-item')).forEach(item => {
             if (this.isDirection(directions.VERTICAL, newValue)) {
@@ -262,6 +263,7 @@ export class MgMenuItem {
     // eslint-disable-next-line @stencil-community/no-unused-watch
     watchDataStyleDirection(newValue) {
         this.direction = newValue;
+        this.watchIsIcon(this.isIcon);
     }
     /**
      * has focus value in dataset
@@ -301,7 +303,7 @@ export class MgMenuItem {
         this.watchExpanded(this.expanded);
         this.watchTarget(this.target);
         this.watchIdentifier(this.identifier);
-        this.watchSize(this.size);
+        this.watchIsIcon(this.isIcon);
     }
     /**
      * Check if component slots configuration
@@ -315,7 +317,6 @@ export class MgMenuItem {
         // https://stenciljs.com/docs/component-lifecycle#componentwillload
         return setTimeout(() => {
             this.watchDataStyleDirection(this.element.dataset.styleDirection);
-            this.watchDataHasFocus(this.element.dataset.hasFocus);
             this.updateItem([Status.ACTIVE]);
             // emit loaded event when component is fully loaded
             this.itemLoaded.emit();
@@ -339,19 +340,26 @@ export class MgMenuItem {
             this.itemUpdated.emit();
         });
     }
+    /**
+     * Render information slot or notification badge
+     * @returns HTML Element
+     */
+    renderInformationSlotOrNotification() {
+        return !this.displayNotificationBadge ? (h("slot", { name: "information" })) : (h("span", { class: `${this.classNavigationButton}-text-content-notification` }, h("mg-badge", { label: this.messages.badgeLabel, value: "!", variant: "text-color", slot: "information" })));
+    }
     /**
      * Render ineractive element
      * @returns HTML Element
      */
     renderInteractiveElement() {
         const TagName = this.href !== undefined ? 'a' : 'button';
-        return (h(TagName, { href: this.href, class: this.navigationButtonClassList.join(), tabindex: [Status.DISABLED, Status.HIDDEN].includes(this.status) ? -1 : undefined, disabled: this.status === Status.DISABLED, hidden: this.status === Status.HIDDEN, target: this.href !== undefined && this.target !== undefined ? this.target : undefined, "aria-expanded": this.hasChildren && this.expanded.toString(), "aria-current": this.status === Status.ACTIVE && 'page', onClick: this.handleElementCLick }, h("slot", { name: "image" }), h("div", { class: `${this.navigationButton}-center` }, h("div", { class: `${this.navigationButton}-text-content` }, h("slot", { name: "label" }), !this.displayNotificationBadge && h("slot", { name: "information" }), this.displayNotificationBadge && (h("span", { class: `${this.navigationButton}-text-content-notification` }, h("mg-badge", { label: this.messages.badgeLabel, value: "!", variant: "text-color", slot: "information" }))), this.target === '_blank' && [
-            h("mg-icon", { key: "icon-new-tab", class: `${this.navigationButton}-new-tab`, icon: "arrow-up-right-square" }),
+        return (h(TagName, { href: this.href, class: this.classNavigationButtonClassList.join(), tabindex: [Status.DISABLED, Status.HIDDEN].includes(this.status) ? -1 : undefined, disabled: this.status === Status.DISABLED, hidden: this.status === Status.HIDDEN, target: this.href !== undefined && this.target !== undefined ? this.target : undefined, "aria-expanded": this.hasChildren && this.expanded.toString(), "aria-current": this.status === Status.ACTIVE && 'page', onClick: this.handleElementCLick }, h("slot", { name: "image" }), h("div", { class: { [`${this.classNavigationButton}-center`]: true, 'mg-u-visually-hidden': this.isIcon } }, h("div", { class: `${this.classNavigationButton}-text-content` }, h("slot", { name: "label" }), !this.isIcon && this.renderInformationSlotOrNotification(), this.target === '_blank' && [
+            h("mg-icon", { key: "icon-new-tab", class: `${this.classNavigationButton}-new-tab`, icon: "arrow-up-right-square" }),
             h("span", { key: "a11y-new-tab", class: "mg-u-visually-hidden" }, this.messages.openNewTab),
-        ]), this.size !== 'medium' && h("slot", { name: "metadata" })), this.hasChildren && this.href === undefined && (h("span", { class: {
-                [`${this.navigationButton}-chevron`]: true,
-                [`${this.navigationButton}-chevron--rotate`]: this.expanded === true,
-            } }, h("mg-icon", { icon: "chevron-down" })))));
+        ]), !this.isIcon && h("slot", { name: "metadata" })), this.isIcon && this.renderInformationSlotOrNotification(), this.hasChildren && this.href === undefined && !this.isIcon && (h("span", { class: {
+                [`${this.classNavigationButton}-chevron`]: true,
+                [`${this.classNavigationButton}-chevron--rotate`]: this.expanded === true,
+            } }, h("mg-icon", { icon: "chevron-down", size: "small" })))));
     }
     /**
      * Render
@@ -362,7 +370,7 @@ export class MgMenuItem {
             ['mg-c-menu-item__collapse-container']: true,
             ['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu() || this.isItemMore) && this.isDirection(directions.HORIZONTAL),
         });
-        return (h(Host, { key: '9476243af2ac82d34f91487a22b46ea07c282ebc', role: this.isItemMore ? 'presentation' : 'listitem' }, this.hasPopover() ? (h("mg-popover", { display: this.expanded, placement: "bottom-start", arrowHide: true, "onDisplay-change": this.handlePopoverDisplay, identifier: this.popoverIdentifier, "data-fallback-placement": "bottom-end" // use for the last element of the menu if it is placed on the right side
+        return (h(Host, { key: '374bf5cb625380973d15163b1088e7e743da5dd4', role: this.isItemMore ? 'presentation' : 'listitem' }, this.hasPopover() ? (h("mg-popover", { display: this.expanded, placement: "bottom-start", arrowHide: true, "onDisplay-change": this.handlePopoverDisplay, identifier: this.popoverIdentifier, "data-fallback-placement": "bottom-end" // use for the last element of the menu if it is placed on the right side
         }, this.renderInteractiveElement(), h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
             this.renderInteractiveElement(),
             h("div", { key: "vertical-container", class: getContainerClasses(), hidden: !this.expanded }, this.renderSlot()),
@@ -472,6 +480,26 @@ export class MgMenuItem {
                 "attribute": "status",
                 "defaultValue": "'visible'"
             },
+            "isIcon": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Define menu-item isIcon style."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-icon",
+                "defaultValue": "false"
+            },
             "expanded": {
                 "type": "boolean",
                 "mutable": true,
@@ -496,8 +524,7 @@ export class MgMenuItem {
     }
     static get states() {
         return {
-            "size": {},
-            "navigationButtonClassList": {},
+            "classNavigationButtonClassList": {},
             "direction": {},
             "isItemMore": {},
             "hasChildren": {},
@@ -548,12 +575,12 @@ export class MgMenuItem {
             }, {
                 "propName": "status",
                 "methodName": "watchStatus"
+            }, {
+                "propName": "isIcon",
+                "methodName": "watchIsIcon"
             }, {
                 "propName": "expanded",
                 "methodName": "watchExpanded"
-            }, {
-                "propName": "size",
-                "methodName": "watchSize"
             }, {
                 "propName": "direction",
                 "methodName": "validateDirection"

package/dist/collection/components/molecules/mg-action-more/mg-action-more.js

@@ -195,7 +195,7 @@ export class MgActionMore {
                 "mutable": true,
                 "complexType": {
                     "original": "MgActionMoreIconType",
-                    "resolved": "{ icon: \"filter\" | \"link\" | \"picture\" | \"table\" | \"circle\" | \"download\" | \"key\" | \"list\" | \"copy\" | \"history\" | \"location\" | \"loader\" | \"address-card\" | \"address-card-outline\" | \"align-center\" | \"align-justify\" | \"align-left\" | \"align-right\" | \"api\" | \"archive\" | \"archive-outline\" | \"arrow-clock\" | \"arrow-down\" | \"arrow-down-a-z\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-right\" | \"arrow-rotate\" | \"arrow-rotate-backward\" | \"arrow-up\" | \"arrow-up-right\" | \"arrow-up-right-square\" | \"arrow-up-z-a\" | \"arrows-compare\" | \"arrows-right-down\" | \"arrows-right-left\" | \"arrows-rotate\" | \"arrows-rotate-backward\" | \"arrows-up-down\" | \"ban\" | \"bell\" | \"bell-outline\" | \"book\" | \"book-outline\" | \"briefcase\" | \"briefcase-outline\" | \"building\" | \"building-outline\" | \"calculator\" | \"calculator-outline\" | \"calendar\" | \"calendar-euro\" | \"calendar-euro-outline\" | \"calendar-outline\" | \"check\" | \"check-circle\" | \"check-circle-outline\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"clock\" | \"clock-outline\" | \"code-square-outline\" | \"cog\" | \"cog-outline\" | \"comment\" | \"comment-exclamation\" | \"comment-exclamation-outline\" | \"comment-outline\" | \"comment-question\" | \"comment-question-outline\" | \"comment-sms\" | \"comment-sms-outline\" | \"conversation\" | \"conversation-outline\" | \"copy-file\" | \"copy-file-outline\" | \"copy-outline\" | \"credit-card\" | \"cross\" | \"cross-circle\" | \"cross-circle-outline\" | \"dashboard\" | \"dashboard-outline\" | \"earth\" | \"earth-outline\" | \"ellipsis\" | \"ellipsis-vertical\" | \"euro\" | \"euro-circle\" | \"exclamation-circle\" | \"exclamation-circle-outline\" | \"exclamation-stamp\" | \"exclamation-triangle\" | \"exclamation-triangle-outline\" | \"eye\" | \"eye-outline\" | \"eye-slash\" | \"eye-slash-outline\" | \"fax\" | \"fax-outline\" | \"file\" | \"file-cog\" | \"file-cog-outline\" | \"file-download\" | \"file-download-outline\" | \"file-excel\" | \"file-excel-outline\" | \"file-outline\" | \"file-pdf\" | \"file-pdf-outline\" | \"file-text\" | \"file-text-outline\" | \"file-upload\" | \"file-upload-outline\" | \"file-word\" | \"file-word-outline\" | \"filter-outline\" | \"floppy-disk\" | \"floppy-disk-checked\" | \"floppy-disk-checked-outline\" | \"floppy-disk-outline\" | \"folder\" | \"folder-check\" | \"folder-check-outline\" | \"folder-lines\" | \"folder-lines-outline\" | \"folder-link\" | \"folder-link-outline\" | \"folder-outline\" | \"folder-star\" | \"folder-star-outline\" | \"folders\" | \"folders-outline\" | \"gavel\" | \"gavel-outline\" | \"graduation-cap\" | \"graduation-cap-outline\" | \"hand-euro\" | \"hand-euro-outline\" | \"hand-up\" | \"home\" | \"home-outline\" | \"info-circle\" | \"info-circle-outline\" | \"interrogation-circle\" | \"interrogation-circle-outline\" | \"laptop\" | \"layers\" | \"life-ring\" | \"lines-rectangle\" | \"lines-rectangle-outline\" | \"location-outline\" | \"lock\" | \"lock-outline\" | \"log-in\" | \"log-out\" | \"magnifying-glass\" | \"mail\" | \"mail-open\" | \"mail-open-outline\" | \"mail-outline\" | \"messages-square\" | \"messages-square-outline\" | \"mobile\" | \"mobile-outline\" | \"notes\" | \"notes-outline\" | \"paper-plane\" | \"paper-plane-outline\" | \"paper-plane-slash\" | \"paper-plane-slash-outline\" | \"paperclip\" | \"pen\" | \"pen-circle\" | \"pen-fancy\" | \"pen-fancy-files-outline\" | \"pen-fancy-outline\" | \"pen-outline\" | \"phone\" | \"phone-outline\" | \"picture-outline\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-outline\" | \"share\" | \"share-outline\" | \"shuffle\" | \"sidebar-arrow-left\" | \"sidebar-arrow-right\" | \"sitemap\" | \"sliders\" | \"sliders-outline\" | \"squares\" | \"star\" | \"star-outline\" | \"tag\" | \"tag-outline\" | \"tags\" | \"tags-outline\" | \"thumb-down\" | \"thumb-down-outline\" | \"thumb-up\" | \"thumb-up-outline\" | \"thumbtack\" | \"thumbtack-outline\" | \"trash\" | \"trash-outline\" | \"universal-access\" | \"universal-access-outline\" | \"unlink\" | \"unlock\" | \"unlock-outline\" | \"upload\" | \"user\" | \"user-circle\" | \"user-group\" | \"user-group-outline\" | \"user-lock\" | \"user-outline\" | \"user-pen-fancy-outline\" | \"user-plus\" | \"user-question-outline\" | \"user-shield\" | \"user-shield-outline\" | \"users\" | \"users-outline\" | \"wallet\" | \"wallet-outline\"; }",
+                    "resolved": "{ icon: \"filter\" | \"link\" | \"picture\" | \"table\" | \"circle\" | \"download\" | \"key\" | \"list\" | \"copy\" | \"history\" | \"location\" | \"pause\" | \"loader\" | \"address-card\" | \"address-card-outline\" | \"align-center\" | \"align-justify\" | \"align-left\" | \"align-right\" | \"api\" | \"archive\" | \"archive-outline\" | \"arrow-clock\" | \"arrow-down\" | \"arrow-down-a-z\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-right\" | \"arrow-rotate\" | \"arrow-rotate-backward\" | \"arrow-up\" | \"arrow-up-right\" | \"arrow-up-right-square\" | \"arrow-up-z-a\" | \"arrows-compare\" | \"arrows-right-down\" | \"arrows-right-left\" | \"arrows-rotate\" | \"arrows-rotate-backward\" | \"arrows-up-down\" | \"ban\" | \"bell\" | \"bell-outline\" | \"book\" | \"book-outline\" | \"briefcase\" | \"briefcase-outline\" | \"building\" | \"building-outline\" | \"calculator\" | \"calculator-outline\" | \"calendar\" | \"calendar-euro\" | \"calendar-euro-outline\" | \"calendar-outline\" | \"check\" | \"check-circle\" | \"check-circle-outline\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"clock\" | \"clock-outline\" | \"code-square-outline\" | \"cog\" | \"cog-outline\" | \"comment\" | \"comment-exclamation\" | \"comment-exclamation-outline\" | \"comment-outline\" | \"comment-question\" | \"comment-question-outline\" | \"comment-sms\" | \"comment-sms-outline\" | \"conversation\" | \"conversation-outline\" | \"copy-file\" | \"copy-file-outline\" | \"copy-outline\" | \"credit-card\" | \"cross\" | \"cross-circle\" | \"cross-circle-outline\" | \"dashboard\" | \"dashboard-outline\" | \"earth\" | \"earth-outline\" | \"ellipsis\" | \"ellipsis-vertical\" | \"euro\" | \"euro-circle\" | \"exclamation-circle\" | \"exclamation-circle-outline\" | \"exclamation-stamp\" | \"exclamation-triangle\" | \"exclamation-triangle-outline\" | \"eye\" | \"eye-outline\" | \"eye-slash\" | \"eye-slash-outline\" | \"fax\" | \"fax-outline\" | \"file\" | \"file-cog\" | \"file-cog-outline\" | \"file-download\" | \"file-download-outline\" | \"file-excel\" | \"file-excel-outline\" | \"file-outline\" | \"file-pdf\" | \"file-pdf-outline\" | \"file-text\" | \"file-text-outline\" | \"file-upload\" | \"file-upload-outline\" | \"file-word\" | \"file-word-outline\" | \"filter-outline\" | \"floppy-disk\" | \"floppy-disk-checked\" | \"floppy-disk-checked-outline\" | \"floppy-disk-outline\" | \"folder\" | \"folder-check\" | \"folder-check-outline\" | \"folder-lines\" | \"folder-lines-outline\" | \"folder-link\" | \"folder-link-outline\" | \"folder-outline\" | \"folder-star\" | \"folder-star-outline\" | \"folders\" | \"folders-outline\" | \"gavel\" | \"gavel-outline\" | \"graduation-cap\" | \"graduation-cap-outline\" | \"hand-euro\" | \"hand-euro-outline\" | \"hand-up\" | \"home\" | \"home-outline\" | \"info-circle\" | \"info-circle-outline\" | \"interrogation-circle\" | \"interrogation-circle-outline\" | \"laptop\" | \"layers\" | \"life-ring\" | \"lines-rectangle\" | \"lines-rectangle-outline\" | \"location-outline\" | \"lock\" | \"lock-outline\" | \"log-in\" | \"log-out\" | \"magnifying-glass\" | \"mail\" | \"mail-open\" | \"mail-open-outline\" | \"mail-outline\" | \"messages-square\" | \"messages-square-outline\" | \"mobile\" | \"mobile-outline\" | \"notes\" | \"notes-outline\" | \"paper-plane\" | \"paper-plane-outline\" | \"paper-plane-slash\" | \"paper-plane-slash-outline\" | \"paperclip\" | \"pause-outline\" | \"pen\" | \"pen-circle\" | \"pen-fancy\" | \"pen-fancy-files-outline\" | \"pen-fancy-outline\" | \"pen-outline\" | \"phone\" | \"phone-outline\" | \"picture-outline\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-outline\" | \"share\" | \"share-outline\" | \"shuffle\" | \"sidebar-arrow-left\" | \"sidebar-arrow-right\" | \"sitemap\" | \"sliders\" | \"sliders-outline\" | \"squares\" | \"star\" | \"star-outline\" | \"tag\" | \"tag-outline\" | \"tags\" | \"tags-outline\" | \"thumb-down\" | \"thumb-down-outline\" | \"thumb-up\" | \"thumb-up-outline\" | \"thumbtack\" | \"thumbtack-outline\" | \"trash\" | \"trash-outline\" | \"universal-access\" | \"universal-access-outline\" | \"unlink\" | \"unlock\" | \"unlock-outline\" | \"upload\" | \"user\" | \"user-circle\" | \"user-group\" | \"user-group-outline\" | \"user-lock\" | \"user-outline\" | \"user-pen-fancy-outline\" | \"user-plus\" | \"user-question-outline\" | \"user-shield\" | \"user-shield-outline\" | \"users\" | \"users-outline\" | \"wallet\" | \"wallet-outline\"; }",
                     "references": {
                         "MgActionMoreIconType": {
                             "location": "import",

package/dist/collection/components/molecules/mg-breadcrumb/mg-breadcrumb.conf.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,92 @@
+import { h } from "@stencil/core";
+import { initLocales } from "../../../locales";
+import { isValidString, toString } from "@mgdis/core-ui-helpers/dist/utils";
+/**
+ * Type guard for BreadcrumbItemType[]
+ * @param items - value to check
+ * @returns true if items is a non-empty array of valid BreadcrumbItemType (label required, href required except for last item)
+ */
+const isBreadcrumbItems = (items) => Array.isArray(items) &&
+    items.length > 0 &&
+    items.every((item, index) => typeof item === 'object' && item !== null && isValidString(item.label) && (index === items.length - 1 || isValidString(item.href)));
+export class MgBreadcrumb {
+    validateItems(newValue) {
+        if (newValue === undefined || !isBreadcrumbItems(newValue)) {
+            throw new Error(`<mg-breadcrumb> prop "items" is required and all values must be the same type, BreadcrumbItemType. Passed value: ${toString(newValue)}.`);
+        }
+    }
+    /***********
+     * Methods *
+     **********/
+    /**
+     * Render a single breadcrumb item (link or current page)
+     * @param item - The breadcrumb item
+     * @param isLast - Whether this item is the last in the list
+     * @returns The rendered link or span element
+     */
+    renderItem(item, isLast) {
+        if (isValidString(item.href)) {
+            return (h("a", { href: item.href, "aria-label": item.icon !== undefined ? item.label : undefined, "aria-current": isLast ? 'page' : undefined }, item.icon !== undefined ? h("mg-icon", { icon: item.icon }) : item.label));
+        }
+        return h("span", null, item.label);
+    }
+    /*************
+     * Lifecycle *
+     *************/
+    componentWillLoad() {
+        this.validateItems(this.items);
+        this.messages = initLocales(this.element).messages.breadcrumb;
+    }
+    render() {
+        return (h("nav", { key: '5181512072a7de6e161adcbb9988ae3407f61301', "aria-label": this.messages.label, class: "mg-c-breadcrumb" }, h("ol", { key: '2a4cec366a72027091ebcbccd78d552884005b93', class: "mg-c-breadcrumb__list" }, this.items.map((item, index) => {
+            var _a;
+            return (h("li", { key: `${index}-${(_a = item.href) !== null && _a !== void 0 ? _a : item.label}`, class: "mg-c-breadcrumb__list-item" }, this.renderItem(item, index === this.items.length - 1)));
+        }))));
+    }
+    static get is() { return "mg-breadcrumb"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-breadcrumb.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-breadcrumb.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "BreadcrumbItemType[]",
+                    "resolved": "BreadcrumbItemType[]",
+                    "references": {
+                        "BreadcrumbItemType": {
+                            "location": "import",
+                            "path": "./mg-breadcrumb.conf",
+                            "id": "src/components/molecules/mg-breadcrumb/mg-breadcrumb.conf.ts::BreadcrumbItemType"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Breadcrumb items (hierarchical order: root \u2192 current page)."
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get elementRef() { return "element"; }
+    static get watchers() {
+        return [{
+                "propName": "items",
+                "methodName": "validateItems"
+            }];
+    }
+}

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

@@ -53,7 +53,7 @@ export class MgDetails {
      * @returns HTML Element
      */
     render() {
-        return (h("details", { key: '17840b16bee77489062320bd7a679d6e4765a6f6', class: { 'mg-c-details': true, 'mg-c-details--empty-summary': this.isEmptySummary }, onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", { key: 'be713c922be8c97cdfb803cd1a59a34de708fe5e' }, h("slot", { key: 'cebdbaee05189542496143208945ab1f685702ef', name: "summary" }), h("span", { key: '7a2ad4790c1a1b905e5fc65fc518c133139c0889', class: "mg-c-details__toggle" }, h("mg-icon", { key: '628862cb0c1768c44c07033f2148ed7979bdad2b', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { key: 'b2bb91aa70f91ea654d944d7f00c21d6ab0e3ebf', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { key: '9432a42632e4c002d717a2851e372d6b40296c6f', class: "mg-c-details__details" }, h("slot", { key: '008041bac5a1c3bf5eb7a172537750e6fa38aabc', name: "details" }))));
+        return (h("details", { key: '4da17afd7a964a14b5b101bcfadc241be569d55a', class: { 'mg-c-details': true, 'mg-c-details--empty-summary': this.isEmptySummary }, onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", { key: '515d6c4e117b547fe80a310fb90e114900f645e8' }, h("slot", { key: '0c9c0dcc47dd418e34e541d878bfc03ca137c68d', name: "summary" }), h("span", { key: 'c94f52994843b10c1161c0d85f38f8cb917ea806', class: "mg-c-details__toggle" }, h("mg-icon", { key: '9421452572af3deb03146a8dfd189369b249ba2d', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { key: 'dbfb0b34da00e37f55ec07236611c2babdd6b7c5', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { key: '1b18b65a98e39a8663fa5d7e51eef5fbe2b92f76', class: "mg-c-details__details" }, h("slot", { key: '81c213594b1b67747db439624090784eaa5e6fcd', name: "details" }))));
     }
     static get is() { return "mg-details"; }
     static get encapsulation() { return "shadow"; }

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

@@ -133,7 +133,7 @@ export class MgFieldset {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '31ccb9f783687845080fc7f184cc54b7343fab65', label: this.legend, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: !this.legendHide, labelHeading: this.legendHeading, labelBorderDisplay: this.legendHeading && this.legendBorderDisplay, labelHide: this.legendHide, inputsOnBottom: this.legendHeading !== undefined, tooltip: this.tooltip, tooltipPosition: 'label', helpText: this.helpText, errorMessage: !this.valid && isValidString(this.errorMessage) ? this.errorMessage : undefined }, h("span", { key: 'eedf1c66eaf88bee037c11b812844bb5a92175c1', class: "mg-c-input__input-group" }, h("slot", { key: 'a28f6759a63873ef4a228820b4310b42fcf1d3c7' }))));
+        return (h("mg-input", { key: 'b0b16a170de87de91fa02a38371eb3dd6fe995d7', label: this.legend, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: !this.legendHide, labelHeading: this.legendHeading, labelBorderDisplay: this.legendHeading && this.legendBorderDisplay, labelHide: this.legendHide, inputsOnBottom: this.legendHeading !== undefined, tooltip: this.tooltip, tooltipPosition: 'label', helpText: this.helpText, errorMessage: !this.valid && isValidString(this.errorMessage) ? this.errorMessage : undefined }, h("span", { key: 'c449a5235da7b190d8d311469d15cebcfaf3badc', class: "mg-c-input__input-group" }, h("slot", { key: '6d8c60e2555bfd65c8c146233dc840a2d73597d5' }))));
     }
     static get is() { return "mg-fieldset"; }
     static get encapsulation() { return "shadow"; }

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

@@ -242,7 +242,7 @@ export class MgForm {
      * @returns HTML Element
      */
     render() {
-        return (h("form", { key: 'b2e3d218d978f1194b2c461ab75cae7d491bc2c3', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && h("p", { key: 'dd6db1a740f5fe525c3b652c2128aba6185970b8', innerHTML: this.requiredMessageText }), h("slot", { key: '5221d0c8fa5e30749c82d01490b402d9e46a63cd' }), !this.readonly && !this.disabled && h("slot", { key: 'fb2595b8c5df85b9cefac0f43e54e463d529fff4', name: "actions" })));
+        return (h("form", { key: 'b1a6b50f2bbb9b71cecd23d419771cf1b40e13b4', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && h("p", { key: '9c878f3730a06e1b683240057511b588edf5e887', innerHTML: this.requiredMessageText }), h("slot", { key: '3cf5ca0f07e2f3573615cf6566e230f4d5678b31' }), !this.readonly && !this.disabled && h("slot", { key: '6cbfd58e9600f7a9d9b55ec23bdd64877c03f0d7', name: "actions" })));
     }
     static get is() { return "mg-form"; }
     static get encapsulation() { return "shadow"; }

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

@@ -81,7 +81,7 @@ export class MgIllustratedMessage {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: 'f2bcf91e8d639736514a55a73d0182339eda1455', class: this.classCollection.join() }, h("div", { key: '46f862fc2a3daf2f217c55feebd41abb76252de2', class: "mg-c-illustrated-message__illustration" }, h("slot", { key: 'e2a0e9752a6739a684fd2668a8e8f0f792a0c38b', name: "illustration" })), h("div", { key: 'b037dd43ae59c07ca122b68b56dc3230a7aa94f2', class: "mg-c-illustrated-message__slots" }, h("slot", { key: '3a99f08cfb68bd51fbd015d213bb462acbfdda1a', name: "title" }), h("slot", { key: '14490ee1e7f9470f433c6249d502bd0a4dd77ca3', name: "details" }))));
+        return (h("div", { key: 'ed3b924f5c5a75706aef03ef8798cb699679012d', class: this.classCollection.join() }, h("div", { key: '59b7f7b3fe4ad808377094f93e8b6e86ba2f49ec', class: "mg-c-illustrated-message__illustration" }, h("slot", { key: 'd28aa873cd7025647f56f3a4ed62d9e35dde25d3', name: "illustration" })), h("div", { key: '3b150411a26531827c988a2d34e2990a2302f982', class: "mg-c-illustrated-message__slots" }, h("slot", { key: '8ffea6e50bf5dc4b870d414cb710fc88e0984f61', name: "title" }), h("slot", { key: 'ec85b4a50d28ddf14dbd6b0feff59e2030348b68', name: "details" }))));
     }
     static get is() { return "mg-illustrated-message"; }
     static get encapsulation() { return "shadow"; }

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

@@ -29,7 +29,7 @@ export class MgLoader {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: 'ad7aa5e4fa0704cf2fa174ae1ed960f72deb79e3', class: "mg-c-loader", "aria-live": "polite" }, h("mg-icon", { key: '47e6df1e459a74851bf370e460438b7bdc2ed3d0', icon: "loader", spin: true }), h("span", { key: '44d36e8492401cacb911f21fc707c1de03ae7a5d', class: { 'mg-u-visually-hidden': this.messageHide } }, this.message || this.messages.loader.inProgress)));
+        return (h("div", { key: 'da82988810c1e2916a2464299844cad674cd1f12', class: "mg-c-loader", "aria-live": "polite" }, h("mg-icon", { key: '45588ae8dd55ca582a4872d4c1e731bb00681c28', icon: "loader", spin: true }), h("span", { key: '3bc07f4bbf8995de61c019942c33c8076793096a', class: { 'mg-u-visually-hidden': this.messageHide } }, this.message || this.messages.loader.inProgress)));
     }
     static get is() { return "mg-loader"; }
     static get encapsulation() { return "shadow"; }

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

@@ -86,9 +86,9 @@ export class MgMessage {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: '9619c3fe51c76045c7c2ac7be24d71f317749f3d', class: this.classCollection.join() }, h("mg-card", { key: '270c8b9b0479a1762fb0b180b99bab8fcf92be40', shadow: true }, this.variantStyle === 'bar-left' && h("span", { key: '8d568740eb1a579cc8e3b447aa1df27691fd3473', class: "mg-c-message__bar" }), h("span", { key: '96bbd399ce78b312755f238d68f46c4c633b898a', class: "mg-c-message__icon" }, h("mg-icon", { key: 'ebaa2fd3d7d60ae8f9864afdb6fd0fa79e7b1d40', icon: this.getIcon() })), h("div", { key: '8ff7552abb158fa9787f8501b2068254455b8cbb', class: "mg-c-message__content" }, h("span", { key: '1af60ee247054d5ce5ae1d8bf0a33503cdebf857', class: "mg-c-message__content-slot" }, h("slot", { key: 'd35b2cca2ac8231e257972bb1251f318c10e6e2f' })), this.hasActions && [
+        return (h("div", { key: '516691c613b30edf92d43fb9596169459dd8058a', class: this.classCollection.join() }, h("mg-card", { key: '2be929dd6ed5458927b155d2f4c94fa15f9717e9', shadow: true }, this.variantStyle === 'bar-left' && h("span", { key: '604d5a7bd37abc571b40f8be09ac5dadbde69ec1', class: "mg-c-message__bar" }), h("span", { key: '837cce7c506997955de6efb4cffc53e5107fb602', class: "mg-c-message__icon" }, h("mg-icon", { key: '3fd70f747cad5605f129bec491aa1bfd5ea42a95', icon: this.getIcon() })), h("div", { key: 'bf0b166fee2c94014fc35980b06a45dfc91b8596', class: "mg-c-message__content" }, h("span", { key: '305f79545b87055a954831c7355e7685340d1aa6', class: "mg-c-message__content-slot" }, h("slot", { key: 'd25113f6305d8ceaa39d12672fecc4e4bf6ffb49' })), this.hasActions && [
             h("span", { class: "mg-c-message__content-separator", key: "content-separator" }),
-            h("span", { class: "mg-c-message__content-actions-slot", key: "content-actions-slot" }, h("slot", { key: '90a115e7e49ea5058da58d096184151f7aa7b7d8', name: "actions" })),
+            h("span", { class: "mg-c-message__content-actions-slot", key: "content-actions-slot" }, h("slot", { key: '744098ecfdcc8bb5f5e0b913884126498c21d3f0', name: "actions" })),
         ]))));
     }
     static get is() { return "mg-message"; }

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

@@ -106,11 +106,11 @@ export class MgModal {
      * @returns HTML Element
      */
     render() {
-        return (h("dialog", { key: 'e104352d5cdb04886d4db6bac62ecb772c6df004', role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), "aria-labelledby": this.titleId, ref: (el) => {
+        return (h("dialog", { key: 'fe7c7abaf53fbc5c87d2855cc72de2212dfe8642', role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), "aria-labelledby": this.titleId, ref: (el) => {
                 if (el !== null) {
                     this.dialog = el;
                 }
-            } }, h("mg-card", { key: 'd69679cb9118dfe4b141c1dcf6d1ef0fd53d9df9', shadow: true }, h("div", { key: '29e0a092a73d4e05c300c0840191823d3e3bbd30', class: "mg-c-modal__dialog" }, h("header", { key: 'c3a595adc778b67e5cafbbb964741ebc56c2dba5', class: "mg-c-modal__header" }, this.closeButton && (h("span", { key: 'f19447c5c29ae4fdaa46c2e35629622091b172d6', class: "mg-c-modal__close-button" }, h("mg-button", { key: 'af85956cc5e16e2c8c05156a4f54f63ad35b913a', "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, h("mg-icon", { key: 'fd6aa0394f8b39bacd50e7b087f1b155c38e1bc9', icon: "cross" })))), h("h1", { key: '0e80bdf6182c01257f487741661754a1224b802d', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), h("article", { key: 'c23c02cc9046545b4b851ce640ed8409fa190511', class: "mg-c-modal__content" }, h("slot", { key: 'db7c708e38ff3e7de6e4a7d299cd7a3c1e9d1e00' })), this.hasActions && (h("footer", { key: '4ba012a916db38e219287a5ea9ca7b4644dd96d9', class: "mg-c-modal__footer" }, h("slot", { key: 'c541075b02466d95defae7831c3fc7e4b786d7fc', name: "actions" })))))));
+            } }, h("mg-card", { key: '4b361ad45cd0b20253cf82e8f68c574429dd451c', shadow: true }, h("div", { key: '90f5490fb82f2900403f0a7549b338e884eea171', class: "mg-c-modal__dialog" }, h("header", { key: 'a58be90f41ad4448c387b1d18372aa31522d8d35', class: "mg-c-modal__header" }, this.closeButton && (h("span", { key: 'd9a0f9c1944b89b4a64f35fc9c1b70bea60f5423', class: "mg-c-modal__close-button" }, h("mg-button", { key: 'd7ecae6a2c2b2b094fea6b4a6d3c761f0f975b29', "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, h("mg-icon", { key: '54b91decfd0deb5e452e03c23f68bac58d97677a', icon: "cross" })))), h("h1", { key: '7dc2519bdf97ebc5cc18505fbbd347c7b1a4c336', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), h("article", { key: 'b6a27c0bb6e5a350e10addbd0325b04626b07239', class: "mg-c-modal__content" }, h("slot", { key: '41acebdafae6289d2f03fc3226eb7f3c4334e33f' })), this.hasActions && (h("footer", { key: '04a934a044bfbfa64f65642361e1962d2f599bf9', class: "mg-c-modal__footer" }, h("slot", { key: '8d72488a4095c245b638d7d0e5fdbda77fa5ab01', name: "actions" })))))));
     }
     static get is() { return "mg-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -224,7 +224,7 @@ export class MgPanel {
      */
     render() {
         const headerId = `${this.identifier}-header`;
-        return (h("section", { key: '6604c4a895a244a5e47d6ec138ddc0d931c07d59', class: this.classCollection.join(), id: this.identifier }, h("mg-card", { key: '28d2de8b8796dbd42b9da5302c4e7e4d3503b2ae', shadow: this.shadow }, h("header", { key: '74fd2c618f57a0e3089f6908b184223c1586cf00', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { key: '811fffa80ba75ed57ffecbcf7bc4e6f94f75faa2', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", { key: '27b372c17275726113a02b8e6bda9333a73b806f' })))));
+        return (h("section", { key: 'e92b270e15717a1b6ab7d938674ccd785fe3ee97', class: this.classCollection.join(), id: this.identifier }, h("mg-card", { key: '40647ea277463f5e915c2fb5aa982f22527545ea', shadow: this.shadow }, h("header", { key: '604611af47d683cf1f0d3ffc8b5873be390e3fb9', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { key: 'ff640071dd4813aa113f5928b2a0350f4528a22c', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", { key: 'fe54d2ca332c573e8dfa782a3e72454501b47adf' })))));
     }
     static get is() { return "mg-panel"; }
     static get encapsulation() { return "shadow"; }

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

@@ -46,7 +46,7 @@ export class MgPopoverContent {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: 'c87fe52d52b80954170963fd1378b3a05313f9c6' }, h("mg-card", { key: 'a38755a5a7055d4bd4166531326b1be245d2906f', class: this.classCollection.join(), shadow: true }, this.closeButton && (h("mg-button", { key: '823e99beb15aa19f6f2f7cee2c5e1088cc116425', "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { key: '70daf81e59533585b6a051a6d97539a75833432e', icon: "cross" }))), h("div", { key: 'cccf70c8fba6906e6724629642383fad0c98656e', class: "mg-c-popover-content__title" }, h("slot", { key: 'b05acb47b32d27d1629d39451e4a786d2f404406', name: "title" })), h("slot", { key: '40de167b1fb77c7d8fc557f60cf176c0991e991d', name: "content" })), h("slot", { key: 'c6c1305d5ff51d2af0d56b1199731cd41645c99d', name: "arrow" })));
+        return (h(Host, { key: '56962c792e0015e1b52f8121914829b7da136283' }, h("mg-card", { key: '05b557704fd10e1be87e1931fe672f5c29d3afc4', class: this.classCollection.join(), shadow: true }, this.closeButton && (h("mg-button", { key: 'd2fc38c5be7ea92d0d0efc36133d6c683baa4e68', "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { key: '5d2091d064f3908a291af3b90acaddc59e2b9268', icon: "cross" }))), h("div", { key: 'd599231cfe330cdbc73f4bf7553b2cc66baf4889', class: "mg-c-popover-content__title" }, h("slot", { key: 'fbb836bac9d9f5f2327ecba13ddc3b1cab974930', name: "title" })), h("slot", { key: 'bdb29d255f35931efa24be57c13c4303ba326778', name: "content" })), h("slot", { key: 'b09b667ea04096baaeac07fac9097a3a22335f2b', name: "arrow" })));
     }
     static get is() { return "mg-popover-content"; }
     static get encapsulation() { return "shadow"; }