@mgdis/mg-components 5.19.2 → 5.20.0

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

@@ -4,197 +4,197 @@ import { OverflowBehavior } from "../../../utils/behaviors.utils";
 import { Direction } from "../menu/mg-menu/mg-menu.conf";
 import { isValidString } from "../../../utils/components.utils";
 export class MgItemMore {
-  constructor() {
-    /************
-     * Internal *
-     ************/
-    this.name = 'mg-item-more';
-    /***********
-     * Methods *
-     ***********/
+    constructor() {
+        /************
+         * 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 *
+     *************/
     /**
-     * render mg-item-more overflow element
-     * @returns mg-item-more element
+     * Disconnect overflow ResizeObserver
      */
-    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 }))));
-  }
-  static get is() { return "mg-item-more"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-item-more.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-item-more.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "icon": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "IconType",
-          "resolved": "{ icon: string; }",
-          "references": {
-            "IconType": {
-              "location": "import",
-              "path": "./mg-item-more.conf",
-              "id": "src/components/molecules/mg-item-more/mg-item-more.conf.ts::IconType"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define icon"
-        },
-        "defaultValue": "{ icon: 'ellipsis-vertical' }"
-      },
-      "slotlabel": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "SlotLabelType",
-          "resolved": "{ label?: string; display?: boolean; }",
-          "references": {
-            "SlotLabelType": {
-              "location": "import",
-              "path": "./mg-item-more.conf",
-              "id": "src/components/molecules/mg-item-more/mg-item-more.conf.ts::SlotLabelType"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define slot label element"
-        },
-        "defaultValue": "{ display: false }"
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "SizeType",
-          "resolved": "\"large\" | \"medium\" | \"regular\"",
-          "references": {
-            "SizeType": {
-              "location": "import",
-              "path": "./mg-item-more.conf",
-              "id": "src/components/molecules/mg-item-more/mg-item-more.conf.ts::SizeType"
+    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 }))));
+    }
+    static get is() { return "mg-item-more"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-item-more.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-item-more.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "icon": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconType",
+                    "resolved": "{ icon: string; }",
+                    "references": {
+                        "IconType": {
+                            "location": "import",
+                            "path": "./mg-item-more.conf",
+                            "id": "src/components/molecules/mg-item-more/mg-item-more.conf.ts::IconType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define icon"
+                },
+                "defaultValue": "{ icon: 'ellipsis-vertical' }"
+            },
+            "slotlabel": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SlotLabelType",
+                    "resolved": "{ label?: string; display?: boolean; }",
+                    "references": {
+                        "SlotLabelType": {
+                            "location": "import",
+                            "path": "./mg-item-more.conf",
+                            "id": "src/components/molecules/mg-item-more/mg-item-more.conf.ts::SlotLabelType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define slot label element"
+                },
+                "defaultValue": "{ display: false }"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SizeType",
+                    "resolved": "\"large\" | \"medium\" | \"regular\"",
+                    "references": {
+                        "SizeType": {
+                            "location": "import",
+                            "path": "./mg-item-more.conf",
+                            "id": "src/components/molecules/mg-item-more/mg-item-more.conf.ts::SizeType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define component child menu size."
+                },
+                "attribute": "size",
+                "reflect": false
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define component child menu size."
-        },
-        "attribute": "size",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "parentMenu": {}
-    };
-  }
-  static get elementRef() { return "element"; }
-  static get watchers() {
-    return [{
-        "propName": "icon",
-        "methodName": "validateIcon"
-      }, {
-        "propName": "slotlabel",
-        "methodName": "validateSlotLabel"
-      }, {
-        "propName": "size",
-        "methodName": "validateSize"
-      }];
-  }
+        };
+    }
+    static get states() {
+        return {
+            "parentMenu": {}
+        };
+    }
+    static get elementRef() { return "element"; }
+    static get watchers() {
+        return [{
+                "propName": "icon",
+                "methodName": "validateIcon"
+            }, {
+                "propName": "slotlabel",
+                "methodName": "validateSlotLabel"
+            }, {
+                "propName": "size",
+                "methodName": "validateSize"
+            }];
+    }
 }
 //# sourceMappingURL=mg-item-more.js.map

package/dist/collection/components/molecules/mg-item-more/mg-item-more.js.map

@@ -1 +1 @@
-{"version":3,"file":"mg-item-more.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-item-more/mg-item-more.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element, Host, Watch, State } from '@stencil/core';\nimport { initLocales } from '../../../locales';\nimport { OverflowBehavior } from '../../../utils/behaviors.utils';\nimport { Direction } from '../menu/mg-menu/mg-menu.conf';\nimport type { IconType, MessageType, SizeType, SlotLabelType } from './mg-item-more.conf';\nimport { isValidString } from '../../../utils/components.utils';\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 menuItems: HTMLMgMenuItemElement[];\n  private overflowBehavior: OverflowBehavior;\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.moreLabel;\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    const moreElementMenuItem = this.element.shadowRoot.querySelector('mg-menu-item');\n    this.menuItems.forEach((child: HTMLMgMenuItemElement) => {\n      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(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   * Disconnect overflow ResizeObserver\n   */\n  disconnectedCallback(): void {\n    this.overflowBehavior.disconnect();\n  }\n\n  /**\n   * Set variables and validate props\n   */\n  componentWillLoad(): void {\n    // init variables\n    this.messages = (initLocales(this.element).messages as { plusMenu: MessageType }).plusMenu;\n    this.parentMenu = this.element.closest('mg-menu');\n    this.menuItems = Array.from(this.parentMenu.children).filter(item => item.nodeName === 'MG-MENU-ITEM') as HTMLMgMenuItemElement[];\n\n    // validate props\n    this.validateIcon(this.icon);\n    this.validateSlotLabel(this.slotlabel);\n    this.validateSize(this.size);\n  }\n\n  /**\n   * Add overflow behavior\n   */\n  componentDidLoad(): void {\n    this.overflowBehavior = new OverflowBehavior(this.parentMenu, this.renderMgMenuItemOverflowElement);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <Host role=\"listitem\">\n        <mg-menu-item data-overflow-more data-size={this.parentMenu.size}>\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.moreLabel} size={this.size}></mg-menu>\n        </mg-menu-item>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"mg-item-more.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-item-more/mg-item-more.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element, Host, Watch, State } from '@stencil/core';\nimport { initLocales } from '../../../locales';\nimport { OverflowBehavior } from '../../../utils/behaviors.utils';\nimport { Direction } from '../menu/mg-menu/mg-menu.conf';\nimport type { IconType, MessageType, SizeType, SlotLabelType } from './mg-item-more.conf';\nimport { isValidString } from '../../../utils/components.utils';\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 menuItems: HTMLMgMenuItemElement[];\n  private overflowBehavior: OverflowBehavior;\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.moreLabel;\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    const moreElementMenuItem = this.element.shadowRoot.querySelector('mg-menu-item');\n    this.menuItems.forEach((child: HTMLMgMenuItemElement) => {\n      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(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   * Disconnect overflow ResizeObserver\n   */\n  disconnectedCallback(): void {\n    this.overflowBehavior.disconnect();\n  }\n\n  /**\n   * Set variables and validate props\n   */\n  componentWillLoad(): void {\n    // init variables\n    this.messages = (initLocales(this.element).messages as { plusMenu: MessageType }).plusMenu;\n    this.parentMenu = this.element.closest('mg-menu');\n    this.menuItems = Array.from(this.parentMenu.children).filter(item => item.nodeName === 'MG-MENU-ITEM') as HTMLMgMenuItemElement[];\n\n    // validate props\n    this.validateIcon(this.icon);\n    this.validateSlotLabel(this.slotlabel);\n    this.validateSize(this.size);\n  }\n\n  /**\n   * Add overflow behavior\n   */\n  componentDidLoad(): void {\n    this.overflowBehavior = new OverflowBehavior(this.parentMenu, this.renderMgMenuItemOverflowElement);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <Host role=\"listitem\">\n        <mg-menu-item data-overflow-more data-size={this.parentMenu.size}>\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.moreLabel} size={this.size}></mg-menu>\n        </mg-menu-item>\n      </Host>\n    );\n  }\n}\n"]}