@mgdis/mg-components 6.2.0 → 6.4.0

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":["import { Component, Event, h, Prop, EventEmitter, State, Watch, Element, Method } from '@stencil/core';\nimport { ClassList, allItemsAreString, isValidString, toString } 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; // eslint-disable-line @typescript-eslint/no-explicit-any\n  @Watch('value')\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\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. Passed value: ${toString(newValue)}.`);\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. Passed value: ${toString(newValue)}.`);\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   * Reset value, validity, error and visual state\n   */\n  @Method()\n  async reset(): Promise<void> {\n    if (!this.readonly) {\n      this.value = this.options[0].value;\n      this.errorMessage = undefined;\n      this.valid = undefined;\n      this.setChecked();\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    const checkedItem = this.getCheckedItem(this.checked);\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        tooltip={this.tooltip}\n        tooltipPosition={this.tooltipPosition}\n        errorMessage={this.errorMessage}\n      >\n        {this.readonly ? (\n          checkedItem && <b class=\"mg-c-input__readonly-value\">{checkedItem.title}</b>\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        )}\n      </mg-input>\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":["import { Component, Event, h, Prop, EventEmitter, State, Watch, Element, Method } from '@stencil/core';\nimport { ClassList, allItemsAreString, isValidString, toString } 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; // eslint-disable-line @typescript-eslint/no-explicit-any\n  @Watch('value')\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\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. Passed value: ${toString(newValue)}.`);\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. Passed value: ${toString(newValue)}.`);\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   * Reset value, validity, error and visual state\n   */\n  @Method()\n  async reset(): Promise<void> {\n    if (!this.readonly) {\n      this.value = this.options[0].value;\n      this.errorMessage = undefined;\n      this.valid = undefined;\n      this.setChecked();\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    const checkedItem = this.getCheckedItem(this.checked);\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        tooltip={this.tooltip}\n        tooltipPosition={this.tooltipPosition}\n        errorMessage={this.errorMessage}\n      >\n        {this.readonly ? (\n          checkedItem && <b class=\"mg-c-input__readonly-value\">{checkedItem.title}</b>\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        )}\n      </mg-input>\n    );\n  }\n}\n"]}

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

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { isValidString, nextTick, toString } from "@mgdis/stencil-helpers";
+import { toString } from "@mgdis/stencil-helpers";
 import { OverflowBehavior } from "../../../../utils/behaviors.utils";
 import { Direction, sizes } from "../../menu/mg-menu/mg-menu.conf";
 import { initLocales } from "../../../../locales";
