@mgdis/mg-components 6.20.0 → 6.22.0

package/dist/components/mg-item-more2.js

@@ -1,505 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { t as toString } from './index2.js';
-import { d as defineCustomElement$4, a as directions, s as sizes } from './mg-menu-item2.js';
-import { i as initLocales } from './index3.js';
-import { d as defineCustomElement$8 } from './mg-badge2.js';
-import { d as defineCustomElement$7 } from './mg-button2.js';
-import { d as defineCustomElement$6 } from './mg-card2.js';
-import { d as defineCustomElement$5 } from './mg-icon2.js';
-import { d as defineCustomElement$3 } from './mg-popover2.js';
-import { d as defineCustomElement$2 } from './mg-popover-content2.js';
-
-/**
- *
- */
-class OverflowBehavior {
-    constructor(parentElement, itemMoreElement, itemMoreContainerElement) {
-        this.parentElement = parentElement;
-        this.itemMoreElement = itemMoreElement;
-        this.itemMoreContainerElement = itemMoreContainerElement;
-        /**********
-         * Public *
-         **********/
-        /**
-         * Disconnect ResizeObserver
-         */
-        this.disconnect = () => {
-            this._resizeObserver.disconnect();
-        };
-        /************
-         * Internal *
-         ************/
-        /**
-         * Utility method to know if element is HTMLMgItemMoreElement
-         * @param element - element to match with 'MORE' element
-         * @returns truthy if element is the 'MORE' element
-         */
-        this.isMoreElement = (element) => element === this.itemMoreElement;
-        /**
-         * Utility method to know if item overflow partialy or totaly in the container
-         * @param cumulateWidth - previous sibling elements cumulate width + item width
-         * @param item - item HTML element
-         * @returns truthy if element is overflow
-         */
-        this.isOverflowElement = (cumulateWidth, item) => {
-            const displayMgItemMore = this.itemMoreContainerElement.children.length > 0;
-            if (!this.isMoreElement(item)) {
-                if (item.nextElementSibling.nodeName !== 'MG-ITEM-MORE' && !displayMgItemMore)
-                    return cumulateWidth + this.itemMoreElement.offsetWidth > this._availableWidth;
-                else
-                    return cumulateWidth > this._availableWidth;
-            }
-            else
-                return !displayMgItemMore;
-        };
-        /**
-         * Toogle item from isHidden condition
-         * @param item - item to update
-         * @param isHidden - item is hidden
-         */
-        this.toggleItem = (item, isHidden) => {
-            if (this.isMoreElement(item) && isHidden)
-                item.setAttribute('hidden', '');
-            else if (this.isMoreElement(item) && !isHidden)
-                item.removeAttribute('hidden');
-            else if (!this.isMoreElement(item) && isHidden)
-                this.itemMoreContainerElement.appendChild(item);
-            else if (!this.isMoreElement(item) && item.parentElement !== this.parentElement)
-                this.parentElement.insertBefore(item, this.itemMoreElement);
-        };
-        if (this.parentElement === null || this.itemMoreElement === null || this.itemMoreContainerElement === null) {
-            throw new Error('OverflowBehavior - all constructor params are required');
-        }
-        const items = Array.from(this.parentElement.children);
-        this._resizeObserver = new ResizeObserver(entries => {
-            this._availableWidth = entries
-                .map(entry => entry.contentRect.width)
-                .sort((a, b) => a - b)
-                .shift();
-            // reset items
-            items.forEach(item => this.toggleItem(item, false));
-            let accWidth = 0;
-            items.forEach((item, index) => {
-                accWidth += item.offsetWidth;
-                if (index > 0)
-                    this.toggleItem(item, this.isOverflowElement(accWidth, item));
-            });
-        });
-        this._resizeObserver.observe(this.parentElement);
-    }
-}
-
-const mgMenuCss = ".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-color-background: Defines the background color of the menu. Unset by default, fallback on `--mg-b-color-light`.\n */:host{display:inline-flex;width:100%;min-width:0;background-color:var(--mg-c-menu-color-background, var(--mg-b-color-light))}:host([direction=vertical]){display:flex;height:100%;flex-direction:column;overflow-y:auto}";
-
-const MgMenu = /*@__PURE__*/ proxyCustomElement(class MgMenu extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        /************
-         * Internal *
-         ************/
-        this.name = 'mg-menu';
-        /**
-         * Component display direction.
-         */
-        this.direction = 'horizontal';
-        /**
-         * Define mg-menu size
-         */
-        this.size = 'medium';
-        /*************
-         * Methods *
-         *************/
-        /**
-         * Test if menu is a child menu
-         * @returns truthy if menu is a child menu
-         */
-        this.isChildMenu = () => this.element.closest('mg-menu-item') !== null;
-        /**
-         * Get menu children items
-         * @returns menu children mg-menu-item
-         */
-        this.getMenuItems = (menu = this.element) => {
-            var _a, _b;
-            const menuItems = Array.from(menu.children).filter(child => child.nodeName === 'MG-MENU-ITEM');
-            const itemMoreMenuItem = (_b = (_a = menu.querySelector('mg-item-more')) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('mg-menu-item');
-            if (itemMoreMenuItem !== null && itemMoreMenuItem !== undefined) {
-                menuItems.push(itemMoreMenuItem);
-            }
-            return menuItems;
-        };
-        /**
-         * Update menu items
-         */
-        this.updateMenuItems = () => {
-            this.getMenuItems().forEach(item => {
-                item.dataset.styleDirection = this.direction;
-            });
-            // render mg-item-more to manage OverflowBehavior
-            this.renderMgItemMore();
-        };
-        /**
-         * render mg-item-more
-         */
-        this.renderMgItemMore = () => {
-            var _a;
-            if (this.direction === directions.VERTICAL || (this.direction === directions.HORIZONTAL && this.isChildMenu()) || this.element.children.length <= 1) {
-                return;
-            }
-            // Insert mg-item-more outside the mg-menu shadowdom
-            let itemMoreElement = this.element.querySelector('mg-item-more');
-            if (itemMoreElement === null) {
-                itemMoreElement = document.createElement('mg-item-more');
-                this.element.appendChild(itemMoreElement);
-            }
-            // update mg-item-more props
-            for (const propertie in this.itemmore) {
-                itemMoreElement[propertie] = this.itemmore[propertie];
-            }
-            if (((_a = this.itemmore) === null || _a === void 0 ? void 0 : _a.size) === undefined)
-                itemMoreElement.size = this.size;
-        };
-    }
-    validateLabel(newValue) {
-        if (newValue === undefined && !this.element.hasAttribute('aria-label')) {
-            throw new Error(`<${this.name}> prop "label" is required. Passed value: ${toString(newValue)}.`);
-        }
-    }
-    validateDirection(newValue) {
-        if (![directions.VERTICAL, directions.HORIZONTAL].includes(newValue)) {
-            throw new Error(`<${this.name}> prop "direction" must be one of: ${directions.HORIZONTAL}, ${directions.VERTICAL}. Passed value: ${toString(newValue)}.`);
-        }
-        else {
-            this.updateMenuItems();
-        }
-    }
-    validateItemMore(newValue) {
-        if (newValue !== undefined && this.direction !== directions.HORIZONTAL) {
-            throw new Error(`<${this.name}> prop "itemmore" must be paired with direction ${directions.HORIZONTAL}.`);
-        }
-        else if (newValue !== undefined) {
-            this.renderMgItemMore();
-        }
-    }
-    validateSize(newValue) {
-        if (!sizes.includes(newValue)) {
-            throw new Error(`<${this.name}> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${toString(newValue)}.`);
-        }
-    }
-    /**
-     * Define mg-menu-item listener when they are loaded
-     * @param event - mg-item-loaded "item-loaded" custom event
-     */
-    updateItemListener(event) {
-        // `<mg-action-more>` element doesn't need `data-has-focus` attribute
-        if (event.target.nodeName === 'MG-ACTION-MORE') {
-            return;
-        }
-        const itemToWatch = event.target.nodeName === 'MG-ITEM-MORE' ? event.target.shadowRoot.querySelector('mg-menu-item') : event.target;
-        ['click', 'focus'].forEach(trigger => {
-            itemToWatch.addEventListener(trigger, () => {
-                const focusedItem = event.target.closest('mg-menu').querySelector('[data-has-focus]');
-                // exit process if new focused item in the current menu children
-                if (focusedItem === itemToWatch)
-                    return;
-                // reset expanded on previous active menu item
-                if (focusedItem !== null)
-                    focusedItem.removeAttribute('data-has-focus');
-                // update focusedMenuItem with new value
-                itemToWatch.setAttribute('data-has-focus', 'true');
-            });
-        });
-    }
-    /*************
-     * Lifecycle *
-     *************/
-    /**
-     * Validate props
-     */
-    componentWillLoad() {
-        this.validateDirection(this.direction);
-        this.validateLabel(this.label);
-        this.validateItemMore(this.itemmore);
-        this.validateSize(this.size);
-    }
-    /**
-     * Check if component slots configuration
-     */
-    componentDidLoad() {
-        // set menu-items
-        this.updateMenuItems();
-        // add listener to close main menu when focus leave it
-        if (!this.isChildMenu() && this.direction === directions.HORIZONTAL) {
-            document.addEventListener('focusin', (event) => {
-                const isElementChild = (element) => {
-                    if (element === this.element)
-                        return true;
-                    else if (element.parentElement === null)
-                        return false;
-                    else
-                        return isElementChild(element.parentElement);
-                };
-                if (event.target.closest('mg-menu') === null || !isElementChild(event.target)) {
-                    const focusedItem = this.element.querySelector('[data-has-focus]');
-                    // reset expanded on previous active menu item
-                    if (focusedItem !== null)
-                        focusedItem.removeAttribute('data-has-focus');
-                }
-            });
-        }
-        // add mutation observer to improve global reactivity
-        new MutationObserver(this.updateMenuItems).observe(this.element, { childList: true });
-    }
-    /**
-     * Render
-     * @returns HTML Element
-     */
-    render() {
-        return (h(Host, { key: '753833b01b86d6983f5d063f5598e2187b147a6e', role: "list", "aria-label": this.label }, h("slot", { key: '56702e49f5a97feddeb66e6271bd898061aa0d48' })));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "label": ["validateLabel"],
-        "direction": ["validateDirection"],
-        "itemmore": ["validateItemMore"],
-        "size": ["validateSize"]
-    }; }
-    static get style() { return mgMenuCss; }
-}, [257, "mg-menu", {
-        "label": [1],
-        "direction": [513],
-        "itemmore": [16],
-        "size": [1]
-    }, [[0, "item-loaded", "updateItemListener"]], {
-        "label": ["validateLabel"],
-        "direction": ["validateDirection"],
-        "itemmore": ["validateItemMore"],
-        "size": ["validateSize"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mg-menu", "mg-badge", "mg-button", "mg-card", "mg-icon", "mg-item-more", "mg-menu", "mg-menu-item", "mg-popover", "mg-popover-content"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mg-menu":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MgMenu);
-            }
-            break;
-        case "mg-badge":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "mg-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "mg-card":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "mg-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "mg-item-more":
-            if (!customElements.get(tagName)) {
-                defineCustomElement();
-            }
-            break;
-        case "mg-menu":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-        case "mg-menu-item":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "mg-popover":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "mg-popover-content":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const mgItemMoreCss = ".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:not([hidden]){display:flex}";
-
-const MgItemMore = /*@__PURE__*/ proxyCustomElement(class MgItemMore extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        /************
-         * Internal *
-         ************/
-        this.name = 'mg-item-more';
-        /**
-         * Define icon
-         */
-        this.icon = { icon: 'ellipsis-vertical' };
-        /**
-         * Define slot label element
-         */
-        this.slotlabel = { display: false };
-    }
-    validateIcon(newValue) {
-        if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.icon !== 'string'))
-            throw new Error(`<${this.name}> prop "icon" must match MgItemMore['icon'] type. Passed value: ${toString(newValue)}.`);
-    }
-    validateSlotLabel(newValue) {
-        if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.display !== 'boolean'))
-            throw new Error(`<${this.name}> prop "slotlabel" must match MgItemMore['slotlabel'] type. Passed value: ${toString(newValue)}.`);
-        else if (typeof newValue.label !== 'string')
-            this.slotlabel.label = this.messages.menuLabel;
-    }
-    validateSize(newValue) {
-        if (newValue && !sizes.includes(newValue))
-            throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type. Passed value: ${toString(newValue)}.`);
-    }
-    /*************
-     * Lifecycle *
-     *************/
-    /**
-     * Set variables and validate props
-     */
-    componentWillLoad() {
-        // init variables
-        this.messages = initLocales(this.element).messages.itemMore;
-        // validate props
-        this.validateIcon(this.icon);
-        this.validateSlotLabel(this.slotlabel);
-        this.validateSize(this.size);
-    }
-    /**
-     * Ensure parent DOM is fully rendered with timeout method before parse elements
-     * @returns timeout
-     */
-    componentDidLoad() {
-        // ensure parent menu is fully rendered
-        return setTimeout(() => {
-            this.parentMenu = this.element.closest('mg-menu');
-        });
-    }
-    /**
-     * Set OverflowBehavior when parentMenu state is upate AND defined
-     */
-    componentDidUpdate() {
-        if (this.parentMenu && this.overflowBehavior === undefined) {
-            this.overflowBehavior = new OverflowBehavior(this.parentMenu, this.element, this.itemMoreContainer);
-        }
-    }
-    /**
-     * Disconnect overflow ResizeObserver
-     */
-    disconnectedCallback() {
-        var _a;
-        (_a = this.overflowBehavior) === null || _a === void 0 ? void 0 : _a.disconnect();
-    }
-    /**
-     * Render
-     * @returns HTML Element
-     */
-    render() {
-        const menuItemIdentifier = 'mg-item-more';
-        return (h(Host, { key: '18219f5c906bb2c42dca842de120d41338a31872', role: "listitem", "data-mg-popover-guard": `${menuItemIdentifier}-popover` }, this.parentMenu && (h("mg-menu-item", { key: '2efd90d30cc2f51c9f5bff8512c765876730ca25', "data-overflow-more": true, "data-size": this.parentMenu.size, "data-style-direction": directions.HORIZONTAL, identifier: menuItemIdentifier }, h("mg-icon", { key: '6d4be9284b63935d298dfe8bf1ba50c70d9b140d', icon: this.icon.icon, size: this.size, slot: "image" }), h("span", { key: '52cd9091b29710fb66d2c421ae64bd31996d3395', class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), h("mg-menu", { key: 'ea3152d9de22b209ed016e51e40c658dc6c58cd2', direction: directions.VERTICAL, label: this.messages.menuLabel, size: this.size, ref: ref => {
-                if (ref !== null)
-                    this.itemMoreContainer = ref;
-            } })))));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "icon": ["validateIcon"],
-        "slotlabel": ["validateSlotLabel"],
-        "size": ["validateSize"]
-    }; }
-    static get style() { return mgItemMoreCss; }
-}, [257, "mg-item-more", {
-        "icon": [16],
-        "slotlabel": [16],
-        "size": [1],
-        "parentMenu": [32]
-    }, undefined, {
-        "icon": ["validateIcon"],
-        "slotlabel": ["validateSlotLabel"],
-        "size": ["validateSize"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mg-item-more", "mg-badge", "mg-button", "mg-card", "mg-icon", "mg-item-more", "mg-menu", "mg-menu-item", "mg-popover", "mg-popover-content"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mg-item-more":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MgItemMore);
-            }
-            break;
-        case "mg-badge":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "mg-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "mg-card":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "mg-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "mg-item-more":
-            if (!customElements.get(tagName)) {
-                defineCustomElement();
-            }
-            break;
-        case "mg-menu":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-        case "mg-menu-item":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "mg-popover":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "mg-popover-content":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-defineCustomElement();
-
-export { MgItemMore as M, MgMenu as a, defineCustomElement$1 as b, defineCustomElement as d };
+import{transformTag as t,proxyCustomElement as e,HTMLElement as i,h as o,Host as s}from"@stencil/core/internal/client";import{t as m}from"./index2.js";import{d as r,a}from"./mg-menu-item2.js";import{i as n}from"./index3.js";import{d as c}from"./mg-badge2.js";import{d as l}from"./mg-button2.js";import{d as h}from"./mg-card2.js";import{d}from"./mg-icon2.js";import{d as u}from"./mg-popover2.js";import{d as p}from"./mg-popover-content2.js";class g{constructor(t,e,i){if(this.parentElement=t,this.itemMoreElement=e,this.itemMoreContainerElement=i,this.disconnect=()=>{this._resizeObserver.disconnect()},this.isMoreElement=t=>t===this.itemMoreElement,this.isOverflowElement=(t,e)=>{const i=this.itemMoreContainerElement.children.length>0;return this.isMoreElement(e)?!i:"MG-ITEM-MORE"===e.nextElementSibling.nodeName||i?t>this._availableWidth:t+this.itemMoreElement.offsetWidth>this._availableWidth},this.toggleItem=(t,e)=>{this.isMoreElement(t)&&e?t.setAttribute("hidden",""):this.isMoreElement(t)&&!e?t.removeAttribute("hidden"):!this.isMoreElement(t)&&e?this.itemMoreContainerElement.appendChild(t):this.isMoreElement(t)||t.parentElement===this.parentElement||this.parentElement.insertBefore(t,this.itemMoreElement)},null===this.parentElement||null===this.itemMoreElement||null===this.itemMoreContainerElement)throw new Error("OverflowBehavior - all constructor params are required");const o=Array.from(this.parentElement.children);this._resizeObserver=new ResizeObserver((t=>{this._availableWidth=t.map((t=>t.contentRect.width)).sort(((t,e)=>t-e)).shift(),o.forEach((t=>this.toggleItem(t,!1)));let e=0;o.forEach(((t,i)=>{e+=t.offsetWidth,i>0&&this.toggleItem(t,this.isOverflowElement(e,t))}))})),this._resizeObserver.observe(this.parentElement)}}const b=e(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.name="mg-menu",this.direction="horizontal",this.isChildMenu=()=>null!==this.element.closest("mg-menu-item"),this.getMenuItems=(t=this.element)=>{var e,i;const o=Array.from(t.children).filter((t=>"MG-MENU-ITEM"===t.nodeName)),s=null===(i=null===(e=t.querySelector("mg-item-more"))||void 0===e?void 0:e.shadowRoot)||void 0===i?void 0:i.querySelector("mg-menu-item");return null!=s&&o.push(s),o},this.updateMenuItems=()=>{this.getMenuItems().forEach((t=>{t.dataset.styleDirection=this.direction})),this.renderMgItemMore()},this.renderMgItemMore=()=>{if(this.direction===a.VERTICAL||this.direction===a.HORIZONTAL&&this.isChildMenu()||this.element.children.length<=1)return;let t=this.element.querySelector("mg-item-more");null===t&&(t=document.createElement("mg-item-more"),this.element.appendChild(t));for(const e in this.itemmore)t[e]=this.itemmore[e]}}validateLabel(t){if(void 0===t&&!this.element.hasAttribute("aria-label"))throw new Error(`<${this.name}> prop "label" is required. Passed value: ${m(t)}.`)}validateDirection(t){if(![a.VERTICAL,a.HORIZONTAL].includes(t))throw new Error(`<${this.name}> prop "direction" must be one of: ${a.HORIZONTAL}, ${a.VERTICAL}. Passed value: ${m(t)}.`);this.updateMenuItems()}validateItemMore(t){if(void 0!==t&&this.direction!==a.HORIZONTAL)throw new Error(`<${this.name}> prop "itemmore" must be paired with direction ${a.HORIZONTAL}.`);void 0!==t&&this.renderMgItemMore()}updateItemListener(t){if("MG-ACTION-MORE"===t.target.nodeName)return;const e="MG-ITEM-MORE"===t.target.nodeName?t.target.shadowRoot.querySelector("mg-menu-item"):t.target;["click","focus"].forEach((i=>{e.addEventListener(i,(()=>{const i=t.target.closest("mg-menu").querySelector("[data-has-focus]");i!==e&&(null!==i&&i.removeAttribute("data-has-focus"),e.setAttribute("data-has-focus","true"))}))}))}componentWillLoad(){this.validateDirection(this.direction),this.validateLabel(this.label),this.validateItemMore(this.itemmore)}componentDidLoad(){this.updateMenuItems(),this.isChildMenu()||this.direction!==a.HORIZONTAL||document.addEventListener("focusin",(t=>{const e=t=>t===this.element||null!==t.parentElement&&e(t.parentElement);if(null===t.target.closest("mg-menu")||!e(t.target)){const t=this.element.querySelector("[data-has-focus]");null!==t&&t.removeAttribute("data-has-focus")}})),new MutationObserver(this.updateMenuItems).observe(this.element,{childList:!0})}render(){return o(s,{key:"17b5111014e866939f58170452ca74ee40c8454c",role:"list","aria-label":this.label},o("slot",{key:"7c2a9aafccbc7526c74acaf7a505d7a33befc5ad"}))}get element(){return this}static get watchers(){return{label:[{validateLabel:0}],direction:[{validateDirection:0}],itemmore:[{validateItemMore: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{display:inline-flex;width:100%;min-width:0;background-color:var(--mg-c-menu-color-background, var(--mg-b-color-light))}:host([direction=vertical]){display:flex;height:100%;flex-direction:column;gap:.2rem;overflow-y:auto}"}},[257,"mg-menu",{label:[1],direction:[513],size:[16],itemmore:[16]},[[0,"item-loaded","updateItemListener"]],{label:[{validateLabel:0}],direction:[{validateDirection:0}],itemmore:[{validateItemMore:0}]}]);function f(){"undefined"!=typeof customElements&&["mg-menu","mg-badge","mg-button","mg-card","mg-icon","mg-item-more","mg-menu","mg-menu-item","mg-popover","mg-popover-content"].forEach((e=>{switch(e){case"mg-menu":customElements.get(t(e))||customElements.define(t(e),b);break;case"mg-badge":customElements.get(t(e))||c();break;case"mg-button":customElements.get(t(e))||l();break;case"mg-card":customElements.get(t(e))||h();break;case"mg-icon":customElements.get(t(e))||d();break;case"mg-item-more":customElements.get(t(e))||E();break;case"mg-menu":customElements.get(t(e))||f();break;case"mg-menu-item":customElements.get(t(e))||r();break;case"mg-popover":customElements.get(t(e))||u();break;case"mg-popover-content":customElements.get(t(e))||p()}}))}f();const v=e(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.name="mg-item-more",this.icon={icon:"ellipsis-vertical"},this.slotlabel={display:!1}}validateIcon(t){if("object"!=typeof t||"object"==typeof t&&"string"!=typeof t.icon)throw new Error(`<${this.name}> prop "icon" must match MgItemMore['icon'] type. Passed value: ${m(t)}.`)}validateSlotLabel(t){if("object"!=typeof t||"object"==typeof t&&"boolean"!=typeof t.display)throw new Error(`<${this.name}> prop "slotlabel" must match MgItemMore['slotlabel'] type. Passed value: ${m(t)}.`);"string"!=typeof t.label&&(this.slotlabel.label=this.messages.menuLabel)}componentWillLoad(){this.messages=n(this.element).messages.itemMore,this.validateIcon(this.icon),this.validateSlotLabel(this.slotlabel)}componentDidLoad(){return setTimeout((()=>{this.parentMenu=this.element.closest("mg-menu")}))}componentDidUpdate(){this.parentMenu&&void 0===this.overflowBehavior&&(this.overflowBehavior=new g(this.parentMenu,this.element,this.itemMoreContainer))}disconnectedCallback(){var t;null===(t=this.overflowBehavior)||void 0===t||t.disconnect()}render(){const t="mg-item-more";return o(s,{key:"85f8bf18855610a31c4afc0051886c5020d9a1b6",role:"listitem","data-mg-popover-guard":`${t}-popover`},this.parentMenu&&o("mg-menu-item",{key:"10d8d6ca20df0cba51f601bdafe0260e48842fa3","data-overflow-more":!0,"data-style-direction":a.HORIZONTAL,identifier:t,isIcon:!this.slotlabel.display},o("mg-icon",{key:"f957f3179d07df707e871e44e26eddcb911521e4",icon:this.icon.icon,slot:"image"}),o("span",{key:"af9d0b934313b28983b650d58baa5b83b937836a",class:{"mg-u-visually-hidden":!this.slotlabel.display},slot:"label"},this.slotlabel.label),o("mg-menu",{key:"181445f2ee43b78ce041225f2394618c8eacf5d1",direction:a.VERTICAL,label:this.messages.menuLabel,ref:t=>{null!==t&&(this.itemMoreContainer=t)}})))}get element(){return this}static get watchers(){return{icon:[{validateIcon:0}],slotlabel:[{validateSlotLabel: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:not([hidden]){display:flex}"}},[1,"mg-item-more",{icon:[16],slotlabel:[16],parentMenu:[32]},void 0,{icon:[{validateIcon:0}],slotlabel:[{validateSlotLabel:0}]}]);function E(){"undefined"!=typeof customElements&&["mg-item-more","mg-badge","mg-button","mg-card","mg-icon","mg-item-more","mg-menu","mg-menu-item","mg-popover","mg-popover-content"].forEach((e=>{switch(e){case"mg-item-more":customElements.get(t(e))||customElements.define(t(e),v);break;case"mg-badge":customElements.get(t(e))||c();break;case"mg-button":customElements.get(t(e))||l();break;case"mg-card":customElements.get(t(e))||h();break;case"mg-icon":customElements.get(t(e))||d();break;case"mg-item-more":customElements.get(t(e))||E();break;case"mg-menu":customElements.get(t(e))||f();break;case"mg-menu-item":customElements.get(t(e))||r();break;case"mg-popover":customElements.get(t(e))||u();break;case"mg-popover-content":customElements.get(t(e))||p()}}))}E();export{v as M,b as a,f as b,E as d}

package/dist/components/mg-loader.js

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

package/dist/components/mg-loader2.js

@@ -1,74 +1 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { i as initLocales } from './index3.js';
-import { i as isValidString, t as toString } from './index2.js';
-import { d as defineCustomElement$1 } from './mg-icon2.js';
-
-const mgLoaderCss = ".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{display:block}.mg-c-loader{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--mg-b-size-4);text-align:center}";
-
-const MgLoader = /*@__PURE__*/ proxyCustomElement(class MgLoader extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        /**
-         * Hide message
-         */
-        this.messageHide = false;
-    }
-    watchMessage(newValue) {
-        if (newValue && !isValidString(newValue))
-            throw new Error(`<mg-loader> prop "message" must be a valid string. Passed value: ${toString(newValue)}.`);
-    }
-    /*************
-     * Lifecycle *
-     *************/
-    /**
-     * Check if component props are well configured on init
-     */
-    componentWillLoad() {
-        // Get locales
-        this.messages = initLocales(this.element).messages;
-        // validate props
-        this.watchMessage(this.message);
-    }
-    /**
-     * Render
-     * @returns HTML Element
-     */
-    render() {
-        return (h("div", { key: '739b4cbacd8a8da056dbb1445c40fac2cf26766a', class: "mg-c-loader", "aria-live": "polite" }, h("mg-icon", { key: '95d3cbf26fcd6dbf0dad4853bf55aa66385f1aba', icon: "loader", spin: true }), h("span", { key: 'f6322cd3054d8976bd2ec24f86a2d6bb60ca7ae1', class: { 'mg-u-visually-hidden': this.messageHide } }, this.message || this.messages.loader.inProgress)));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "message": ["watchMessage"]
-    }; }
-    static get style() { return mgLoaderCss; }
-}, [257, "mg-loader", {
-        "message": [1],
-        "messageHide": [4, "message-hide"]
-    }, undefined, {
-        "message": ["watchMessage"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mg-loader", "mg-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mg-loader":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MgLoader);
-            }
-            break;
-        case "mg-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-defineCustomElement();
-
-export { MgLoader as M, defineCustomElement as d };
+import{transformTag as e,proxyCustomElement as t,HTMLElement as i,h as s}from"@stencil/core/internal/client";import{i as a}from"./index3.js";import{i as r,t as n}from"./index2.js";import{d as o}from"./mg-icon2.js";const m=t(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.messageHide=!1}watchMessage(e){if(e&&!r(e))throw new Error(`<mg-loader> prop "message" must be a valid string. Passed value: ${n(e)}.`)}componentWillLoad(){this.messages=a(this.element).messages,this.watchMessage(this.message)}render(){return s("div",{key:"da82988810c1e2916a2464299844cad674cd1f12",class:"mg-c-loader","aria-live":"polite"},s("mg-icon",{key:"45588ae8dd55ca582a4872d4c1e731bb00681c28",icon:"loader",spin:!0}),s("span",{key:"3bc07f4bbf8995de61c019942c33c8076793096a",class:{"mg-u-visually-hidden":this.messageHide}},this.message||this.messages.loader.inProgress))}get element(){return this}static get watchers(){return{message:[{watchMessage: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{display:block}.mg-c-loader{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--mg-b-size-4);text-align:center}"}},[1,"mg-loader",{message:[1],messageHide:[4,"message-hide"]},void 0,{message:[{watchMessage:0}]}]);function c(){"undefined"!=typeof customElements&&["mg-loader","mg-icon"].forEach((t=>{switch(t){case"mg-loader":customElements.get(e(t))||customElements.define(e(t),m);break;case"mg-icon":customElements.get(e(t))||o()}}))}c();export{m as M,c as d}

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

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