@mgdis/mg-components 5.16.0 → 5.18.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-input-toggle.js","sourceRoot":"","sources":["../../../../../src/components/molecules/inputs/mg-input-toggle/mg-input-toggle.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { Component, Event, h, Prop, EventEmitter, State, Watch, Element } 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"]}

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

@@ -0,0 +1,125 @@
+import { createPage } from "../../../../../utils/stencil.e2e.test.utils";
+const defaultSlots = '<span slot="item-1">Choix A</span><span slot="item-2">Choix B</span>';
+describe('mg-input-toggle', () => {
+  test.each([
+    `<mg-input-toggle identifier="identifier" label="label">${defaultSlots}</mg-input-toggle>`,
+    `<mg-input-toggle identifier="identifier" label="label" is-on-off><span slot="item-1">Non</span><span slot="item-2">Oui</span></mg-input-toggle>`,
+    `<mg-input-toggle identifier="identifier" label="label" is-icon is-on-off><mg-icon icon="cross" slot="item-1"></mg-icon><mg-icon icon="check" slot="item-2"></mg-icon></mg-input-toggle>`,
+    `<mg-input-toggle identifier="identifier" label="label" identifier="toggle-long-text"><span slot="item-1">Choix A très long long long long long long long long long long long long long</span><span slot="item-2">Choix B très long long long long long long long long long long long long long</span></mg-input-toggle>`,
+  ])('Keyboard navigation', async (html) => {
+    const page = await createPage(`${html}
+    <script>
+    const mgInputToggle = document.querySelector('mg-input-toggle');
+    mgInputToggle.items = [{title: 'batman', value: false}, {title: 'joker', value: true}];
+    </script>`);
+    const element = await page.find('mg-input-toggle');
+    const toggle = await page.find('mg-input-toggle >>> button');
+    expect(element).toHaveClass('hydrated');
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+    await page.keyboard.down('Tab');
+    await page.waitForChanges();
+    const screenshotFocus = await page.screenshot();
+    expect(screenshotFocus).toMatchImageSnapshot();
+    await toggle.press('Space');
+    await page.waitForChanges();
+    const screenshotSelection = await page.screenshot();
+    expect(screenshotSelection).toMatchImageSnapshot();
+    await page.keyboard.down('Tab');
+    await page.waitForChanges();
+    const screenshotUnSelect = await page.screenshot();
+    expect(screenshotUnSelect).toMatchImageSnapshot();
+  });
+  test.each([
+    `<mg-input-toggle identifier="identifier" label="label" label-on-top help-text="HelpText Message">${defaultSlots}</mg-input-toggle>`,
+    `<mg-input-toggle identifier="identifier" label="label" input-vertical-list help-text="HelpText Message">${defaultSlots}</mg-input-toggle>`,
+    `<mg-input-toggle identifier="identifier" label="label" label-on-top input-vertical-list help-text="HelpText Message">${defaultSlots}</mg-input-toggle>`,
+    `<mg-input-toggle identifier="identifier" label="label" identifier="toggle-long-text"><span slot="item-1">Choix A très long long long long long long long long long long long long long</span><span slot="item-2">Choix B très long long long long long long long long long long long long long</span></mg-input-toggle>`,
+    `<mg-input-toggle identifier="identifier" label="label" identifier="toggle-long-text-readonly" readonly><span slot="item-1">Choix A avec text long long</span><span slot="item-2">Choix B avec text long long</span></mg-input-toggle>`,
+    `<mg-input-toggle identifier="identifier" label="label" label-hide>${defaultSlots}</mg-input-toggle>`,
+    `<mg-input-toggle identifier="identifier" label="label" is-on-off readonly><span slot="item-1">Off</span><span slot="item-2">On</span></mg-input-toggle>`,
+    `<mg-input-toggle identifier="identifier" label="label" placeholder="placeholder" help-text="HelpText Message">${defaultSlots}</mg-input-toggle>`,
+    `<mg-input-toggle identifier="identifier" label="label" help-text='<mg-icon icon="user" size="small"></mg-icon> Welcome batman'>${defaultSlots}</mg-input-toggle>`,
+  ])('Render without tooltip', async (html) => {
+    const page = await createPage(`${html}
+      <script>
+      const mgInputToggle = document.querySelector('mg-input-toggle');
+      mgInputToggle.items = [{title: 'batman', value: false}, {title: 'joker', value: true}];
+      </script>`);
+    const element = await page.find('mg-input-toggle');
+    expect(element).toHaveClass('hydrated');
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+  });
+  test.each([undefined, false, true])('Render and toggle value whith reverse checked logic', async (value) => {
+    const page = await createPage(`${`<mg-input-toggle identifier="identifier" label="label">${defaultSlots}</mg-input-toggle>`}
+      <script>
+      const mgInputToggle = document.querySelector('mg-input-toggle');
+      mgInputToggle.items = [{title: 'batman', value: true}, {title: 'joker', value: false}];
+      mgInputToggle.value = ${value};
+      </script>`);
+    const element = await page.find('mg-input-toggle');
+    const button = await page.find('mg-input-toggle >>> button');
+    expect(element).toHaveClass('hydrated');
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+    await button.click();
+    const screenshot2 = await page.screenshot();
+    expect(screenshot2).toMatchImageSnapshot();
+  });
+  test.each([true, false])('render with tooltip, case label-on-top %s', async (labelOnTop) => {
+    const page = await createPage(`<mg-input-toggle identifier="identifier" label="label" tooltip="Tooltip message" label-on-top="${labelOnTop}">${defaultSlots}</mg-input-toggle>
+      <script>
+      const mgInputToggle = document.querySelector('mg-input-toggle');
+      mgInputToggle.items = [{title: 'batman', value: false}, {title: 'joker', value: true}];
+      </script>`);
+    const element = await page.find('mg-input-toggle');
+    expect(element).toHaveClass('hydrated');
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+    await page.keyboard.down('Tab');
+    if (!labelOnTop) {
+      // Ensure to display tooltip
+      await page.setViewport({ width: 600, height: 65 });
+      // when label on top tooltip is on fist tab (next to label)
+      await page.keyboard.down('Tab');
+    }
+    const screenshotTooltip = await page.screenshot();
+    expect(screenshotTooltip).toMatchImageSnapshot();
+  });
+  test.each([
+    `<mg-input-toggle identifier="identifier" label="label" readonly>${defaultSlots}</mg-input-toggle>`,
+    `<mg-input-toggle identifier="identifier" label="label" value="true">${defaultSlots}</mg-input-toggle>`,
+    `<mg-input-toggle identifier="identifier" label="label" value="true" readonly>${defaultSlots}</mg-input-toggle>`,
+    `<mg-input-toggle identifier="identifier" label="label" value="true" readonly label-on-top>${defaultSlots}</mg-input-toggle>`,
+    `<mg-input-toggle identifier="identifier" label="label" disabled>${defaultSlots}</mg-input-toggle>`,
+    `<mg-input-toggle identifier="identifier" label="label" value="true" disabled>${defaultSlots}</mg-input-toggle>`,
+  ])('Should render with template', async (html) => {
+    const page = await createPage(`${html}
+      <script>
+      const mgInputToggle = document.querySelector('mg-input-toggle');
+      mgInputToggle.items = [{title: 'batman', value: false}, {title: 'joker', value: true}];
+      </script>`);
+    const element = await page.find('mg-input-toggle');
+    expect(element).toHaveClass('hydrated');
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+  });
+  describe.each([
+    `<mg-input-toggle identifier="identifier" label="long label long label long label long label long label long label long label long label long label long label long label" tooltip="tooltip message">${defaultSlots}</mg-input-toggle>`,
+    `<mg-input-toggle identifier="identifier" label="long label long label long label long label long label long label long label long label long label long label long label" tooltip="tooltip message" label-on-top>${defaultSlots}</mg-input-toggle>`,
+  ])('inside a div.mg-form-group', html => {
+    test('render', async () => {
+      const page = await createPage(`<div class="mg-form-group">${html}</div>
+      <script>
+      const mgInputToggle = document.querySelector('mg-input-toggle');
+      mgInputToggle.items = [{title: 'batman', value: false}, {title: 'joker', value: true}];
+      </script>`);
+      const element = await page.find('mg-input-toggle');
+      expect(element).toHaveClass('hydrated');
+      const screenshot = await page.screenshot();
+      expect(screenshot).toMatchImageSnapshot();
+    });
+  });
+});
+//# sourceMappingURL=mg-input-toggle.e2e.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-input-toggle.e2e.js","sourceRoot":"","sources":["../../../../../../src/components/molecules/inputs/mg-input-toggle/test/mg-input-toggle.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { createPage } from '../../../../../utils/stencil.e2e.test.utils';\n\nconst defaultSlots = '<span slot=\"item-1\">Choix A</span><span slot=\"item-2\">Choix B</span>';\n\ndescribe('mg-input-toggle', () => {\n  test.each([\n    `<mg-input-toggle identifier=\"identifier\" label=\"label\">${defaultSlots}</mg-input-toggle>`,\n    `<mg-input-toggle identifier=\"identifier\" label=\"label\" is-on-off><span slot=\"item-1\">Non</span><span slot=\"item-2\">Oui</span></mg-input-toggle>`,\n    `<mg-input-toggle identifier=\"identifier\" label=\"label\" is-icon is-on-off><mg-icon icon=\"cross\" slot=\"item-1\"></mg-icon><mg-icon icon=\"check\" slot=\"item-2\"></mg-icon></mg-input-toggle>`,\n    `<mg-input-toggle identifier=\"identifier\" label=\"label\" identifier=\"toggle-long-text\"><span slot=\"item-1\">Choix A très long long long long long long long long long long long long long</span><span slot=\"item-2\">Choix B très long long long long long long long long long long long long long</span></mg-input-toggle>`,\n  ])('Keyboard navigation', async html => {\n    const page = await createPage(`${html}\n    <script>\n    const mgInputToggle = document.querySelector('mg-input-toggle');\n    mgInputToggle.items = [{title: 'batman', value: false}, {title: 'joker', value: true}];\n    </script>`);\n\n    const element = await page.find('mg-input-toggle');\n    const toggle = await page.find('mg-input-toggle >>> button');\n\n    expect(element).toHaveClass('hydrated');\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n\n    await page.keyboard.down('Tab');\n\n    await page.waitForChanges();\n\n    const screenshotFocus = await page.screenshot();\n    expect(screenshotFocus).toMatchImageSnapshot();\n\n    await toggle.press('Space');\n\n    await page.waitForChanges();\n\n    const screenshotSelection = await page.screenshot();\n    expect(screenshotSelection).toMatchImageSnapshot();\n\n    await page.keyboard.down('Tab');\n\n    await page.waitForChanges();\n\n    const screenshotUnSelect = await page.screenshot();\n    expect(screenshotUnSelect).toMatchImageSnapshot();\n  });\n\n  test.each([\n    `<mg-input-toggle identifier=\"identifier\" label=\"label\" label-on-top help-text=\"HelpText Message\">${defaultSlots}</mg-input-toggle>`,\n    `<mg-input-toggle identifier=\"identifier\" label=\"label\" input-vertical-list help-text=\"HelpText Message\">${defaultSlots}</mg-input-toggle>`,\n    `<mg-input-toggle identifier=\"identifier\" label=\"label\" label-on-top input-vertical-list help-text=\"HelpText Message\">${defaultSlots}</mg-input-toggle>`,\n    `<mg-input-toggle identifier=\"identifier\" label=\"label\" identifier=\"toggle-long-text\"><span slot=\"item-1\">Choix A très long long long long long long long long long long long long long</span><span slot=\"item-2\">Choix B très long long long long long long long long long long long long long</span></mg-input-toggle>`,\n    `<mg-input-toggle identifier=\"identifier\" label=\"label\" identifier=\"toggle-long-text-readonly\" readonly><span slot=\"item-1\">Choix A avec text long long</span><span slot=\"item-2\">Choix B avec text long long</span></mg-input-toggle>`,\n    `<mg-input-toggle identifier=\"identifier\" label=\"label\" label-hide>${defaultSlots}</mg-input-toggle>`,\n    `<mg-input-toggle identifier=\"identifier\" label=\"label\" is-on-off readonly><span slot=\"item-1\">Off</span><span slot=\"item-2\">On</span></mg-input-toggle>`,\n    `<mg-input-toggle identifier=\"identifier\" label=\"label\" placeholder=\"placeholder\" help-text=\"HelpText Message\">${defaultSlots}</mg-input-toggle>`,\n    `<mg-input-toggle identifier=\"identifier\" label=\"label\" help-text='<mg-icon icon=\"user\" size=\"small\"></mg-icon> Welcome batman'>${defaultSlots}</mg-input-toggle>`,\n  ])('Render without tooltip', async html => {\n    const page = await createPage(`${html}\n      <script>\n      const mgInputToggle = document.querySelector('mg-input-toggle');\n      mgInputToggle.items = [{title: 'batman', value: false}, {title: 'joker', value: true}];\n      </script>`);\n\n    const element = await page.find('mg-input-toggle');\n\n    expect(element).toHaveClass('hydrated');\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n  });\n\n  test.each([undefined, false, true])('Render and toggle value whith reverse checked logic', async value => {\n    const page = await createPage(`${`<mg-input-toggle identifier=\"identifier\" label=\"label\">${defaultSlots}</mg-input-toggle>`}\n      <script>\n      const mgInputToggle = document.querySelector('mg-input-toggle');\n      mgInputToggle.items = [{title: 'batman', value: true}, {title: 'joker', value: false}];\n      mgInputToggle.value = ${value};\n      </script>`);\n\n    const element = await page.find('mg-input-toggle');\n    const button = await page.find('mg-input-toggle >>> button');\n\n    expect(element).toHaveClass('hydrated');\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n\n    await button.click();\n\n    const screenshot2 = await page.screenshot();\n    expect(screenshot2).toMatchImageSnapshot();\n  });\n\n  test.each([true, false])('render with tooltip, case label-on-top %s', async labelOnTop => {\n    const page = await createPage(`<mg-input-toggle identifier=\"identifier\" label=\"label\" tooltip=\"Tooltip message\" label-on-top=\"${labelOnTop}\">${defaultSlots}</mg-input-toggle>\n      <script>\n      const mgInputToggle = document.querySelector('mg-input-toggle');\n      mgInputToggle.items = [{title: 'batman', value: false}, {title: 'joker', value: true}];\n      </script>`);\n\n    const element = await page.find('mg-input-toggle');\n\n    expect(element).toHaveClass('hydrated');\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n\n    await page.keyboard.down('Tab');\n    if (!labelOnTop) {\n      // Ensure to display tooltip\n      await page.setViewport({ width: 600, height: 65 });\n      // when label on top tooltip is on fist tab (next to label)\n      await page.keyboard.down('Tab');\n    }\n\n    const screenshotTooltip = await page.screenshot();\n    expect(screenshotTooltip).toMatchImageSnapshot();\n  });\n\n  test.each([\n    `<mg-input-toggle identifier=\"identifier\" label=\"label\" readonly>${defaultSlots}</mg-input-toggle>`,\n    `<mg-input-toggle identifier=\"identifier\" label=\"label\" value=\"true\">${defaultSlots}</mg-input-toggle>`,\n    `<mg-input-toggle identifier=\"identifier\" label=\"label\" value=\"true\" readonly>${defaultSlots}</mg-input-toggle>`,\n    `<mg-input-toggle identifier=\"identifier\" label=\"label\" value=\"true\" readonly label-on-top>${defaultSlots}</mg-input-toggle>`,\n    `<mg-input-toggle identifier=\"identifier\" label=\"label\" disabled>${defaultSlots}</mg-input-toggle>`,\n    `<mg-input-toggle identifier=\"identifier\" label=\"label\" value=\"true\" disabled>${defaultSlots}</mg-input-toggle>`,\n  ])('Should render with template', async html => {\n    const page = await createPage(`${html}\n      <script>\n      const mgInputToggle = document.querySelector('mg-input-toggle');\n      mgInputToggle.items = [{title: 'batman', value: false}, {title: 'joker', value: true}];\n      </script>`);\n\n    const element = await page.find('mg-input-toggle');\n\n    expect(element).toHaveClass('hydrated');\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n  });\n\n  describe.each([\n    `<mg-input-toggle identifier=\"identifier\" label=\"long label long label long label long label long label long label long label long label long label long label long label\" tooltip=\"tooltip message\">${defaultSlots}</mg-input-toggle>`,\n    `<mg-input-toggle identifier=\"identifier\" label=\"long label long label long label long label long label long label long label long label long label long label long label\" tooltip=\"tooltip message\" label-on-top>${defaultSlots}</mg-input-toggle>`,\n  ])('inside a div.mg-form-group', html => {\n    test('render', async () => {\n      const page = await createPage(`<div class=\"mg-form-group\">${html}</div>\n      <script>\n      const mgInputToggle = document.querySelector('mg-input-toggle');\n      mgInputToggle.items = [{title: 'batman', value: false}, {title: 'joker', value: true}];\n      </script>`);\n\n      const element = await page.find('mg-input-toggle');\n\n      expect(element).toHaveClass('hydrated');\n\n      const screenshot = await page.screenshot();\n      expect(screenshot).toMatchImageSnapshot();\n    });\n  });\n});\n"]}

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