@@ -13,72 +13,13 @@ export class MgItemMore {
          ************/
         this.name = 'mg-item-more';
         /**
-         * Set proxy element properties and listeners
-         * @param proxified - element to proxify from
+         * Define icon
          */
-        this.setProxyElement = (proxified) => {
-            const proxy = this.moreElementMenuItem.querySelector(`[identifier="${proxified.identifier}"]`);
-            if (proxy === null) {
-                return;
-            }
-            // remove proxy id to prevent duplicate key. default html id is: '';
-            if (isValidString(proxy.id))
-                proxy.id = '';
-            const proxyClickHandler = () => {
-                this.parentMenu
-                    .querySelector(`[identifier="${proxy.identifier}"]`)
-                    .shadowRoot.querySelector('a, button')
-                    .dispatchEvent(new MouseEvent('click', { bubbles: true }));
-            };
-            // Watch the `item-updated` event to keep element needeed properties and innerHTML in sync between the proxified and the proxy elements
-            const updateProxy = (element) => {
-                for (const key in element) {
-                    if (['identifier', 'href', 'targer', 'status', 'expanded'].includes(key))
-                        element[key] ? proxy.setAttribute(key, element[key]) : proxy.removeAttribute(key);
-                }
-                proxy.innerHTML = element.innerHTML;
-                // When `href` is updated we need to wait the full component re-render before update its handler
-                setTimeout(() => {
-                    const interactiveElement = proxy.shadowRoot.querySelector('a, button');
-                    interactiveElement === null || interactiveElement === void 0 ? void 0 : interactiveElement.removeEventListener('click', proxyClickHandler);
-                    interactiveElement === null || interactiveElement === void 0 ? void 0 : interactiveElement.addEventListener('click', proxyClickHandler);
-                });
-            };
-            updateProxy(proxified);
-            proxified.addEventListener('item-updated', event => {
-                updateProxy(event.target);
-            });
-            // update click event listener on proxy item and mirror the event on the main menu element
-            // we need to wait mg-menu-item to be loaded to ensure the shadowroot is rendered
-            proxy.addEventListener('item-loaded', () => {
-                updateProxy(proxified);
-            });
-        };
-        /***********
-         * Methods *
-         ***********/
+        this.icon = { icon: 'ellipsis-vertical' };
         /**
-         * render mg-item-more overflow element
-         * @returns mg-item-more element
+         * Define slot label element
          */
-        this.renderMgMenuItemOverflowElement = () => {
-            this.parentMenuItems.forEach((child) => {
-                // create item-more menu items element from main menu-items clones
-                this.moreElementMenuItem.querySelector('mg-menu').appendChild(child.cloneNode(true));
-                // we need to get all `mg-menu-item` linked to the cloned one to set mirror process
-                nextTick(() => {
-                    this.setProxyElement(child);
-                    if (child.querySelector('mg-menu') !== null) {
-                        child.querySelectorAll('mg-menu-item').forEach(this.setProxyElement);
-                    }
-                });
-            });
-            return this.element;
-        };
-        this.icon = { icon: 'ellipsis-vertical' };
         this.slotlabel = { display: false };
-        this.size = undefined;
-        this.parentMenu = undefined;
     }
     validateIcon(newValue) {
         if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.icon !== 'string'))
