@mgdis/mg-components 5.27.0 → 5.27.2

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

@@ -0,0 +1,592 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { N as Ne } from './index.es.js';
+import { d as defineCustomElement$4, D as Direction, s as sizes } from './mg-menu-item2.js';
+import { i as initLocales } from './index2.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';
+
+/**
+ * MgItemMore type guard
+ * @param element - element to control type
+ * @returns truthy if element is mg-item-more
+ */
+const isMgItemMore = (element) => element.nodeName === 'MG-ITEM-MORE';
+var OverflowBehaviorElements;
+(function (OverflowBehaviorElements) {
+    OverflowBehaviorElements["BASE_INDEX"] = "data-overflow-base-index";
+    OverflowBehaviorElements["PROXY_INDEX"] = "data-overflow-proxy-index";
+})(OverflowBehaviorElements || (OverflowBehaviorElements = {}));
+class OverflowBehavior {
+    constructor(element, render) {
+        this.element = element;
+        this.render = render;
+        /**********
+         * Public *
+         **********/
+        /**
+         * Disconnect ResizeObserver
+         */
+        this.disconnect = () => {
+            this._resizeObserver.disconnect();
+        };
+        /************
+         * Internal *
+         ************/
+        /**
+         * run overflow behavior
+         * @param width - width of the container. Optional.
+         */
+        this.run = (width) => {
+            if (this._moreElement === undefined) {
+                // set moreElement
+                this._moreElement = this.render();
+                // set children
+                this._baseChildren = this.getInteractiveItems(this.element);
+                if (isMgItemMore(this._moreElement)) {
+                    this._proxyChildren = this.getInteractiveItems(this._moreElement.shadowRoot.querySelector('mg-menu'));
+                }
+                // update children
+                this._baseChildren.forEach((child, index) => {
+                    child.setAttribute(OverflowBehaviorElements.BASE_INDEX, `${index}`);
+                    // set moreElement children
+                    this._proxyChildren[index].setAttribute(OverflowBehaviorElements.PROXY_INDEX, `${index}`);
+                });
+            }
+            if (width !== undefined)
+                this.updateDisplayedItems(width);
+        };
+        /**
+         * Get interactive children filtred by authorized nodeName ['MG-MENU-ITEM', 'MG-BUTTON']
+         * @param element - element to parse
+         * @returns children
+         */
+        this.getInteractiveItems = (element) => { var _a; return (((_a = element.children) === null || _a === void 0 ? void 0 : _a.length) > 0 ? Array.from(element.children) : []).filter(element => ['MG-MENU-ITEM', 'MG-BUTTON'].includes(element.nodeName)); };
+        /**
+         * Update displayed items in container from a given available space
+         * @param availableWidth - available width in container to display child items
+         */
+        this.updateDisplayedItems = (availableWidth) => {
+            this.restoreItems();
+            const acc = { accWidth: 0, previousItem: null };
+            [...this._baseChildren, this._moreElement].forEach((child) => {
+                acc.accWidth += child.offsetWidth;
+                const hasPreviuosItem = acc.previousItem !== null;
+                const isPreviousItemHidden = hasPreviuosItem && acc.previousItem.getAttribute('hidden') !== null;
+                // if previous item is hidden AND is NOT more element we hidde current
+                // OR if item has an overflow we hidde current
+                // OR if current item is more element AND have NOT previous hidden items, current more element item is an hidden item
+                // ELSE current is a display item
+                this.toggleItem(child, (isPreviousItemHidden && !this.isMoreElement(child)) || this.isOverflowElement(acc.accWidth, child, availableWidth) || (this.isMoreElement(child) && !isPreviousItemHidden));
+                // update previous item with current item
+                acc.previousItem = child;
+            });
+        };
+        /**
+         * 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
+         * @param availableWidth - container available width
+         * @returns truthy if element is overflow
+         */
+        this.isOverflowElement = (cumulateWidth, item, availableWidth) => {
+            if (item.previousElementSibling === null || this.isMoreElement(item))
+                return false;
+            else if (!this.isMoreElement(item.nextElementSibling))
+                return cumulateWidth + this._moreElement.offsetWidth > availableWidth;
+            else
+                return cumulateWidth > availableWidth;
+        };
+        /**
+         * Utility method to know if a given element is the 'MORE' element
+         * @param element - element to match with 'MORE' element
+         * @returns truthy if element is the 'MORE' element
+         */
+        this.isMoreElement = (element) => element.nodeName === 'MG-ITEM-MORE';
+        /**
+         * Toggle display item element
+         * @param item - item to control
+         * @param isHidden - is item hidden
+         */
+        this.toggleItem = (item, isHidden) => {
+            const mgActionMenuindex = Number(item.getAttribute(OverflowBehaviorElements.BASE_INDEX));
+            if (this.isMoreElement(item))
+                this.toggleElement(this._moreElement, isHidden);
+            else if (mgActionMenuindex >= 0) {
+                this.toggleElement(item, isHidden);
+                this.toggleElement(this._proxyChildren[mgActionMenuindex], !isHidden);
+            }
+        };
+        /**
+         * Toggle element's hidde attribute
+         * @param element - element to toggle
+         * @param isHidden - element is hidden
+         */
+        this.toggleElement = (element, isHidden) => {
+            if (isHidden)
+                element.setAttribute('hidden', '');
+            else
+                element.removeAttribute('hidden');
+        };
+        /**
+         * Remove hidden attributes on all items
+         */
+        this.restoreItems = () => {
+            [...this._baseChildren, this._moreElement].forEach(item => item.removeAttribute('hidden'));
+        };
+        if (this._resizeObserver === undefined) {
+            // add resize observer
+            this._resizeObserver = new ResizeObserver(entries => {
+                entries.forEach(entry => {
+                    this.run(entry.contentRect.width);
+                });
+            });
+            this._resizeObserver.observe(this.element);
+        }
+        this.run();
+    }
+}
+
+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}}:host{display:flex;background-color:hsl(var(--mg-menu-background-color-hsl, var(--color-light)))}:host([direction=vertical]){height:100%;flex-direction:column;overflow-y:auto}";
+const MgMenuStyle0 = mgMenuCss;
+
+const MgMenu = /*@__PURE__*/ proxyCustomElement(class MgMenu extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /************
+         * Internal *
+         ************/
+        this.name = 'mg-menu';
+        this.menuItems = [];
+        this.focusedMenuItem = 0;
+        /*************
+         * Methods *
+         *************/
+        /**
+         * Close matching menu-item
+         * @param item - menu-item to close
+         * @param condition - addionnal condition
+         */
+        this.closeMenuItem = (item, condition) => {
+            if (!this.isChildMenu && condition) {
+                item.expanded = false;
+            }
+        };
+        /**
+         * get mg-item-more element
+         * @returns mg-item-more element
+         */
+        this.getItemMore = () => this.element.querySelector('mg-item-more');
+        /**
+         * get mg-item-more child mg-menu-item element
+         * @returns mg-menu-item element
+         */
+        this.getItemMoreMenuItem = () => { var _a, _b; return (_b = (_a = this.getItemMore()) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('mg-menu-item'); };
+        /**
+         * Set item listend
+         * @param item - mg-menu-item element
+         * @param index - number
+         */
+        this.setItemListener = (item, index) => {
+            ['click', 'focus'].forEach(trigger => {
+                item.shadowRoot.querySelector('button,a').addEventListener(trigger, () => {
+                    this.focusedMenuItem = index;
+                    // reset expanded on previous active menu item
+                    (this.getItemMoreMenuItem() ? [...this.menuItems, this.getItemMoreMenuItem()] : this.menuItems).forEach((item, index) => {
+                        this.closeMenuItem(item, index !== this.focusedMenuItem);
+                    });
+                });
+            });
+        };
+        /**
+         * Store menu-items on component init and add listeners
+         */
+        this.initMenuItemsListeners = () => {
+            // add listeners on menu item and edit index
+            this.menuItems.forEach((item, index) => {
+                this.setItemListener(item, index);
+            });
+        };
+        /**
+         * Handle item-loaded event on mg-item-more element
+         */
+        this.handleItemLoaded = () => {
+            this.setItemListener(this.getItemMoreMenuItem(), this.menuItems.length);
+        };
+        /**
+         * render mg-item-more
+         */
+        this.renderMgItemMore = () => {
+            if (this.direction !== Direction.HORIZONTAL || this.isChildMenu) {
+                return;
+            }
+            // /!\ externalise item tag name to get a string type and bypass type checking when value is used in next createElement
+            // by doing this we prevent stencil to generate a circular dependencies graph at build time with mg-item-more component.
+            let mgItemMore = this.getItemMore();
+            if (!mgItemMore) {
+                mgItemMore = document.createElement('mg-item-more');
+                mgItemMore.addEventListener('item-loaded', this.handleItemLoaded);
+                Object.assign(mgItemMore, this.itemmore || {});
+                this.element.appendChild(mgItemMore);
+            }
+            else {
+                Object.defineProperties(mgItemMore, this.itemmore || {});
+            }
+        };
+        this.label = undefined;
+        this.direction = Direction.HORIZONTAL;
+        this.itemmore = undefined;
+        this.size = 'regular';
+        this.isChildMenu = undefined;
+    }
+    validateLabel(newValue) {
+        if (newValue === undefined) {
+            throw new Error(`<${this.name}> prop "label" is required.`);
+        }
+    }
+    validateDirection(newValue) {
+        if (![Direction.VERTICAL, Direction.HORIZONTAL].includes(newValue)) {
+            throw new Error(`<${this.name}> prop "direction" must be one of: ${Direction.HORIZONTAL}, ${Direction.VERTICAL}.`);
+        }
+    }
+    validateItemMore(newValue) {
+        if (newValue !== undefined && this.direction !== Direction.HORIZONTAL) {
+            throw new Error(`<${this.name}> prop "itemmore" must be paired with direction ${Direction.HORIZONTAL}.`);
+        }
+    }
+    validateSize(newValue) {
+        if (!sizes.includes(newValue)) {
+            throw new Error(`<${this.name}> prop "size" must be one of: ${sizes.join(', ')}.`);
+        }
+    }
+    /*************
+     * 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
+     * @returns timeout
+     */
+    componentDidLoad() {
+        // 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(() => {
+            // store all menu-items
+            this.menuItems = Array.from(this.element.children).filter(child => child.nodeName === 'MG-MENU-ITEM');
+            this.isChildMenu = this.element.closest('mg-menu-item') !== null;
+            // add mg-item-more to manage OverflowBehavior
+            // when all props, states and DOM are already rendered we can render the mg-item-more
+            this.renderMgItemMore();
+            // then use mutation observer on children to improve reactivity
+            new MutationObserver(() => {
+                this.renderMgItemMore();
+            }).observe(this.element, { childList: true });
+        });
+    }
+    /**
+     * Add listeners to items
+     */
+    componentDidRender() {
+        this.initMenuItemsListeners();
+    }
+    /**
+     * Render
+     * @returns HTML Element
+     */
+    render() {
+        return (h(Host, { key: 'a5fe4a1a61b4255cc9a06217f30ef2f154fd797d', role: "list", "aria-label": this.label }, h("slot", { key: '37de5388d1cca3fa46dfbb73ab26ba6e299940b5' })));
+    }
+    get element() { return this; }
+    static get watchers() { return {
+        "label": ["validateLabel"],
+        "direction": ["validateDirection"],
+        "itemmore": ["validateItemMore"],
+        "size": ["validateSize"]
+    }; }
+    static get style() { return MgMenuStyle0; }
+}, [1, "mg-menu", {
+        "label": [1],
+        "direction": [513],
+        "itemmore": [16],
+        "size": [1],
+        "isChildMenu": [32]
+    }, undefined, {
+        "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 MgItemMoreStyle0 = mgItemMoreCss;
+
+const MgItemMore = /*@__PURE__*/ proxyCustomElement(class MgItemMore extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /************
+         * Internal *
+         ************/
+        this.name = 'mg-item-more';
+        this.canRenderMgMenuItemOverflowElement = true;
+        /***********
+         * Methods *
+         ***********/
+        /**
+         * render mg-item-more overflow element
+         * @returns mg-item-more element
+         */
+        this.renderMgMenuItemOverflowElement = () => {
+            // create menu items proxy element from item clones
+            this.parentMenuItems.forEach((child) => {
+                this.moreElementMenuItem.querySelector('mg-menu').appendChild(child.cloneNode(true));
+            });
+            const allMenuItem = Array.from(this.parentMenu.querySelectorAll('mg-menu-item:not([data-overflow-more])'));
+            Array.from(this.moreElementMenuItem.querySelectorAll('mg-menu-item:not([data-overflow-more])')).forEach((proxy, index) => {
+                const proxified = allMenuItem[index];
+                // manage click on proxy to mirror it on initial element
+                proxy.addEventListener('click', () => {
+                    // be carefull to use element.click() method instead of dispatchEvent to ensure bubbles outside shadowDom
+                    const navElement = allMenuItem[index].shadowRoot.querySelector('a, button');
+                    if (navElement instanceof HTMLButtonElement || navElement instanceof HTMLAnchorElement)
+                        navElement.click();
+                });
+                // add id suffix to prevent duplicate key. default html id is: '';
+                if (Ne(proxy.id))
+                    proxy.id = `${proxy.id}-proxy`;
+                // update properties and DOM when proxyfied item is updated
+                proxified.addEventListener('item-updated', (event) => {
+                    Object.assign(proxy, event.target);
+                    proxy.innerHTML = event.target.innerHTML;
+                });
+                // manage status change miror in proxyfied element
+                proxified.addEventListener('status-change', (event) => {
+                    proxy.setAttribute('status', event.detail);
+                });
+            });
+            return this.element;
+        };
+        this.icon = { icon: 'ellipsis-vertical' };
+        this.slotlabel = { display: false };
+        this.size = undefined;
+        this.parentMenu = undefined;
+    }
+    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.`);
+    }
+    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.`);
+        else if (typeof newValue.label !== 'string')
+            this.slotlabel.label = this.messages.menuLabel;
+    }
+    validateSize(newValue) {
+        if (newValue && typeof newValue !== 'string')
+            throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type.`);
+    }
+    /*************
+     * 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.canRenderMgMenuItemOverflowElement) {
+            this.parentMenuItems = Array.from(this.parentMenu.children).filter(item => item.nodeName === 'MG-MENU-ITEM');
+            this.overflowBehavior = new OverflowBehavior(this.parentMenu, this.renderMgMenuItemOverflowElement);
+            this.canRenderMgMenuItemOverflowElement = false;
+        }
+    }
+    /**
+     * Disconnect overflow ResizeObserver
+     */
+    disconnectedCallback() {
+        var _a;
+        (_a = this.overflowBehavior) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    /**
+     * Render
+     * @returns HTML Element
+     */
+    render() {
+        return (h(Host, { key: '18e3ecec55a7078662bdb04ba6325a4d44ff1c78', role: "listitem" }, this.parentMenu && (h("mg-menu-item", { key: 'e04f4b62b1ce70eeae25f959ef6aeca2e4a2690d', "data-overflow-more": true, "data-size": this.parentMenu.size, ref: el => {
+                if (el)
+                    this.moreElementMenuItem = el;
+            } }, h("mg-icon", { key: '8f20ef688479578ebee9eabb63644837e1d45113', icon: this.icon.icon, slot: "image" }), h("span", { key: '7a4f08410d1e85682a8c3e1935525c418a4141de', class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), h("mg-menu", { key: 'f67f53d289cf65883a3534f17fb2baaa91314a66', direction: Direction.VERTICAL, label: this.messages.menuLabel, size: this.size })))));
+    }
+    get element() { return this; }
+    static get watchers() { return {
+        "icon": ["validateIcon"],
+        "slotlabel": ["validateSlotLabel"],
+        "size": ["validateSize"]
+    }; }
+    static get style() { return MgItemMoreStyle0; }
+}, [1, "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, defineCustomElement as a, MgMenu as b, defineCustomElement$1 as d };
+
+//# sourceMappingURL=mg-item-more2.js.map

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

@@ -0,0 +1 @@
+{"file":"mg-item-more2.js","mappings":"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","names":["isValidString"],"sources":["src/utils/behaviors.utils.ts","../styles/dist/components/mg-menu.css?tag=mg-menu&encapsulation=shadow","src/components/molecules/menu/mg-menu/mg-menu.tsx","../styles/dist/components/mg-item-more.css?tag=mg-item-more&encapsulation=shadow","src/components/molecules/mg-item-more/mg-item-more.tsx"],"sourcesContent":["/**\n * MgItemMore type guard\n * @param element - element to control type\n * @returns truthy if element is mg-item-more\n */\nconst isMgItemMore = (element: HTMLElement): element is HTMLMgItemMoreElement => element.nodeName === 'MG-ITEM-MORE';\n\nexport enum OverflowBehaviorElements {\n  BASE_INDEX = 'data-overflow-base-index',\n  PROXY_INDEX = 'data-overflow-proxy-index',\n}\n\nexport class OverflowBehavior {\n  // variables\n  private _resizeObserver: ResizeObserver;\n  private _moreElement: HTMLElement;\n  private _baseChildren: Element[];\n  private _proxyChildren: Element[];\n\n  constructor(\n    private element: Element,\n    private render: () => HTMLElement,\n  ) {\n    if (this._resizeObserver === undefined) {\n      // add resize observer\n      this._resizeObserver = new ResizeObserver(entries => {\n        entries.forEach(entry => {\n          this.run(entry.contentRect.width);\n        });\n      });\n      this._resizeObserver.observe(this.element);\n    }\n    this.run();\n  }\n\n  /**********\n   * Public *\n   **********/\n\n  /**\n   * Disconnect ResizeObserver\n   */\n  public disconnect = (): void => {\n    this._resizeObserver.disconnect();\n  };\n\n  /************\n   * Internal *\n   ************/\n\n  /**\n   * run overflow behavior\n   * @param width - width of the container. Optional.\n   */\n  private run = (width?: number): void => {\n    if (this._moreElement === undefined) {\n      // set moreElement\n      this._moreElement = this.render();\n\n      // set children\n      this._baseChildren = this.getInteractiveItems(this.element);\n      if (isMgItemMore(this._moreElement)) {\n        this._proxyChildren = this.getInteractiveItems(this._moreElement.shadowRoot.querySelector('mg-menu'));\n      }\n\n      // update children\n      this._baseChildren.forEach((child, index) => {\n        child.setAttribute(OverflowBehaviorElements.BASE_INDEX, `${index}`);\n        // set moreElement children\n        this._proxyChildren[index].setAttribute(OverflowBehaviorElements.PROXY_INDEX, `${index}`);\n      });\n    }\n\n    if (width !== undefined) this.updateDisplayedItems(width);\n  };\n\n  /**\n   * Get interactive children filtred by authorized nodeName ['MG-MENU-ITEM', 'MG-BUTTON']\n   * @param element - element to parse\n   * @returns children\n   */\n  private getInteractiveItems = (element: Element) =>\n    (element.children?.length > 0 ? Array.from(element.children) : []).filter(element => ['MG-MENU-ITEM', 'MG-BUTTON'].includes(element.nodeName));\n\n  /**\n   * Update displayed items in container from a given available space\n   * @param availableWidth - available width in container to display child items\n   */\n  private updateDisplayedItems = (availableWidth: number): void => {\n    this.restoreItems();\n    const acc = { accWidth: 0, previousItem: null };\n    [...this._baseChildren, this._moreElement].forEach((child: HTMLMgMenuItemElement | HTMLMgItemMoreElement) => {\n      acc.accWidth += child.offsetWidth;\n      const hasPreviuosItem = acc.previousItem !== null;\n      const isPreviousItemHidden = hasPreviuosItem && acc.previousItem.getAttribute('hidden') !== null;\n      // if previous item is hidden AND is NOT more element we hidde current\n      // OR if item has an overflow we hidde current\n      // OR if current item is more element AND have NOT previous hidden items, current more element item is an hidden item\n      // ELSE current is a display item\n      this.toggleItem(\n        child,\n        (isPreviousItemHidden && !this.isMoreElement(child)) || this.isOverflowElement(acc.accWidth, child, availableWidth) || (this.isMoreElement(child) && !isPreviousItemHidden),\n      );\n\n      // update previous item with current item\n      acc.previousItem = child;\n    });\n  };\n\n  /**\n   * Utility method to know if item overflow partialy or totaly in the container\n   * @param cumulateWidth - previous sibling elements cumulate width + item width\n   * @param item - item HTML element\n   * @param availableWidth - container available width\n   * @returns truthy if element is overflow\n   */\n  private isOverflowElement = (cumulateWidth: number, item: HTMLElement, availableWidth: number): boolean => {\n    if (item.previousElementSibling === null || this.isMoreElement(item)) return false;\n    else if (!this.isMoreElement(item.nextElementSibling)) return cumulateWidth + this._moreElement.offsetWidth > availableWidth;\n    else return cumulateWidth > availableWidth;\n  };\n\n  /**\n   * Utility method to know if a given element is the 'MORE' element\n   * @param element - element to match with 'MORE' element\n   * @returns truthy if element is the 'MORE' element\n   */\n  private isMoreElement = (element: Element): boolean => element.nodeName === 'MG-ITEM-MORE';\n\n  /**\n   * Toggle display item element\n   * @param item - item to control\n   * @param isHidden - is item hidden\n   */\n  private toggleItem = (item: HTMLElement, isHidden: boolean): void => {\n    const mgActionMenuindex = Number(item.getAttribute(OverflowBehaviorElements.BASE_INDEX));\n    if (this.isMoreElement(item)) this.toggleElement(this._moreElement, isHidden);\n    else if (mgActionMenuindex >= 0) {\n      this.toggleElement(item, isHidden);\n      this.toggleElement(this._proxyChildren[mgActionMenuindex], !isHidden);\n    }\n  };\n\n  /**\n   * Toggle element's hidde attribute\n   * @param element - element to toggle\n   * @param isHidden - element is hidden\n   */\n  private toggleElement = (element: Element, isHidden: boolean): void => {\n    if (isHidden) element.setAttribute('hidden', '');\n    else element.removeAttribute('hidden');\n  };\n\n  /**\n   * Remove hidden attributes on all items\n   */\n  private restoreItems = (): void => {\n    [...this._baseChildren, this._moreElement].forEach(item => item.removeAttribute('hidden'));\n  };\n}\n",".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:flex;background-color:hsl(var(--mg-menu-background-color-hsl, var(--color-light)))}:host([direction=vertical]){height:100%;flex-direction:column;overflow-y:auto}/*# sourceMappingURL=mg-menu.css.map */\n","import { Component, h, Prop, State, Element, Watch, Host } from '@stencil/core';\nimport { Direction, sizes } from './mg-menu.conf';\nimport type { MenuSizeType, ItemMoreType } from './mg-menu.conf';\n\n/**\n * @slot - Menu content\n */\n@Component({\n  tag: 'mg-menu',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-menu.css',\n  shadow: true,\n})\nexport class MgMenu {\n  /************\n   * Internal *\n   ************/\n\n  private readonly name = 'mg-menu';\n  private menuItems: HTMLMgMenuItemElement[] = [];\n  private focusedMenuItem = 0;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgMenuElement;\n\n  /**\n   * Menu label. Include short menu description.\n   * Required for accessibility\n   */\n  @Prop() label!: string;\n  @Watch('label')\n  validateLabel(newValue: MgMenu['label']): void {\n    if (newValue === undefined) {\n      throw new Error(`<${this.name}> prop \"label\" is required.`);\n    }\n  }\n\n  /**\n   * Component display direction.\n   */\n  @Prop({ reflect: true }) direction: Direction = Direction.HORIZONTAL;\n  @Watch('direction')\n  validateDirection(newValue: MgMenu['direction']): void {\n    if (![Direction.VERTICAL, Direction.HORIZONTAL].includes(newValue)) {\n      throw new Error(`<${this.name}> prop \"direction\" must be one of: ${Direction.HORIZONTAL}, ${Direction.VERTICAL}.`);\n    }\n  }\n\n  /**\n   * Customize \"mg-item-more\" element\n   * Used with direction: 'vertical' to manage overflow\n   */\n  @Prop() itemmore?: ItemMoreType;\n  @Watch('itemmore')\n  validateItemMore(newValue: MgMenu['itemmore']): void {\n    if (newValue !== undefined && this.direction !== Direction.HORIZONTAL) {\n      throw new Error(`<${this.name}> prop \"itemmore\" must be paired with direction ${Direction.HORIZONTAL}.`);\n    }\n  }\n\n  /**\n   * Define mg-menu size\n   */\n  @Prop() size: MenuSizeType = 'regular';\n  @Watch('size')\n  validateSize(newValue: MgMenu['size']): void {\n    if (!sizes.includes(newValue)) {\n      throw new Error(`<${this.name}> prop \"size\" must be one of: ${sizes.join(', ')}.`);\n    }\n  }\n\n  /**\n   * is this menu a child menu. Used for conditional render.\n   */\n  @State() isChildMenu: boolean;\n\n  /*************\n   * Methods *\n   *************/\n\n  /**\n   * Close matching menu-item\n   * @param item - menu-item to close\n   * @param condition - addionnal condition\n   */\n  private closeMenuItem = (item: HTMLMgMenuItemElement, condition: boolean): void => {\n    if (!this.isChildMenu && condition) {\n      item.expanded = false;\n    }\n  };\n\n  /**\n   * get mg-item-more element\n   * @returns mg-item-more element\n   */\n  private getItemMore = (): HTMLMgItemMoreElement => this.element.querySelector('mg-item-more');\n\n  /**\n   * get mg-item-more child mg-menu-item element\n   * @returns mg-menu-item element\n   */\n  private getItemMoreMenuItem = (): HTMLMgMenuItemElement => this.getItemMore()?.shadowRoot?.querySelector('mg-menu-item');\n\n  /**\n   * Set item listend\n   * @param item - mg-menu-item element\n   * @param index - number\n   */\n  private setItemListener = (item: HTMLMgMenuItemElement, index: MgMenu['focusedMenuItem']): void => {\n    ['click', 'focus'].forEach(trigger => {\n      item.shadowRoot.querySelector('button,a').addEventListener(trigger, () => {\n        this.focusedMenuItem = index;\n        // reset expanded on previous active menu item\n        (this.getItemMoreMenuItem() ? [...this.menuItems, this.getItemMoreMenuItem()] : this.menuItems).forEach((item, index) => {\n          this.closeMenuItem(item, index !== this.focusedMenuItem);\n        });\n      });\n    });\n  };\n\n  /**\n   * Store menu-items on component init and add listeners\n   */\n  private initMenuItemsListeners = (): void => {\n    // add listeners on menu item and edit index\n    this.menuItems.forEach((item, index) => {\n      this.setItemListener(item, index);\n    });\n  };\n\n  /**\n   * Handle item-loaded event on mg-item-more element\n   */\n  private handleItemLoaded = (): void => {\n    this.setItemListener(this.getItemMoreMenuItem(), this.menuItems.length);\n  };\n\n  /**\n   * render mg-item-more\n   */\n  private renderMgItemMore = (): void => {\n    if (this.direction !== Direction.HORIZONTAL || this.isChildMenu) {\n      return;\n    }\n\n    // /!\\ externalise item tag name to get a string type and bypass type checking when value is used in next createElement\n    // by doing this we prevent stencil to generate a circular dependencies graph at build time with mg-item-more component.\n    let mgItemMore = this.getItemMore();\n    if (!mgItemMore) {\n      mgItemMore = document.createElement('mg-item-more');\n      mgItemMore.addEventListener('item-loaded', this.handleItemLoaded);\n      Object.assign(mgItemMore, this.itemmore || {});\n      this.element.appendChild(mgItemMore);\n    } else {\n      Object.defineProperties(mgItemMore, this.itemmore || {});\n    }\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Validate props\n   */\n  componentWillLoad(): void {\n    this.validateDirection(this.direction);\n    this.validateLabel(this.label);\n    this.validateItemMore(this.itemmore);\n    this.validateSize(this.size);\n  }\n\n  /**\n   * Check if component slots configuration\n   * @returns timeout\n   */\n  componentDidLoad(): ReturnType<typeof setTimeout> {\n    // update props and states after componentDidLoad hook\n    // return a promise to process action only in the FIRST render().\n    // https://stenciljs.com/docs/component-lifecycle#componentwillload\n    return setTimeout(() => {\n      // store all menu-items\n      this.menuItems = Array.from(this.element.children).filter(child => child.nodeName === 'MG-MENU-ITEM') as HTMLMgMenuItemElement[];\n      this.isChildMenu = this.element.closest('mg-menu-item') !== null;\n\n      // add mg-item-more to manage OverflowBehavior\n      // when all props, states and DOM are already rendered we can render the mg-item-more\n      this.renderMgItemMore();\n      // then use mutation observer on children to improve reactivity\n      new MutationObserver(() => {\n        this.renderMgItemMore();\n      }).observe(this.element, { childList: true });\n    });\n  }\n\n  /**\n   * Add listeners to items\n   */\n  componentDidRender(): void {\n    this.initMenuItemsListeners();\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <Host role=\"list\" aria-label={this.label}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n",".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}/*# sourceMappingURL=mg-item-more.css.map */\n","import { Component, h, Prop, Element, Host, Watch, State } from '@stencil/core';\nimport { isValidString } from '@mgdis/stencil-helpers';\nimport { Direction } from '../menu/mg-menu/mg-menu.conf';\nimport { OverflowBehavior } from '../../../utils/behaviors.utils';\nimport { initLocales } from '../../../locales';\nimport type { IconType, SizeType, SlotLabelType } from './mg-item-more.conf';\nimport type { MessageType } from '../../../locales/index.conf';\n\n@Component({\n  tag: 'mg-item-more',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-item-more.css',\n  shadow: true,\n})\nexport class MgItemMore {\n  /************\n   * Internal *\n   ************/\n  private readonly name = 'mg-item-more';\n  private messages: MessageType;\n  private parentMenuItems: HTMLMgMenuItemElement[];\n  private moreElementMenuItem: HTMLMgMenuItemElement;\n  private overflowBehavior: OverflowBehavior;\n  private canRenderMgMenuItemOverflowElement = true;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgItemMoreElement;\n\n  /**\n   * Define icon\n   */\n  @Prop() icon?: IconType = { icon: 'ellipsis-vertical' };\n  @Watch('icon')\n  validateIcon(newValue: MgItemMore['icon']): void {\n    if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.icon !== 'string'))\n      throw new Error(`<${this.name}> prop \"icon\" must match MgItemMore['icon'] type.`);\n  }\n\n  /**\n   * Define slot label element\n   */\n  @Prop() slotlabel?: SlotLabelType = { display: false };\n  @Watch('slotlabel')\n  validateSlotLabel(newValue: MgItemMore['slotlabel']): void {\n    if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.display !== 'boolean'))\n      throw new Error(`<${this.name}> prop \"slotlabel\" must match MgItemMore['slotlabel'] type.`);\n    else if (typeof newValue.label !== 'string') this.slotlabel.label = this.messages.menuLabel;\n  }\n\n  /**\n   * Define component child menu size.\n   */\n  @Prop() size?: SizeType;\n  @Watch('size')\n  validateSize(newValue: MgItemMore['size']): void {\n    if (newValue && typeof newValue !== 'string') throw new Error(`<${this.name}> prop \"size\" must match MgItemMore['size'] type.`);\n  }\n\n  /**\n   * Define component parent menu.\n   */\n  @State() parentMenu: HTMLMgMenuElement;\n\n  /***********\n   * Methods *\n   ***********/\n\n  /**\n   * render mg-item-more overflow element\n   * @returns mg-item-more element\n   */\n  private renderMgMenuItemOverflowElement = (): HTMLMgItemMoreElement => {\n    // create menu items proxy element from item clones\n    this.parentMenuItems.forEach((child: HTMLMgMenuItemElement) => {\n      this.moreElementMenuItem.querySelector('mg-menu').appendChild(child.cloneNode(true));\n    });\n\n    const allMenuItem = Array.from(this.parentMenu.querySelectorAll('mg-menu-item:not([data-overflow-more])'));\n\n    Array.from(this.moreElementMenuItem.querySelectorAll('mg-menu-item:not([data-overflow-more])')).forEach((proxy, index) => {\n      const proxified = allMenuItem[index];\n      // manage click on proxy to mirror it on initial element\n      proxy.addEventListener('click', () => {\n        // be carefull to use element.click() method instead of dispatchEvent to ensure bubbles outside shadowDom\n        const navElement = allMenuItem[index].shadowRoot.querySelector('a, button');\n        if (navElement instanceof HTMLButtonElement || navElement instanceof HTMLAnchorElement) navElement.click();\n      });\n\n      // add id suffix to prevent duplicate key. default html id is: '';\n      if (isValidString(proxy.id)) proxy.id = `${proxy.id}-proxy`;\n\n      // update properties and DOM when proxyfied item is updated\n      proxified.addEventListener('item-updated', (event: CustomEvent & { target: HTMLElement }) => {\n        Object.assign(proxy, event.target);\n        proxy.innerHTML = event.target.innerHTML;\n      });\n\n      // manage status change miror in proxyfied element\n      proxified.addEventListener('status-change', (event: CustomEvent) => {\n        proxy.setAttribute('status', event.detail);\n      });\n    });\n\n    return this.element;\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Set variables and validate props\n   */\n  componentWillLoad(): void {\n    // init variables\n    this.messages = initLocales(this.element).messages.itemMore as MessageType;\n\n    // validate props\n    this.validateIcon(this.icon);\n    this.validateSlotLabel(this.slotlabel);\n    this.validateSize(this.size);\n  }\n\n  /**\n   * Ensure parent DOM is fully rendered with timeout method before parse elements\n   * @returns timeout\n   */\n  componentDidLoad(): ReturnType<typeof setTimeout> {\n    // ensure parent menu is fully rendered\n    return setTimeout(() => {\n      this.parentMenu = this.element.closest('mg-menu');\n    });\n  }\n\n  /**\n   * Set OverflowBehavior when parentMenu state is upate AND defined\n   */\n  componentDidUpdate(): void {\n    if (this.parentMenu && this.canRenderMgMenuItemOverflowElement) {\n      this.parentMenuItems = Array.from(this.parentMenu.children).filter(item => item.nodeName === 'MG-MENU-ITEM') as HTMLMgMenuItemElement[];\n      this.overflowBehavior = new OverflowBehavior(this.parentMenu, this.renderMgMenuItemOverflowElement);\n      this.canRenderMgMenuItemOverflowElement = false;\n    }\n  }\n\n  /**\n   * Disconnect overflow ResizeObserver\n   */\n  disconnectedCallback(): void {\n    this.overflowBehavior?.disconnect();\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <Host role=\"listitem\">\n        {this.parentMenu && (\n          <mg-menu-item\n            data-overflow-more\n            data-size={this.parentMenu.size}\n            ref={el => {\n              if (el) this.moreElementMenuItem = el;\n            }}\n          >\n            <mg-icon icon={this.icon.icon} slot=\"image\"></mg-icon>\n            <span class={{ 'mg-u-visually-hidden': !this.slotlabel.display }} slot=\"label\">\n              {this.slotlabel.label}\n            </span>\n            <mg-menu direction={Direction.VERTICAL} label={this.messages.menuLabel} size={this.size}></mg-menu>\n          </mg-menu-item>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}