@mgdis/mg-components 5.17.0 → 5.19.0

package/dist/collection/components/molecules/mg-popover/test/{mg-popover.e2e.js → mg-popover.e2e.playwright.js}

@@ -1,7 +1,8 @@
-import { createPage } from "../../../../utils/stencil.e2e.test.utils";
+import { setPageContent, expect, describe, describeEach, testEach, test } from "../../../../utils/playwright.e2e.test.utils";
 import { renderAttributes } from "../../../../utils/e2e.test.utils";
+const TIMEOUT = 1000;
 describe('mg-popover', () => {
-  describe.each([
+  describeEach([
     'auto',
     'auto-start',
     'auto-end',
@@ -18,8 +19,8 @@ describe('mg-popover', () => {
     'left-start',
     'left-end',
   ])('placement %s', placement => {
-    test.each([true, false])('Should render, case hide arrow %s', async (arrowHide) => {
-      const page = await createPage(`<style>mg-button{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}</style>
+    testEach([true, false])('Should render, case hide arrow %s', async (page, arrowHide) => {
+      await setPageContent(page, `<style>mg-button{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}</style>
         <mg-popover ${renderAttributes({ placement, arrowHide })}>
         <mg-button>Button</mg-button>
         <h2 slot="title">Blu bli blo bla</h2>
@@ -31,43 +32,36 @@ describe('mg-popover', () => {
           cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
           non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </p>
-        </mg-popover>`);
-      const mgPopover = await page.find('mg-popover');
-      const mgButton = await page.find('mg-button');
-      const popover = await page.find('mg-popover mg-popover-content');
-      expect(mgPopover).toHaveClass('hydrated');
+        </mg-popover>`, { height: 900, width: 900 });
+      const mgPopover = await page.locator('mg-popover');
+      const mgButton = await page.locator('mg-button');
+      const mgPopoverContent = await page.locator('mg-popover-content');
+      await mgPopover.waitFor({ timeout: TIMEOUT });
       // display popover on click on slotted element
-      mgButton.triggerEvent('click');
-      await page.waitForChanges();
-      await page.waitForNetworkIdle();
-      expect(popover).toHaveAttribute('data-show');
-      await page.setViewport({ width: 800, height: 800 });
-      const screenshot = await page.screenshot();
-      expect(screenshot).toMatchImageSnapshot();
+      await mgButton.click();
+      await mgPopoverContent.waitFor({ timeout: TIMEOUT });
+      expect(await mgPopoverContent.getAttribute('data-show')).toEqual('');
+      await expect(page.locator('body')).toHaveScreenshot();
       // hide popover on click on slotted element
-      mgButton.triggerEvent('click');
-      await page.waitForChanges();
-      await page.waitForNetworkIdle();
-      expect(popover).not.toHaveAttribute('data-show');
+      await mgButton.click();
+      expect(await mgPopoverContent.getAttribute('data-show')).toEqual(null);
       // display popover on keyboad click event on slotted element
       await page.keyboard.down('Tab');
+      await page.keyboard.down('Tab');
       await page.keyboard.down('Enter');
-      await page.waitForChanges();
-      await page.waitForNetworkIdle();
-      expect(popover).toHaveAttribute('data-show');
+      await mgPopoverContent.waitFor({ timeout: TIMEOUT });
+      expect(await mgPopoverContent.getAttribute('data-show')).toEqual('');
       // hide popover on keyboad escape key
       await page.keyboard.down('Escape');
-      await page.waitForChanges();
-      await page.waitForNetworkIdle();
-      expect(popover).not.toHaveAttribute('data-show');
+      expect(await mgPopoverContent.getAttribute('data-show')).toEqual(null);
     });
   });
-  describe.each([
+  describeEach([
     '',
     '<h2 slot="title">Titre un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long</h2>',
-  ])('with or without title', title => {
-    test('Should render with close button', async () => {
-      const page = await createPage(`<mg-popover display close-button>
+  ])('with or without title %s', title => {
+    test('Should render with close button', async ({ page }) => {
+      await setPageContent(page, `<mg-popover display close-button>
         <mg-button>Button</mg-button>
         ${title}
         <p slot="content">
@@ -78,37 +72,41 @@ describe('mg-popover', () => {
           cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
           non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </p>
-        </mg-popover>`);
-      const mgPopover = await page.find('mg-popover');
-      expect(mgPopover).toHaveClass('hydrated');
-      await page.setViewport({ width: 500, height: 350 });
-      const screenshot = await page.screenshot();
-      expect(screenshot).toMatchImageSnapshot();
+        </mg-popover>`, { width: 400, height: 350 });
+      await page.locator('mg-popover.hydrated').waitFor({ timeout: TIMEOUT });
+      await expect(page.locator('body')).toHaveScreenshot();
     });
   });
-  describe.each(['title', 'content'])('re-position %s slot', slot => {
-    test('should re-position when slot size change', async () => {
+  describeEach(['title', 'content'])('re-position %s slot', slot => {
+    test('should re-position when slot size change', async ({ page }) => {
       const tagName = slot === 'title' ? 'h2' : 'p';
-      const page = await createPage(`<style>mg-button{position:fixed;left:50%;transform:translateX(-50%)}</style>
+      await setPageContent(page, `<style>mg-button{position:fixed;left:50%;transform:translateX(-50%)}</style>
         <mg-popover ${renderAttributes({ placement: 'bottom-start', display: true })}>
         <mg-button>Button</mg-button>
         <${tagName} slot="${slot}">
           Lorem ipsum
         </${tagName}>
-        </mg-popover>`, { width: 400, height: 100 });
-      let screenshot = await page.screenshot();
-      expect(screenshot).toMatchImageSnapshot();
+        </mg-popover>`, { width: 400, height: 130 });
+      await expect(page.locator('body')).toHaveScreenshot();
       await page.$eval(`mg-popover-content [slot="${slot}"]`, el => {
         el.textContent = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit';
       });
-      await page.waitForChanges();
-      screenshot = await page.screenshot();
-      expect(screenshot).toMatchImageSnapshot();
+      await expect(page.locator('body')).toHaveScreenshot();
     });
   });
+  test(`should position popover where it have enough place`, async ({ page }) => {
+    await setPageContent(page, `<style>mg-button{position:fixed;left:0;bottom:0}</style>
+      <mg-popover ${renderAttributes({ display: true })}>
+      <mg-button>Button</mg-button>
+      <p slot="content">
+        Lorem ipsum
+      </p>
+      </mg-popover>`, { width: 400, height: 100 });
+    await expect(page.locator('body')).toHaveScreenshot();
+  });
   describe('style', () => {
-    test('Should render with child mg-card', async () => {
-      const page = await createPage(`<mg-popover display close-button class="custom-popover-card">
+    test('Should render with child mg-card', async ({ page }) => {
+      await setPageContent(page, `<mg-popover display close-button class="custom-popover-card">
         <mg-button>Button</mg-button>
         <mg-card slot="content">
           My custom card
@@ -119,15 +117,12 @@ describe('mg-popover', () => {
             --mg-popover-background-color: var(--color-danger);
           }
         </style>
-        `);
-      const mgPopover = await page.find('mg-popover');
-      expect(mgPopover).toHaveClass('hydrated');
-      await page.setViewport({ width: 500, height: 300 });
-      const screenshot = await page.screenshot();
-      expect(screenshot).toMatchImageSnapshot();
+        `, { width: 150, height: 180 });
+      await page.locator('mg-popover.hydrated').waitFor({ timeout: TIMEOUT });
+      await expect(page.locator('body')).toHaveScreenshot();
     });
-    test.each(['content', 'title'])('Should render with --mg-popover-max-width', async (slot) => {
-      const page = await createPage(`<mg-popover display close-button class="custom-popover">
+    testEach(['content', 'title'])('Should render with --mg-popover-max-width %s', async (page, slot) => {
+      await setPageContent(page, `<mg-popover display close-button class="custom-popover">
         <mg-button>Button</mg-button>
         <h2 slot="${slot}">Titre un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long</h2>
         </mg-popover>
@@ -136,13 +131,10 @@ describe('mg-popover', () => {
             --mg-popover-max-width: 10rem;
           }
         </style>
-        `);
-      const mgPopover = await page.find('mg-popover');
-      expect(mgPopover).toHaveClass('hydrated');
-      await page.setViewport({ width: 500, height: 300 });
-      const screenshot = await page.screenshot();
-      expect(screenshot).toMatchImageSnapshot();
+        `, { width: 300, height: 300 });
+      await page.locator('mg-popover.hydrated').waitFor({ timeout: TIMEOUT });
+      await expect(page.locator('body')).toHaveScreenshot();
     });
   });
 });
-//# sourceMappingURL=mg-popover.e2e.js.map
+//# sourceMappingURL=mg-popover.e2e.playwright.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-popover.e2e.playwright.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-popover/test/mg-popover.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 { renderAttributes } from '../../../../utils/e2e.test.utils';\n\nconst TIMEOUT = 1000;\n\ndescribe('mg-popover', () => {\n  describeEach([\n    'auto',\n    'auto-start',\n    'auto-end',\n    'top',\n    'top-start',\n    'top-end',\n    'bottom',\n    'bottom-start',\n    'bottom-end',\n    'right',\n    'right-start',\n    'right-end',\n    'left',\n    'left-start',\n    'left-end',\n  ])('placement %s', placement => {\n    testEach([true, false])('Should render, case hide arrow %s', async (page: PageType, arrowHide) => {\n      await setPageContent(\n        page,\n        `<style>mg-button{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}</style>\n        <mg-popover ${renderAttributes({ placement, arrowHide })}>\n        <mg-button>Button</mg-button>\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\n          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\n          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat\n          non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n        </p>\n        </mg-popover>`,\n        { height: 900, width: 900 },\n      );\n\n      const mgPopover = await page.locator('mg-popover');\n      const mgButton = await page.locator('mg-button');\n      const mgPopoverContent = await page.locator('mg-popover-content');\n\n      await mgPopover.waitFor({ timeout: TIMEOUT });\n\n      // display popover on click on slotted element\n      await mgButton.click();\n\n      await mgPopoverContent.waitFor({ timeout: TIMEOUT });\n\n      expect(await mgPopoverContent.getAttribute('data-show')).toEqual('');\n\n      await expect(page.locator('body')).toHaveScreenshot();\n\n      // hide popover on click on slotted element\n      await mgButton.click();\n\n      expect(await mgPopoverContent.getAttribute('data-show')).toEqual(null);\n\n      // display popover on keyboad click event on slotted element\n      await page.keyboard.down('Tab');\n      await page.keyboard.down('Tab');\n      await page.keyboard.down('Enter');\n\n      await mgPopoverContent.waitFor({ timeout: TIMEOUT });\n      expect(await mgPopoverContent.getAttribute('data-show')).toEqual('');\n\n      // hide popover on keyboad escape key\n      await page.keyboard.down('Escape');\n\n      expect(await mgPopoverContent.getAttribute('data-show')).toEqual(null);\n    });\n  });\n\n  describeEach([\n    '',\n    '<h2 slot=\"title\">Titre un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long</h2>',\n  ])('with or without title %s', title => {\n    test('Should render with close button', async ({ page }) => {\n      await setPageContent(\n        page,\n        `<mg-popover display close-button>\n        <mg-button>Button</mg-button>\n        ${title}\n        <p slot=\"content\">\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod\n          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\n          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat\n          non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n        </p>\n        </mg-popover>`,\n        { width: 400, height: 350 },\n      );\n\n      await page.locator('mg-popover.hydrated').waitFor({ timeout: TIMEOUT });\n\n      await expect(page.locator('body')).toHaveScreenshot();\n    });\n  });\n\n  describeEach(['title', 'content'])('re-position %s slot', slot => {\n    test('should re-position when slot size change', async ({ page }) => {\n      const tagName = slot === 'title' ? 'h2' : 'p';\n      await setPageContent(\n        page,\n        `<style>mg-button{position:fixed;left:50%;transform:translateX(-50%)}</style>\n        <mg-popover ${renderAttributes({ placement: 'bottom-start', display: true })}>\n        <mg-button>Button</mg-button>\n        <${tagName} slot=\"${slot}\">\n          Lorem ipsum\n        </${tagName}>\n        </mg-popover>`,\n        { width: 400, height: 130 },\n      );\n\n      await expect(page.locator('body')).toHaveScreenshot();\n\n      await page.$eval(`mg-popover-content [slot=\"${slot}\"]`, el => {\n        el.textContent = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit';\n      });\n\n      await expect(page.locator('body')).toHaveScreenshot();\n    });\n  });\n\n  test(`should position popover where it have enough place`, async ({ page }) => {\n    await setPageContent(\n      page,\n      `<style>mg-button{position:fixed;left:0;bottom:0}</style>\n      <mg-popover ${renderAttributes({ display: true })}>\n      <mg-button>Button</mg-button>\n      <p slot=\"content\">\n        Lorem ipsum\n      </p>\n      </mg-popover>`,\n      { width: 400, height: 100 },\n    );\n\n    await expect(page.locator('body')).toHaveScreenshot();\n  });\n\n  describe('style', () => {\n    test('Should render with child mg-card', async ({ page }) => {\n      await setPageContent(\n        page,\n        `<mg-popover display close-button class=\"custom-popover-card\">\n        <mg-button>Button</mg-button>\n        <mg-card slot=\"content\">\n          My custom card\n        </mg-card>\n        </mg-popover>\n        <style>\n          .custom-popover-card {\n            --mg-popover-background-color: var(--color-danger);\n          }\n        </style>\n        `,\n        { width: 150, height: 180 },\n      );\n\n      await page.locator('mg-popover.hydrated').waitFor({ timeout: TIMEOUT });\n\n      await expect(page.locator('body')).toHaveScreenshot();\n    });\n\n    testEach(['content', 'title'])('Should render with --mg-popover-max-width %s', async (page: PageType, slot) => {\n      await setPageContent(\n        page,\n        `<mg-popover display close-button class=\"custom-popover\">\n        <mg-button>Button</mg-button>\n        <h2 slot=\"${slot}\">Titre un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long</h2>\n        </mg-popover>\n        <style>\n          .custom-popover {\n            --mg-popover-max-width: 10rem;\n          }\n        </style>\n        `,\n        { width: 300, height: 300 },\n      );\n\n      await page.locator('mg-popover.hydrated').waitFor({ timeout: TIMEOUT });\n\n      await expect(page.locator('body')).toHaveScreenshot();\n    });\n  });\n});\n"]}

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

@@ -126,5 +126,17 @@ describe('mg-popover', () => {
     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

@@ -1 +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"]}
+{"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.js

@@ -1,6 +1,7 @@
 /* eslint-disable jsx-a11y/no-redundant-roles */
 import { h } from "@stencil/core";
 import { initLocales } from "../../../locales";
+import { isValidString } from "../../../utils/components.utils";
 export class MgSkipLinks {
   constructor() {
     /***********
@@ -17,9 +18,7 @@ export class MgSkipLinks {
     this.links = undefined;
   }
   validateLinks(links) {
-    if (links === undefined ||
-      links.length === 0 ||
-      links.some(link => link.href === undefined || !link.href.startsWith('#') || link.label === undefined || link.label.trim() === '')) {
+    if (links === undefined || links.length === 0 || links.some(link => !isValidString(link.href) || !link.href.startsWith('#') || !isValidString(link.label))) {
       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.`);
     }
   }
@@ -38,18 +37,18 @@ export class MgSkipLinks {
    * @returns HTML Element
    */
   render() {
-    return (h("nav", { class: "mg-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { class: "mg-skip-links__list", role: "list" }, this.links.map(link => (h("li", { key: link.href }, h("a", { class: "mg-skip-links__link", href: link.href, onClick: this.handleLinkCLick }, link.label)))))));
+    return (h("nav", { class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { class: "mg-c-skip-links__list", role: "list" }, this.links.map(link => (h("li", { key: link.href }, h("a", { class: "mg-c-skip-links__link", href: link.href, onClick: this.handleLinkCLick }, link.label)))))));
   }
   static get is() { return "mg-skip-links"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["mg-skip-links.scss"]
+      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-skip-links.css"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["mg-skip-links.css"]
+      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-skip-links.css"]
     };
   }
   static get properties() {

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

@@ -1 +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"]}
+{"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;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAOhE,MAAM,OAAO,WAAW;;IAgCtB;;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;;;EAtBF,aAAa,CAAC,KAAiB;IAC7B,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE;MAC1J,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,iBAAiB,EAAC,IAAI,EAAC,YAAY,gBAAa,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,QAAQ;MACzF,UAAI,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAC,MAAM,IAC1C,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACtB,UAAI,GAAG,EAAE,IAAI,CAAC,IAAI;QAChB,SAAG,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,eAAe,IAC5E,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';\nimport { isValidString } from '../../../utils/components.utils';\n\n@Component({\n  tag: 'mg-skip-links',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-skip-links.css',\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 (links === undefined || links.length === 0 || links.some(link => !isValidString(link.href) || !link.href.startsWith('#') || !isValidString(link.label))) {\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-c-skip-links\" role=\"navigation\" aria-label={this.messages.skipLinks.navLabel}>\n        <ul class=\"mg-c-skip-links__list\" role=\"list\">\n          {this.links.map(link => (\n            <li key={link.href}>\n              <a class=\"mg-c-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-tabs/mg-tabs.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { createID, ClassList, allItemsAreString } from "../../../utils/components.utils";
+import { createID, ClassList, allItemsAreString, isValidString } from "../../../utils/components.utils";
 import { sizes, Status } from "./mg-tabs.conf";
 /**
  * type TabItem validation function
@@ -14,8 +14,14 @@ export class MgTabs {
      ************/
     // classes
     this.tabPanel = 'panel';
-    this.buttonTabBaseClass = 'mg-tabs__navigation-button';
+    this.buttonTabBaseClass = 'mg-c-tabs__navigation-button';
     this.startIndex = 1;
+    /**
+     * Validate that new tab status can be `Status.ACTIVE`
+     * @param tab - tab item
+     * @returns true when tab match condition to get a `Status.ACTIVE`
+     */
+    this.isActivableTab = (tab) => [undefined, Status.ACTIVE, Status.VISIBLE].includes(tab.status);
     /**
      * Method to know if given tab has the given status
      * @param tab - item tab key to set to ACTIVE status
@@ -36,19 +42,13 @@ export class MgTabs {
      * @returns index
      */
     this.getTabItemIndex = (index) => index + this.startIndex;
-    /**
-     * Method to get the active-tab value
-     * @returns of the active-tab
-     */
-    this.getActiveTab = () => this.activeTab || this.getTabItemIndex(this.tabs.map((tab, index) => (Object.assign(Object.assign({}, tab), { index }))).find(tab => this.tabHasStatus(tab, Status.ACTIVE)).index);
     /**
      * Handle click events on tabs
      * @param event - mouse event
      */
     this.handleClick = (event) => {
       const tabId = event.currentTarget.dataset.index;
-      const tab = this.tabs[Number(tabId) - this.startIndex];
-      if (this.tabHasStatus(tab, Status.HIDDEN) || this.tabHasStatus(tab, Status.DISABLED)) {
+      if (!this.isActivableTab(this.tabs[Number(tabId) - this.startIndex])) {
         event.preventDefault();
       }
       else {
@@ -108,7 +108,7 @@ export class MgTabs {
       setTimeout(() => {
         this.tabFocus = undefined;
         Array.from(this.element.shadowRoot.querySelectorAll('[data-index]')).forEach((tab, index) => {
-          tab.setAttribute('tabindex', this.getActiveTab() - this.startIndex !== index ? '-1' : '0');
+          tab.setAttribute('tabindex', this.activeTab - this.startIndex !== index ? '-1' : '0');
         });
       }, 0);
     };
@@ -126,10 +126,10 @@ export class MgTabs {
     this.items = undefined;
     this.activeTab = undefined;
     this.tabs = [];
-    this.classCollection = new ClassList(['mg-tabs']);
+    this.classCollection = new ClassList(['mg-c-tabs']);
   }
   validateLabel(newValue) {
-    if (typeof newValue !== 'string' || newValue.trim() === '') {
+    if (!isValidString(newValue)) {
       throw new Error('<mg-tabs> prop "label" is required.');
     }
   }
@@ -137,42 +137,42 @@ export class MgTabs {
     if (!sizes.includes(newValue)) {
       throw new Error(`<mg-tabs> prop "size" must be one of: ${sizes.join(', ')}`);
     }
-    this.classCollection.add(`mg-tabs--size-${this.size}`);
+    this.classCollection.add(`mg-c-tabs--size-${this.size}`);
   }
   validateItems(newValue) {
     // String array
-    if (allItemsAreString(newValue)) {
-      this.tabs = newValue.map((item, index) => ({ label: item, status: index === 0 ? Status.ACTIVE : Status.VISIBLE }));
-    }
+    if (allItemsAreString(newValue))
+      this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));
     // Object array
-    else if (newValue && newValue.length > 0 && newValue.every(item => isTabItem(item))) {
+    else if (Array.isArray(newValue) && newValue.length > 0 && newValue.every(isTabItem))
       this.tabs = newValue;
-      // init active tabs if not set. Default: index 0.
-      if (this.tabs.find(tab => this.tabHasStatus(tab, Status.ACTIVE)) === undefined)
-        this.tabs[0].status = Status.ACTIVE;
-    }
-    else {
+    else
       throw new Error('<mg-tabs> prop "items" is required and all items must be the same type: TabItem.');
-    }
   }
   validateActiveTab(newValue) {
-    if (typeof newValue === 'number' && newValue >= 1 && newValue <= this.tabs.length) {
+    // when `active-tab` is undefined we set default value by searching an item with `Status.ACTIVE` or we use the `startIndex` has fallback value
+    // after setting new value to `active-tab` the validate will be triggered again with the updated value and process the tab update
+    if (newValue === undefined) {
+      this.activeTab = this.tabs.some(tab => this.tabHasStatus(tab, Status.ACTIVE))
+        ? this.getTabItemIndex(this.tabs.findIndex(tab => this.tabHasStatus(tab, Status.ACTIVE)))
+        : this.startIndex;
+    }
+    else if (typeof newValue === 'number' && newValue >= this.startIndex && newValue <= this.tabs.length && this.isActivableTab(this.tabs[newValue - this.startIndex])) {
+      // if new 'active-tab' is activable we update tab status to ACTIVE and toggle past ACTIVE to VISIBLE
       this.tabs.forEach((tab, index) => {
         const isNewActiveTab = index === newValue - this.startIndex;
         // reset active tabs
         if (this.tabHasStatus(tab, Status.ACTIVE) && !isNewActiveTab)
           tab.status = Status.VISIBLE;
         // set active tab from given tab key
-        else if ((tab.status === undefined || this.tabHasStatus(tab, Status.VISIBLE)) && isNewActiveTab)
+        else if (this.isActivableTab(tab) && isNewActiveTab)
           tab.status = Status.ACTIVE;
       });
       // emit change active tab key event
-      if (this.tabs.find(tab => this.tabHasStatus(tab, Status.ACTIVE)) !== undefined) {
-        this.activeTabChange.emit(newValue);
-      }
+      this.activeTabChange.emit(newValue);
     }
-    else if (newValue !== undefined) {
-      throw new Error('<mg-tabs> prop "activeTab" must be between 1 and tabs length.');
+    else {
+      throw new Error(`<mg-tabs> prop "activeTab" must be a number between ${this.startIndex} and ${this.tabs.length} and new value must be "activable".`);
     }
   }
   /*************
@@ -203,24 +203,24 @@ export class MgTabs {
    * @returns HTML Element
    */
   render() {
-    return (h("div", { class: this.classCollection.join() }, h("header", { role: "tablist", "aria-label": this.label, class: "mg-tabs__header" }, this.tabs.map((tab, index) => (h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index), class: {
+    return (h("div", { class: this.classCollection.join() }, h("header", { role: "tablist", "aria-label": this.label, class: "mg-c-tabs__header" }, this.tabs.map((tab, index) => (h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index), class: {
         [`${this.buttonTabBaseClass}`]: true,
         [`${this.buttonTabBaseClass}--horizontal`]: true,
         [`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasStatus(tab, Status.ACTIVE),
         [`${this.getNavigationButtonClass(Status.DISABLED)}`]: this.tabHasStatus(tab, Status.DISABLED),
         [`${this.getNavigationButtonClass(Status.HIDDEN)}`]: this.tabHasStatus(tab, Status.HIDDEN),
-      }, tabindex: this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1, "aria-selected": this.tabHasStatus(tab, Status.ACTIVE).toString(), "aria-controls": this.getElementId(this.tabPanel, index), "aria-disabled": this.tabHasStatus(tab, Status.DISABLED), onClick: this.handleClick, onKeyDown: this.handleKeydown, "data-index": this.getTabItemIndex(index) }, tab.icon !== undefined && h("mg-icon", { icon: tab.icon }), tab.label, tab.badge !== undefined && h("mg-badge", { variant: "text-color", value: tab.badge.value, label: tab.badge.label, outline: tab.badge.role === 'information' }))))), this.tabs.map((tab, index) => (h("article", { key: tab.label, role: "tabpanel", id: this.getElementId(this.tabPanel, index), hidden: !this.tabHasStatus(tab, Status.ACTIVE), "aria-labelledby": this.getElementId(this.identifier, index), tabindex: this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1, class: "mg-tabs__content-container" }, h("slot", { name: this.getElementId('tab_content', index) }))))));
+      }, tabindex: this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1, "aria-selected": this.tabHasStatus(tab, Status.ACTIVE).toString(), "aria-controls": this.getElementId(this.tabPanel, index), "aria-disabled": this.tabHasStatus(tab, Status.DISABLED), onClick: this.handleClick, onKeyDown: this.handleKeydown, "data-index": this.getTabItemIndex(index) }, tab.icon !== undefined && h("mg-icon", { icon: tab.icon }), tab.label, tab.badge !== undefined && h("mg-badge", { variant: "text-color", value: tab.badge.value, label: tab.badge.label, outline: tab.badge.role === 'information' }))))), this.tabs.map((tab, index) => (h("article", { key: tab.label, role: "tabpanel", id: this.getElementId(this.tabPanel, index), hidden: !this.tabHasStatus(tab, Status.ACTIVE), "aria-labelledby": this.getElementId(this.identifier, index), tabindex: this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1, class: "mg-c-tabs__content-container" }, h("slot", { name: this.getElementId('tab_content', index) }))))));
   }
   static get is() { return "mg-tabs"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["mg-tabs.scss"]
+      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-tabs.css"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["mg-tabs.css"]
+      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-tabs.css"]
     };
   }
   static get properties() {