@mgdis/mg-components 5.16.0 → 5.17.0

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

@@ -0,0 +1,85 @@
+import { OverflowBehaviorElements } from "../../../../utils/behaviors.utils";
+import { setPageContent, expect, describe, testEach } from "../../../../utils/playwright.e2e.test.utils";
+import { renderAttributes } from "../../../../utils/e2e.test.utils";
+import { Status } from "../../menu/mg-menu-item/mg-menu-item.conf";
+import { Direction, sizes } from "../../menu/mg-menu/mg-menu.conf";
+const verticalFrameSizes = {
+  regular: {
+    height: 200,
+    width: 180,
+  },
+  medium: {
+    height: 300,
+    width: 180,
+  },
+  large: {
+    height: 400,
+    width: 180,
+  },
+};
+const getSubMenuSize = (size) => {
+  if (size === 'large')
+    return 'medium';
+  else if (size === 'medium')
+    return 'regular';
+  else
+    return 'regular';
+};
+const createHTML = args => `
+  <header class="menu-container menu-container--${args.direction}-small">
+    <mg-menu ${renderAttributes(Object.assign({ label: 'menu' }, args))}>
+      <mg-menu-item status="active">
+        <span slot="label">1 - head-1</span>
+        <mg-menu ${renderAttributes({ label: 'sub-menu 1', direction: Direction.VERTICAL, size: getSubMenuSize(args === null || args === void 0 ? void 0 : args.size) })}>
+          <mg-menu-item><span slot="label">Batman begins</span></mg-menu-item>
+        </mg-menu>
+      </mg-menu-item>
+      <mg-menu-item status="disabled"><span slot="label">1 - head-2 long</span></mg-menu-item>
+      <mg-menu-item href="#link">
+        <span slot="label">1 - head-3 very long</span>
+        <mg-icon icon='user' slot='image'></mg-icon>
+      </mg-menu-item>
+      <mg-menu-item>
+        <span slot="label">1 - head-4</span>
+        <mg-icon icon='user' slot='image'></mg-icon>
+        ${(args === null || args === void 0 ? void 0 : args.badge) ? "<mg-badge value='2' label='hello' slot='information'></mg-badge>" : ''}  
+      </mg-menu-item>
+      <mg-menu-item>
+        <span slot="label">1 - head-5</span>
+        <mg-icon icon='user' slot='image'></mg-icon>
+        ${(args === null || args === void 0 ? void 0 : args.badge) ? "<mg-badge value='2' label='hello' slot='information'></mg-badge>" : ''} 
+        <mg-menu ${renderAttributes({ label: 'sub-menu 2', direction: Direction.VERTICAL, size: getSubMenuSize(args === null || args === void 0 ? void 0 : args.size) })}>
+          <mg-menu-item><span slot="label">Batman begins with a longer title to go outide screen</span></mg-menu-item>
+        </mg-menu>
+      </mg-menu-item>
+    </mg-menu>
+  </header>
+  <style>
+    .menu-container.menu-container--vertical-small {
+      width: 180px;
+    }
+    .menu-container.menu-container--horizontal-small {
+      width: 200px;
+    }
+  </style>
+  `;
+describe('mg-item-more', () => {
+  describe('mg-menu', () => {
+    testEach(sizes)(`should renders, case direction ${Direction.VERTICAL} size %s with small screen`, async (page, size) => {
+      await setPageContent(page, createHTML({ direction: Direction.VERTICAL, size }), verticalFrameSizes[size]);
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+    });
+    testEach([true, false])('should renders with overflow, case badge %s', async (page, badge) => {
+      await setPageContent(page, createHTML({ direction: Direction.HORIZONTAL, badge }), { width: 400, height: 250 });
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+      await page.$eval(`[${OverflowBehaviorElements.BASE_INDEX}="0"]`, (elm, status) => {
+        elm.setAttribute('status', status);
+      }, Status.VISIBLE);
+      await page.$eval(`[${OverflowBehaviorElements.BASE_INDEX}="2"]`, (elm, status) => {
+        elm.setAttribute('status', status);
+      }, Status.ACTIVE);
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+    });
+  });
+});
+//# sourceMappingURL=mg-item-more.e2e.playwright.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-item-more.e2e.playwright.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-item-more/test/mg-item-more.e2e.playwright.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,mCAAmC,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAY,MAAM,6CAA6C,CAAC;AACnH,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EAAE,MAAM,EAAE,MAAM,2CAA2C,CAAC;AACnE,OAAO,EAAE,SAAS,EAAgB,KAAK,EAAE,MAAM,iCAAiC,CAAC;AAEjF,MAAM,kBAAkB,GAAG;EACzB,OAAO,EAAE;IACP,MAAM,EAAE,GAAG;IACX,KAAK,EAAE,GAAG;GACX;EACD,MAAM,EAAE;IACN,MAAM,EAAE,GAAG;IACX,KAAK,EAAE,GAAG;GACX;EACD,KAAK,EAAE;IACL,MAAM,EAAE,GAAG;IACX,KAAK,EAAE,GAAG;GACX;CACF,CAAC;AAEF,MAAM,cAAc,GAAG,CAAC,IAAkB,EAAE,EAAE;EAC5C,IAAI,IAAI,KAAK,OAAO;IAAE,OAAO,QAAQ,CAAC;OACjC,IAAI,IAAI,KAAK,QAAQ;IAAE,OAAO,SAAS,CAAC;;IACxC,OAAO,SAAS,CAAC;AACxB,CAAC,CAAC;AAEF,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC;kDACuB,IAAI,CAAC,SAAS;eACjD,gBAAgB,iBAAG,KAAK,EAAE,MAAM,IAAK,IAAI,EAAG;;;mBAGxC,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,CAAC,QAAQ,EAAE,IAAI,EAAE,cAAc,CAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,CAAC,EAAE,CAAC;;;;;;;;;;;;UAYnH,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,EAAC,CAAC,CAAC,kEAAkE,CAAC,CAAC,CAAC,EAAE;;;;;UAKrF,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,EAAC,CAAC,CAAC,kEAAkE,CAAC,CAAC,CAAC,EAAE;mBAC5E,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,CAAC,QAAQ,EAAE,IAAI,EAAE,cAAc,CAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,CAAC,EAAE,CAAC;;;;;;;;;;;;;;GAc1H,CAAC;AAEJ,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;EAC5B,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE;IACvB,QAAQ,CAAC,KAAK,CAAC,CAAC,kCAAkC,SAAS,CAAC,QAAQ,4BAA4B,EAAE,KAAK,EAAE,IAAc,EAAE,IAAY,EAAE,EAAE;MACvI,MAAM,cAAc,CAAC,IAAI,EAAE,UAAU,CAAC,EAAE,SAAS,EAAE,SAAS,CAAC,QAAQ,EAAE,IAAI,EAAE,CAAC,EAAE,kBAAkB,CAAC,IAAI,CAAC,CAAC,CAAC;MAE1G,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;IACnE,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,6CAA6C,EAAE,KAAK,EAAE,IAAc,EAAE,KAAK,EAAE,EAAE;MACrG,MAAM,cAAc,CAAC,IAAI,EAAE,UAAU,CAAC,EAAE,SAAS,EAAE,SAAS,CAAC,UAAU,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;MAEhH,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;MAEjE,MAAM,IAAI,CAAC,KAAK,CACd,IAAI,wBAAwB,CAAC,UAAU,OAAO,EAC9C,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE;QACd,GAAG,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAgB,CAAC,CAAC;MAC/C,CAAC,EACD,MAAM,CAAC,OAAO,CACf,CAAC;MAEF,MAAM,IAAI,CAAC,KAAK,CACd,IAAI,wBAAwB,CAAC,UAAU,OAAO,EAC9C,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE;QACd,GAAG,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAgB,CAAC,CAAC;MAC/C,CAAC,EACD,MAAM,CAAC,MAAM,CACd,CAAC;MAEF,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;IACnE,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { OverflowBehaviorElements } from '../../../../utils/behaviors.utils';\nimport { setPageContent, expect, describe, testEach, PageType } from '../../../../utils/playwright.e2e.test.utils';\nimport { renderAttributes } from '../../../../utils/e2e.test.utils';\nimport { Status } from '../../menu/mg-menu-item/mg-menu-item.conf';\nimport { Direction, MenuSizeType, sizes } from '../../menu/mg-menu/mg-menu.conf';\n\nconst verticalFrameSizes = {\n  regular: {\n    height: 200,\n    width: 180,\n  },\n  medium: {\n    height: 300,\n    width: 180,\n  },\n  large: {\n    height: 400,\n    width: 180,\n  },\n};\n\nconst getSubMenuSize = (size: MenuSizeType) => {\n  if (size === 'large') return 'medium';\n  else if (size === 'medium') return 'regular';\n  else return 'regular';\n};\n\nconst createHTML = args => `\n  <header class=\"menu-container menu-container--${args.direction}-small\">\n    <mg-menu ${renderAttributes({ label: 'menu', ...args })}>\n      <mg-menu-item status=\"active\">\n        <span slot=\"label\">1 - head-1</span>\n        <mg-menu ${renderAttributes({ label: 'sub-menu 1', direction: Direction.VERTICAL, size: getSubMenuSize(args?.size) })}>\n          <mg-menu-item><span slot=\"label\">Batman begins</span></mg-menu-item>\n        </mg-menu>\n      </mg-menu-item>\n      <mg-menu-item status=\"disabled\"><span slot=\"label\">1 - head-2 long</span></mg-menu-item>\n      <mg-menu-item href=\"#link\">\n        <span slot=\"label\">1 - head-3 very long</span>\n        <mg-icon icon='user' slot='image'></mg-icon>\n      </mg-menu-item>\n      <mg-menu-item>\n        <span slot=\"label\">1 - head-4</span>\n        <mg-icon icon='user' slot='image'></mg-icon>\n        ${args?.badge ? \"<mg-badge value='2' label='hello' slot='information'></mg-badge>\" : ''}  \n      </mg-menu-item>\n      <mg-menu-item>\n        <span slot=\"label\">1 - head-5</span>\n        <mg-icon icon='user' slot='image'></mg-icon>\n        ${args?.badge ? \"<mg-badge value='2' label='hello' slot='information'></mg-badge>\" : ''} \n        <mg-menu ${renderAttributes({ label: 'sub-menu 2', direction: Direction.VERTICAL, size: getSubMenuSize(args?.size) })}>\n          <mg-menu-item><span slot=\"label\">Batman begins with a longer title to go outide screen</span></mg-menu-item>\n        </mg-menu>\n      </mg-menu-item>\n    </mg-menu>\n  </header>\n  <style>\n    .menu-container.menu-container--vertical-small {\n      width: 180px;\n    }\n    .menu-container.menu-container--horizontal-small {\n      width: 200px;\n    }\n  </style>\n  `;\n\ndescribe('mg-item-more', () => {\n  describe('mg-menu', () => {\n    testEach(sizes)(`should renders, case direction ${Direction.VERTICAL} size %s with small screen`, async (page: PageType, size: string) => {\n      await setPageContent(page, createHTML({ direction: Direction.VERTICAL, size }), verticalFrameSizes[size]);\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n    });\n\n    testEach([true, false])('should renders with overflow, case badge %s', async (page: PageType, badge) => {\n      await setPageContent(page, createHTML({ direction: Direction.HORIZONTAL, badge }), { width: 400, height: 250 });\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n\n      await page.$eval(\n        `[${OverflowBehaviorElements.BASE_INDEX}=\"0\"]`,\n        (elm, status) => {\n          elm.setAttribute('status', status as string);\n        },\n        Status.VISIBLE,\n      );\n\n      await page.$eval(\n        `[${OverflowBehaviorElements.BASE_INDEX}=\"2\"]`,\n        (elm, status) => {\n          elm.setAttribute('status', status as string);\n        },\n        Status.ACTIVE,\n      );\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n    });\n  });\n});\n"]}

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

