@mgdis/mg-components 5.16.0 → 5.18.0

package/dist/collection/components/molecules/mg-popover/test/mg-popover.spec.js

@@ -0,0 +1,142 @@
+import { h } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { MgPopover } from "../mg-popover";
+import { MgButton } from "../../../atoms/mg-button/mg-button";
+import { mockConsoleError, mockWindowFrames, setupResizeObserverMock } from "../../../../utils/unit.test.utils";
+import { MgPopoverContent } from "../mg-popover-content/mg-popover-content";
+mockConsoleError();
+mockWindowFrames();
+const getPage = (args, slot, parent) => {
+  const popover = () => h("mg-popover", Object.assign({}, args), slot);
+  return newSpecPage({
+    components: [MgPopover, MgPopoverContent, MgButton],
+    template: () => (parent ? h("span", { "data-mg-popover-guard": args.identifier }, popover()) : popover()),
+  });
+};
+describe('mg-popover', () => {
+  let fireRo;
+  beforeEach(() => {
+    jest.useFakeTimers();
+    setupResizeObserverMock({
+      observe: function () {
+        fireRo = this.cb;
+      },
+      disconnect: function () {
+        return null;
+      },
+    });
+  });
+  afterEach(() => jest.clearAllTimers());
+  test.each([
+    { identifier: 'identifier' },
+    { identifier: 'identifier', placement: 'auto' },
+    { identifier: 'identifier', display: true },
+    { identifier: 'identifier', closeButton: true },
+    { identifier: 'identifier', display: true },
+    { identifier: 'identifier', closeButton: true, lang: 'fr' },
+    { identifier: 'identifier', closeButton: true, lang: 'xx' },
+    { identifier: 'identifier', arrowHide: true },
+  ])('Should render with element', async (args) => {
+    const { root } = await getPage(args, [
+      h("h2", { slot: "title" }, "Blu bli blo bla"),
+      h("p", { slot: "content" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),
+      h("mg-button", { identifier: "identifier-btn" }, "mg-button"),
+    ]);
+    expect(root).toMatchSnapshot();
+  });
+  test.each([
+    { eventIn: 'click', eventOut: 'clickBtn' },
+    { eventIn: 'click', eventOut: { code: 'Escape' } },
+    { eventIn: 'click', eventOut: 'clickCross' },
+    { eventIn: 'click', eventOut: 'clickDocument' },
+    { eventIn: 'click', eventOut: 'clickPopover' },
+    { eventIn: 'click', eventOut: 'clickGuard' },
+  ])('Should manage display on events %s', async ({ eventIn, eventOut }) => {
+    const args = { identifier: 'identifier', closeButton: true };
+    const page = await getPage(args, [
+      h("h2", { slot: "title" }, "Blu bli blo bla"),
+      h("p", { slot: "content" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),
+      h("mg-button", { identifier: "identifier-btn" }, "mg-button"),
+    ], eventOut === 'clickGuard');
+    const mgPopover = page.doc.querySelector('mg-popover');
+    const interactiveElement = mgPopover.querySelector(`[aria-controls*='${args.identifier}']`);
+    const popover = mgPopover.querySelector(`#${args.identifier}`);
+    const popoverButton = popover.shadowRoot.querySelector(`mg-button`);
+    const dataGuard = page.doc.querySelector('[data-mg-popover-guard]');
+    const focusSpy = jest.spyOn(interactiveElement, 'focus');
+    const displayChangeSpy = jest.spyOn(page.rootInstance.displayChange, 'emit');
+    interactiveElement.dispatchEvent(new CustomEvent(eventIn, { bubbles: true }));
+    await page.waitForChanges();
+    jest.runAllTimers();
+    expect(popover).toHaveAttribute('data-show');
+    if (typeof eventOut === 'string') {
+      if (eventOut === 'clickBtn') {
+        interactiveElement.dispatchEvent(new Event('click', { bubbles: true }));
+      }
+      else if (eventOut === 'clickCross') {
+        popoverButton.dispatchEvent(new Event('click', { bubbles: true }));
+      }
+      else if (eventOut === 'clickDocument') {
+        document.dispatchEvent(new Event('click', { bubbles: true }));
+      }
+      else if (eventOut === 'clickPopover') {
+        popover.dispatchEvent(new Event('click', { bubbles: true }));
+      }
+      else if (eventOut === 'clickGuard') {
+        dataGuard.dispatchEvent(new Event('click', { bubbles: true }));
+      }
+    }
+    else {
+      mgPopover.dispatchEvent(new KeyboardEvent('keydown', { code: eventOut.code }));
+      expect(focusSpy).toHaveBeenCalled();
+    }
+    await page.waitForChanges();
+    if (typeof eventOut === 'string' && ['clickPopover', 'clickGuard'].includes(eventOut)) {
+      expect(popover).toHaveAttribute('data-show');
+      expect(displayChangeSpy).toHaveBeenCalledWith(true);
+    }
+    else {
+      expect(popover).not.toHaveAttribute('data-show');
+      expect(displayChangeSpy).toHaveBeenCalledWith(false);
+    }
+  });
+  test('Should throw error if slot title element is not a heading', async () => {
+    expect.assertions(1);
+    try {
+      const args = { identifier: 'identifier', closeButton: true };
+      await getPage(args, [
+        h("span", { slot: "title" }, "Blu bli blo bla"),
+        h("p", { slot: "content" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),
+        h("mg-button", { identifier: "identifier-btn" }, "mg-button"),
+      ]);
+    }
+    catch (err) {
+      expect(err.message).toContain('<mg-popover> Slotted title must be a heading: ');
+    }
+  });
+  test('should update popper instance when slot %s update', async () => {
+    const page = await getPage({ identifier: 'identifier', display: true }, [
+      h("h2", { slot: "title" }, "Blu bli blo bla"),
+      h("p", { slot: "content" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),
+      h("mg-button", { identifier: "identifier-btn" }, "mg-button"),
+    ]);
+    expect(page.root).toMatchSnapshot();
+    const spy = jest.spyOn(page.rootInstance.popper, 'update');
+    fireRo([]);
+    expect(spy).toHaveBeenCalled();
+    expect(page.root).toMatchSnapshot();
+  });
+  test('should update mg-popover-content id when identifier is updated', async () => {
+    const page = await getPage({ identifier: 'identifier' }, [
+      h("h2", { slot: "title" }, "Blu bli blo bla"),
+      h("p", { slot: "content" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),
+      h("mg-button", { identifier: "identifier-btn" }, "mg-button"),
+    ]);
+    expect(page.root).toMatchSnapshot();
+    fireRo([]);
+    page.doc.querySelector('mg-popover').identifier = 'new-identifier';
+    await page.waitForChanges();
+    expect(page.root).toMatchSnapshot();
+  });
+});
+//# sourceMappingURL=mg-popover.spec.js.map

package/dist/collection/components/molecules/mg-popover/test/mg-popover.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mg-popover.spec.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-popover/test/mg-popover.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { MgPopover } from '../mg-popover';\nimport { MgButton } from '../../../atoms/mg-button/mg-button';\nimport { mockConsoleError, mockWindowFrames, setupResizeObserverMock } from '../../../../utils/unit.test.utils';\nimport { MgPopoverContent } from '../mg-popover-content/mg-popover-content';\n\nmockConsoleError();\nmockWindowFrames();\n\nconst getPage = (args, slot, parent?: boolean) => {\n  const popover = () => <mg-popover {...args}>{slot}</mg-popover>;\n  return newSpecPage({\n    components: [MgPopover, MgPopoverContent, MgButton],\n    template: () => (parent ? <span data-mg-popover-guard={args.identifier}>{popover()}</span> : popover()),\n  });\n};\n\ndescribe('mg-popover', () => {\n  let fireRo;\n  beforeEach(() => {\n    jest.useFakeTimers();\n    setupResizeObserverMock({\n      observe: function () {\n        fireRo = this.cb;\n      },\n      disconnect: function () {\n        return null;\n      },\n    });\n  });\n  afterEach(() => jest.clearAllTimers());\n\n  test.each([\n    { identifier: 'identifier' },\n    { identifier: 'identifier', placement: 'auto' },\n    { identifier: 'identifier', display: true },\n    { identifier: 'identifier', closeButton: true },\n    { identifier: 'identifier', display: true },\n    { identifier: 'identifier', closeButton: true, lang: 'fr' },\n    { identifier: 'identifier', closeButton: true, lang: 'xx' },\n    { identifier: 'identifier', arrowHide: true },\n  ])('Should render with element', async args => {\n    const { root } = await getPage(args, [\n      <h2 slot=\"title\">Blu bli blo bla</h2>,\n      <p slot=\"content\">\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud\n        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n      </p>,\n      <mg-button identifier=\"identifier-btn\">mg-button</mg-button>,\n    ]);\n    expect(root).toMatchSnapshot();\n  });\n\n  test.each([\n    { eventIn: 'click', eventOut: 'clickBtn' },\n    { eventIn: 'click', eventOut: { code: 'Escape' } },\n    { eventIn: 'click', eventOut: 'clickCross' },\n    { eventIn: 'click', eventOut: 'clickDocument' },\n    { eventIn: 'click', eventOut: 'clickPopover' },\n    { eventIn: 'click', eventOut: 'clickGuard' },\n  ])('Should manage display on events %s', async ({ eventIn, eventOut }) => {\n    const args = { identifier: 'identifier', closeButton: true };\n    const page = await getPage(\n      args,\n      [\n        <h2 slot=\"title\">Blu bli blo bla</h2>,\n        <p slot=\"content\">\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud\n          exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n        </p>,\n        <mg-button identifier=\"identifier-btn\">mg-button</mg-button>,\n      ],\n      eventOut === 'clickGuard',\n    );\n\n    const mgPopover = page.doc.querySelector('mg-popover');\n    const interactiveElement = mgPopover.querySelector(`[aria-controls*='${args.identifier}']`) as HTMLElement;\n    const popover = mgPopover.querySelector(`#${args.identifier}`);\n    const popoverButton = popover.shadowRoot.querySelector(`mg-button`);\n    const dataGuard = page.doc.querySelector('[data-mg-popover-guard]');\n\n    const focusSpy = jest.spyOn(interactiveElement, 'focus');\n    const displayChangeSpy = jest.spyOn(page.rootInstance.displayChange, 'emit');\n\n    interactiveElement.dispatchEvent(new CustomEvent(eventIn, { bubbles: true }));\n    await page.waitForChanges();\n    jest.runAllTimers();\n\n    expect(popover).toHaveAttribute('data-show');\n\n    if (typeof eventOut === 'string') {\n      if (eventOut === 'clickBtn') {\n        interactiveElement.dispatchEvent(new Event('click', { bubbles: true }));\n      } else if (eventOut === 'clickCross') {\n        popoverButton.dispatchEvent(new Event('click', { bubbles: true }));\n      } else if (eventOut === 'clickDocument') {\n        document.dispatchEvent(new Event('click', { bubbles: true }));\n      } else if (eventOut === 'clickPopover') {\n        popover.dispatchEvent(new Event('click', { bubbles: true }));\n      } else if (eventOut === 'clickGuard') {\n        dataGuard.dispatchEvent(new Event('click', { bubbles: true }));\n      }\n    } else {\n      mgPopover.dispatchEvent(new KeyboardEvent('keydown', { code: eventOut.code }));\n      expect(focusSpy).toHaveBeenCalled();\n    }\n    await page.waitForChanges();\n\n    if (typeof eventOut === 'string' && ['clickPopover', 'clickGuard'].includes(eventOut)) {\n      expect(popover).toHaveAttribute('data-show');\n      expect(displayChangeSpy).toHaveBeenCalledWith(true);\n    } else {\n      expect(popover).not.toHaveAttribute('data-show');\n      expect(displayChangeSpy).toHaveBeenCalledWith(false);\n    }\n  });\n\n  test('Should throw error if slot title element is not a heading', async () => {\n    expect.assertions(1);\n    try {\n      const args = { identifier: 'identifier', closeButton: true };\n      await getPage(args, [\n        <span slot=\"title\">Blu bli blo bla</span>,\n        <p slot=\"content\">\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud\n          exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n        </p>,\n        <mg-button identifier=\"identifier-btn\">mg-button</mg-button>,\n      ]);\n    } catch (err) {\n      expect(err.message).toContain('<mg-popover> Slotted title must be a heading: ');\n    }\n  });\n\n  test('should update popper instance when slot %s update', async () => {\n    const page = await getPage({ identifier: 'identifier', display: true }, [\n      <h2 slot=\"title\">Blu bli blo bla</h2>,\n      <p slot=\"content\">\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud\n        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n      </p>,\n      <mg-button identifier=\"identifier-btn\">mg-button</mg-button>,\n    ]);\n    expect(page.root).toMatchSnapshot();\n\n    const spy = jest.spyOn(page.rootInstance.popper, 'update');\n\n    fireRo([]);\n\n    expect(spy).toHaveBeenCalled();\n    expect(page.root).toMatchSnapshot();\n  });\n\n  test('should update mg-popover-content id when identifier is updated', async () => {\n    const page = await getPage({ identifier: 'identifier' }, [\n      <h2 slot=\"title\">Blu bli blo bla</h2>,\n      <p slot=\"content\">\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud\n        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n      </p>,\n      <mg-button identifier=\"identifier-btn\">mg-button</mg-button>,\n    ]);\n    expect(page.root).toMatchSnapshot();\n\n    fireRo([]);\n    page.doc.querySelector('mg-popover').identifier = 'new-identifier';\n\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot();\n  });\n});\n"]}

package/dist/collection/components/molecules/mg-skip-links/mg-skip-links.conf.js

@@ -1 +1,2 @@
 export {};
+//# sourceMappingURL=mg-skip-links.conf.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-skip-links.conf.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-skip-links/mg-skip-links.conf.tsx"],"names":[],"mappings":"","sourcesContent":["/**\n * type SkipLink\n */\nexport type SkipLink = {\n  href: string;\n  label: string;\n};\n"]}

package/dist/collection/components/molecules/mg-skip-links/mg-skip-links.js

@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/no-redundant-roles */
-import { h } from '@stencil/core';
-import { initLocales } from '../../../locales';
+import { h } from "@stencil/core";
+import { initLocales } from "../../../locales";
 export class MgSkipLinks {
   constructor() {
     /***********
@@ -63,7 +63,8 @@ export class MgSkipLinks {
           "references": {
             "SkipLink": {
               "location": "import",
-              "path": "./mg-skip-links.conf"
+              "path": "./mg-skip-links.conf",
+              "id": "src/components/molecules/mg-skip-links/mg-skip-links.conf.tsx::SkipLink"
             }
           }
         },
@@ -102,3 +103,4 @@ export class MgSkipLinks {
       }];
   }
 }
+//# sourceMappingURL=mg-skip-links.js.map

package/dist/collection/components/molecules/mg-skip-links/mg-skip-links.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mg-skip-links.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-skip-links/mg-skip-links.tsx"],"names":[],"mappings":"AAAA,gDAAgD;AAChD,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAExF,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAO/C,MAAM,OAAO,WAAW;;IAoCtB;;gBAEY;IAEZ;;;OAGG;IACK,oBAAe,GAAG,CAAC,KAAkD,EAAQ,EAAE;MACrF,KAAK,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;MAC3B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC;IACjE,CAAC,CAAC;;;EA1BF,aAAa,CAAC,KAAiB;IAC7B,IACE,KAAK,KAAK,SAAS;MACnB,KAAK,CAAC,MAAM,KAAK,CAAC;MAClB,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,EACjI;MACA,MAAM,IAAI,KAAK,CAAC,yIAAyI,CAAC,CAAC;KAC5J;EACH,CAAC;EAoBD;;iBAEe;EAEf;;KAEG;EACH,iBAAiB;IACf,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/B,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;EACrD,CAAC;EAED;;;KAGG;EACH,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,YAAY,gBAAa,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,QAAQ;MACvF,UAAI,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,MAAM,IACxC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACtB,UAAI,GAAG,EAAE,IAAI,CAAC,IAAI;QAChB,SAAG,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,eAAe,IAC1E,IAAI,CAAC,KAAK,CACT,CACD,CACN,CAAC,CACC,CACD,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/* eslint-disable jsx-a11y/no-redundant-roles */\nimport { Component, Element, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { SkipLink } from './mg-skip-links.conf';\nimport { initLocales } from '../../../locales';\n\n@Component({\n  tag: 'mg-skip-links',\n  styleUrl: 'mg-skip-links.scss',\n  shadow: true,\n})\nexport class MgSkipLinks {\n  /************\n   * Internal *\n   ************/\n\n  private messages;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgSkipLinksElement;\n\n  /**\n   * Skip links\n   */\n  @Prop() links: SkipLink[];\n  @Watch('links')\n  validateLinks(links: SkipLink[]): void {\n    if (\n      links === undefined ||\n      links.length === 0 ||\n      links.some(link => link.href === undefined || !link.href.startsWith('#') || link.label === undefined || link.label.trim() === '')\n    ) {\n      throw new Error(`<mg-skip-links> prop \"links\": Cannot be empty and each link must contains an href starting with a \"#\" and a non empty label attributes.`);\n    }\n  }\n\n  /**\n   * Emited event when link is clicked\n   */\n  @Event({ eventName: 'go-to-anchor' }) goToAnchor: EventEmitter<string>;\n\n  /***********\n   * Methods *\n   **********/\n\n  /**\n   * Handle link click and emit go-to-anchor event\n   * @param event - mouse event\n   */\n  private handleLinkCLick = (event: MouseEvent & { currentTarget: HTMLElement }): void => {\n    event.currentTarget.blur();\n    this.goToAnchor.emit(event.currentTarget.getAttribute('href'));\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if props are well configured on init\n   */\n  componentWillLoad(): void {\n    this.validateLinks(this.links);\n    this.messages = initLocales(this.element).messages;\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <nav class=\"mg-skip-links\" role=\"navigation\" aria-label={this.messages.skipLinks.navLabel}>\n        <ul class=\"mg-skip-links__list\" role=\"list\">\n          {this.links.map(link => (\n            <li key={link.href}>\n              <a class=\"mg-skip-links__link\" href={link.href} onClick={this.handleLinkCLick}>\n                {link.label}\n              </a>\n            </li>\n          ))}\n        </ul>\n      </nav>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,55 @@
+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";
+describe('mg-skip-links', () => {
+  test('Should render', async () => {
+    var _a, e_1, _b, _c;
+    const page = await createPage(`<mg-skip-links></mg-skip-links>
+    <style>body{background:#999;}</style>
+    <script>
+      const mgSkipLinks = document.querySelector('mg-skip-links');
+      mgSkipLinks.links = [
+        { href: '#content', label: 'Content' },
+        { href: '#menu', label: 'Menu' },
+        { href: '#search', label: 'Search' },
+        { href: '#footer', label: 'Footer' },
+      ];
+    </script>`);
+    const mgSkipLinks = await page.find('mg-skip-links');
+    expect(mgSkipLinks).toHaveClass('hydrated');
+    await page.setViewport({ width: 400, height: 60 });
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+    try {
+      for (var _d = true, _e = __asyncValues(['Tab', 'Enter']), _f; _f = await _e.next(), _a = _f.done, !_a; _d = true) {
+        _c = _f.value;
+        _d = false;
+        const key = _c;
+        await page.keyboard.down(key);
+        await page.waitForChanges();
+        const screenshotTab = await page.screenshot();
+        expect(screenshotTab).toMatchImageSnapshot();
+      }
+    }
+    catch (e_1_1) {
+      e_1 = { error: e_1_1 };
+    }
+    finally {
+      try {
+        if (!_d && !_a && (_b = _e.return))
+          await _b.call(_e);
+      }
+      finally {
+        if (e_1)
+          throw e_1.error;
+      }
+    }
+  });
+});
+//# sourceMappingURL=mg-skip-links.e2e.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-skip-links.e2e.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-skip-links/test/mg-skip-links.e2e.ts"],"names":[],"mappings":";;;;;;;AACA,OAAO,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAC;AAEtE,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;EAC7B,IAAI,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;;IAC/B,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC;;;;;;;;;;cAUpB,CAAC,CAAC;IAEZ,MAAM,WAAW,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACrD,MAAM,CAAC,WAAW,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAE5C,MAAM,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IAEnD,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;IAC3C,MAAM,CAAC,UAAU,CAAC,CAAC,oBAAoB,EAAE,CAAC;;MAE1C,KAAwB,eAAA,KAAA,cAAA,CAAC,KAAK,EAAE,OAAO,CAAC,CAAA,IAAA,sDAAE;QAAlB,cAAgB;QAAhB,WAAgB;QAA7B,MAAM,GAAG,KAAA,CAAA;QAClB,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAe,CAAC,CAAC;QAC1C,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,aAAa,GAAG,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;QAC9C,MAAM,CAAC,aAAa,CAAC,CAAC,oBAAoB,EAAE,CAAC;OAC9C;;;;;;;;;EACH,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { KeyInput } from 'puppeteer';\nimport { createPage } from '../../../../utils/stencil.e2e.test.utils';\n\ndescribe('mg-skip-links', () => {\n  test('Should render', async () => {\n    const page = await createPage(`<mg-skip-links></mg-skip-links>\n    <style>body{background:#999;}</style>\n    <script>\n      const mgSkipLinks = document.querySelector('mg-skip-links');\n      mgSkipLinks.links = [\n        { href: '#content', label: 'Content' },\n        { href: '#menu', label: 'Menu' },\n        { href: '#search', label: 'Search' },\n        { href: '#footer', label: 'Footer' },\n      ];\n    </script>`);\n\n    const mgSkipLinks = await page.find('mg-skip-links');\n    expect(mgSkipLinks).toHaveClass('hydrated');\n\n    await page.setViewport({ width: 400, height: 60 });\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n\n    for await (const key of ['Tab', 'Enter']) {\n      await page.keyboard.down(key as KeyInput);\n      await page.waitForChanges();\n\n      const screenshotTab = await page.screenshot();\n      expect(screenshotTab).toMatchImageSnapshot();\n    }\n  });\n});\n"]}

package/dist/collection/components/molecules/mg-skip-links/test/mg-skip-links.spec.js

@@ -0,0 +1,55 @@
+import { h } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { MgSkipLinks } from "../mg-skip-links";
+const getPage = args => newSpecPage({
+  components: [MgSkipLinks],
+  template: () => h("mg-skip-links", Object.assign({}, args)),
+});
+describe('mg-skip-links', () => {
+  test('with args %s', async () => {
+    const { root } = await getPage({
+      links: [
+        { href: '#content', label: 'Content' },
+        { href: '#menu', label: 'Menu' },
+        { href: '#search', label: 'Search' },
+        { href: '#footer', label: 'Footer' },
+      ],
+    });
+    expect(root).toMatchSnapshot();
+  });
+  test.each([
+    {},
+    { links: [] },
+    { links: [{ blu: 'blu', bli: 'bli' }] },
+    { links: [{ href: 'nohash', Label: 'label' }] },
+    { links: [{ href: '#hash', Label: ' ' }] },
+    { links: [{ href: '#hash', Label: '' }] },
+  ])('Should throw error with wrong link params: %s', async (args) => {
+    expect.assertions(1);
+    try {
+      await getPage(args);
+    }
+    catch (err) {
+      expect(err.message).toMatch('<mg-skip-links> prop "links": Cannot be empty and each link must contains an href starting with a "#" and a non empty label attributes.');
+    }
+  });
+  test('should emit event when link is clicked', async () => {
+    const page = await getPage({
+      links: [
+        { href: '#content', label: 'Content' },
+        { href: '#menu', label: 'Menu' },
+        { href: '#search', label: 'Search' },
+        { href: '#footer', label: 'Footer' },
+      ],
+    });
+    const spyGoToAnchor = jest.spyOn(page.rootInstance.goToAnchor, 'emit');
+    const mgSkiplinks = page.doc.querySelector('mg-skip-links');
+    const anchor = mgSkiplinks.shadowRoot.querySelector('a');
+    const spyBlur = jest.spyOn(anchor, 'blur');
+    anchor.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    await page.waitForChanges();
+    expect(spyGoToAnchor).toHaveBeenCalledWith('#content');
+    expect(spyBlur).toHaveBeenCalled();
+  });
+});
+//# sourceMappingURL=mg-skip-links.spec.js.map

package/dist/collection/components/molecules/mg-skip-links/test/mg-skip-links.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mg-skip-links.spec.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-skip-links/test/mg-skip-links.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { MgSkipLinks } from '../mg-skip-links';\n\nconst getPage = args =>\n  newSpecPage({\n    components: [MgSkipLinks],\n    template: () => <mg-skip-links {...args}></mg-skip-links>,\n  });\n\ndescribe('mg-skip-links', () => {\n  test('with args %s', async () => {\n    const { root } = await getPage({\n      links: [\n        { href: '#content', label: 'Content' },\n        { href: '#menu', label: 'Menu' },\n        { href: '#search', label: 'Search' },\n        { href: '#footer', label: 'Footer' },\n      ],\n    });\n    expect(root).toMatchSnapshot();\n  });\n\n  test.each([\n    {},\n    { links: [] },\n    { links: [{ blu: 'blu', bli: 'bli' }] },\n    { links: [{ href: 'nohash', Label: 'label' }] },\n    { links: [{ href: '#hash', Label: ' ' }] },\n    { links: [{ href: '#hash', Label: '' }] },\n  ])('Should throw error with wrong link params: %s', async args => {\n    expect.assertions(1);\n    try {\n      await getPage(args);\n    } catch (err) {\n      expect(err.message).toMatch('<mg-skip-links> prop \"links\": Cannot be empty and each link must contains an href starting with a \"#\" and a non empty label attributes.');\n    }\n  });\n\n  test('should emit event when link is clicked', async () => {\n    const page = await getPage({\n      links: [\n        { href: '#content', label: 'Content' },\n        { href: '#menu', label: 'Menu' },\n        { href: '#search', label: 'Search' },\n        { href: '#footer', label: 'Footer' },\n      ],\n    });\n\n    const spyGoToAnchor = jest.spyOn(page.rootInstance.goToAnchor, 'emit');\n\n    const mgSkiplinks = page.doc.querySelector('mg-skip-links');\n    const anchor = mgSkiplinks.shadowRoot.querySelector('a');\n    const spyBlur = jest.spyOn(anchor, 'blur');\n    anchor.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n\n    await page.waitForChanges();\n\n    expect(spyGoToAnchor).toHaveBeenCalledWith('#content');\n    expect(spyBlur).toHaveBeenCalled();\n  });\n});\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-tabs.conf.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-tabs/mg-tabs.conf.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,MAAM,CAAN,IAAY,MAKX;AALD,WAAY,MAAM;EAChB,6BAAmB,CAAA;EACnB,2BAAiB,CAAA;EACjB,+BAAqB,CAAA;EACrB,2BAAiB,CAAA;AACnB,CAAC,EALW,MAAM,KAAN,MAAM,QAKjB;AAaD;;GAEG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,SAAS,EAAE,OAAO,CAAU,CAAC","sourcesContent":["import { MgBadge } from '../../atoms/mg-badge/mg-badge';\nimport { MgIcon } from '../../atoms/mg-icon/mg-icon';\n\n/**\n * Available tabs items status\n */\nexport enum Status {\n  VISIBLE = 'visible',\n  HIDDEN = 'hidden',\n  DISABLED = 'disabled',\n  ACTIVE = 'active',\n}\n\n/**\n * type TabItem\n * use to match tabs items\n */\nexport type TabItem = {\n  label: string;\n  icon?: MgIcon['icon'];\n  badge?: Pick<MgBadge, 'value' | 'variant' | 'label'> & { role: 'notification' | 'information' };\n  status: Status;\n};\n\n/**\n * List of all possibles sizes\n */\nexport const sizes = ['regular', 'large'] as const;\n\n/**\n * Variant type from variants\n */\nexport type SizeType = (typeof sizes)[number];\n"]}

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

@@ -1,6 +1,6 @@
-import { h } from '@stencil/core';
-import { createID, ClassList, allItemsAreString } from '../../../utils/components.utils';
-import { sizes, Status } from './mg-tabs.conf';
+import { h } from "@stencil/core";
+import { createID, ClassList, allItemsAreString } from "../../../utils/components.utils";
+import { sizes, Status } from "./mg-tabs.conf";
 /**
  * type TabItem validation function
  * @param tab - tab item
@@ -269,7 +269,8 @@ export class MgTabs {
           "references": {
             "SizeType": {
               "location": "import",
-              "path": "./mg-tabs.conf"
+              "path": "./mg-tabs.conf",
+              "id": "src/components/molecules/mg-tabs/mg-tabs.conf.ts::SizeType"
             }
           }
         },
@@ -292,7 +293,8 @@ export class MgTabs {
           "references": {
             "TabItem": {
               "location": "import",
-              "path": "./mg-tabs.conf"
+              "path": "./mg-tabs.conf",
+              "id": "src/components/molecules/mg-tabs/mg-tabs.conf.ts::TabItem"
             }
           }
         },
@@ -363,3 +365,4 @@ export class MgTabs {
       }];
   }
 }
+//# sourceMappingURL=mg-tabs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-tabs.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-tabs/mg-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Prop, State, Element, Watch } from '@stencil/core';\nimport { createID, ClassList, allItemsAreString } from '../../../utils/components.utils';\nimport { TabItem, sizes, Status, SizeType } from './mg-tabs.conf';\n\n/**\n * type TabItem validation function\n * @param tab - tab item\n * @returns tab item type is valid\n */\nconst isTabItem = (tab: TabItem): boolean => typeof tab === 'object' && typeof tab.label === 'string';\n\n@Component({\n  tag: 'mg-tabs',\n  styleUrl: 'mg-tabs.scss',\n  shadow: true,\n})\nexport class MgTabs {\n  /************\n   * Internal *\n   ************/\n\n  // classes\n  private readonly tabPanel = 'panel';\n  private readonly buttonTabBaseClass = 'mg-tabs__navigation-button';\n\n  // variables\n  private tabFocus: number;\n  private startIndex = 1;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgTabsElement;\n\n  /**\n   * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n   * If not set, it will be created.\n   */\n  @Prop() identifier: string = createID('mg-tabs');\n\n  /**\n   * Tabs label. Include short tabs description.\n   * Required for accessibility\n   */\n  @Prop() label!: string;\n  @Watch('label')\n  validateLabel(newValue: MgTabs['label']): void {\n    if (typeof newValue !== 'string' || newValue.trim() === '') {\n      throw new Error('<mg-tabs> prop \"label\" is required.');\n    }\n  }\n\n  /**\n   * Define tabs size\n   */\n  @Prop() size: SizeType = 'regular';\n  @Watch('size')\n  validateSize(newValue: MgTabs['size']): void {\n    if (!sizes.includes(newValue)) {\n      throw new Error(`<mg-tabs> prop \"size\" must be one of: ${sizes.join(', ')}`);\n    }\n    this.classCollection.add(`mg-tabs--size-${this.size}`);\n  }\n\n  /**\n   * Tabs items\n   */\n  @Prop() items!: string[] | TabItem[];\n  @Watch('items')\n  validateItems(newValue: MgTabs['items']): void {\n    // String array\n    if (allItemsAreString(newValue as string[])) {\n      this.tabs = (newValue as string[]).map((item, index) => ({ label: item, status: index === 0 ? Status.ACTIVE : Status.VISIBLE }));\n    }\n    // Object array\n    else if (newValue && newValue.length > 0 && (newValue as TabItem[]).every(item => isTabItem(item))) {\n      this.tabs = newValue as TabItem[];\n      // init active tabs if not set. Default: index 0.\n      if (this.tabs.find(tab => this.tabHasStatus(tab, Status.ACTIVE)) === undefined) this.tabs[0].status = Status.ACTIVE;\n    } else {\n      throw new Error('<mg-tabs> prop \"items\" is required and all items must be the same type: TabItem.');\n    }\n  }\n\n  /**\n   * Active tab number\n   */\n  @Prop({ reflect: true, mutable: true }) activeTab: number;\n  @Watch('activeTab')\n  validateActiveTab(newValue: MgTabs['activeTab']): void {\n    if (typeof newValue === 'number' && newValue >= 1 && newValue <= this.tabs.length) {\n      this.tabs.forEach((tab, index) => {\n        const isNewActiveTab = index === newValue - this.startIndex;\n        // reset active tabs\n        if (this.tabHasStatus(tab, Status.ACTIVE) && !isNewActiveTab) tab.status = Status.VISIBLE;\n        // set active tab from given tab key\n        else if ((tab.status === undefined || this.tabHasStatus(tab, Status.VISIBLE)) && isNewActiveTab) tab.status = Status.ACTIVE;\n      });\n      // emit change active tab key event\n      if (this.tabs.find(tab => this.tabHasStatus(tab, Status.ACTIVE)) !== undefined) {\n        this.activeTabChange.emit(newValue);\n      }\n    } else if (newValue !== undefined) {\n      throw new Error('<mg-tabs> prop \"activeTab\" must be between 1 and tabs length.');\n    }\n  }\n\n  /**\n   * Component tabs\n   */\n  @State() tabs: TabItem[] = [];\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-tabs']);\n\n  /**\n   * Emited event when active tab change\n   */\n  @Event({ eventName: 'active-tab-change' }) activeTabChange: EventEmitter<number>;\n\n  /**\n   * Method to know if given tab has the given status\n   * @param tab - item tab key to set to ACTIVE status\n   * @param status - status to valide\n   * @returns status comparaison\n   */\n  private tabHasStatus = (tab: TabItem, status: Status): boolean => tab.status === status;\n\n  /**\n   * Method to get element id from index\n   * @param element - to get id\n   * @param index - to generate id\n   * @returns generated element id\n   */\n  private getElementId = (element: string, index: number): string => `${element}-${this.getTabItemIndex(index)}`;\n\n  /**\n   * Method to get tab item index\n   * @param index - to get\n   * @returns index\n   */\n  private getTabItemIndex = (index: number): number => index + this.startIndex;\n\n  /**\n   * Method to get the active-tab value\n   * @returns of the active-tab\n   */\n  private getActiveTab = (): number =>\n    this.activeTab || this.getTabItemIndex(this.tabs.map((tab, index) => ({ ...tab, index })).find(tab => this.tabHasStatus(tab, Status.ACTIVE)).index);\n\n  /**\n   * Handle click events on tabs\n   * @param event - mouse event\n   */\n  private handleClick = (event: MouseEvent & { currentTarget: HTMLElement }): void => {\n    const tabId = event.currentTarget.dataset.index;\n    const tab = this.tabs[Number(tabId) - this.startIndex];\n    if (this.tabHasStatus(tab, Status.HIDDEN) || this.tabHasStatus(tab, Status.DISABLED)) {\n      event.preventDefault();\n    } else {\n      this.activeTab = Number(tabId);\n      this.tabFocus = undefined;\n    }\n  };\n\n  /**\n   * get navigation button class from given status\n   * @param status - button tab status\n   * @returns button class/selector variant\n   */\n  private getNavigationButtonClass = (status: Status): string => `${this.buttonTabBaseClass}--${status}`;\n\n  /**\n   * Handle keyboard event on tabs\n   * @param event - mouse event\n   */\n  private handleKeydown = (event: KeyboardEvent & { target: HTMLElement }): void => {\n    const parent = event.target.parentElement;\n    if (['ArrowRight', 'ArrowLeft'].includes(event.key)) {\n      this.tabFocus = Number(event.target.dataset.index);\n      parent.querySelector(`[data-index=\"${this.tabFocus}\"]`).setAttribute('tabindex', '-1');\n\n      // Move right\n      if (event.key === 'ArrowRight') {\n        this.tabFocus++;\n        // If we're at the end, go to the start\n        if (this.tabFocus > this.tabs.length) this.tabFocus = this.startIndex;\n        // Move left\n      } else if (event.key === 'ArrowLeft') {\n        this.tabFocus--;\n        // If we're at the start, move to the end\n        if (this.tabFocus < this.startIndex) this.tabFocus = this.tabs.length;\n      }\n\n      const parentButtonElement: HTMLButtonElement = parent.querySelector(`[data-index=\"${this.tabFocus}\"]`);\n      // if focus item is ['hidden'] we recursively repeat action\n      if (this.tabHasStatus(this.tabs[this.tabFocus - 1], Status.HIDDEN)) {\n        parentButtonElement.dispatchEvent(new KeyboardEvent('keydown', { key: event.key, bubbles: true }));\n        // else run focus methods on tabFocus element\n      } else {\n        parentButtonElement.setAttribute('tabindex', '0');\n        parentButtonElement.focus();\n      }\n    } else if (event.key === 'Tab') {\n      this.resetFocus();\n    }\n  };\n\n  /**\n   * Method to reset focus behavior\n   */\n  private resetFocus = (): void => {\n    // update asynchronously tabindex to prevent get focus on new tabindex at then end of event process\n    setTimeout(() => {\n      this.tabFocus = undefined;\n      Array.from(this.element.shadowRoot.querySelectorAll('[data-index]')).forEach((tab, index) => {\n        tab.setAttribute('tabindex', this.getActiveTab() - this.startIndex !== index ? '-1' : '0');\n      });\n    }, 0);\n  };\n\n  /**\n   * Validate slots setting\n   */\n  private validateSlots = (): void => {\n    const slots = Array.from(this.element.children).filter(slot => slot.getAttribute('slot')?.includes('tab_content-'));\n    if (slots.length !== this.tabs.length) throw new Error('<mg-tabs> Must have slots counts equal to tabs count.');\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Check tabs format\n    this.validateLabel(this.label);\n    this.validateItems(this.items);\n    this.validateActiveTab(this.activeTab);\n    this.validateSize(this.size);\n    this.validateSlots();\n  }\n\n  /**\n   * add listners\n   */\n  componentDidLoad(): void {\n    document.addEventListener(\n      'click',\n      (event: MouseEvent & { target: HTMLElement }) => {\n        if (event.target.closest('mg-tabs') !== this.element) this.resetFocus();\n      },\n      false,\n    );\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <div class={this.classCollection.join()}>\n        <header role=\"tablist\" aria-label={this.label} class=\"mg-tabs__header\">\n          {this.tabs.map((tab, index) => (\n            <button\n              key={tab.label}\n              role=\"tab\"\n              id={this.getElementId(this.identifier, index)}\n              class={{\n                [`${this.buttonTabBaseClass}`]: true,\n                [`${this.buttonTabBaseClass}--horizontal`]: true,\n                [`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasStatus(tab, Status.ACTIVE),\n                [`${this.getNavigationButtonClass(Status.DISABLED)}`]: this.tabHasStatus(tab, Status.DISABLED),\n                [`${this.getNavigationButtonClass(Status.HIDDEN)}`]: this.tabHasStatus(tab, Status.HIDDEN),\n              }}\n              tabindex={this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1}\n              aria-selected={this.tabHasStatus(tab, Status.ACTIVE).toString()}\n              aria-controls={this.getElementId(this.tabPanel, index)}\n              aria-disabled={this.tabHasStatus(tab, Status.DISABLED)}\n              onClick={this.handleClick}\n              onKeyDown={this.handleKeydown}\n              data-index={this.getTabItemIndex(index)}\n            >\n              {tab.icon !== undefined && <mg-icon icon={tab.icon}></mg-icon>}\n              {tab.label}\n              {tab.badge !== undefined && <mg-badge variant=\"text-color\" value={tab.badge.value} label={tab.badge.label} outline={tab.badge.role === 'information'}></mg-badge>}\n            </button>\n          ))}\n        </header>\n        {this.tabs.map((tab, index) => (\n          <article\n            key={tab.label}\n            role=\"tabpanel\"\n            id={this.getElementId(this.tabPanel, index)}\n            hidden={!this.tabHasStatus(tab, Status.ACTIVE)}\n            aria-labelledby={this.getElementId(this.identifier, index)}\n            tabindex={this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1}\n            class=\"mg-tabs__content-container\"\n          >\n            <slot name={this.getElementId('tab_content', index)}></slot>\n          </article>\n        ))}\n      </div>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,76 @@
+import { setPageContent, expect, describe, describeEach, testEach, test } from "../../../../utils/playwright.e2e.test.utils";
+import { createID } from "../../../../utils/components.utils";
+import { sizes } from "../mg-tabs.conf";
+import { renderAttributes, renderProperties } from "../../../../utils/e2e.test.utils";
+const defaultArgs = {
+  label: 'label',
+};
+const createSlot = (items) => {
+  const defaultSlotContents = [
+    "Le héros peut être en chacun, même en celui qui fait une chose aussi simple et rassurante que mettre un manteau sur les épaules d'un garçon et ainsi lui faire comprendre que le monde ne s'est pas écroulé.",
+    "La seule façon raisonnable de vivre en ce bas monde, c'est en dehors des règles.",
+    'Bane have an hidden content',
+  ];
+  return items.map((_, i) => `<div slot="tab_content-${i + 1}">${i + 1 <= defaultSlotContents.length ? defaultSlotContents[i] : defaultSlotContents[0]}</div>`).join('');
+};
+var Key;
+(function (Key) {
+  Key["NEXT"] = "ArrowRight";
+  Key["PREV"] = "ArrowLeft";
+  Key["TAB"] = "Tab";
+  Key["ENTER"] = "Enter";
+})(Key || (Key = {}));
+const createHTML = args => {
+  const id = createID();
+  return `<mg-tabs id="${id}" ${renderAttributes(Object.assign({}, args))}">${createSlot(args.items)}</mg-tabs><script>${renderProperties(args, `#${id}`)}</script>`;
+};
+describe('mg-tabs', () => {
+  describeEach(sizes)('size %s', async (size) => {
+    testEach([
+      { items: ['Batman', 'Joker', 'Bane'] },
+      {
+        items: [
+          { label: 'Batman', icon: 'check' },
+          { label: 'Joker', icon: 'cross', status: 'disabled' },
+          { label: 'Bane', icon: 'cross', status: 'hidden' },
+        ],
+      },
+      {
+        items: [
+          { label: 'Batman', badge: { label: 'count', value: 1 } },
+          { label: 'Joker', badge: { label: 'count', value: 1 }, status: 'disabled' },
+          { label: 'Bane', icon: 'cross', status: 'hidden' },
+        ],
+      },
+      {
+        items: [
+          { label: 'Batman', icon: 'check', badge: { label: 'count', value: 99 } },
+          { label: 'Joker', icon: 'cross', badge: { label: 'count', value: 99 }, status: 'disabled' },
+          { label: 'Bane', icon: 'cross', status: 'hidden' },
+        ],
+      },
+      {
+        items: [
+          { label: 'Batman', icon: 'check', badge: { label: 'count', value: 99, role: 'notification' } },
+          { label: 'Joker', icon: 'cross', badge: { label: 'count', value: 99, role: 'information' }, status: 'disabled' },
+          { label: 'Bane', icon: 'cross', status: 'hidden' },
+        ],
+      },
+    ])(`render %s`, async (page, args) => {
+      await setPageContent(page, createHTML(Object.assign(Object.assign(Object.assign({}, defaultArgs), args), { size })));
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+    });
+  });
+  describe('navigation', () => {
+    test('should go to next tab on click event', async ({ page }) => {
+      await setPageContent(page, createHTML(Object.assign(Object.assign({}, defaultArgs), { items: ['Batman', 'Joker', 'Bane'] })));
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+      await page.keyboard.down('Tab');
+      for (const key of [Key.NEXT, Key.NEXT, Key.PREV, Key.ENTER, Key.TAB]) {
+        await page.keyboard.down(key);
+        await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+      }
+    });
+  });
+});
+//# sourceMappingURL=mg-tabs.e2e.playwright.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-tabs.e2e.playwright.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-tabs/test/mg-tabs.e2e.playwright.ts"],"names":[],"mappings":"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","sourcesContent":["import { setPageContent, expect, describe, describeEach, testEach, PageType, test } from '../../../../utils/playwright.e2e.test.utils';\nimport { createID } from '../../../../utils/components.utils';\nimport { sizes } from '../mg-tabs.conf';\nimport { MgTabs } from '../mg-tabs';\nimport { renderAttributes, renderProperties } from '../../../../utils/e2e.test.utils';\n\nconst defaultArgs = {\n  label: 'label',\n};\n\nconst createSlot = (items: unknown[]) => {\n  const defaultSlotContents = [\n    \"Le héros peut être en chacun, même en celui qui fait une chose aussi simple et rassurante que mettre un manteau sur les épaules d'un garçon et ainsi lui faire comprendre que le monde ne s'est pas écroulé.\",\n    \"La seule façon raisonnable de vivre en ce bas monde, c'est en dehors des règles.\",\n    'Bane have an hidden content',\n  ];\n  return items.map((_, i) => `<div slot=\"tab_content-${i + 1}\">${i + 1 <= defaultSlotContents.length ? defaultSlotContents[i] : defaultSlotContents[0]}</div>`).join('');\n};\n\nenum Key {\n  NEXT = 'ArrowRight',\n  PREV = 'ArrowLeft',\n  TAB = 'Tab',\n  ENTER = 'Enter',\n}\n\nconst createHTML = args => {\n  const id = createID();\n  return `<mg-tabs id=\"${id}\" ${renderAttributes({ ...args })}\">${createSlot(args.items)}</mg-tabs><script>${renderProperties(args, `#${id}`)}</script>`;\n};\n\ndescribe('mg-tabs', () => {\n  describeEach(sizes)('size %s', async size => {\n    testEach([\n      { items: ['Batman', 'Joker', 'Bane'] },\n      {\n        items: [\n          { label: 'Batman', icon: 'check' },\n          { label: 'Joker', icon: 'cross', status: 'disabled' },\n          { label: 'Bane', icon: 'cross', status: 'hidden' },\n        ],\n      },\n      {\n        items: [\n          { label: 'Batman', badge: { label: 'count', value: 1 } },\n          { label: 'Joker', badge: { label: 'count', value: 1 }, status: 'disabled' },\n          { label: 'Bane', icon: 'cross', status: 'hidden' },\n        ],\n      },\n      {\n        items: [\n          { label: 'Batman', icon: 'check', badge: { label: 'count', value: 99 } },\n          { label: 'Joker', icon: 'cross', badge: { label: 'count', value: 99 }, status: 'disabled' },\n          { label: 'Bane', icon: 'cross', status: 'hidden' },\n        ],\n      },\n      {\n        items: [\n          { label: 'Batman', icon: 'check', badge: { label: 'count', value: 99, role: 'notification' } },\n          { label: 'Joker', icon: 'cross', badge: { label: 'count', value: 99, role: 'information' }, status: 'disabled' },\n          { label: 'Bane', icon: 'cross', status: 'hidden' },\n        ],\n      },\n    ])(`render %s`, async (page: PageType, args: Partial<MgTabs>) => {\n      await setPageContent(\n        page,\n        createHTML({\n          ...defaultArgs,\n          ...args,\n          size,\n        }),\n      );\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n    });\n  });\n\n  describe('navigation', () => {\n    test('should go to next tab on click event', async ({ page }) => {\n      await setPageContent(\n        page,\n        createHTML({\n          ...defaultArgs,\n          items: ['Batman', 'Joker', 'Bane'],\n        }),\n      );\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n\n      await page.keyboard.down('Tab');\n\n      for (const key of [Key.NEXT, Key.NEXT, Key.PREV, Key.ENTER, Key.TAB]) {\n        await page.keyboard.down(key);\n        await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n      }\n    });\n  });\n});\n"]}