@mgdis/mg-components 5.19.3 → 5.21.0

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

@@ -4,445 +4,445 @@ import { initLocales } from "../../../../locales";
 import { Direction } from "../mg-menu/mg-menu.conf";
 import { Status } from "./mg-menu-item.conf";
 export class MgMenuItem {
-  constructor() {
-    /************
-     * Internal *
-     ************/
-    this.name = 'mg-menu-item';
-    this.navigationButton = 'mg-c-menu-item__navigation-button';
-    /***********
-     * Methods *
-     **********/
-    /**
-     * Toggle expanded prop value
-     */
-    this.toggleExpanded = () => {
-      this.expanded = !this.expanded;
-    };
-    /**
-     * Does an Element have given Status
-     * @param mgMenuItemElement - to parse
-     * @param status - to check
-     * @returns true if element with status is found
-     */
-    this.hasStatus = (mgMenuItemElement, status) => mgMenuItemElement.status === status;
-    /**
-     * Is component contextual direction match the given direction
-     * @param direction - in parent menu
-     * @param compareWith - direction to compare with. Default: `this.direction`
-     * @returns true is direction match the direction propertie
-     */
-    this.isDirection = (direction, compareWith = this.direction) => direction === compareWith;
-    /**
-     * Update displayNotificationBadge
-     * current component notification badge have priority over the slot badge when submenu contain badge
-     */
-    this.updateDisplayNotificationBadge = () => {
-      const childMenu = this.element.querySelector('mg-menu');
-      this.displayNotificationBadge =
-        childMenu !== null &&
-          Array.from(childMenu.children).some((subItem) => subItem.querySelector('mg-badge') !== null && subItem.getAttribute('hidden') === null);
-    };
-    /**
-     * 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.getAttribute('hidden') === null);
-    };
-    /**
-     * Validate slots
-     * @param guard - prevent action with guard. Default: false.
-     */
-    this.validateSlot = (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)
-        throw new Error(`<${this.name}> slot "label" is required.`);
-      ['label', 'metadata'].forEach(slot => {
-        Array.from(this.element.querySelectorAll(`[slot="${slot}"]`)).forEach(element => {
-          if (!isValidString(element.textContent))
-            throw new Error(`<${this.name}> slot "${slot}" must have text content.`);
-          if ((guard && element.getAttribute('title') === null) || !guard)
-            element.setAttribute('title', element.textContent);
-        });
-      });
-    };
-    /**
-     * 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;
-      }
-    };
-    /**
-     * 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();
-          });
+    constructor() {
+        /************
+         * Internal *
+         ************/
+        this.name = 'mg-menu-item';
+        this.navigationButton = 'mg-c-menu-item__navigation-button';
+        /***********
+         * Methods *
+         **********/
+        /**
+         * Toggle expanded prop value
+         */
+        this.toggleExpanded = () => {
+            this.expanded = !this.expanded;
+        };
+        /**
+         * Does an Element have given Status
+         * @param mgMenuItemElement - to parse
+         * @param status - to check
+         * @returns true if element with status is found
+         */
+        this.hasStatus = (mgMenuItemElement, status) => mgMenuItemElement.status === status;
+        /**
+         * Is component contextual direction match the given direction
+         * @param direction - in parent menu
+         * @param compareWith - direction to compare with. Default: `this.direction`
+         * @returns true is direction match the direction propertie
+         */
+        this.isDirection = (direction, compareWith = this.direction) => direction === compareWith;
+        /**
+         * Update displayNotificationBadge
+         * current component notification badge have priority over the slot badge when submenu contain badge
+         */
+        this.updateDisplayNotificationBadge = () => {
+            const childMenu = this.element.querySelector('mg-menu');
+            this.displayNotificationBadge =
+                childMenu !== null &&
+                    Array.from(childMenu.children).some((subItem) => subItem.querySelector('mg-badge') !== null && subItem.getAttribute('hidden') === null);
+        };
+        /**
+         * 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.getAttribute('hidden') === null);
+        };
+        /**
+         * Validate slots
+         * @param guard - prevent action with guard. Default: false.
+         */
+        this.validateSlot = (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)
+                throw new Error(`<${this.name}> slot "label" is required.`);
+            ['label', 'metadata'].forEach(slot => {
+                Array.from(this.element.querySelectorAll(`[slot="${slot}"]`)).forEach(element => {
+                    if (!isValidString(element.textContent))
+                        throw new Error(`<${this.name}> slot "${slot}" must have text content.`);
+                    if ((guard && element.getAttribute('title') === null) || !guard)
+                        element.setAttribute('title', element.textContent);
+                });
+            });
+        };
+        /**
+         * 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;
+            }
+        };
+        /**
+         * 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();
+                    });
+                }
+            });
+        };
+        /**
+         * 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 *
+         ************/
+        /**
+         * Handle interacrtive element click
+         * @param event - click on element
+         */
+        this.handleElementCLick = (event) => {
+            if ((this.hasChildren && !this.isInMainMenu) || this.status === Status.DISABLED) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+            // toggle expanded when mg-menu-item has child items
+            if (this.hasChildren)
+                this.toggleExpanded();
+        };
+        /**
+         * Handle popover element display-change event
+         * @param event - popover display event
+         */
+        this.handlePopoverDisplay = (event) => {
+            this.expanded = event.detail;
+        };
+        /**
+         * Render slot
+         * @returns HTML Element
+         */
+        this.renderSlot = () => h("slot", null);
+        this.identifier = createID('mg-menu-item');
+        this.href = undefined;
+        this.status = Status.VISIBLE;
+        this.expanded = false;
+        this.size = 'regular';
+        this.navigationButtonClassList = new ClassList([this.navigationButton]);
+        this.direction = undefined;
+        this.isInMainMenu = undefined;
+        this.isItemMore = undefined;
+        this.hasChildren = false;
+        this.displayNotificationBadge = undefined;
+    }
+    validateStatus(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.`);
+        // 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;
+                    }
+                });
+            }
+        }
+    }
+    validateSize(newValue, oldValue) {
+        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);
+        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 => {
+                item.dataset.level = `${(Number(item.dataset.level) || 1) + 1}`;
+            });
         }
-      });
-    };
+    }
+    validateHasChildren(newValue) {
+        if (newValue && this.element.href !== undefined) {
+            throw new Error(`<${this.name}> prop "href" is unauthorizied when element is a parent.`);
+        }
+    }
     /**
-     * Get mg-popover identifier
-     * @returns generated mg-popover identifier
+     * Render popover clickoutside guard for content slot
      */
-    this.getPopoverIdentifier = () => `${this.identifier}-popover`;
+    updatePopoverGuard() {
+        if (this.displayPopover())
+            Array.from(this.element.children)
+                .filter((child) => child.getAttribute('slot') === null && child.nodeName !== 'MG-MENU' && Boolean(child.dataset))
+                .forEach((slot) => (slot.dataset.mgPopoverGuard = this.getPopoverIdentifier()));
+    }
+    /*************
+     * Lifecycle *
+     *************/
     /**
-     * Condition to know if component should display a mg-popover
-     * @returns truthy if component display popover
+     * Validate props
      */
-    this.displayPopover = () => this.isDirection(Direction.HORIZONTAL) && this.hasChildren && this.href === undefined;
-    /************
-     * Handlers *
-     ************/
+    componentWillLoad() {
+        // has children items that is NOT [slot='image' | 'information' | 'label' | 'metadata'] element
+        // we store only matching elements
+        this.hasChildren = Array.from(this.element.children).some(child => !['image', 'information', 'label', 'metadata'].includes(child.getAttribute('slot')));
+        this.badgeLabel = initLocales(this.element).messages.plusMenu.badgeLabel;
+        this.isItemMore = this.element.dataset.overflowMore !== undefined;
+        // Validate props
+        this.validateStatus(this.status);
+        this.validateExpanded(this.expanded);
+        // Validate states
+        this.validateSize(this.size);
+    }
     /**
-     * Handle interacrtive element click
-     * @param event - click on element
+     * Check if component slots configuration
+     * @returns timeout
      */
-    this.handleElementCLick = (event) => {
-      if ((this.hasChildren && !this.isInMainMenu) || this.status === Status.DISABLED) {
-        event.preventDefault();
-        event.stopPropagation();
-      }
-      // toggle expanded when mg-menu-item has child items
-      if (this.hasChildren)
-        this.toggleExpanded();
-    };
+    componentDidLoad() {
+        // validation
+        this.validateSlot(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 listzners
+            this.initListeners();
+            // emit loaded event when component is fully loaded
+            this.itemLoaded.emit();
+            new MutationObserver(mutationsList => {
+                if (mutationsList.some(mutation => mutation.attributeName === 'hidden'))
+                    this.updateStatus();
+                if (mutationsList.some(mutation => mutation.type === 'characterData'))
+                    this.validateSlot();
+                this.updateDisplayNotificationBadge();
+            }).observe(this.element, { attributes: true, childList: true, characterData: true, subtree: true });
+        }, 0);
+    }
     /**
-     * Handle popover element display-change event
-     * @param event - popover display event
+     * Render ineractive element
+     * @returns HTML Element
      */
-    this.handlePopoverDisplay = (event) => {
-      this.expanded = event.detail;
-    };
+    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, "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.badgeLabel, value: "!", variant: "text-color", slot: "information" })))), this.size !== 'regular' && 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", size: "small" })))));
+    }
     /**
-     * Render slot
+     * Render
      * @returns HTML Element
      */
-    this.renderSlot = () => h("slot", null);
-    this.identifier = createID('mg-menu-item');
-    this.href = undefined;
-    this.status = Status.VISIBLE;
-    this.expanded = false;
-    this.size = 'regular';
-    this.navigationButtonClassList = new ClassList([this.navigationButton]);
-    this.direction = undefined;
-    this.isInMainMenu = undefined;
-    this.isItemMore = undefined;
-    this.hasChildren = false;
-    this.displayNotificationBadge = undefined;
-  }
-  validateStatus(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.`);
-    // 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;
+    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),
         });
