@mgdis/mg-components 5.26.0 → 5.27.1

package/dist/collection/components/molecules/inputs/mg-input-toggle/mg-input-toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"mg-input-toggle.js","sourceRoot":"","sources":["../../../../../src/components/molecules/inputs/mg-input-toggle/mg-input-toggle.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { Component, Event, h, Prop, EventEmitter, State, Watch, Element, Method } from '@stencil/core';\nimport { MgInput } from '../MgInput';\nimport { ClassList, allItemsAreString, isValidString } from '@mgdis/stencil-helpers';\nimport { ToggleValue } from './mg-input-toggle.conf';\nimport { type TooltipPosition } from '../MgInput.conf';\n\n/**\n * type Option validation function\n * @param option - radio option\n * @returns toggle option type is valid\n */\nconst isOption = (option: unknown): option is ToggleValue =>\n  typeof option === 'object' && typeof (option as ToggleValue).title === 'string' && (option as ToggleValue).value !== undefined;\n\n@Component({\n  tag: 'mg-input-toggle',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-toggle.css',\n  shadow: true,\n})\nexport class MgInputToggle {\n  /************\n   * Internal *\n   ************/\n\n  // Classes\n  private classDisabled = 'mg-c-input--toggle-disabled';\n  private classIsActive = 'mg-c-input--toggle-is-active';\n  private classOnOff = 'mg-c-input--toggle-on-off';\n  private classIcon = 'mg-c-input--toggle-icon';\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgInputToggleElement;\n\n  /**\n   * Component value\n   */\n  @Prop({ mutable: true }) value: any;\n  @Watch('value')\n  handleValue(newValue: any): void {\n    // Swich to the right option\n    this.setChecked();\n    // Emit value-change event\n    this.valueChange.emit(newValue);\n  }\n\n  /**\n   * Items are the possible options to select\n   */\n  @Prop() items!: string[] | ToggleValue[];\n  @Watch('items')\n  validateItems(newValue: MgInputToggle['items']): void {\n    if (typeof newValue === 'object' && this.items.length !== 2) {\n      throw new Error('<mg-input-toggle> prop \"items\" require 2 items.');\n    }\n    // String array\n    else if (allItemsAreString(newValue)) {\n      this.options = newValue.map(item => ({ title: item, value: item }));\n    }\n    // Object array\n    else if (Array.isArray(newValue) && newValue.every(isOption)) {\n      this.options = newValue;\n    } else {\n      throw new Error('<mg-input-toggle> prop \"items\" is required and all items must be the same type: ToggleValue.');\n    }\n  }\n\n  /**\n   * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n   */\n  @Prop() identifier!: string;\n\n  /**\n   * Input name\n   * If not set the value equals the identifier\n   */\n  @Prop() name: string = this.identifier;\n\n  /**\n   * Input label\n   */\n  @Prop() label!: string;\n\n  /**\n   * Define if label is displayed on top\n   */\n  @Prop() labelOnTop: boolean;\n\n  /**\n   * Define if label is visible\n   */\n  @Prop() labelHide = false;\n\n  /**\n   * Define if toggle have on/off style\n   */\n  @Prop() isOnOff = false;\n  @Watch('isOnOff')\n  handleIsOnOff(newValue: MgInputToggle['isOnOff']): void {\n    if (newValue) this.classCollection.add(this.classOnOff);\n    else this.classCollection.delete(this.classOnOff);\n  }\n\n  /**\n   * Define if toggle display icon\n   */\n  @Prop() isIcon = false;\n  @Watch('isIcon')\n  handleIsIcon(newValue: MgInputToggle['isIcon']): void {\n    if (newValue) this.classCollection.add(this.classIcon);\n    else this.classCollection.delete(this.classIcon);\n  }\n\n  /**\n   * Define if input is readonly\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Define if input is disabled\n   */\n  @Prop() disabled = false;\n  @Watch('disabled')\n  handleDisabled(newValue: MgInputToggle['disabled']): void {\n    if (newValue) this.classCollection.add(this.classDisabled);\n    else this.classCollection.delete(this.classDisabled);\n  }\n\n  /**\n   * Add a tooltip message next to the input\n   */\n  @Prop() tooltip: string;\n\n  /**\n   * Define tooltip position\n   */\n  @Prop() tooltipPosition: TooltipPosition = 'input';\n\n  /**\n   * Add a help text under the input, usually expected data format and example\n   */\n  @Prop() helpText: string;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-input--toggle']);\n\n  /**\n   * Formated items for display\n   */\n  @State() options: ToggleValue[];\n\n  /**\n   * Error message to display\n   */\n  @State() errorMessage: string;\n\n  /**\n   * Define input valid state\n   */\n  @State() valid: boolean;\n\n  /**\n   * Checked internal value\n   */\n  @State() checked = false;\n  @Watch('checked')\n  handleChecked(newValue: MgInputToggle['checked']): void {\n    // style\n    if (newValue) this.classCollection.add(this.classIsActive);\n    else this.classCollection.delete(this.classIsActive);\n\n    // update value\n    this.value = this.getCheckedItem(newValue).value;\n  }\n\n  /**\n   * Emited event when value change\n   */\n  @Event({ eventName: 'value-change' }) valueChange: EventEmitter<HTMLMgInputToggleElement['value']>;\n\n  /**\n   * Emited event when checking validity\n   */\n  @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<boolean>;\n\n  /**\n   * Set an error and display a custom error message.\n   * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\n   * It must be paired with an error message to display for the given context.\n   * When used to set validity to `false`, you should use this method again to reset the validity to `true`.\n   * @param valid - value indicating the validity\n   * @param errorMessage - the error message to display\n   */\n  @Method()\n  async setError(valid: boolean, errorMessage: string): Promise<void> {\n    if (typeof valid !== 'boolean') {\n      throw new Error('<mg-input-toggle> method \"setError()\" param \"valid\" must be a boolean');\n    } else if (!isValidString(errorMessage)) {\n      throw new Error('<mg-input-toggle> method \"setError()\" param \"errorMessage\" must be a string');\n    } else {\n      this.valid = valid;\n      this.inputValid.emit(valid);\n      this.setErrorMessage(valid ? undefined : errorMessage);\n    }\n  }\n\n  /**\n   * Set input error message\n   * @param errorMessage - errorMessage override\n   */\n  private setErrorMessage = (errorMessage?: string): void => {\n    // Set error message\n    this.errorMessage = undefined;\n    // Does have a custom error message\n    if (!this.valid && errorMessage !== undefined) {\n      this.errorMessage = errorMessage;\n    }\n  };\n\n  /**\n   * Change checked value\n   */\n  private toggleChecked = (): void => {\n    this.checked = !this.checked;\n  };\n\n  /**\n   * Slots validation\n   */\n  private validateSlots = (): void => {\n    const slots = Array.from(this.element.children);\n    if (slots.length !== 2) {\n      throw new Error('<mg-input-toggle> 2 slots are required.');\n    } else if (!this.isIcon) {\n      // Due to text-overflow set to ellipsis\n      // we need to ensure that slot element have title to display value on mouse over\n      slots.forEach(slot => slot.setAttribute('title', slot.textContent));\n    }\n  };\n\n  /**\n   * Get checked item\n   * @param checked\n   * @returns toggle value\n   */\n  private getCheckedItem = (checked: MgInputToggle['checked']): ToggleValue => {\n    if (this.options?.length === 2) {\n      return this.options[checked ? 1 : 0];\n    } else {\n      return null;\n    }\n  };\n  /**\n   * set checked state\n   */\n  private setChecked(): void {\n    const optionTrueValueIndex = this.options.map(option => option.value).findIndex(value => value === true);\n\n    if ([0, 1].includes(optionTrueValueIndex)) {\n      // has \"value\" props type is not a boolean, it is bind/render as an attributes/props\n      // true props will be represent by \"true\" string so we convert it has boolean\n      // true attribute will be represent by \"\" string so we convert it has boolean\n      // https://stenciljs.com/docs/properties\n      if (['', 'true'].includes(this.value as string) && this.options.find(option => option.value) !== undefined) {\n        this.value = true;\n      }\n\n      // when options are boolean values and ordered as [true,false] instead [false,true]\n      // we need to reversed the checked value logic\n      const selectedValue = this.value === this.options[optionTrueValueIndex].value;\n      this.checked = optionTrueValueIndex === 0 ? !selectedValue : selectedValue;\n    } else {\n      this.checked = this.value === this.options[1].value;\n    }\n  }\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Check items format\n    this.validateItems(this.items);\n    // Check slots\n    this.validateSlots();\n    // init checked value\n    this.setChecked();\n    // apply handler\n    this.handleIsOnOff(this.isOnOff);\n    this.handleIsIcon(this.isIcon);\n    this.handleDisabled(this.disabled);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <MgInput\n        identifier={this.identifier}\n        classCollection={this.classCollection}\n        ariaDescribedbyIDs={[]}\n        label={this.label}\n        labelOnTop={this.labelOnTop}\n        labelHide={this.labelHide}\n        required={undefined}\n        readonly={this.readonly}\n        mgWidth={undefined}\n        disabled={this.disabled}\n        value={this.value?.toString()}\n        readonlyValue={this.getCheckedItem(this.checked)?.title}\n        tooltip={!this.readonly && this.tooltip}\n        tooltipPosition={this.tooltipPosition}\n        helpText={this.helpText}\n        errorMessage={this.errorMessage}\n        isFieldset={false}\n      >\n        <button\n          type=\"button\"\n          role=\"switch\"\n          aria-checked={this.checked.toString()}\n          aria-readonly={this.disabled || this.readonly}\n          id={this.identifier}\n          class=\"mg-c-input__button-toggle\"\n          disabled={this.disabled || this.readonly}\n          onClick={this.toggleChecked}\n        >\n          <span aria-hidden=\"true\" class=\"mg-c-input__toggle-item-container\">\n            <slot name=\"item-1\"></slot>\n          </span>\n          <span aria-hidden=\"true\" class=\"mg-c-input__toggle-item-container\">\n            <slot name=\"item-2\"></slot>\n          </span>\n        </button>\n      </MgInput>\n    );\n  }\n}\n"]}
+{"version":3,"file":"mg-input-toggle.js","sourceRoot":"","sources":["../../../../../src/components/molecules/inputs/mg-input-toggle/mg-input-toggle.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { Component, Event, h, Prop, EventEmitter, State, Watch, Element, Method } from '@stencil/core';\nimport { ClassList, allItemsAreString, isValidString } from '@mgdis/stencil-helpers';\nimport { ToggleValue } from './mg-input-toggle.conf';\nimport { classDisabled, classReadonly, type TooltipPosition } from '../mg-input/mg-input.conf';\n\n/**\n * type Option validation function\n * @param option - radio option\n * @returns toggle option type is valid\n */\nconst isOption = (option: unknown): option is ToggleValue =>\n  typeof option === 'object' && typeof (option as ToggleValue).title === 'string' && (option as ToggleValue).value !== undefined;\n\n/**\n * @slot item-1 - Left option toggle content\n * @slot item-2 - Right option toggle content\n */\n@Component({\n  tag: 'mg-input-toggle',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-toggle.css',\n  shadow: true,\n})\nexport class MgInputToggle {\n  /************\n   * Internal *\n   ************/\n\n  // Classes\n  private readonly classIsActive = 'mg-c-input--toggle-is-active';\n  private readonly classOnOff = 'mg-c-input--toggle-on-off';\n  private readonly classIcon = 'mg-c-input--toggle-icon';\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgInputToggleElement;\n\n  /**\n   * Component value\n   */\n  @Prop({ mutable: true }) value: any;\n  @Watch('value')\n  handleValue(newValue: any): void {\n    // Swich to the right option\n    this.setChecked();\n    // Emit value-change event\n    this.valueChange.emit(newValue);\n  }\n\n  /**\n   * Items are the possible options to select\n   */\n  @Prop() items!: string[] | ToggleValue[];\n  @Watch('items')\n  validateItems(newValue: MgInputToggle['items']): void {\n    if (typeof newValue === 'object' && this.items.length !== 2) {\n      throw new Error('<mg-input-toggle> prop \"items\" require 2 items.');\n    }\n    // String array\n    else if (allItemsAreString(newValue)) {\n      this.options = newValue.map(item => ({ title: item, value: item }));\n    }\n    // Object array\n    else if (Array.isArray(newValue) && newValue.every(isOption)) {\n      this.options = newValue;\n    } else {\n      throw new Error('<mg-input-toggle> prop \"items\" is required and all items must be the same type: ToggleValue.');\n    }\n  }\n\n  /**\n   * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n   */\n  @Prop() identifier!: string;\n\n  /**\n   * Input name\n   * If not set the value equals the identifier\n   */\n  @Prop() name: string = this.identifier;\n\n  /**\n   * Input label\n   */\n  @Prop() label!: string;\n\n  /**\n   * Define if label is displayed on top\n   */\n  @Prop() labelOnTop?: boolean;\n\n  /**\n   * Define if label is visible\n   */\n  @Prop() labelHide = false;\n\n  /**\n   * Define if toggle have on/off style\n   */\n  @Prop() isOnOff = false;\n  @Watch('isOnOff')\n  watchIsOnOff(newValue: MgInputToggle['isOnOff']): void {\n    if (newValue) this.classCollection.add(this.classOnOff);\n    else this.classCollection.delete(this.classOnOff);\n  }\n\n  /**\n   * Define if toggle display icon\n   */\n  @Prop() isIcon = false;\n  @Watch('isIcon')\n  watchIsIcon(newValue: MgInputToggle['isIcon']): void {\n    if (newValue) this.classCollection.add(this.classIcon);\n    else this.classCollection.delete(this.classIcon);\n  }\n\n  /**\n   * Define if input is readonly\n   */\n  @Prop() readonly = false;\n  @Watch('readonly')\n  watchReadonly(newValue: MgInputToggle['readonly']): void {\n    if (newValue) this.classCollection.add(classReadonly);\n    else this.classCollection.delete(classReadonly);\n  }\n\n  /**\n   * Define if input is disabled\n   */\n  @Prop() disabled = false;\n  @Watch('disabled')\n  watchDisabled(newValue: MgInputToggle['disabled']): void {\n    if (newValue) this.classCollection.add(classDisabled);\n    else this.classCollection.delete(classDisabled);\n  }\n\n  /**\n   * Add a tooltip message next to the input\n   */\n  @Prop() tooltip?: string;\n\n  /**\n   * Define tooltip position\n   */\n  @Prop() tooltipPosition: TooltipPosition = 'input';\n\n  /**\n   * Add a help text under the input, usually expected data format and example\n   */\n  @Prop() helpText?: string;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-input--toggle']);\n\n  /**\n   * Formated items for display\n   */\n  @State() options: ToggleValue[];\n\n  /**\n   * Error message to display\n   */\n  @State() errorMessage: string;\n\n  /**\n   * Define input valid state\n   */\n  @State() valid: boolean;\n\n  /**\n   * Checked internal value\n   */\n  @State() checked = false;\n  @Watch('checked')\n  handleChecked(newValue: MgInputToggle['checked']): void {\n    // style\n    if (newValue) this.classCollection.add(this.classIsActive);\n    else this.classCollection.delete(this.classIsActive);\n\n    // update value\n    this.value = this.getCheckedItem(newValue).value;\n  }\n\n  /**\n   * Emited event when value change\n   */\n  @Event({ eventName: 'value-change' }) valueChange: EventEmitter<HTMLMgInputToggleElement['value']>;\n\n  /**\n   * Emited event when checking validity\n   */\n  @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<boolean>;\n\n  /**\n   * Set an error and display a custom error message.\n   * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\n   * It must be paired with an error message to display for the given context.\n   * When used to set validity to `false`, you should use this method again to reset the validity to `true`.\n   * @param valid - value indicating the validity\n   * @param errorMessage - the error message to display\n   */\n  @Method()\n  async setError(valid: boolean, errorMessage: string): Promise<void> {\n    if (typeof valid !== 'boolean') {\n      throw new Error('<mg-input-toggle> method \"setError()\" param \"valid\" must be a boolean');\n    } else if (!isValidString(errorMessage)) {\n      throw new Error('<mg-input-toggle> method \"setError()\" param \"errorMessage\" must be a string');\n    } else {\n      this.valid = valid;\n      this.inputValid.emit(valid);\n      this.setErrorMessage(valid ? undefined : errorMessage);\n    }\n  }\n\n  /**\n   * Set input error message\n   * @param errorMessage - errorMessage override\n   */\n  private setErrorMessage = (errorMessage?: string): void => {\n    // Set error message\n    this.errorMessage = undefined;\n    // Does have a custom error message\n    if (!this.valid && errorMessage !== undefined) {\n      this.errorMessage = errorMessage;\n    }\n  };\n\n  /**\n   * Change checked value\n   */\n  private toggleChecked = (): void => {\n    this.checked = !this.checked;\n  };\n\n  /**\n   * Slots validation\n   */\n  private validateSlots = (): void => {\n    const slots = Array.from(this.element.children);\n    if (slots.length !== 2) {\n      throw new Error('<mg-input-toggle> 2 slots are required.');\n    } else if (!this.isIcon) {\n      // Due to text-overflow set to ellipsis\n      // we need to ensure that slot element have title to display value on mouse over\n      slots.forEach(slot => slot.setAttribute('title', slot.textContent));\n    }\n  };\n\n  /**\n   * Get checked item\n   * @param checked - checked item\n   * @returns toggle value\n   */\n  private getCheckedItem = (checked: MgInputToggle['checked']): ToggleValue => {\n    if (this.options?.length === 2) {\n      return this.options[checked ? 1 : 0];\n    } else {\n      return null;\n    }\n  };\n  /**\n   * set checked state\n   */\n  private setChecked(): void {\n    const optionTrueValueIndex = this.options.map(option => option.value).findIndex(value => value === true);\n\n    if ([0, 1].includes(optionTrueValueIndex)) {\n      // has \"value\" props type is not a boolean, it is bind/render as an attributes/props\n      // true props will be represent by \"true\" string so we convert it has boolean\n      // true attribute will be represent by \"\" string so we convert it has boolean\n      // https://stenciljs.com/docs/properties\n      if (['', 'true'].includes(this.value as string) && this.options.find(option => option.value) !== undefined) {\n        this.value = true;\n      }\n\n      // when options are boolean values and ordered as [true,false] instead [false,true]\n      // we need to reversed the checked value logic\n      const selectedValue = this.value === this.options[optionTrueValueIndex].value;\n      this.checked = optionTrueValueIndex === 0 ? !selectedValue : selectedValue;\n    } else {\n      this.checked = this.value === this.options[1].value;\n    }\n  }\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Check items format\n    this.validateItems(this.items);\n    // Check slots\n    this.validateSlots();\n    // init checked value\n    this.setChecked();\n    // apply handler\n    this.watchIsIcon(this.isIcon);\n    this.watchIsOnOff(this.isOnOff);\n    this.watchReadonly(this.readonly);\n    this.watchDisabled(this.disabled);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <mg-input\n        label={this.label}\n        helpText={this.helpText}\n        identifier={this.identifier}\n        class={this.classCollection.join()}\n        ariaDescribedbyIDs={[]}\n        labelOnTop={this.labelOnTop}\n        labelHide={this.labelHide}\n        required={undefined}\n        readonlyValue={this.getCheckedItem(this.checked)?.title}\n        tooltip={!this.readonly && this.tooltip}\n        tooltipPosition={this.tooltipPosition}\n        errorMessage={this.errorMessage}\n      >\n        <button\n          type=\"button\"\n          role=\"switch\"\n          aria-checked={this.checked.toString()}\n          aria-readonly={this.disabled || this.readonly}\n          id={this.identifier}\n          class=\"mg-c-input__button-toggle\"\n          disabled={this.disabled || this.readonly}\n          onClick={this.toggleChecked}\n        >\n          <span aria-hidden=\"true\" class=\"mg-c-input__toggle-item-container\">\n            <slot name=\"item-1\"></slot>\n          </span>\n          <span aria-hidden=\"true\" class=\"mg-c-input__toggle-item-container\">\n            <slot name=\"item-2\"></slot>\n          </span>\n        </button>\n      </mg-input>\n    );\n  }\n}\n"]}

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

