@mgdis/mg-components 6.21.0 → 6.22.1

package/dist/collection/components/molecules/inputs/mg-input-toggle/mg-input-toggle.js

@@ -270,7 +270,7 @@ export class MgInputToggle {
      */
     render() {
         const currentOption = this.options[this.getCurrentOptionIndex(this.value)];
-        return (h("mg-input", { key: '75a58e79ddd78a6a5656b6a3ef497087fbbb0638', label: this.label, helpText: this.helpText, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, errorMessage: this.errorMessage }, this.readonly ? (currentOption && h("b", { class: "mg-c-input__readonly-value" }, currentOption.title)) : (h("button", { type: "button", role: "switch", "aria-checked": this.isChecked(this.value).toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.handleSwitchButton, ref: el => {
+        return (h("mg-input", { key: '3f440a16156b4fc89590addba025b350218ccf9c', label: this.label, helpText: this.helpText, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, errorMessage: this.errorMessage }, this.readonly ? (currentOption && h("b", { class: "mg-c-input__readonly-value" }, currentOption.title)) : (h("button", { type: "button", role: "switch", "aria-checked": this.isChecked(this.value).toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.handleSwitchButton, ref: el => {
                 if (el !== null)
                     this.button = el;
             } }, h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-1" })), h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-2" }))))));
@@ -299,7 +299,8 @@ export class MgInputToggle {
                         "ToggleOption": {
                             "location": "import",
                             "path": "../../../../types",
-                            "id": "src/types/index.ts::Option"
+                            "id": "src/types/index.ts::Option",
+                            "referenceLocation": "Option"
                         }
                     }
                 },
@@ -322,7 +323,8 @@ export class MgInputToggle {
                         "ToggleOption": {
                             "location": "import",
                             "path": "../../../../types",
-                            "id": "src/types/index.ts::Option"
+                            "id": "src/types/index.ts::Option",
+                            "referenceLocation": "Option"
                         }
                     }
                 },
@@ -542,7 +544,8 @@ export class MgInputToggle {
                         "TooltipPosition": {
                             "location": "import",
                             "path": "../mg-input/mg-input.conf",
-                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::TooltipPosition"
+                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::TooltipPosition",
+                            "referenceLocation": "TooltipPosition"
                         }
                     }
                 },

package/dist/collection/components/molecules/internals/mg-item-more/mg-item-more.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 import { toString } from "@mgdis/core-ui-helpers/dist/utils";
 import { OverflowBehavior } from "../../../../utils/behaviors.utils";
-import { directions, sizes } from "../../menus/mg-menu/mg-menu.conf";
+import { directions } from "../../menus/mg-menu/mg-menu.conf";
 import { initLocales } from "../../../../locales";
 /**
  * @internal
@@ -31,10 +31,6 @@ export class MgItemMore {
         else if (typeof newValue.label !== 'string')
             this.slotlabel.label = this.messages.menuLabel;
     }
-    validateSize(newValue) {
-        if (newValue && !sizes.includes(newValue))
-            throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type. Passed value: ${toString(newValue)}.`);
-    }
     /*************
      * Lifecycle *
      *************/
@@ -47,7 +43,6 @@ export class MgItemMore {
         // validate props
         this.validateIcon(this.icon);
         this.validateSlotLabel(this.slotlabel);
-        this.validateSize(this.size);
     }
     /**
      * Ensure parent DOM is fully rendered with timeout method before parse elements
@@ -80,7 +75,7 @@ export class MgItemMore {
      */
     render() {
         const menuItemIdentifier = 'mg-item-more';
-        return (h(Host, { key: '18219f5c906bb2c42dca842de120d41338a31872', role: "listitem", "data-mg-popover-guard": `${menuItemIdentifier}-popover` }, this.parentMenu && (h("mg-menu-item", { key: '2efd90d30cc2f51c9f5bff8512c765876730ca25', "data-overflow-more": true, "data-size": this.parentMenu.size, "data-style-direction": directions.HORIZONTAL, identifier: menuItemIdentifier }, h("mg-icon", { key: '6d4be9284b63935d298dfe8bf1ba50c70d9b140d', icon: this.icon.icon, size: this.size, slot: "image" }), h("span", { key: '52cd9091b29710fb66d2c421ae64bd31996d3395', class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), h("mg-menu", { key: 'ea3152d9de22b209ed016e51e40c658dc6c58cd2', direction: directions.VERTICAL, label: this.messages.menuLabel, size: this.size, ref: ref => {
+        return (h(Host, { key: '85f8bf18855610a31c4afc0051886c5020d9a1b6', role: "listitem", "data-mg-popover-guard": `${menuItemIdentifier}-popover` }, this.parentMenu && (h("mg-menu-item", { key: '10d8d6ca20df0cba51f601bdafe0260e48842fa3', "data-overflow-more": true, "data-style-direction": directions.HORIZONTAL, identifier: menuItemIdentifier, isIcon: !this.slotlabel.display }, h("mg-icon", { key: 'f957f3179d07df707e871e44e26eddcb911521e4', icon: this.icon.icon, slot: "image" }), h("span", { key: 'af9d0b934313b28983b650d58baa5b83b937836a', class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), h("mg-menu", { key: '181445f2ee43b78ce041225f2394618c8eacf5d1', direction: directions.VERTICAL, label: this.messages.menuLabel, ref: ref => {
                 if (ref !== null)
                     this.itemMoreContainer = ref;
             } })))));
@@ -104,12 +99,13 @@ export class MgItemMore {
                 "mutable": false,
                 "complexType": {
                     "original": "IconType",
-                    "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\" | \"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\" | \"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\" | \"copy-file\" | \"copy-file-outline\" | \"copy-outline\" | \"credit-card\" | \"cross\" | \"cross-circle\" | \"cross-circle-outline\" | \"dashboard\" | \"dashboard-outline\" | \"download\" | \"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\" | \"history\" | \"home\" | \"home-outline\" | \"info-circle\" | \"info-circle-outline\" | \"interrogation-circle\" | \"interrogation-circle-outline\" | \"key\" | \"laptop\" | \"layers\" | \"life-ring\" | \"lines-rectangle\" | \"lines-rectangle-outline\" | \"link\" | \"list\" | \"loader\" | \"location\" | \"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\" | \"pause-outline\" | \"pen\" | \"pen-circle\" | \"pen-fancy\" | \"pen-fancy-files-outline\" | \"pen-fancy-outline\" | \"pen-outline\" | \"phone\" | \"phone-outline\" | \"picture\" | \"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\" | \"table\" | \"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": {
                         "IconType": {
                             "location": "import",
                             "path": "./mg-item-more.conf",
-                            "id": "src/components/molecules/internals/mg-item-more/mg-item-more.conf.ts::IconType"
+                            "id": "src/components/molecules/internals/mg-item-more/mg-item-more.conf.ts::IconType",
+                            "referenceLocation": "IconType"
                         }
                     }
                 },
@@ -133,7 +129,8 @@ export class MgItemMore {
                         "SlotLabelType": {
                             "location": "import",
                             "path": "./mg-item-more.conf",
-                            "id": "src/components/molecules/internals/mg-item-more/mg-item-more.conf.ts::SlotLabelType"
+                            "id": "src/components/molecules/internals/mg-item-more/mg-item-more.conf.ts::SlotLabelType",
+                            "referenceLocation": "SlotLabelType"
                         }
                     }
                 },
@@ -146,31 +143,6 @@ export class MgItemMore {
                 "getter": false,
                 "setter": false,
                 "defaultValue": "{ display: false }"
-            },
-            "size": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "SizeType",
-                    "resolved": "\"large\" | \"medium\" | \"xlarge\"",
-                    "references": {
-                        "SizeType": {
-                            "location": "import",
-                            "path": "./mg-item-more.conf",
-                            "id": "src/components/molecules/internals/mg-item-more/mg-item-more.conf.ts::SizeType"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Define component child menu size."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "size"
             }
         };
     }
@@ -187,9 +159,6 @@ export class MgItemMore {
             }, {
                 "propName": "slotlabel",
                 "methodName": "validateSlotLabel"
-            }, {
-                "propName": "size",
-                "methodName": "validateSize"
             }];
     }
 }

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

@@ -5,7 +5,3 @@ export const directions = {
     VERTICAL: 'vertical',
     HORIZONTAL: 'horizontal',
 };
-/**
- * List of all possibles sizes
- */
-export const sizes = ['medium', 'large', 'xlarge'];

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: 'c16a69485fabb9a7a91efe032501fafa98862882', role: "list", "aria-label": this.label }, h("slot", { key: 'f5bca6fdb93d9273e5fcc753d2c58c0a0504c0d0' })));
     }
     static get is() { return "mg-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -211,7 +198,8 @@ export class MgMenu {
                         "Direction": {
                             "location": "import",
                             "path": "../../../../types",
-                            "id": "src/types/index.ts::Direction"
+                            "id": "src/types/index.ts::Direction",
+                            "referenceLocation": "Direction"
                         }
                     }
                 },
@@ -227,54 +215,49 @@ 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",
+                            "referenceLocation": "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 +272,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()),
@@ -431,7 +439,8 @@ export class MgMenuItem {
                         "TargetType": {
                             "location": "import",
                             "path": "./mg-menu-item.conf",
-                            "id": "src/components/molecules/menus/mg-menu-item/mg-menu-item.conf.ts::TargetType"
+                            "id": "src/components/molecules/menus/mg-menu-item/mg-menu-item.conf.ts::TargetType",
+                            "referenceLocation": "TargetType"
                         }
                     }
                 },
@@ -456,7 +465,8 @@ export class MgMenuItem {
                         "MgMenuStatusType": {
                             "location": "import",
                             "path": "./mg-menu-item.conf",
-                            "id": "src/components/molecules/menus/mg-menu-item/mg-menu-item.conf.ts::MgMenuStatusType"
+                            "id": "src/components/molecules/menus/mg-menu-item/mg-menu-item.conf.ts::MgMenuStatusType",
+                            "referenceLocation": "MgMenuStatusType"
                         }
                     }
                 },
@@ -472,6 +482,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 +526,7 @@ export class MgMenuItem {
     }
     static get states() {
         return {
-            "size": {},
-            "navigationButtonClassList": {},
+            "classNavigationButtonClassList": {},
             "direction": {},
             "isItemMore": {},
             "hasChildren": {},
@@ -548,12 +577,12 @@ export class MgMenuItem {
             }, {
                 "propName": "status",
                 "methodName": "watchStatus"
+            }, {
+                "propName": "isIcon",
+                "methodName": "watchIsIcon"
             }, {
                 "propName": "expanded",
                 "methodName": "watchExpanded"
-            }, {
-                "propName": "size",
-                "methodName": "watchSize"
             }, {
                 "propName": "direction",
                 "methodName": "validateDirection"