@@ -0,0 +1,203 @@
+import { h } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { MgInputToggle } from "../mg-input-toggle";
+import { MgIcon } from "../../../../atoms/mg-icon/mg-icon";
+const getPage = (args, slots) => newSpecPage({
+  components: [MgInputToggle, MgIcon],
+  template: () => h("mg-input-toggle", Object.assign({}, args), slots && slots.map(slot => slot())),
+});
+const defaultSlots = [() => h("span", { slot: "item-1" }, "Batman"), () => h("span", { slot: "item-2" }, "Joker")];
+const onOffSlots = [() => h("span", { slot: "item-1" }, "Non"), () => h("span", { slot: "item-2" }, "Oui")];
+const iconSlots = [
+  () => (h("span", { slot: "item-1" }, h("mg-icon", { icon: "cross" }))),
+  () => (h("span", { slot: "item-2" }, h("mg-icon", { icon: "check" }))),
+];
+const defaultProps = {
+  label: 'label',
+  identifier: 'identifier',
+  items: [
+    { title: 'batman', value: false },
+    { title: 'joker', value: true },
+  ],
+};
+describe('mg-input-toggle', () => {
+  describe.each([
+    {
+      props: Object.assign({}, defaultProps),
+      slots: defaultSlots,
+    },
+    {
+      props: Object.assign(Object.assign({}, defaultProps), { value: '' }),
+      slots: defaultSlots,
+    },
+    {
+      props: Object.assign(Object.assign({}, defaultProps), { value: true }),
+      slots: defaultSlots,
+    },
+    {
+      props: Object.assign(Object.assign({}, defaultProps), { value: 'true' }),
+      slots: defaultSlots,
+    },
+    {
+      props: Object.assign(Object.assign({}, defaultProps), { isOnOff: false }),
+      slots: onOffSlots,
+    },
+    {
+      props: Object.assign(Object.assign({}, defaultProps), { isIcon: true, isOnOff: true }),
+      slots: iconSlots,
+    },
+  ])('template', ({ props, slots }) => {
+    test.each([
+      Object.assign({}, props),
+      Object.assign(Object.assign({}, props), { labelOnTop: true }),
+      Object.assign(Object.assign({}, props), { labelHide: true }),
+      Object.assign(Object.assign({}, props), { readonly: true }),
+      Object.assign(Object.assign({}, props), { disabled: true }),
+      Object.assign(Object.assign({}, props), { helpText: 'Hello joker' }),
+      Object.assign(Object.assign({}, props), { tooltip: 'My Tooltip Message' }),
+      Object.assign(Object.assign({}, props), { tooltip: 'My Tooltip Message', labelOnTop: true }),
+    ])('Should render with args %s:', async (args) => {
+      const { root } = await getPage(args, slots);
+      expect(root).toMatchSnapshot();
+    });
+  });
+  describe('errors', () => {
+    test.each(['', ' ', undefined])('Should not render with invalid identifier property: %s', async (identifier) => {
+      expect.assertions(1);
+      try {
+        await getPage({
+          identifier,
+          label: 'label',
+          items: [
+            { title: 'batman', value: false },
+            { title: 'joker', value: true },
+          ],
+        }, defaultSlots);
+      }
+      catch (err) {
+        expect(err.message).toMatch('<mg-input> prop "identifier" is required.');
+      }
+    });
+    test.each(['', ' ', undefined])('Should throw error with invalid label property: %s', async (label) => {
+      expect.assertions(1);
+      try {
+        await getPage({
+          identifier: 'identifier',
+          label,
+          items: [
+            { title: 'batman', value: false },
+            { title: 'joker', value: true },
+          ],
+        }, defaultSlots);
+      }
+      catch (err) {
+        expect(err.message).toMatch('<mg-input> prop "label" is required.');
+      }
+    });
+    test('Should throw an error with labelOnTop & labelHide set to true', async () => {
+      expect.assertions(1);
+      try {
+        await getPage({ identifier: 'identifier', label: 'batman', labelOnTop: true, labelHide: true, items: ['batman', 'joker'] }, defaultSlots);
+      }
+      catch (err) {
+        expect(err.message).toMatch('<mg-input> prop "labelOnTop" must not be paired with the prop "labelHide"');
+      }
+    });
+    test('Should throw an error with less than 2 items, case %s', async () => {
+      expect.assertions(1);
+      try {
+        await getPage({ label: 'batman', items: [{ title: 'batman' }] }, defaultSlots);
+      }
+      catch (err) {
+        expect(err.message).toMatch('<mg-input-toggle> prop "items" require 2 items.');
+      }
+    });
+    test.each([undefined, [defaultSlots[0]], [...defaultSlots, ...defaultSlots]])('Should throw an error with blank slots', async () => {
+      expect.assertions(1);
+      try {
+        await getPage({ label: 'batman', items: ['batman', 'joker'] });
+      }
+      catch (err) {
+        expect(err.message).toMatch('<mg-input-toggle> 2 slots are required.');
+      }
+    });
+    test.each([
+      [['batman', { title: 'batman', value: 'batman' }]],
+      [['batman', { batman: 'batman' }]],
+      [[true, false]],
+      [[1, 2]],
+      [[true, 'batman']],
+      [[{ title: 'batman', value: 'batman' }, { batman: 'batman' }]],
+      [
+        [
+          { title: 'batman', value: undefined },
+          { title: 'batman', value: 'test' },
+        ],
+      ],
+    ])('Should throw error with invalid items property: %s', async (items) => {
+      expect.assertions(1);
+      try {
+        await getPage({ label: 'Label', items }, defaultSlots);
+      }
+      catch (err) {
+        expect(err.message).toMatch('<mg-input-toggle> prop "items" is required and all items must be the same type: ToggleValue.');
+      }
+    });
+  });
+  test.each([
+    {
+      items: [
+        { title: 'batman', value: 'a' },
+        { title: 'joker', value: 'b' },
+      ],
+      expected: 'b',
+      value: undefined,
+    },
+    {
+      items: [
+        { title: 'batman', value: 'a' },
+        { title: 'joker', value: 'b' },
+      ],
+      expected: 'a',
+      value: 'b',
+    },
+    {
+      items: [
+        { title: 'batman', value: 1 },
+        { title: 'joker', value: 2 },
+      ],
+      expected: 2,
+      value: 1,
+    },
+    {
+      items: [
+        { title: 'batman', value: false },
+        { title: 'robin', value: true },
+      ],
+      expected: false,
+      value: true,
+    },
+    {
+      items: [
+        { title: 'batman', value: true },
+        { title: 'robin', value: false },
+      ],
+      expected: true,
+      value: false,
+    },
+  ])('Should trigger events for items with inputValue: %s', async ({ items, expected, value }) => {
+    const args = { label: 'label', items, identifier: 'identifier', helpText: 'My help text', value };
+    const page = await getPage(args, defaultSlots);
+    const mgInputToogle = page.doc.querySelector('mg-input-toggle');
+    const button = mgInputToogle.shadowRoot.querySelector('button');
+    jest.spyOn(page.rootInstance.valueChange, 'emit');
+    button.dispatchEvent(new CustomEvent('focus', { bubbles: true }));
+    await page.waitForChanges();
+    expect(page.root).toMatchSnapshot(); //Snapshot on focus
+    button.dispatchEvent(new CustomEvent('click', { bubbles: true }));
+    await page.waitForChanges();
+    expect(page.rootInstance.valueChange.emit).toHaveBeenCalledWith(expected);
+    expect(page.rootInstance.valueChange.emit).toHaveBeenCalledTimes(1);
+  });
+});
+//# sourceMappingURL=mg-input-toggle.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-input-toggle.spec.js","sourceRoot":"","sources":["../../../../../../src/components/molecules/inputs/mg-input-toggle/test/mg-input-toggle.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { MgInputToggle } from '../mg-input-toggle';\nimport { MgIcon } from '../../../../atoms/mg-icon/mg-icon';\n\nconst getPage = (args, slots?) =>\n  newSpecPage({\n    components: [MgInputToggle, MgIcon],\n    template: () => <mg-input-toggle {...args}>{slots && slots.map(slot => slot())}</mg-input-toggle>,\n  });\n\nconst defaultSlots = [() => <span slot=\"item-1\">Batman</span>, () => <span slot=\"item-2\">Joker</span>];\nconst onOffSlots = [() => <span slot=\"item-1\">Non</span>, () => <span slot=\"item-2\">Oui</span>];\nconst iconSlots = [\n  () => (\n    <span slot=\"item-1\">\n      <mg-icon icon=\"cross\"></mg-icon>\n    </span>\n  ),\n  () => (\n    <span slot=\"item-2\">\n      <mg-icon icon=\"check\"></mg-icon>\n    </span>\n  ),\n];\n\nconst defaultProps = {\n  label: 'label',\n  identifier: 'identifier',\n  items: [\n    { title: 'batman', value: false },\n    { title: 'joker', value: true },\n  ],\n};\n\ndescribe('mg-input-toggle', () => {\n  describe.each([\n    {\n      props: {\n        ...defaultProps,\n      },\n      slots: defaultSlots,\n    },\n    {\n      props: {\n        ...defaultProps,\n        value: '',\n      },\n      slots: defaultSlots,\n    },\n    {\n      props: {\n        ...defaultProps,\n        value: true,\n      },\n      slots: defaultSlots,\n    },\n    {\n      props: {\n        ...defaultProps,\n        value: 'true',\n      },\n      slots: defaultSlots,\n    },\n    {\n      props: {\n        ...defaultProps,\n        isOnOff: false,\n      },\n      slots: onOffSlots,\n    },\n    {\n      props: {\n        ...defaultProps,\n        isIcon: true,\n        isOnOff: true,\n      },\n      slots: iconSlots,\n    },\n  ])('template', ({ props, slots }) => {\n    test.each([\n      {\n        ...props,\n      },\n      {\n        ...props,\n        labelOnTop: true,\n      },\n      {\n        ...props,\n        labelHide: true,\n      },\n      {\n        ...props,\n        readonly: true,\n      },\n      {\n        ...props,\n        disabled: true,\n      },\n      {\n        ...props,\n        helpText: 'Hello joker',\n      },\n      {\n        ...props,\n        tooltip: 'My Tooltip Message',\n      },\n      {\n        ...props,\n        tooltip: 'My Tooltip Message',\n        labelOnTop: true,\n      },\n    ])('Should render with args %s:', async args => {\n      const { root } = await getPage(args, slots);\n      expect(root).toMatchSnapshot();\n    });\n  });\n\n  describe('errors', () => {\n    test.each(['', ' ', undefined])('Should not render with invalid identifier property: %s', async identifier => {\n      expect.assertions(1);\n      try {\n        await getPage(\n          {\n            identifier,\n            label: 'label',\n            items: [\n              { title: 'batman', value: false },\n              { title: 'joker', value: true },\n            ],\n          },\n          defaultSlots,\n        );\n      } catch (err) {\n        expect(err.message).toMatch('<mg-input> prop \"identifier\" is required.');\n      }\n    });\n\n    test.each(['', ' ', undefined])('Should throw error with invalid label property: %s', async label => {\n      expect.assertions(1);\n      try {\n        await getPage(\n          {\n            identifier: 'identifier',\n            label,\n            items: [\n              { title: 'batman', value: false },\n              { title: 'joker', value: true },\n            ],\n          },\n          defaultSlots,\n        );\n      } catch (err) {\n        expect(err.message).toMatch('<mg-input> prop \"label\" is required.');\n      }\n    });\n\n    test('Should throw an error with labelOnTop & labelHide set to true', async () => {\n      expect.assertions(1);\n      try {\n        await getPage({ identifier: 'identifier', label: 'batman', labelOnTop: true, labelHide: true, items: ['batman', 'joker'] }, defaultSlots);\n      } catch (err) {\n        expect(err.message).toMatch('<mg-input> prop \"labelOnTop\" must not be paired with the prop \"labelHide\"');\n      }\n    });\n\n    test('Should throw an error with less than 2 items, case %s', async () => {\n      expect.assertions(1);\n      try {\n        await getPage({ label: 'batman', items: [{ title: 'batman' }] }, defaultSlots);\n      } catch (err) {\n        expect(err.message).toMatch('<mg-input-toggle> prop \"items\" require 2 items.');\n      }\n    });\n\n    test.each([undefined, [defaultSlots[0]], [...defaultSlots, ...defaultSlots]])('Should throw an error with blank slots', async () => {\n      expect.assertions(1);\n      try {\n        await getPage({ label: 'batman', items: ['batman', 'joker'] });\n      } catch (err) {\n        expect(err.message).toMatch('<mg-input-toggle> 2 slots are required.');\n      }\n    });\n\n    test.each([\n      [['batman', { title: 'batman', value: 'batman' }]],\n      [['batman', { batman: 'batman' }]],\n      [[true, false]],\n      [[1, 2]],\n      [[true, 'batman']],\n      [[{ title: 'batman', value: 'batman' }, { batman: 'batman' }]],\n      [\n        [\n          { title: 'batman', value: undefined },\n          { title: 'batman', value: 'test' },\n        ],\n      ],\n    ])('Should throw error with invalid items property: %s', async items => {\n      expect.assertions(1);\n      try {\n        await getPage({ label: 'Label', items }, defaultSlots);\n      } catch (err) {\n        expect(err.message).toMatch('<mg-input-toggle> prop \"items\" is required and all items must be the same type: ToggleValue.');\n      }\n    });\n  });\n\n  test.each([\n    {\n      items: [\n        { title: 'batman', value: 'a' },\n        { title: 'joker', value: 'b' },\n      ],\n      expected: 'b',\n      value: undefined,\n    },\n    {\n      items: [\n        { title: 'batman', value: 'a' },\n        { title: 'joker', value: 'b' },\n      ],\n      expected: 'a',\n      value: 'b',\n    },\n    {\n      items: [\n        { title: 'batman', value: 1 },\n        { title: 'joker', value: 2 },\n      ],\n      expected: 2,\n      value: 1,\n    },\n    {\n      items: [\n        { title: 'batman', value: false },\n        { title: 'robin', value: true },\n      ],\n      expected: false,\n      value: true,\n    },\n    {\n      items: [\n        { title: 'batman', value: true },\n        { title: 'robin', value: false },\n      ],\n      expected: true,\n      value: false,\n    },\n  ])('Should trigger events for items with inputValue: %s', async ({ items, expected, value }) => {\n    const args = { label: 'label', items, identifier: 'identifier', helpText: 'My help text', value };\n    const page = await getPage(args, defaultSlots);\n\n    const mgInputToogle = page.doc.querySelector('mg-input-toggle');\n    const button = mgInputToogle.shadowRoot.querySelector('button');\n\n    jest.spyOn(page.rootInstance.valueChange, 'emit');\n\n    button.dispatchEvent(new CustomEvent('focus', { bubbles: true }));\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot(); //Snapshot on focus\n\n    button.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n    await page.waitForChanges();\n\n    expect(page.rootInstance.valueChange.emit).toHaveBeenCalledWith(expected);\n    expect(page.rootInstance.valueChange.emit).toHaveBeenCalledTimes(1);\n  });\n});\n"]}

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

