@mgdis/mg-components 5.19.2 → 5.20.0

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

@@ -19,305 +19,305 @@ import { d as defineCustomElement$2 } from './mg-popover-content2.js';
 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["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'));
+    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);
         }
-        // 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';
+        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 MgItemMore$1 = /*@__PURE__*/ proxyCustomElement(class MgItemMore extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /************
+         * Internal *
+         ************/
+        this.name = 'mg-item-more';
+        /***********
+         * Methods *
+         ***********/
+        /**
+         * render mg-item-more overflow element
+         * @returns mg-item-more element
+         */
+        this.renderMgMenuItemOverflowElement = () => {
+            // create menu items proxy element from item clones
+            const moreElementMenuItem = this.element.shadowRoot.querySelector('mg-menu-item');
+            this.menuItems.forEach((child) => {
+                moreElementMenuItem.querySelector('mg-menu').appendChild(child.cloneNode(true));
+            });
+            const allMenuItem = Array.from(this.parentMenu.querySelectorAll('mg-menu-item:not([data-overflow-more])'));
+            Array.from(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 (isValidString(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.moreLabel;
+    }
+    validateSize(newValue) {
+        if (newValue && typeof newValue !== 'string')
+            throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type.`);
+    }
+    /*************
+     * Lifecycle *
+     *************/
     /**
-     * Toggle display item element
-     * @param item - item to control
-     * @param isHidden - is item hidden
+     * Disconnect overflow ResizeObserver
      */
-    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);
-      }
-    };
+    disconnectedCallback() {
+        this.overflowBehavior.disconnect();
+    }
     /**
-     * Toggle element's hidde attribute
-     * @param element - element to toggle
-     * @param isHidden - element is hidden
+     * Set variables and validate props
      */
-    this.toggleElement = (element, isHidden) => {
-      if (isHidden)
-        element.setAttribute('hidden', '');
-      else
-        element.removeAttribute('hidden');
-    };
+    componentWillLoad() {
+        // init variables
+        this.messages = initLocales(this.element).messages.plusMenu;
+        this.parentMenu = this.element.closest('mg-menu');
+        this.menuItems = Array.from(this.parentMenu.children).filter(item => item.nodeName === 'MG-MENU-ITEM');
+        // validate props
+        this.validateIcon(this.icon);
+        this.validateSlotLabel(this.slotlabel);
+        this.validateSize(this.size);
+    }
     /**
-     * Remove hidden attributes on all items
+     * Add overflow behavior
      */
-    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);
+    componentDidLoad() {
+        this.overflowBehavior = new OverflowBehavior(this.parentMenu, this.renderMgMenuItemOverflowElement);
     }
-    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 MgItemMore$1 = /*@__PURE__*/ proxyCustomElement(class MgItemMore extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    /************
-     * Internal *
-     ************/
-    this.name = 'mg-item-more';
-    /***********
-     * Methods *
-     ***********/
     /**
-     * render mg-item-more overflow element
-     * @returns mg-item-more element
+     * Render
+     * @returns HTML Element
      */
-    this.renderMgMenuItemOverflowElement = () => {
-      // create menu items proxy element from item clones
-      const moreElementMenuItem = this.element.shadowRoot.querySelector('mg-menu-item');
-      this.menuItems.forEach((child) => {
-        moreElementMenuItem.querySelector('mg-menu').appendChild(child.cloneNode(true));
-      });
-      const allMenuItem = Array.from(this.parentMenu.querySelectorAll('mg-menu-item:not([data-overflow-more])'));
-      Array.from(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 (isValidString(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.moreLabel;
-  }
-  validateSize(newValue) {
-    if (newValue && typeof newValue !== 'string')
-      throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type.`);
-  }
-  /*************
-   * Lifecycle *
-   *************/
-  /**
-   * Disconnect overflow ResizeObserver
-   */
-  disconnectedCallback() {
-    this.overflowBehavior.disconnect();
-  }
-  /**
-   * Set variables and validate props
-   */
-  componentWillLoad() {
-    // init variables
-    this.messages = initLocales(this.element).messages.plusMenu;
-    this.parentMenu = this.element.closest('mg-menu');
-    this.menuItems = Array.from(this.parentMenu.children).filter(item => item.nodeName === 'MG-MENU-ITEM');
-    // validate props
-    this.validateIcon(this.icon);
-    this.validateSlotLabel(this.slotlabel);
-    this.validateSize(this.size);
-  }
-  /**
-   * Add overflow behavior
-   */
-  componentDidLoad() {
-    this.overflowBehavior = new OverflowBehavior(this.parentMenu, this.renderMgMenuItemOverflowElement);
-  }
-  /**
-   * Render
-   * @returns HTML Element
-   */
-  render() {
-    return (h(Host, { role: "listitem" }, h("mg-menu-item", { "data-overflow-more": true, "data-size": this.parentMenu.size }, h("mg-icon", { icon: this.icon.icon, slot: "image" }), h("span", { class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), h("mg-menu", { direction: Direction.VERTICAL, label: this.messages.moreLabel, size: this.size }))));
-  }
-  get element() { return this; }
-  static get watchers() { return {
-    "icon": ["validateIcon"],
-    "slotlabel": ["validateSlotLabel"],
-    "size": ["validateSize"]
-  }; }
-  static get style() { return mgItemMoreCss; }
+    render() {
+        return (h(Host, { role: "listitem" }, h("mg-menu-item", { "data-overflow-more": true, "data-size": this.parentMenu.size }, h("mg-icon", { icon: this.icon.icon, slot: "image" }), h("span", { class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), h("mg-menu", { direction: Direction.VERTICAL, label: this.messages.moreLabel, size: this.size }))));
+    }
+    get element() { return this; }
+    static get watchers() { return {
+        "icon": ["validateIcon"],
+        "slotlabel": ["validateSlotLabel"],
+        "size": ["validateSize"]
+    }; }
+    static get style() { return mgItemMoreCss; }
 }, [1, "mg-item-more", {
-    "icon": [16],
-    "slotlabel": [16],
-    "size": [1],
-    "parentMenu": [32]
-  }, undefined, {
-    "icon": ["validateIcon"],
-    "slotlabel": ["validateSlotLabel"],
-    "size": ["validateSize"]
-  }]);
+        "icon": [16],
+        "slotlabel": [16],
+        "size": [1],
+        "parentMenu": [32]
+    }, undefined, {
+        "icon": ["validateIcon"],
+        "slotlabel": ["validateSlotLabel"],
+        "size": ["validateSize"]
+    }]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["mg-item-more", "mg-badge", "mg-button", "mg-card", "mg-icon", "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$1);
-      }
-      break;
-    case "mg-badge":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$9();
-      }
-      break;
-    case "mg-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$8();
-      }
-      break;
-    case "mg-card":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$7();
-      }
-      break;
-    case "mg-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "mg-menu":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      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;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["mg-item-more", "mg-badge", "mg-button", "mg-card", "mg-icon", "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$1);
+            }
+            break;
+        case "mg-badge":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "mg-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "mg-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "mg-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "mg-menu":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            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();