@mgdis/mg-components 5.27.0 → 5.27.2

package/dist/cjs/mg-item-more.cjs.entry.js

@@ -1,273 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-7072369e.js');
-const index$1 = require('./index-1d560837.js');
-const mgMenu_conf = require('./mg-menu.conf-c291eee6.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 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 = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        /************
-         * 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) => {
-                // 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 (index$1.Be(proxy.id))
-                    proxy.id = `${proxy.id}-proxy`;
-                // manage status change miror in proxy
-                allMenuItem[index].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 = index$1.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 (index.h(index.Host, { key: 'd19aa0bb690ee7ed301954913d3e056d1050dc04', role: "listitem" }, this.parentMenu && (index.h("mg-menu-item", { "data-overflow-more": true, "data-size": this.parentMenu.size, ref: el => {
-                if (el)
-                    this.moreElementMenuItem = el;
-            } }, index.h("mg-icon", { icon: this.icon.icon, slot: "image" }), index.h("span", { class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), index.h("mg-menu", { direction: mgMenu_conf.Direction.VERTICAL, label: this.messages.menuLabel, size: this.size })))));
-    }
-    get element() { return index.getElement(this); }
-    static get watchers() { return {
-        "icon": ["validateIcon"],
-        "slotlabel": ["validateSlotLabel"],
-        "size": ["validateSize"]
-    }; }
-};
-MgItemMore.style = MgItemMoreStyle0;
-
-exports.mg_item_more = MgItemMore;
-
-//# sourceMappingURL=mg-item-more.cjs.entry.js.map

