@mgdis/mg-components 5.16.0 → 5.17.0

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"]}

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

@@ -0,0 +1,268 @@
+var __asyncValues = (this && this.__asyncValues) || function (o) {
+  if (!Symbol.asyncIterator)
+    throw new TypeError("Symbol.asyncIterator is not defined.");
+  var m = o[Symbol.asyncIterator], i;
+  return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
+  function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
+  function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
+};
+import { createPage } from "../../../../../utils/stencil.e2e.test.utils";
+import { renderAttributes } from "../../../../../utils/e2e.test.utils";
+import { Direction, sizes } from "../mg-menu.conf";
+var Position;
+(function (Position) {
+  Position["PRESS"] = "press";
+  Position["DOWN"] = "down";
+})(Position || (Position = {}));
+var Key;
+(function (Key) {
+  Key["TAB"] = "Tab";
+  Key["SHIFT"] = "Shift";
+  Key["ENTER"] = "Enter";
+})(Key || (Key = {}));
+const expectImageSnapshot = async (page) => {
+  await page.waitForChanges();
+  await page.waitForTimeout(200);
+  const screenshot = await page.screenshot();
+  expect(screenshot).toMatchImageSnapshot();
+};
+const getSubMenuSize = (size) => {
+  if (size === 'large')
+    return 'medium';
+  else if (size === 'medium')
+    return 'regular';
+  else
+    return 'regular';
+};
+const getFrameSize = (direction, size) => direction === Direction.VERTICAL
+  ? { width: 400, height: ['medium', 'large'].includes(size) ? 400 : 250 }
+  : { width: ['medium', 'large'].includes(size) ? 1100 : 800, height: 200 };
+const createHTML = (args, containerSize) => `
+  <header class="menu-container menu-container--${containerSize}">
+    <mg-menu ${renderAttributes(Object.assign({ label: 'menu' }, args))}>
+      <mg-menu-item status="active">
+        <span slot="label">1 - head-1</span>
+        <mg-menu ${renderAttributes({ label: 'sub-menu 1', direction: Direction.VERTICAL, size: getSubMenuSize(args === null || args === void 0 ? void 0 : args.size) })}>
+          <mg-menu-item><span slot="label">Batman begins</span></mg-menu-item>
+        </mg-menu>
+      </mg-menu-item>
+      <mg-menu-item status="disabled"><span slot="label">1 - head-2 long</span></mg-menu-item>
+      <mg-menu-item href="#link">
+        <span slot="label">1 - head-3 very long</span>
+        <mg-icon icon='user' slot='image'></mg-icon>
+      </mg-menu-item>
+      <mg-menu-item>
+        <span slot="label">1 - head-4</span>
+        <mg-icon icon='user' slot='image'></mg-icon>
+        ${(args === null || args === void 0 ? void 0 : args.badge) ? "<mg-badge value='2' label='hello' slot='information'></mg-badge>" : ''}  
+      </mg-menu-item>
+      <mg-menu-item>
+        <span slot="label">1 - head-5</span>
+        <mg-icon icon='user' slot='image'></mg-icon>
+        ${(args === null || args === void 0 ? void 0 : args.badge) ? "<mg-badge value='2' label='hello' slot='information'></mg-badge>" : ''} 
+        <mg-menu ${renderAttributes({ label: 'sub-menu 2', direction: Direction.VERTICAL, size: getSubMenuSize(args === null || args === void 0 ? void 0 : args.size) })}>
+          <mg-menu-item><span slot="label">Batman begins with a longer title to go outide screen</span></mg-menu-item>
+        </mg-menu>
+      </mg-menu-item>
+    </mg-menu>
+  </header>
+  <style>
+    .menu-container.menu-container--vertical-small {
+      width: 180px;
+    }
+  </style>
+  `;
+describe('mg-menu', () => {
+  describe.each([Direction.HORIZONTAL, Direction.VERTICAL])('direction %s', direction => {
+    test.each(sizes)(`should renders, case direction ${direction} size %s with large screen`, async (size) => {
+      const page = await createPage(createHTML({ direction, size, badge: true }), getFrameSize(direction, size));
+      const element = await page.find('mg-menu');
+      expect(element).toHaveClass('hydrated');
+      await expectImageSnapshot(page);
+    });
+  });
+  describe('navigation horizontal', () => {
+    test(`should success mouse navigation, case direction ${Direction.HORIZONTAL}`, async () => {
+      var _a, e_1, _b, _c;
+      const page = await createPage(createHTML({ direction: Direction.HORIZONTAL }), getFrameSize(Direction.HORIZONTAL));
+      await expectImageSnapshot(page);
+      const actions = [
+        { position: 1, expanded: true },
+        { position: 5, expanded: true },
+        { position: 5, expanded: false },
+        { position: 1, expanded: true },
+      ];
+      try {
+        for (var _d = true, actions_1 = __asyncValues(actions), actions_1_1; actions_1_1 = await actions_1.next(), _a = actions_1_1.done, !_a; _d = true) {
+          _c = actions_1_1.value;
+          _d = false;
+          const action = _c;
+          let item = await page.find(`header > mg-menu > mg-menu-item:nth-of-type(${action.position}) >>> button`);
+          await item.click();
+          await page.waitForChanges();
+          expect(item.getAttribute('aria-expanded')).toBe(`${action.expanded}`);
+          item = await page.find(`header > mg-menu > mg-menu-item:not(:nth-of-type(${action.position})) >>> button[aria-expanded="true"]`);
+          expect(item).toBe(null);
+        }
+      }
+      catch (e_1_1) {
+        e_1 = { error: e_1_1 };
+      }
+      finally {
+        try {
+          if (!_d && !_a && (_b = actions_1.return))
+            await _b.call(actions_1);
+        }
+        finally {
+          if (e_1)
+            throw e_1.error;
+        }
+      }
+      // menu-item close
+      await page.$eval('body', elm => {
+        elm.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+      });
+      await page.waitForChanges();
+      await expectImageSnapshot(page);
+    });
+    test(`should success keyboard navigation, case direction ${Direction.HORIZONTAL}`, async () => {
+      var _a, e_2, _b, _c;
+      const page = await createPage(createHTML({ direction: Direction.HORIZONTAL }), getFrameSize(Direction.HORIZONTAL));
+      await expectImageSnapshot(page);
+      const actions = [
+        { position: Position.PRESS, key: Key.TAB, openeItem: null },
+        { position: Position.PRESS, key: Key.TAB, openeItem: null },
+        { position: Position.PRESS, key: Key.TAB, openeItem: null },
+        { position: Position.PRESS, key: Key.TAB, openeItem: null },
+        { position: Position.PRESS, key: Key.ENTER, openeItem: 5 },
+        { position: Position.PRESS, key: Key.TAB, openeItem: 5 },
+        { position: Position.PRESS, key: Key.SHIFT, openeItem: 5 },
+        { position: Position.PRESS, key: Key.ENTER, openeItem: null },
+        { position: Position.PRESS, key: Key.TAB, openeItem: null },
+      ];
+      try {
+        for (var _d = true, actions_2 = __asyncValues(actions), actions_2_1; actions_2_1 = await actions_2.next(), _a = actions_2_1.done, !_a; _d = true) {
+          _c = actions_2_1.value;
+          _d = false;
+          const action = _c;
+          if (action.key === Key.SHIFT) {
+            await page.keyboard.down(Key.SHIFT);
+            await page.keyboard.press(Key.TAB);
+            await page.keyboard.up(Key.SHIFT);
+          }
+          else {
+            await page.keyboard[action.position](action.key);
+          }
+          await page.waitForChanges();
+          let item;
+          if (action.openeItem > 0) {
+            item = await page.find(`header > mg-menu > mg-menu-item:nth-of-type(${action.openeItem}) >>> button[aria-expanded="true"]`);
+            expect(item).not.toBe(null);
+            item = await page.find(`header > mg-menu > mg-menu-item:not(:nth-of-type(${action.openeItem})) >>> button[aria-expanded="true"]`);
+          }
+          else {
+            item = await page.find(`header > mg-menu > mg-menu-item >>> button[aria-expanded="true"]`);
+          }
+          expect(item).toBe(null);
+        }
+      }
+      catch (e_2_1) {
+        e_2 = { error: e_2_1 };
+      }
+      finally {
+        try {
+          if (!_d && !_a && (_b = actions_2.return))
+            await _b.call(actions_2);
+        }
+        finally {
+          if (e_2)
+            throw e_2.error;
+        }
+      }
+    });
+  });
+  describe('navigation vertical', () => {
+    test(`should success mouse navigation, case direction ${Direction.VERTICAL}`, async () => {
+      var _a, e_3, _b, _c;
+      const page = await createPage(createHTML({ direction: Direction.VERTICAL }), getFrameSize(Direction.VERTICAL));
+      await expectImageSnapshot(page);
+      const positions = [1, 5, 5, 1];
+      try {
+        for (var _d = true, positions_1 = __asyncValues(positions), positions_1_1; positions_1_1 = await positions_1.next(), _a = positions_1_1.done, !_a; _d = true) {
+          _c = positions_1_1.value;
+          _d = false;
+          const position = _c;
+          const item = await page.find(`header > mg-menu > mg-menu-item:nth-of-type(${position}) >>> button`);
+          await item.click();
+          await page.waitForChanges();
+          await expectImageSnapshot(page);
+        }
+      }
+      catch (e_3_1) {
+        e_3 = { error: e_3_1 };
+      }
+      finally {
+        try {
+          if (!_d && !_a && (_b = positions_1.return))
+            await _b.call(positions_1);
+        }
+        finally {
+          if (e_3)
+            throw e_3.error;
+        }
+      }
+      await page.$eval('body', elm => {
+        elm.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+      });
+      await page.waitForChanges();
+      await expectImageSnapshot(page);
+    });
+    test(`should success keyboard navigation, case direction ${Direction.VERTICAL}`, async () => {
+      var _a, e_4, _b, _c;
+      const page = await createPage(createHTML({ direction: Direction.VERTICAL }), getFrameSize(Direction.VERTICAL));
+      await expectImageSnapshot(page);
+      const actions = [
+        { position: Position.PRESS, key: Key.TAB },
+        { position: Position.PRESS, key: Key.TAB },
+        { position: Position.PRESS, key: Key.TAB },
+        { position: Position.PRESS, key: Key.TAB },
+        { position: Position.PRESS, key: Key.ENTER },
+        { position: Position.PRESS, key: Key.TAB },
+        { position: Position.PRESS, key: Key.SHIFT },
+        { position: Position.PRESS, key: Key.ENTER },
+        { position: Position.PRESS, key: Key.TAB },
+      ];
+      try {
+        for (var _d = true, actions_3 = __asyncValues(actions), actions_3_1; actions_3_1 = await actions_3.next(), _a = actions_3_1.done, !_a; _d = true) {
+          _c = actions_3_1.value;
+          _d = false;
+          const action = _c;
+          if (action.key === Key.SHIFT) {
+            await page.keyboard.down(Key.SHIFT);
+            await page.keyboard.press(Key.TAB);
+            await page.keyboard.up(Key.SHIFT);
+          }
+          else {
+            await page.keyboard[action.position](action.key);
+          }
+          await page.waitForChanges();
+          await expectImageSnapshot(page);
+        }
+      }
+      catch (e_4_1) {
+        e_4 = { error: e_4_1 };
+      }
+      finally {
+        try {
+          if (!_d && !_a && (_b = actions_3.return))
+            await _b.call(actions_3);
+        }
+        finally {
+          if (e_4)
+            throw e_4.error;
+        }
+      }
+    });
+  });
+});
+//# sourceMappingURL=mg-menu.e2e.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-menu.e2e.js","sourceRoot":"","sources":["../../../../../../src/components/molecules/menu/mg-menu/test/mg-menu.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { KeyInput } from 'puppeteer';\nimport { createPage, DesignSystemE2EPage } from '../../../../../utils/stencil.e2e.test.utils';\nimport { renderAttributes } from '../../../../../utils/e2e.test.utils';\nimport { Direction, MenuSizeType, sizes } from '../mg-menu.conf';\n\nenum Position {\n  PRESS = 'press',\n  DOWN = 'down',\n}\n\nenum Key {\n  TAB = 'Tab',\n  SHIFT = 'Shift',\n  ENTER = 'Enter',\n}\n\nconst expectImageSnapshot = async (page: DesignSystemE2EPage) => {\n  await page.waitForChanges();\n  await page.waitForTimeout(200);\n  const screenshot = await page.screenshot();\n  expect(screenshot).toMatchImageSnapshot();\n};\n\nconst getSubMenuSize = (size: MenuSizeType) => {\n  if (size === 'large') return 'medium';\n  else if (size === 'medium') return 'regular';\n  else return 'regular';\n};\n\nconst getFrameSize = (direction, size?) =>\n  direction === Direction.VERTICAL\n    ? { width: 400, height: ['medium', 'large'].includes(size) ? 400 : 250 }\n    : { width: ['medium', 'large'].includes(size) ? 1100 : 800, height: 200 };\n\nconst createHTML = (args, containerSize?) => `\n  <header class=\"menu-container menu-container--${containerSize}\">\n    <mg-menu ${renderAttributes({ label: 'menu', ...args })}>\n      <mg-menu-item status=\"active\">\n        <span slot=\"label\">1 - head-1</span>\n        <mg-menu ${renderAttributes({ label: 'sub-menu 1', direction: Direction.VERTICAL, size: getSubMenuSize(args?.size) })}>\n          <mg-menu-item><span slot=\"label\">Batman begins</span></mg-menu-item>\n        </mg-menu>\n      </mg-menu-item>\n      <mg-menu-item status=\"disabled\"><span slot=\"label\">1 - head-2 long</span></mg-menu-item>\n      <mg-menu-item href=\"#link\">\n        <span slot=\"label\">1 - head-3 very long</span>\n        <mg-icon icon='user' slot='image'></mg-icon>\n      </mg-menu-item>\n      <mg-menu-item>\n        <span slot=\"label\">1 - head-4</span>\n        <mg-icon icon='user' slot='image'></mg-icon>\n        ${args?.badge ? \"<mg-badge value='2' label='hello' slot='information'></mg-badge>\" : ''}  \n      </mg-menu-item>\n      <mg-menu-item>\n        <span slot=\"label\">1 - head-5</span>\n        <mg-icon icon='user' slot='image'></mg-icon>\n        ${args?.badge ? \"<mg-badge value='2' label='hello' slot='information'></mg-badge>\" : ''} \n        <mg-menu ${renderAttributes({ label: 'sub-menu 2', direction: Direction.VERTICAL, size: getSubMenuSize(args?.size) })}>\n          <mg-menu-item><span slot=\"label\">Batman begins with a longer title to go outide screen</span></mg-menu-item>\n        </mg-menu>\n      </mg-menu-item>\n    </mg-menu>\n  </header>\n  <style>\n    .menu-container.menu-container--vertical-small {\n      width: 180px;\n    }\n  </style>\n  `;\n\ndescribe('mg-menu', () => {\n  describe.each([Direction.HORIZONTAL, Direction.VERTICAL])('direction %s', direction => {\n    test.each(sizes)(`should renders, case direction ${direction} size %s with large screen`, async size => {\n      const page = await createPage(createHTML({ direction, size, badge: true }), getFrameSize(direction, size));\n\n      const element = await page.find('mg-menu');\n      expect(element).toHaveClass('hydrated');\n\n      await expectImageSnapshot(page);\n    });\n  });\n\n  describe('navigation horizontal', () => {\n    test(`should success mouse navigation, case direction ${Direction.HORIZONTAL}`, async () => {\n      const page = await createPage(createHTML({ direction: Direction.HORIZONTAL }), getFrameSize(Direction.HORIZONTAL));\n      await expectImageSnapshot(page);\n\n      const actions = [\n        { position: 1, expanded: true },\n        { position: 5, expanded: true },\n        { position: 5, expanded: false },\n        { position: 1, expanded: true },\n      ];\n      for await (const action of actions) {\n        let item = await page.find(`header > mg-menu > mg-menu-item:nth-of-type(${action.position}) >>> button`);\n        await item.click();\n        await page.waitForChanges();\n\n        expect(item.getAttribute('aria-expanded')).toBe(`${action.expanded}`);\n        item = await page.find(`header > mg-menu > mg-menu-item:not(:nth-of-type(${action.position})) >>> button[aria-expanded=\"true\"]`);\n        expect(item).toBe(null);\n      }\n\n      // menu-item close\n      await page.$eval('body', elm => {\n        elm.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n      });\n      await page.waitForChanges();\n      await expectImageSnapshot(page);\n    });\n\n    test(`should success keyboard navigation, case direction ${Direction.HORIZONTAL}`, async () => {\n      const page = await createPage(createHTML({ direction: Direction.HORIZONTAL }), getFrameSize(Direction.HORIZONTAL));\n      await expectImageSnapshot(page);\n\n      const actions = [\n        { position: Position.PRESS, key: Key.TAB, openeItem: null },\n        { position: Position.PRESS, key: Key.TAB, openeItem: null },\n        { position: Position.PRESS, key: Key.TAB, openeItem: null },\n        { position: Position.PRESS, key: Key.TAB, openeItem: null },\n        { position: Position.PRESS, key: Key.ENTER, openeItem: 5 },\n        { position: Position.PRESS, key: Key.TAB, openeItem: 5 },\n        { position: Position.PRESS, key: Key.SHIFT, openeItem: 5 },\n        { position: Position.PRESS, key: Key.ENTER, openeItem: null },\n        { position: Position.PRESS, key: Key.TAB, openeItem: null },\n      ];\n\n      for await (const action of actions) {\n        if (action.key === Key.SHIFT) {\n          await page.keyboard.down(Key.SHIFT);\n          await page.keyboard.press(Key.TAB);\n          await page.keyboard.up(Key.SHIFT);\n        } else {\n          await page.keyboard[action.position](action.key as unknown as KeyInput);\n        }\n        await page.waitForChanges();\n        let item;\n        if (action.openeItem > 0) {\n          item = await page.find(`header > mg-menu > mg-menu-item:nth-of-type(${action.openeItem}) >>> button[aria-expanded=\"true\"]`);\n          expect(item).not.toBe(null);\n          item = await page.find(`header > mg-menu > mg-menu-item:not(:nth-of-type(${action.openeItem})) >>> button[aria-expanded=\"true\"]`);\n        } else {\n          item = await page.find(`header > mg-menu > mg-menu-item >>> button[aria-expanded=\"true\"]`);\n        }\n        expect(item).toBe(null);\n      }\n    });\n  });\n\n  describe('navigation vertical', () => {\n    test(`should success mouse navigation, case direction ${Direction.VERTICAL}`, async () => {\n      const page = await createPage(createHTML({ direction: Direction.VERTICAL }), getFrameSize(Direction.VERTICAL));\n      await expectImageSnapshot(page);\n\n      const positions = [1, 5, 5, 1];\n      for await (const position of positions) {\n        const item = await page.find(`header > mg-menu > mg-menu-item:nth-of-type(${position}) >>> button`);\n        await item.click();\n        await page.waitForChanges();\n        await expectImageSnapshot(page);\n      }\n\n      await page.$eval('body', elm => {\n        elm.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n      });\n      await page.waitForChanges();\n      await expectImageSnapshot(page);\n    });\n    test(`should success keyboard navigation, case direction ${Direction.VERTICAL}`, async () => {\n      const page = await createPage(createHTML({ direction: Direction.VERTICAL }), getFrameSize(Direction.VERTICAL));\n      await expectImageSnapshot(page);\n\n      const actions = [\n        { position: Position.PRESS, key: Key.TAB },\n        { position: Position.PRESS, key: Key.TAB },\n        { position: Position.PRESS, key: Key.TAB },\n        { position: Position.PRESS, key: Key.TAB },\n        { position: Position.PRESS, key: Key.ENTER },\n        { position: Position.PRESS, key: Key.TAB },\n        { position: Position.PRESS, key: Key.SHIFT },\n        { position: Position.PRESS, key: Key.ENTER },\n        { position: Position.PRESS, key: Key.TAB },\n      ];\n\n      for await (const action of actions) {\n        if (action.key === Key.SHIFT) {\n          await page.keyboard.down(Key.SHIFT);\n          await page.keyboard.press(Key.TAB);\n          await page.keyboard.up(Key.SHIFT);\n        } else {\n          await page.keyboard[action.position](action.key as unknown as KeyInput);\n        }\n        await page.waitForChanges();\n        await expectImageSnapshot(page);\n      }\n    });\n  });\n});\n"]}