@@ -123,8 +64,7 @@ export class MgItemMore {
      */
     componentDidUpdate() {
         if (this.parentMenu && this.overflowBehavior === undefined) {
-            this.parentMenuItems = Array.from(this.parentMenu.children).filter(item => item.nodeName === 'MG-MENU-ITEM');
-            this.overflowBehavior = new OverflowBehavior(this.parentMenu, this.renderMgMenuItemOverflowElement);
+            this.overflowBehavior = new OverflowBehavior(this.parentMenu, this.element, this.itemMoreContainer);
         }
     }
     /**
@@ -139,11 +79,11 @@ export class MgItemMore {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: '11c43154129c5756e80db0af3434c88cab2191f3', role: "listitem" }, this.parentMenu && (h("mg-menu-item", { key: '38fc92410328c317fb046f4e1ec4f94175d484fb', "data-overflow-more": true, "data-size": this.parentMenu.size, identifier: "mg-item-more", ref: el => {
-                if (el !== null) {
-                    this.moreElementMenuItem = el;
-                }
-            } }, h("mg-icon", { key: '90e21f30004e38a1a0938359276dccd7458e5e86', icon: this.icon.icon, size: this.size, slot: "image" }), h("span", { key: '20f846c5718a19d39ad94abf59bab54658e1ff9c', class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), h("mg-menu", { key: 'b52f97129e736be9164ae18b717057d1bfc0cd0a', direction: Direction.VERTICAL, label: this.messages.menuLabel, size: this.size })))));
+        const menuItemIdentifier = "mg-item-more";
+        return (h(Host, { key: '522fc142a992fa450b2d102e2c053fcd25704dcc', role: "listitem", "data-mg-popover-guard": `${menuItemIdentifier}-popover` }, this.parentMenu && (h("mg-menu-item", { key: 'c05fb5c0379656b9634beca745b3b74d36c8e46c', "data-overflow-more": true, "data-size": this.parentMenu.size, "data-style-direction": Direction.HORIZONTAL, identifier: menuItemIdentifier }, h("mg-icon", { key: 'e40f07ce8c55c30ef79a42ddb973d884ab289427', icon: this.icon.icon, size: this.size, slot: "image" }), h("span", { key: '3b38b9362a023df9e53733bf810c4f37a0016a93', class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), h("mg-menu", { key: '4f20389326507261356d897dd25e676ac37ca5bb', direction: Direction.VERTICAL, label: this.messages.menuLabel, size: this.size, ref: (ref) => {
+                if (ref !== null)
+                    this.itemMoreContainer = ref;
+            } })))));
     }
     static get is() { return "mg-item-more"; }
     static get encapsulation() { return "shadow"; }
@@ -179,6 +119,8 @@ export class MgItemMore {
                     "tags": [],
                     "text": "Define icon"
                 },
+                "getter": false,
+                "setter": false,
                 "defaultValue": "{ icon: 'ellipsis-vertical' }"
             },
             "slotlabel": {
@@ -201,6 +143,8 @@ export class MgItemMore {
                     "tags": [],
                     "text": "Define slot label element"
                 },
+                "getter": false,
+                "setter": false,
                 "defaultValue": "{ display: false }"
             },
             "size": {
@@ -223,6 +167,8 @@ export class MgItemMore {
                     "tags": [],
                     "text": "Define component child menu size."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "size",
                 "reflect": false
             }

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

@@ -1 +1 @@
-{"version":3,"file":"mg-item-more.js","sourceRoot":"","sources":["../../../../../src/components/molecules/internals/mg-item-more/mg-item-more.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element, Host, Watch, State } from '@stencil/core';\nimport { isValidString, nextTick, toString } from '@mgdis/stencil-helpers';\nimport type { IconType, SizeType, SlotLabelType } from './mg-item-more.conf';\nimport type { MessageType } from '../../../../locales/index.conf';\nimport { OverflowBehavior } from '../../../../utils/behaviors.utils';\nimport { Direction, sizes } from '../../menu/mg-menu/mg-menu.conf';\nimport { initLocales } from '../../../../locales';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'mg-item-more',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-item-more.css',\n  shadow: true,\n})\nexport class MgItemMore {\n  /************\n   * Internal *\n   ************/\n  private readonly name = 'mg-item-more';\n  private messages: MessageType;\n  private parentMenuItems: HTMLMgMenuItemElement[];\n  private moreElementMenuItem: HTMLMgMenuItemElement;\n  private overflowBehavior: OverflowBehavior;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgItemMoreElement;\n\n  /**\n   * Define icon\n   */\n  @Prop() icon?: IconType = { icon: 'ellipsis-vertical' };\n  @Watch('icon')\n  validateIcon(newValue: MgItemMore['icon']): void {\n    if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.icon !== 'string'))\n      throw new Error(`<${this.name}> prop \"icon\" must match MgItemMore['icon'] type. Passed value: ${toString(newValue)}.`);\n  }\n\n  /**\n   * Define slot label element\n   */\n  @Prop() slotlabel?: SlotLabelType = { display: false };\n  @Watch('slotlabel')\n  validateSlotLabel(newValue: MgItemMore['slotlabel']): void {\n    if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.display !== 'boolean'))\n      throw new Error(`<${this.name}> prop \"slotlabel\" must match MgItemMore['slotlabel'] type. Passed value: ${toString(newValue)}.`);\n    else if (typeof newValue.label !== 'string') this.slotlabel.label = this.messages.menuLabel;\n  }\n\n  /**\n   * Define component child menu size.\n   */\n  @Prop() size?: SizeType;\n  @Watch('size')\n  validateSize(newValue: MgItemMore['size']): void {\n    if (newValue && !sizes.includes(newValue)) throw new Error(`<${this.name}> prop \"size\" must match MgItemMore['size'] type. Passed value: ${toString(newValue)}.`);\n  }\n\n  /**\n   * Define component parent menu.\n   */\n  @State() parentMenu: HTMLMgMenuElement;\n\n  /**\n   * Set proxy element properties and listeners\n   * @param proxified - element to proxify from\n   */\n  private setProxyElement = (proxified: HTMLMgMenuItemElement): void => {\n    const proxy: HTMLMgMenuItemElement = this.moreElementMenuItem.querySelector(`[identifier=\"${proxified.identifier}\"]`);\n    if (proxy === null) {\n      return;\n    }\n\n    // remove proxy id to prevent duplicate key. default html id is: '';\n    if (isValidString(proxy.id)) proxy.id = '';\n\n    const proxyClickHandler = (): void => {\n      this.parentMenu\n        .querySelector(`[identifier=\"${proxy.identifier}\"]`)\n        .shadowRoot.querySelector('a, button')\n        .dispatchEvent(new MouseEvent('click', { bubbles: true }));\n    };\n\n    // Watch the `item-updated` event to keep element needeed properties and innerHTML in sync between the proxified and the proxy elements\n    const updateProxy = (element: HTMLMgMenuItemElement): void => {\n      for (const key in element) {\n        if (['identifier', 'href', 'targer', 'status', 'expanded'].includes(key)) element[key] ? proxy.setAttribute(key, element[key]) : proxy.removeAttribute(key);\n      }\n\n      proxy.innerHTML = element.innerHTML;\n      // When `href` is updated we need to wait the full component re-render before update its handler\n      setTimeout(() => {\n        const interactiveElement = proxy.shadowRoot.querySelector('a, button');\n        interactiveElement?.removeEventListener('click', proxyClickHandler);\n        interactiveElement?.addEventListener('click', proxyClickHandler);\n      });\n    };\n\n    updateProxy(proxified);\n\n    proxified.addEventListener('item-updated', event => {\n      updateProxy(event.target);\n    });\n\n    // update click event listener on proxy item and mirror the event on the main menu element\n    // we need to wait mg-menu-item to be loaded to ensure the shadowroot is rendered\n    proxy.addEventListener('item-loaded', () => {\n      updateProxy(proxified);\n    });\n  };\n\n  /***********\n   * Methods *\n   ***********/\n\n  /**\n   * render mg-item-more overflow element\n   * @returns mg-item-more element\n   */\n  private renderMgMenuItemOverflowElement = (): HTMLMgItemMoreElement => {\n    this.parentMenuItems.forEach((child: HTMLMgMenuItemElement) => {\n      // create item-more menu items element from main menu-items clones\n      this.moreElementMenuItem.querySelector('mg-menu').appendChild(child.cloneNode(true));\n\n      // we need to get all `mg-menu-item` linked to the cloned one to set mirror process\n      nextTick(() => {\n        this.setProxyElement(child);\n        if (child.querySelector('mg-menu') !== null) {\n          child.querySelectorAll('mg-menu-item').forEach(this.setProxyElement);\n        }\n      });\n    });\n\n    return this.element;\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Set variables and validate props\n   */\n  componentWillLoad(): void {\n    // init variables\n    this.messages = initLocales(this.element).messages.itemMore as MessageType;\n\n    // validate props\n    this.validateIcon(this.icon);\n    this.validateSlotLabel(this.slotlabel);\n    this.validateSize(this.size);\n  }\n\n  /**\n   * Ensure parent DOM is fully rendered with timeout method before parse elements\n   * @returns timeout\n   */\n  componentDidLoad(): ReturnType<typeof setTimeout> {\n    // ensure parent menu is fully rendered\n    return setTimeout(() => {\n      this.parentMenu = this.element.closest('mg-menu');\n    });\n  }\n\n  /**\n   * Set OverflowBehavior when parentMenu state is upate AND defined\n   */\n  componentDidUpdate(): void {\n    if (this.parentMenu && this.overflowBehavior === undefined) {\n      this.parentMenuItems = Array.from(this.parentMenu.children).filter(item => item.nodeName === 'MG-MENU-ITEM') as HTMLMgMenuItemElement[];\n      this.overflowBehavior = new OverflowBehavior(this.parentMenu, this.renderMgMenuItemOverflowElement);\n    }\n  }\n\n  /**\n   * Disconnect overflow ResizeObserver\n   */\n  disconnectedCallback(): void {\n    this.overflowBehavior?.disconnect();\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <Host role=\"listitem\">\n        {this.parentMenu && (\n          <mg-menu-item\n            data-overflow-more\n            data-size={this.parentMenu.size}\n            identifier=\"mg-item-more\"\n            ref={el => {\n              if (el !== null) {\n                this.moreElementMenuItem = el;\n              }\n            }}\n          >\n            <mg-icon icon={this.icon.icon} size={this.size} slot=\"image\"></mg-icon>\n            <span class={{ 'mg-u-visually-hidden': !this.slotlabel.display }} slot=\"label\">\n              {this.slotlabel.label}\n            </span>\n            <mg-menu direction={Direction.VERTICAL} label={this.messages.menuLabel} size={this.size}></mg-menu>\n          </mg-menu-item>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"mg-item-more.js","sourceRoot":"","sources":["../../../../../src/components/molecules/internals/mg-item-more/mg-item-more.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element, Host, Watch, State } from '@stencil/core';\nimport { toString } from '@mgdis/stencil-helpers';\nimport type { IconType, SizeType, SlotLabelType } from './mg-item-more.conf';\nimport type { MessageType } from '../../../../locales/index.conf';\nimport { OverflowBehavior } from '../../../../utils/behaviors.utils';\nimport { Direction, sizes } from '../../menu/mg-menu/mg-menu.conf';\nimport { initLocales } from '../../../../locales';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'mg-item-more',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-item-more.css',\n  shadow: true,\n})\nexport class MgItemMore {\n  /************\n   * Internal *\n   ************/\n  private readonly name = 'mg-item-more';\n  private messages: MessageType;\n  private overflowBehavior: OverflowBehavior;\n  private itemMoreContainer: HTMLMgMenuElement\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgItemMoreElement;\n\n  /**\n   * Define icon\n   */\n  @Prop() icon?: IconType = { icon: 'ellipsis-vertical' };\n  @Watch('icon')\n  validateIcon(newValue: MgItemMore['icon']): void {\n    if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.icon !== 'string'))\n      throw new Error(`<${this.name}> prop \"icon\" must match MgItemMore['icon'] type. Passed value: ${toString(newValue)}.`);\n  }\n\n  /**\n   * Define slot label element\n   */\n  @Prop() slotlabel?: SlotLabelType = { display: false };\n  @Watch('slotlabel')\n  validateSlotLabel(newValue: MgItemMore['slotlabel']): void {\n    if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.display !== 'boolean'))\n      throw new Error(`<${this.name}> prop \"slotlabel\" must match MgItemMore['slotlabel'] type. Passed value: ${toString(newValue)}.`);\n    else if (typeof newValue.label !== 'string') this.slotlabel.label = this.messages.menuLabel;\n  }\n\n  /**\n   * Define component child menu size.\n   */\n  @Prop() size?: SizeType;\n  @Watch('size')\n  validateSize(newValue: MgItemMore['size']): void {\n    if (newValue && !sizes.includes(newValue)) throw new Error(`<${this.name}> prop \"size\" must match MgItemMore['size'] type. Passed value: ${toString(newValue)}.`);\n  }\n\n  /**\n   * Define component parent menu.\n   */\n  @State() parentMenu: HTMLMgMenuElement;\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Set variables and validate props\n   */\n  componentWillLoad(): void {\n    // init variables\n    this.messages = initLocales(this.element).messages.itemMore as MessageType;\n\n    // validate props\n    this.validateIcon(this.icon);\n    this.validateSlotLabel(this.slotlabel);\n    this.validateSize(this.size);\n  }\n\n  /**\n   * Ensure parent DOM is fully rendered with timeout method before parse elements\n   * @returns timeout\n   */\n  componentDidLoad(): ReturnType<typeof setTimeout> {\n    // ensure parent menu is fully rendered\n    return setTimeout(() => {\n      this.parentMenu = this.element.closest('mg-menu');\n    });\n  }\n\n  /**\n   * Set OverflowBehavior when parentMenu state is upate AND defined\n   */\n  componentDidUpdate(): void {\n    if (this.parentMenu && this.overflowBehavior === undefined) {\n      this.overflowBehavior = new OverflowBehavior(this.parentMenu, this.element, this.itemMoreContainer);\n    }\n  }\n\n  /**\n   * Disconnect overflow ResizeObserver\n   */\n  disconnectedCallback(): void {\n    this.overflowBehavior?.disconnect();\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    const menuItemIdentifier = \"mg-item-more\"\n    return (\n      <Host role=\"listitem\" data-mg-popover-guard={`${menuItemIdentifier}-popover`}>\n        {this.parentMenu && (\n          <mg-menu-item\n            data-overflow-more\n            data-size={this.parentMenu.size}\n            data-style-direction={Direction.HORIZONTAL}\n            identifier={menuItemIdentifier}\n          >\n            <mg-icon icon={this.icon.icon} size={this.size} slot=\"image\"></mg-icon>\n            <span class={{ 'mg-u-visually-hidden': !this.slotlabel.display }} slot=\"label\">\n              {this.slotlabel.label}\n            </span>\n            <mg-menu direction={Direction.VERTICAL} label={this.messages.menuLabel} size={this.size} ref={(ref) => {if (ref !== null) this.itemMoreContainer = ref}}></mg-menu>\n          </mg-menu-item>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -10,91 +10,66 @@ export class MgMenu {
          * Internal *
          ************/
         this.name = 'mg-menu';
-        this.menuItems = [];
-        this.focusedMenuItem = 0;
-        /*************
-         * Methods *
-         *************/
         /**
-         * Close matching menu-item
-         * @param item - menu-item to close
-         * @param condition - addionnal condition
+         * Component display direction.
          */
-        this.closeMenuItem = (item, condition) => {
-            if (!this.isChildMenu && condition) {
-                item.expanded = false;
-            }
-        };
+        this.direction = Direction.HORIZONTAL;
         /**
-         * get mg-item-more child mg-menu-item element
-         * @returns mg-menu-item element
+         * Define mg-menu size
          */
-        this.getItemMoreMenuItem = () => { var _a, _b; return (_b = (_a = this.itemMoreElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('mg-menu-item'); };
+        this.size = 'medium';
+        /*************
+         * Methods *
+         *************/
         /**
-         * Set item listend
-         * @param item - mg-menu-item element
-         * @param index - number
+         * Test if menu is a child menu
+         * @returns truthy if menu is a child menu
          */
-        this.setItemListener = (item, index) => {
-            ['click', 'focus'].forEach(trigger => {
-                item.shadowRoot.querySelector('button,a').addEventListener(trigger, () => {
-                    this.focusedMenuItem = index;
-                    // reset expanded on previous active menu item
-                    const itemMoreMenuItem = this.getItemMoreMenuItem();
-                    (![null, undefined].includes(itemMoreMenuItem) ? [...this.menuItems, itemMoreMenuItem] : this.menuItems).forEach((item, index) => {
-                        this.closeMenuItem(item, index !== this.focusedMenuItem);
-                    });
-                });
-            });
-        };
+        this.isChildMenu = () => this.element.closest('mg-menu-item') !== null;
         /**
-         * Store menu-items on component init and add listeners
+         * Get menu children items
+         * @returns menu children mg-menu-item
          */
-        this.initMenuItemsListeners = () => {
-            // add listeners on menu item and edit index
-            this.menuItems.forEach((item, index) => {
-                this.setItemListener(item, index);
-            });
+        this.getMenuItems = (menu = this.element) => {
+            var _a, _b;
+            const menuItems = Array.from(menu.children).filter(child => child.nodeName === 'MG-MENU-ITEM');
+            const itemMoreMenuItem = (_b = (_a = menu.querySelector('mg-item-more')) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('mg-menu-item');
+            if (itemMoreMenuItem) {
+                menuItems.push(itemMoreMenuItem);
+            }
+            return menuItems;
         };
         /**
-         * Handle item-loaded event on mg-item-more element
+         * Update menu items
          */
-        this.handleItemLoaded = () => {
-            this.setItemListener(this.getItemMoreMenuItem(), this.menuItems.length);
+        this.updateMenuItems = () => {
+            this.getMenuItems().forEach((item) => {
+                item.dataset.styleDirection = this.direction;
+            });
+            // render mg-item-more to manage OverflowBehavior
+            this.renderMgItemMore();
         };
         /**
          * render mg-item-more
          */
         this.renderMgItemMore = () => {
             var _a;
-            if (this.direction !== Direction.HORIZONTAL || this.isChildMenu || this.element.children.length <= 1) {
+            if (this.direction === Direction.VERTICAL || this.direction === Direction.HORIZONTAL && this.isChildMenu() || this.element.children.length <= 1) {
                 return;
             }
             // Insert mg-item-more outside the mg-menu shadowdom
-            if (this.itemMoreElement === undefined) {
-                this.itemMoreElement = document.createElement('mg-item-more');
-                this.itemMoreElement.addEventListener('item-loaded', this.handleItemLoaded);
-                this.element.appendChild(this.itemMoreElement);
+            let itemMoreElement = this.element.querySelector('mg-item-more');
+            if (itemMoreElement === null) {
+                itemMoreElement = document.createElement('mg-item-more');
+                this.element.appendChild(itemMoreElement);
             }
             // update mg-item-more props
-            for (const attribute in this.itemmore) {
-                const newValue = this.itemmore[attribute];
-                // to improve rendering we use HTML attributes as much as possible
-                if (['string', 'number'].includes(typeof newValue)) {
-                    this.itemMoreElement.setAttribute(attribute, newValue);
-                }
-                else {
-                    this.itemMoreElement[attribute] = newValue;
-                }
+            for (const propertie in this.itemmore) {
+                itemMoreElement[propertie] = this.itemmore[propertie];
             }
             if (((_a = this.itemmore) === null || _a === void 0 ? void 0 : _a.size) === undefined)
-                this.itemMoreElement.size = this.size;
+                itemMoreElement.size = this.size;
         };
-        this.label = undefined;
-        this.direction = Direction.HORIZONTAL;
-        this.itemmore = undefined;
-        this.size = 'medium';
-        this.isChildMenu = undefined;
     }
     validateLabel(newValue) {
         if (newValue === undefined && !this.element.hasAttribute('aria-label')) {
@@ -105,6 +80,9 @@ export class MgMenu {
         if (![Direction.VERTICAL, Direction.HORIZONTAL].includes(newValue)) {
             throw new Error(`<${this.name}> prop "direction" must be one of: ${Direction.HORIZONTAL}, ${Direction.VERTICAL}. Passed value: ${toString(newValue)}.`);
         }
+        else {
+            this.updateMenuItems();
+        }
     }
     validateItemMore(newValue) {
         if (newValue !== undefined && this.direction !== Direction.HORIZONTAL) {
@@ -119,6 +97,27 @@ export class MgMenu {
             throw new Error(`<${this.name}> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${toString(newValue)}.`);
         }
     }
+    /**
+     * Define mg-menu-item listener when they are loaded
+     * @param event - mg-item-loaded "item-loaded" custom event
+     */
+    updateItemListener(event) {
+        const itemToWatch = event.target.nodeName === 'MG-ITEM-MORE' ? event.target.shadowRoot.querySelector('mg-menu-item') : event.target;
+        ['click', 'focus'].forEach(trigger => {
+            itemToWatch.addEventListener(trigger, () => {
+                const focusedItem = event.target.closest('mg-menu').querySelector('[data-has-focus]');
+                // exit process if new focused item in the current menu children
+                if (focusedItem === itemToWatch)
+                    return;
+                // reset expanded on previous active menu item
+                if (focusedItem)
+                    focusedItem.removeAttribute("data-has-focus");
+                // update focusedMenuItem with new value
+                itemToWatch.setAttribute('data-has-focus', 'true');
+            });
+        });
+    }
+    ;
     /*************
      * Lifecycle *
      *************/
@@ -133,37 +132,38 @@ export class MgMenu {
     }
     /**
      * Check if component slots configuration
-     * @returns timeout
      */
     componentDidLoad() {
-        // update props and states after componentDidLoad hook
-        // return a promise to process action only in the FIRST render().
-        // https://stenciljs.com/docs/component-lifecycle#componentwillload
-        return setTimeout(() => {
-            // store all menu-items
-            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
-            // 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();
-            }).observe(this.element, { childList: true });
-        });
-    }
-    /**
-     * Add listeners to items
-     */
-    componentDidRender() {
-        this.initMenuItemsListeners();
+        // set menu-items
+        this.updateMenuItems();
+        // add listener to close main menu when focus leave it
+        if (!this.isChildMenu() && this.direction === Direction.HORIZONTAL) {
+            document.addEventListener('focusin', (event) => {
+                const isElementChild = (element) => {
+                    if (element === this.element)
+                        return true;
+                    else if (!element.parentElement)
+                        return false;
+                    else
+                        return isElementChild(element.parentElement);
+                };
+                if (!event.target.closest('mg-menu') || !isElementChild(event.target)) {
+                    const focusedItem = this.element.querySelector('[data-has-focus]');
+                    // reset expanded on previous active menu item
+                    if (focusedItem)
+                        focusedItem.removeAttribute('data-has-focus');
+                }
+            });
+        }
+        // add mutation observer to improve global reactivity
+        new MutationObserver(this.updateMenuItems).observe(this.element, { childList: true });
     }
     /**
      * Render
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: '550624e40ec66eeb90f8bc4ac1590adcbaa20dfd', role: "list", "aria-label": this.label }, h("slot", { key: 'bf6f5ac748fd45e250c02d93cc7cf72e4580de3b' })));
+        return (h(Host, { key: 'eb78530a80f841391df90167523b6d446cd5405e', role: "list", "aria-label": this.label }, h("slot", { key: '1a8839c831a81915de8a5b03ebe1481a32762217' })));
     }
     static get is() { return "mg-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -193,6 +193,8 @@ export class MgMenu {
                     "tags": [],
                     "text": "Menu label. Include short menu description.\nRequired to define accessibility required attribute `aria-label`"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false
             },
@@ -216,6 +218,8 @@ export class MgMenu {
                     "tags": [],
                     "text": "Component display direction."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "direction",
                 "reflect": true,
                 "defaultValue": "Direction.HORIZONTAL"
@@ -239,7 +243,9 @@ export class MgMenu {
                 "docs": {
                     "tags": [],
                     "text": "Customize \"mg-item-more\" element\nUsed with direction: 'vertical' to manage overflow"
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "size": {
                 "type": "string",
@@ -261,17 +267,14 @@ export class MgMenu {
                     "tags": [],
                     "text": "Define mg-menu size"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "size",
                 "reflect": false,
                 "defaultValue": "'medium'"
             }
         };
     }
-    static get states() {
-        return {
-            "isChildMenu": {}
-        };
-    }
     static get elementRef() { return "element"; }
     static get watchers() {
         return [{
@@ -288,5 +291,14 @@ export class MgMenu {
                 "methodName": "validateSize"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "item-loaded",
+                "method": "updateItemListener",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 //# sourceMappingURL=mg-menu.js.map