package/dist/cjs/mg-item-more.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"mg-item-more.entry.cjs.js","mappings":"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","names":["isValidString","initLocales","h","Host","Direction"],"sources":["src/utils/behaviors.utils.ts","../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: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      // 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      // manage status change miror in proxy\n      allMenuItem[index].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}

package/dist/cjs/mg-menu.conf-c291eee6.js

@@ -1,18 +0,0 @@
-'use strict';
-
-/**
- * Menu direction type
- */
-exports.Direction = void 0;
-(function (Direction) {
-    Direction["VERTICAL"] = "vertical";
-    Direction["HORIZONTAL"] = "horizontal";
-})(exports.Direction || (exports.Direction = {}));
-/**
- * List of all possibles sizes
- */
-const sizes = ['regular', 'medium', 'large'];
-
-exports.sizes = sizes;
-
-//# sourceMappingURL=mg-menu.conf-c291eee6.js.map

package/dist/cjs/mg-menu.conf-c291eee6.js.map

@@ -1 +0,0 @@
-{"file":"mg-menu.conf-c291eee6.js","mappings":";;AAEA;;;AAGYA;AAAZ,WAAY,SAAS;IACnB,kCAAqB,CAAA;IACrB,sCAAyB,CAAA;AAC3B,CAAC,EAHWA,iBAAS,KAATA,iBAAS,QAGpB;AAOD;;;MAGa,KAAK,GAAG,CAAC,SAAS,EAAE,QAAQ,EAAE,OAAO;;;;","names":["Direction"],"sources":["src/components/molecules/menu/mg-menu/mg-menu.conf.ts"],"sourcesContent":["import { MgItemMore } from '../../mg-item-more/mg-item-more';\n\n/**\n * Menu direction type\n */\nexport enum Direction {\n  VERTICAL = 'vertical',\n  HORIZONTAL = 'horizontal',\n}\n\n/**\n * ItemMore prop type\n */\nexport type ItemMoreType = Pick<MgItemMore, 'icon' | 'slotlabel' | 'size'>;\n\n/**\n * List of all possibles sizes\n */\nexport const sizes = ['regular', 'medium', 'large'] as const;\n\n/**\n * item Size from sizes\n */\nexport type MenuSizeType = (typeof sizes)[number];\n"],"version":3}

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

@@ -1,16 +0,0 @@
-/**
- * Menu direction type
- */
-var Direction;
-(function (Direction) {
-    Direction["VERTICAL"] = "vertical";
-    Direction["HORIZONTAL"] = "horizontal";
-})(Direction || (Direction = {}));
-/**
- * List of all possibles sizes
- */
-const sizes = ['regular', 'medium', 'large'];
-
-export { Direction as D, sizes as s };
-
-//# sourceMappingURL=mg-menu.conf.js.map

package/dist/components/mg-menu.conf.js.map

@@ -1 +0,0 @@
-{"file":"mg-menu.conf.js","mappings":"AAEA;;;IAGY;AAAZ,WAAY,SAAS;IACnB,kCAAqB,CAAA;IACrB,sCAAyB,CAAA;AAC3B,CAAC,EAHW,SAAS,KAAT,SAAS,QAGpB;AAOD;;;MAGa,KAAK,GAAG,CAAC,SAAS,EAAE,QAAQ,EAAE,OAAO;;;;","names":[],"sources":["src/components/molecules/menu/mg-menu/mg-menu.conf.ts"],"sourcesContent":["import { MgItemMore } from '../../mg-item-more/mg-item-more';\n\n/**\n * Menu direction type\n */\nexport enum Direction {\n  VERTICAL = 'vertical',\n  HORIZONTAL = 'horizontal',\n}\n\n/**\n * ItemMore prop type\n */\nexport type ItemMoreType = Pick<MgItemMore, 'icon' | 'slotlabel' | 'size'>;\n\n/**\n * List of all possibles sizes\n */\nexport const sizes = ['regular', 'medium', 'large'] as const;\n\n/**\n * item Size from sizes\n */\nexport type MenuSizeType = (typeof sizes)[number];\n"],"version":3}

package/dist/components/mg-menu2.js

@@ -1,202 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { D as Direction, s as sizes } from './mg-menu.conf.js';
-
-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') || item.shadowRoot.querySelector('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 = () => {
-            // /!\ 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.
-            const item = 'mg-item-more';
-            const mgItemMore = document.createElement(item);
-            Object.assign(mgItemMore, this.itemmore);
-            mgItemMore.addEventListener('item-loaded', this.handleItemLoaded);
-            this.element.appendChild(mgItemMore);
-        };
-        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
-            if (this.direction === Direction.HORIZONTAL && !this.isChildMenu)
-                this.renderMgItemMore();
-            // use mutation observer to improve reactivity
-            new MutationObserver(entries => {
-                const mgItemMore = this.getItemMore();
-                // prevent infinit loop by exclude mg-item-more deletion entry
-                if (entries.some(entry => entry.type === 'childList' && Array.from(entry.removedNodes).some(node => node.nodeName === 'MG-ITEM-MORE')))
-                    return;
-                else if (mgItemMore !== null) {
-                    // render a new mg-item-more
-                    mgItemMore.remove();
-                    mgItemMore.removeEventListener('item-loaded', this.handleItemLoaded);
-                    this.renderMgItemMore();
-                }
-            }).observe(this.element, { childList: true, characterData: true, subtree: true });
-        }, 0);
-    }
-    /**
-     * Add listeners to items
-     */
-    componentDidRender() {
-        this.initMenuItemsListeners();
-    }
-    /**
-     * Render
-     * @returns HTML Element
-     */
-    render() {
-        return (h(Host, { key: '086439eeee2cbd3ee887bf047f04271de3e909b1', role: "list", "aria-label": this.label }, h("slot", { key: '332f520ff53aa203bfa299afce5251aa108e7e55' })));
-    }
-    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() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mg-menu"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mg-menu":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MgMenu);
-            }
-            break;
-    } });
-}
-defineCustomElement();
-
-export { MgMenu as M, defineCustomElement as d };
-
-//# sourceMappingURL=mg-menu2.js.map

package/dist/components/mg-menu2.js.map

@@ -1 +0,0 @@
-{"file":"mg-menu2.js","mappings":"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","names":[],"sources":["../styles/dist/components/mg-menu.css?tag=mg-menu&encapsulation=shadow","src/components/molecules/menu/mg-menu/mg-menu.tsx"],"sourcesContent":[".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@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') || item.shadowRoot.querySelector('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    // /!\\ 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    const item = 'mg-item-more';\n    const mgItemMore = document.createElement(item);\n    Object.assign(mgItemMore, this.itemmore);\n    mgItemMore.addEventListener('item-loaded', this.handleItemLoaded);\n    this.element.appendChild(mgItemMore);\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      if (this.direction === Direction.HORIZONTAL && !this.isChildMenu) this.renderMgItemMore();\n\n      // use mutation observer to improve reactivity\n      new MutationObserver(entries => {\n        const mgItemMore = this.getItemMore();\n        // prevent infinit loop by exclude mg-item-more deletion entry\n        if (entries.some(entry => entry.type === 'childList' && Array.from(entry.removedNodes).some(node => node.nodeName === 'MG-ITEM-MORE'))) return;\n        else if (mgItemMore !== null) {\n          // render a new mg-item-more\n          mgItemMore.remove();\n          mgItemMore.removeEventListener('item-loaded', this.handleItemLoaded);\n          this.renderMgItemMore();\n        }\n      }).observe(this.element, { childList: true, characterData: true, subtree: true });\n    }, 0);\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"],"version":3}