@mgdis/mg-components 5.19.0 → 5.19.2

package/dist/collection/components/molecules/menu/mg-menu-item/test/mg-menu-item.e2e.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"mg-menu-item.e2e.js","sourceRoot":"","sources":["../../../../../../src/components/molecules/menu/mg-menu-item/test/mg-menu-item.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { KeyInput } from 'puppeteer';\nimport { createPage } from '../../../../../utils/stencil.e2e.test.utils';\nimport { renderAttributes } from '../../../../../utils/e2e.test.utils';\nimport { Direction, sizes } from '../../mg-menu/mg-menu.conf';\nimport { Status } from '../mg-menu-item.conf';\n\nconst slotContent = '<div><h3>Demo title</h3><p>some content</p></div>';\nconst slotMenuItem = '<mg-menu label=\"submenu\"><mg-menu-item><span slot=\"label\">Batman begins</span></mg-menu-item></mg-menu>';\nconst slotImage = '<mg-icon icon=\"user\" slot=\"image\"></mg-icon>';\nconst slotInformation = '<mg-badge value=\"2\" label=\"hello\" slot=\"information\"></mg-badge>';\nconst slotMetadata = '<span slot=\"metadata\">is a hero</span>';\n\nconst createHTML = (args, slot = '', direction = Direction.HORIZONTAL) => `\n<mg-menu ${renderAttributes({ label: 'batmenu', direction, ...args })}\">\n  <mg-menu-item ${renderAttributes(args)}>\n    <span slot=\"label\">${args.href ? 'batman link' : 'batman'}</span>\n    ${slot}\n  </mg-menu-item>\n</mg-menu>\n`;\n\ndescribe('mg-menu-item', () => {\n  describe.each([Direction.HORIZONTAL, Direction.VERTICAL])('render', direction => {\n    test('should render whith status', async () => {\n      const html = [Status.ACTIVE, Status.VISIBLE, Status.HIDDEN, Status.DISABLED]\n        .map(status => {\n          const template = [undefined, '#link']\n            .map(href => [true, false].map(submenu => (submenu && href !== undefined ? '' : createHTML({ status, href }, submenu && slotMenuItem, direction))).join(''))\n            .join('');\n          return `<h2>${status}<h2/><div>${template}<div>`;\n        })\n        .join('');\n\n      const page = await createPage(`<h1>${direction} mg-menu - Status</h1>${html}`);\n\n      const element = await page.find('mg-menu-item');\n      expect(element).toHaveClass('hydrated');\n\n      const screenshot = await page.screenshot();\n      expect(screenshot).toMatchImageSnapshot();\n    });\n\n    test('should render whith slots', async () => {\n      const html = [\n        { label: 'submenu', slot: slotMenuItem },\n        { label: 'image', slot: slotImage },\n        { label: 'information', slot: slotInformation },\n        { label: 'information AND image', slot: slotInformation + slotImage },\n      ]\n        .map(({ label, slot }) => {\n          const template = [true, false]\n            .map(submenu =>\n              [true, false]\n                .map(metadata =>\n                  sizes\n                    .map(size => (submenu && label === 'submenu' ? '' : createHTML({ size }, `${metadata ? slotMetadata : ''} ${submenu ? slot + slotMenuItem : slot}`, direction)))\n                    .join(''),\n                )\n                .join(''),\n            )\n            .join('');\n          return `<h2>${label}<h2/><div>${template}<div>`;\n        })\n        .join('');\n\n      const page = await createPage(`<h1>${direction} mg-menu - Slots</h1>${html}`);\n\n      const element = await page.find('mg-menu-item');\n      expect(element).toHaveClass('hydrated');\n\n      const screenshot = await page.screenshot();\n      expect(screenshot).toMatchImageSnapshot();\n    });\n\n    test.each([true, false])(`should renders direction=${direction}, props expanded=%s`, async expanded => {\n      const page = await createPage(createHTML({ expanded }, slotMenuItem, direction));\n\n      const element = await page.find('mg-menu-item');\n      expect(element).toHaveClass('hydrated');\n\n      await page.setViewport({ width: 300, height: 200 });\n\n      const screenshot = await page.screenshot();\n      expect(screenshot).toMatchImageSnapshot();\n    });\n\n    test('should render content slot', async () => {\n      const page = await createPage(createHTML({ expanded: true }, slotContent, direction));\n\n      const element = await page.find('mg-menu-item');\n      expect(element).toHaveClass('hydrated');\n\n      await page.setViewport({ width: 300, height: 200 });\n\n      const screenshot = await page.screenshot();\n      expect(screenshot).toMatchImageSnapshot();\n    });\n\n    test.each([[Status.ACTIVE, Status.VISIBLE, Status.HIDDEN, Status.DISABLED]])('shoud manage keyboard navigation', async status => {\n      const page = await createPage(createHTML({ status }, slotMenuItem, direction));\n      let screenshot = await page.screenshot();\n      expect(screenshot).toMatchImageSnapshot();\n\n      const element = await page.find('mg-menu-item');\n      expect(element).toHaveClass('hydrated');\n\n      await page.setViewport({ width: 300, height: 200 });\n\n      for await (const key of ['Tab', 'Enter']) {\n        await page.keyboard.press(key as unknown as KeyInput);\n        await page.waitForChanges();\n        await page.waitForTimeout(200);\n        screenshot = await page.screenshot();\n        expect(screenshot).toMatchImageSnapshot();\n      }\n    });\n  });\n});\n"]}