-      }
-      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;
-          }
-        });
-      }
+        return (h(Host, { 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() }, this.renderInteractiveElement(), h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
+            this.renderInteractiveElement(),
+            h("div", { key: "vertical-container", class: getContainerClasses(), hidden: !this.expanded }, this.renderSlot()),
+        ])));
     }
-  }
-  validateSize(newValue, oldValue) {
-    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}`, '');
-    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 => {
-        item.dataset.level = `${(Number(item.dataset.level) || 1) + 1}`;
-      });
+    static get is() { return "mg-menu-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../../../../../node_modules/@mgdis/styles/dist/components/mg-menu-item.css"]
+        };
     }
-  }
-  validateHasChildren(newValue) {
-    if (newValue && this.element.href !== undefined) {
-      throw new Error(`<${this.name}> prop "href" is unauthorizied when element is a parent.`);
+    static get styleUrls() {
+        return {
+            "$": ["../../../../../node_modules/@mgdis/styles/dist/components/mg-menu-item.css"]
+        };
     }
-  }
-  /**
-   * Render popover clickoutside guard for content slot
-   */
-  updatePopoverGuard() {
-    if (this.displayPopover())
-      Array.from(this.element.children)
-        .filter((child) => child.getAttribute('slot') === null && child.nodeName !== 'MG-MENU' && Boolean(child.dataset))
-        .forEach((slot) => (slot.dataset.mgPopoverGuard = this.getPopoverIdentifier()));
-  }
-  /*************
-   * Lifecycle *
-   *************/
-  /**
-   * Validate props
-   */
-  componentWillLoad() {
-    // has children items that is NOT [slot='image' | 'information' | 'label' | 'metadata'] element
-    // we store only matching elements
-    this.hasChildren = Array.from(this.element.children).some(child => !['image', 'information', 'label', 'metadata'].includes(child.getAttribute('slot')));
-    this.badgeLabel = initLocales(this.element).messages.plusMenu.badgeLabel;
-    this.isItemMore = this.element.dataset.overflowMore !== undefined;
-    // Validate props
-    this.validateStatus(this.status);
-    this.validateExpanded(this.expanded);
-    // Validate states
-    this.validateSize(this.size);
-  }
-  /**
-   * Check if component slots configuration
-   * @returns timeout
-   */
-  componentDidLoad() {
-    // validation
-    this.validateSlot(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 listzners
-      this.initListeners();
-      // emit loaded event when component is fully loaded
-      this.itemLoaded.emit();
-      new MutationObserver(mutationsList => {
-        if (mutationsList.some(mutation => mutation.attributeName === 'hidden'))
-          this.updateStatus();
-        if (mutationsList.some(mutation => mutation.type === 'characterData'))
-          this.validateSlot();
-        this.updateDisplayNotificationBadge();
-      }).observe(this.element, { attributes: true, childList: true, characterData: true, subtree: true });
-    }, 0);
-  }
-  /**
-   * 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, "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.badgeLabel, value: "!", variant: "text-color", slot: "information" })))), this.size !== 'regular' && 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", size: "small" })))));
-  }
-  /**
-   * Render
-   * @returns HTML Element
-   */
-  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),
-    });
-    return (h(Host, { 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() }, this.renderInteractiveElement(), h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
-      this.renderInteractiveElement(),
-      h("div", { key: "vertical-container", class: getContainerClasses(), hidden: !this.expanded }, this.renderSlot()),
-    ])));
-  }
-  static get is() { return "mg-menu-item"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["../../../../../node_modules/@mgdis/styles/dist/components/mg-menu-item.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["../../../../../node_modules/@mgdis/styles/dist/components/mg-menu-item.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "identifier": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Identifier is used to control mg-popover"
-        },
-        "attribute": "identifier",
-        "reflect": false,
-        "defaultValue": "createID('mg-menu-item')"
-      },
-      "href": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define menu-item href\nwhen defined menu-item contain an anchor instead of button"
-        },
-        "attribute": "href",
-        "reflect": false
-      },
-      "status": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "Status",
-          "resolved": "Status.ACTIVE | Status.DISABLED | Status.HIDDEN | Status.VISIBLE",
-          "references": {
-            "Status": {
-              "location": "import",
-              "path": "./mg-menu-item.conf",
-              "id": "src/components/molecules/menu/mg-menu-item/mg-menu-item.conf.ts::Status"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define menu-item status."
-        },
-        "attribute": "status",
-        "reflect": true,
-        "defaultValue": "Status.VISIBLE"
-      },
-      "expanded": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define menu-item content expanded."
-        },
-        "attribute": "expanded",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "size": {},
-      "navigationButtonClassList": {},
-      "direction": {},
-      "isInMainMenu": {},
-      "isItemMore": {},
-      "hasChildren": {},
-      "displayNotificationBadge": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "statusChange",
-        "name": "status-change",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emited event when status change"
-        },
-        "complexType": {
-          "original": "MgMenuItem['status']",
-          "resolved": "Status.ACTIVE | Status.DISABLED | Status.HIDDEN | Status.VISIBLE",
-          "references": {
-            "MgMenuItem": {
-              "location": "global",
-              "id": "global::MgMenuItem"
+    static get properties() {
+        return {
+            "identifier": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Identifier is used to control mg-popover"
+                },
+                "attribute": "identifier",
+                "reflect": false,
+                "defaultValue": "createID('mg-menu-item')"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define menu-item href\nwhen defined menu-item contain an anchor instead of button"
+                },
+                "attribute": "href",
+                "reflect": false
+            },
+            "status": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "Status",
+                    "resolved": "Status.ACTIVE | Status.DISABLED | Status.HIDDEN | Status.VISIBLE",
+                    "references": {
+                        "Status": {
+                            "location": "import",
+                            "path": "./mg-menu-item.conf",
+                            "id": "src/components/molecules/menu/mg-menu-item/mg-menu-item.conf.ts::Status"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define menu-item status."
+                },
+                "attribute": "status",
+                "reflect": true,
+                "defaultValue": "Status.VISIBLE"
+            },
+            "expanded": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define menu-item content expanded."
+                },
+                "attribute": "expanded",
+                "reflect": false,
+                "defaultValue": "false"
             }
-          }
-        }
-      }, {
-        "method": "itemLoaded",
-        "name": "item-loaded",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emited event when item is loaded"
-        },
-        "complexType": {
-          "original": "void",
-          "resolved": "void",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "element"; }
-  static get watchers() {
-    return [{
-        "propName": "status",
-        "methodName": "validateStatus"
-      }, {
-        "propName": "expanded",
-        "methodName": "validateExpanded"
-      }, {
-        "propName": "size",
-        "methodName": "validateSize"
-      }, {
-        "propName": "direction",
-        "methodName": "validateDirection"
-      }, {
-        "propName": "hasChildren",
-        "methodName": "validateHasChildren"
-      }];
-  }
+        };
+    }
+    static get states() {
+        return {
+            "size": {},
+            "navigationButtonClassList": {},
+            "direction": {},
+            "isInMainMenu": {},
+            "isItemMore": {},
+            "hasChildren": {},
+            "displayNotificationBadge": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "statusChange",
+                "name": "status-change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emited event when status change"
+                },
+                "complexType": {
+                    "original": "HTMLMgMenuItemElement['status']",
+                    "resolved": "Status.ACTIVE | Status.DISABLED | Status.HIDDEN | Status.VISIBLE",
+                    "references": {
+                        "HTMLMgMenuItemElement": {
+                            "location": "global",
+                            "id": "global::HTMLMgMenuItemElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "itemLoaded",
+                "name": "item-loaded",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emited event when item is loaded"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "element"; }
+    static get watchers() {
+        return [{
+                "propName": "status",
+                "methodName": "validateStatus"
+            }, {
+                "propName": "expanded",
+                "methodName": "validateExpanded"
+            }, {
+                "propName": "size",
+                "methodName": "validateSize"
+            }, {
+                "propName": "direction",
+                "methodName": "validateDirection"
+            }, {
+                "propName": "hasChildren",
+                "methodName": "validateHasChildren"
+            }];
+    }
 }
 //# sourceMappingURL=mg-menu-item.js.map