@@ -10,3 +10,4 @@ export var Direction;
  * List of all possibles sizes
  */
 export const sizes = ['regular', 'medium', 'large'];
+//# sourceMappingURL=mg-menu.conf.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-menu.conf.js","sourceRoot":"","sources":["../../../../../src/components/molecules/menu/mg-menu/mg-menu.conf.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,CAAN,IAAY,SAGX;AAHD,WAAY,SAAS;EACnB,kCAAqB,CAAA;EACrB,sCAAyB,CAAA;AAC3B,CAAC,EAHW,SAAS,KAAT,SAAS,QAGpB;AAOD;;GAEG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,SAAS,EAAE,QAAQ,EAAE,OAAO,CAAU,CAAC","sourcesContent":["import { MgItemMore } from '../../mg-item-more/mg-item-more';\n\n/**\n * Menu direction type\n */\nexport enum Direction {\n  VERTICAL = 'vertical',\n  HORIZONTAL = 'horizontal',\n}\n\n/**\n * ItemMore prop type\n */\nexport type ItemMoreType = Pick<MgItemMore, 'icon' | 'slotlabel' | 'size'>;\n\n/**\n * List of all possibles sizes\n */\nexport const sizes = ['regular', 'medium', 'large'] as const;\n\n/**\n * item Size from sizes\n */\nexport type MenuSizeType = (typeof sizes)[number];\n"]}

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

@@ -1,5 +1,5 @@
-import { h, Host } from '@stencil/core';
-import { Direction, sizes } from './mg-menu.conf';
+import { h, Host } from "@stencil/core";
+import { Direction, sizes } from "./mg-menu.conf";
 export class MgMenu {
   constructor() {
     /************
@@ -195,7 +195,8 @@ export class MgMenu {
           "references": {
             "Direction": {
               "location": "import",
-              "path": "./mg-menu.conf"
+              "path": "./mg-menu.conf",
+              "id": "src/components/molecules/menu/mg-menu/mg-menu.conf.ts::Direction"
             }
           }
         },
@@ -218,7 +219,8 @@ export class MgMenu {
           "references": {
             "ItemMoreType": {
               "location": "import",
-              "path": "./mg-menu.conf"
+              "path": "./mg-menu.conf",
+              "id": "src/components/molecules/menu/mg-menu/mg-menu.conf.ts::ItemMoreType"
             }
           }
         },
@@ -238,7 +240,8 @@ export class MgMenu {
           "references": {
             "MenuSizeType": {
               "location": "import",
-              "path": "./mg-menu.conf"
+              "path": "./mg-menu.conf",
+              "id": "src/components/molecules/menu/mg-menu/mg-menu.conf.ts::MenuSizeType"
             }
           }
         },
@@ -276,3 +279,4 @@ export class MgMenu {
       }];
   }
 }
+//# sourceMappingURL=mg-menu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-menu.js","sourceRoot":"","sources":["../../../../../src/components/molecules/menu/mg-menu/mg-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Element, Watch, Host } from '@stencil/core';\nimport { Direction, sizes } from './mg-menu.conf';\nimport type { MenuSizeType, ItemMoreType } from './mg-menu.conf';\n\n@Component({\n  tag: 'mg-menu',\n  styleUrl: 'mg-menu.scss',\n  shadow: true,\n})\nexport class MgMenu {\n  /************\n   * Internal *\n   ************/\n\n  private readonly name = 'mg-menu';\n  private menuItems: HTMLMgMenuItemElement[] = [];\n  private focusedMenuItem = 0;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgMenuElement;\n\n  /**\n   * Menu label. Include short menu description.\n   * Required for accessibility\n   */\n  @Prop() label!: string;\n  @Watch('label')\n  validateLabel(newValue: MgMenu['label']): void {\n    if (newValue === undefined) {\n      throw new Error(`<${this.name}> prop \"label\" is required.`);\n    }\n  }\n\n  /**\n   * Component display direction.\n   */\n  @Prop({ reflect: true }) direction: Direction = Direction.HORIZONTAL;\n  @Watch('direction')\n  validateDirection(newValue: MgMenu['direction']): void {\n    if (![Direction.VERTICAL, Direction.HORIZONTAL].includes(newValue)) {\n      throw new Error(`<${this.name}> prop \"direction\" must be one of: ${Direction.HORIZONTAL}, ${Direction.VERTICAL}.`);\n    }\n  }\n\n  /**\n   * Customize \"mg-item-more\" element\n   * Used with direction: 'vertical' to manage overflow\n   */\n  @Prop() itemmore: ItemMoreType;\n  @Watch('itemmore')\n  validateItemMore(newValue: MgMenu['itemmore']): void {\n    if (newValue !== undefined && this.direction !== Direction.HORIZONTAL) {\n      throw new Error(`<${this.name}> prop \"itemmore\" must be paired with direction ${Direction.HORIZONTAL}.`);\n    }\n  }\n\n  /**\n   * Define mg-menu size\n   */\n  @Prop() size: MenuSizeType = 'regular';\n  @Watch('size')\n  validateSize(newValue: MgMenu['size']): void {\n    if (!sizes.includes(newValue)) {\n      throw new Error(`<${this.name}> prop \"size\" must be one of: ${sizes.join(', ')}.`);\n    }\n  }\n\n  /**\n   * is this menu a child menu. Used for conditional render.\n   */\n  @State() isChildMenu: boolean;\n\n  /*************\n   * Methods *\n   *************/\n\n  /**\n   * Close matching menu-item\n   * @param item - menu-item to close\n   * @param condition - addionnal condition\n   */\n  private closeMenuItem = (item: HTMLMgMenuItemElement, condition: boolean): void => {\n    if (!this.isChildMenu && condition) {\n      item.expanded = false;\n    }\n  };\n\n  /**\n   * get mg-item-more element\n   * @returns mg-item-more element\n   */\n  private getItemMore = (): HTMLMgItemMoreElement => this.element.querySelector('mg-item-more');\n\n  /**\n   * get mg-item-more child mg-menu-item element\n   * @returns mg-menu-item element\n   */\n  private getItemMoreMenuItem = (): HTMLMgMenuItemElement => this.getItemMore()?.shadowRoot?.querySelector('mg-menu-item');\n\n  /**\n   * Set item listend\n   * @param item - mg-menu-item element\n   * @param index - number\n   */\n  private setItemListener = (item: HTMLMgMenuItemElement, index: MgMenu['focusedMenuItem']): void => {\n    ['click', 'focus'].forEach(trigger => {\n      (item.shadowRoot.querySelector('button') || item.shadowRoot.querySelector('a')).addEventListener(trigger, () => {\n        this.focusedMenuItem = index;\n        // reset expanded on previous active menu item\n        (Boolean(this.getItemMoreMenuItem()) ? [...this.menuItems, this.getItemMoreMenuItem()] : this.menuItems).forEach((item, index) => {\n          this.closeMenuItem(item, index !== this.focusedMenuItem);\n        });\n      });\n    });\n  };\n\n  /**\n   * Store menu-items on component init and add listeners\n   */\n  private initMenuItemsListeners = (): void => {\n    // add listeners on menu item and edit index\n    this.menuItems.forEach((item, index) => {\n      this.setItemListener(item, index);\n    });\n  };\n\n  /**\n   * Handle item-loaded event on mg-item-more element\n   */\n  private handleItemLoaded = (): void => {\n    this.setItemListener(this.getItemMoreMenuItem(), this.menuItems.length);\n  };\n\n  /**\n   * render mg-item-more\n   */\n  private renderMgItemMore = (): void => {\n    // /!\\ externalise item tag name to get a string type and bypass type checking when value is used in next createElement\n    // by doing this we prevent stencil to generate a circular dependencies graph at build time with mg-item-more component.\n    const item = 'mg-item-more';\n    const mgItemMore = document.createElement(item);\n    Object.assign(mgItemMore, this.itemmore);\n    mgItemMore.addEventListener('item-loaded', this.handleItemLoaded);\n    this.element.appendChild(mgItemMore);\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Validate props\n   */\n  componentWillLoad(): void {\n    this.validateDirection(this.direction);\n    this.validateLabel(this.label);\n    this.validateItemMore(this.itemmore);\n    this.validateSize(this.size);\n  }\n\n  /**\n   * Check if component slots configuration\n   * @returns timeout\n   */\n  componentDidLoad(): ReturnType<typeof setTimeout> {\n    // update props and states after componentDidLoad hook\n    // return a promise to process action only in the FIRST render().\n    // https://stenciljs.com/docs/component-lifecycle#componentwillload\n    return setTimeout(() => {\n      // store all menu-items\n      this.menuItems = Array.from(this.element.children).filter(child => child.nodeName === 'MG-MENU-ITEM') as HTMLMgMenuItemElement[];\n      this.isChildMenu = this.element.closest('mg-menu-item') !== null;\n\n      // add mg-item-more to manage OverflowBehavior\n      if (this.direction === Direction.HORIZONTAL && !this.isChildMenu) this.renderMgItemMore();\n\n      // use mutation observer to improve reactivity\n      new MutationObserver(entries => {\n        const mgItemMore = this.getItemMore();\n        // prevent infinit loop by exclude mg-item-more deletion entry\n        if (entries.some(entry => entry.type === 'childList' && Array.from(entry.removedNodes).some(node => node.nodeName === 'MG-ITEM-MORE'))) return;\n        else if (mgItemMore !== null) {\n          // render a new mg-item-more\n          mgItemMore.remove();\n          mgItemMore.removeEventListener('item-loaded', this.handleItemLoaded);\n          this.renderMgItemMore();\n        }\n      }).observe(this.element, { childList: true, characterData: true, subtree: true });\n    }, 0);\n  }\n\n  /**\n   * Add listeners to items\n   */\n  componentDidRender(): void {\n    this.initMenuItemsListeners();\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <Host role=\"list\" aria-label={this.label}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}