@mgdis/mg-components 6.20.0 → 6.22.0

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

@@ -1,485 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as createID, C as ClassList, i as isValidString, a as isValideID, t as toString, n as nextTick } from './index2.js';
-import { i as initLocales } from './index3.js';
-import { d as defineCustomElement$6 } from './mg-badge2.js';
-import { d as defineCustomElement$5 } from './mg-button2.js';
-import { d as defineCustomElement$4 } from './mg-card2.js';
-import { d as defineCustomElement$3 } from './mg-icon2.js';
-import { d as defineCustomElement$2 } from './mg-popover2.js';
-import { d as defineCustomElement$1 } from './mg-popover-content2.js';
-
-/**
- * Available menu item status values
- */
-const Status = {
-    VISIBLE: 'visible',
-    HIDDEN: 'hidden',
-    DISABLED: 'disabled',
-    ACTIVE: 'active',
-};
-/**
- * List of all possibles target
- */
-const targets = ['_blank', '_self', '_parent', '_top'];
-
-/**
- * Menu direction values
- */
-const directions = {
-    VERTICAL: 'vertical',
-    HORIZONTAL: 'horizontal',
-};
-/**
- * List of all possibles sizes
- */
-const sizes = ['medium', 'large', 'xlarge'];
-
-const mgMenuItemCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}/*!\n * @prop --mg-c-menu-item-color: Defines menu item global color, used for bottom line and active tabs. Default value: `--mg-b-color-app`.\n * @prop --mg-c-menu-item-color-text: Defines the color of the menu item. Unset by default, fallback on `--mg-b-color-dark`.\n * @prop --mg-c-menu-item-navigation-button-max-width: Defines the max-width property for the navigation button. Unset by default.\n */.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{height:var(--mg-b-size-40);padding:var(--mg-b-size-12) var(--mg-b-size-16)}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button,.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button ::slotted([slot=metadata]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium ::slotted([slot=label]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium ::slotted([slot=metadata]){font-size:var(--mg-b-font-size)}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium.mg-c-menu-item__navigation-button--horizontal{padding-bottom:var(--mg-b-size-12)}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium.mg-c-menu-item__navigation-button--vertical{padding-left:var(--mg-b-size-16)}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{height:var(--mg-b-size-48);padding:var(--mg-b-size-12) var(--mg-b-size-32)}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button,.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button ::slotted([slot=metadata]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large ::slotted([slot=label]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large ::slotted([slot=metadata]){font-size:var(--mg-b-font-size-h4)}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large.mg-c-menu-item__navigation-button--horizontal{padding-bottom:var(--mg-b-size-12)}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large.mg-c-menu-item__navigation-button--vertical{padding-left:var(--mg-b-size-32)}.mg-c-menu-item.mg-c-menu-item--size-xlarge .mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-xlarge{height:var(--mg-b-size-72);padding:var(--mg-b-size-12) var(--mg-b-size-40)}.mg-c-menu-item.mg-c-menu-item--size-xlarge .mg-c-menu-item__navigation-button,.mg-c-menu-item.mg-c-menu-item--size-xlarge .mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item.mg-c-menu-item--size-xlarge .mg-c-menu-item__navigation-button ::slotted([slot=metadata]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-xlarge,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-xlarge ::slotted([slot=label]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-xlarge ::slotted([slot=metadata]){font-size:var(--mg-b-font-size-h4)}.mg-c-menu-item.mg-c-menu-item--size-xlarge .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-xlarge.mg-c-menu-item__navigation-button--horizontal{padding-bottom:var(--mg-b-size-12)}.mg-c-menu-item.mg-c-menu-item--size-xlarge .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-xlarge.mg-c-menu-item__navigation-button--vertical{padding-left:var(--mg-b-size-40)}.mg-c-menu-item__navigation-button{display:flex;box-sizing:border-box;align-items:center;border:none;background-color:unset;color:var(--mg-c-menu-item-color-text, var(--mg-b-color-dark));column-gap:var(--mg-c-menu-item-navigation-button-column-gap, var(--mg-b-size-8));cursor:pointer;font-family:var(--mg-b-font-family);font-weight:400;line-height:var(--mg-b-line-height);text-decoration:none;white-space:nowrap}.mg-c-menu-item__navigation-button:disabled,.mg-c-menu-item__navigation-button--disabled{cursor:default;opacity:var(--mg-b-opacity-element-disabled)}.mg-c-menu-item__navigation-button:focus-visible{z-index:10}.mg-c-menu-item__navigation-button:hover:not(.mg-c-menu-item__navigation-button--disabled),.mg-c-menu-item__navigation-button:focus-visible:not(.mg-c-menu-item__navigation-button--disabled){background-color:color-mix(in srgb, var(--mg-c-menu-item-color), transparent 90%)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active{color:var(--mg-c-menu-item-color);font-weight:600}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active.mg-c-menu-item__navigation-button--horizontal{box-shadow:inset 0 calc(-1*var(--mg-b-size-4)) var(--mg-c-menu-item-color)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active.mg-c-menu-item__navigation-button--vertical{box-shadow:inset var(--mg-b-size-4) 0 var(--mg-c-menu-item-color)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--hidden{display:none}:host([data-style-direction=vertical][data-level=\"1\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(1*var(--mg-b-size-16))}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:10}:host([data-style-direction=vertical][data-level=\"2\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(2*var(--mg-b-size-16))}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:20}:host([data-style-direction=vertical][data-level=\"3\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(3*var(--mg-b-size-16))}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:30}:host([data-style-direction=vertical][data-level=\"4\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(4*var(--mg-b-size-16))}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:40}:host([data-style-direction=vertical][data-level=\"5\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(5*var(--mg-b-size-16))}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:50}:host([data-style-direction=vertical][data-level=\"6\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(6*var(--mg-b-size-16))}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:60}:host([data-style-direction=vertical][data-level=\"1\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(1*var(--mg-b-size-32))}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:10}:host([data-style-direction=vertical][data-level=\"2\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(2*var(--mg-b-size-32))}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:20}:host([data-style-direction=vertical][data-level=\"3\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(3*var(--mg-b-size-32))}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:30}:host([data-style-direction=vertical][data-level=\"4\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(4*var(--mg-b-size-32))}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:40}:host([data-style-direction=vertical][data-level=\"5\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(5*var(--mg-b-size-32))}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:50}:host([data-style-direction=vertical][data-level=\"6\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(6*var(--mg-b-size-32))}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:60}:host([data-style-direction=vertical][data-level=\"1\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-xlarge{padding-left:calc(1*var(--mg-b-size-40))}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:10}:host([data-style-direction=vertical][data-level=\"2\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-xlarge{padding-left:calc(2*var(--mg-b-size-40))}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:20}:host([data-style-direction=vertical][data-level=\"3\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-xlarge{padding-left:calc(3*var(--mg-b-size-40))}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:30}:host([data-style-direction=vertical][data-level=\"4\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-xlarge{padding-left:calc(4*var(--mg-b-size-40))}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:40}:host([data-style-direction=vertical][data-level=\"5\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-xlarge{padding-left:calc(5*var(--mg-b-size-40))}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:50}:host([data-style-direction=vertical][data-level=\"6\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-xlarge{padding-left:calc(6*var(--mg-b-size-40))}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:60}.mg-c-menu-item{max-width:var(--mg-c-menu-item-navigation-button-max-width)}.mg-c-menu-item__collapse-container{z-index:10;width:max-content}.mg-c-menu-item__navigation-button-center{min-width:0}.mg-c-menu-item__navigation-button-text-content{display:flex;width:100%;align-items:center}.mg-c-menu-item__navigation-button-text-content-notification,.mg-c-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:var(--mg-b-size-8);font-size:var(--mg-b-font-size)}.mg-c-menu-item__navigation-button-new-tab{margin-left:var(--mg-b-size-4)}.mg-c-menu-item__navigation-button-chevron{display:var(--mg-c-menu-item-chevron-display);margin-left:auto;transition:200ms}.mg-c-menu-item__navigation-button-chevron--rotate.mg-c-menu-item__navigation-button-chevron{transform:rotate(180deg)}:host{position:relative;display:flex;--mg-c-popover-padding-vertical:0;--mg-c-popover-padding-horizontal:0;--mg-c-popover-max-width:unset}:host([data-style-direction=vertical]){flex-direction:column}:host([data-style-direction=vertical]) .mg-c-menu-item__navigation-button{width:100%}:host([data-style-direction=vertical]) .mg-c-menu-item__collapse-container{position:unset;top:unset;left:unset;width:unset}:host([data-style-direction=vertical]) .mg-c-menu-item-chevron{margin-left:auto}:host([data-overflow-more]){--mg-c-menu-item-navigation-button-column-gap:0}:host([data-overflow-more]) .mg-c-menu-item__navigation-button-chevron{--mg-c-menu-item-chevron-display:none}:host([data-overflow-more]) .mg-c-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:0}:host([data-overflow-more]) ::slotted(mg-menu){--mg-c-menu-item-navigation-button-column-gap:var(--mg-b-size-8)}:host([data-style-direction=horizontal]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level,:host([data-overflow-more]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level{background-color:var(--mg-b-color-light)}:host([data-style-direction=horizontal]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level ::slotted(mg-menu),:host([data-overflow-more]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level ::slotted(mg-menu){padding:var(--mg-b-size-8) 0}::slotted([slot=label]),::slotted([slot=metadata]){display:block;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}::slotted(*){display:flex;flex-direction:column}:host([status=disabled]){pointer-events:none}:host([hidden]){display:none}";
-
-const MgMenuItem = /*@__PURE__*/ proxyCustomElement(class MgMenuItem extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.itemLoaded = createEvent(this, "item-loaded", 7);
-        this.itemUpdated = createEvent(this, "item-updated", 7);
-        /************
-         * Internal *
-         ************/
-        this.name = 'mg-menu-item';
-        this.navigationButton = 'mg-c-menu-item__navigation-button';
-        /************
-         * Props *
-         ************/
-        /**
-         * Identifier is used to control mg-popover
-         */
-        this.identifier = createID('mg-menu-item');
-        /**
-         * Define menu-item status.
-         */
-        this.status = 'visible';
-        /**
-         * Define menu-item content expanded.
-         */
-        this.expanded = false;
-        /**********
-         * States *
-         *********/
-        /**
-         * Define menu-item size.
-         */
-        this.size = 'medium';
-        /**
-         * Component button classes
-         */
-        this.navigationButtonClassList = new ClassList([this.navigationButton]);
-        /**
-         * Does component have children.
-         */
-        this.hasChildren = false;
-        /***********
-         * Methods *
-         **********/
-        /**
-         * Get parent menu
-         * @returns parent menu
-         */
-        this.getParentMenu = () => this.element.closest('mg-menu');
-        /**
-         * 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;
-        /**
-         * Condition to know if component should display a mg-popover
-         * @returns truthy if component display popover
-         */
-        this.hasPopover = () => this.isDirection(directions.HORIZONTAL) &&
-            ((this.isInMainMenu() && Array.from(this.element.children).some(element => element.querySelector('[slot]') === null)) || 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 || !isValidString(this.href);
-        /**
-         * 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;
-        /**
-         * 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
-         */
-        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.hasAttribute('hidden'));
-        };
-        /**
-         * Update expanded prop
-         * @param newValue - expanded new value
-         */
-        this.updateExpanded = (newValue) => {
-            if (this.isInteractiveItem()) {
-                // item is always expanded in vertical menu when has active child
-                this.expanded = (this.isDirection(directions.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;
-            }
-        };
-        /**
-         * Update slots
-         * @param guard - prevent action with guard. Default: 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) {
-                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.hasAttribute('title')) || !guard)
-                        element.setAttribute('title', element.textContent);
-                });
-            });
-        };
-        /**
-         * Update menu item
-         * @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);
-            this.updatePopoverGuard();
-            this.updateDisplayNotificationBadge();
-        };
-        /************
-         * Handlers *
-         ************/
-        /**
-         * Handle interacrtive element click
-         * @param event - click on element
-         */
-        this.handleElementCLick = (event) => {
-            if (this.status === Status.DISABLED) {
-                event.preventDefault();
-                event.stopPropagation();
-            }
-            // 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 === 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'));
-                    }
-                };
-                closePopover(this.element);
-            }
-        };
-        /**
-         * Handle popover element display-change event
-         * @param event - popover display event
-         */
-        this.handlePopoverDisplay = (event) => {
-            this.updateExpanded(event.detail);
-        };
-        /**
-         * Render slot
-         * @returns HTML Element
-         */
-        this.renderSlot = () => h("slot", null);
-    }
-    watchIdentifier(newValue) {
-        if (!isValideID(newValue)) {
-            console.error(`<mg-menu-item> prop "identifier" value is invalid. Passed value: ${toString(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: ${toString(newValue)}.`);
-        }
-    }
-    watchStatus(newValue, oldValue) {
-        if (oldValue !== undefined)
-            this.navigationButtonClassList.delete(`${this.navigationButton}--${oldValue}`);
-        this.navigationButtonClassList.add(`${this.navigationButton}--${newValue}`);
-    }
-    watchExpanded(newValue) {
-        if (typeof newValue !== 'boolean') {
-            throw new Error(`<${this.name}> prop "expanded" must be a boolean. Passed value: ${toString(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;
-            });
-        }
-    }
-    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}`);
-        // 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)) {
-                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 (!isValidString(newValue))
-            this.updateExpanded(Boolean(newValue));
-    }
-    /**
-     * Render popover clickoutside guard for content slot
-     */
-    updatePopoverGuard() {
-        const subItem = this.element.querySelector('*:not([slot])');
-        if (subItem === null)
-            return;
-        if (this.hasPopover())
-            subItem.dataset.mgPopoverGuard = this.popoverIdentifier;
-        else
-            delete subItem.dataset.mgPopoverGuard;
-    }
-    /*************
-     * 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.messages = initLocales(this.element).messages.menuItem;
-        this.isItemMore = this.element.dataset.overflowMore !== undefined;
-        // watchers
-        this.watchStatus(this.status);
-        this.watchExpanded(this.expanded);
-        this.watchTarget(this.target);
-        this.watchIdentifier(this.identifier);
-        this.watchSize(this.size);
-    }
-    /**
-     * Check if component slots configuration
-     * @returns timeout
-     */
-    componentDidLoad() {
-        // validation
-        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(() => {
-            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 => ['hidden', 'status'].includes(mutation.attributeName)))
-                    this.updateStatus(this.hasChildren ? undefined : [Status.ACTIVE]);
-                if (mutationsList.some(mutation => mutation.type === 'characterData'))
-                    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 nextTick(() => {
-            this.itemUpdated.emit();
-        });
-    }
-    /**
-     * 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" }),
-            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" })))));
-    }
-    /**
-     * 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(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
-        }, this.renderInteractiveElement(), h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
-            this.renderInteractiveElement(),
-            h("div", { key: "vertical-container", class: getContainerClasses(), hidden: !this.expanded }, this.renderSlot()),
-        ])));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "identifier": ["watchIdentifier"],
-        "target": ["watchTarget"],
-        "status": ["watchStatus"],
-        "expanded": ["watchExpanded"],
-        "size": ["watchSize"],
-        "direction": ["validateDirection"],
-        "hasChildren": ["validateHasChildren"],
-        "data-style-direction": ["watchDataStyleDirection"],
-        "data-has-focus": ["watchDataHasFocus"]
-    }; }
-    static get style() { return mgMenuItemCss; }
-}, [257, "mg-menu-item", {
-        "identifier": [513],
-        "href": [1],
-        "target": [1],
-        "status": [1537],
-        "expanded": [1028],
-        "size": [32],
-        "navigationButtonClassList": [32],
-        "direction": [32],
-        "isItemMore": [32],
-        "hasChildren": [32],
-        "displayNotificationBadge": [32]
-    }, undefined, {
-        "identifier": ["watchIdentifier"],
-        "target": ["watchTarget"],
-        "status": ["watchStatus"],
-        "expanded": ["watchExpanded"],
-        "size": ["watchSize"],
-        "direction": ["validateDirection"],
-        "hasChildren": ["validateHasChildren"],
-        "data-style-direction": ["watchDataStyleDirection"],
-        "data-has-focus": ["watchDataHasFocus"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mg-menu-item", "mg-badge", "mg-button", "mg-card", "mg-icon", "mg-popover", "mg-popover-content"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mg-menu-item":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MgMenuItem);
-            }
-            break;
-        case "mg-badge":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "mg-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "mg-card":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "mg-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "mg-popover":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "mg-popover-content":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-defineCustomElement();
-
-export { MgMenuItem as M, Status as S, directions as a, defineCustomElement as d, sizes as s };
+import{transformTag as t,proxyCustomElement as i,HTMLElement as e,createEvent as n,h as a,Host as o}from"@stencil/core/internal/client";import{c as m,C as s,i as r,a as c,t as l,n as h}from"./index2.js";import{i as g}from"./index3.js";import{d}from"./mg-badge2.js";import{d as u}from"./mg-button2.js";import{d as v}from"./mg-card2.js";import{d as b}from"./mg-icon2.js";import{d as p}from"./mg-popover2.js";import{d as _}from"./mg-popover-content2.js";const f={VISIBLE:"visible",HIDDEN:"hidden",DISABLED:"disabled",ACTIVE:"active"},z=["_blank","_self","_parent","_top"],w={VERTICAL:"vertical",HORIZONTAL:"horizontal"},x=i(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.itemLoaded=n(this,"item-loaded",7),this.itemUpdated=n(this,"item-updated",7),this.name="mg-menu-item",this.classNavigationButton="mg-c-menu-item__navigation-button",this.identifier=m("mg-menu-item"),this.status="visible",this.isIcon=!1,this.expanded=!1,this.classNavigationButtonClassList=new s([this.classNavigationButton]),this.hasChildren=!1,this.getParentMenu=()=>this.element.closest("mg-menu"),this.hasStatus=(t,i)=>t.status===i,this.hasPopover=()=>this.isDirection(w.HORIZONTAL)&&(this.isInMainMenu()&&Array.from(this.element.children).some((t=>null===t.querySelector("[slot]")))||this.isItemMore)&&void 0===this.href,this.hasActiveChild=()=>{var t;return Array.from((null===(t=this.element.querySelector("mg-menu"))||void 0===t?void 0:t.children)||[]).some((t=>"MG-MENU-ITEM"===t.nodeName&&this.hasStatus(t,f.ACTIVE)&&!t.hasAttribute("hidden")))},this.isInteractiveItem=()=>this.hasChildren||!r(this.href),this.isDirection=(t,i=this.direction)=>t===i,this.isInMainMenu=()=>null!==this.getParentMenu()&&null===this.element.parentElement.closest("mg-menu-item"),this.updateDisplayNotificationBadge=()=>{const t=this.element.querySelector("mg-menu");this.displayNotificationBadge=null!==t&&Array.from(t.children).some((t=>null!==t.querySelector("mg-badge")&&!t.hasAttribute("hidden")))},this.updateExpanded=t=>{this.isInteractiveItem()&&(this.expanded=this.isDirection(w.VERTICAL)&&this.hasActiveChild()||t)},this.updateStatus=(t=[])=>{[f.HIDDEN,f.DISABLED,...t].includes(this.status)||(this.status=this.hasActiveChild()?f.ACTIVE:f.VISIBLE)},this.updateSlot=(t=!1)=>{if(void 0===Array.from(this.element.children).find((t=>"label"===t.getAttribute("slot"))))throw new Error(`<${this.name}> slot "label" is required.`);["label","metadata"].forEach((i=>{Array.from(this.element.querySelectorAll(`[slot="${i}"]`)).forEach((e=>{if(!r(e.textContent))throw new Error(`<${this.name}> slot "${i}" must have text content.`);(t&&!e.hasAttribute("title")||!t)&&e.setAttribute("title",e.textContent)}))}))},this.updateItem=t=>{this.updateExpanded(this.expanded),this.updateStatus(t),this.updatePopoverGuard(),this.updateDisplayNotificationBadge()},this.handleElementCLick=t=>{if(this.status===f.DISABLED&&(t.preventDefault(),t.stopPropagation()),this.updateExpanded(!this.expanded),!this.isInteractiveItem()){const t=i=>{null!==i&&t(i.parentElement.closest("mg-menu-item"))};t(this.element)}},this.handlePopoverDisplay=t=>{this.updateExpanded(t.detail)},this.renderSlot=()=>a("slot",null)}watchIdentifier(t){c(t)?this.popoverIdentifier=`${this.identifier}-popover`:console.error(`<mg-menu-item> prop "identifier" value is invalid. Passed value: ${l(t)}.`)}watchTarget(t){if(t&&!z.includes(t))throw new Error(`<mg-link> prop "target" must be one of: ${z.join(", ")}. Passed value: ${l(t)}.`)}watchStatus(t,i){void 0!==i&&this.classNavigationButtonClassList.delete(`${this.classNavigationButton}--${i}`),this.classNavigationButtonClassList.add(`${this.classNavigationButton}--${t}`)}watchIsIcon(t){const i=`${this.classNavigationButton}--is-icon`;t?"vertical"===this.direction?this.isIcon=!1:this.classNavigationButtonClassList.add(i):this.classNavigationButtonClassList.delete(i)}watchExpanded(t){if("boolean"!=typeof t)throw new Error(`<${this.name}> prop "expanded" must be a boolean. Passed value: ${l(t)}.`);this.updateExpanded(t),Array.from(this.element.querySelectorAll("mg-menu-item")).forEach((i=>{i!==this.element&&(i.expanded=!!t&&this.hasStatus(i,f.ACTIVE))}))}validateDirection(t,i){void 0!==i&&this.classNavigationButtonClassList.delete(`${this.classNavigationButton}--${i}`),this.classNavigationButtonClassList.add(`${this.classNavigationButton}--${t}`),Array.from(this.element.querySelectorAll("mg-menu-item")).forEach((i=>{this.isDirection(w.VERTICAL,t)?i.dataset.level=`${(Number(i.dataset.level)||1)+1}`:delete i.dataset.level}))}validateHasChildren(t){if(t&&void 0!==this.element.href)throw new Error(`<${this.name}> prop "href" is unauthorizied when element is a parent.`)}watchDataStyleDirection(t){this.direction=t,this.watchIsIcon(this.isIcon)}watchDataHasFocus(t){r(t)||this.updateExpanded(Boolean(t))}updatePopoverGuard(){const t=this.element.querySelector("*:not([slot])");null!==t&&(this.hasPopover()?t.dataset.mgPopoverGuard=this.popoverIdentifier:delete t.dataset.mgPopoverGuard)}componentWillLoad(){this.hasChildren=Array.from(this.element.children).some((t=>!["image","information","label","metadata"].includes(t.getAttribute("slot")))),this.messages=g(this.element).messages.menuItem,this.isItemMore=void 0!==this.element.dataset.overflowMore,this.watchStatus(this.status),this.watchExpanded(this.expanded),this.watchTarget(this.target),this.watchIdentifier(this.identifier),this.watchIsIcon(this.isIcon)}componentDidLoad(){return this.updateSlot(!0),setTimeout((()=>{this.watchDataStyleDirection(this.element.dataset.styleDirection),this.updateItem([f.ACTIVE]),this.itemLoaded.emit(),new MutationObserver((t=>{t.some((t=>["hidden","status"].includes(t.attributeName)))&&this.updateStatus(this.hasChildren?void 0:[f.ACTIVE]),t.some((t=>"characterData"===t.type))&&this.updateSlot(),t.some((t=>"childList"===t.type))&&this.updateItem(),this.itemUpdated.emit()})).observe(this.element,{attributes:!0,childList:!0,characterData:!0,subtree:!0})}),0)}componentShouldUpdate(){return h((()=>{this.itemUpdated.emit()}))}renderInformationSlotOrNotification(){return this.displayNotificationBadge?a("span",{class:`${this.classNavigationButton}-text-content-notification`},a("mg-badge",{label:this.messages.badgeLabel,value:"!",variant:"text-color",slot:"information"})):a("slot",{name:"information"})}renderInteractiveElement(){return a(void 0!==this.href?"a":"button",{href:this.href,class:this.classNavigationButtonClassList.join(),tabindex:[f.DISABLED,f.HIDDEN].includes(this.status)?-1:void 0,disabled:this.status===f.DISABLED,hidden:this.status===f.HIDDEN,target:void 0!==this.href&&void 0!==this.target?this.target:void 0,"aria-expanded":this.hasChildren&&this.expanded.toString(),"aria-current":this.status===f.ACTIVE&&"page",onClick:this.handleElementCLick},a("slot",{name:"image"}),a("div",{class:{[`${this.classNavigationButton}-center`]:!0,"mg-u-visually-hidden":this.isIcon}},a("div",{class:`${this.classNavigationButton}-text-content`},a("slot",{name:"label"}),!this.isIcon&&this.renderInformationSlotOrNotification(),"_blank"===this.target&&[a("mg-icon",{key:"icon-new-tab",class:`${this.classNavigationButton}-new-tab`,icon:"arrow-up-right-square"}),a("span",{key:"a11y-new-tab",class:"mg-u-visually-hidden"},this.messages.openNewTab)]),!this.isIcon&&a("slot",{name:"metadata"})),this.isIcon&&this.renderInformationSlotOrNotification(),this.hasChildren&&void 0===this.href&&!this.isIcon&&a("span",{class:{[`${this.classNavigationButton}-chevron`]:!0,[`${this.classNavigationButton}-chevron--rotate`]:!0===this.expanded}},a("mg-icon",{icon:"chevron-down",size:"small"})))}render(){const t=()=>({"mg-c-menu-item__collapse-container":!0,"mg-c-menu-item__collapse-container--first-level":(this.isInMainMenu()||this.isItemMore)&&this.isDirection(w.HORIZONTAL)});return a(o,{key:"374bf5cb625380973d15163b1088e7e743da5dd4",role:this.isItemMore?"presentation":"listitem"},this.hasPopover()?a("mg-popover",{display:this.expanded,placement:"bottom-start",arrowHide:!0,"onDisplay-change":this.handlePopoverDisplay,identifier:this.popoverIdentifier,"data-fallback-placement":"bottom-end"},this.renderInteractiveElement(),a("div",{class:t(),slot:"content"},this.renderSlot())):[this.renderInteractiveElement(),a("div",{key:"vertical-container",class:t(),hidden:!this.expanded},this.renderSlot())])}get element(){return this}static get watchers(){return{identifier:[{watchIdentifier:0}],target:[{watchTarget:0}],status:[{watchStatus:0}],isIcon:[{watchIsIcon:0}],expanded:[{watchExpanded:0}],direction:[{validateDirection:0}],hasChildren:[{validateHasChildren:0}],"data-style-direction":[{watchDataStyleDirection:0}],"data-has-focus":[{watchDataHasFocus:0}]}}static get style(){return'.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}:host([data-style-direction=vertical][data-level="1"]) .mg-c-menu-item__navigation-button{padding-left:calc(1*var(--mg-c-menu-item-button-padding-horizontal) + var(--mg-c-menu-item-button-margin-horizontal))}:host([data-level="1"]) .mg-c-menu-item__collapse-container{z-index:10}:host([data-style-direction=vertical][data-level="2"]) .mg-c-menu-item__navigation-button{padding-left:calc(2*var(--mg-c-menu-item-button-padding-horizontal) + var(--mg-c-menu-item-button-margin-horizontal))}:host([data-level="2"]) .mg-c-menu-item__collapse-container{z-index:20}:host([data-style-direction=vertical][data-level="3"]) .mg-c-menu-item__navigation-button{padding-left:calc(3*var(--mg-c-menu-item-button-padding-horizontal) + var(--mg-c-menu-item-button-margin-horizontal))}:host([data-level="3"]) .mg-c-menu-item__collapse-container{z-index:30}:host([data-style-direction=vertical][data-level="4"]) .mg-c-menu-item__navigation-button{padding-left:calc(4*var(--mg-c-menu-item-button-padding-horizontal) + var(--mg-c-menu-item-button-margin-horizontal))}:host([data-level="4"]) .mg-c-menu-item__collapse-container{z-index:40}:host([data-style-direction=vertical][data-level="5"]) .mg-c-menu-item__navigation-button{padding-left:calc(5*var(--mg-c-menu-item-button-padding-horizontal) + var(--mg-c-menu-item-button-margin-horizontal))}:host([data-level="5"]) .mg-c-menu-item__collapse-container{z-index:50}:host([data-style-direction=vertical][data-level="6"]) .mg-c-menu-item__navigation-button{padding-left:calc(6*var(--mg-c-menu-item-button-padding-horizontal) + var(--mg-c-menu-item-button-margin-horizontal))}:host([data-level="6"]) .mg-c-menu-item__collapse-container{z-index:60}.mg-c-menu-item__navigation-button{position:relative;display:flex;height:calc(var(--mg-c-menu-item-button-spacing-vertical)*2 + var(--mg-c-menu-item-height));box-sizing:border-box;align-items:center;padding:var(--mg-c-menu-item-button-spacing-vertical) calc(var(--mg-c-menu-item-button-margin-horizontal) + var(--mg-c-menu-item-button-padding-horizontal)) var(--mg-c-menu-item-button-spacing-vertical) calc(var(--mg-c-menu-item-button-margin-horizontal) + var(--mg-c-menu-item-button-padding-horizontal));border:none;border-radius:var(--mg-b-size-8);background-color:unset;color:var(--mg-c-menu-item-color-text, var(--mg-b-color-dark));column-gap:var(--mg-b-size-8);cursor:pointer;font-family:var(--mg-b-font-family);font-weight:400;line-height:var(--mg-b-line-height);text-decoration:none;white-space:nowrap}.mg-c-menu-item__navigation-button::after{position:absolute;background-color:var(--mg-c-menu-item-color);content:""}.mg-c-menu-item__navigation-button:disabled,.mg-c-menu-item__navigation-button--disabled{cursor:default;opacity:var(--mg-b-opacity-element-disabled)}.mg-c-menu-item__navigation-button:hover,.mg-c-menu-item__navigation-button:focus-visible{z-index:10}.mg-c-menu-item__navigation-button:hover:not(.mg-c-menu-item__navigation-button--disabled)::before,.mg-c-menu-item__navigation-button:focus-visible:not(.mg-c-menu-item__navigation-button--disabled)::before{position:absolute;z-index:-1;top:0;left:0;width:stretch;height:var(--mg-c-menu-item-height);box-sizing:border-box;border-radius:var(--mg-b-size-8);margin-right:var(--mg-c-menu-item-button-margin-horizontal);margin-left:var(--mg-c-menu-item-button-margin-horizontal);background-color:color-mix(in srgb, var(--mg-c-menu-item-color-text, var(--mg-b-color-dark)), transparent 90%);content:""}.mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item__navigation-button ::slotted([slot=metadata]){font-size:var(--mg-b-font-size)}.mg-c-menu-item__navigation-button:not(.mg-c-menu-item__navigation-button--disabled).mg-c-menu-item__navigation-button--horizontal::before{margin:var(--mg-c-menu-item-button-spacing-vertical) var(--mg-c-menu-item-button-margin-horizontal)}.mg-c-menu-item__navigation-button:not(.mg-c-menu-item__navigation-button--disabled).mg-c-menu-item__navigation-button--vertical::before{height:100%;margin:0 var(--mg-c-menu-item-button-margin-horizontal)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active{color:var(--mg-c-menu-item-color);font-weight:600}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active.mg-c-menu-item__navigation-button--horizontal::after{bottom:0;left:50%;width:calc(100% - var(--mg-b-size-12)*2);height:var(--mg-b-size-4);border-top-left-radius:var(--mg-b-size-8);border-top-right-radius:var(--mg-b-size-8);transform:translateX(-50%)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active.mg-c-menu-item__navigation-button--vertical::after{top:50%;left:0;width:var(--mg-b-size-4);height:calc(100% - var(--mg-b-size-8)*2);border-bottom-right-radius:var(--mg-b-size-8);border-top-right-radius:var(--mg-b-size-8);transform:translateY(-50%)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--hidden{display:none}.mg-c-menu-item{max-width:var(--mg-c-menu-item-navigation-button-max-width)}.mg-c-menu-item__collapse-container{z-index:10;width:max-content}.mg-c-menu-item__navigation-button-center{min-width:0}.mg-c-menu-item__navigation-button-text-content{display:flex;width:100%;align-items:center}.mg-c-menu-item__navigation-button-text-content-notification,.mg-c-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:var(--mg-b-size-8);font-size:var(--mg-b-font-size)}.mg-c-menu-item__navigation-button-new-tab{margin-left:var(--mg-b-size-4)}.mg-c-menu-item__navigation-button-chevron{display:var(--mg-c-menu-item-chevron-display);margin-left:auto;transition:200ms}.mg-c-menu-item__navigation-button-chevron--rotate.mg-c-menu-item__navigation-button-chevron{transform:rotate(180deg)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--is-icon{min-width:calc(var(--mg-c-menu-item-height) + var(--mg-c-menu-item-button-margin-horizontal)*2);justify-content:center;padding:.2rem;gap:var(--mg-b-size-4)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--is-icon::before{min-width:var(--mg-c-menu-item-height)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--is-icon .mg-c-menu-item__navigation-button-text-content-notification{margin-left:0}:host{position:relative;display:flex;--mg-c-popover-spacing-vertical:0;--mg-c-popover-spacing-horizontal:0;--mg-c-popover-max-width:unset;--mg-c-menu-item-height:var(--mg-b-size-40)}:host mg-popover{--mg-c-popover-overflow:hidden}:host mg-popover-content[data-popper-placement^=bottom][data-arrow-hide]{margin-top:.2rem !important}:host([data-style-direction=vertical]){--mg-c-menu-item-height:var(--mg-b-size-24);--mg-c-menu-item-button-margin-horizontal:var(--mg-b-size-8);--mg-c-menu-item-button-padding-horizontal:var(--mg-b-size-12);--mg-c-menu-item-button-spacing-vertical:var(--mg-b-size-8);flex-direction:column}:host([data-style-direction=vertical]) .mg-c-menu-item__collapse-container{position:unset;top:unset;left:unset;width:unset}:host([data-style-direction=vertical]) .mg-c-menu-item-chevron{margin-left:auto}:host([data-style-direction=horizontal]){--mg-c-menu-item-button-margin-horizontal:var(--mg-b-size-4);--mg-c-menu-item-button-padding-horizontal:var(--mg-b-size-12);--mg-c-menu-item-button-spacing-vertical:var(--mg-b-size-12)}:host([data-style-direction=horizontal]) ::slotted(mg-menu),.mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level ::slotted(mg-menu){padding:var(--mg-b-size-8) 0}::slotted([slot=label]),::slotted([slot=metadata]){display:block;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}::slotted([slot=metadata]){color:var(--mg-b-color-neutral-90)}::slotted(*){display:flex;flex-direction:column}::slotted([slot=image]){width:auto !important;max-width:calc(var(--mg-c-menu-item-height) - var(--mg-b-size-8)) !important;height:auto !important;max-height:calc(var(--mg-c-menu-item-height) - var(--mg-b-size-8)) !important}:host([status=disabled]){pointer-events:none}:host([hidden]){display:none}'}},[257,"mg-menu-item",{identifier:[513],href:[1],target:[1],status:[1537],isIcon:[1028,"is-icon"],expanded:[1028],classNavigationButtonClassList:[32],direction:[32],isItemMore:[32],hasChildren:[32],displayNotificationBadge:[32]},void 0,{identifier:[{watchIdentifier:0}],target:[{watchTarget:0}],status:[{watchStatus:0}],isIcon:[{watchIsIcon:0}],expanded:[{watchExpanded:0}],direction:[{validateDirection:0}],hasChildren:[{validateHasChildren:0}],"data-style-direction":[{watchDataStyleDirection:0}],"data-has-focus":[{watchDataHasFocus:0}]}]);function y(){"undefined"!=typeof customElements&&["mg-menu-item","mg-badge","mg-button","mg-card","mg-icon","mg-popover","mg-popover-content"].forEach((i=>{switch(i){case"mg-menu-item":customElements.get(t(i))||customElements.define(t(i),x);break;case"mg-badge":customElements.get(t(i))||d();break;case"mg-button":customElements.get(t(i))||u();break;case"mg-card":customElements.get(t(i))||v();break;case"mg-icon":customElements.get(t(i))||b();break;case"mg-popover":customElements.get(t(i))||p();break;case"mg-popover-content":customElements.get(t(i))||_()}}))}y();export{x as M,f as S,w as a,y as d}

package/dist/components/mg-menu.js

@@ -1,6 +1 @@
-import { a as MgMenu$1, b as defineCustomElement$1 } from './mg-item-more2.js';
-
-const MgMenu = MgMenu$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MgMenu, defineCustomElement };
+import{a as m,b as o}from"./mg-item-more2.js";const r=m,s=o;export{r as MgMenu,s as defineCustomElement}

package/dist/components/mg-message.js

@@ -1,6 +1 @@
-import { M as MgMessage$1, d as defineCustomElement$1 } from './mg-message2.js';
-
-const MgMessage = MgMessage$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MgMessage, defineCustomElement };
+import{M as s,d as m}from"./mg-message2.js";const o=s,a=m;export{o as MgMessage,a as defineCustomElement}