@mgdis/mg-components 6.20.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

@@ -141,7 +141,7 @@ export class MgActionMore {
                     [`${this.classBase}__chevron--rotate`]: this.expanded === true,
                 } }, h("mg-icon", { icon: "chevron-down" })));
         }
-        return (h(Host, { key: 'd75e1a5326ea3a1414f8048858e5ee3fee51760e', "data-mg-popover-guard": this.mgPopoverIdentifier }, h("span", { key: 'b671a6c35cb3a9fa6eb7b2329f0f595e78b573b5', class: this.classBase }, h("mg-popover", { key: '38a38123d34ca868d0587123c2ab6b11550da8f0', identifier: this.mgPopoverIdentifier, display: this.expanded, "onDisplay-change": this.handleDisplayChange }, h("mg-button", { key: '030b9360917b79edfc8df325d5ca5cfa08356c81', variant: this.button.variant, isIcon: this.button.isIcon, disabled: this.button.disabled, type: "button", label: buttonLabel, onClick: this.handleButton }, this.icon && h("mg-icon", Object.assign({ key: 'a47ca6b078ca160d1cbb13c964df3abede5f373c' }, this.icon)), !this.button.isIcon && buttonContent), h("div", { key: 'ac38c705625cb5716a7e8aabd25d596db3d5adef', slot: "content" }, h("mg-menu", { key: 'cd382a65f69ba3c303a74d6b7444fcf0ccf9d1c5', direction: directions.VERTICAL, label: this.messages.label }, this.items.map(item => {
+        return (h(Host, { key: 'bef7d0e0c5a991f321ca930d65fa458873fc7564', "data-mg-popover-guard": this.mgPopoverIdentifier }, h("span", { key: '4e47d1513749cc1ac15ef8febd2fb914e362bbee', class: this.classBase }, h("mg-popover", { key: 'ab6dfc93422f03b49a78d2896196aa6901841aef', identifier: this.mgPopoverIdentifier, display: this.expanded, "onDisplay-change": this.handleDisplayChange }, h("mg-button", { key: '921f17c4ede5f1783dc336429539b0b082902fdd', variant: this.button.variant, isIcon: this.button.isIcon, disabled: this.button.disabled, type: "button", label: buttonLabel, onClick: this.handleButton }, this.icon && h("mg-icon", Object.assign({ key: '19bf9e015cbd82d8dffc62269de735607ab4f2bb' }, this.icon)), !this.button.isIcon && buttonContent), h("div", { key: '56a43a5adebd31264742c0ef8905ccb0bd8fb581', slot: "content" }, h("mg-menu", { key: '70520957ac07a3190ef753ee435996af96dbc5b5', direction: directions.VERTICAL, label: this.messages.label }, this.items.map(item => {
             var _a, _b;
             return isMgActionMoreDivider(item) ? (h("mg-divider", { class: "mg-c-action-more__divider", key: "divider", "full-width": true })) : (h("mg-menu-item", { key: item.label, status: item.status || Status.VISIBLE, target: item.target, href: item.href,
                 // eslint-disable-next-line react/jsx-no-bind
@@ -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-alert/mg-alert.js

@@ -142,7 +142,7 @@ export class MgAlert {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-message", { key: '4b974a10812e527a2c481ec00f22324ab490a135', class: this.classCollection.join(), role: ['info', 'success'].includes(this.variant) ? 'status' : 'alert', variant: this.variant, variantStyle: this.variantStyle }, h("slot", { key: '9133a3cca56d67e75e8c3f018c52838c31e908f2' }), this.hasActions ? (h("span", { slot: "actions" }, h("slot", { name: "actions" }))) : (h("span", { class: "mg-c-alert__close-button" }, h("mg-button", { "is-icon": true, variant: "flat", label: this.messages.alert.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" }))))));
+        return (h("mg-message", { key: '6085a45d00c4762bae88d98e89f44c20d5f9b6c4', class: this.classCollection.join(), role: ['info', 'success'].includes(this.variant) ? 'status' : 'alert', variant: this.variant, variantStyle: this.variantStyle }, h("slot", { key: '55491d1b41609883958680c14a2ddb8dd84a3bd4' }), this.hasActions ? (h("span", { slot: "actions" }, h("slot", { name: "actions" }))) : (h("span", { class: "mg-c-alert__close-button" }, h("mg-button", { "is-icon": true, variant: "flat", label: this.messages.alert.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" }))))));
     }
     static get is() { return "mg-alert"; }
     static get encapsulation() { return "shadow"; }

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: 'bbaac6909fa5f3fbd3236b2a8ace0f7c80b2580b', 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: '2ed8228b63403dd9b386bf3fa70c9094516b6f0e' }, h("slot", { key: '5461d77d2b2869b14737a5c7cfc40a1f9584ee03', name: "summary" }), h("span", { key: 'bb089365bdeaa7b934b97cff6f5f7c67587048e1', class: "mg-c-details__toggle" }, h("mg-icon", { key: 'dc1a30338703ad4182d50f9953a903ae0f68ecb1', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { key: 'a32cbaf9e38b71540deeaa8980895c34a7288ecb', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { key: 'b9c2bc7d681da8ac8b4dec5ff25287bc68975fb6', class: "mg-c-details__details" }, h("slot", { key: '069f05b4c133ff13055681e0b05bb98744303137', 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

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { ClassList, isValidString } from "@mgdis/core-ui-helpers/dist/utils";
-import { classReadonly } from "../inputs/mg-input/mg-input.conf";
+import { classReadonly, isMgInputFile } from "../inputs/mg-input/mg-input.conf";
 export class MgFieldset {
     constructor() {
         /**
@@ -44,7 +44,16 @@ export class MgFieldset {
             // Set inputs readonly or disabled based on form configuration
             // Othewise listen to events
             this.mgInputs.forEach(input => {
-                if (this.readonly) {
+                // manage special display case for mg-input-file
+                if (input.nodeName === 'MG-INPUT-FILE') {
+                    if (this.readonly) {
+                        input.setAttribute('hidden', '');
+                    }
+                    else {
+                        input.removeAttribute('hidden');
+                    }
+                }
+                if (this.readonly && !isMgInputFile(input)) {
                     input.readonly = true;
                 }
                 else if (this.disabled) {
@@ -124,7 +133,7 @@ export class MgFieldset {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: 'b8b7c203bb2ed22cc9344389af5a6ae8d85af6d5', 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: 'c0e7480b14b0a8e136dd951bdce7275b65b59b48', class: "mg-c-input__input-group" }, h("slot", { key: '021e7b126cef9437e64622d8ef59219b09c06e9f' }))));
+        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

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import { createID, ClassList, toString, isValideID } from "@mgdis/core-ui-helpers/dist/utils";
 import { initLocales } from "../../../locales";
+import { isMgInputFile } from "../inputs/mg-input/mg-input.conf";
 import { requiredMessageStatus, roles } from "./mg-form.conf";
 /**
  * @slot - Form content
@@ -111,7 +112,16 @@ export class MgForm {
                 if (this.labelOnTop) {
                     input.labelOnTop = true;
                 }
-                if (this.readonly) {
+                // manage special display case for mg-input-file
+                if (input.nodeName === 'MG-INPUT-FILE') {
+                    if (this.readonly) {
+                        input.setAttribute('hidden', '');
+                    }
+                    else {
+                        input.removeAttribute('hidden');
+                    }
+                }
+                if (this.readonly && !isMgInputFile(input)) {
                     input.readonly = true;
                 }
                 else if (this.disabled) {
@@ -232,7 +242,7 @@ export class MgForm {
      * @returns HTML Element
      */
     render() {
-        return (h("form", { key: '8b698b2a33af00e36691abab5adff5488b736218', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && h("p", { key: '2e1fb5c4030ecb99d1f18c57d5c3fe238db4d12e', innerHTML: this.requiredMessageText }), h("slot", { key: '568fb8ac9ab0e3521899c05472592ebd15cc91fa' }), !this.readonly && !this.disabled && h("slot", { key: 'd4f38320de58f3b1d491083a34d1b5366d22b935', 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: 'c9d8c8bfd2792b1cf5e78ab9d168d597b20e9a1e', class: this.classCollection.join() }, h("div", { key: 'cc8fa03147b9e59e6e8e015be9ed2b8dddd92ded', class: "mg-c-illustrated-message__illustration" }, h("slot", { key: '83a4ec2223c4e74511beb7c0abfa10e77cee425d', name: "illustration" })), h("div", { key: 'dbb4d13ca5324cab889fa2acc9b9b22522d7a8ec', class: "mg-c-illustrated-message__slots" }, h("slot", { key: '9e74d84becf29539ec9c37e8ad1e317714f3c86c', name: "title" }), h("slot", { key: 'ae97d25c19b76ca092560d2555ebd6a87f542ffe', 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: '739b4cbacd8a8da056dbb1445c40fac2cf26766a', class: "mg-c-loader", "aria-live": "polite" }, h("mg-icon", { key: '95d3cbf26fcd6dbf0dad4853bf55aa66385f1aba', icon: "loader", spin: true }), h("span", { key: 'f6322cd3054d8976bd2ec24f86a2d6bb60ca7ae1', 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"; }