@@ -1,5 +1,8 @@
 import { h, Host } from "@stencil/core";
 import { Direction, sizes } from "./mg-menu.conf";
+/**
+ * @slot - Menu content
+ */
 export class MgMenu {
     constructor() {
         /************
@@ -38,7 +41,7 @@ export class MgMenu {
          */
         this.setItemListener = (item, index) => {
             ['click', 'focus'].forEach(trigger => {
-                (item.shadowRoot.querySelector('button') || item.shadowRoot.querySelector('a')).addEventListener(trigger, () => {
+                item.shadowRoot.querySelector('button,a').addEventListener(trigger, () => {
                     this.focusedMenuItem = index;
                     // reset expanded on previous active menu item
                     (this.getItemMoreMenuItem() ? [...this.menuItems, this.getItemMoreMenuItem()] : this.menuItems).forEach((item, index) => {
@@ -66,13 +69,21 @@ export class MgMenu {
          * render mg-item-more
          */
         this.renderMgItemMore = () => {
+            if (this.direction !== Direction.HORIZONTAL || this.isChildMenu) {
+                return;
+            }
             // /!\ externalise item tag name to get a string type and bypass type checking when value is used in next createElement
             // by doing this we prevent stencil to generate a circular dependencies graph at build time with mg-item-more component.
-            const item = 'mg-item-more';
-            const mgItemMore = document.createElement(item);
-            Object.assign(mgItemMore, this.itemmore);
-            mgItemMore.addEventListener('item-loaded', this.handleItemLoaded);
-            this.element.appendChild(mgItemMore);
+            let mgItemMore = this.getItemMore();
+            if (!mgItemMore) {
+                mgItemMore = document.createElement('mg-item-more');
+                mgItemMore.addEventListener('item-loaded', this.handleItemLoaded);
+                Object.assign(mgItemMore, this.itemmore || {});
+                this.element.appendChild(mgItemMore);
+            }
+            else {
+                Object.defineProperties(mgItemMore, this.itemmore || {});
+            }
         };
         this.label = undefined;
         this.direction = Direction.HORIZONTAL;
@@ -125,22 +136,13 @@ export class MgMenu {
             this.menuItems = Array.from(this.element.children).filter(child => child.nodeName === 'MG-MENU-ITEM');
             this.isChildMenu = this.element.closest('mg-menu-item') !== null;
             // add mg-item-more to manage OverflowBehavior
-            if (this.direction === Direction.HORIZONTAL && !this.isChildMenu)
+            // when all props, states and DOM are already rendered we can render the mg-item-more
+            this.renderMgItemMore();
+            // then use mutation observer on children to improve reactivity
+            new MutationObserver(() => {
                 this.renderMgItemMore();
-            // use mutation observer to improve reactivity
-            new MutationObserver(entries => {
-                const mgItemMore = this.getItemMore();
-                // prevent infinit loop by exclude mg-item-more deletion entry
-                if (entries.some(entry => entry.type === 'childList' && Array.from(entry.removedNodes).some(node => node.nodeName === 'MG-ITEM-MORE')))
-                    return;
-                else if (mgItemMore !== null) {
-                    // render a new mg-item-more
-                    mgItemMore.remove();
-                    mgItemMore.removeEventListener('item-loaded', this.handleItemLoaded);
-                    this.renderMgItemMore();
-                }
-            }).observe(this.element, { childList: true, characterData: true, subtree: true });
-        }, 0);
+            }).observe(this.element, { childList: true });
+        });
     }
     /**
      * Add listeners to items
@@ -153,7 +155,7 @@ export class MgMenu {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: '22c0f16663ac432526aef9d0ec1c3d9152b8ca3a', role: "list", "aria-label": this.label }, h("slot", { key: 'de77bd6471725518cf14b9a75fb513a3d65a8033' })));
+        return (h(Host, { key: 'cf7e1a8ea713af4019295c4147d3023223fc8a79', role: "list", "aria-label": this.label }, h("slot", { key: 'dcb316d5c13b3b01bfd0c7b891cbd3728a37fa11' })));
     }
     static get is() { return "mg-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -215,7 +217,7 @@ export class MgMenu {
                 "mutable": false,
                 "complexType": {
                     "original": "ItemMoreType",
-                    "resolved": "{ size: \"regular\" | \"medium\" | \"large\"; icon: IconType; slotlabel: SlotLabelType; }",
+                    "resolved": "{ size?: \"regular\" | \"medium\" | \"large\"; icon?: IconType; slotlabel?: SlotLabelType; }",
                     "references": {
                         "ItemMoreType": {
                             "location": "import",
@@ -225,7 +227,7 @@ export class MgMenu {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Customize \"mg-item-more\" element\nUsed with direction: 'vertical' to manage overflow"

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":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAChF,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAQlD,MAAM,OAAO,MAAM;;QACjB;;sBAEc;QAEG,SAAI,GAAG,SAAS,CAAC;QAC1B,cAAS,GAA4B,EAAE,CAAC;QACxC,oBAAe,GAAG,CAAC,CAAC;QA8D5B;;uBAEe;QAEf;;;;WAIG;QACK,kBAAa,GAAG,CAAC,IAA2B,EAAE,SAAkB,EAAQ,EAAE;YAChF,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,SAAS,EAAE,CAAC;gBACnC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACxB,CAAC;QACH,CAAC,CAAC;QAEF;;;WAGG;QACK,gBAAW,GAAG,GAA0B,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QAE9F;;;WAGG;QACK,wBAAmB,GAAG,GAA0B,EAAE,eAAC,OAAA,MAAA,MAAA,IAAI,CAAC,WAAW,EAAE,0CAAE,UAAU,0CAAE,aAAa,CAAC,cAAc,CAAC,CAAA,EAAA,CAAC;QAEzH;;;;WAIG;QACK,oBAAe,GAAG,CAAC,IAA2B,EAAE,KAAgC,EAAQ,EAAE;YAChG,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;gBACnC,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;oBAC7G,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;oBAC7B,8CAA8C;oBAC9C,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;wBACtH,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,KAAK,KAAK,IAAI,CAAC,eAAe,CAAC,CAAC;oBAC3D,CAAC,CAAC,CAAC;gBACL,CAAC,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QAEF;;WAEG;QACK,2BAAsB,GAAG,GAAS,EAAE;YAC1C,4CAA4C;YAC5C,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;gBACrC,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;YACpC,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QAEF;;WAEG;QACK,qBAAgB,GAAG,GAAS,EAAE;YACpC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,mBAAmB,EAAE,EAAE,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;QAC1E,CAAC,CAAC;QAEF;;WAEG;QACK,qBAAgB,GAAG,GAAS,EAAE;YACpC,uHAAuH;YACvH,wHAAwH;YACxH,MAAM,IAAI,GAAG,cAAc,CAAC;YAC5B,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;YAChD,MAAM,CAAC,MAAM,CAAC,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;YACzC,UAAU,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;YAClE,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;QACvC,CAAC,CAAC;;yBA5G8C,SAAS,CAAC,UAAU;;oBAuBvC,SAAS;;;IAhCtC,aAAa,CAAC,QAAyB;QACrC,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;YAC3B,MAAM,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,6BAA6B,CAAC,CAAC;QAC9D,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,GAAG,CAAC,CAAC;QACrH,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;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,GAAG,CAAC,CAAC;QACrF,CAAC;IACH,CAAC;IAiFD;;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;;;OAGG;IACH,gBAAgB;QACd,sDAAsD;QACtD,iEAAiE;QACjE,mEAAmE;QACnE,OAAO,UAAU,CAAC,GAAG,EAAE;YACrB,uBAAuB;YACvB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,KAAK,cAAc,CAA4B,CAAC;YACjI,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;YAEjE,8CAA8C;YAC9C,IAAI,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,WAAW;gBAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAE1F,8CAA8C;YAC9C,IAAI,gBAAgB,CAAC,OAAO,CAAC,EAAE;gBAC7B,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;gBACtC,8DAA8D;gBAC9D,IAAI,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,KAAK,WAAW,IAAI,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,KAAK,cAAc,CAAC,CAAC;oBAAE,OAAO;qBAC1I,IAAI,UAAU,KAAK,IAAI,EAAE,CAAC;oBAC7B,4BAA4B;oBAC5B,UAAU,CAAC,MAAM,EAAE,CAAC;oBACpB,UAAU,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;oBACrE,IAAI,CAAC,gBAAgB,EAAE,CAAC;gBAC1B,CAAC;YACH,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACpF,CAAC,EAAE,CAAC,CAAC,CAAC;IACR,CAAC;IAED;;OAEG;IACH,kBAAkB;QAChB,IAAI,CAAC,sBAAsB,EAAE,CAAC;IAChC,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, State, Element, Watch, Host } from '@stencil/core';\nimport { Direction, sizes } from './mg-menu.conf';\nimport type { MenuSizeType, ItemMoreType } from './mg-menu.conf';\n\n@Component({\n  tag: 'mg-menu',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-menu.css',\n  shadow: true,\n})\nexport class MgMenu {\n  /************\n   * Internal *\n   ************/\n\n  private readonly name = 'mg-menu';\n  private menuItems: HTMLMgMenuItemElement[] = [];\n  private focusedMenuItem = 0;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgMenuElement;\n\n  /**\n   * Menu label. Include short menu description.\n   * Required for accessibility\n   */\n  @Prop() label!: string;\n  @Watch('label')\n  validateLabel(newValue: MgMenu['label']): void {\n    if (newValue === undefined) {\n      throw new Error(`<${this.name}> prop \"label\" is required.`);\n    }\n  }\n\n  /**\n   * Component display direction.\n   */\n  @Prop({ reflect: true }) direction: Direction = Direction.HORIZONTAL;\n  @Watch('direction')\n  validateDirection(newValue: MgMenu['direction']): void {\n    if (![Direction.VERTICAL, Direction.HORIZONTAL].includes(newValue)) {\n      throw new Error(`<${this.name}> prop \"direction\" must be one of: ${Direction.HORIZONTAL}, ${Direction.VERTICAL}.`);\n    }\n  }\n\n  /**\n   * Customize \"mg-item-more\" element\n   * Used with direction: 'vertical' to manage overflow\n   */\n  @Prop() itemmore: ItemMoreType;\n  @Watch('itemmore')\n  validateItemMore(newValue: MgMenu['itemmore']): void {\n    if (newValue !== undefined && this.direction !== Direction.HORIZONTAL) {\n      throw new Error(`<${this.name}> prop \"itemmore\" must be paired with direction ${Direction.HORIZONTAL}.`);\n    }\n  }\n\n  /**\n   * Define mg-menu size\n   */\n  @Prop() size: MenuSizeType = 'regular';\n  @Watch('size')\n  validateSize(newValue: MgMenu['size']): void {\n    if (!sizes.includes(newValue)) {\n      throw new Error(`<${this.name}> prop \"size\" must be one of: ${sizes.join(', ')}.`);\n    }\n  }\n\n  /**\n   * is this menu a child menu. Used for conditional render.\n   */\n  @State() isChildMenu: boolean;\n\n  /*************\n   * Methods *\n   *************/\n\n  /**\n   * Close matching menu-item\n   * @param item - menu-item to close\n   * @param condition - addionnal condition\n   */\n  private closeMenuItem = (item: HTMLMgMenuItemElement, condition: boolean): void => {\n    if (!this.isChildMenu && condition) {\n      item.expanded = false;\n    }\n  };\n\n  /**\n   * get mg-item-more element\n   * @returns mg-item-more element\n   */\n  private getItemMore = (): HTMLMgItemMoreElement => this.element.querySelector('mg-item-more');\n\n  /**\n   * get mg-item-more child mg-menu-item element\n   * @returns mg-menu-item element\n   */\n  private getItemMoreMenuItem = (): HTMLMgMenuItemElement => this.getItemMore()?.shadowRoot?.querySelector('mg-menu-item');\n\n  /**\n   * Set item listend\n   * @param item - mg-menu-item element\n   * @param index - number\n   */\n  private setItemListener = (item: HTMLMgMenuItemElement, index: MgMenu['focusedMenuItem']): void => {\n    ['click', 'focus'].forEach(trigger => {\n      (item.shadowRoot.querySelector('button') || item.shadowRoot.querySelector('a')).addEventListener(trigger, () => {\n        this.focusedMenuItem = index;\n        // reset expanded on previous active menu item\n        (this.getItemMoreMenuItem() ? [...this.menuItems, this.getItemMoreMenuItem()] : this.menuItems).forEach((item, index) => {\n          this.closeMenuItem(item, index !== this.focusedMenuItem);\n        });\n      });\n    });\n  };\n\n  /**\n   * Store menu-items on component init and add listeners\n   */\n  private initMenuItemsListeners = (): void => {\n    // add listeners on menu item and edit index\n    this.menuItems.forEach((item, index) => {\n      this.setItemListener(item, index);\n    });\n  };\n\n  /**\n   * Handle item-loaded event on mg-item-more element\n   */\n  private handleItemLoaded = (): void => {\n    this.setItemListener(this.getItemMoreMenuItem(), this.menuItems.length);\n  };\n\n  /**\n   * render mg-item-more\n   */\n  private renderMgItemMore = (): void => {\n    // /!\\ externalise item tag name to get a string type and bypass type checking when value is used in next createElement\n    // by doing this we prevent stencil to generate a circular dependencies graph at build time with mg-item-more component.\n    const item = 'mg-item-more';\n    const mgItemMore = document.createElement(item);\n    Object.assign(mgItemMore, this.itemmore);\n    mgItemMore.addEventListener('item-loaded', this.handleItemLoaded);\n    this.element.appendChild(mgItemMore);\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Validate props\n   */\n  componentWillLoad(): void {\n    this.validateDirection(this.direction);\n    this.validateLabel(this.label);\n    this.validateItemMore(this.itemmore);\n    this.validateSize(this.size);\n  }\n\n  /**\n   * Check if component slots configuration\n   * @returns timeout\n   */\n  componentDidLoad(): ReturnType<typeof setTimeout> {\n    // update props and states after componentDidLoad hook\n    // return a promise to process action only in the FIRST render().\n    // https://stenciljs.com/docs/component-lifecycle#componentwillload\n    return setTimeout(() => {\n      // store all menu-items\n      this.menuItems = Array.from(this.element.children).filter(child => child.nodeName === 'MG-MENU-ITEM') as HTMLMgMenuItemElement[];\n      this.isChildMenu = this.element.closest('mg-menu-item') !== null;\n\n      // add mg-item-more to manage OverflowBehavior\n      if (this.direction === Direction.HORIZONTAL && !this.isChildMenu) this.renderMgItemMore();\n\n      // use mutation observer to improve reactivity\n      new MutationObserver(entries => {\n        const mgItemMore = this.getItemMore();\n        // prevent infinit loop by exclude mg-item-more deletion entry\n        if (entries.some(entry => entry.type === 'childList' && Array.from(entry.removedNodes).some(node => node.nodeName === 'MG-ITEM-MORE'))) return;\n        else if (mgItemMore !== null) {\n          // render a new mg-item-more\n          mgItemMore.remove();\n          mgItemMore.removeEventListener('item-loaded', this.handleItemLoaded);\n          this.renderMgItemMore();\n        }\n      }).observe(this.element, { childList: true, characterData: true, subtree: true });\n    }, 0);\n  }\n\n  /**\n   * Add listeners to items\n   */\n  componentDidRender(): void {\n    this.initMenuItemsListeners();\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <Host role=\"list\" aria-label={this.label}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"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 } from './mg-menu.conf';\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\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgMenuElement;\n\n  /**\n   * Menu label. Include short menu description.\n   * Required for accessibility\n   */\n  @Prop() label!: string;\n  @Watch('label')\n  validateLabel(newValue: MgMenu['label']): void {\n    if (newValue === undefined) {\n      throw new Error(`<${this.name}> prop \"label\" is required.`);\n    }\n  }\n\n  /**\n   * Component display direction.\n   */\n  @Prop({ reflect: true }) direction: Direction = Direction.HORIZONTAL;\n  @Watch('direction')\n  validateDirection(newValue: MgMenu['direction']): void {\n    if (![Direction.VERTICAL, Direction.HORIZONTAL].includes(newValue)) {\n      throw new Error(`<${this.name}> prop \"direction\" must be one of: ${Direction.HORIZONTAL}, ${Direction.VERTICAL}.`);\n    }\n  }\n\n  /**\n   * Customize \"mg-item-more\" element\n   * Used with direction: 'vertical' to manage overflow\n   */\n  @Prop() itemmore?: ItemMoreType;\n  @Watch('itemmore')\n  validateItemMore(newValue: MgMenu['itemmore']): void {\n    if (newValue !== undefined && this.direction !== Direction.HORIZONTAL) {\n      throw new Error(`<${this.name}> prop \"itemmore\" must be paired with direction ${Direction.HORIZONTAL}.`);\n    }\n  }\n\n  /**\n   * Define mg-menu size\n   */\n  @Prop() size: MenuSizeType = 'regular';\n  @Watch('size')\n  validateSize(newValue: MgMenu['size']): void {\n    if (!sizes.includes(newValue)) {\n      throw new Error(`<${this.name}> prop \"size\" must be one of: ${sizes.join(', ')}.`);\n    }\n  }\n\n  /**\n   * is this menu a child menu. Used for conditional render.\n   */\n  @State() isChildMenu: boolean;\n\n  /*************\n   * Methods *\n   *************/\n\n  /**\n   * Close matching menu-item\n   * @param item - menu-item to close\n   * @param condition - addionnal condition\n   */\n  private closeMenuItem = (item: HTMLMgMenuItemElement, condition: boolean): void => {\n    if (!this.isChildMenu && condition) {\n      item.expanded = false;\n    }\n  };\n\n  /**\n   * get mg-item-more element\n   * @returns mg-item-more element\n   */\n  private getItemMore = (): HTMLMgItemMoreElement => this.element.querySelector('mg-item-more');\n\n  /**\n   * get mg-item-more child mg-menu-item element\n   * @returns mg-menu-item element\n   */\n  private getItemMoreMenuItem = (): HTMLMgMenuItemElement => this.getItemMore()?.shadowRoot?.querySelector('mg-menu-item');\n\n  /**\n   * Set item listend\n   * @param item - mg-menu-item element\n   * @param index - number\n   */\n  private setItemListener = (item: HTMLMgMenuItemElement, index: MgMenu['focusedMenuItem']): void => {\n    ['click', 'focus'].forEach(trigger => {\n      item.shadowRoot.querySelector('button,a').addEventListener(trigger, () => {\n        this.focusedMenuItem = index;\n        // reset expanded on previous active menu item\n        (this.getItemMoreMenuItem() ? [...this.menuItems, this.getItemMoreMenuItem()] : this.menuItems).forEach((item, index) => {\n          this.closeMenuItem(item, index !== this.focusedMenuItem);\n        });\n      });\n    });\n  };\n\n  /**\n   * Store menu-items on component init and add listeners\n   */\n  private initMenuItemsListeners = (): void => {\n    // add listeners on menu item and edit index\n    this.menuItems.forEach((item, index) => {\n      this.setItemListener(item, index);\n    });\n  };\n\n  /**\n   * Handle item-loaded event on mg-item-more element\n   */\n  private handleItemLoaded = (): void => {\n    this.setItemListener(this.getItemMoreMenuItem(), this.menuItems.length);\n  };\n\n  /**\n   * render mg-item-more\n   */\n  private renderMgItemMore = (): void => {\n    if (this.direction !== Direction.HORIZONTAL || this.isChildMenu) {\n      return;\n    }\n\n    // /!\\ externalise item tag name to get a string type and bypass type checking when value is used in next createElement\n    // by doing this we prevent stencil to generate a circular dependencies graph at build time with mg-item-more component.\n    let mgItemMore = this.getItemMore();\n    if (!mgItemMore) {\n      mgItemMore = document.createElement('mg-item-more');\n      mgItemMore.addEventListener('item-loaded', this.handleItemLoaded);\n      Object.assign(mgItemMore, this.itemmore || {});\n      this.element.appendChild(mgItemMore);\n    } else {\n      Object.defineProperties(mgItemMore, this.itemmore || {});\n    }\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"]}

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

@@ -16,4 +16,8 @@ export var Status;
     Status["DISABLED"] = "disabled";
     Status["ACTIVE"] = "active";
 })(Status || (Status = {}));
+/**
+ * List of all possibles target
+ */
+export const targets = ['_blank', '_self', '_parent', '_top'];
 //# sourceMappingURL=mg-menu-item.conf.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"mg-menu-item.conf.js","sourceRoot":"","sources":["../../../../../src/components/molecules/menu/mg-menu-item/mg-menu-item.conf.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,CAAN,IAAY,eAGX;AAHD,WAAY,eAAe;IACzB,kCAAe,CAAA;IACf,gCAAa,CAAA;AACf,CAAC,EAHW,eAAe,KAAf,eAAe,QAG1B;AAED;;GAEG;AACH,MAAM,CAAN,IAAY,MAKX;AALD,WAAY,MAAM;IAChB,6BAAmB,CAAA;IACnB,2BAAiB,CAAA;IACjB,+BAAqB,CAAA;IACrB,2BAAiB,CAAA;AACnB,CAAC,EALW,MAAM,KAAN,MAAM,QAKjB","sourcesContent":["import { MgMenu } from '../mg-menu/mg-menu';\n\n/**\n * Available menu-item positions\n */\nexport enum ElementPosition {\n  FIRST = 'first',\n  LAST = 'last',\n}\n\n/**\n * Available menu item status\n */\nexport enum Status {\n  VISIBLE = 'visible',\n  HIDDEN = 'hidden',\n  DISABLED = 'disabled',\n  ACTIVE = 'active',\n}\n\n/**\n * Direction type\n */\nexport type DirectionType = MgMenu['direction'];\n"]}
+{"version":3,"file":"mg-menu-item.conf.js","sourceRoot":"","sources":["../../../../../src/components/molecules/menu/mg-menu-item/mg-menu-item.conf.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,CAAN,IAAY,eAGX;AAHD,WAAY,eAAe;IACzB,kCAAe,CAAA;IACf,gCAAa,CAAA;AACf,CAAC,EAHW,eAAe,KAAf,eAAe,QAG1B;AAED;;GAEG;AACH,MAAM,CAAN,IAAY,MAKX;AALD,WAAY,MAAM;IAChB,6BAAmB,CAAA;IACnB,2BAAiB,CAAA;IACjB,+BAAqB,CAAA;IACrB,2BAAiB,CAAA;AACnB,CAAC,EALW,MAAM,KAAN,MAAM,QAKjB;AAOD;;GAEG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,CAAU,CAAC","sourcesContent":["import { MgMenu } from '../mg-menu/mg-menu';\n\n/**\n * Available menu-item positions\n */\nexport enum ElementPosition {\n  FIRST = 'first',\n  LAST = 'last',\n}\n\n/**\n * Available menu item status\n */\nexport enum Status {\n  VISIBLE = 'visible',\n  HIDDEN = 'hidden',\n  DISABLED = 'disabled',\n  ACTIVE = 'active',\n}\n\n/**\n * Direction type\n */\nexport type DirectionType = MgMenu['direction'];\n\n/**\n * List of all possibles target\n */\nexport const targets = ['_blank', '_self', '_parent', '_top'] as const;\n\n/**\n * VariantType type from link target\n */\nexport type TargetType = (typeof targets)[number];\n"]}

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

@@ -1,8 +1,15 @@
 import { h, Host } from "@stencil/core";
-import { ClassList, createID, isValidString } from "@mgdis/stencil-helpers";
+import { ClassList, createID, isValidString, nextTick } from "@mgdis/stencil-helpers";
 import { initLocales } from "../../../../locales";
 import { Direction } from "../mg-menu/mg-menu.conf";
-import { Status } from "./mg-menu-item.conf";
+import { Status, targets } from "./mg-menu-item.conf";
+/**
+ * @slot - Menu item content
+ * @slot image - Menu item image content
+ * @slot label - Menu item label content
+ * @slot information - Menu item information content
+ * @slot metadata - Menu item metadata content
+ */
 export class MgMenuItem {
     constructor() {
         /************
@@ -133,6 +140,7 @@ export class MgMenuItem {
         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 = 'regular';
@@ -143,6 +151,11 @@ export class MgMenuItem {
         this.hasChildren = false;
         this.displayNotificationBadge = undefined;
     }
+    watchTarget(newValue) {
+        if (newValue && !targets.includes(newValue)) {
+            throw new Error(`<mg-link> prop "target" must be one of: ${targets.join(', ')}`);
+        }
+    }
     validateStatus(newValue, oldValue) {
         if (oldValue !== undefined) {
             this.navigationButtonClassList.delete(`${this.navigationButton}--${oldValue}`);
@@ -211,11 +224,12 @@ export class MgMenuItem {
         // has children items that is NOT [slot='image' | 'information' | 'label' | 'metadata'] element
         // we store only matching elements
         this.hasChildren = Array.from(this.element.children).some(child => !['image', 'information', 'label', 'metadata'].includes(child.getAttribute('slot')));
-        this.badgeLabel = initLocales(this.element).messages.plusMenu.badgeLabel;
+        this.messages = initLocales(this.element).messages.menuItem;
         this.isItemMore = this.element.dataset.overflowMore !== undefined;
         // Validate props
         this.validateStatus(this.status);
         this.validateExpanded(this.expanded);
+        this.watchTarget(this.target);
         // Validate states
         this.validateSize(this.size);
     }
@@ -251,10 +265,11 @@ export class MgMenuItem {
             this.itemLoaded.emit();
             new MutationObserver(mutationsList => {
                 if (mutationsList.some(mutation => mutation.attributeName === 'hidden'))
-                    this.updateStatus();
+                    this.updateStatus([Status.ACTIVE]);
                 if (mutationsList.some(mutation => mutation.type === 'characterData'))
                     this.validateSlot();
                 this.updateDisplayNotificationBadge();
+                this.itemUpdated.emit();
             }).observe(this.element, { attributes: true, childList: true, characterData: true, subtree: true });
         }, 0);
     }
@@ -264,11 +279,22 @@ export class MgMenuItem {
      */
     renderInteractiveElement() {
         const TagName = this.href !== undefined ? 'a' : 'button';
-        return (h(TagName, { href: this.href, class: this.navigationButtonClassList.join(), tabindex: [Status.DISABLED, Status.HIDDEN].includes(this.status) ? -1 : undefined, disabled: this.status === Status.DISABLED, hidden: this.status === Status.HIDDEN, "aria-expanded": this.hasChildren && this.expanded.toString(), "aria-current": this.status === Status.ACTIVE && 'page', onClick: this.handleElementCLick }, h("slot", { name: "image" }), h("div", { class: `${this.navigationButton}-center` }, h("div", { class: `${this.navigationButton}-text-content` }, h("slot", { name: "label" }), !this.displayNotificationBadge && h("slot", { name: "information" }), this.displayNotificationBadge && (h("span", { class: `${this.navigationButton}-text-content-notification` }, h("mg-badge", { label: this.badgeLabel, value: "!", variant: "text-color", slot: "information" })))), this.size !== 'regular' && h("slot", { name: "metadata" })), this.hasChildren && this.href === undefined && (h("span", { class: {
+        return (h(TagName, { href: this.href, class: this.navigationButtonClassList.join(), tabindex: [Status.DISABLED, Status.HIDDEN].includes(this.status) ? -1 : undefined, disabled: this.status === Status.DISABLED, hidden: this.status === Status.HIDDEN, target: this.href && this.target ? this.target : undefined, "aria-expanded": this.hasChildren && this.expanded.toString(), "aria-current": this.status === Status.ACTIVE && 'page', onClick: this.handleElementCLick }, h("slot", { name: "image" }), h("div", { class: `${this.navigationButton}-center` }, h("div", { class: `${this.navigationButton}-text-content` }, h("slot", { name: "label" }), !this.displayNotificationBadge && h("slot", { name: "information" }), this.displayNotificationBadge && (h("span", { class: `${this.navigationButton}-text-content-notification` }, h("mg-badge", { label: this.messages.badgeLabel, value: "!", variant: "text-color", slot: "information" }))), this.target === '_blank' && [
+            h("mg-icon", { key: "icon-new-tab", class: `${this.navigationButton}-new-tab`, icon: "arrow-up-right-square" }),
+            h("span", { key: "a11y-new-tab", class: "mg-u-visually-hidden" }, this.messages.openNewTab),
+        ]), this.size !== 'regular' && h("slot", { name: "metadata" })), this.hasChildren && this.href === undefined && (h("span", { class: {
                 [`${this.navigationButton}-chevron`]: true,
                 [`${this.navigationButton}-chevron--rotate`]: this.expanded === true,
             } }, h("mg-icon", { icon: "chevron-down", size: "small" })))));
     }
+    /**
+     * Emit event when component is updated
+     */
+    componentShouldUpdate() {
+        return nextTick(() => {
+            this.itemUpdated.emit();
+        });
+    }
     /**
      * Render
      * @returns HTML Element
@@ -278,7 +304,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: 'b3932a090814940718c7f3dd0bc9a9636e2fcb88', 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() }, this.renderInteractiveElement(), h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
+        return (h(Host, { key: 'a340655f5b46ed3019e1be29cfade7dfbc480ec2', 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() }, this.renderInteractiveElement(), h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
             this.renderInteractiveElement(),
             h("div", { key: "vertical-container", class: getContainerClasses(), hidden: !this.expanded }, this.renderSlot()),
         ])));
@@ -324,7 +350,7 @@ export class MgMenuItem {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Define menu-item href\nwhen defined menu-item contain an anchor instead of button"
@@ -332,6 +358,29 @@ export class MgMenuItem {
                 "attribute": "href",
                 "reflect": false
             },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TargetType",
+                    "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
+                    "references": {
+                        "TargetType": {
+                            "location": "import",
+                            "path": "./mg-menu-item.conf",
+                            "id": "src/components/molecules/menu/mg-menu-item/mg-menu-item.conf.ts::TargetType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Define target type"
+                },
+                "attribute": "target",
+                "reflect": false
+            },
             "status": {
                 "type": "string",
                 "mutable": true,
@@ -347,7 +396,7 @@ export class MgMenuItem {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Define menu-item status."
@@ -365,7 +414,7 @@ export class MgMenuItem {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Define menu-item content expanded."
@@ -423,11 +472,29 @@ export class MgMenuItem {
                     "resolved": "void",
                     "references": {}
                 }
+            }, {
+                "method": "itemUpdated",
+                "name": "item-updated",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emited event when item is updated"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }];
     }
     static get elementRef() { return "element"; }
     static get watchers() {
         return [{
+                "propName": "target",
+                "methodName": "watchTarget"
+            }, {
                 "propName": "status",
                 "methodName": "validateStatus"
             }, {

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

@@ -1 +1 @@
-{"version":3,"file":"mg-menu-item.js","sourceRoot":"","sources":["../../../../../src/components/molecules/menu/mg-menu-item/mg-menu-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Host, Watch, Element, Event, EventEmitter } from '@stencil/core';\nimport { ClassList, createID, isValidString } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../../locales';\nimport { Direction } from '../mg-menu/mg-menu.conf';\nimport { Status } from './mg-menu-item.conf';\nimport type { MessageType } from '../../mg-item-more/mg-item-more.conf';\nimport type { MenuSizeType } from '../mg-menu/mg-menu.conf';\nimport type { DirectionType } from './mg-menu-item.conf';\nimport type { MgPopover } from '../../mg-popover/mg-popover';\n\n@Component({\n  tag: 'mg-menu-item',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-menu-item.css',\n  shadow: true,\n})\nexport class MgMenuItem {\n  /************\n   * Internal *\n   ************/\n\n  private readonly name = 'mg-menu-item';\n  private readonly navigationButton = 'mg-c-menu-item__navigation-button';\n  private badgeLabel: string;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgMenuItemElement;\n\n  /************\n   * Props *\n   ************/\n\n  /**\n   * Identifier is used to control mg-popover\n   */\n  @Prop() identifier = createID('mg-menu-item');\n\n  /**\n   * Define menu-item href\n   * when defined menu-item contain an anchor instead of button\n   */\n  @Prop() href: string;\n\n  /**\n   * Define menu-item status.\n   */\n  @Prop({ reflect: true, mutable: true }) status: Status = Status.VISIBLE;\n  @Watch('status')\n  validateStatus(newValue: MgMenuItem['status'], oldValue?: MgMenuItem['status']): void {\n    if (oldValue !== undefined) {\n      this.navigationButtonClassList.delete(`${this.navigationButton}--${oldValue}`);\n    }\n    this.navigationButtonClassList.add(`${this.navigationButton}--${newValue}`);\n    this.statusChange.emit(newValue);\n  }\n\n  /**\n   * Define menu-item content expanded.\n   */\n  @Prop({ mutable: true }) expanded = false;\n  @Watch('expanded')\n  validateExpanded(newValue: MgMenuItem['expanded']): void {\n    if (typeof newValue !== 'boolean') throw new Error(`<${this.name}> prop \"expanded\" must be a boolean.`);\n\n    // if menu-item has sub-menu we have to apply some updates:\n    if (this.hasChildren) {\n      const subItems = Array.from(this.element.querySelectorAll(this.name));\n      if (!newValue) {\n        // - when main menu item is NOT expanded we need NOT expanded sub-items and NOT expanded sub-content\n        subItems.forEach(item => {\n          item.expanded = false;\n        });\n      } else if (this.element.querySelector(`${this.name}[status=\"${Status.ACTIVE}\"]`) !== null) {\n        // - when expanded and contain an active item parents are expended too\n        subItems.forEach(item => {\n          if (this.hasStatus(item, Status.ACTIVE)) {\n            item.expanded = true;\n          }\n        });\n      }\n    }\n  }\n\n  /**********\n   * Events *\n   *********/\n\n  /**\n   * Emited event when status change\n   */\n  @Event({ eventName: 'status-change' }) statusChange: EventEmitter<HTMLMgMenuItemElement['status']>;\n\n  /**\n   * Emited event when item is loaded\n   */\n  @Event({ eventName: 'item-loaded' }) itemLoaded: EventEmitter<void>;\n\n  /**********\n   * States *\n   *********/\n\n  /**\n   * Define menu-item size.\n   */\n  @State() size: MenuSizeType = 'regular';\n  @Watch('size')\n  validateSize(newValue: MgMenuItem['size'], oldValue?: MgMenuItem['size']): void {\n    this.navigationButtonClassList.delete(`${this.navigationButton}--size-${oldValue}`);\n    this.navigationButtonClassList.add(`${this.navigationButton}--size-${newValue}`);\n  }\n\n  /**\n   * Component button classes\n   */\n  @State() navigationButtonClassList: ClassList = new ClassList([this.navigationButton]);\n\n  /**\n   * Parent menu direction\n   */\n  @State() direction: DirectionType;\n  @Watch('direction')\n  validateDirection(newValue: MgMenuItem['direction']): void {\n    // manage menu items style depending to parent menu horientation\n    this.element.setAttribute('data-style-direction', newValue);\n    this.navigationButtonClassList.add(`${this.navigationButton}--${newValue}`);\n    // manage all sub levels child menu-items level with data-level attribut\n    if (this.isDirection(Direction.VERTICAL, newValue)) {\n      Array.from(this.element.querySelectorAll('mg-menu-item')).forEach(item => {\n        item.dataset.level = `${(Number(item.dataset.level) || 1) + 1}`;\n      });\n    }\n  }\n\n  /**\n   * Does component is in main menu\n   */\n  @State() isInMainMenu: boolean;\n\n  /**\n   * Does element is item-more\n   */\n  @State() isItemMore: boolean;\n\n  /**\n   * Does component have children.\n   */\n  @State() hasChildren = false;\n  @Watch('hasChildren')\n  validateHasChildren(newValue: boolean): void {\n    if (newValue && this.element.href !== undefined) {\n      throw new Error(`<${this.name}> prop \"href\" is unauthorizied when element is a parent.`);\n    }\n  }\n\n  /**\n   * Does component should display notification badge.\n   */\n  @State() displayNotificationBadge: boolean;\n\n  /***********\n   * Methods *\n   **********/\n\n  /**\n   * Toggle expanded prop value\n   */\n  private toggleExpanded = (): void => {\n    this.expanded = !this.expanded;\n  };\n\n  /**\n   * Does an Element have given Status\n   * @param mgMenuItemElement - to parse\n   * @param status - to check\n   * @returns true if element with status is found\n   */\n  private hasStatus = (mgMenuItemElement: HTMLMgMenuItemElement, status: MgMenuItem['status']): boolean => mgMenuItemElement.status === status;\n\n  /**\n   * Is component contextual direction match the given direction\n   * @param direction - in parent menu\n   * @param compareWith - direction to compare with. Default: `this.direction`\n   * @returns true is direction match the direction propertie\n   */\n  private isDirection = (direction: MgMenuItem['direction'], compareWith = this.direction): boolean => direction === compareWith;\n\n  /**\n   * Update displayNotificationBadge\n   * current component notification badge have priority over the slot badge when submenu contain badge\n   */\n  private updateDisplayNotificationBadge = (): void => {\n    const childMenu = this.element.querySelector('mg-menu');\n    this.displayNotificationBadge =\n      childMenu !== null &&\n      Array.from(childMenu.children).some((subItem: HTMLMgMenuItemElement) => subItem.querySelector('mg-badge') !== null && subItem.getAttribute('hidden') === null);\n  };\n\n  /**\n   * Method to control if one of component children have active status\n   * @returns truthy if component has active child\n   */\n  private hasActiveChild = (): boolean =>\n    Array.from(this.element.querySelector('mg-menu')?.children || []).some(\n      (element: HTMLMgMenuItemElement) => element.nodeName === 'MG-MENU-ITEM' && this.hasStatus(element, Status.ACTIVE) && element.getAttribute('hidden') === null,\n    );\n\n  /**\n   * Validate slots\n   * @param guard - prevent action with guard. Default: false.\n   */\n  private validateSlot = (guard = false): void => {\n    // slot title AND metadata validation\n    // add title on label AND metada slots due to text-overflow on these element\n    if (Array.from(this.element.children).find(child => child.getAttribute('slot') === 'label') === undefined) throw new Error(`<${this.name}> slot \"label\" is required.`);\n    ['label', 'metadata'].forEach(slot => {\n      Array.from(this.element.querySelectorAll(`[slot=\"${slot}\"]`)).forEach(element => {\n        if (!isValidString(element.textContent)) throw new Error(`<${this.name}> slot \"${slot}\" must have text content.`);\n        if ((guard && element.getAttribute('title') === null) || !guard) element.setAttribute('title', element.textContent);\n      });\n    });\n  };\n\n  /**\n   * Update status\n   * @param guard - status to exclude from process in addition to [Status.HIDDEN, Status.DISABLED] . Default: [].\n   */\n  private updateStatus = (guard = []): void => {\n    if (![Status.HIDDEN, Status.DISABLED, ...guard].includes(this.status)) {\n      this.status = this.hasActiveChild() ? Status.ACTIVE : Status.VISIBLE;\n    }\n  };\n\n  /**\n   * Init event-listeners\n   */\n  private initListeners = (): void => {\n    // manage first sub-level menu-items\n    Array.from(this.element.querySelector('mg-menu')?.children || []).forEach(item => {\n      if (item.nodeName === 'MG-MENU-ITEM') {\n        // manage child menu listener\n        item.addEventListener('status-change', () => {\n          this.updateStatus();\n        });\n      }\n    });\n  };\n\n  /**\n   * Get mg-popover identifier\n   * @returns generated mg-popover identifier\n   */\n  private getPopoverIdentifier = (): MgPopover['identifier'] => `${this.identifier}-popover`;\n\n  /**\n   * Render popover clickoutside guard for content slot\n   */\n  private updatePopoverGuard(): void {\n    if (this.displayPopover())\n      Array.from(this.element.children)\n        .filter((child: HTMLElement) => child.getAttribute('slot') === null && child.nodeName !== 'MG-MENU' && Boolean(child.dataset))\n        .forEach((slot: HTMLElement) => (slot.dataset.mgPopoverGuard = this.getPopoverIdentifier()));\n  }\n\n  /**\n   * Condition to know if component should display a mg-popover\n   * @returns truthy if component display popover\n   */\n  private displayPopover = (): boolean => this.isDirection(Direction.HORIZONTAL) && this.hasChildren && this.href === undefined;\n\n  /************\n   * Handlers *\n   ************/\n\n  /**\n   * Handle interacrtive element click\n   * @param event - click on element\n   */\n  private handleElementCLick = (event: MouseEvent): void => {\n    if ((this.hasChildren && !this.isInMainMenu) || this.status === Status.DISABLED) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n\n    // toggle expanded when mg-menu-item has child items\n    if (this.hasChildren) this.toggleExpanded();\n  };\n\n  /**\n   * Handle popover element display-change event\n   * @param event - popover display event\n   */\n  private handlePopoverDisplay = (event: CustomEvent): void => {\n    this.expanded = event.detail;\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Validate props\n   */\n  componentWillLoad(): void {\n    // has children items that is NOT [slot='image' | 'information' | 'label' | 'metadata'] element\n    // we store only matching elements\n    this.hasChildren = Array.from(this.element.children).some(child => !['image', 'information', 'label', 'metadata'].includes(child.getAttribute('slot')));\n    this.badgeLabel = (initLocales(this.element).messages as { plusMenu: MessageType }).plusMenu.badgeLabel;\n    this.isItemMore = this.element.dataset.overflowMore !== undefined;\n\n    // Validate props\n    this.validateStatus(this.status);\n    this.validateExpanded(this.expanded);\n\n    // Validate states\n    this.validateSize(this.size);\n  }\n\n  /**\n   * Check if component slots configuration\n   * @returns timeout\n   */\n  componentDidLoad(): ReturnType<typeof setTimeout> {\n    // validation\n    this.validateSlot(true);\n\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      // define menu-item context states\n      const menu = this.element.closest('mg-menu');\n      this.direction = this.isItemMore || menu === null ? Direction.HORIZONTAL : menu.direction;\n      this.isInMainMenu = menu !== null && this.element.parentElement.closest('mg-menu-item') === null;\n      if (menu?.size !== undefined) this.size = menu.size;\n\n      if (this.isItemMore) this.size = this.element.dataset.size as MgMenuItem['size'];\n\n      // when main menu item contain an active item it will get the active style\n      // AND if item is in vertical menu it will be expanded\n      if (this.hasActiveChild() && this.isInMainMenu) this.expanded = this.isDirection(Direction.VERTICAL);\n\n      this.updateStatus([Status.ACTIVE]);\n      this.updateDisplayNotificationBadge();\n      this.updatePopoverGuard();\n\n      // manage child dom changes with mutationObserver and listzners\n      this.initListeners();\n\n      // emit loaded event when component is fully loaded\n      this.itemLoaded.emit();\n\n      new MutationObserver(mutationsList => {\n        if (mutationsList.some(mutation => mutation.attributeName === 'hidden')) this.updateStatus();\n        if (mutationsList.some(mutation => mutation.type === 'characterData')) this.validateSlot();\n        this.updateDisplayNotificationBadge();\n      }).observe(this.element, { attributes: true, childList: true, characterData: true, subtree: true });\n    }, 0);\n  }\n\n  /**\n   * Render ineractive element\n   * @returns HTML Element\n   */\n  private renderInteractiveElement(): HTMLElement {\n    const TagName: string = this.href !== undefined ? 'a' : 'button';\n    return (\n      <TagName\n        href={this.href}\n        class={this.navigationButtonClassList.join()}\n        tabindex={[Status.DISABLED, Status.HIDDEN].includes(this.status) ? -1 : undefined}\n        disabled={this.status === Status.DISABLED}\n        hidden={this.status === Status.HIDDEN}\n        aria-expanded={this.hasChildren && this.expanded.toString()}\n        aria-current={this.status === Status.ACTIVE && 'page'}\n        onClick={this.handleElementCLick}\n      >\n        <slot name=\"image\"></slot>\n        <div class={`${this.navigationButton}-center`}>\n          <div class={`${this.navigationButton}-text-content`}>\n            <slot name=\"label\"></slot>\n            {!this.displayNotificationBadge && <slot name=\"information\"></slot>}\n            {this.displayNotificationBadge && (\n              <span class={`${this.navigationButton}-text-content-notification`}>\n                <mg-badge label={this.badgeLabel} value=\"!\" variant=\"text-color\" slot=\"information\"></mg-badge>\n              </span>\n            )}\n          </div>\n          {this.size !== 'regular' && <slot name=\"metadata\"></slot>}\n        </div>\n        {this.hasChildren && this.href === undefined && (\n          <span\n            class={{\n              [`${this.navigationButton}-chevron`]: true,\n              [`${this.navigationButton}-chevron--rotate`]: this.expanded === true,\n            }}\n          >\n            <mg-icon icon=\"chevron-down\" size=\"small\"></mg-icon>\n          </span>\n        )}\n      </TagName>\n    );\n  }\n\n  /**\n   * Render slot\n   * @returns HTML Element\n   */\n  private renderSlot = (): HTMLElement => <slot></slot>;\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    const getContainerClasses = () => ({\n      ['mg-c-menu-item__collapse-container']: true,\n      ['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu || this.isItemMore) && this.isDirection(Direction.HORIZONTAL),\n    });\n\n    return (\n      <Host role={this.isItemMore ? 'presentation' : 'listitem'}>\n        {this.displayPopover() ? (\n          <mg-popover display={this.expanded} placement=\"bottom-start\" arrowHide={true} onDisplay-change={this.handlePopoverDisplay} identifier={this.getPopoverIdentifier()}>\n            {this.renderInteractiveElement()}\n            <div class={getContainerClasses()} slot=\"content\">\n              {this.renderSlot()}\n            </div>\n          </mg-popover>\n        ) : (\n          [\n            this.renderInteractiveElement(),\n            <div key=\"vertical-container\" class={getContainerClasses()} hidden={!this.expanded}>\n              {this.renderSlot()}\n            </div>,\n          ]\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"mg-menu-item.js","sourceRoot":"","sources":["../../../../../src/components/molecules/menu/mg-menu-item/mg-menu-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AACrG,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AACtF,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAMtD;;;;;;GAMG;AAMH,MAAM,OAAO,UAAU;;QACrB;;sBAEc;QAEG,SAAI,GAAG,cAAc,CAAC;QACtB,qBAAgB,GAAG,mCAAmC,CAAC;QA+JxE;;oBAEY;QAEZ;;WAEG;QACK,mBAAc,GAAG,GAAS,EAAE;YAClC,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QACjC,CAAC,CAAC;QAEF;;;;;WAKG;QACK,cAAS,GAAG,CAAC,iBAAwC,EAAE,MAA4B,EAAW,EAAE,CAAC,iBAAiB,CAAC,MAAM,KAAK,MAAM,CAAC;QAE7I;;;;;WAKG;QACK,gBAAW,GAAG,CAAC,SAAkC,EAAE,WAAW,GAAG,IAAI,CAAC,SAAS,EAAW,EAAE,CAAC,SAAS,KAAK,WAAW,CAAC;QAE/H;;;WAGG;QACK,mCAA8B,GAAG,GAAS,EAAE;YAClD,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;YACxD,IAAI,CAAC,wBAAwB;gBAC3B,SAAS,KAAK,IAAI;oBAClB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,OAA8B,EAAE,EAAE,CAAC,OAAO,CAAC,aAAa,CAAC,UAAU,CAAC,KAAK,IAAI,IAAI,OAAO,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC,CAAC;QACnK,CAAC,CAAC;QAEF;;;WAGG;QACK,mBAAc,GAAG,GAAY,EAAE;;YACrC,OAAA,KAAK,CAAC,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,0CAAE,QAAQ,KAAI,EAAE,CAAC,CAAC,IAAI,CACpE,CAAC,OAA8B,EAAE,EAAE,CAAC,OAAO,CAAC,QAAQ,KAAK,cAAc,IAAI,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,IAAI,OAAO,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,IAAI,CAC7J,CAAA;SAAA,CAAC;QAEJ;;;WAGG;QACK,iBAAY,GAAG,CAAC,KAAK,GAAG,KAAK,EAAQ,EAAE;YAC7C,qCAAqC;YACrC,4EAA4E;YAC5E,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,OAAO,CAAC,KAAK,SAAS;gBAAE,MAAM,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,6BAA6B,CAAC,CAAC;YACvK,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;gBACnC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,UAAU,IAAI,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;oBAC9E,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,WAAW,CAAC;wBAAE,MAAM,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,WAAW,IAAI,2BAA2B,CAAC,CAAC;oBAClH,IAAI,CAAC,KAAK,IAAI,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,KAAK;wBAAE,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;gBACtH,CAAC,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QAEF;;;WAGG;QACK,iBAAY,GAAG,CAAC,KAAK,GAAG,EAAE,EAAQ,EAAE;YAC1C,IAAI,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,QAAQ,EAAE,GAAG,KAAK,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC;gBACtE,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC;YACvE,CAAC;QACH,CAAC,CAAC;QAEF;;WAEG;QACK,kBAAa,GAAG,GAAS,EAAE;;YACjC,oCAAoC;YACpC,KAAK,CAAC,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,0CAAE,QAAQ,KAAI,EAAE,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;gBAC/E,IAAI,IAAI,CAAC,QAAQ,KAAK,cAAc,EAAE,CAAC;oBACrC,6BAA6B;oBAC7B,IAAI,CAAC,gBAAgB,CAAC,eAAe,EAAE,GAAG,EAAE;wBAC1C,IAAI,CAAC,YAAY,EAAE,CAAC;oBACtB,CAAC,CAAC,CAAC;gBACL,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QAEF;;;WAGG;QACK,yBAAoB,GAAG,GAA4B,EAAE,CAAC,GAAG,IAAI,CAAC,UAAU,UAAU,CAAC;QAY3F;;;WAGG;QACK,mBAAc,GAAG,GAAY,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC;QAE9H;;sBAEc;QAEd;;;WAGG;QACK,uBAAkB,GAAG,CAAC,KAAiB,EAAQ,EAAE;YACvD,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,IAAI,CAAC,MAAM,KAAK,MAAM,CAAC,QAAQ,EAAE,CAAC;gBAChF,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YAC1B,CAAC;YAED,oDAAoD;YACpD,IAAI,IAAI,CAAC,WAAW;gBAAE,IAAI,CAAC,cAAc,EAAE,CAAC;QAC9C,CAAC,CAAC;QAEF;;;WAGG;QACK,yBAAoB,GAAG,CAAC,KAAkB,EAAQ,EAAE;YAC1D,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC;QAC/B,CAAC,CAAC;QAuHF;;;WAGG;QACK,eAAU,GAAG,GAAgB,EAAE,CAAC,eAAa,CAAC;0BA7YjC,QAAQ,CAAC,cAAc,CAAC;;;sBAsBa,MAAM,CAAC,OAAO;wBAanC,KAAK;oBAkDZ,SAAS;yCAUS,IAAI,SAAS,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;;;;2BAgC/D,KAAK;;;IAlH5B,WAAW,CAAC,QAA8B;QACxC,IAAI,QAAQ,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC5C,MAAM,IAAI,KAAK,CAAC,2CAA2C,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACnF,CAAC;IACH,CAAC;IAOD,cAAc,CAAC,QAA8B,EAAE,QAA+B;QAC5E,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;YAC3B,IAAI,CAAC,yBAAyB,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,gBAAgB,KAAK,QAAQ,EAAE,CAAC,CAAC;QACjF,CAAC;QACD,IAAI,CAAC,yBAAyB,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,gBAAgB,KAAK,QAAQ,EAAE,CAAC,CAAC;QAC5E,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACnC,CAAC;IAOD,gBAAgB,CAAC,QAAgC;QAC/C,IAAI,OAAO,QAAQ,KAAK,SAAS;YAAE,MAAM,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,sCAAsC,CAAC,CAAC;QAExG,2DAA2D;QAC3D,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;YACtE,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACd,oGAAoG;gBACpG,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;oBACtB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;gBACxB,CAAC,CAAC,CAAC;YACL,CAAC;iBAAM,IAAI,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC,IAAI,YAAY,MAAM,CAAC,MAAM,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC;gBAC1F,sEAAsE;gBACtE,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;oBACtB,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC;wBACxC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;oBACvB,CAAC;gBACH,CAAC,CAAC,CAAC;YACL,CAAC;QACH,CAAC;IACH,CAAC;IA8BD,YAAY,CAAC,QAA4B,EAAE,QAA6B;QACtE,IAAI,CAAC,yBAAyB,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,gBAAgB,UAAU,QAAQ,EAAE,CAAC,CAAC;QACpF,IAAI,CAAC,yBAAyB,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,gBAAgB,UAAU,QAAQ,EAAE,CAAC,CAAC;IACnF,CAAC;IAYD,iBAAiB,CAAC,QAAiC;QACjD,gEAAgE;QAChE,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,sBAAsB,EAAE,QAAQ,CAAC,CAAC;QAC5D,IAAI,CAAC,yBAAyB,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,gBAAgB,KAAK,QAAQ,EAAE,CAAC,CAAC;QAC5E,wEAAwE;QACxE,IAAI,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC;YACnD,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;gBACvE,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC;YAClE,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAiBD,mBAAmB,CAAC,QAAiB;QACnC,IAAI,QAAQ,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;YAChD,MAAM,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,0DAA0D,CAAC,CAAC;QAC3F,CAAC;IACH,CAAC;IAqGD;;OAEG;IACK,kBAAkB;QACxB,IAAI,IAAI,CAAC,cAAc,EAAE;YACvB,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC;iBAC9B,MAAM,CAAC,CAAC,KAAkB,EAAE,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI,IAAI,KAAK,CAAC,QAAQ,KAAK,SAAS,IAAI,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;iBAC7H,OAAO,CAAC,CAAC,IAAiB,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,cAAc,GAAG,IAAI,CAAC,oBAAoB,EAAE,CAAC,CAAC,CAAC;IACnG,CAAC;IAkCD;;mBAEe;IAEf;;OAEG;IACH,iBAAiB;QACf,+FAA+F;QAC/F,kCAAkC;QAClC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,UAAU,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QACxJ,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,QAAuB,CAAC;QAC3E,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,YAAY,KAAK,SAAS,CAAC;QAElE,iBAAiB;QACjB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACjC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACrC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAE9B,kBAAkB;QAClB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED;;;OAGG;IACH,gBAAgB;QACd,aAAa;QACb,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;QAExB,sDAAsD;QACtD,iEAAiE;QACjE,mEAAmE;QACnE,OAAO,UAAU,CAAC,GAAG,EAAE;YACrB,kCAAkC;YAClC,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;YAC7C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,IAAI,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC;YAC1F,IAAI,CAAC,YAAY,GAAG,IAAI,KAAK,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;YACjG,IAAI,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,MAAK,SAAS;gBAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;YAEpD,IAAI,IAAI,CAAC,UAAU;gBAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,IAA0B,CAAC;YAEjF,0EAA0E;YAC1E,sDAAsD;YACtD,IAAI,IAAI,CAAC,cAAc,EAAE,IAAI,IAAI,CAAC,YAAY;gBAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;YAErG,IAAI,CAAC,YAAY,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;YACnC,IAAI,CAAC,8BAA8B,EAAE,CAAC;YACtC,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAE1B,+DAA+D;YAC/D,IAAI,CAAC,aAAa,EAAE,CAAC;YAErB,mDAAmD;YACnD,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;YAEvB,IAAI,gBAAgB,CAAC,aAAa,CAAC,EAAE;gBACnC,IAAI,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,aAAa,KAAK,QAAQ,CAAC;oBAAE,IAAI,CAAC,YAAY,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;gBAC5G,IAAI,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,KAAK,eAAe,CAAC;oBAAE,IAAI,CAAC,YAAY,EAAE,CAAC;gBAC3F,IAAI,CAAC,8BAA8B,EAAE,CAAC;gBACtC,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;YAC1B,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACtG,CAAC,EAAE,CAAC,CAAC,CAAC;IACR,CAAC;IAED;;;OAGG;IACK,wBAAwB;QAC9B,MAAM,OAAO,GAAW,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC;QACjE,OAAO,CACL,EAAC,OAAO,IACN,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,yBAAyB,CAAC,IAAI,EAAE,EAC5C,QAAQ,EAAE,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EACjF,QAAQ,EAAE,IAAI,CAAC,MAAM,KAAK,MAAM,CAAC,QAAQ,EACzC,MAAM,EAAE,IAAI,CAAC,MAAM,KAAK,MAAM,CAAC,MAAM,EACrC,MAAM,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,mBAC3C,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,kBAC7C,IAAI,CAAC,MAAM,KAAK,MAAM,CAAC,MAAM,IAAI,MAAM,EACrD,OAAO,EAAE,IAAI,CAAC,kBAAkB;YAEhC,YAAM,IAAI,EAAC,OAAO,GAAQ;YAC1B,WAAK,KAAK,EAAE,GAAG,IAAI,CAAC,gBAAgB,SAAS;gBAC3C,WAAK,KAAK,EAAE,GAAG,IAAI,CAAC,gBAAgB,eAAe;oBACjD,YAAM,IAAI,EAAC,OAAO,GAAQ;oBACzB,CAAC,IAAI,CAAC,wBAAwB,IAAI,YAAM,IAAI,EAAC,aAAa,GAAQ;oBAClE,IAAI,CAAC,wBAAwB,IAAI,CAChC,YAAM,KAAK,EAAE,GAAG,IAAI,CAAC,gBAAgB,4BAA4B;wBAC/D,gBAAU,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,KAAK,EAAC,GAAG,EAAC,OAAO,EAAC,YAAY,EAAC,IAAI,EAAC,aAAa,GAAY,CACnG,CACR;oBACA,IAAI,CAAC,MAAM,KAAK,QAAQ,IAAI;wBAC3B,eAAS,GAAG,EAAC,cAAc,EAAC,KAAK,EAAE,GAAG,IAAI,CAAC,gBAAgB,UAAU,EAAE,IAAI,EAAC,uBAAuB,GAAW;wBAC9G,YAAM,GAAG,EAAC,cAAc,EAAC,KAAK,EAAC,sBAAsB,IAClD,IAAI,CAAC,QAAQ,CAAC,UAAU,CACpB;qBACR,CACG;gBACL,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,YAAM,IAAI,EAAC,UAAU,GAAQ,CACrD;YACL,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,CAC9C,YACE,KAAK,EAAE;oBACL,CAAC,GAAG,IAAI,CAAC,gBAAgB,UAAU,CAAC,EAAE,IAAI;oBAC1C,CAAC,GAAG,IAAI,CAAC,gBAAgB,kBAAkB,CAAC,EAAE,IAAI,CAAC,QAAQ,KAAK,IAAI;iBACrE;gBAED,eAAS,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,OAAO,GAAW,CAC/C,CACR,CACO,CACX,CAAC;IACJ,CAAC;IAQD;;OAEG;IACH,qBAAqB;QACnB,OAAO,QAAQ,CAAC,GAAG,EAAE;YACnB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;QAC1B,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,MAAM,mBAAmB,GAAG,GAAG,EAAE,CAAC,CAAC;YACjC,CAAC,oCAAoC,CAAC,EAAE,IAAI;YAC5C,CAAC,iDAAiD,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,UAAU,CAAC;SACtI,CAAC,CAAC;QAEH,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,UAAU,IACtD,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,CACvB,kBAAY,OAAO,EAAE,IAAI,CAAC,QAAQ,EAAE,SAAS,EAAC,cAAc,EAAC,SAAS,EAAE,IAAI,sBAAoB,IAAI,CAAC,oBAAoB,EAAE,UAAU,EAAE,IAAI,CAAC,oBAAoB,EAAE;YAC/J,IAAI,CAAC,wBAAwB,EAAE;YAChC,WAAK,KAAK,EAAE,mBAAmB,EAAE,EAAE,IAAI,EAAC,SAAS,IAC9C,IAAI,CAAC,UAAU,EAAE,CACd,CACK,CACd,CAAC,CAAC,CAAC,CACF;YACE,IAAI,CAAC,wBAAwB,EAAE;YAC/B,WAAK,GAAG,EAAC,oBAAoB,EAAC,KAAK,EAAE,mBAAmB,EAAE,EAAE,MAAM,EAAE,CAAC,IAAI,CAAC,QAAQ,IAC/E,IAAI,CAAC,UAAU,EAAE,CACd;SACP,CACF,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State, Host, Watch, Element, Event, EventEmitter } from '@stencil/core';\nimport { ClassList, createID, isValidString, nextTick } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../../locales';\nimport { Direction } from '../mg-menu/mg-menu.conf';\nimport { Status, targets } from './mg-menu-item.conf';\nimport type { MenuSizeType } from '../mg-menu/mg-menu.conf';\nimport type { DirectionType, TargetType } from './mg-menu-item.conf';\nimport type { MgPopover } from '../../mg-popover/mg-popover';\nimport type { MessageType } from '../../../../locales/index.conf';\n\n/**\n * @slot - Menu item content\n * @slot image - Menu item image content\n * @slot label - Menu item label content\n * @slot information - Menu item information content\n * @slot metadata - Menu item metadata content\n */\n@Component({\n  tag: 'mg-menu-item',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-menu-item.css',\n  shadow: true,\n})\nexport class MgMenuItem {\n  /************\n   * Internal *\n   ************/\n\n  private readonly name = 'mg-menu-item';\n  private readonly navigationButton = 'mg-c-menu-item__navigation-button';\n  private messages: MessageType;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgMenuItemElement;\n\n  /************\n   * Props *\n   ************/\n\n  /**\n   * Identifier is used to control mg-popover\n   */\n  @Prop() identifier = createID('mg-menu-item');\n\n  /**\n   * Define menu-item href\n   * when defined menu-item contain an anchor instead of button\n   */\n  @Prop() href?: string;\n\n  /**\n   * Define target type\n   */\n  @Prop() target?: TargetType;\n  @Watch('target')\n  watchTarget(newValue: MgMenuItem['target']): void {\n    if (newValue && !targets.includes(newValue)) {\n      throw new Error(`<mg-link> prop \"target\" must be one of: ${targets.join(', ')}`);\n    }\n  }\n\n  /**\n   * Define menu-item status.\n   */\n  @Prop({ reflect: true, mutable: true }) status?: Status = Status.VISIBLE;\n  @Watch('status')\n  validateStatus(newValue: MgMenuItem['status'], oldValue?: MgMenuItem['status']): void {\n    if (oldValue !== undefined) {\n      this.navigationButtonClassList.delete(`${this.navigationButton}--${oldValue}`);\n    }\n    this.navigationButtonClassList.add(`${this.navigationButton}--${newValue}`);\n    this.statusChange.emit(newValue);\n  }\n\n  /**\n   * Define menu-item content expanded.\n   */\n  @Prop({ mutable: true }) expanded? = false;\n  @Watch('expanded')\n  validateExpanded(newValue: MgMenuItem['expanded']): void {\n    if (typeof newValue !== 'boolean') throw new Error(`<${this.name}> prop \"expanded\" must be a boolean.`);\n\n    // if menu-item has sub-menu we have to apply some updates:\n    if (this.hasChildren) {\n      const subItems = Array.from(this.element.querySelectorAll(this.name));\n      if (!newValue) {\n        // - when main menu item is NOT expanded we need NOT expanded sub-items and NOT expanded sub-content\n        subItems.forEach(item => {\n          item.expanded = false;\n        });\n      } else if (this.element.querySelector(`${this.name}[status=\"${Status.ACTIVE}\"]`) !== null) {\n        // - when expanded and contain an active item parents are expended too\n        subItems.forEach(item => {\n          if (this.hasStatus(item, Status.ACTIVE)) {\n            item.expanded = true;\n          }\n        });\n      }\n    }\n  }\n\n  /**********\n   * Events *\n   *********/\n\n  /**\n   * Emited event when status change\n   */\n  @Event({ eventName: 'status-change' }) statusChange: EventEmitter<HTMLMgMenuItemElement['status']>;\n\n  /**\n   * Emited event when item is loaded\n   */\n  @Event({ eventName: 'item-loaded' }) itemLoaded: EventEmitter<void>;\n\n  /**\n   * Emited event when item is updated\n   */\n  @Event({ eventName: 'item-updated' }) itemUpdated: EventEmitter<void>;\n\n  /**********\n   * States *\n   *********/\n\n  /**\n   * Define menu-item size.\n   */\n  @State() size: MenuSizeType = 'regular';\n  @Watch('size')\n  validateSize(newValue: MgMenuItem['size'], oldValue?: MgMenuItem['size']): void {\n    this.navigationButtonClassList.delete(`${this.navigationButton}--size-${oldValue}`);\n    this.navigationButtonClassList.add(`${this.navigationButton}--size-${newValue}`);\n  }\n\n  /**\n   * Component button classes\n   */\n  @State() navigationButtonClassList: ClassList = new ClassList([this.navigationButton]);\n\n  /**\n   * Parent menu direction\n   */\n  @State() direction: DirectionType;\n  @Watch('direction')\n  validateDirection(newValue: MgMenuItem['direction']): void {\n    // manage menu items style depending to parent menu horientation\n    this.element.setAttribute('data-style-direction', newValue);\n    this.navigationButtonClassList.add(`${this.navigationButton}--${newValue}`);\n    // manage all sub levels child menu-items level with data-level attribut\n    if (this.isDirection(Direction.VERTICAL, newValue)) {\n      Array.from(this.element.querySelectorAll('mg-menu-item')).forEach(item => {\n        item.dataset.level = `${(Number(item.dataset.level) || 1) + 1}`;\n      });\n    }\n  }\n\n  /**\n   * Does component is in main menu\n   */\n  @State() isInMainMenu: boolean;\n\n  /**\n   * Does element is item-more\n   */\n  @State() isItemMore: boolean;\n\n  /**\n   * Does component have children.\n   */\n  @State() hasChildren = false;\n  @Watch('hasChildren')\n  validateHasChildren(newValue: boolean): void {\n    if (newValue && this.element.href !== undefined) {\n      throw new Error(`<${this.name}> prop \"href\" is unauthorizied when element is a parent.`);\n    }\n  }\n\n  /**\n   * Does component should display notification badge.\n   */\n  @State() displayNotificationBadge: boolean;\n\n  /***********\n   * Methods *\n   **********/\n\n  /**\n   * Toggle expanded prop value\n   */\n  private toggleExpanded = (): void => {\n    this.expanded = !this.expanded;\n  };\n\n  /**\n   * Does an Element have given Status\n   * @param mgMenuItemElement - to parse\n   * @param status - to check\n   * @returns true if element with status is found\n   */\n  private hasStatus = (mgMenuItemElement: HTMLMgMenuItemElement, status: MgMenuItem['status']): boolean => mgMenuItemElement.status === status;\n\n  /**\n   * Is component contextual direction match the given direction\n   * @param direction - in parent menu\n   * @param compareWith - direction to compare with. Default: `this.direction`\n   * @returns true is direction match the direction propertie\n   */\n  private isDirection = (direction: MgMenuItem['direction'], compareWith = this.direction): boolean => direction === compareWith;\n\n  /**\n   * Update displayNotificationBadge\n   * current component notification badge have priority over the slot badge when submenu contain badge\n   */\n  private updateDisplayNotificationBadge = (): void => {\n    const childMenu = this.element.querySelector('mg-menu');\n    this.displayNotificationBadge =\n      childMenu !== null &&\n      Array.from(childMenu.children).some((subItem: HTMLMgMenuItemElement) => subItem.querySelector('mg-badge') !== null && subItem.getAttribute('hidden') === null);\n  };\n\n  /**\n   * Method to control if one of component children have active status\n   * @returns truthy if component has active child\n   */\n  private hasActiveChild = (): boolean =>\n    Array.from(this.element.querySelector('mg-menu')?.children || []).some(\n      (element: HTMLMgMenuItemElement) => element.nodeName === 'MG-MENU-ITEM' && this.hasStatus(element, Status.ACTIVE) && element.getAttribute('hidden') === null,\n    );\n\n  /**\n   * Validate slots\n   * @param guard - prevent action with guard. Default: false.\n   */\n  private validateSlot = (guard = false): void => {\n    // slot title AND metadata validation\n    // add title on label AND metada slots due to text-overflow on these element\n    if (Array.from(this.element.children).find(child => child.getAttribute('slot') === 'label') === undefined) throw new Error(`<${this.name}> slot \"label\" is required.`);\n    ['label', 'metadata'].forEach(slot => {\n      Array.from(this.element.querySelectorAll(`[slot=\"${slot}\"]`)).forEach(element => {\n        if (!isValidString(element.textContent)) throw new Error(`<${this.name}> slot \"${slot}\" must have text content.`);\n        if ((guard && element.getAttribute('title') === null) || !guard) element.setAttribute('title', element.textContent);\n      });\n    });\n  };\n\n  /**\n   * Update status\n   * @param guard - status to exclude from process in addition to [Status.HIDDEN, Status.DISABLED] . Default: [].\n   */\n  private updateStatus = (guard = []): void => {\n    if (![Status.HIDDEN, Status.DISABLED, ...guard].includes(this.status)) {\n      this.status = this.hasActiveChild() ? Status.ACTIVE : Status.VISIBLE;\n    }\n  };\n\n  /**\n   * Init event-listeners\n   */\n  private initListeners = (): void => {\n    // manage first sub-level menu-items\n    Array.from(this.element.querySelector('mg-menu')?.children || []).forEach(item => {\n      if (item.nodeName === 'MG-MENU-ITEM') {\n        // manage child menu listener\n        item.addEventListener('status-change', () => {\n          this.updateStatus();\n        });\n      }\n    });\n  };\n\n  /**\n   * Get mg-popover identifier\n   * @returns generated mg-popover identifier\n   */\n  private getPopoverIdentifier = (): MgPopover['identifier'] => `${this.identifier}-popover`;\n\n  /**\n   * Render popover clickoutside guard for content slot\n   */\n  private updatePopoverGuard(): void {\n    if (this.displayPopover())\n      Array.from(this.element.children)\n        .filter((child: HTMLElement) => child.getAttribute('slot') === null && child.nodeName !== 'MG-MENU' && Boolean(child.dataset))\n        .forEach((slot: HTMLElement) => (slot.dataset.mgPopoverGuard = this.getPopoverIdentifier()));\n  }\n\n  /**\n   * Condition to know if component should display a mg-popover\n   * @returns truthy if component display popover\n   */\n  private displayPopover = (): boolean => this.isDirection(Direction.HORIZONTAL) && this.hasChildren && this.href === undefined;\n\n  /************\n   * Handlers *\n   ************/\n\n  /**\n   * Handle interacrtive element click\n   * @param event - click on element\n   */\n  private handleElementCLick = (event: MouseEvent): void => {\n    if ((this.hasChildren && !this.isInMainMenu) || this.status === Status.DISABLED) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n\n    // toggle expanded when mg-menu-item has child items\n    if (this.hasChildren) this.toggleExpanded();\n  };\n\n  /**\n   * Handle popover element display-change event\n   * @param event - popover display event\n   */\n  private handlePopoverDisplay = (event: CustomEvent): void => {\n    this.expanded = event.detail;\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Validate props\n   */\n  componentWillLoad(): void {\n    // has children items that is NOT [slot='image' | 'information' | 'label' | 'metadata'] element\n    // we store only matching elements\n    this.hasChildren = Array.from(this.element.children).some(child => !['image', 'information', 'label', 'metadata'].includes(child.getAttribute('slot')));\n    this.messages = initLocales(this.element).messages.menuItem as MessageType;\n    this.isItemMore = this.element.dataset.overflowMore !== undefined;\n\n    // Validate props\n    this.validateStatus(this.status);\n    this.validateExpanded(this.expanded);\n    this.watchTarget(this.target);\n\n    // Validate states\n    this.validateSize(this.size);\n  }\n\n  /**\n   * Check if component slots configuration\n   * @returns timeout\n   */\n  componentDidLoad(): ReturnType<typeof setTimeout> {\n    // validation\n    this.validateSlot(true);\n\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      // define menu-item context states\n      const menu = this.element.closest('mg-menu');\n      this.direction = this.isItemMore || menu === null ? Direction.HORIZONTAL : menu.direction;\n      this.isInMainMenu = menu !== null && this.element.parentElement.closest('mg-menu-item') === null;\n      if (menu?.size !== undefined) this.size = menu.size;\n\n      if (this.isItemMore) this.size = this.element.dataset.size as MgMenuItem['size'];\n\n      // when main menu item contain an active item it will get the active style\n      // AND if item is in vertical menu it will be expanded\n      if (this.hasActiveChild() && this.isInMainMenu) this.expanded = this.isDirection(Direction.VERTICAL);\n\n      this.updateStatus([Status.ACTIVE]);\n      this.updateDisplayNotificationBadge();\n      this.updatePopoverGuard();\n\n      // manage child dom changes with mutationObserver and listzners\n      this.initListeners();\n\n      // emit loaded event when component is fully loaded\n      this.itemLoaded.emit();\n\n      new MutationObserver(mutationsList => {\n        if (mutationsList.some(mutation => mutation.attributeName === 'hidden')) this.updateStatus([Status.ACTIVE]);\n        if (mutationsList.some(mutation => mutation.type === 'characterData')) this.validateSlot();\n        this.updateDisplayNotificationBadge();\n        this.itemUpdated.emit();\n      }).observe(this.element, { attributes: true, childList: true, characterData: true, subtree: true });\n    }, 0);\n  }\n\n  /**\n   * Render ineractive element\n   * @returns HTML Element\n   */\n  private renderInteractiveElement(): HTMLElement {\n    const TagName: string = this.href !== undefined ? 'a' : 'button';\n    return (\n      <TagName\n        href={this.href}\n        class={this.navigationButtonClassList.join()}\n        tabindex={[Status.DISABLED, Status.HIDDEN].includes(this.status) ? -1 : undefined}\n        disabled={this.status === Status.DISABLED}\n        hidden={this.status === Status.HIDDEN}\n        target={this.href && this.target ? this.target : undefined}\n        aria-expanded={this.hasChildren && this.expanded.toString()}\n        aria-current={this.status === Status.ACTIVE && 'page'}\n        onClick={this.handleElementCLick}\n      >\n        <slot name=\"image\"></slot>\n        <div class={`${this.navigationButton}-center`}>\n          <div class={`${this.navigationButton}-text-content`}>\n            <slot name=\"label\"></slot>\n            {!this.displayNotificationBadge && <slot name=\"information\"></slot>}\n            {this.displayNotificationBadge && (\n              <span class={`${this.navigationButton}-text-content-notification`}>\n                <mg-badge label={this.messages.badgeLabel} value=\"!\" variant=\"text-color\" slot=\"information\"></mg-badge>\n              </span>\n            )}\n            {this.target === '_blank' && [\n              <mg-icon key=\"icon-new-tab\" class={`${this.navigationButton}-new-tab`} icon=\"arrow-up-right-square\"></mg-icon>,\n              <span key=\"a11y-new-tab\" class=\"mg-u-visually-hidden\">\n                {this.messages.openNewTab}\n              </span>,\n            ]}\n          </div>\n          {this.size !== 'regular' && <slot name=\"metadata\"></slot>}\n        </div>\n        {this.hasChildren && this.href === undefined && (\n          <span\n            class={{\n              [`${this.navigationButton}-chevron`]: true,\n              [`${this.navigationButton}-chevron--rotate`]: this.expanded === true,\n            }}\n          >\n            <mg-icon icon=\"chevron-down\" size=\"small\"></mg-icon>\n          </span>\n        )}\n      </TagName>\n    );\n  }\n\n  /**\n   * Render slot\n   * @returns HTML Element\n   */\n  private renderSlot = (): HTMLElement => <slot></slot>;\n\n  /**\n   * Emit event when component is updated\n   */\n  componentShouldUpdate(): Promise<void> {\n    return nextTick(() => {\n      this.itemUpdated.emit();\n    });\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    const getContainerClasses = () => ({\n      ['mg-c-menu-item__collapse-container']: true,\n      ['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu || this.isItemMore) && this.isDirection(Direction.HORIZONTAL),\n    });\n\n    return (\n      <Host role={this.isItemMore ? 'presentation' : 'listitem'}>\n        {this.displayPopover() ? (\n          <mg-popover display={this.expanded} placement=\"bottom-start\" arrowHide={true} onDisplay-change={this.handlePopoverDisplay} identifier={this.getPopoverIdentifier()}>\n            {this.renderInteractiveElement()}\n            <div class={getContainerClasses()} slot=\"content\">\n              {this.renderSlot()}\n            </div>\n          </mg-popover>\n        ) : (\n          [\n            this.renderInteractiveElement(),\n            <div key=\"vertical-container\" class={getContainerClasses()} hidden={!this.expanded}>\n              {this.renderSlot()}\n            </div>,\n          ]\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"mg-action-more.conf.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-action-more/mg-action-more.conf.ts"],"names":[],"mappings":"","sourcesContent":["import { MgBadge } from '../../atoms/mg-badge/mg-badge';\nimport { MgButton } from '../../atoms/mg-button/mg-button';\nimport { MgIcon } from '../../atoms/mg-icon/mg-icon';\nimport { MgMenuItem } from '../menu/mg-menu-item/mg-menu-item';\n\n/**\n * prop icon type\n */\nexport type MgActionMoreIconType = {\n  icon: MgIcon['icon'];\n};\n\n/**\n * prop button type\n */\nexport type MgActionMoreButtonType = {\n  isIcon: MgButton['isIcon'];\n  variant: MgButton['variant'];\n  label?: MgButton['label'];\n  disabled?: MgButton['disabled'];\n};\n\n/**\n * locals message type\n */\nexport type MgActionMoreMessageType = { label: string };\n\n/**\n * prop item type\n */\nexport type MgActionMoreItemType = {\n  label: string;\n  mouseEventHandler: IMouseEventHandler;\n  status?: MgMenuItem['status'];\n  icon?: MgIcon['icon'];\n  href?: MgMenuItem['href'];\n  badge?: Pick<MgBadge, 'value' | 'label'>;\n};\n\n/**\n * MouseEvent callback interface\n */\ntype IMouseEventHandler = (event: MouseEvent) => void;\n"]}
+{"version":3,"file":"mg-action-more.conf.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-action-more/mg-action-more.conf.ts"],"names":[],"mappings":"","sourcesContent":["import type { MgBadge } from '../../atoms/mg-badge/mg-badge';\nimport type { MgButton } from '../../atoms/mg-button/mg-button';\nimport type { MgIcon } from '../../atoms/mg-icon/mg-icon';\nimport type { MgMenuItem } from '../menu/mg-menu-item/mg-menu-item';\n\n/**\n * prop icon type\n */\nexport type MgActionMoreIconType = Pick<MgIcon, 'icon'>;\n\n/**\n * prop button type\n */\nexport type MgActionMoreButtonType = Pick<MgButton, 'isIcon' | 'variant' | 'label' | 'disabled'>;\n\n/**\n * locals message type\n */\nexport type MgActionMoreMessageType = { label: string };\n\n/**\n * prop item type\n */\nexport type MgActionMoreItemType = Pick<MgMenuItem, 'status' | 'href' | 'target'> & {\n  label: string;\n  mouseEventHandler: IMouseEventHandler;\n  icon?: MgIcon['icon'];\n  badge?: Pick<MgBadge, 'value' | 'label'>;\n};\n\n/**\n * MouseEvent callback interface\n */\ntype IMouseEventHandler = (event: MouseEvent) => void;\n"]}