@mgdis/mg-components 5.18.0 → 5.19.1

package/dist/components/mg-input-toggle.js.map

@@ -1 +1 @@
-{"file":"mg-input-toggle.js","mappings":"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","names":["MgInputToggle"],"sources":["src/components/molecules/inputs/mg-input-toggle/mg-input-toggle.scss?tag=mg-input-toggle&encapsulation=shadow","src/components/molecules/inputs/mg-input-toggle/mg-input-toggle.tsx"],"sourcesContent":["@use '../styles/mg-input.scss';\n@use '../../../../styles/a11y.scss';\n\n/**\n* Toogle\n*/\n\n// variables\n$color-light-blue: hsl(var(--color-info-h) calc(var(--color-info-s) - 64%) calc(var(--color-info-l) + 55%));\n$color-light-dark: hsl(var(--color-dark-h) calc(var(--color-dark-s) - 30%) calc(var(--color-dark-l) + 75%));\n$button-toggle-padding: 0.2rem;\n$toggle-item-container-padding-vertical: 0.5rem;\n\n.mg-input.mg-input.mg-input--toggle .mg-input__input-container {\n  flex: auto;\n  min-width: 0;\n}\n\n.mg-input__button-toggle {\n  // Display\n  display: flex;\n  padding: $button-toggle-padding;\n  min-width: 0;\n  // Decoration\n  background-color: hsl(var(--color-light));\n  border-width: var(--mg-inputs-border-width);\n  border-style: solid;\n  border-color: var(--mg-inputs-color);\n  border-radius: calc(\n    ((var(--font-size) * var(--line-height)) + (2 * ($button-toggle-padding + $toggle-item-container-padding-vertical + var(--mg-inputs-border-width)))) /\n      var(--mg-input-toggle-border-radius-ratio)\n  );\n  // Font\n  font-family: var(--font-family);\n  font-size: inherit;\n  line-height: inherit;\n\n  cursor: pointer;\n  &:disabled {\n    cursor: default;\n  }\n}\n\n.mg-input__toggle-item-container {\n  padding: $toggle-item-container-padding-vertical 0.9rem;\n  border: 0;\n  box-sizing: border-box;\n  border-radius: calc(((var(--font-size) * var(--line-height)) + (2 * $toggle-item-container-padding-vertical)) / var(--mg-input-toggle-border-radius-ratio));\n\n  background-color: unset;\n  font-weight: unset;\n  color: hsl(var(--color-dark));\n\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  &:first-of-type {\n    font-weight: 600;\n    color: hsl(var(--color-info));\n    background-color: $color-light-blue;\n  }\n}\n\n// toggle default active variation\n.mg-input.mg-input--toggle-is-active {\n  .mg-input__toggle-item-container {\n    &:first-of-type {\n      background-color: unset;\n      font-weight: unset;\n      color: hsl(var(--color-dark));\n    }\n    &:last-of-type {\n      font-weight: 600;\n      color: hsl(var(--color-info));\n      background-color: $color-light-blue;\n    }\n  }\n}\n\n// icon\n.mg-input.mg-input--toggle-icon .mg-input__toggle-item-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: calc(((var(--font-size) * var(--line-height)) + (2 * $toggle-item-container-padding-vertical)));\n  height: calc(((var(--font-size) * var(--line-height)) + (2 * $toggle-item-container-padding-vertical)));\n  padding: 0;\n  visibility: hidden;\n\n  &:first-of-type {\n    visibility: visible;\n  }\n\n  ::slotted(mg-icon) {\n    display: flex;\n  }\n}\n\n.mg-input.mg-input--toggle-icon.mg-input--toggle-is-active .mg-input__toggle-item-container {\n  &:first-of-type {\n    visibility: hidden;\n  }\n\n  &:last-of-type {\n    visibility: visible;\n  }\n}\n\n// on/off\n.mg-input.mg-input--toggle-on-off {\n  .mg-input__toggle-item-container:first-of-type {\n    font-weight: 600;\n    color: hsl(var(--color-dark));\n    background-color: $color-light-dark;\n  }\n\n  &.mg-input--toggle-is-active .mg-input__toggle-item-container:first-of-type {\n    background-color: unset;\n    font-weight: unset;\n    color: hsl(var(--color-dark));\n  }\n}\n\n// readonly\n.mg-input.mg-input--toggle-readonly {\n  .mg-input__button-toggle {\n    border-color: transparent;\n    background-color: transparent;\n    cursor: initial;\n  }\n\n  .mg-input__toggle-item-container:last-of-type {\n    display: none;\n  }\n\n  &.mg-input--toggle-is-active .mg-input__toggle-item-container {\n    &:first-of-type {\n      display: none;\n    }\n\n    &:last-of-type {\n      display: flex;\n    }\n  }\n}\n","/* 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 } from '@stencil/core';\nimport { MgInput } from '../MgInput';\nimport { ClassList, allItemsAreString } from '../../../../utils/components.utils';\nimport { ToggleValue } from './mg-input-toggle.conf';\n\n/**\n * type Option validation function\n * @param option - radio option\n * @returns toggle option type is valid\n */\nconst isOption = (option: ToggleValue): boolean => typeof option === 'object' && typeof option.title === 'string' && option.value !== undefined;\n\n@Component({\n  tag: 'mg-input-toggle',\n  styleUrl: 'mg-input-toggle.scss',\n  shadow: true,\n})\nexport class MgInputToggle {\n  /************\n   * Internal *\n   ************/\n\n  // Classes\n  private classReadonly = 'mg-input--toggle-readonly';\n  private classDisabled = 'mg-input--toggle-disabled';\n  private classIsActive = 'mg-input--toggle-is-active';\n  private classOnOff = 'mg-input--toggle-on-off';\n  private classIcon = 'mg-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: string[] | ToggleValue[]): 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 as string[])) {\n      this.options = (newValue as string[]).map(item => ({ title: item, value: item }));\n    }\n    // Object array\n    else if (newValue && (newValue as ToggleValue[]).every(item => isOption(item))) {\n      this.options = newValue as ToggleValue[];\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: boolean): 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: boolean): 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  handleReadonly(newValue: boolean): void {\n    if (newValue) this.classCollection.add(this.classReadonly);\n    else this.classCollection.delete(this.classReadonly);\n  }\n\n  /**\n   * Define if input is disabled\n   */\n  @Prop() disabled = false;\n  @Watch('disabled')\n  handleDisabled(newValue: boolean): 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   * 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-input--toggle']);\n\n  /**\n   * Formated items for display\n   */\n  @State() options: ToggleValue[];\n\n  /**\n   * Checked internal value\n   */\n  @State() checked = false;\n  @Watch('checked')\n  handleChecked(newValue: boolean): 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.options[newValue ? 1 : 0].value;\n  }\n\n  /**\n   * Emited event when value change\n   */\n  @Event({ eventName: 'value-change' }) valueChange: EventEmitter<any>;\n\n  /**\n   * Emited event when checking validity\n   */\n  @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<boolean>;\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   * 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.handleReadonly(this.readonly);\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={undefined}\n        mgWidth={undefined}\n        disabled={this.disabled}\n        value={this.value as string}\n        readonlyValue={undefined}\n        tooltip={!this.readonly && this.tooltip}\n        helpText={this.helpText}\n        errorMessage={undefined}\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-input__button-toggle\"\n          disabled={this.disabled || this.readonly}\n          onClick={this.toggleChecked}\n        >\n          <span aria-hidden=\"true\" class=\"mg-input__toggle-item-container\">\n            <slot name=\"item-1\"></slot>\n          </span>\n          <span aria-hidden=\"true\" class=\"mg-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","mappings":"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","names":["MgInputToggle"],"sources":["../styles/dist/components/mg-input-toggle.css?tag=mg-input-toggle&encapsulation=shadow","src/components/molecules/inputs/mg-input-toggle/mg-input-toggle.tsx"],"sourcesContent":[":host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;max-width:100%;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input mg-input-title{width:var(--mg-inputs-title-width, auto);flex-shrink:var(--mg-inputs-shrink, 1);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;margin-top:.2rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>strong{display:inline-block;min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-c-input__input-container .mg-c-input__help-text,.mg-c-input__input-container .mg-c-input__error{font-size:1.2rem;text-align:start}.mg-c-input.mg-c-input--label-on-top{flex-direction:column}.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-container{width:100%}.mg-c-input__title{display:flex;align-items:baseline;margin-bottom:.3rem}.mg-c-input__title mg-input-title{width:auto;flex-shrink:1;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-c-input__title mg-tooltip{margin-top:0}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__input{display:flex}.mg-c-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input.mg-c-input__input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}.mg-c-input__input+.mg-c-input__help-text,.mg-c-input__input+.mg-c-input__error{margin-top:.5rem}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--toggle-disabled .mg-c-input__input .mg-c-input__button-toggle,.mg-c-input.mg-c-input--checkbox-multi-disabled .mg-c-input__input strong{opacity:var(--mg-disabled-opacity)}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-input__toggle-item-container{overflow:hidden;box-sizing:border-box;padding:.5rem .9rem;border:0;border-radius:calc((var(--font-size)*var(--line-height) + 1rem)/var(--mg-input-toggle-border-radius-ratio));background-color:unset;color:hsl(var(--color-dark));font-weight:unset;text-overflow:ellipsis;white-space:nowrap}.mg-c-input__toggle-item-container:first-of-type{background-color:hsl(var(--color-info-h), calc(var(--color-info-s) - 64%), calc(var(--color-info-l) + 55%));color:hsl(var(--color-info));font-weight:600}.mg-c-input__button-toggle{display:flex;min-width:0;padding:.2rem;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:calc((var(--font-size)*var(--line-height) + 2*(.7rem + var(--mg-inputs-border-width)))/var(--mg-input-toggle-border-radius-ratio));background-color:hsl(var(--color-light));cursor:pointer;font-family:var(--font-family);font-size:inherit;line-height:inherit}.mg-c-input__button-toggle:disabled{cursor:default}.mg-c-input.mg-c-input--toggle .mg-c-input__input-container{min-width:0;flex:auto}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:hsl(var(--color-dark));font-weight:unset}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{background-color:hsl(var(--color-info-h), calc(var(--color-info-s) - 64%), calc(var(--color-info-l) + 55%));color:hsl(var(--color-info));font-weight:600}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container{display:flex;width:calc(var(--font-size)*var(--line-height) + 1rem);height:calc(var(--font-size)*var(--line-height) + 1rem);align-items:center;justify-content:center;padding:0;visibility:hidden}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container:first-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container ::slotted(mg-icon){display:flex}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{visibility:hidden}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-readonly .mg-c-input__button-toggle{border-color:rgba(0,0,0,0);background-color:rgba(0,0,0,0);cursor:initial}.mg-c-input.mg-c-input--toggle-readonly .mg-c-input__toggle-item-container:last-of-type{display:none}.mg-c-input.mg-c-input--toggle-readonly.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{display:none}.mg-c-input.mg-c-input--toggle-readonly.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{display:flex}.mg-c-input.mg-c-input--toggle-on-off .mg-c-input__toggle-item-container:first-of-type{background-color:hsl(var(--color-dark-h), calc(var(--color-dark-s) - 30%), calc(var(--color-dark-l) + 75%));color:hsl(var(--color-dark));font-weight:600}.mg-c-input.mg-c-input--toggle-on-off.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:hsl(var(--color-dark));font-weight:unset}/*# sourceMappingURL=mg-input-toggle.css.map */\n","/* 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 '../../../../utils/components.utils';\nimport { ToggleValue } from './mg-input-toggle.conf';\n\n/**\n * type Option validation function\n * @param option - radio option\n * @returns toggle option type is valid\n */\nconst isOption = (option: ToggleValue): boolean => typeof option === 'object' && typeof option.title === 'string' && option.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 classReadonly = 'mg-c-input--toggle-readonly';\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: string[] | ToggleValue[]): 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 as string[])) {\n      this.options = (newValue as string[]).map(item => ({ title: item, value: item }));\n    }\n    // Object array\n    else if (newValue && (newValue as ToggleValue[]).every(item => isOption(item))) {\n      this.options = newValue as ToggleValue[];\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: boolean): 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: boolean): 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  handleReadonly(newValue: boolean): void {\n    if (newValue) this.classCollection.add(this.classReadonly);\n    else this.classCollection.delete(this.classReadonly);\n  }\n\n  /**\n   * Define if input is disabled\n   */\n  @Prop() disabled = false;\n  @Watch('disabled')\n  handleDisabled(newValue: boolean): 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   * 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: boolean): 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.options[newValue ? 1 : 0].value;\n  }\n\n  /**\n   * Emited event when value change\n   */\n  @Event({ eventName: 'value-change' }) valueChange: EventEmitter<any>;\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   * 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.handleReadonly(this.readonly);\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={undefined}\n        mgWidth={undefined}\n        disabled={this.disabled}\n        value={this.value as string}\n        readonlyValue={undefined}\n        tooltip={!this.readonly && this.tooltip}\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}

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

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { i as initLocales } from './index2.js';
 import { D as Direction } from './mg-menu.conf.js';
+import { i as isValidString } from './components.utils.js';
 import { d as defineCustomElement$9 } from './mg-badge2.js';
 import { d as defineCustomElement$8 } from './mg-button2.js';
 import { d as defineCustomElement$7 } from './mg-card2.js';
@@ -75,7 +76,8 @@ class OverflowBehavior {
       const acc = { accWidth: 0, previousItem: null };
       [...this._baseChildren, this._moreElement].forEach((child) => {
         acc.accWidth += child.offsetWidth;
-        const isPreviousItemHidden = acc.previousItem !== null && acc.previousItem.getAttribute('hidden') !== null;
+        const hasPreviuosItem = acc.previousItem !== null;
+        const isPreviousItemHidden = hasPreviuosItem && acc.previousItem.getAttribute('hidden') !== null;
         // if previous item is hidden AND is NOT more element we hidde current
         // OR if item has an overflow we hidde current
         // OR if current item is more element AND have NOT previous hidden items, current more element item is an hidden item
@@ -150,7 +152,7 @@ class OverflowBehavior {
   }
 }
 
-const mgItemMoreCss = ".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}:host{display:flex}";
+const mgItemMoreCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}:host:not([hidden]){display:flex}";
 
 const MgItemMore$1 = /*@__PURE__*/ proxyCustomElement(class MgItemMore extends HTMLElement {
   constructor() {
@@ -184,7 +186,7 @@ const MgItemMore$1 = /*@__PURE__*/ proxyCustomElement(class MgItemMore extends H
             navElement.click();
         });
         // add id suffix to prevent duplicate key. default html id is: '';
-        if (proxy.id.trim() !== '')
+        if (isValidString(proxy.id))
           proxy.id = `${proxy.id}-proxy`;
         // manage status change miror in proxy
         allMenuItem[index].addEventListener('status-change', (event) => {
@@ -245,7 +247,7 @@ const MgItemMore$1 = /*@__PURE__*/ proxyCustomElement(class MgItemMore extends H
    * @returns HTML Element
    */
   render() {
-    return (h(Host, { role: "listitem" }, h("mg-menu-item", { "data-overflow-more": true, "data-size": this.parentMenu.size }, h("mg-icon", { icon: this.icon.icon, slot: "image" }), h("span", { class: { 'sr-only': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), h("mg-menu", { direction: Direction.VERTICAL, label: this.messages.moreLabel, size: this.size }))));
+    return (h(Host, { role: "listitem" }, h("mg-menu-item", { "data-overflow-more": true, "data-size": this.parentMenu.size }, h("mg-icon", { icon: this.icon.icon, slot: "image" }), h("span", { class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), h("mg-menu", { direction: Direction.VERTICAL, label: this.messages.moreLabel, size: this.size }))));
   }
   get element() { return this; }
   static get watchers() { return {

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

@@ -1 +1 @@
-{"file":"mg-item-more.js","mappings":"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","names":["MgItemMore"],"sources":["src/utils/behaviors.utils.ts","src/components/molecules/mg-item-more/mg-item-more.scss?tag=mg-item-more&encapsulation=shadow","src/components/molecules/mg-item-more/mg-item-more.tsx"],"sourcesContent":["/**\n * MgItemMore type guard\n * @param element - element to control type\n * @returns truthy if element is mg-item-more\n */\nconst isMgItemMore = (element: HTMLElement): element is HTMLMgItemMoreElement => element.nodeName === 'MG-ITEM-MORE';\n\nexport enum OverflowBehaviorElements {\n  BASE_INDEX = 'data-overflow-base-index',\n  PROXY_INDEX = 'data-overflow-proxy-index',\n}\n\nexport class OverflowBehavior {\n  // variables\n  private _resizeObserver: ResizeObserver;\n  private _moreElement: HTMLElement;\n  private _baseChildren: Element[];\n  private _proxyChildren: Element[];\n\n  constructor(private element: Element, private render: () => HTMLElement) {\n    if (this._resizeObserver === undefined) {\n      // add resize observer\n      this._resizeObserver = new ResizeObserver(entries => {\n        entries.forEach(entry => {\n          this.run(entry.contentRect.width);\n        });\n      });\n      this._resizeObserver.observe(this.element);\n    }\n    this.run();\n  }\n\n  /**********\n   * Public *\n   **********/\n\n  /**\n   * Disconnect ResizeObserver\n   */\n  public disconnect = (): void => {\n    this._resizeObserver.disconnect();\n  };\n\n  /************\n   * Internal *\n   ************/\n\n  /**\n   * run overflow behavior\n   * @param width - width of the container. Optional.\n   */\n  private run = (width?: number): void => {\n    if (this._moreElement === undefined) {\n      // set moreElement\n      this._moreElement = this.render();\n\n      // set children\n      this._baseChildren = this.getInteractiveItems(this.element);\n      if (isMgItemMore(this._moreElement)) {\n        this._proxyChildren = this.getInteractiveItems(this._moreElement.shadowRoot.querySelector('mg-menu'));\n      }\n\n      // update children\n      this._baseChildren.forEach((child, index) => {\n        child.setAttribute(OverflowBehaviorElements.BASE_INDEX, `${index}`);\n        // set moreElement children\n        this._proxyChildren[index].setAttribute(OverflowBehaviorElements.PROXY_INDEX, `${index}`);\n      });\n    }\n\n    if (width !== undefined) this.updateDisplayedItems(width);\n  };\n\n  /**\n   * Get interactive children filtred by authorized nodeName ['MG-MENU-ITEM', 'MG-BUTTON']\n   * @param element - element to parse\n   * @returns children\n   */\n  private getInteractiveItems = (element: Element) =>\n    (element.children?.length > 0 ? Array.from(element.children) : []).filter(element => ['MG-MENU-ITEM', 'MG-BUTTON'].includes(element.nodeName));\n\n  /**\n   * Update displayed items in container from a given available space\n   * @param availableWidth - available width in container to display child items\n   */\n  private updateDisplayedItems = (availableWidth: number): void => {\n    this.restoreItems();\n    const acc = { accWidth: 0, previousItem: null };\n    [...this._baseChildren, this._moreElement].forEach((child: HTMLMgMenuItemElement | HTMLMgItemMoreElement) => {\n      acc.accWidth += child.offsetWidth;\n      const isPreviousItemHidden = acc.previousItem !== null && acc.previousItem.getAttribute('hidden') !== null;\n      // if previous item is hidden AND is NOT more element we hidde current\n      // OR if item has an overflow we hidde current\n      // OR if current item is more element AND have NOT previous hidden items, current more element item is an hidden item\n      // ELSE current is a display item\n      this.toggleItem(\n        child,\n        (isPreviousItemHidden && !this.isMoreElement(child)) || this.isOverflowElement(acc.accWidth, child, availableWidth) || (this.isMoreElement(child) && !isPreviousItemHidden),\n      );\n\n      // update previous item with current item\n      acc.previousItem = child;\n    });\n  };\n\n  /**\n   * Utility method to know if item overflow partialy or totaly in the container\n   * @param cumulateWidth - previous sibling elements cumulate width + item width\n   * @param item - item HTML element\n   * @param availableWidth - container available width\n   * @returns truthy if element is overflow\n   */\n  private isOverflowElement = (cumulateWidth: number, item: HTMLElement, availableWidth: number): boolean => {\n    if (item.previousElementSibling === null || this.isMoreElement(item)) return false;\n    else if (!this.isMoreElement(item.nextElementSibling)) return cumulateWidth + this._moreElement.offsetWidth > availableWidth;\n    else return cumulateWidth > availableWidth;\n  };\n\n  /**\n   * Utility method to know if a given element is the 'MORE' element\n   * @param element - element to match with 'MORE' element\n   * @returns truthy if element is the 'MORE' element\n   */\n  private isMoreElement = (element: Element): boolean => element.nodeName === 'MG-ITEM-MORE';\n\n  /**\n   * Toggle display item element\n   * @param item - item to control\n   * @param isHidden - is item hidden\n   */\n  private toggleItem = (item: HTMLElement, isHidden: boolean): void => {\n    const mgActionMenuindex = Number(item.getAttribute(OverflowBehaviorElements.BASE_INDEX));\n    if (this.isMoreElement(item)) this.toggleElement(this._moreElement, isHidden);\n    else if (mgActionMenuindex >= 0) {\n      this.toggleElement(item, isHidden);\n      this.toggleElement(this._proxyChildren[mgActionMenuindex], !isHidden);\n    }\n  };\n\n  /**\n   * Toggle element's hidde attribute\n   * @param element - element to toggle\n   * @param isHidden - element is hidden\n   */\n  private toggleElement = (element: Element, isHidden: boolean): void => {\n    if (isHidden) element.setAttribute('hidden', '');\n    else element.removeAttribute('hidden');\n  };\n\n  /**\n   * Remove hidden attributes on all items\n   */\n  private restoreItems = (): void => {\n    [...this._baseChildren, this._moreElement].forEach(item => item.removeAttribute('hidden'));\n  };\n}\n","@import '../../../styles/a11y.scss';\n\n:host {\n  display: flex;\n}\n","import { Component, h, Prop, Element, Host, Watch, State } from '@stencil/core';\nimport { initLocales } from '../../../locales';\nimport { OverflowBehavior } from '../../../utils/behaviors.utils';\nimport { Direction } from '../menu/mg-menu/mg-menu.conf';\nimport type { IconType, MessageType, SizeType, SlotLabelType } from './mg-item-more.conf';\n\n@Component({\n  tag: 'mg-item-more',\n  styleUrl: 'mg-item-more.scss',\n  shadow: true,\n})\nexport class MgItemMore {\n  /************\n   * Internal *\n   ************/\n  private readonly name = 'mg-item-more';\n  private messages: MessageType;\n  private menuItems: HTMLMgMenuItemElement[];\n  private overflowBehavior: OverflowBehavior;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgItemMoreElement;\n\n  /**\n   * Define icon\n   */\n  @Prop() icon: IconType = { icon: 'ellipsis-vertical' };\n  @Watch('icon')\n  validateIcon(newValue: MgItemMore['icon']): void {\n    if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.icon !== 'string'))\n      throw new Error(`<${this.name}> prop \"icon\" must match MgItemMore['icon'] type.`);\n  }\n\n  /**\n   * Define slot label element\n   */\n  @Prop() slotlabel: SlotLabelType = { display: false };\n  @Watch('slotlabel')\n  validateSlotLabel(newValue: MgItemMore['slotlabel']): void {\n    if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.display !== 'boolean'))\n      throw new Error(`<${this.name}> prop \"slotlabel\" must match MgItemMore['slotlabel'] type.`);\n    else if (typeof newValue.label !== 'string') this.slotlabel.label = this.messages.moreLabel;\n  }\n\n  /**\n   * Define component child menu size.\n   */\n  @Prop() size: SizeType;\n  @Watch('size')\n  validateSize(newValue: MgItemMore['size']): void {\n    if (newValue && typeof newValue !== 'string') throw new Error(`<${this.name}> prop \"size\" must match MgItemMore['size'] type.`);\n  }\n\n  /**\n   * Define component parent menu.\n   */\n  @State() parentMenu: HTMLMgMenuElement;\n\n  /***********\n   * Methods *\n   ***********/\n\n  /**\n   * render mg-item-more overflow element\n   * @returns mg-item-more element\n   */\n  private renderMgMenuItemOverflowElement = (): HTMLMgItemMoreElement => {\n    // create menu items proxy element from item clones\n    const moreElementMenuItem = this.element.shadowRoot.querySelector('mg-menu-item');\n    this.menuItems.forEach((child: HTMLMgMenuItemElement) => {\n      moreElementMenuItem.querySelector('mg-menu').appendChild(child.cloneNode(true));\n    });\n\n    const allMenuItem = Array.from(this.parentMenu.querySelectorAll('mg-menu-item:not([data-overflow-more])'));\n\n    Array.from(moreElementMenuItem.querySelectorAll('mg-menu-item:not([data-overflow-more])')).forEach((proxy, index) => {\n      // manage click on proxy to mirror it on initial element\n      proxy.addEventListener('click', () => {\n        // be carefull to use element.click() method instead of dispatchEvent to ensure bubbles outside shadowDom\n        const navElement = allMenuItem[index].shadowRoot.querySelector('a, button');\n        if (navElement instanceof HTMLButtonElement || navElement instanceof HTMLAnchorElement) navElement.click();\n      });\n\n      // add id suffix to prevent duplicate key. default html id is: '';\n      if (proxy.id.trim() !== '') proxy.id = `${proxy.id}-proxy`;\n\n      // manage status change miror in proxy\n      allMenuItem[index].addEventListener('status-change', (event: CustomEvent) => {\n        proxy.setAttribute('status', event.detail);\n      });\n    });\n\n    return this.element;\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Disconnect overflow ResizeObserver\n   */\n  disconnectedCallback(): void {\n    this.overflowBehavior.disconnect();\n  }\n\n  /**\n   * Set variables and validate props\n   */\n  componentWillLoad(): void {\n    // init variables\n    this.messages = (initLocales(this.element).messages as { plusMenu: MessageType }).plusMenu;\n    this.parentMenu = this.element.closest('mg-menu');\n    this.menuItems = Array.from(this.parentMenu.children).filter(item => item.nodeName === 'MG-MENU-ITEM') as HTMLMgMenuItemElement[];\n\n    // validate props\n    this.validateIcon(this.icon);\n    this.validateSlotLabel(this.slotlabel);\n    this.validateSize(this.size);\n  }\n\n  /**\n   * Add overflow behavior\n   */\n  componentDidLoad(): void {\n    this.overflowBehavior = new OverflowBehavior(this.parentMenu, this.renderMgMenuItemOverflowElement);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <Host role=\"listitem\">\n        <mg-menu-item data-overflow-more data-size={this.parentMenu.size}>\n          <mg-icon icon={this.icon.icon} slot=\"image\"></mg-icon>\n          <span class={{ 'sr-only': !this.slotlabel.display }} slot=\"label\">\n            {this.slotlabel.label}\n          </span>\n          <mg-menu direction={Direction.VERTICAL} label={this.messages.moreLabel} size={this.size}></mg-menu>\n        </mg-menu-item>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"mg-item-more.js","mappings":"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","names":["MgItemMore"],"sources":["src/utils/behaviors.utils.ts","../styles/dist/components/mg-item-more.css?tag=mg-item-more&encapsulation=shadow","src/components/molecules/mg-item-more/mg-item-more.tsx"],"sourcesContent":["/**\n * MgItemMore type guard\n * @param element - element to control type\n * @returns truthy if element is mg-item-more\n */\nconst isMgItemMore = (element: HTMLElement): element is HTMLMgItemMoreElement => element.nodeName === 'MG-ITEM-MORE';\n\nexport enum OverflowBehaviorElements {\n  BASE_INDEX = 'data-overflow-base-index',\n  PROXY_INDEX = 'data-overflow-proxy-index',\n}\n\nexport class OverflowBehavior {\n  // variables\n  private _resizeObserver: ResizeObserver;\n  private _moreElement: HTMLElement;\n  private _baseChildren: Element[];\n  private _proxyChildren: Element[];\n\n  constructor(private element: Element, private render: () => HTMLElement) {\n    if (this._resizeObserver === undefined) {\n      // add resize observer\n      this._resizeObserver = new ResizeObserver(entries => {\n        entries.forEach(entry => {\n          this.run(entry.contentRect.width);\n        });\n      });\n      this._resizeObserver.observe(this.element);\n    }\n    this.run();\n  }\n\n  /**********\n   * Public *\n   **********/\n\n  /**\n   * Disconnect ResizeObserver\n   */\n  public disconnect = (): void => {\n    this._resizeObserver.disconnect();\n  };\n\n  /************\n   * Internal *\n   ************/\n\n  /**\n   * run overflow behavior\n   * @param width - width of the container. Optional.\n   */\n  private run = (width?: number): void => {\n    if (this._moreElement === undefined) {\n      // set moreElement\n      this._moreElement = this.render();\n\n      // set children\n      this._baseChildren = this.getInteractiveItems(this.element);\n      if (isMgItemMore(this._moreElement)) {\n        this._proxyChildren = this.getInteractiveItems(this._moreElement.shadowRoot.querySelector('mg-menu'));\n      }\n\n      // update children\n      this._baseChildren.forEach((child, index) => {\n        child.setAttribute(OverflowBehaviorElements.BASE_INDEX, `${index}`);\n        // set moreElement children\n        this._proxyChildren[index].setAttribute(OverflowBehaviorElements.PROXY_INDEX, `${index}`);\n      });\n    }\n\n    if (width !== undefined) this.updateDisplayedItems(width);\n  };\n\n  /**\n   * Get interactive children filtred by authorized nodeName ['MG-MENU-ITEM', 'MG-BUTTON']\n   * @param element - element to parse\n   * @returns children\n   */\n  private getInteractiveItems = (element: Element) =>\n    (element.children?.length > 0 ? Array.from(element.children) : []).filter(element => ['MG-MENU-ITEM', 'MG-BUTTON'].includes(element.nodeName));\n\n  /**\n   * Update displayed items in container from a given available space\n   * @param availableWidth - available width in container to display child items\n   */\n  private updateDisplayedItems = (availableWidth: number): void => {\n    this.restoreItems();\n    const acc = { accWidth: 0, previousItem: null };\n    [...this._baseChildren, this._moreElement].forEach((child: HTMLMgMenuItemElement | HTMLMgItemMoreElement) => {\n      acc.accWidth += child.offsetWidth;\n      const hasPreviuosItem = acc.previousItem !== null;\n      const isPreviousItemHidden = hasPreviuosItem && acc.previousItem.getAttribute('hidden') !== null;\n      // if previous item is hidden AND is NOT more element we hidde current\n      // OR if item has an overflow we hidde current\n      // OR if current item is more element AND have NOT previous hidden items, current more element item is an hidden item\n      // ELSE current is a display item\n      this.toggleItem(\n        child,\n        (isPreviousItemHidden && !this.isMoreElement(child)) || this.isOverflowElement(acc.accWidth, child, availableWidth) || (this.isMoreElement(child) && !isPreviousItemHidden),\n      );\n\n      // update previous item with current item\n      acc.previousItem = child;\n    });\n  };\n\n  /**\n   * Utility method to know if item overflow partialy or totaly in the container\n   * @param cumulateWidth - previous sibling elements cumulate width + item width\n   * @param item - item HTML element\n   * @param availableWidth - container available width\n   * @returns truthy if element is overflow\n   */\n  private isOverflowElement = (cumulateWidth: number, item: HTMLElement, availableWidth: number): boolean => {\n    if (item.previousElementSibling === null || this.isMoreElement(item)) return false;\n    else if (!this.isMoreElement(item.nextElementSibling)) return cumulateWidth + this._moreElement.offsetWidth > availableWidth;\n    else return cumulateWidth > availableWidth;\n  };\n\n  /**\n   * Utility method to know if a given element is the 'MORE' element\n   * @param element - element to match with 'MORE' element\n   * @returns truthy if element is the 'MORE' element\n   */\n  private isMoreElement = (element: Element): boolean => element.nodeName === 'MG-ITEM-MORE';\n\n  /**\n   * Toggle display item element\n   * @param item - item to control\n   * @param isHidden - is item hidden\n   */\n  private toggleItem = (item: HTMLElement, isHidden: boolean): void => {\n    const mgActionMenuindex = Number(item.getAttribute(OverflowBehaviorElements.BASE_INDEX));\n    if (this.isMoreElement(item)) this.toggleElement(this._moreElement, isHidden);\n    else if (mgActionMenuindex >= 0) {\n      this.toggleElement(item, isHidden);\n      this.toggleElement(this._proxyChildren[mgActionMenuindex], !isHidden);\n    }\n  };\n\n  /**\n   * Toggle element's hidde attribute\n   * @param element - element to toggle\n   * @param isHidden - element is hidden\n   */\n  private toggleElement = (element: Element, isHidden: boolean): void => {\n    if (isHidden) element.setAttribute('hidden', '');\n    else element.removeAttribute('hidden');\n  };\n\n  /**\n   * Remove hidden attributes on all items\n   */\n  private restoreItems = (): void => {\n    [...this._baseChildren, this._moreElement].forEach(item => item.removeAttribute('hidden'));\n  };\n}\n",".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){*{animation:none !important;transition:none !important}}:host:not([hidden]){display:flex}/*# sourceMappingURL=mg-item-more.css.map */\n","import { Component, h, Prop, Element, Host, Watch, State } from '@stencil/core';\nimport { initLocales } from '../../../locales';\nimport { OverflowBehavior } from '../../../utils/behaviors.utils';\nimport { Direction } from '../menu/mg-menu/mg-menu.conf';\nimport type { IconType, MessageType, SizeType, SlotLabelType } from './mg-item-more.conf';\nimport { isValidString } from '../../../utils/components.utils';\n\n@Component({\n  tag: 'mg-item-more',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-item-more.css',\n  shadow: true,\n})\nexport class MgItemMore {\n  /************\n   * Internal *\n   ************/\n  private readonly name = 'mg-item-more';\n  private messages: MessageType;\n  private menuItems: HTMLMgMenuItemElement[];\n  private overflowBehavior: OverflowBehavior;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgItemMoreElement;\n\n  /**\n   * Define icon\n   */\n  @Prop() icon: IconType = { icon: 'ellipsis-vertical' };\n  @Watch('icon')\n  validateIcon(newValue: MgItemMore['icon']): void {\n    if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.icon !== 'string'))\n      throw new Error(`<${this.name}> prop \"icon\" must match MgItemMore['icon'] type.`);\n  }\n\n  /**\n   * Define slot label element\n   */\n  @Prop() slotlabel: SlotLabelType = { display: false };\n  @Watch('slotlabel')\n  validateSlotLabel(newValue: MgItemMore['slotlabel']): void {\n    if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.display !== 'boolean'))\n      throw new Error(`<${this.name}> prop \"slotlabel\" must match MgItemMore['slotlabel'] type.`);\n    else if (typeof newValue.label !== 'string') this.slotlabel.label = this.messages.moreLabel;\n  }\n\n  /**\n   * Define component child menu size.\n   */\n  @Prop() size: SizeType;\n  @Watch('size')\n  validateSize(newValue: MgItemMore['size']): void {\n    if (newValue && typeof newValue !== 'string') throw new Error(`<${this.name}> prop \"size\" must match MgItemMore['size'] type.`);\n  }\n\n  /**\n   * Define component parent menu.\n   */\n  @State() parentMenu: HTMLMgMenuElement;\n\n  /***********\n   * Methods *\n   ***********/\n\n  /**\n   * render mg-item-more overflow element\n   * @returns mg-item-more element\n   */\n  private renderMgMenuItemOverflowElement = (): HTMLMgItemMoreElement => {\n    // create menu items proxy element from item clones\n    const moreElementMenuItem = this.element.shadowRoot.querySelector('mg-menu-item');\n    this.menuItems.forEach((child: HTMLMgMenuItemElement) => {\n      moreElementMenuItem.querySelector('mg-menu').appendChild(child.cloneNode(true));\n    });\n\n    const allMenuItem = Array.from(this.parentMenu.querySelectorAll('mg-menu-item:not([data-overflow-more])'));\n\n    Array.from(moreElementMenuItem.querySelectorAll('mg-menu-item:not([data-overflow-more])')).forEach((proxy, index) => {\n      // manage click on proxy to mirror it on initial element\n      proxy.addEventListener('click', () => {\n        // be carefull to use element.click() method instead of dispatchEvent to ensure bubbles outside shadowDom\n        const navElement = allMenuItem[index].shadowRoot.querySelector('a, button');\n        if (navElement instanceof HTMLButtonElement || navElement instanceof HTMLAnchorElement) navElement.click();\n      });\n\n      // add id suffix to prevent duplicate key. default html id is: '';\n      if (isValidString(proxy.id)) proxy.id = `${proxy.id}-proxy`;\n\n      // manage status change miror in proxy\n      allMenuItem[index].addEventListener('status-change', (event: CustomEvent) => {\n        proxy.setAttribute('status', event.detail);\n      });\n    });\n\n    return this.element;\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Disconnect overflow ResizeObserver\n   */\n  disconnectedCallback(): void {\n    this.overflowBehavior.disconnect();\n  }\n\n  /**\n   * Set variables and validate props\n   */\n  componentWillLoad(): void {\n    // init variables\n    this.messages = (initLocales(this.element).messages as { plusMenu: MessageType }).plusMenu;\n    this.parentMenu = this.element.closest('mg-menu');\n    this.menuItems = Array.from(this.parentMenu.children).filter(item => item.nodeName === 'MG-MENU-ITEM') as HTMLMgMenuItemElement[];\n\n    // validate props\n    this.validateIcon(this.icon);\n    this.validateSlotLabel(this.slotlabel);\n    this.validateSize(this.size);\n  }\n\n  /**\n   * Add overflow behavior\n   */\n  componentDidLoad(): void {\n    this.overflowBehavior = new OverflowBehavior(this.parentMenu, this.renderMgMenuItemOverflowElement);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <Host role=\"listitem\">\n        <mg-menu-item data-overflow-more data-size={this.parentMenu.size}>\n          <mg-icon icon={this.icon.icon} slot=\"image\"></mg-icon>\n          <span class={{ 'mg-u-visually-hidden': !this.slotlabel.display }} slot=\"label\">\n            {this.slotlabel.label}\n          </span>\n          <mg-menu direction={Direction.VERTICAL} label={this.messages.moreLabel} size={this.size}></mg-menu>\n        </mg-menu-item>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/mg-menu-item2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as createID, C as ClassList } from './components.utils.js';
+import { i as isValidString, c as createID, C as ClassList } from './components.utils.js';
 import { i as initLocales } from './index2.js';
 import { D as Direction } from './mg-menu.conf.js';
 import { d as defineCustomElement$6 } from './mg-badge2.js';
@@ -28,7 +28,7 @@ var Status;
   Status["ACTIVE"] = "active";
 })(Status || (Status = {}));
 
-const mgMenuItemCss = ".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding:1rem 2rem;height:3.8rem}.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button,.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button ::slotted([slot=label]),.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button ::slotted([slot=metadata]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular ::slotted([slot=label]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular ::slotted([slot=metadata]){font-size:var(--font-size)}.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button.mg-menu-item__navigation-button--horizontal,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular.mg-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button.mg-menu-item__navigation-button--vertical,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular.mg-menu-item__navigation-button--vertical{padding-left:calc(2rem - 0.3rem)}.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding:1rem 3rem;height:5.1rem}.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button,.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button ::slotted([slot=label]),.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button ::slotted([slot=metadata]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium ::slotted([slot=label]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium ::slotted([slot=metadata]){font-size:calc(var(--font-size) + 0.2rem)}.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button.mg-menu-item__navigation-button--horizontal,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium.mg-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button.mg-menu-item__navigation-button--vertical,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium.mg-menu-item__navigation-button--vertical{padding-left:calc(3rem - 0.3rem)}.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding:1rem 4rem;height:7.1rem}.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button,.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button ::slotted([slot=label]),.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button ::slotted([slot=metadata]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large ::slotted([slot=label]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large ::slotted([slot=metadata]){font-size:calc(var(--font-size) + 0.2rem)}.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button.mg-menu-item__navigation-button--horizontal,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large.mg-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button.mg-menu-item__navigation-button--vertical,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large.mg-menu-item__navigation-button--vertical{padding-left:calc(4rem - 0.3rem)}.mg-menu-item__navigation-button{display:flex;align-items:center;column-gap:var(--mg-menu-item-navigation-button-column-gap, 1rem);background-color:unset;border:none;font-family:var(--font-family);font-weight:400;color:hsl(var(--mg-menu-item-color-hsl, var(--color-dark)));line-height:var(--line-height);text-decoration:none;white-space:nowrap;box-sizing:border-box;cursor:pointer}.mg-menu-item__navigation-button:disabled,.mg-menu-item__navigation-button--disabled{cursor:default;opacity:var(--mg-disabled-opacity)}.mg-menu-item__navigation-button:focus-visible{z-index:10}.mg-menu-item__navigation-button:hover:not(.mg-menu-item__navigation-button--disabled),.mg-menu-item__navigation-button:focus-visible:not(.mg-menu-item__navigation-button--disabled){background-color:hsl(var(--mg-menu-item-focused-background-color-hsl), 0.1)}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--active{color:hsl(var(--mg-menu-item-color-active-hsl));font-weight:600}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--active.mg-menu-item__navigation-button--horizontal{border-bottom-color:hsl(var(--mg-menu-item-border-color-active-hsl))}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--active.mg-menu-item__navigation-button--vertical{border-left-color:hsl(var(--mg-menu-item-border-color-active-hsl))}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--hidden{display:none}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--horizontal{border-bottom:0.3rem solid transparent}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--vertical{border-left:0.3rem solid transparent}:host([data-style-direction-vertical][data-level=\"1\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(1 * 2rem - 0.3rem)}:host([data-level=\"1\"]) .mg-menu-item__collapse-container{z-index:calc(1 * 10)}:host([data-style-direction-vertical][data-level=\"2\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(2 * 2rem - 0.3rem)}:host([data-level=\"2\"]) .mg-menu-item__collapse-container{z-index:calc(2 * 10)}:host([data-style-direction-vertical][data-level=\"3\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(3 * 2rem - 0.3rem)}:host([data-level=\"3\"]) .mg-menu-item__collapse-container{z-index:calc(3 * 10)}:host([data-style-direction-vertical][data-level=\"4\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(4 * 2rem - 0.3rem)}:host([data-level=\"4\"]) .mg-menu-item__collapse-container{z-index:calc(4 * 10)}:host([data-style-direction-vertical][data-level=\"5\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(5 * 2rem - 0.3rem)}:host([data-level=\"5\"]) .mg-menu-item__collapse-container{z-index:calc(5 * 10)}:host([data-style-direction-vertical][data-level=\"6\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(6 * 2rem - 0.3rem)}:host([data-level=\"6\"]) .mg-menu-item__collapse-container{z-index:calc(6 * 10)}:host([data-style-direction-vertical][data-level=\"1\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(1 * 3rem - 0.3rem)}:host([data-level=\"1\"]) .mg-menu-item__collapse-container{z-index:calc(1 * 10)}:host([data-style-direction-vertical][data-level=\"2\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(2 * 3rem - 0.3rem)}:host([data-level=\"2\"]) .mg-menu-item__collapse-container{z-index:calc(2 * 10)}:host([data-style-direction-vertical][data-level=\"3\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(3 * 3rem - 0.3rem)}:host([data-level=\"3\"]) .mg-menu-item__collapse-container{z-index:calc(3 * 10)}:host([data-style-direction-vertical][data-level=\"4\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(4 * 3rem - 0.3rem)}:host([data-level=\"4\"]) .mg-menu-item__collapse-container{z-index:calc(4 * 10)}:host([data-style-direction-vertical][data-level=\"5\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(5 * 3rem - 0.3rem)}:host([data-level=\"5\"]) .mg-menu-item__collapse-container{z-index:calc(5 * 10)}:host([data-style-direction-vertical][data-level=\"6\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(6 * 3rem - 0.3rem)}:host([data-level=\"6\"]) .mg-menu-item__collapse-container{z-index:calc(6 * 10)}:host([data-style-direction-vertical][data-level=\"1\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(1 * 4rem - 0.3rem)}:host([data-level=\"1\"]) .mg-menu-item__collapse-container{z-index:calc(1 * 10)}:host([data-style-direction-vertical][data-level=\"2\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(2 * 4rem - 0.3rem)}:host([data-level=\"2\"]) .mg-menu-item__collapse-container{z-index:calc(2 * 10)}:host([data-style-direction-vertical][data-level=\"3\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(3 * 4rem - 0.3rem)}:host([data-level=\"3\"]) .mg-menu-item__collapse-container{z-index:calc(3 * 10)}:host([data-style-direction-vertical][data-level=\"4\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(4 * 4rem - 0.3rem)}:host([data-level=\"4\"]) .mg-menu-item__collapse-container{z-index:calc(4 * 10)}:host([data-style-direction-vertical][data-level=\"5\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(5 * 4rem - 0.3rem)}:host([data-level=\"5\"]) .mg-menu-item__collapse-container{z-index:calc(5 * 10)}:host([data-style-direction-vertical][data-level=\"6\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(6 * 4rem - 0.3rem)}:host([data-level=\"6\"]) .mg-menu-item__collapse-container{z-index:calc(6 * 10)}:host{position:relative;display:flex;--mg-popover-padding-vertical:0;--mg-popover-padding-horizontal:0;--mg-popover-max-width:unset}:host([data-style-direction-vertical]){flex-direction:column}:host([data-style-direction-vertical]) .mg-menu-item__navigation-button{width:100%}:host([data-style-direction-vertical]) .mg-menu-item__collapse-container{left:unset;top:unset;position:unset;width:unset}:host([data-style-direction-vertical]) .mg-menu-item-chevron{margin-left:auto}:host([data-style-direction-horizontal]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level,:host([data-overflow-more]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level{background-color:hsl(var(--color-light))}:host([data-style-direction-horizontal]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level ::slotted(mg-menu),:host([data-overflow-more]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level ::slotted(mg-menu){padding:1rem 0}:host([data-overflow-more]){--mg-menu-item-navigation-button-column-gap:0}:host([data-overflow-more]) .mg-menu-item__navigation-button-chevron{display:none}:host([data-overflow-more]) .mg-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:0}:host([data-overflow-more]) ::slotted(mg-menu){--mg-menu-item-navigation-button-column-gap:1rem}.mg-menu-item{max-width:var(--mg-menu-item-navigation-button-max-width)}.mg-menu-item__collapse-container{width:max-content;z-index:10}.mg-menu-item__navigation-button-center{min-width:0}.mg-menu-item__navigation-button-text-content{width:100%;display:flex;align-items:center}.mg-menu-item__navigation-button-text-content-notification,.mg-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:1rem;font-size:var(--font-size)}.mg-menu-item__navigation-button-chevron{margin-left:auto;transition:200ms}.mg-menu-item__navigation-button-chevron--rotate.mg-menu-item__navigation-button-chevron{transform:rotate(180deg)}::slotted([slot=label]),::slotted([slot=metadata]){display:block;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::slotted(*){display:flex;flex-direction:column}:host([status=disabled]){pointer-events:none}:host([hidden]){display:none}";
+const mgMenuItemCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{height:3.8rem;padding:1rem 2rem}.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button,.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button ::slotted([slot=metadata]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular ::slotted([slot=label]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular ::slotted([slot=metadata]){font-size:var(--font-size)}.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular.mg-c-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular.mg-c-menu-item__navigation-button--vertical{padding-left:calc(2rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{height:5.1rem;padding:1rem 3rem}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button,.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button ::slotted([slot=metadata]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium ::slotted([slot=label]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium ::slotted([slot=metadata]){font-size:calc(var(--font-size) + .2rem)}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium.mg-c-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium.mg-c-menu-item__navigation-button--vertical{padding-left:calc(3rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{height:7.1rem;padding:1rem 4rem}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button,.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button ::slotted([slot=metadata]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large ::slotted([slot=label]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large ::slotted([slot=metadata]){font-size:calc(var(--font-size) + .2rem)}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large.mg-c-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large.mg-c-menu-item__navigation-button--vertical{padding-left:calc(4rem - 0.3rem)}.mg-c-menu-item__navigation-button{display:flex;box-sizing:border-box;align-items:center;border:none;background-color:unset;color:hsl(var(--mg-menu-item-color-hsl, var(--color-dark)));column-gap:var(--mg-menu-item-navigation-button-column-gap, 1rem);cursor:pointer;font-family:var(--font-family);font-weight:400;line-height:var(--line-height);text-decoration:none;white-space:nowrap}.mg-c-menu-item__navigation-button:disabled,.mg-c-menu-item__navigation-button--disabled{cursor:default;opacity:var(--mg-disabled-opacity)}.mg-c-menu-item__navigation-button:focus-visible{z-index:10}.mg-c-menu-item__navigation-button:hover:not(.mg-c-menu-item__navigation-button--disabled),.mg-c-menu-item__navigation-button:focus-visible:not(.mg-c-menu-item__navigation-button--disabled){background-color:hsl(var(--mg-menu-item-focused-background-color-hsl)/10%)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active{color:hsl(var(--mg-menu-item-color-active-hsl));font-weight:600}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active.mg-c-menu-item__navigation-button--horizontal{border-bottom-color:hsl(var(--mg-menu-item-border-color-active-hsl))}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active.mg-c-menu-item__navigation-button--vertical{border-left-color:hsl(var(--mg-menu-item-border-color-active-hsl))}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--hidden{display:none}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal{border-bottom:.3rem solid rgba(0,0,0,0)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical{border-left:.3rem solid rgba(0,0,0,0)}:host([data-style-direction-vertical][data-level=\"1\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(1 * 2rem - 0.3rem)}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:calc(1 * 10)}:host([data-style-direction-vertical][data-level=\"2\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(2 * 2rem - 0.3rem)}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:calc(2 * 10)}:host([data-style-direction-vertical][data-level=\"3\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(3 * 2rem - 0.3rem)}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:calc(3 * 10)}:host([data-style-direction-vertical][data-level=\"4\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(4 * 2rem - 0.3rem)}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:calc(4 * 10)}:host([data-style-direction-vertical][data-level=\"5\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(5 * 2rem - 0.3rem)}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:calc(5 * 10)}:host([data-style-direction-vertical][data-level=\"6\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(6 * 2rem - 0.3rem)}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:calc(6 * 10)}:host([data-style-direction-vertical][data-level=\"1\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(1 * 3rem - 0.3rem)}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:calc(1 * 10)}:host([data-style-direction-vertical][data-level=\"2\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(2 * 3rem - 0.3rem)}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:calc(2 * 10)}:host([data-style-direction-vertical][data-level=\"3\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(3 * 3rem - 0.3rem)}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:calc(3 * 10)}:host([data-style-direction-vertical][data-level=\"4\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(4 * 3rem - 0.3rem)}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:calc(4 * 10)}:host([data-style-direction-vertical][data-level=\"5\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(5 * 3rem - 0.3rem)}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:calc(5 * 10)}:host([data-style-direction-vertical][data-level=\"6\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(6 * 3rem - 0.3rem)}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:calc(6 * 10)}:host([data-style-direction-vertical][data-level=\"1\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(1 * 4rem - 0.3rem)}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:calc(1 * 10)}:host([data-style-direction-vertical][data-level=\"2\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(2 * 4rem - 0.3rem)}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:calc(2 * 10)}:host([data-style-direction-vertical][data-level=\"3\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(3 * 4rem - 0.3rem)}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:calc(3 * 10)}:host([data-style-direction-vertical][data-level=\"4\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(4 * 4rem - 0.3rem)}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:calc(4 * 10)}:host([data-style-direction-vertical][data-level=\"5\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(5 * 4rem - 0.3rem)}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:calc(5 * 10)}:host([data-style-direction-vertical][data-level=\"6\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(6 * 4rem - 0.3rem)}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:calc(6 * 10)}.mg-c-menu-item{max-width:var(--mg-menu-item-navigation-button-max-width)}.mg-c-menu-item__collapse-container{z-index:10;width:max-content}.mg-c-menu-item__navigation-button-center{min-width:0}.mg-c-menu-item__navigation-button-text-content{display:flex;width:100%;align-items:center}.mg-c-menu-item__navigation-button-text-content-notification,.mg-c-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:1rem;font-size:var(--font-size)}.mg-c-menu-item__navigation-button-chevron{margin-left:auto;transition:200ms}.mg-c-menu-item__navigation-button-chevron--rotate.mg-c-menu-item__navigation-button-chevron{transform:rotate(180deg)}:host{position:relative;display:flex;--mg-popover-padding-vertical:0;--mg-popover-padding-horizontal:0;--mg-popover-max-width:unset}:host([data-style-direction-vertical]){flex-direction:column}:host([data-style-direction-vertical]) .mg-c-menu-item__navigation-button{width:100%}:host([data-style-direction-vertical]) .mg-c-menu-item__collapse-container{position:unset;top:unset;left:unset;width:unset}:host([data-style-direction-vertical]) .mg-c-menu-item-chevron{margin-left:auto}:host([data-overflow-more]){--mg-menu-item-navigation-button-column-gap:0}:host([data-overflow-more]) .mg-c-menu-item__navigation-button-chevron{display:none}:host([data-overflow-more]) .mg-c-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:0}:host([data-overflow-more]) ::slotted(mg-menu){--mg-menu-item-navigation-button-column-gap:1rem}:host([data-style-direction-horizontal]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level,:host([data-overflow-more]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level{background-color:hsl(var(--color-light))}:host([data-style-direction-horizontal]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level ::slotted(mg-menu),:host([data-overflow-more]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level ::slotted(mg-menu){padding:1rem 0}::slotted([slot=label]),::slotted([slot=metadata]){display:block;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}::slotted(*){display:flex;flex-direction:column}:host([status=disabled]){pointer-events:none}:host([hidden]){display:none}";
 
 const MgMenuItem = /*@__PURE__*/ proxyCustomElement(class MgMenuItem extends HTMLElement {
   constructor() {
@@ -41,7 +41,7 @@ const MgMenuItem = /*@__PURE__*/ proxyCustomElement(class MgMenuItem extends HTM
      * Internal *
      ************/
     this.name = 'mg-menu-item';
-    this.navigationButton = `${this.name}__navigation-button`;
+    this.navigationButton = 'mg-c-menu-item__navigation-button';
     /***********
      * Methods *
      **********/
@@ -94,7 +94,7 @@ const MgMenuItem = /*@__PURE__*/ proxyCustomElement(class MgMenuItem extends HTM
         throw new Error(`<${this.name}> slot "label" is required.`);
       ['label', 'metadata'].forEach(slot => {
         Array.from(this.element.querySelectorAll(`[slot="${slot}"]`)).forEach(element => {
-          if (element.textContent.trim().length < 1)
+          if (!isValidString(element.textContent))
             throw new Error(`<${this.name}> slot "${slot}" must have text content.`);
           if ((guard && element.getAttribute('title') === null) || !guard)
             element.setAttribute('title', element.textContent);
@@ -296,10 +296,9 @@ const MgMenuItem = /*@__PURE__*/ proxyCustomElement(class MgMenuItem extends HTM
    */
   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: "mg-menu-item__navigation-button-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, "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: {
         [`${this.navigationButton}-chevron`]: true,
         [`${this.navigationButton}-chevron--rotate`]: this.expanded === true,
-        'mg-a11y-animation': true,
       } }, h("mg-icon", { icon: "chevron-down", size: "small" })))));
   }
   /**
@@ -308,8 +307,8 @@ const MgMenuItem = /*@__PURE__*/ proxyCustomElement(class MgMenuItem extends HTM
    */
   render() {
     const getContainerClasses = () => ({
-      [`${this.name}__collapse-container`]: true,
-      [`${this.name}__collapse-container--first-level`]: (this.isInMainMenu || this.isItemMore) && this.isDirection(Direction.HORIZONTAL),
+      ['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, { 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(),

package/dist/components/mg-menu-item2.js.map

@@ -1 +1 @@
-{"file":"mg-menu-item2.js","mappings":"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","names":[],"sources":["src/components/molecules/menu/mg-menu-item/mg-menu-item.conf.ts","src/components/molecules/menu/mg-menu-item/mg-menu-item.scss?tag=mg-menu-item&encapsulation=shadow","src/components/molecules/menu/mg-menu-item/mg-menu-item.tsx"],"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","@use 'sass:map';\n\n@import '../../../../styles/a11y.scss';\n@import '../../../../styles/mixins/navigation-button.scss';\n@import '../../../../styles/mixins/mg-icon-animation.scss';\n\n$navigation-vertical-spacing: 1rem;\n$navigation-button-sizes: (\n  'regular': (\n    'vertical': $navigation-vertical-spacing,\n    'horizontal': 2rem,\n    'height': 3.8rem,\n  ),\n  'medium': (\n    'vertical': $navigation-vertical-spacing,\n    'horizontal': 3rem,\n    'height': 5.1rem,\n  ),\n  'large': (\n    'vertical': $navigation-vertical-spacing,\n    'horizontal': 4rem,\n    'height': 7.1rem,\n  ),\n);\n\n@mixin level($button-sizes) {\n  @each $name, $size in $button-sizes {\n    // Building level from 1 to 6\n    @for $i from 1 through 6 {\n      :host([data-style-direction-vertical][data-level='#{$i}']) {\n        .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-#{$name} {\n          padding-left: calc(#{$i} * #{map.get($size, 'horizontal')} - 0.3rem);\n        }\n      }\n      :host([data-level='#{$i}']) {\n        .mg-menu-item__collapse-container {\n          z-index: calc(#{$i} * 10);\n        }\n      }\n    }\n  }\n}\n\n@include navigation-button('mg-menu-item', $navigation-button-sizes);\n@include level($navigation-button-sizes);\n\n:host {\n  position: relative;\n  display: flex;\n  --mg-popover-padding-vertical: 0;\n  --mg-popover-padding-horizontal: 0;\n  --mg-popover-max-width: unset;\n}\n\n// vertical item style\n:host([data-style-direction-vertical]) {\n  flex-direction: column;\n  .mg-menu-item {\n    &__navigation-button {\n      width: 100%;\n    }\n    &__collapse-container {\n      left: unset;\n      top: unset;\n      position: unset;\n      width: unset;\n    }\n    &-chevron {\n      margin-left: auto;\n    }\n  }\n}\n\n// horizontal item style\n:host([data-style-direction-horizontal]),\n:host([data-overflow-more]) {\n  .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level {\n    background-color: hsl(var(--color-light));\n    ::slotted(mg-menu) {\n      padding: 1rem 0;\n    }\n  }\n}\n\n// more menu-item element\n:host([data-overflow-more]) {\n  --mg-menu-item-navigation-button-column-gap: 0;\n  .mg-menu-item__navigation-button {\n    &-chevron {\n      display: none;\n    }\n    &-text-content ::slotted([slot='information']) {\n      margin-left: 0;\n    }\n  }\n  ::slotted(mg-menu) {\n    --mg-menu-item-navigation-button-column-gap: #{$navigation-button-column-gap};\n  }\n}\n\n.mg-menu-item {\n  max-width: var(--mg-menu-item-navigation-button-max-width);\n  &__collapse-container {\n    width: max-content;\n    z-index: 10;\n  }\n  &__navigation-button {\n    &-center {\n      min-width: 0;\n    }\n    &-text-content {\n      width: 100%;\n      display: flex;\n      align-items: center;\n      &-notification,\n      ::slotted([slot='information']) {\n        margin-left: 1rem;\n        font-size: var(--font-size);\n      }\n    }\n    &-chevron {\n      margin-left: auto;\n      @include rotate('.mg-menu-item__navigation-button-chevron', 200ms);\n    }\n  }\n}\n\n::slotted([slot='label']),\n::slotted([slot='metadata']) {\n  display: block;\n  text-align: left;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n::slotted(*) {\n  display: flex;\n  flex-direction: column;\n}\n\n// Prevent click propagation when disabled\n:host([status='disabled']) {\n  pointer-events: none;\n}\n\n// fix missing \"hidden\" style in browser\n:host([hidden]) {\n  display: none;\n}\n","import { Component, h, Prop, State, Host, Watch, Element, Event, EventEmitter } from '@stencil/core';\nimport { ClassList, createID } from '../../../../utils/components.utils';\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: 'mg-menu-item.scss',\n  shadow: true,\n})\nexport class MgMenuItem {\n  /************\n   * Internal *\n   ************/\n\n  private readonly name = 'mg-menu-item';\n  private readonly navigationButton = `${this.name}__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<MgMenuItem['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 whith 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 (element.textContent.trim().length < 1) 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=\"mg-menu-item__navigation-button-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              'mg-a11y-animation': 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      [`${this.name}__collapse-container`]: true,\n      [`${this.name}__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-item2.js","mappings":"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","names":[],"sources":["src/components/molecules/menu/mg-menu-item/mg-menu-item.conf.ts","../styles/dist/components/mg-menu-item.css?tag=mg-menu-item&encapsulation=shadow","src/components/molecules/menu/mg-menu-item/mg-menu-item.tsx"],"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",".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{height:3.8rem;padding:1rem 2rem}.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button,.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button ::slotted([slot=metadata]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular ::slotted([slot=label]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular ::slotted([slot=metadata]){font-size:var(--font-size)}.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular.mg-c-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular.mg-c-menu-item__navigation-button--vertical{padding-left:calc(2rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{height:5.1rem;padding:1rem 3rem}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button,.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button ::slotted([slot=metadata]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium ::slotted([slot=label]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium ::slotted([slot=metadata]){font-size:calc(var(--font-size) + .2rem)}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium.mg-c-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium.mg-c-menu-item__navigation-button--vertical{padding-left:calc(3rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{height:7.1rem;padding:1rem 4rem}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button,.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button ::slotted([slot=metadata]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large ::slotted([slot=label]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large ::slotted([slot=metadata]){font-size:calc(var(--font-size) + .2rem)}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large.mg-c-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large.mg-c-menu-item__navigation-button--vertical{padding-left:calc(4rem - 0.3rem)}.mg-c-menu-item__navigation-button{display:flex;box-sizing:border-box;align-items:center;border:none;background-color:unset;color:hsl(var(--mg-menu-item-color-hsl, var(--color-dark)));column-gap:var(--mg-menu-item-navigation-button-column-gap, 1rem);cursor:pointer;font-family:var(--font-family);font-weight:400;line-height:var(--line-height);text-decoration:none;white-space:nowrap}.mg-c-menu-item__navigation-button:disabled,.mg-c-menu-item__navigation-button--disabled{cursor:default;opacity:var(--mg-disabled-opacity)}.mg-c-menu-item__navigation-button:focus-visible{z-index:10}.mg-c-menu-item__navigation-button:hover:not(.mg-c-menu-item__navigation-button--disabled),.mg-c-menu-item__navigation-button:focus-visible:not(.mg-c-menu-item__navigation-button--disabled){background-color:hsl(var(--mg-menu-item-focused-background-color-hsl)/10%)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active{color:hsl(var(--mg-menu-item-color-active-hsl));font-weight:600}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active.mg-c-menu-item__navigation-button--horizontal{border-bottom-color:hsl(var(--mg-menu-item-border-color-active-hsl))}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active.mg-c-menu-item__navigation-button--vertical{border-left-color:hsl(var(--mg-menu-item-border-color-active-hsl))}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--hidden{display:none}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal{border-bottom:.3rem solid rgba(0,0,0,0)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical{border-left:.3rem solid rgba(0,0,0,0)}:host([data-style-direction-vertical][data-level=\"1\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(1 * 2rem - 0.3rem)}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:calc(1 * 10)}:host([data-style-direction-vertical][data-level=\"2\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(2 * 2rem - 0.3rem)}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:calc(2 * 10)}:host([data-style-direction-vertical][data-level=\"3\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(3 * 2rem - 0.3rem)}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:calc(3 * 10)}:host([data-style-direction-vertical][data-level=\"4\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(4 * 2rem - 0.3rem)}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:calc(4 * 10)}:host([data-style-direction-vertical][data-level=\"5\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(5 * 2rem - 0.3rem)}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:calc(5 * 10)}:host([data-style-direction-vertical][data-level=\"6\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(6 * 2rem - 0.3rem)}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:calc(6 * 10)}:host([data-style-direction-vertical][data-level=\"1\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(1 * 3rem - 0.3rem)}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:calc(1 * 10)}:host([data-style-direction-vertical][data-level=\"2\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(2 * 3rem - 0.3rem)}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:calc(2 * 10)}:host([data-style-direction-vertical][data-level=\"3\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(3 * 3rem - 0.3rem)}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:calc(3 * 10)}:host([data-style-direction-vertical][data-level=\"4\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(4 * 3rem - 0.3rem)}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:calc(4 * 10)}:host([data-style-direction-vertical][data-level=\"5\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(5 * 3rem - 0.3rem)}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:calc(5 * 10)}:host([data-style-direction-vertical][data-level=\"6\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(6 * 3rem - 0.3rem)}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:calc(6 * 10)}:host([data-style-direction-vertical][data-level=\"1\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(1 * 4rem - 0.3rem)}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:calc(1 * 10)}:host([data-style-direction-vertical][data-level=\"2\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(2 * 4rem - 0.3rem)}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:calc(2 * 10)}:host([data-style-direction-vertical][data-level=\"3\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(3 * 4rem - 0.3rem)}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:calc(3 * 10)}:host([data-style-direction-vertical][data-level=\"4\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(4 * 4rem - 0.3rem)}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:calc(4 * 10)}:host([data-style-direction-vertical][data-level=\"5\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(5 * 4rem - 0.3rem)}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:calc(5 * 10)}:host([data-style-direction-vertical][data-level=\"6\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(6 * 4rem - 0.3rem)}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:calc(6 * 10)}.mg-c-menu-item{max-width:var(--mg-menu-item-navigation-button-max-width)}.mg-c-menu-item__collapse-container{z-index:10;width:max-content}.mg-c-menu-item__navigation-button-center{min-width:0}.mg-c-menu-item__navigation-button-text-content{display:flex;width:100%;align-items:center}.mg-c-menu-item__navigation-button-text-content-notification,.mg-c-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:1rem;font-size:var(--font-size)}.mg-c-menu-item__navigation-button-chevron{margin-left:auto;transition:200ms}.mg-c-menu-item__navigation-button-chevron--rotate.mg-c-menu-item__navigation-button-chevron{transform:rotate(180deg)}:host{position:relative;display:flex;--mg-popover-padding-vertical: 0;--mg-popover-padding-horizontal: 0;--mg-popover-max-width: unset}:host([data-style-direction-vertical]){flex-direction:column}:host([data-style-direction-vertical]) .mg-c-menu-item__navigation-button{width:100%}:host([data-style-direction-vertical]) .mg-c-menu-item__collapse-container{position:unset;top:unset;left:unset;width:unset}:host([data-style-direction-vertical]) .mg-c-menu-item-chevron{margin-left:auto}:host([data-overflow-more]){--mg-menu-item-navigation-button-column-gap: 0}:host([data-overflow-more]) .mg-c-menu-item__navigation-button-chevron{display:none}:host([data-overflow-more]) .mg-c-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:0}:host([data-overflow-more]) ::slotted(mg-menu){--mg-menu-item-navigation-button-column-gap: 1rem}:host([data-style-direction-horizontal]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level,:host([data-overflow-more]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level{background-color:hsl(var(--color-light))}:host([data-style-direction-horizontal]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level ::slotted(mg-menu),:host([data-overflow-more]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level ::slotted(mg-menu){padding:1rem 0}::slotted([slot=label]),::slotted([slot=metadata]){display:block;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}::slotted(*){display:flex;flex-direction:column}:host([status=disabled]){pointer-events:none}:host([hidden]){display:none}/*# sourceMappingURL=mg-menu-item.css.map */\n","import { Component, h, Prop, State, Host, Watch, Element, Event, EventEmitter } from '@stencil/core';\nimport { ClassList, createID, isValidString } from '../../../../utils/components.utils';\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<MgMenuItem['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 whith 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}

package/dist/components/mg-menu2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { D as Direction, s as sizes } from './mg-menu.conf.js';
 
-const mgMenuCss = ".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}:host{display:flex;background-color:hsl(var(--mg-menu-background-color-hsl, var(--color-light)))}:host([direction=vertical]){flex-direction:column;height:100%;overflow-y:auto}";
+const mgMenuCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}:host{display:flex;background-color:hsl(var(--mg-menu-background-color-hsl, var(--color-light)))}:host([direction=vertical]){height:100%;flex-direction:column;overflow-y:auto}";
 
 const MgMenu = /*@__PURE__*/ proxyCustomElement(class MgMenu extends HTMLElement {
   constructor() {
@@ -47,7 +47,7 @@ const MgMenu = /*@__PURE__*/ proxyCustomElement(class MgMenu extends HTMLElement
         (item.shadowRoot.querySelector('button') || item.shadowRoot.querySelector('a')).addEventListener(trigger, () => {
           this.focusedMenuItem = index;
           // reset expanded on previous active menu item
-          (Boolean(this.getItemMoreMenuItem()) ? [...this.menuItems, this.getItemMoreMenuItem()] : this.menuItems).forEach((item, index) => {
+          (this.getItemMoreMenuItem() ? [...this.menuItems, this.getItemMoreMenuItem()] : this.menuItems).forEach((item, index) => {
             this.closeMenuItem(item, index !== this.focusedMenuItem);
           });
         });