package/dist/mg-components/p-768fc594.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as i,H as e,g as s}from"./p-1aa89acf.js";import{a as o,i as n,D as h}from"./p-c9e2c669.js";const r=t=>t.nodeName==="MG-ITEM-MORE";var a;(function(t){t["BASE_INDEX"]="data-overflow-base-index";t["PROXY_INDEX"]="data-overflow-proxy-index"})(a||(a={}));class l{constructor(t,i){this.element=t;this.render=i;this.disconnect=()=>{this._resizeObserver.disconnect()};this.run=t=>{if(this._moreElement===undefined){this._moreElement=this.render();this._baseChildren=this.getInteractiveItems(this.element);if(r(this._moreElement)){this._proxyChildren=this.getInteractiveItems(this._moreElement.shadowRoot.querySelector("mg-menu"))}this._baseChildren.forEach(((t,i)=>{t.setAttribute(a.BASE_INDEX,`${i}`);this._proxyChildren[i].setAttribute(a.PROXY_INDEX,`${i}`)}))}if(t!==undefined)this.updateDisplayedItems(t)};this.getInteractiveItems=t=>{var i;return(((i=t.children)===null||i===void 0?void 0:i.length)>0?Array.from(t.children):[]).filter((t=>["MG-MENU-ITEM","MG-BUTTON"].includes(t.nodeName)))};this.updateDisplayedItems=t=>{this.restoreItems();const i={accWidth:0,previousItem:null};[...this._baseChildren,this._moreElement].forEach((e=>{i.accWidth+=e.offsetWidth;const s=i.previousItem!==null&&i.previousItem.getAttribute("hidden")!==null;this.toggleItem(e,s&&!this.isMoreElement(e)||this.isOverflowElement(i.accWidth,e,t)||this.isMoreElement(e)&&!s);i.previousItem=e}))};this.isOverflowElement=(t,i,e)=>{if(i.previousElementSibling===null||this.isMoreElement(i))return false;else if(!this.isMoreElement(i.nextElementSibling))return t+this._moreElement.offsetWidth>e;else return t>e};this.isMoreElement=t=>t.nodeName==="MG-ITEM-MORE";this.toggleItem=(t,i)=>{const e=Number(t.getAttribute(a.BASE_INDEX));if(this.isMoreElement(t))this.toggleElement(this._moreElement,i);else if(e>=0){this.toggleElement(t,i);this.toggleElement(this._proxyChildren[e],!i)}};this.toggleElement=(t,i)=>{if(i)t.setAttribute("hidden","");else t.removeAttribute("hidden")};this.restoreItems=()=>{[...this._baseChildren,this._moreElement].forEach((t=>t.removeAttribute("hidden")))};if(this._resizeObserver===undefined){this._resizeObserver=new ResizeObserver((t=>{t.forEach((t=>{this.run(t.contentRect.width)}))}));this._resizeObserver.observe(this.element)}this.run()}}const m=".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 c=class{constructor(i){t(this,i);this.name="mg-item-more";this.renderMgMenuItemOverflowElement=()=>{const t=this.element.shadowRoot.querySelector("mg-menu-item");this.menuItems.forEach((i=>{t.querySelector("mg-menu").appendChild(i.cloneNode(true))}));const i=Array.from(this.parentMenu.querySelectorAll("mg-menu-item:not([data-overflow-more])"));Array.from(t.querySelectorAll("mg-menu-item:not([data-overflow-more])")).forEach(((t,e)=>{t.addEventListener("click",(()=>{const t=i[e].shadowRoot.querySelector("a, button");if(t instanceof HTMLButtonElement||t instanceof HTMLAnchorElement)t.click()}));if(o(t.id))t.id=`${t.id}-proxy`;i[e].addEventListener("status-change",(i=>{t.setAttribute("status",i.detail)}))}));return this.element};this.icon={icon:"ellipsis-vertical"};this.slotlabel={display:false};this.size=undefined;this.parentMenu=undefined}validateIcon(t){if(typeof t!=="object"||typeof t==="object"&&typeof t.icon!=="string")throw new Error(`<${this.name}> prop "icon" must match MgItemMore['icon'] type.`)}validateSlotLabel(t){if(typeof t!=="object"||typeof t==="object"&&typeof t.display!=="boolean")throw new Error(`<${this.name}> prop "slotlabel" must match MgItemMore['slotlabel'] type.`);else if(typeof t.label!=="string")this.slotlabel.label=this.messages.moreLabel}validateSize(t){if(t&&typeof t!=="string")throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type.`)}disconnectedCallback(){this.overflowBehavior.disconnect()}componentWillLoad(){this.messages=n(this.element).messages.plusMenu;this.parentMenu=this.element.closest("mg-menu");this.menuItems=Array.from(this.parentMenu.children).filter((t=>t.nodeName==="MG-MENU-ITEM"));this.validateIcon(this.icon);this.validateSlotLabel(this.slotlabel);this.validateSize(this.size)}componentDidLoad(){this.overflowBehavior=new l(this.parentMenu,this.renderMgMenuItemOverflowElement)}render(){return i(e,{role:"listitem"},i("mg-menu-item",{"data-overflow-more":true,"data-size":this.parentMenu.size},i("mg-icon",{icon:this.icon.icon,slot:"image"}),i("span",{class:{"mg-u-visually-hidden":!this.slotlabel.display},slot:"label"},this.slotlabel.label),i("mg-menu",{direction:h.VERTICAL,label:this.messages.moreLabel,size:this.size})))}get element(){return s(this)}static get watchers(){return{icon:["validateIcon"],slotlabel:["validateSlotLabel"],size:["validateSize"]}}};c.style=m;export{c as mg_item_more};
-//# sourceMappingURL=p-768fc594.entry.js.map

