@mgdis/mg-components 6.3.0 → 6.5.0

package/dist/components/mg-menu-item2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { m as me, q as qe, X as Xe, G as Ge, Y as Ye, t as tt } from './index.es.js';
+import { G as Ge, K as Ke, m as me, X as Xe, V as Ve, s as st } from './index.es.js';
 import { i as initLocales } from './index2.js';
 import { d as defineCustomElement$6 } from './mg-badge2.js';
 import { d as defineCustomElement$5 } from './mg-button2.js';
@@ -42,7 +42,6 @@ const MgMenuItem = /*@__PURE__*/ proxyCustomElement(class MgMenuItem extends HTM
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.statusChange = createEvent(this, "status-change", 7);
         this.itemLoaded = createEvent(this, "item-loaded", 7);
         this.itemUpdated = createEvent(this, "item-updated", 7);
         /************
@@ -50,15 +49,44 @@ const MgMenuItem = /*@__PURE__*/ proxyCustomElement(class MgMenuItem extends HTM
          ************/
         this.name = 'mg-menu-item';
         this.navigationButton = 'mg-c-menu-item__navigation-button';
+        /************
+         * Props *
+         ************/
+        /**
+         * Identifier is used to control mg-popover
+         */
+        this.identifier = Ge('mg-menu-item');
+        /**
+         * Define menu-item status.
+         */
+        this.status = Status.VISIBLE;
+        /**
+         * Define menu-item content expanded.
+         */
+        this.expanded = false;
+        /**********
+         * States *
+         *********/
+        /**
+         * Define menu-item size.
+         */
+        this.size = 'medium';
+        /**
+         * Component button classes
+         */
+        this.navigationButtonClassList = new Ke([this.navigationButton]);
+        /**
+         * Does component have children.
+         */
+        this.hasChildren = false;
         /***********
          * Methods *
          **********/
         /**
-         * Toggle expanded prop value
+         * Get parent menu
+         * @returns parent menu
          */
-        this.toggleExpanded = () => {
-            this.expanded = !this.expanded;
-        };
+        this.getParentMenu = () => this.element.closest('mg-menu');
         /**
          * Does an Element have given Status
          * @param mgMenuItemElement - to parse
@@ -66,6 +94,24 @@ const MgMenuItem = /*@__PURE__*/ proxyCustomElement(class MgMenuItem extends HTM
          * @returns true if element with status is found
          */
         this.hasStatus = (mgMenuItemElement, status) => mgMenuItemElement.status === status;
+        /**
+         * Condition to know if component should display a mg-popover
+         * @returns truthy if component display popover
+         */
+        this.hasPopover = () => this.isDirection(Direction.HORIZONTAL) && (this.isInMainMenu() && Array.from(this.element.children).some(element => !element.querySelector('[slot]')) || this.isItemMore) && this.href === undefined;
+        /**
+         * Method to control if one of component children have active status
+         * @returns truthy if component has active child
+         */
+        this.hasActiveChild = () => {
+            var _a;
+            return Array.from(((_a = this.element.querySelector('mg-menu')) === null || _a === void 0 ? void 0 : _a.children) || []).some((element) => element.nodeName === 'MG-MENU-ITEM' && this.hasStatus(element, Status.ACTIVE) && !element.hasAttribute('hidden'));
+        };
+        /**
+         * Is component an interactive item
+         * @returns truthy if element is clickable
+         */
+        this.isInteractiveItem = () => this.hasChildren || !me(this.href);
         /**
          * Is component contextual direction match the given direction
          * @param direction - in parent menu
@@ -73,6 +119,11 @@ const MgMenuItem = /*@__PURE__*/ proxyCustomElement(class MgMenuItem extends HTM
          * @returns true is direction match the direction propertie
          */
         this.isDirection = (direction, compareWith = this.direction) => direction === compareWith;
+        /**
+         * Does component is in main menu
+         * @returns true if component is in main menu
+         */
+        this.isInMainMenu = () => this.getParentMenu() !== null && this.element.parentElement.closest('mg-menu-item') === null;
         /**
          * Update displayNotificationBadge
          * current component notification badge have priority over the slot badge when submenu contain badge
@@ -83,22 +134,34 @@ const MgMenuItem = /*@__PURE__*/ proxyCustomElement(class MgMenuItem extends HTM
                 childMenu !== null && Array.from(childMenu.children).some((subItem) => subItem.querySelector('mg-badge') !== null && !subItem.hasAttribute('hidden'));
         };
         /**
-         * Method to control if one of component children have active status
-         * @returns truthy if component has active child
+         * Update expanded prop
+         * @param newValue - expanded new value
          */
-        this.hasActiveChild = () => {
-            var _a;
-            return Array.from(((_a = this.element.querySelector('mg-menu')) === null || _a === void 0 ? void 0 : _a.children) || []).some((element) => element.nodeName === 'MG-MENU-ITEM' && this.hasStatus(element, Status.ACTIVE) && !element.hasAttribute('hidden'));
+        this.updateExpanded = (newValue) => {
+            if (this.isInteractiveItem()) {
+                // item is always expanded in vertical menu when has active child
+                this.expanded = this.isDirection(Direction.VERTICAL) && this.hasActiveChild() || newValue;
+            }
+        };
+        /**
+         * Update status
+         * @param guard - status to exclude from process in addition to [Status.HIDDEN, Status.DISABLED] . Default: [].
+         */
+        this.updateStatus = (guard = []) => {
+            if (![Status.HIDDEN, Status.DISABLED, ...guard].includes(this.status)) {
+                this.status = this.hasActiveChild() ? Status.ACTIVE : Status.VISIBLE;
+            }
         };
         /**
-         * Validate slots
+         * Update slots
          * @param guard - prevent action with guard. Default: false.
          */
-        this.validateSlot = (guard = false) => {
+        this.updateSlot = (guard = false) => {
             // slot title AND metadata validation
             // add title on label AND metada slots due to text-overflow on these element
-            if (Array.from(this.element.children).find(child => child.getAttribute('slot') === 'label') === undefined)
+            if (Array.from(this.element.children).find(child => child.getAttribute('slot') === 'label') === undefined) {
                 throw new Error(`<${this.name}> slot "label" is required.`);
+            }
             ['label', 'metadata'].forEach(slot => {
                 Array.from(this.element.querySelectorAll(`[slot="${slot}"]`)).forEach(element => {
                     if (!me(element.textContent))
@@ -109,39 +172,22 @@ const MgMenuItem = /*@__PURE__*/ proxyCustomElement(class MgMenuItem extends HTM
             });
         };
         /**
-         * Update status
-         * @param guard - status to exclude from process in addition to [Status.HIDDEN, Status.DISABLED] . Default: [].
+         * Update menu item
+         * @param guard - prevent action with guard
          */
-        this.updateStatus = (guard = []) => {
-            if (![Status.HIDDEN, Status.DISABLED, ...guard].includes(this.status)) {
-                this.status = this.hasActiveChild() ? Status.ACTIVE : Status.VISIBLE;
-            }
-        };
-        /**
-         * Init event-listeners
-         */
-        this.initListeners = () => {
-            var _a;
-            // manage first sub-level menu-items
-            Array.from(((_a = this.element.querySelector('mg-menu')) === null || _a === void 0 ? void 0 : _a.children) || []).forEach(item => {
-                if (item.nodeName === 'MG-MENU-ITEM') {
-                    // manage child menu listener
-                    item.addEventListener('status-change', () => {
-                        this.updateStatus();
-                    });
-                }
-            });
+        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);
+            this.updatePopoverGuard();
+            this.updateDisplayNotificationBadge();
         };
-        /**
-         * Get mg-popover identifier
-         * @returns generated mg-popover identifier
-         */
-        this.getPopoverIdentifier = () => `${this.identifier}-popover`;
-        /**
-         * Condition to know if component should display a mg-popover
-         * @returns truthy if component display popover
-         */
-        this.displayPopover = () => this.isDirection(Direction.HORIZONTAL) && this.hasChildren && this.href === undefined;
         /************
          * Handlers *
          ************/
@@ -150,106 +196,123 @@ const MgMenuItem = /*@__PURE__*/ proxyCustomElement(class MgMenuItem extends HTM
          * @param event - click on element
          */
         this.handleElementCLick = (event) => {
-            if ((this.hasChildren && !this.isInMainMenu) || this.status === Status.DISABLED) {
+            if (this.status === Status.DISABLED) {
                 event.preventDefault();
                 event.stopPropagation();
             }
-            // toggle expanded when mg-menu-item has child items
-            if (this.hasChildren)
-                this.toggleExpanded();
+            // for non "poperized" menu-item we toggle expanded manualy
+            this.updateExpanded(!this.expanded);
+            // when item is the last clickable item we close the parent popover
+            if (!this.isInteractiveItem()) {
+                const closePopover = (element) => {
+                    if (!element)
+                        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'));
+                    }
+                };
+                closePopover(this.element);
+            }
         };
         /**
          * Handle popover element display-change event
          * @param event - popover display event
          */
         this.handlePopoverDisplay = (event) => {
-            this.expanded = event.detail;
+            this.updateExpanded(event.detail);
         };
         /**
          * Render slot
          * @returns HTML Element
          */
         this.renderSlot = () => h("slot", null);
-        this.identifier = qe('mg-menu-item');
-        this.href = undefined;
-        this.target = undefined;
-        this.status = Status.VISIBLE;
-        this.expanded = false;
-        this.size = 'medium';
-        this.navigationButtonClassList = new Xe([this.navigationButton]);
-        this.direction = undefined;
-        this.isInMainMenu = undefined;
-        this.isItemMore = undefined;
-        this.hasChildren = false;
-        this.displayNotificationBadge = undefined;
     }
     watchIdentifier(newValue) {
-        if (!Ge(newValue)) {
-            console.error(`<mg-menu-item> prop "identifier" value is invalid. Passed value: ${Ye(newValue)}.`);
+        if (!Xe(newValue)) {
+            console.error(`<mg-menu-item> prop "identifier" value is invalid. Passed value: ${Ve(newValue)}.`);
+        }
+        else {
+            this.popoverIdentifier = `${this.identifier}-popover`;
         }
     }
     watchTarget(newValue) {
         if (newValue && !targets.includes(newValue)) {
-            throw new Error(`<mg-link> prop "target" must be one of: ${targets.join(', ')}. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<mg-link> prop "target" must be one of: ${targets.join(', ')}. Passed value: ${Ve(newValue)}.`);
         }
     }
-    validateStatus(newValue, oldValue) {
-        if (oldValue !== undefined) {
+    watchStatus(newValue, oldValue) {
+        if (oldValue !== undefined)
             this.navigationButtonClassList.delete(`${this.navigationButton}--${oldValue}`);
-        }
         this.navigationButtonClassList.add(`${this.navigationButton}--${newValue}`);
-        this.statusChange.emit(newValue);
     }
-    validateExpanded(newValue) {
-        if (typeof newValue !== 'boolean')
-            throw new Error(`<${this.name}> prop "expanded" must be a boolean. Passed value: ${Ye(newValue)}.`);
-        // if menu-item has sub-menu we have to apply some updates:
-        if (this.hasChildren) {
-            const subItems = Array.from(this.element.querySelectorAll(this.name));
-            if (!newValue) {
-                // - when main menu item is NOT expanded we need NOT expanded sub-items and NOT expanded sub-content
-                subItems.forEach(item => {
-                    item.expanded = false;
-                });
-            }
-            else if (this.element.querySelector(`${this.name}[status="${Status.ACTIVE}"]`) !== null) {
-                // - when expanded and contain an active item parents are expended too
-                subItems.forEach(item => {
-                    if (this.hasStatus(item, Status.ACTIVE)) {
-                        item.expanded = true;
-                    }
-                });
-            }
+    watchExpanded(newValue) {
+        if (typeof newValue !== 'boolean') {
+            throw new Error(`<${this.name}> prop "expanded" must be a boolean. Passed value: ${Ve(newValue)}.`);
+        }
+        else {
+            this.updateExpanded(newValue);
+            // when expanded all actives sub-items need to be expanded and non active closed
+            Array.from(this.element.querySelectorAll('mg-menu-item')).forEach(item => {
+                if (item !== this.element)
+                    item.expanded = newValue ? this.hasStatus(item, Status.ACTIVE) : false;
+            });
         }
     }
-    validateSize(newValue, oldValue) {
-        this.navigationButtonClassList.delete(`${this.navigationButton}--size-${oldValue}`);
+    watchSize(newValue, oldValue) {
+        if (oldValue !== undefined)
+            this.navigationButtonClassList.delete(`${this.navigationButton}--size-${oldValue}`);
         this.navigationButtonClassList.add(`${this.navigationButton}--size-${newValue}`);
     }
-    validateDirection(newValue) {
-        // manage menu items style depending to parent menu horientation
-        this.element.setAttribute('data-style-direction', newValue);
+    validateDirection(newValue, oldValue) {
+        if (oldValue !== undefined)
+            this.navigationButtonClassList.delete(`${this.navigationButton}--${oldValue}`);
         this.navigationButtonClassList.add(`${this.navigationButton}--${newValue}`);
         // manage all sub levels child menu-items level with data-level attribut
-        if (this.isDirection(Direction.VERTICAL, newValue)) {
-            Array.from(this.element.querySelectorAll('mg-menu-item')).forEach(item => {
+        Array.from(this.element.querySelectorAll('mg-menu-item')).forEach(item => {
+            if (this.isDirection(Direction.VERTICAL, newValue)) {
                 item.dataset.level = `${(Number(item.dataset.level) || 1) + 1}`;
-            });
-        }
+            }
+            else {
+                delete item.dataset.level;
+            }
+        });
     }
     validateHasChildren(newValue) {
         if (newValue && this.element.href !== undefined) {
             throw new Error(`<${this.name}> prop "href" is unauthorizied when element is a parent.`);
         }
     }
+    /**
+     * direction value in dataset
+     * @param newValue - new direction value
+     */
+    // eslint-disable-next-line @stencil-community/no-unused-watch
+    watchDataStyleDirection(newValue) {
+        this.direction = newValue;
+    }
+    /**
+     * has focus value in dataset
+     * @param newValue - new direction value
+     */
+    // eslint-disable-next-line @stencil-community/no-unused-watch
+    watchDataHasFocus(newValue) {
+        if (!newValue)
+            this.updateExpanded(Boolean(newValue));
+    }
     /**
      * Render popover clickoutside guard for content slot
      */
     updatePopoverGuard() {
-        if (this.displayPopover())
-            Array.from(this.element.children)
-                .filter((child) => !child.hasAttribute('slot') && child.nodeName !== 'MG-MENU' && Boolean(child.dataset))
-                .forEach((slot) => (slot.dataset.mgPopoverGuard = this.getPopoverIdentifier()));
+        const subItem = this.element.querySelector('*:not([slot])');
+        if (!subItem)
+            return;
+        if (this.hasPopover())
+            subItem.dataset.mgPopoverGuard = this.popoverIdentifier;
+        else
+            delete subItem.dataset.mgPopoverGuard;
     }
     /*************
      * Lifecycle *
@@ -263,13 +326,12 @@ const MgMenuItem = /*@__PURE__*/ proxyCustomElement(class MgMenuItem extends HTM
         this.hasChildren = Array.from(this.element.children).some(child => !['image', 'information', 'label', 'metadata'].includes(child.getAttribute('slot')));
         this.messages = initLocales(this.element).messages.menuItem;
         this.isItemMore = this.element.dataset.overflowMore !== undefined;
-        // Validate props
-        this.validateStatus(this.status);
-        this.validateExpanded(this.expanded);
+        // watchers
+        this.watchStatus(this.status);
+        this.watchExpanded(this.expanded);
         this.watchTarget(this.target);
         this.watchIdentifier(this.identifier);
-        // Validate states
-        this.validateSize(this.size);
+        this.watchSize(this.size);
     }
     /**
      * Check if component slots configuration
@@ -277,40 +339,36 @@ const MgMenuItem = /*@__PURE__*/ proxyCustomElement(class MgMenuItem extends HTM
      */
     componentDidLoad() {
         // validation
-        this.validateSlot(true);
+        this.updateSlot(true);
         // update props and states after componentDidLoad hook
         // return a promise to process action only in the FIRST render().
         // https://stenciljs.com/docs/component-lifecycle#componentwillload
         return setTimeout(() => {
-            // define menu-item context states
-            const menu = this.element.closest('mg-menu');
-            this.direction = this.isItemMore || menu === null ? Direction.HORIZONTAL : menu.direction;
-            this.isInMainMenu = menu !== null && this.element.parentElement.closest('mg-menu-item') === null;
-            if ((menu === null || menu === void 0 ? void 0 : menu.size) !== undefined)
-                this.size = menu.size;
-            if (this.isItemMore)
-                this.size = this.element.dataset.size;
-            // when main menu item contain an active item it will get the active style
-            // AND if item is in vertical menu it will be expanded
-            if (this.hasActiveChild() && this.isInMainMenu)
-                this.expanded = this.isDirection(Direction.VERTICAL);
-            this.updateStatus([Status.ACTIVE]);
-            this.updateDisplayNotificationBadge();
-            this.updatePopoverGuard();
-            // manage child dom changes with mutationObserver and listners
-            this.initListeners();
+            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();
             new MutationObserver(mutationsList => {
-                if (mutationsList.some(mutation => mutation.attributeName === 'hidden'))
+                if (mutationsList.some(mutation => ['hidden', 'status'].includes(mutation.attributeName)))
                     this.updateStatus(this.hasChildren ? undefined : [Status.ACTIVE]);
                 if (mutationsList.some(mutation => mutation.type === 'characterData'))
-                    this.validateSlot();
-                this.updateDisplayNotificationBadge();
+                    this.updateSlot();
+                if (mutationsList.some(mutation => mutation.type === 'childList'))
+                    this.updateItem();
                 this.itemUpdated.emit();
             }).observe(this.element, { attributes: true, childList: true, characterData: true, subtree: true });
         }, 0);
     }
+    /**
+     * Emit event when component is updated
+     * @returns promise process wich emit the 'item-updated' event
+     */
+    componentShouldUpdate() {
+        return st(() => {
+            this.itemUpdated.emit();
+        });
+    }
     /**
      * Render ineractive element
      * @returns HTML Element
@@ -325,15 +383,6 @@ const MgMenuItem = /*@__PURE__*/ proxyCustomElement(class MgMenuItem extends HTM
                 [`${this.navigationButton}-chevron--rotate`]: this.expanded === true,
             } }, h("mg-icon", { icon: "chevron-down" })))));
     }
-    /**
-     * Emit event when component is updated
-     * @returns promise process wich emit the 'item-updated' event
-     */
-    componentShouldUpdate() {
-        return tt(() => {
-            this.itemUpdated.emit();
-        });
-    }
     /**
      * Render
      * @returns HTML Element
@@ -341,9 +390,9 @@ const MgMenuItem = /*@__PURE__*/ proxyCustomElement(class MgMenuItem extends HTM
     render() {
         const getContainerClasses = () => ({
             ['mg-c-menu-item__collapse-container']: true,
-            ['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu || this.isItemMore) && this.isDirection(Direction.HORIZONTAL),
+            ['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu() || this.isItemMore) && this.isDirection(Direction.HORIZONTAL),
         });
-        return (h(Host, { key: '0705617f39133b4da491c150f4984cc57cafe085', role: this.isItemMore ? 'presentation' : 'listitem' }, this.displayPopover() ? (h("mg-popover", { display: this.expanded, placement: "bottom-start", arrowHide: true, "onDisplay-change": this.handlePopoverDisplay, identifier: this.getPopoverIdentifier(), "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: '010958810569e4b777b08d6aebc39be61bb03291', 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()),
@@ -353,11 +402,13 @@ const MgMenuItem = /*@__PURE__*/ proxyCustomElement(class MgMenuItem extends HTM
     static get watchers() { return {
         "identifier": ["watchIdentifier"],
         "target": ["watchTarget"],
-        "status": ["validateStatus"],
-        "expanded": ["validateExpanded"],
-        "size": ["validateSize"],
+        "status": ["watchStatus"],
+        "expanded": ["watchExpanded"],
+        "size": ["watchSize"],
         "direction": ["validateDirection"],
-        "hasChildren": ["validateHasChildren"]
+        "hasChildren": ["validateHasChildren"],
+        "data-style-direction": ["watchDataStyleDirection"],
+        "data-has-focus": ["watchDataHasFocus"]
     }; }
     static get style() { return MgMenuItemStyle0; }
 }, [1, "mg-menu-item", {
@@ -369,18 +420,19 @@ const MgMenuItem = /*@__PURE__*/ proxyCustomElement(class MgMenuItem extends HTM
         "size": [32],
         "navigationButtonClassList": [32],
         "direction": [32],
-        "isInMainMenu": [32],
         "isItemMore": [32],
         "hasChildren": [32],
         "displayNotificationBadge": [32]
     }, undefined, {
         "identifier": ["watchIdentifier"],
         "target": ["watchTarget"],
-        "status": ["validateStatus"],
-        "expanded": ["validateExpanded"],
-        "size": ["validateSize"],
+        "status": ["watchStatus"],
+        "expanded": ["watchExpanded"],
+        "size": ["watchSize"],
         "direction": ["validateDirection"],
-        "hasChildren": ["validateHasChildren"]
+        "hasChildren": ["validateHasChildren"],
+        "data-style-direction": ["watchDataStyleDirection"],
+        "data-has-focus": ["watchDataHasFocus"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {