@mgdis/mg-components 6.2.0 → 6.4.0

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

@@ -1 +1 @@
-{"version":3,"file":"mg-menu.js","sourceRoot":"","sources":["../../../../../src/components/molecules/menu/mg-menu/mg-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Element, Watch, Host } from '@stencil/core';\nimport { Direction, sizes } from './mg-menu.conf';\nimport type { MenuSizeType, ItemMoreType, DirectionType } from './mg-menu.conf';\nimport { toString } from '@mgdis/stencil-helpers';\n\n/**\n * @slot - Menu content\n */\n@Component({\n  tag: 'mg-menu',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-menu.css',\n  shadow: true,\n})\nexport class MgMenu {\n  /************\n   * Internal *\n   ************/\n\n  private readonly name = 'mg-menu';\n  private menuItems: HTMLMgMenuItemElement[] = [];\n  private focusedMenuItem = 0;\n  private itemMoreElement: HTMLMgItemMoreElement;\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 to define accessibility required attribute `aria-label`\n   */\n  @Prop() label!: string;\n  @Watch('label')\n  validateLabel(newValue: MgMenu['label']): void {\n    if (newValue === undefined && !this.element.hasAttribute('aria-label')) {\n      throw new Error(`<${this.name}> prop \"label\" is required. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Component display direction.\n   */\n  @Prop({ reflect: true }) direction: DirectionType = 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}. Passed value: ${toString(newValue)}.`);\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    } else if (newValue !== undefined) {\n      this.renderMgItemMore();\n    }\n  }\n\n  /**\n   * Define mg-menu size\n   */\n  @Prop() size: MenuSizeType = 'medium';\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(', ')}. Passed value: ${toString(newValue)}.`);\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 child mg-menu-item element\n   * @returns mg-menu-item element\n   */\n  private getItemMoreMenuItem = (): HTMLMgMenuItemElement => this.itemMoreElement?.shadowRoot?.querySelector('mg-menu-item');\n\n  /**\n   * Set item listend\n   * @param item - mg-menu-item element\n   * @param index - number\n   */\n  private setItemListener = (item: HTMLMgMenuItemElement, index: MgMenu['focusedMenuItem']): void => {\n    ['click', 'focus'].forEach(trigger => {\n      item.shadowRoot.querySelector('button,a').addEventListener(trigger, () => {\n        this.focusedMenuItem = index;\n        // reset expanded on previous active menu item\n        const itemMoreMenuItem = this.getItemMoreMenuItem();\n        (![null, undefined].includes(itemMoreMenuItem) ? [...this.menuItems, itemMoreMenuItem] : this.menuItems).forEach((item, index) => {\n          this.closeMenuItem(item, index !== this.focusedMenuItem);\n        });\n      });\n    });\n  };\n\n  /**\n   * Store menu-items on component init and add listeners\n   */\n  private initMenuItemsListeners = (): void => {\n    // add listeners on menu item and edit index\n    this.menuItems.forEach((item, index) => {\n      this.setItemListener(item, index);\n    });\n  };\n\n  /**\n   * Handle item-loaded event on mg-item-more element\n   */\n  private handleItemLoaded = (): void => {\n    this.setItemListener(this.getItemMoreMenuItem(), this.menuItems.length);\n  };\n\n  /**\n   * render mg-item-more\n   */\n  private renderMgItemMore = (): void => {\n    if (this.direction !== Direction.HORIZONTAL || this.isChildMenu || this.element.children.length <= 1) {\n      return;\n    }\n\n    // Insert mg-item-more outside the mg-menu shadowdom\n    if (this.itemMoreElement === undefined) {\n      this.itemMoreElement = document.createElement('mg-item-more');\n      this.itemMoreElement.addEventListener('item-loaded', this.handleItemLoaded);\n      this.element.appendChild(this.itemMoreElement);\n    }\n\n    // update mg-item-more props\n    for (const attribute in this.itemmore) {\n      const newValue = this.itemmore[attribute];\n      // to improve rendering we use HTML attributes as much as possible\n      if (['string', 'number'].includes(typeof newValue)) {\n        this.itemMoreElement.setAttribute(attribute, newValue);\n      } else {\n        this.itemMoreElement[attribute] = newValue;\n      }\n    }\n    if (this.itemmore?.size === undefined) this.itemMoreElement.size = this.size;\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Validate props\n   */\n  componentWillLoad(): void {\n    this.validateDirection(this.direction);\n    this.validateLabel(this.label);\n    this.validateItemMore(this.itemmore);\n    this.validateSize(this.size);\n  }\n\n  /**\n   * Check if component slots configuration\n   * @returns timeout\n   */\n  componentDidLoad(): ReturnType<typeof setTimeout> {\n    // update props and states after componentDidLoad hook\n    // return a promise to process action only in the FIRST render().\n    // https://stenciljs.com/docs/component-lifecycle#componentwillload\n    return setTimeout(() => {\n      // store all menu-items\n      this.menuItems = Array.from(this.element.children).filter(child => child.nodeName === 'MG-MENU-ITEM') as HTMLMgMenuItemElement[];\n      this.isChildMenu = this.element.closest('mg-menu-item') !== null;\n\n      // add mg-item-more to manage OverflowBehavior\n      // when all props, states and DOM are already rendered we can render the mg-item-more\n      this.renderMgItemMore();\n      // then use mutation observer on children to improve reactivity\n      new MutationObserver(() => {\n        this.renderMgItemMore();\n      }).observe(this.element, { childList: true });\n    });\n  }\n\n  /**\n   * Add listeners to items\n   */\n  componentDidRender(): void {\n    this.initMenuItemsListeners();\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <Host role=\"list\" aria-label={this.label}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"mg-menu.js","sourceRoot":"","sources":["../../../../../src/components/molecules/menu/mg-menu/mg-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACjF,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAElD,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAElD;;GAEG;AAMH,MAAM,OAAO,MAAM;IALnB;QAME;;sBAEc;QAEG,SAAI,GAAG,SAAS,CAAC;QAuBlC;;WAEG;QACsB,cAAS,GAAkB,SAAS,CAAC,UAAU,CAAC;QAwBzE;;WAEG;QACK,SAAI,GAAiB,QAAQ,CAAC;QA+BtC;;uBAEe;QAEf;;;WAGG;QACK,gBAAW,GAAG,GAAY,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;QAEnF;;;WAGG;QACK,iBAAY,GAAG,CAAC,IAAI,GAAG,IAAI,CAAC,OAAO,EAA2B,EAAE;;YACtE,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,KAAK,cAAc,CAA4B,CAAC;YAC1H,MAAM,gBAAgB,GAAG,MAAA,MAAA,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,0CAAE,UAAU,0CAAE,aAAa,CAAC,cAAc,CAAC,CAAC;YACvG,IAAG,gBAAgB,EAAE,CAAC;gBACpB,SAAS,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;YAClC,CAAC;YACD,OAAO,SAAS,CAAC;QACnB,CAAC,CAAA;QAED;;WAEG;QACK,oBAAe,GAAG,GAAS,EAAE;YACnC,IAAI,CAAC,YAAY,EAAE,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;gBACnC,IAAI,CAAC,OAAO,CAAC,cAAc,GAAG,IAAI,CAAC,SAAS,CAAA;YAC9C,CAAC,CAAC,CAAA;YAEF,iDAAiD;YACjD,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC1B,CAAC,CAAA;QAED;;WAEG;QACK,qBAAgB,GAAG,GAAS,EAAE;;YACpC,IAAI,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,UAAU,IAAI,IAAI,CAAC,WAAW,EAAE,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAM,IAAI,CAAC,EAAE,CAAC;gBAChJ,OAAO;YACT,CAAC;YAED,oDAAoD;YACpD,IAAI,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,cAAc,CAAC,CAAA;YAChE,IAAI,eAAe,KAAK,IAAI,EAAE,CAAC;gBAC7B,eAAe,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;gBACzD,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC;YAC5C,CAAC;YAED,4BAA4B;YAC5B,KAAK,MAAM,SAAS,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACtC,eAAe,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;YACxD,CAAC;YACD,IAAI,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,IAAI,MAAK,SAAS;gBAAE,eAAe,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QAC1E,CAAC,CAAC;KAsDH;IAhLC,aAAa,CAAC,QAAyB;QACrC,IAAI,QAAQ,KAAK,SAAS,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC;YACvE,MAAM,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,6CAA6C,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QACnG,CAAC;IACH,CAAC;IAOD,iBAAiB,CAAC,QAA6B;QAC7C,IAAI,CAAC,CAAC,SAAS,CAAC,QAAQ,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;YACnE,MAAM,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,sCAAsC,SAAS,CAAC,UAAU,KAAK,SAAS,CAAC,QAAQ,mBAAmB,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QAC1J,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC;IACH,CAAC;IAQD,gBAAgB,CAAC,QAA4B;QAC3C,IAAI,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,UAAU,EAAE,CAAC;YACtE,MAAM,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,mDAAmD,SAAS,CAAC,UAAU,GAAG,CAAC,CAAC;QAC3G,CAAC;aAAM,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;YAClC,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC1B,CAAC;IACH,CAAC;IAOD,YAAY,CAAC,QAAwB;QACnC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC9B,MAAM,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,iCAAiC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QAC1H,CAAC;IACH,CAAC;IAED;;;OAGG;IAEH,kBAAkB,CAAC,KAAqD;QACtE,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,QAAQ,KAAK,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC;QAEpI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;YACnC,WAAW,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAQ,EAAE;gBAC9C,MAAM,WAAW,GAA0B,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAA;gBAC5G,gEAAgE;gBAChE,IAAG,WAAW,KAAK,WAAW;oBAAE,OAAO;gBAEvC,8CAA8C;gBAC9C,IAAG,WAAW;oBAAE,WAAW,CAAC,eAAe,CAAC,gBAAgB,CAAC,CAAC;gBAE9D,wCAAwC;gBACxC,WAAW,CAAC,YAAY,CAAC,gBAAgB,EAAC,MAAM,CAAC,CAAC;YACpD,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAA;IACJ,CAAC;IAAA,CAAC;IA2DF;;mBAEe;IAEf;;OAEG;IACH,iBAAiB;QACf,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACvC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC/B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACrC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED;;OAEG;IACH,gBAAgB;QACd,iBAAiB;QACjB,IAAI,CAAC,eAAe,EAAE,CAAC;QAEvB,sDAAsD;QACtD,IAAG,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,UAAU,EAAE,CAAC;YAClE,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,KAA0C,EAAO,EAAE;gBACvF,MAAM,cAAc,GAAG,CAAC,OAAoB,EAAU,EAAE;oBACtD,IAAI,OAAO,KAAK,IAAI,CAAC,OAAO;wBAAE,OAAO,IAAI,CAAC;yBACrC,IAAG,CAAC,OAAO,CAAC,aAAa;wBAAE,OAAO,KAAK,CAAC;;wBACxC,OAAO,cAAc,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;gBACpD,CAAC,CAAC;gBAEF,IAAG,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC;oBACrE,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAA;oBAClE,8CAA8C;oBAC9C,IAAG,WAAW;wBAAE,WAAW,CAAC,eAAe,CAAC,gBAAgB,CAAC,CAAC;gBAChE,CAAC;YACH,CAAC,CAAC,CAAA;QACJ,CAAC;QACD,qDAAqD;QACrD,IAAI,gBAAgB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IACxF,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,MAAM,gBAAa,IAAI,CAAC,KAAK;YACtC,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Element, Watch, Host, Listen } from '@stencil/core';\nimport { Direction, sizes } from './mg-menu.conf';\nimport type { MenuSizeType, ItemMoreType, DirectionType } from './mg-menu.conf';\nimport { toString } from '@mgdis/stencil-helpers';\n\n/**\n * @slot - Menu content\n */\n@Component({\n  tag: 'mg-menu',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-menu.css',\n  shadow: true,\n})\nexport class MgMenu {\n  /************\n   * Internal *\n   ************/\n\n  private readonly name = 'mg-menu';\n\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 to define accessibility required attribute `aria-label`\n   */\n  @Prop() label!: string;\n  @Watch('label')\n  validateLabel(newValue: MgMenu['label']): void {\n    if (newValue === undefined && !this.element.hasAttribute('aria-label')) {\n      throw new Error(`<${this.name}> prop \"label\" is required. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Component display direction.\n   */\n  @Prop({ reflect: true }) direction: DirectionType = 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}. Passed value: ${toString(newValue)}.`);\n    } else {\n      this.updateMenuItems();\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    } else if (newValue !== undefined) {\n      this.renderMgItemMore();\n    }\n  }\n\n  /**\n   * Define mg-menu size\n   */\n  @Prop() size: MenuSizeType = 'medium';\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(', ')}. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Define mg-menu-item listener when they are loaded\n   * @param event - mg-item-loaded \"item-loaded\" custom event\n   */\n  @Listen('item-loaded')\n  updateItemListener(event: CustomEvent & { target: HTMLMgMenuItemElement}): void {\n    const itemToWatch = event.target.nodeName === 'MG-ITEM-MORE' ? event.target.shadowRoot.querySelector('mg-menu-item') : event.target;\n\n    ['click', 'focus'].forEach(trigger => {\n      itemToWatch.addEventListener(trigger, ():void => {\n        const focusedItem: HTMLMgMenuItemElement = event.target.closest('mg-menu').querySelector('[data-has-focus]')\n        // exit process if new focused item in the current menu children\n        if(focusedItem === itemToWatch) return;\n\n        // reset expanded on previous active menu item\n        if(focusedItem) focusedItem.removeAttribute(\"data-has-focus\");\n\n        // update focusedMenuItem with new value\n        itemToWatch.setAttribute('data-has-focus','true');\n      });\n    })\n  };\n\n  /*************\n   * Methods *\n   *************/\n\n  /**\n   * Test if menu is a child menu\n   * @returns truthy if menu is a child menu\n   */\n  private isChildMenu = (): boolean => this.element.closest('mg-menu-item') !== null;\n\n  /**\n   * Get menu children items\n   * @returns menu children mg-menu-item\n   */\n  private getMenuItems = (menu = this.element): HTMLMgMenuItemElement[] => {\n    const menuItems = Array.from(menu.children).filter(child => child.nodeName === 'MG-MENU-ITEM') as HTMLMgMenuItemElement[];\n    const itemMoreMenuItem = menu.querySelector('mg-item-more')?.shadowRoot?.querySelector('mg-menu-item');\n    if(itemMoreMenuItem) {\n      menuItems.push(itemMoreMenuItem)\n    }\n    return menuItems;\n  }\n\n  /**\n   * Update menu items\n   */\n  private updateMenuItems = (): void => {\n    this.getMenuItems().forEach((item) => {\n      item.dataset.styleDirection = this.direction\n    })\n\n    // render mg-item-more to manage OverflowBehavior\n    this.renderMgItemMore();\n  }\n\n  /**\n   * render mg-item-more\n   */\n  private renderMgItemMore = (): void => {\n    if (this.direction === Direction.VERTICAL || this.direction === Direction.HORIZONTAL && this.isChildMenu() || this.element.children.length <= 1) {\n      return;\n    }\n\n    // Insert mg-item-more outside the mg-menu shadowdom\n    let itemMoreElement = this.element.querySelector('mg-item-more')\n    if (itemMoreElement === null) {\n      itemMoreElement = document.createElement('mg-item-more');\n      this.element.appendChild(itemMoreElement);\n    }\n\n    // update mg-item-more props\n    for (const propertie in this.itemmore) {\n      itemMoreElement[propertie] = this.itemmore[propertie];\n    }\n    if (this.itemmore?.size === undefined) itemMoreElement.size = this.size;\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   */\n  componentDidLoad(): void {\n    // set menu-items\n    this.updateMenuItems();\n\n    // add listener to close main menu when focus leave it\n    if(!this.isChildMenu() && this.direction === Direction.HORIZONTAL) {\n      document.addEventListener('focusin', (event: FocusEvent & { target: HTMLElement}):void => {\n        const isElementChild = (element: HTMLElement):boolean => {\n          if (element === this.element) return true;\n          else if(!element.parentElement) return false;\n          else return isElementChild(element.parentElement);\n        };\n  \n        if(!event.target.closest('mg-menu') || !isElementChild(event.target)) {\n          const focusedItem = this.element.querySelector('[data-has-focus]')\n          // reset expanded on previous active menu item\n          if(focusedItem) focusedItem.removeAttribute('data-has-focus');\n        }\n      })\n    }\n    // add mutation observer to improve global reactivity\n    new MutationObserver(this.updateMenuItems).observe(this.element, { childList: true });\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"]}

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

@@ -17,15 +17,39 @@ export class MgMenuItem {
          ************/
         this.name = 'mg-menu-item';
         this.navigationButton = 'mg-c-menu-item__navigation-button';
+        /************
+         * Props *
+         ************/
+        /**
+         * Identifier is used to control mg-popover
+         */
+        this.identifier = createID('mg-menu-item');
+        /**
+         * Define menu-item status.
+         */
+        this.status = Status.VISIBLE;
+        /**
+         * Define menu-item content expanded.
+         */
+        this.expanded = false;
+        /**********
+         * States *
+         *********/
+        /**
+         * Define menu-item size.
+         */
+        this.size = 'medium';
+        /**
+         * Component button classes
+         */
+        this.navigationButtonClassList = new ClassList([this.navigationButton]);
+        /**
+         * Does component have children.
+         */
+        this.hasChildren = false;
         /***********
          * Methods *
          **********/
-        /**
-         * Toggle expanded prop value
-         */
-        this.toggleExpanded = () => {
-            this.expanded = !this.expanded;
-        };
         /**
          * Does an Element have given Status
          * @param mgMenuItemElement - to parse
@@ -33,6 +57,24 @@ export class MgMenuItem {
          * @returns true if element with status is found
          */
         this.hasStatus = (mgMenuItemElement, status) => mgMenuItemElement.status === status;
+        /**
+         * Condition to know if component should display a mg-popover
+         * @returns truthy if component display popover
+         */
+        this.hasPopover = () => this.isDirection(Direction.HORIZONTAL) && (this.isInMainMenu && Array.from(this.element.children).some(element => !element.querySelector('[slot]')) || this.isItemMore) && this.href === undefined;
+        /**
+         * Method to control if one of component children have active status
+         * @returns truthy if component has active child
+         */
+        this.hasActiveChild = () => {
+            var _a;
+            return Array.from(((_a = this.element.querySelector('mg-menu')) === null || _a === void 0 ? void 0 : _a.children) || []).some((element) => element.nodeName === 'MG-MENU-ITEM' && this.hasStatus(element, Status.ACTIVE) && !element.hasAttribute('hidden'));
+        };
+        /**
+         * Is component an interactive item
+         * @returns truthy if element is clickable
+         */
+        this.isInteractiveItem = () => this.hasChildren || !isValidString(this.href);
         /**
          * Is component contextual direction match the given direction
          * @param direction - in parent menu
@@ -50,22 +92,34 @@ export class MgMenuItem {
                 childMenu !== null && Array.from(childMenu.children).some((subItem) => subItem.querySelector('mg-badge') !== null && !subItem.hasAttribute('hidden'));
         };
         /**
-         * Method to control if one of component children have active status
-         * @returns truthy if component has active child
+         * Update expanded prop
+         * @param newValue - expanded new value
          */
-        this.hasActiveChild = () => {
-            var _a;
-            return Array.from(((_a = this.element.querySelector('mg-menu')) === null || _a === void 0 ? void 0 : _a.children) || []).some((element) => element.nodeName === 'MG-MENU-ITEM' && this.hasStatus(element, Status.ACTIVE) && !element.hasAttribute('hidden'));
+        this.updateExpanded = (newValue) => {
+            if (this.isInteractiveItem()) {
+                // item is always expanded in vertical menu when has active child
+                this.expanded = this.isDirection(Direction.VERTICAL) && this.hasActiveChild() || newValue;
+            }
         };
         /**
-         * Validate slots
+         * Update status
+         * @param guard - status to exclude from process in addition to [Status.HIDDEN, Status.DISABLED] . Default: [].
+         */
+        this.updateStatus = (guard = []) => {
+            if (![Status.HIDDEN, Status.DISABLED, ...guard].includes(this.status)) {
+                this.status = this.hasActiveChild() ? Status.ACTIVE : Status.VISIBLE;
+            }
+        };
+        /**
+         * Update slots
          * @param guard - prevent action with guard. Default: false.
          */
-        this.validateSlot = (guard = false) => {
+        this.updateSlot = (guard = false) => {
             // slot title AND metadata validation
             // add title on label AND metada slots due to text-overflow on these element
-            if (Array.from(this.element.children).find(child => child.getAttribute('slot') === 'label') === undefined)
+            if (Array.from(this.element.children).find(child => child.getAttribute('slot') === 'label') === undefined) {
                 throw new Error(`<${this.name}> slot "label" is required.`);
+            }
             ['label', 'metadata'].forEach(slot => {
                 Array.from(this.element.querySelectorAll(`[slot="${slot}"]`)).forEach(element => {
                     if (!isValidString(element.textContent))
@@ -76,39 +130,23 @@ export class MgMenuItem {
             });
         };
         /**
-         * Update status
-         * @param guard - status to exclude from process in addition to [Status.HIDDEN, Status.DISABLED] . Default: [].
+         * Update menu item
+         * @param guard - prevent action with guard
          */
-        this.updateStatus = (guard = []) => {
-            if (![Status.HIDDEN, Status.DISABLED, ...guard].includes(this.status)) {
-                this.status = this.hasActiveChild() ? Status.ACTIVE : Status.VISIBLE;
-            }
-        };
-        /**
-         * Init event-listeners
-         */
-        this.initListeners = () => {
-            var _a;
-            // manage first sub-level menu-items
-            Array.from(((_a = this.element.querySelector('mg-menu')) === null || _a === void 0 ? void 0 : _a.children) || []).forEach(item => {
-                if (item.nodeName === 'MG-MENU-ITEM') {
-                    // manage child menu listener
-                    item.addEventListener('status-change', () => {
-                        this.updateStatus();
-                    });
-                }
-            });
+        this.updateItem = (guard) => {
+            const menu = this.element.closest('mg-menu');
+            this.isInMainMenu = menu !== null && this.element.parentElement.closest('mg-menu-item') === null;
+            // define element size
+            if ((menu === null || menu === void 0 ? void 0 : menu.size) !== undefined && !this.isItemMore)
+                this.size = menu.size;
+            else if (this.isItemMore)
+                this.size = this.element.dataset.size;
+            // when vertical main menu item contain an active item we force expanded
+            this.updateExpanded(this.expanded);
+            this.updateStatus(guard);
+            this.updatePopoverGuard();
+            this.updateDisplayNotificationBadge();
         };
-        /**
-         * Get mg-popover identifier
-         * @returns generated mg-popover identifier
-         */
-        this.getPopoverIdentifier = () => `${this.identifier}-popover`;
-        /**
-         * Condition to know if component should display a mg-popover
-         * @returns truthy if component display popover
-         */
-        this.displayPopover = () => this.isDirection(Direction.HORIZONTAL) && this.hasChildren && this.href === undefined;
         /************
          * Handlers *
          ************/
@@ -117,106 +155,123 @@ export class MgMenuItem {
          * @param event - click on element
          */
         this.handleElementCLick = (event) => {
-            if ((this.hasChildren && !this.isInMainMenu) || this.status === Status.DISABLED) {
+            if (this.status === Status.DISABLED) {
                 event.preventDefault();
                 event.stopPropagation();
             }
-            // toggle expanded when mg-menu-item has child items
-            if (this.hasChildren)
-                this.toggleExpanded();
+            // for non "poperized" menu-item we toggle expanded manualy
+            this.updateExpanded(!this.expanded);
+            // when item is the last clickable item we close the parent popover
+            if (!this.isInteractiveItem()) {
+                const closePopover = (element) => {
+                    if (!element)
+                        return;
+                    else if (element !== this.element && element.expanded && element.shadowRoot.querySelector('mg-popover') !== null) {
+                        element.expanded = false;
+                    }
+                    else {
+                        closePopover(element.parentElement.closest('mg-menu-item'));
+                    }
+                };
+                closePopover(this.element);
+            }
         };
         /**
          * Handle popover element display-change event
          * @param event - popover display event
          */
         this.handlePopoverDisplay = (event) => {
-            this.expanded = event.detail;
+            this.updateExpanded(event.detail);
         };
         /**
          * Render slot
          * @returns HTML Element
          */
         this.renderSlot = () => h("slot", null);
-        this.identifier = createID('mg-menu-item');
-        this.href = undefined;
-        this.target = undefined;
-        this.status = Status.VISIBLE;
-        this.expanded = false;
-        this.size = 'medium';
-        this.navigationButtonClassList = new ClassList([this.navigationButton]);
-        this.direction = undefined;
-        this.isInMainMenu = undefined;
-        this.isItemMore = undefined;
-        this.hasChildren = false;
-        this.displayNotificationBadge = undefined;
     }
     watchIdentifier(newValue) {
         if (!isValideID(newValue)) {
             console.error(`<mg-menu-item> prop "identifier" value is invalid. Passed value: ${toString(newValue)}.`);
         }
+        else {
+            this.popoverIdentifier = `${this.identifier}-popover`;
+        }
     }
     watchTarget(newValue) {
         if (newValue && !targets.includes(newValue)) {
             throw new Error(`<mg-link> prop "target" must be one of: ${targets.join(', ')}. Passed value: ${toString(newValue)}.`);
         }
     }
-    validateStatus(newValue, oldValue) {
-        if (oldValue !== undefined) {
+    watchStatus(newValue, oldValue) {
+        if (oldValue !== undefined)
             this.navigationButtonClassList.delete(`${this.navigationButton}--${oldValue}`);
-        }
         this.navigationButtonClassList.add(`${this.navigationButton}--${newValue}`);
-        this.statusChange.emit(newValue);
     }
-    validateExpanded(newValue) {
-        if (typeof newValue !== 'boolean')
+    watchExpanded(newValue) {
+        if (typeof newValue !== 'boolean') {
             throw new Error(`<${this.name}> prop "expanded" must be a boolean. Passed value: ${toString(newValue)}.`);
-        // if menu-item has sub-menu we have to apply some updates:
-        if (this.hasChildren) {
-            const subItems = Array.from(this.element.querySelectorAll(this.name));
-            if (!newValue) {
-                // - when main menu item is NOT expanded we need NOT expanded sub-items and NOT expanded sub-content
-                subItems.forEach(item => {
-                    item.expanded = false;
-                });
-            }
-            else if (this.element.querySelector(`${this.name}[status="${Status.ACTIVE}"]`) !== null) {
-                // - when expanded and contain an active item parents are expended too
-                subItems.forEach(item => {
-                    if (this.hasStatus(item, Status.ACTIVE)) {
-                        item.expanded = true;
-                    }
-                });
-            }
+        }
+        else {
+            this.updateExpanded(newValue);
+            // when expanded all actives sub-items need to be expanded and non active closed
+            Array.from(this.element.querySelectorAll('mg-menu-item')).forEach(item => {
+                if (item !== this.element)
+                    item.expanded = newValue ? this.hasStatus(item, Status.ACTIVE) : false;
+            });
         }
     }
-    validateSize(newValue, oldValue) {
-        this.navigationButtonClassList.delete(`${this.navigationButton}--size-${oldValue}`);
+    watchSize(newValue, oldValue) {
+        if (oldValue !== undefined)
+            this.navigationButtonClassList.delete(`${this.navigationButton}--size-${oldValue}`);
         this.navigationButtonClassList.add(`${this.navigationButton}--size-${newValue}`);
     }
-    validateDirection(newValue) {
-        // manage menu items style depending to parent menu horientation
-        this.element.setAttribute('data-style-direction', newValue);
+    validateDirection(newValue, oldValue) {
+        if (oldValue !== undefined)
+            this.navigationButtonClassList.delete(`${this.navigationButton}--${oldValue}`);
         this.navigationButtonClassList.add(`${this.navigationButton}--${newValue}`);
         // manage all sub levels child menu-items level with data-level attribut
-        if (this.isDirection(Direction.VERTICAL, newValue)) {
-            Array.from(this.element.querySelectorAll('mg-menu-item')).forEach(item => {
+        Array.from(this.element.querySelectorAll('mg-menu-item')).forEach(item => {
+            if (this.isDirection(Direction.VERTICAL, newValue)) {
                 item.dataset.level = `${(Number(item.dataset.level) || 1) + 1}`;
-            });
-        }
+            }
+            else {
+                delete item.dataset.level;
+            }
+        });
     }
     validateHasChildren(newValue) {
         if (newValue && this.element.href !== undefined) {
             throw new Error(`<${this.name}> prop "href" is unauthorizied when element is a parent.`);
         }
     }
+    /**
+     * direction value in dataset
+     * @param newValue - new direction value
+     */
+    // eslint-disable-next-line @stencil-community/no-unused-watch
+    watchDataStyleDirection(newValue) {
+        this.direction = newValue;
+    }
+    /**
+     * has focus value in dataset
+     * @param newValue - new direction value
+     */
+    // eslint-disable-next-line @stencil-community/no-unused-watch
+    watchDataHasFocus(newValue) {
+        if (!newValue)
+            this.updateExpanded(Boolean(newValue));
+    }
     /**
      * Render popover clickoutside guard for content slot
      */
     updatePopoverGuard() {
-        if (this.displayPopover())
-            Array.from(this.element.children)
-                .filter((child) => !child.hasAttribute('slot') && child.nodeName !== 'MG-MENU' && Boolean(child.dataset))
-                .forEach((slot) => (slot.dataset.mgPopoverGuard = this.getPopoverIdentifier()));
+        const subItem = this.element.querySelector('*:not([slot])');
+        if (!subItem)
+            return;
+        if (this.hasPopover())
+            subItem.dataset.mgPopoverGuard = this.popoverIdentifier;
+        else
+            delete subItem.dataset.mgPopoverGuard;
     }
     /*************
      * Lifecycle *
@@ -230,13 +285,12 @@ export class MgMenuItem {
         this.hasChildren = Array.from(this.element.children).some(child => !['image', 'information', 'label', 'metadata'].includes(child.getAttribute('slot')));
         this.messages = initLocales(this.element).messages.menuItem;
         this.isItemMore = this.element.dataset.overflowMore !== undefined;
-        // Validate props
-        this.validateStatus(this.status);
-        this.validateExpanded(this.expanded);
+        // watchers
+        this.watchStatus(this.status);
+        this.watchExpanded(this.expanded);
         this.watchTarget(this.target);
         this.watchIdentifier(this.identifier);
-        // Validate states
-        this.validateSize(this.size);
+        this.watchSize(this.size);
     }
     /**
      * Check if component slots configuration
@@ -244,40 +298,36 @@ export class MgMenuItem {
      */
     componentDidLoad() {
         // validation
-        this.validateSlot(true);
+        this.updateSlot(true);
         // 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(() => {
-            // define menu-item context states
-            const menu = this.element.closest('mg-menu');
-            this.direction = this.isItemMore || menu === null ? Direction.HORIZONTAL : menu.direction;
-            this.isInMainMenu = menu !== null && this.element.parentElement.closest('mg-menu-item') === null;
-            if ((menu === null || menu === void 0 ? void 0 : menu.size) !== undefined)
-                this.size = menu.size;
-            if (this.isItemMore)
-                this.size = this.element.dataset.size;
-            // when main menu item contain an active item it will get the active style
-            // AND if item is in vertical menu it will be expanded
-            if (this.hasActiveChild() && this.isInMainMenu)
-                this.expanded = this.isDirection(Direction.VERTICAL);
-            this.updateStatus([Status.ACTIVE]);
-            this.updateDisplayNotificationBadge();
-            this.updatePopoverGuard();
-            // manage child dom changes with mutationObserver and listners
-            this.initListeners();
+            this.watchDataStyleDirection(this.element.dataset.styleDirection);
+            this.watchDataHasFocus(this.element.dataset.hasFocus);
+            this.updateItem([Status.ACTIVE]);
             // emit loaded event when component is fully loaded
             this.itemLoaded.emit();
             new MutationObserver(mutationsList => {
-                if (mutationsList.some(mutation => mutation.attributeName === 'hidden'))
+                if (mutationsList.some(mutation => ['hidden', 'status'].includes(mutation.attributeName)))
                     this.updateStatus(this.hasChildren ? undefined : [Status.ACTIVE]);
                 if (mutationsList.some(mutation => mutation.type === 'characterData'))
-                    this.validateSlot();
-                this.updateDisplayNotificationBadge();
+                    this.updateSlot();
+                if (mutationsList.some(mutation => mutation.type === 'childList'))
+                    this.updateItem();
                 this.itemUpdated.emit();
             }).observe(this.element, { attributes: true, childList: true, characterData: true, subtree: true });
         }, 0);
     }
+    /**
+     * Emit event when component is updated
+     * @returns promise process wich emit the 'item-updated' event
+     */
+    componentShouldUpdate() {
+        return nextTick(() => {
+            this.itemUpdated.emit();
+        });
+    }
     /**
      * Render ineractive element
      * @returns HTML Element
@@ -292,15 +342,6 @@ export class MgMenuItem {
                 [`${this.navigationButton}-chevron--rotate`]: this.expanded === true,
             } }, h("mg-icon", { icon: "chevron-down" })))));
     }
-    /**
-     * Emit event when component is updated
-     * @returns promise process wich emit the 'item-updated' event
-     */
-    componentShouldUpdate() {
-        return nextTick(() => {
-            this.itemUpdated.emit();
-        });
-    }
     /**
      * Render
      * @returns HTML Element
@@ -310,7 +351,7 @@ export class MgMenuItem {
             ['mg-c-menu-item__collapse-container']: true,
             ['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu || this.isItemMore) && this.isDirection(Direction.HORIZONTAL),
         });
-        return (h(Host, { key: '0705617f39133b4da491c150f4984cc57cafe085', role: this.isItemMore ? 'presentation' : 'listitem' }, this.displayPopover() ? (h("mg-popover", { display: this.expanded, placement: "bottom-start", arrowHide: true, "onDisplay-change": this.handlePopoverDisplay, identifier: this.getPopoverIdentifier(), "data-fallback-placement": "bottom-end" // use for the last element of the menu if it is placed on the right side
+        return (h(Host, { key: '1bfbcc26638508e5fff8d0a9b0bd1956e06cb9ae', role: this.isItemMore ? 'presentation' : 'listitem' }, this.hasPopover() ? (h("mg-popover", { display: this.expanded, placement: "bottom-start", arrowHide: true, "onDisplay-change": this.handlePopoverDisplay, identifier: this.popoverIdentifier, "data-fallback-placement": "bottom-end" // use for the last element of the menu if it is placed on the right side
         }, this.renderInteractiveElement(), h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
             this.renderInteractiveElement(),
             h("div", { key: "vertical-container", class: getContainerClasses(), hidden: !this.expanded }, this.renderSlot()),
@@ -344,6 +385,8 @@ export class MgMenuItem {
                     "tags": [],
                     "text": "Identifier is used to control mg-popover"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "identifier",
                 "reflect": true,
                 "defaultValue": "createID('mg-menu-item')"
@@ -362,6 +405,8 @@ export class MgMenuItem {
                     "tags": [],
                     "text": "Define menu-item href\nwhen defined menu-item contain an anchor instead of button"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "href",
                 "reflect": false
             },
@@ -385,6 +430,8 @@ export class MgMenuItem {
                     "tags": [],
                     "text": "Define target type"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "target",
                 "reflect": false
             },
@@ -408,6 +455,8 @@ export class MgMenuItem {
                     "tags": [],
                     "text": "Define menu-item status."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "status",
                 "reflect": true,
                 "defaultValue": "Status.VISIBLE"
@@ -426,6 +475,8 @@ export class MgMenuItem {
                     "tags": [],
                     "text": "Define menu-item content expanded."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "expanded",
                 "reflect": false,
                 "defaultValue": "false"
@@ -445,26 +496,6 @@ export class MgMenuItem {
     }
     static get events() {
         return [{
-                "method": "statusChange",
-                "name": "status-change",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emited event when status change"
-                },
-                "complexType": {
-                    "original": "HTMLMgMenuItemElement['status']",
-                    "resolved": "\"active\" | \"disabled\" | \"hidden\" | \"visible\"",
-                    "references": {
-                        "HTMLMgMenuItemElement": {
-                            "location": "global",
-                            "id": "global::HTMLMgMenuItemElement"
-                        }
-                    }
-                }
-            }, {
                 "method": "itemLoaded",
                 "name": "item-loaded",
                 "bubbles": true,
@@ -506,19 +537,25 @@ export class MgMenuItem {
                 "methodName": "watchTarget"
             }, {
                 "propName": "status",
-                "methodName": "validateStatus"
+                "methodName": "watchStatus"
             }, {
                 "propName": "expanded",
-                "methodName": "validateExpanded"
+                "methodName": "watchExpanded"
             }, {
                 "propName": "size",
-                "methodName": "validateSize"
+                "methodName": "watchSize"
             }, {
                 "propName": "direction",
                 "methodName": "validateDirection"
             }, {
                 "propName": "hasChildren",
                 "methodName": "validateHasChildren"
+            }, {
+                "propName": "data-style-direction",
+                "methodName": "watchDataStyleDirection"
+            }, {
+                "propName": "data-has-focus",
+                "methodName": "watchDataHasFocus"
             }];
     }
 }