package/dist/mg-components/p-768fc594.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["isMgItemMore","element","nodeName","OverflowBehaviorElements","OverflowBehavior","constructor","render","this","disconnect","_resizeObserver","run","width","_moreElement","undefined","_baseChildren","getInteractiveItems","_proxyChildren","shadowRoot","querySelector","forEach","child","index","setAttribute","BASE_INDEX","PROXY_INDEX","updateDisplayedItems","_a","children","length","Array","from","filter","includes","availableWidth","restoreItems","acc","accWidth","previousItem","offsetWidth","isPreviousItemHidden","getAttribute","toggleItem","isMoreElement","isOverflowElement","cumulateWidth","item","previousElementSibling","nextElementSibling","isHidden","mgActionMenuindex","Number","toggleElement","removeAttribute","ResizeObserver","entries","entry","contentRect","observe","mgItemMoreCss","MgItemMore","name","renderMgMenuItemOverflowElement","moreElementMenuItem","menuItems","appendChild","cloneNode","allMenuItem","parentMenu","querySelectorAll","proxy","addEventListener","navElement","HTMLButtonElement","HTMLAnchorElement","click","isValidString","id","event","detail","icon","display","validateIcon","newValue","Error","validateSlotLabel","label","slotlabel","messages","moreLabel","validateSize","disconnectedCallback","overflowBehavior","componentWillLoad","initLocales","plusMenu","closest","size","componentDidLoad","h","Host","role","slot","class","direction","Direction","VERTICAL"],"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(private element: Element, private render: () => HTMLElement) {\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 isPreviousItemHidden = acc.previousItem !== null && 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 { 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"],"mappings":"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"}