@@ -0,0 +1,106 @@
+import { h } from "@stencil/core/internal";
+import { newSpecPage } from "@stencil/core/testing";
+import { forcePopoverId, mockConsoleError, mockWindowFrames, setupMutationObserverMock, setupResizeObserverMock } from "../../../../utils/unit.test.utils";
+import { MgItemMore } from "../mg-item-more";
+import { MgMenuItem } from "../../menu/mg-menu-item/mg-menu-item";
+import { MgMenu } from "../../menu/mg-menu/mg-menu";
+import { Status } from "../../menu/mg-menu-item/mg-menu-item.conf";
+import { MgPopover } from "../../mg-popover/mg-popover";
+import { MgPopoverContent } from "../../mg-popover/mg-popover-content/mg-popover-content";
+mockConsoleError();
+mockWindowFrames();
+const udpateItemMorePopoverId = page => {
+  const moreMenuItem = page.doc.querySelector('mg-item-more').shadowRoot.querySelector('mg-menu-item');
+  forcePopoverId(moreMenuItem, `mg-popover-test_more-item`);
+};
+let id;
+/**
+ * set id if param is true
+ * @param hasId - true if need a generated id
+ * @returns genereted id
+ */
+const setId = (hasId) => (hasId ? `my-id-${id++}` : undefined);
+const getPage = async (args) => {
+  const page = await newSpecPage({
+    components: [MgMenu, MgMenuItem, MgItemMore, MgPopover, MgPopoverContent],
+    template: () => (h("mg-menu", Object.assign({}, args), h("mg-menu-item", { href: args.isHref ? '#' : undefined, id: setId(args.hasId) }, h("span", { slot: "label" }, "Batman")), h("mg-menu-item", { id: setId(args.hasId) }, h("span", { slot: "label" }, "Joker")), h("mg-menu-item", { id: setId(args.hasId) }, h("span", { slot: "label" }, "Bane")))),
+  });
+  jest.runAllTimers();
+  await page.waitForChanges();
+  jest.runOnlyPendingTimers();
+  udpateItemMorePopoverId(page);
+  return page;
+};
+describe('mg-item-more', () => {
+  beforeEach(() => {
+    id = 1;
+    jest.useFakeTimers();
+    setupResizeObserverMock({
+      observe: () => null,
+      disconnect: () => null,
+    });
+    setupMutationObserverMock({
+      disconnect: () => null,
+      observe: () => null,
+      takeRecords: () => null,
+    });
+  });
+  afterEach(() => jest.runOnlyPendingTimers());
+  describe('render', () => {
+    test.each([undefined, { icon: { icon: 'user' } }, { slotlabel: { display: true, label: 'more batman menu' } }, { size: 'large' }, { hasId: true }])('should manage resize with observer, case %s', async (args) => {
+      const page = await getPage(Object.assign({ label: 'batman' }, args));
+      expect(page.root).toMatchSnapshot();
+    });
+  });
+  describe('errors', () => {
+    test.each([
+      { props: { itemmore: { size: {} } }, error: '<mg-item-more> prop "size" must match MgItemMore[\'size\'] type' },
+      { props: { itemmore: { icon: '' } }, error: '<mg-item-more> prop "icon" must match MgItemMore[\'icon\'] type' },
+      { props: { itemmore: { icon: { icon: undefined } } }, error: '<mg-item-more> prop "icon" must match MgItemMore[\'icon\'] type' },
+      { props: { itemmore: { slotlabel: {} } }, error: '<mg-item-more> prop "slotlabel" must match MgItemMore[\'slotlabel\'] type' },
+      { props: { itemmore: { slotlabel: { label: undefined } } }, error: '<mg-item-more> prop "slotlabel" must match MgItemMore[\'slotlabel\'] type' },
+      { props: { itemmore: { slotlabel: { display: '' } } }, error: '<mg-item-more> prop "slotlabel" must match MgItemMore[\'slotlabel\'] type' },
+    ])('should throw an error, case %s', async ({ props, error }) => {
+      expect.assertions(1);
+      try {
+        await getPage(Object.assign({ label: 'batman' }, props));
+      }
+      catch (err) {
+        expect(err.message).toMatch(error);
+      }
+    });
+  });
+  describe('events', () => {
+    test('should update proxy status when base item status-change event was trigger', async () => {
+      const page = await getPage({ label: 'batman' });
+      expect(page.root).toMatchSnapshot();
+      const mgMenuItemBase = page.doc.querySelector('mg-menu-item');
+      const mgMenuItemProxy = page.doc.querySelector('mg-item-more').shadowRoot.querySelector('mg-menu mg-menu-item');
+      expect(mgMenuItemProxy).toHaveProperty('status', Status.VISIBLE);
+      mgMenuItemBase.dispatchEvent(new CustomEvent('status-change', { bubbles: true, detail: Status.ACTIVE }));
+      await page.waitForChanges();
+      expect(mgMenuItemProxy).toHaveProperty('status', Status.ACTIVE);
+      udpateItemMorePopoverId(page);
+      expect(page.root).toMatchSnapshot();
+    });
+    test.each([false, true])('should trigger base item click event when proxy item was clicked', async (isHref) => {
+      const page = await getPage({ label: 'batman', isHref });
+      const mgMenuItemBase = page.doc.querySelector('mg-menu-item');
+      const mgMenuItemProxy = page.doc.querySelector('mg-item-more').shadowRoot.querySelector('mg-menu mg-menu-item');
+      const spy = jest.spyOn(mgMenuItemBase.shadowRoot.querySelector(isHref ? 'a' : 'button'), 'click');
+      mgMenuItemProxy.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+      await page.waitForChanges();
+      expect(spy).toBeCalledTimes(1);
+      udpateItemMorePopoverId(page);
+      expect(page.root).toMatchSnapshot();
+    });
+  });
+  test('should fire disconnect callback', async () => {
+    const page = await getPage({ label: 'batman' });
+    expect(page.root).toMatchSnapshot();
+    page.doc.querySelector('mg-item-more').remove();
+    await page.waitForChanges();
+    expect(page.root).toMatchSnapshot();
+  });
+});
+//# sourceMappingURL=mg-item-more.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-item-more.spec.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-item-more/test/mg-item-more.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core/internal';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { forcePopoverId, mockConsoleError, mockWindowFrames, setupMutationObserverMock, setupResizeObserverMock } from '../../../../utils/unit.test.utils';\nimport { MgItemMore } from '../mg-item-more';\nimport { MgMenuItem } from '../../menu/mg-menu-item/mg-menu-item';\nimport { MgMenu } from '../../menu/mg-menu/mg-menu';\nimport { Status } from '../../menu/mg-menu-item/mg-menu-item.conf';\nimport { MgPopover } from '../../mg-popover/mg-popover';\nimport { MgPopoverContent } from '../../mg-popover/mg-popover-content/mg-popover-content';\n\nmockConsoleError();\nmockWindowFrames();\n\nconst udpateItemMorePopoverId = page => {\n  const moreMenuItem = page.doc.querySelector('mg-item-more').shadowRoot.querySelector('mg-menu-item');\n  forcePopoverId(moreMenuItem, `mg-popover-test_more-item`);\n};\n\nlet id;\n/**\n * set id if param is true\n * @param hasId - true if need a generated id\n * @returns genereted id\n */\nconst setId = (hasId: boolean): string => (hasId ? `my-id-${id++}` : undefined);\n\nconst getPage = async args => {\n  const page = await newSpecPage({\n    components: [MgMenu, MgMenuItem, MgItemMore, MgPopover, MgPopoverContent],\n    template: () => (\n      <mg-menu {...args}>\n        <mg-menu-item href={args.isHref ? '#' : undefined} id={setId(args.hasId)}>\n          <span slot=\"label\">Batman</span>\n        </mg-menu-item>\n        <mg-menu-item id={setId(args.hasId)}>\n          <span slot=\"label\">Joker</span>\n        </mg-menu-item>\n        <mg-menu-item id={setId(args.hasId)}>\n          <span slot=\"label\">Bane</span>\n        </mg-menu-item>\n      </mg-menu>\n    ),\n  });\n\n  jest.runAllTimers();\n\n  await page.waitForChanges();\n\n  jest.runOnlyPendingTimers();\n\n  udpateItemMorePopoverId(page);\n\n  return page;\n};\n\ndescribe('mg-item-more', () => {\n  beforeEach(() => {\n    id = 1;\n    jest.useFakeTimers();\n    setupResizeObserverMock({\n      observe: () => null,\n      disconnect: () => null,\n    });\n    setupMutationObserverMock({\n      disconnect: () => null,\n      observe: () => null,\n      takeRecords: () => null,\n    });\n  });\n  afterEach(() => jest.runOnlyPendingTimers());\n\n  describe('render', () => {\n    test.each([undefined, { icon: { icon: 'user' } }, { slotlabel: { display: true, label: 'more batman menu' } }, { size: 'large' }, { hasId: true }])(\n      'should manage resize with observer, case %s',\n      async args => {\n        const page = await getPage({ label: 'batman', ...args });\n\n        expect(page.root).toMatchSnapshot();\n      },\n    );\n  });\n\n  describe('errors', () => {\n    test.each([\n      { props: { itemmore: { size: {} } }, error: '<mg-item-more> prop \"size\" must match MgItemMore[\\'size\\'] type' },\n      { props: { itemmore: { icon: '' } }, error: '<mg-item-more> prop \"icon\" must match MgItemMore[\\'icon\\'] type' },\n      { props: { itemmore: { icon: { icon: undefined } } }, error: '<mg-item-more> prop \"icon\" must match MgItemMore[\\'icon\\'] type' },\n      { props: { itemmore: { slotlabel: {} } }, error: '<mg-item-more> prop \"slotlabel\" must match MgItemMore[\\'slotlabel\\'] type' },\n      { props: { itemmore: { slotlabel: { label: undefined } } }, error: '<mg-item-more> prop \"slotlabel\" must match MgItemMore[\\'slotlabel\\'] type' },\n      { props: { itemmore: { slotlabel: { display: '' } } }, error: '<mg-item-more> prop \"slotlabel\" must match MgItemMore[\\'slotlabel\\'] type' },\n    ])('should throw an error, case %s', async ({ props, error }) => {\n      expect.assertions(1);\n\n      try {\n        await getPage({ label: 'batman', ...props });\n      } catch (err) {\n        expect(err.message).toMatch(error);\n      }\n    });\n  });\n\n  describe('events', () => {\n    test('should update proxy status when base item status-change event was trigger', async () => {\n      const page = await getPage({ label: 'batman' });\n\n      expect(page.root).toMatchSnapshot();\n\n      const mgMenuItemBase = page.doc.querySelector('mg-menu-item');\n      const mgMenuItemProxy = page.doc.querySelector('mg-item-more').shadowRoot.querySelector('mg-menu mg-menu-item');\n      expect(mgMenuItemProxy).toHaveProperty('status', Status.VISIBLE);\n      mgMenuItemBase.dispatchEvent(new CustomEvent('status-change', { bubbles: true, detail: Status.ACTIVE }));\n\n      await page.waitForChanges();\n      expect(mgMenuItemProxy).toHaveProperty('status', Status.ACTIVE);\n\n      udpateItemMorePopoverId(page);\n      expect(page.root).toMatchSnapshot();\n    });\n\n    test.each([false, true])('should trigger base item click event when proxy item was clicked', async isHref => {\n      const page = await getPage({ label: 'batman', isHref });\n\n      const mgMenuItemBase = page.doc.querySelector('mg-menu-item');\n      const mgMenuItemProxy = page.doc.querySelector('mg-item-more').shadowRoot.querySelector('mg-menu mg-menu-item');\n      const spy = jest.spyOn(mgMenuItemBase.shadowRoot.querySelector(isHref ? 'a' : 'button'), 'click');\n\n      mgMenuItemProxy.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n      await page.waitForChanges();\n\n      expect(spy).toBeCalledTimes(1);\n\n      udpateItemMorePopoverId(page);\n      expect(page.root).toMatchSnapshot();\n    });\n  });\n\n  test('should fire disconnect callback', async () => {\n    const page = await getPage({ label: 'batman' });\n\n    expect(page.root).toMatchSnapshot();\n\n    page.doc.querySelector('mg-item-more').remove();\n\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot();\n  });\n});\n"]}

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

@@ -2,3 +2,4 @@
  * List of all possibles message variants
  */
 export const variants = ['info', 'warning', 'success', 'danger'];
+//# sourceMappingURL=mg-message.conf.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-message.conf.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-message/mg-message.conf.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,CAAU,CAAC","sourcesContent":["/**\n * List of all possibles message variants\n */\nexport const variants = ['info', 'warning', 'success', 'danger'] as const;\n\n/**\n * Variant type\n */\nexport type VariantType = (typeof variants)[number];\n"]}

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

@@ -1,7 +1,7 @@
-import { h } from '@stencil/core';
-import { createID, ClassList } from '../../../utils/components.utils';
-import { variants } from './mg-message.conf';
-import { initLocales } from '../../../locales';
+import { h } from "@stencil/core";
+import { createID, ClassList } from "../../../utils/components.utils";
+import { variants } from "./mg-message.conf";
+import { initLocales } from "../../../locales";
 export class MgMessage {
   constructor() {
     /************
@@ -210,7 +210,8 @@ export class MgMessage {
           "references": {
             "VariantType": {
               "location": "import",
-              "path": "./mg-message.conf"
+              "path": "./mg-message.conf",
+              "id": "src/components/molecules/mg-message/mg-message.conf.ts::VariantType"
             }
           }
         },
@@ -318,3 +319,4 @@ export class MgMessage {
       }];
   }
 }
+//# sourceMappingURL=mg-message.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-message.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-message/mg-message.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport { createID, ClassList } from '../../../utils/components.utils';\nimport { variants, VariantType } from './mg-message.conf';\nimport { initLocales } from '../../../locales';\nimport { type MgIcon } from '../../atoms/mg-icon/mg-icon';\n\n@Component({\n  tag: 'mg-message',\n  styleUrl: 'mg-message.scss',\n  shadow: true,\n})\nexport class MgMessage {\n  /************\n   * Internal *\n   ************/\n\n  // Classes\n  private readonly classHide = 'mg-message--hide';\n\n  // IDs\n  private closeButtonId = '';\n\n  // Stored timer setted when hide action is run from setTimeOut\n  private storedTimer: ReturnType<typeof setTimeout> = null;\n\n  // Manage hover\n  private isFocused = false;\n  private isHovered = false;\n\n  // Locales\n  private messages;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgMessageElement;\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-message');\n\n  /**\n   * Add a delay to hide/close message when it passed\n   * Value is defined in seconds and must greater than 2 seconds (PDA9-314 RG-06)\n   */\n  @Prop() delay: number;\n  @Watch('delay')\n  validateDelay(newValue: MgMessage['delay']): void {\n    if (newValue !== undefined && newValue < 2) {\n      throw new Error(`<mg-message> prop \"delay\" must be greater than 2 seconds.`);\n    }\n  }\n\n  /**\n   * Message variant\n   */\n  @Prop() variant: VariantType = variants[0]; // info\n  @Watch('variant')\n  validateVariant(newValue: MgMessage['variant'], oldValue?: MgMessage['variant']): void {\n    if (!variants.includes(newValue)) {\n      throw new Error(`<mg-message> prop \"variant\" must be one of: ${variants.join(', ')}`);\n    } else {\n      if (oldValue !== undefined) {\n        this.classCollection.delete(`mg-message--${oldValue}`);\n      }\n      this.classCollection.add(`mg-message--${newValue}`);\n    }\n  }\n\n  /**\n   * Define if message has a cross button\n   * RG 01: https://jira.mgdis.fr/browse/PDA9-140\n   */\n  @Prop({ mutable: true }) closeButton = false;\n  @Watch('closeButton')\n  validateCloseButton(newValue: MgMessage['closeButton']): void {\n    if (newValue && this.hasActions) {\n      this.closeButton = false;\n      throw new Error('<mg-message> prop \"close-button\" can\\'t be used with the actions slot.');\n    }\n  }\n\n  /**\n   * Define if message is hidden\n   */\n  @Prop({ mutable: true }) hide = false;\n  @Watch('hide')\n  validateHide(newValue: MgMessage['hide']): void {\n    if (newValue) {\n      this.componentHide.emit();\n      this.classCollection.add(this.classHide);\n      // Remove event Listener\n      ['focusin', 'mouseenter'].forEach(event => {\n        this.element.removeEventListener(event, this.timerEvents);\n      });\n      // Clear Timer\n      this.clearTimer();\n    } else {\n      this.componentShow.emit();\n      this.classCollection.delete(this.classHide);\n      // If delay is set\n      if (this.delay > 1) {\n        // Start timer\n        this.setTimer();\n        // Stop timer when get focus or mouse enter\n        ['focusin', 'mouseenter'].forEach(event => {\n          this.element.addEventListener(event, this.timerEvents);\n        });\n      }\n    }\n  }\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-message']);\n\n  /**\n   * Define if component is using actions slot\n   */\n  @State() hasActions = false;\n\n  /**\n   * Emited event when message is diplayed\n   */\n  @Event({ eventName: 'component-show' }) componentShow: EventEmitter<string>;\n\n  /**\n   * Emited event when message is hidden\n   */\n  @Event({ eventName: 'component-hide' }) componentHide: EventEmitter<string>;\n\n  /**\n   * Set timer\n   */\n  private setTimer = (): void => {\n    this.storedTimer = setTimeout(() => (this.hide = true), this.delay * 1000);\n  };\n\n  /**\n   * Clear timer\n   */\n  private clearTimer = (): void => {\n    clearTimeout(this.storedTimer);\n  };\n\n  /**\n   * Event to add on element\n   * @param event - event\n   */\n  private timerEvents = (event: MouseEvent | FocusEvent): void => {\n    this.clearTimer();\n    const isMouseEvent: boolean = event.type === 'mouseenter';\n    // Needed to ensure we don't start the timer\n    this[isMouseEvent ? 'isHovered' : 'isFocused'] = true;\n\n    // Restart timer when loose focus AND mouse leave\n    this.element.addEventListener(\n      isMouseEvent ? 'mouseleave' : 'focusout',\n      eventOut => {\n        this[eventOut.type === 'mouseleave' ? 'isHovered' : 'isFocused'] = false;\n        // Start timer if needed\n        if (!this.isFocused && !this.isHovered) this.setTimer();\n      },\n      { once: true },\n    );\n  };\n\n  /**\n   * Handle close button\n   */\n  private handleClose = (): void => {\n    this.hide = true;\n  };\n\n  /**\n   * Get icon corresponding to variant\n   * @returns icon\n   */\n  private getIcon = (): MgIcon['icon'] => {\n    switch (this.variant) {\n      case 'info':\n        return 'info-circle';\n      case 'warning':\n        return 'exclamation-triangle';\n      case 'success':\n        return 'check-circle';\n      case 'danger':\n        return 'exclamation-circle';\n      default:\n        break;\n    }\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n    // Validate\n    this.validateVariant(this.variant);\n    // Check if close button is an can be activated\n    this.hasActions = this.element.querySelector('[slot=\"actions\"]') !== null;\n    this.validateCloseButton(this.closeButton);\n    if (this.closeButton) {\n      this.classCollection.add('mg-message--close-button');\n      this.closeButtonId = `${this.identifier}-close-button`;\n    }\n    this.validateDelay(this.delay);\n    this.validateHide(this.hide);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <div id={this.identifier} class={this.classCollection.join()} role={this.variant === 'info' ? 'status' : 'alert'}>\n        <mg-card variant={this.variant} variant-style=\"bar-left\">\n          <span class=\"mg-message__icon\">\n            <mg-icon icon={this.getIcon()}></mg-icon>\n          </span>\n          <div class=\"mg-message__content\">\n            <span class=\"mg-message__content-slot\">\n              <slot></slot>\n            </span>\n            {this.hasActions && <span class=\"mg-message__content-separator\"></span>}\n            {this.hasActions && (\n              <span class=\"mg-message__content-actions-slot\">\n                <slot name=\"actions\"></slot>\n              </span>\n            )}\n          </div>\n          {this.closeButton && (\n            <span class=\"mg-message__close-button\">\n              <mg-button identifier={this.closeButtonId} is-icon variant=\"flat\" label={this.messages.message.closeButton} onClick={this.handleClose}>\n                <mg-icon icon=\"cross\"></mg-icon>\n              </mg-button>\n            </span>\n          )}\n        </mg-card>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,64 @@
+import { createPage } from "../../../../utils/stencil.e2e.test.utils";
+import { variants } from "../mg-message.conf";
+const getContent = (contentSize, withAction) => {
+  let content = '<strong>Strong</strong> content!';
+  let actions = '';
+  if (contentSize === 'long') {
+    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.';
+  }
+  if (withAction) {
+    actions = `<div slot="actions" class="mg-group-elements mg-group-elements--align-right"><mg-button>Primary</mg-button><mg-button variant="secondary">Secondary</mg-button></div>`;
+  }
+  return `<p>${content}</p>${actions}`;
+};
+describe('mg-message', () => {
+  test('Should render', async () => {
+    const html = variants
+      .map(variant => {
+      const props = [
+        { contentSize: 'short', withAction: false, closeButton: false },
+        { contentSize: 'long', withAction: false, closeButton: false },
+        { contentSize: 'short', withAction: true, closeButton: false },
+        { contentSize: 'long', withAction: true, closeButton: false },
+        { contentSize: 'short', withAction: false, closeButton: true },
+        { contentSize: 'long', withAction: false, closeButton: true },
+      ];
+      return props
+        .map(({ contentSize, withAction, closeButton }) => `<mg-message variant="${variant}" close-button="${closeButton}">${getContent(contentSize, withAction)}</mg-message>`)
+        .join('');
+    })
+      .join('');
+    const page = await createPage(html);
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+  });
+  test('Should render with child mg-card', async () => {
+    const page = await createPage(`
+      <mg-message class="custom-message-card">
+        <mg-card>child card</mg-card>
+      </mg-message>
+      <style>
+        .custom-message-card {
+          --mg-card-background: hsl(var(--color-danger));
+        }
+      </style>
+    `);
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+  });
+  test('Should hide message on close button click', async () => {
+    const page = await createPage(`<mg-message close-button><p>Blu</p></mg-message>`);
+    const mgMessage = await page.find('mg-message');
+    expect(mgMessage).not.toHaveAttribute('hide');
+    const mgButton = await page.find('mg-message >>> mg-button');
+    mgButton.triggerEvent('click');
+    await page.waitForChanges();
+    const mgMessageHideProp = await mgMessage.getProperty('hide');
+    expect(mgMessageHideProp).toEqual(true);
+    await page.setViewport({ width: 600, height: 100 });
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+  });
+});
+//# sourceMappingURL=mg-message.e2e.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-message.e2e.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-message/test/mg-message.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { createPage } from '../../../../utils/stencil.e2e.test.utils';\nimport { variants } from '../mg-message.conf';\n\nconst getContent = (contentSize, withAction) => {\n  let content = '<strong>Strong</strong> content!';\n  let actions = '';\n  if (contentSize === 'long') {\n    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 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.';\n  }\n  if (withAction) {\n    actions = `<div slot=\"actions\" class=\"mg-group-elements mg-group-elements--align-right\"><mg-button>Primary</mg-button><mg-button variant=\"secondary\">Secondary</mg-button></div>`;\n  }\n  return `<p>${content}</p>${actions}`;\n};\n\ndescribe('mg-message', () => {\n  test('Should render', async () => {\n    const html = variants\n      .map(variant => {\n        const props = [\n          { contentSize: 'short', withAction: false, closeButton: false },\n          { contentSize: 'long', withAction: false, closeButton: false },\n          { contentSize: 'short', withAction: true, closeButton: false },\n          { contentSize: 'long', withAction: true, closeButton: false },\n          { contentSize: 'short', withAction: false, closeButton: true },\n          { contentSize: 'long', withAction: false, closeButton: true },\n        ];\n        return props\n          .map(({ contentSize, withAction, closeButton }) => `<mg-message variant=\"${variant}\" close-button=\"${closeButton}\">${getContent(contentSize, withAction)}</mg-message>`)\n          .join('');\n      })\n      .join('');\n    const page = await createPage(html);\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n  });\n\n  test('Should render with child mg-card', async () => {\n    const page = await createPage(`\n      <mg-message class=\"custom-message-card\">\n        <mg-card>child card</mg-card>\n      </mg-message>\n      <style>\n        .custom-message-card {\n          --mg-card-background: hsl(var(--color-danger));\n        }\n      </style>\n    `);\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n  });\n\n  test('Should hide message on close button click', async () => {\n    const page = await createPage(`<mg-message close-button><p>Blu</p></mg-message>`);\n\n    const mgMessage = await page.find('mg-message');\n    expect(mgMessage).not.toHaveAttribute('hide');\n\n    const mgButton = await page.find('mg-message >>> mg-button');\n    mgButton.triggerEvent('click');\n    await page.waitForChanges();\n\n    const mgMessageHideProp = await mgMessage.getProperty('hide');\n    expect(mgMessageHideProp).toEqual(true);\n\n    await page.setViewport({ width: 600, height: 100 });\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n  });\n});\n"]}

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

@@ -0,0 +1,109 @@
+import { h } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { MgMessage } from "../mg-message";
+import { variants } from "../mg-message.conf";
+const getDefaultContent = () => (h("p", null, h("strong", null, "Strong"), " content!"));
+const getPage = (args, content) => newSpecPage({
+  components: [MgMessage],
+  template: () => h("mg-message", Object.assign({}, args), content),
+});
+describe('mg-message', () => {
+  describe.each(variants)('Should render a %s message', variant => {
+    test.each([
+      { identifier: 'identifier' },
+      { identifier: 'identifier', closeButton: true },
+      { identifier: 'identifier', closeButton: true, lang: 'fr' },
+      { identifier: 'identifier', closeButton: true, lang: 'xx' },
+    ])('with args %s', async (args) => {
+      const { root } = await getPage(Object.assign(Object.assign({}, args), { variant }), getDefaultContent());
+      expect(root).toMatchSnapshot();
+    });
+  });
+  test('Should replace classes on variant changes', async () => {
+    const page = await getPage({ identifier: 'identifier' }, getDefaultContent());
+    const element = page.doc.querySelector('mg-message');
+    let classInfo = element.shadowRoot.querySelector('.mg-message--info');
+    expect(classInfo).not.toBeNull();
+    element.variant = 'danger';
+    await page.waitForChanges();
+    classInfo = element.shadowRoot.querySelector('.mg-message--info');
+    const classDanger = element.shadowRoot.querySelector('.mg-message--danger');
+    expect(classInfo).toBeNull();
+    expect(classDanger).not.toBeNull();
+  });
+  test.each(['', 'blu'])('Should throw error with invalid variant property: %s', async (variant) => {
+    expect.assertions(1);
+    try {
+      await getPage({ identifier: 'identifier', variant }, getDefaultContent());
+    }
+    catch (err) {
+      expect(err.message).toMatch('<mg-message> prop "variant" must be one of:');
+    }
+  });
+  test('Should throw error with invalid delay property: 50ms', async () => {
+    expect.assertions(1);
+    try {
+      await getPage({ identifier: 'identifier', delay: 1 }, getDefaultContent());
+    }
+    catch (err) {
+      expect(err.message).toMatch('<mg-message> prop "delay" must be greater than 2 seconds.');
+    }
+  });
+  test('Should throw error when using prop "close-button" with an action slot', async () => {
+    expect.assertions(1);
+    try {
+      await getPage({ identifier: 'identifier', closeButton: true }, [
+        getDefaultContent(),
+        h("div", { slot: "actions", class: "mg-group-elements mg-group-elements--align-right" }, h("mg-button", null, "Primary"), h("mg-button", { variant: "secondary" }, "Secondary")),
+      ]);
+    }
+    catch (err) {
+      expect(err.message).toMatch('<mg-message> prop "close-button" can\'t be used with the actions slot.');
+    }
+  });
+  test('Should hide message on close button', async () => {
+    const args = { identifier: 'identifier', closeButton: true };
+    const page = await getPage(args, getDefaultContent());
+    const element = page.doc.querySelector('mg-message');
+    const button = element.shadowRoot.querySelector('mg-button');
+    jest.spyOn(page.rootInstance.componentHide, 'emit');
+    button.dispatchEvent(new CustomEvent('click', { bubbles: true }));
+    await page.waitForChanges();
+    expect(page.rootInstance.componentHide.emit).toHaveBeenCalledTimes(1);
+    expect(page.rootInstance.classCollection.join()).toContain('mg-message--hide');
+  });
+  test('Should hide message on delay', async () => {
+    const args = { identifier: 'identifier', delay: 2 };
+    const page = await getPage(args, getDefaultContent());
+    jest.spyOn(page.rootInstance.componentHide, 'emit');
+    jest.spyOn(page.rootInstance.componentShow, 'emit');
+    expect(page.rootInstance.classCollection.join()).not.toContain('mg-message--hide');
+    jest.advanceTimersByTime(args.delay * 1000);
+    expect(page.rootInstance.classCollection.join()).toContain('mg-message--hide');
+    expect(page.rootInstance.componentHide.emit).toHaveBeenCalledTimes(1);
+    page.rootInstance.hide = false;
+    await page.waitForChanges();
+    expect(page.rootInstance.classCollection.join()).not.toContain('mg-message--hide');
+    expect(page.rootInstance.componentShow.emit).toHaveBeenCalledTimes(1);
+    jest.advanceTimersByTime(args.delay * 1000);
+    expect(page.rootInstance.classCollection.join()).toContain('mg-message--hide');
+    expect(page.rootInstance.componentHide.emit).toHaveBeenCalledTimes(2);
+  });
+  test.each(['focus', 'mouse'])('Should manage event %s with delay', async (eventType) => {
+    const args = { identifier: 'identifier', delay: 2 };
+    const page = await getPage(args, getDefaultContent());
+    jest.spyOn(page.rootInstance.componentHide, 'emit');
+    jest.spyOn(page.rootInstance.componentShow, 'emit');
+    const element = page.doc.querySelector('mg-message');
+    expect(page.rootInstance.classCollection.join()).not.toContain('mg-message--hide');
+    jest.advanceTimersByTime((args.delay / 2) * 1000);
+    element.dispatchEvent(eventType === 'focus' ? new FocusEvent('focusin') : new MouseEvent('mouseenter'));
+    jest.advanceTimersByTime(args.delay * 1000);
+    expect(page.rootInstance.classCollection.join()).not.toContain('mg-message--hide');
+    element.dispatchEvent(eventType === 'focus' ? new FocusEvent('focusout') : new MouseEvent('mouseleave'));
+    jest.advanceTimersByTime(args.delay * 1000);
+    expect(page.rootInstance.classCollection.join()).toContain('mg-message--hide');
+    expect(page.rootInstance.componentHide.emit).toHaveBeenCalledTimes(1);
+  });
+});
+//# sourceMappingURL=mg-message.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-message.spec.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-message/test/mg-message.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { MgMessage } from '../mg-message';\nimport { variants } from '../mg-message.conf';\n\nconst getDefaultContent = () => (\n  <p>\n    <strong>Strong</strong> content!\n  </p>\n);\n\nconst getPage = (args, content) =>\n  newSpecPage({\n    components: [MgMessage],\n    template: () => <mg-message {...args}>{content}</mg-message>,\n  });\n\ndescribe('mg-message', () => {\n  describe.each(variants)('Should render a %s message', variant => {\n    test.each([\n      { identifier: 'identifier' },\n      { identifier: 'identifier', closeButton: true },\n      { identifier: 'identifier', closeButton: true, lang: 'fr' },\n      { identifier: 'identifier', closeButton: true, lang: 'xx' },\n    ])('with args %s', async args => {\n      const { root } = await getPage({ ...args, variant }, getDefaultContent());\n      expect(root).toMatchSnapshot();\n    });\n  });\n\n  test('Should replace classes on variant changes', async () => {\n    const page = await getPage({ identifier: 'identifier' }, getDefaultContent());\n    const element = page.doc.querySelector('mg-message');\n    let classInfo = element.shadowRoot.querySelector('.mg-message--info');\n\n    expect(classInfo).not.toBeNull();\n\n    element.variant = 'danger';\n    await page.waitForChanges();\n\n    classInfo = element.shadowRoot.querySelector('.mg-message--info');\n    const classDanger = element.shadowRoot.querySelector('.mg-message--danger');\n\n    expect(classInfo).toBeNull();\n    expect(classDanger).not.toBeNull();\n  });\n\n  test.each(['', 'blu'])('Should throw error with invalid variant property: %s', async variant => {\n    expect.assertions(1);\n    try {\n      await getPage({ identifier: 'identifier', variant }, getDefaultContent());\n    } catch (err) {\n      expect(err.message).toMatch('<mg-message> prop \"variant\" must be one of:');\n    }\n  });\n\n  test('Should throw error with invalid delay property: 50ms', async () => {\n    expect.assertions(1);\n    try {\n      await getPage({ identifier: 'identifier', delay: 1 }, getDefaultContent());\n    } catch (err) {\n      expect(err.message).toMatch('<mg-message> prop \"delay\" must be greater than 2 seconds.');\n    }\n  });\n\n  test('Should throw error when using prop \"close-button\" with an action slot', async () => {\n    expect.assertions(1);\n    try {\n      await getPage({ identifier: 'identifier', closeButton: true }, [\n        getDefaultContent(),\n        <div slot=\"actions\" class=\"mg-group-elements mg-group-elements--align-right\">\n          <mg-button>Primary</mg-button>\n          <mg-button variant=\"secondary\">Secondary</mg-button>\n        </div>,\n      ]);\n    } catch (err) {\n      expect(err.message).toMatch('<mg-message> prop \"close-button\" can\\'t be used with the actions slot.');\n    }\n  });\n\n  test('Should hide message on close button', async () => {\n    const args = { identifier: 'identifier', closeButton: true };\n    const page = await getPage(args, getDefaultContent());\n\n    const element = page.doc.querySelector('mg-message');\n    const button = element.shadowRoot.querySelector('mg-button');\n\n    jest.spyOn(page.rootInstance.componentHide, 'emit');\n\n    button.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n    await page.waitForChanges();\n\n    expect(page.rootInstance.componentHide.emit).toHaveBeenCalledTimes(1);\n    expect(page.rootInstance.classCollection.join()).toContain('mg-message--hide');\n  });\n\n  test('Should hide message on delay', async () => {\n    const args = { identifier: 'identifier', delay: 2 };\n    const page = await getPage(args, getDefaultContent());\n\n    jest.spyOn(page.rootInstance.componentHide, 'emit');\n    jest.spyOn(page.rootInstance.componentShow, 'emit');\n\n    expect(page.rootInstance.classCollection.join()).not.toContain('mg-message--hide');\n\n    jest.advanceTimersByTime(args.delay * 1000);\n\n    expect(page.rootInstance.classCollection.join()).toContain('mg-message--hide');\n    expect(page.rootInstance.componentHide.emit).toHaveBeenCalledTimes(1);\n\n    page.rootInstance.hide = false;\n    await page.waitForChanges();\n\n    expect(page.rootInstance.classCollection.join()).not.toContain('mg-message--hide');\n    expect(page.rootInstance.componentShow.emit).toHaveBeenCalledTimes(1);\n\n    jest.advanceTimersByTime(args.delay * 1000);\n\n    expect(page.rootInstance.classCollection.join()).toContain('mg-message--hide');\n    expect(page.rootInstance.componentHide.emit).toHaveBeenCalledTimes(2);\n  });\n\n  test.each(['focus', 'mouse'])('Should manage event %s with delay', async eventType => {\n    const args = { identifier: 'identifier', delay: 2 };\n    const page = await getPage(args, getDefaultContent());\n\n    jest.spyOn(page.rootInstance.componentHide, 'emit');\n    jest.spyOn(page.rootInstance.componentShow, 'emit');\n\n    const element = page.doc.querySelector('mg-message');\n\n    expect(page.rootInstance.classCollection.join()).not.toContain('mg-message--hide');\n\n    jest.advanceTimersByTime((args.delay / 2) * 1000);\n\n    element.dispatchEvent(eventType === 'focus' ? new FocusEvent('focusin') : new MouseEvent('mouseenter'));\n\n    jest.advanceTimersByTime(args.delay * 1000);\n\n    expect(page.rootInstance.classCollection.join()).not.toContain('mg-message--hide');\n\n    element.dispatchEvent(eventType === 'focus' ? new FocusEvent('focusout') : new MouseEvent('mouseleave'));\n\n    jest.advanceTimersByTime(args.delay * 1000);\n\n    expect(page.rootInstance.classCollection.join()).toContain('mg-message--hide');\n    expect(page.rootInstance.componentHide.emit).toHaveBeenCalledTimes(1);\n  });\n});\n"]}

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

@@ -2,3 +2,4 @@
  * List of all possibles dialog roles
  */
 export const dialogRoles = ['dialog', 'alertdialog'];
+//# sourceMappingURL=mg-modal.conf.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-modal.conf.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-modal/mg-modal.conf.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,QAAQ,EAAE,aAAa,CAAU,CAAC","sourcesContent":["/**\n * List of all possibles dialog roles\n */\nexport const dialogRoles = ['dialog', 'alertdialog'] as const;\n\n/**\n * DialogRole type from dialog roles\n */\nexport type DialogRoleType = (typeof dialogRoles)[number];\n"]}

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

@@ -1,7 +1,7 @@
-import { h } from '@stencil/core';
-import { createID, ClassList, focusableElements } from '../../../utils/components.utils';
-import { initLocales } from '../../../locales';
-import { dialogRoles } from './mg-modal.conf';
+import { h } from "@stencil/core";
+import { createID, ClassList, focusableElements } from "../../../utils/components.utils";
+import { initLocales } from "../../../locales";
+import { dialogRoles } from "./mg-modal.conf";
 export class MgModal {
   constructor() {
     /************
@@ -201,7 +201,8 @@ export class MgModal {
           "references": {
             "DialogRoleType": {
               "location": "import",
-              "path": "./mg-modal.conf"
+              "path": "./mg-modal.conf",
+              "id": "src/components/molecules/mg-modal/mg-modal.conf.ts::DialogRoleType"
             }
           }
         },
@@ -332,3 +333,4 @@ export class MgModal {
       }];
   }
 }
+//# sourceMappingURL=mg-modal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-modal.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-modal/mg-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Watch, Element, Event, EventEmitter, Listen } from '@stencil/core';\nimport { createID, ClassList, focusableElements } from '../../../utils/components.utils';\nimport { initLocales } from '../../../locales';\nimport { DialogRoleType, dialogRoles } from './mg-modal.conf';\n\n@Component({\n  tag: 'mg-modal',\n  styleUrl: 'mg-modal.scss',\n  shadow: true,\n})\nexport class MgModal {\n  /************\n   * Internal *\n   ************/\n\n  // Modal focusable elements\n  private modalFocusableElements: HTMLElement[] = [];\n  private closeButtonElement: HTMLMgButtonElement;\n\n  // Classes\n  private readonly classHide = 'mg-modal--hide';\n\n  // IDs\n  private titleId = '';\n\n  // Locales\n  private messages;\n\n  // body overflow default\n  private bodyOverflow: string;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgModalElement;\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-modal');\n\n  /**\n   * Modal dialog role.\n   */\n  @Prop() dialogRole: DialogRoleType = dialogRoles[0];\n  @Watch('dialogRole')\n  validateDialogRole(newValue: MgModal['dialogRole']): void {\n    if (!dialogRoles.includes(newValue)) throw new Error(`<mg-modal> prop \"dialogRole\" must be one of: ${dialogRoles.join(', ')}.`);\n  }\n\n  /**\n   * Displayed modal title\n   */\n  @Prop() modalTitle!: string;\n  @Watch('modalTitle')\n  validateModalTitle(newValue: MgModal['modalTitle']): void {\n    if (typeof newValue !== 'string' || newValue.trim() === '') {\n      throw new Error('<mg-modal> prop \"modalTitle\" is required.');\n    }\n  }\n\n  /**\n   * Define if modal has a cross button\n   */\n  @Prop() closeButton = false;\n\n  /**\n   * Define if modal is hidden\n   */\n  @Prop({ mutable: true }) hide: boolean;\n  @Watch('hide')\n  validateHide(newValue: MgModal['hide']): void {\n    if (newValue) {\n      this.componentHide.emit();\n      this.classCollection.add(this.classHide);\n      document.body.style.overflow = this.bodyOverflow;\n      // reset focus handlers\n      this.getLastFocusableElement()?.removeEventListener('keydown', this.handleLastFocusableElement);\n      if (this.modalFocusableElements.length > 0) this.modalFocusableElements[0].removeEventListener('keydown', this.handleFirstFocusableElement);\n    } else if (newValue === false) {\n      this.componentShow.emit();\n      this.classCollection.delete(this.classHide);\n      document.body.style.overflow = 'hidden';\n      this.setFocus();\n    }\n  }\n\n  /**\n   * Define if component is using actions slot\n   */\n  @State() hasActions = false;\n\n  /**\n   * Define if component is using content slot\n   */\n  @State() hasContent = false;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-modal']);\n\n  /**\n   * Emmited event when modal is diplayed\n   */\n  @Event({ eventName: 'component-show' }) componentShow: EventEmitter<string>;\n\n  /**\n   * Emmited event when modal is hidden\n   */\n  @Event({ eventName: 'component-hide' }) componentHide: EventEmitter<string>;\n\n  /**\n   * Handle 'escape' key down\n   * @param event - keydown event\n   */\n  @Listen('keydown', {\n    target: 'window',\n  })\n  handleKeyDown(event: KeyboardEvent): void {\n    // we can use 'Escape button\" when this not a blocking modal, induced by closeButton value.\n    if (this.closeButton && event.key === 'Escape') {\n      this.hide = true;\n    }\n  }\n\n  /**\n   * Handle last focusable element\n   * @param event - keyboard event\n   */\n  private handleLastFocusableElement = (event): void => {\n    if (event.key === 'Tab' && !event.shiftKey) {\n      event.preventDefault();\n      this.modalFocusableElements[0].focus();\n    }\n  };\n\n  /**\n   * Handle first focusable element\n   * @param event - keyboard event\n   */\n  private handleFirstFocusableElement = (event): void => {\n    if (event.key === 'Tab' && event.shiftKey) {\n      event.preventDefault();\n      this.getLastFocusableElement().focus();\n    }\n  };\n\n  /**\n   * Get last focusablmeElement\n   * @returns last modal focusable element\n   */\n  private getLastFocusableElement = (): HTMLElement | null => (this.modalFocusableElements.length > 0 ? this.modalFocusableElements[this.modalFocusableElements.length - 1] : null);\n\n  /**\n   * Method to manage focus on modal focusable elements\n   */\n  private setFocus = (): void => {\n    // Get all focusable elements\n    const allFocusableElements = Array.from(this.element.querySelectorAll(focusableElements));\n    // If at least one\n    if (allFocusableElements.length > 0) {\n      this.modalFocusableElements = allFocusableElements.reduce((acc, focusableElement) => {\n        acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(focusableElements) || focusableElement : focusableElement);\n        return acc;\n      }, []);\n      // When close button is enabled it's the first focusable element.\n      if (this.closeButton && this.closeButtonElement !== undefined) {\n        this.modalFocusableElements.unshift(this.closeButtonElement);\n      }\n      // Add event listener on last element\n      this.getLastFocusableElement().addEventListener('keydown', this.handleLastFocusableElement);\n      // Add event listener on first element (case shift + tab)\n      this.modalFocusableElements[0].addEventListener('keydown', this.handleFirstFocusableElement);\n    }\n  };\n\n  /*************\n   * Handlers *\n   *************/\n\n  /**\n   * Handle close button\n   */\n  private handleClose = (): void => {\n    this.hide = true;\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Store body overflow\n    this.bodyOverflow = document.body.style.overflow;\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n    // Validate\n    this.hasActions = this.element.querySelector('[slot=\"actions\"]') !== null;\n    this.hasContent = this.element.querySelector('[slot=\"content\"]') !== null;\n    this.titleId = `${this.identifier}-title`;\n    this.validateModalTitle(this.modalTitle);\n    this.validateHide(this.hide);\n    this.validateDialogRole(this.dialogRole);\n  }\n\n  /**\n   * Add observer on component to set focus when displayed\n   */\n  componentDidLoad(): void {\n    new MutationObserver(mutationList => {\n      // as mutation.target is null on chrome and '' or undefined on firefox we test both with the 'aria-hidden' attribute mutation\n      if (mutationList.some(mutation => mutation.attributeName === 'aria-hidden' && ['', null, undefined].includes((mutation.target as HTMLElement).ariaHidden))) {\n        // Set focus on first element\n        this.modalFocusableElements[0].focus();\n      }\n    }).observe(this.element.shadowRoot.getElementById(this.identifier), { attributes: true });\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <div role={this.dialogRole} id={this.identifier} class={this.classCollection.join()} tabindex=\"-1\" aria-labelledby={this.titleId} aria-modal=\"true\" aria-hidden={this.hide}>\n        <mg-card>\n          <div class=\"mg-modal__dialog\">\n            <header class=\"mg-modal__header\">\n              {this.closeButton && (\n                <span class=\"mg-modal__close-button\">\n                  <mg-button\n                    identifier={`${this.identifier}-close-button`}\n                    is-icon\n                    variant=\"flat\"\n                    label={this.messages.modal.closeButton}\n                    onClick={this.handleClose}\n                    ref={(el: HTMLMgButtonElement) => {\n                      if (el !== null) {\n                        // store closeButton Element\n                        this.closeButtonElement = el;\n                        // add close button element to modalFocusableElements when it is render\n                        this.modalFocusableElements.unshift(this.closeButtonElement);\n                      }\n                    }}\n                  >\n                    <mg-icon icon=\"cross\"></mg-icon>\n                  </mg-button>\n                </span>\n              )}\n              <h1 class=\"mg-modal__title\" id={this.titleId}>\n                {this.modalTitle}\n              </h1>\n            </header>\n\n            {this.hasContent && (\n              <article class=\"mg-modal__content\">\n                <slot name=\"content\"></slot>\n              </article>\n            )}\n\n            {this.hasActions && (\n              <footer class=\"mg-modal__footer\">\n                <slot name=\"actions\"></slot>\n              </footer>\n            )}\n          </div>\n        </mg-card>\n      </div>\n    );\n  }\n}\n"]}