@mgdis/mg-components 5.16.0 → 5.17.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-action-more.e2e.playwright.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-action-more/test/mg-action-more.e2e.playwright.ts"],"names":[],"mappings":"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","sourcesContent":["import { setPageContent, expect, describe, testEach, PageType, test } from '../../../../utils/playwright.e2e.test.utils';\nimport { renderAttributes, renderProperties } from '../../../../utils/e2e.test.utils';\nimport { createID } from '../../../../utils/components.utils';\nimport { Status } from '../../menu/mg-menu-item/mg-menu-item.conf';\nimport { MgActionMore } from '../mg-action-more';\n\nconst createHTML = (args: MgActionMoreType, id = `mg-action-more-${createID()}`) =>\n  `<style>body {padding-left: 2rem;} </style><mg-action-more ${renderAttributes(args)} id=\"${id}\"></mg-action-more><script>${renderProperties(args, `#${id}`)}</script>`;\n\nconst mouseEventHandler = () => 'hello batman';\n\nexport type MgActionMoreType = Partial<MgActionMore>;\n\nconst items: MgActionMoreType['items'] = [\n  {\n    label: 'batman',\n    mouseEventHandler,\n  },\n  {\n    label: 'robin',\n    mouseEventHandler,\n    status: Status.HIDDEN,\n  },\n  {\n    label: 'joker',\n    mouseEventHandler,\n    badge: {\n      value: 2,\n      label: 'badge',\n    },\n  },\n  {\n    label: 'bane',\n    mouseEventHandler,\n    icon: 'user',\n    href: '#',\n  },\n];\n\ndescribe('mg-action-more', () => {\n  describe('render', () => {\n    testEach([\n      {\n        items,\n      },\n      {\n        items,\n        button: {\n          label: 'dc-comics',\n          variant: 'primary',\n          isIcon: false,\n        },\n        icon: {\n          icon: 'plus',\n        },\n      },\n      {\n        items,\n        displayChevron: true,\n        icon: {\n          icon: 'ellipsis',\n        },\n        button: {\n          variant: 'flat',\n          isIcon: false,\n        },\n      },\n      {\n        items,\n        displayChevron: true,\n        button: {\n          variant: 'flat',\n          isIcon: false,\n        },\n      },\n      {\n        items,\n        displayChevron: false,\n        button: {\n          variant: 'flat',\n          isIcon: false,\n        },\n      },\n      {\n        items,\n        displayChevron: false,\n        icon: {\n          icon: 'ellipsis',\n        },\n        button: {\n          variant: 'flat',\n          isIcon: false,\n        },\n      },\n    ])('Should render %s', async (page: PageType, args: MgActionMoreType) => {\n      await setPageContent(page, createHTML(args));\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n    });\n  });\n\n  describe('navigation', () => {\n    testEach(['mouse', 'keyboard'])('should toggle button menu, case %s', async (page: PageType, navigation) => {\n      await setPageContent(page, createHTML({ items }), { width: 130, height: 200 });\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n\n      if (navigation === 'mouse') {\n        const mgButton = await page.locator('mg-action-more mg-button');\n        await mgButton.click();\n        await expect(page.locator('body')).toHaveScreenshot();\n\n        const mgMenuItem = await page.locator('mg-menu-item:first-of-type');\n        await mgMenuItem.click();\n        await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n      } else {\n        for (const [index, key] of ['Tab', 'Enter', 'Tab', 'Enter'].entries()) {\n          await page.keyboard.press(key);\n          await expect(page.locator([0, 3].includes(index) ? '.e2e-screenshot' : 'body')).toHaveScreenshot();\n        }\n      }\n    });\n\n    test('should toggle button chevron menu', async ({ page }) => {\n      await setPageContent(\n        page,\n        createHTML({\n          items,\n          displayChevron: true,\n          button: {\n            isIcon: false,\n            variant: 'secondary',\n          },\n        }),\n        { width: 130, height: 200 },\n      );\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n\n      const mgButton = await page.locator('mg-action-more mg-button');\n      await mgButton.click();\n\n      await page.waitForTimeout(300); // wait chevron animation ended\n\n      await expect(page.locator('body')).toHaveScreenshot();\n    });\n  });\n});\n"]}

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

@@ -0,0 +1,187 @@
+import { h } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { forcePopoverId, mockConsoleError, setupResizeObserverMock } from "../../../../utils/unit.test.utils";
+import { Status } from "../../menu/mg-menu-item/mg-menu-item.conf";
+import { MgButton } from "../../../atoms/mg-button/mg-button";
+import { MgPopover } from "../../mg-popover/mg-popover";
+import { MgActionMore } from "../mg-action-more";
+import { MgMenu } from "../../menu/mg-menu/mg-menu";
+import { MgMenuItem } from "../../menu/mg-menu-item/mg-menu-item";
+import { MgPopoverContent } from "../../mg-popover/mg-popover-content/mg-popover-content";
+mockConsoleError();
+const getPage = async (args) => {
+  const page = await newSpecPage({
+    components: [MgActionMore, MgPopover, MgPopoverContent, MgButton, MgMenu, MgMenuItem],
+    template: () => h("mg-action-more", Object.assign({}, args)),
+  });
+  Array.from(page.doc.querySelectorAll('mg-action-more')).forEach((item, index) => {
+    const mgPopoverIdentifier = `mg-popover-test_${index}`;
+    item.dataset.mgPopoverGuard = mgPopoverIdentifier;
+    forcePopoverId(item, mgPopoverIdentifier, 'mg-button');
+  });
+  return page;
+};
+const mouseEventHandler = jest.fn();
+const items = [
+  {
+    label: 'batman',
+    mouseEventHandler,
+  },
+  {
+    label: 'robin',
+    mouseEventHandler,
+    status: Status.HIDDEN,
+  },
+  {
+    label: 'joker',
+    mouseEventHandler,
+    badge: {
+      value: 2,
+      label: 'badge',
+    },
+  },
+  {
+    label: 'bane',
+    mouseEventHandler,
+    icon: 'user',
+    href: '#',
+  },
+];
+Object.defineProperty(window, 'frames', {
+  value: { length: 0 },
+});
+describe('mg-action-more', () => {
+  beforeEach(() => {
+    setupResizeObserverMock({
+      observe: () => null,
+      disconnect: () => null,
+    });
+  });
+  describe.each([
+    {
+      items,
+    },
+    {
+      items,
+      button: {
+        label: 'dc-comics',
+        variant: 'primary',
+        isIcon: false,
+      },
+    },
+    {
+      items,
+      displayChevron: true,
+      button: {
+        variant: 'flat',
+        isIcon: false,
+      },
+    },
+    {
+      items,
+      displayChevron: true,
+      icon: {
+        icon: 'ellipsis',
+      },
+      button: {
+        variant: 'flat',
+        isIcon: false,
+      },
+    },
+    {
+      items,
+      displayChevron: false,
+      icon: {
+        icon: 'ellipsis',
+      },
+      button: {
+        variant: 'flat',
+        isIcon: false,
+      },
+    },
+    {
+      items,
+      displayChevron: false,
+      button: {
+        variant: 'flat',
+        isIcon: false,
+      },
+    },
+  ])('render', args => {
+    test(`Should render with args ${args}`, async () => {
+      const { root } = await getPage(args);
+      expect(root).toMatchSnapshot();
+    });
+    test('Should toggle menu on click', async () => {
+      const page = await getPage(args);
+      expect(page.root).toMatchSnapshot();
+      const mgMoreAction = page.doc.querySelector('mg-action-more');
+      const mgButton = mgMoreAction.shadowRoot.querySelector('mg-button');
+      mgButton.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+    });
+  });
+  describe('errors', () => {
+    test.each([
+      { args: {}, error: `<mg-action-more> prop "items" is required and all values must be the same type, MgActionMoreItemType.` },
+      { args: { items: ['batman'] }, error: `<mg-action-more> prop "items" is required and all values must be the same type, MgActionMoreItemType.` },
+      { args: { items: [{ label: 'batman' }] }, error: `<mg-action-more> prop "items" is required and all values must be the same type, MgActionMoreItemType.` },
+      {
+        args: { items: [{ label: 'batman', mouseEventHandler: 'batman' }] },
+        error: `<mg-action-more> prop "items" is required and all values must be the same type, MgActionMoreItemType.`,
+      },
+      { args: { items: [{ mouseEventHandler: 'batman' }] }, error: `<mg-action-more> prop "items" is required and all values must be the same type, MgActionMoreItemType.` },
+      { args: { items: [{ label: 'batman', mouseEventHandler }], button: {} }, error: `<mg-action-more> prop button must match MgActionMoreButtonType.` },
+      { args: { items: [{ label: 'batman', mouseEventHandler }], button: { variant: 'primary' } }, error: `<mg-action-more> prop button must match MgActionMoreButtonType.` },
+      { args: { items: [{ label: 'batman', mouseEventHandler }], button: { isIcon: true } }, error: `<mg-action-more> prop button must match MgActionMoreButtonType.` },
+      { args: { items: [{ label: 'batman', mouseEventHandler }], icon: 'user' }, error: `<mg-action-more> prop icon must match MgActionMoreIconType.` },
+      {
+        args: { items: [{ label: 'batman', mouseEventHandler }], displayChevron: true },
+        error: `<mg-action-more> prop "displayChevron" can't be used with a 'button" prop "isIcon" attribute.`,
+      },
+      {
+        args: { items: [{ label: 'batman', mouseEventHandler }], button: { isIcon: true, variant: 'flat' }, displayChevron: true },
+        error: `<mg-action-more> prop "displayChevron" can't be used with a 'button" prop "isIcon" attribute.`,
+      },
+    ])('with args %s', async ({ args, error }) => {
+      expect.assertions(1);
+      try {
+        await getPage(args);
+      }
+      catch (err) {
+        expect(err.message).toMatch(error);
+      }
+    });
+  });
+  describe('navigation', () => {
+    test(`Should run item mouseEventHandler by clicking on menu-item`, async () => {
+      const page = await getPage({ items });
+      expect(page.root).toMatchSnapshot();
+      const mgMoreAction = page.doc.querySelector('mg-action-more');
+      const mgButton = mgMoreAction.shadowRoot.querySelector('mg-button');
+      mgButton.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+      const mgMenuItem = mgMoreAction.shadowRoot.querySelector('mg-menu-item');
+      mgMenuItem.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+      await page.waitForChanges();
+      expect(mouseEventHandler).toHaveBeenCalled();
+      expect(page.root).toMatchSnapshot();
+    });
+    test(`Should update expanded when popover display change`, async () => {
+      const page = await getPage({ items, displayChevron: true, button: { variant: 'flat', isIcon: false } });
+      expect(page.root).toMatchSnapshot();
+      const mgMoreAction = page.doc.querySelector('mg-action-more');
+      const mgButton = mgMoreAction.shadowRoot.querySelector('mg-button');
+      mgButton.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+      const mgPopover = mgMoreAction.shadowRoot.querySelector('mg-popover');
+      mgPopover.dispatchEvent(new CustomEvent('display-change', { detail: false }));
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+    });
+  });
+});
+//# sourceMappingURL=mg-action-more.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-action-more.spec.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-action-more/test/mg-action-more.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { forcePopoverId, mockConsoleError, setupResizeObserverMock } from '../../../../utils/unit.test.utils';\nimport { Status } from '../../menu/mg-menu-item/mg-menu-item.conf';\nimport { MgButton } from '../../../atoms/mg-button/mg-button';\nimport { MgPopover } from '../../mg-popover/mg-popover';\nimport { MgActionMore } from '../mg-action-more';\nimport { MgMenu } from '../../menu/mg-menu/mg-menu';\nimport { MgMenuItem } from '../../menu/mg-menu-item/mg-menu-item';\nimport { MgPopoverContent } from '../../mg-popover/mg-popover-content/mg-popover-content';\n\nmockConsoleError();\n\nconst getPage = async args => {\n  const page = await newSpecPage({\n    components: [MgActionMore, MgPopover, MgPopoverContent, MgButton, MgMenu, MgMenuItem],\n    template: () => <mg-action-more {...args}></mg-action-more>,\n  });\n\n  Array.from(page.doc.querySelectorAll('mg-action-more')).forEach((item, index) => {\n    const mgPopoverIdentifier = `mg-popover-test_${index}`;\n    item.dataset.mgPopoverGuard = mgPopoverIdentifier;\n    forcePopoverId(item, mgPopoverIdentifier, 'mg-button');\n  });\n\n  return page;\n};\n\nconst mouseEventHandler = jest.fn();\n\nconst items = [\n  {\n    label: 'batman',\n    mouseEventHandler,\n  },\n  {\n    label: 'robin',\n    mouseEventHandler,\n    status: Status.HIDDEN,\n  },\n  {\n    label: 'joker',\n    mouseEventHandler,\n    badge: {\n      value: 2,\n      label: 'badge',\n    },\n  },\n  {\n    label: 'bane',\n    mouseEventHandler,\n    icon: 'user',\n    href: '#',\n  },\n];\n\nObject.defineProperty(window, 'frames', {\n  value: { length: 0 },\n});\n\ndescribe('mg-action-more', () => {\n  beforeEach(() => {\n    setupResizeObserverMock({\n      observe: () => null,\n      disconnect: () => null,\n    });\n  });\n  describe.each([\n    {\n      items,\n    },\n    {\n      items,\n      button: {\n        label: 'dc-comics',\n        variant: 'primary',\n        isIcon: false,\n      },\n    },\n    {\n      items,\n      displayChevron: true,\n      button: {\n        variant: 'flat',\n        isIcon: false,\n      },\n    },\n    {\n      items,\n      displayChevron: true,\n      icon: {\n        icon: 'ellipsis',\n      },\n      button: {\n        variant: 'flat',\n        isIcon: false,\n      },\n    },\n    {\n      items,\n      displayChevron: false,\n      icon: {\n        icon: 'ellipsis',\n      },\n      button: {\n        variant: 'flat',\n        isIcon: false,\n      },\n    },\n    {\n      items,\n      displayChevron: false,\n      button: {\n        variant: 'flat',\n        isIcon: false,\n      },\n    },\n  ])('render', args => {\n    test(`Should render with args ${args}`, async () => {\n      const { root } = await getPage(args);\n      expect(root).toMatchSnapshot();\n    });\n\n    test('Should toggle menu on click', async () => {\n      const page = await getPage(args);\n      expect(page.root).toMatchSnapshot();\n\n      const mgMoreAction = page.doc.querySelector('mg-action-more');\n      const mgButton = mgMoreAction.shadowRoot.querySelector('mg-button');\n      mgButton.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n    });\n  });\n\n  describe('errors', () => {\n    test.each([\n      { args: {}, error: `<mg-action-more> prop \"items\" is required and all values must be the same type, MgActionMoreItemType.` },\n      { args: { items: ['batman'] }, error: `<mg-action-more> prop \"items\" is required and all values must be the same type, MgActionMoreItemType.` },\n      { args: { items: [{ label: 'batman' }] }, error: `<mg-action-more> prop \"items\" is required and all values must be the same type, MgActionMoreItemType.` },\n      {\n        args: { items: [{ label: 'batman', mouseEventHandler: 'batman' }] },\n        error: `<mg-action-more> prop \"items\" is required and all values must be the same type, MgActionMoreItemType.`,\n      },\n      { args: { items: [{ mouseEventHandler: 'batman' }] }, error: `<mg-action-more> prop \"items\" is required and all values must be the same type, MgActionMoreItemType.` },\n      { args: { items: [{ label: 'batman', mouseEventHandler }], button: {} }, error: `<mg-action-more> prop button must match MgActionMoreButtonType.` },\n      { args: { items: [{ label: 'batman', mouseEventHandler }], button: { variant: 'primary' } }, error: `<mg-action-more> prop button must match MgActionMoreButtonType.` },\n      { args: { items: [{ label: 'batman', mouseEventHandler }], button: { isIcon: true } }, error: `<mg-action-more> prop button must match MgActionMoreButtonType.` },\n      { args: { items: [{ label: 'batman', mouseEventHandler }], icon: 'user' }, error: `<mg-action-more> prop icon must match MgActionMoreIconType.` },\n      {\n        args: { items: [{ label: 'batman', mouseEventHandler }], displayChevron: true },\n        error: `<mg-action-more> prop \"displayChevron\" can't be used with a 'button\" prop \"isIcon\" attribute.`,\n      },\n      {\n        args: { items: [{ label: 'batman', mouseEventHandler }], button: { isIcon: true, variant: 'flat' }, displayChevron: true },\n        error: `<mg-action-more> prop \"displayChevron\" can't be used with a 'button\" prop \"isIcon\" attribute.`,\n      },\n    ])('with args %s', async ({ args, error }) => {\n      expect.assertions(1);\n      try {\n        await getPage(args);\n      } catch (err) {\n        expect(err.message).toMatch(error);\n      }\n    });\n  });\n\n  describe('navigation', () => {\n    test(`Should run item mouseEventHandler by clicking on menu-item`, async () => {\n      const page = await getPage({ items });\n      expect(page.root).toMatchSnapshot();\n\n      const mgMoreAction = page.doc.querySelector('mg-action-more');\n      const mgButton = mgMoreAction.shadowRoot.querySelector('mg-button');\n      mgButton.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n\n      const mgMenuItem = mgMoreAction.shadowRoot.querySelector('mg-menu-item');\n      mgMenuItem.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n\n      await page.waitForChanges();\n\n      expect(mouseEventHandler).toHaveBeenCalled();\n      expect(page.root).toMatchSnapshot();\n    });\n\n    test(`Should update expanded when popover display change`, async () => {\n      const page = await getPage({ items, displayChevron: true, button: { variant: 'flat', isIcon: false } });\n      expect(page.root).toMatchSnapshot();\n\n      const mgMoreAction = page.doc.querySelector('mg-action-more');\n      const mgButton = mgMoreAction.shadowRoot.querySelector('mg-button');\n      mgButton.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n\n      const mgPopover = mgMoreAction.shadowRoot.querySelector('mg-popover');\n\n      mgPopover.dispatchEvent(new CustomEvent('display-change', { detail: false }));\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n    });\n  });\n});\n"]}

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

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 export class MgDetails {
   constructor() {
     /**
@@ -154,3 +154,4 @@ export class MgDetails {
       }];
   }
 }
+//# sourceMappingURL=mg-details.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-details.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-details/mg-details.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAO/E,MAAM,OAAO,SAAS;;IAgDpB;;OAEG;IACK,iBAAY,GAAG,GAAS,EAAE;MAChC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;IACpC,CAAC,CAAC;;;uBArBoB,KAAK;oBAKS,KAAK;;EAdzC,cAAc,CAAC,QAAgB;IAC7B,IAAI,QAAQ,KAAK,SAAS,IAAI,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;MACpD,MAAM,IAAI,KAAK,CAAC,sEAAsE,CAAC,CAAC;KACzF;EACH,CAAC;EAYD,cAAc,CAAC,QAAiB;IAC9B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;EACrC,CAAC;EAcD;;iBAEe;EAEf;;KAEG;EACH,iBAAiB;IACf,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IACvC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;EACzC,CAAC;EAED;;;KAGG;EACH,MAAM;IACJ,OAAO,CACL,eAAS,KAAK,EAAC,YAAY,EAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAsB,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;MAChI;QACE,YAAM,IAAI,EAAC,SAAS,GAAQ;QAC5B,YAAM,KAAK,EAAC,oBAAoB;UAC9B,eAAS,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,yBAAyB,EAAE,IAAI,EAAE,kCAAkC,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAY;UAClJ,YAAM,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,WAAW,EAAE,IAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAQ,CACvG,CACC;MACV,WAAK,KAAK,EAAC,qBAAqB;QAC9B,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACE,CACX,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'mg-details',\n  styleUrl: 'mg-details.scss',\n  shadow: true,\n})\nexport class MgDetails {\n  /************\n   * Internal *\n   ************/\n\n  // HTML selector\n  private details: HTMLDetailsElement;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Displayed title when details are closed\n   */\n  @Prop() toggleClosed!: string;\n\n  /**\n   * Displayed title when details are opened\n   */\n  @Prop() toggleOpened!: string;\n  @Watch('toggleClosed')\n  @Watch('toggleOpened')\n  validateTitles(newValue: string): void {\n    if (newValue === undefined || newValue.trim() === '') {\n      throw new Error('<mg-details> prop \"toggleClosed\" and \"toggleOpened\" must be defined.');\n    }\n  }\n\n  /**\n   * Hide summary element\n   */\n  @Prop() hideSummary = false;\n\n  /**\n   * Define if details are diplayed\n   */\n  @Prop({ mutable: true }) expanded = false;\n  @Watch('expanded')\n  handleExpanded(newValue: boolean): void {\n    this.expandedChange.emit(newValue);\n  }\n\n  /**\n   * Emmited event when expanded change\n   */\n  @Event({ eventName: 'expanded-change' }) expandedChange: EventEmitter<boolean>;\n\n  /**\n   * Handle details toggle\n   */\n  private handleToggle = (): void => {\n    this.expanded = this.details.open;\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    this.validateTitles(this.toggleClosed);\n    this.validateTitles(this.toggleOpened);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <details class=\"mg-details\" onToggle={this.handleToggle} open={this.expanded} ref={(el: HTMLDetailsElement) => (this.details = el)}>\n        <summary>\n          <slot name=\"summary\"></slot>\n          <span class=\"mg-details__toggle\">\n            <mg-icon icon=\"chevron-up\" size=\"small\" class={{ 'mg-details__toggle-icon': true, 'mg-details__toggle-icon--reverse': !this.expanded }}></mg-icon>\n            <span class={{ 'sr-only': this.hideSummary }}>{this.expanded ? this.toggleOpened : this.toggleClosed}</span>\n          </span>\n        </summary>\n        <div class=\"mg-details__details\">\n          <slot name=\"details\"></slot>\n        </div>\n      </details>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,30 @@
+import { setPageContent, describe, testEach, expect, test } from "../../../../utils/playwright.e2e.test.utils";
+import { renderAttributes } from "../../../../utils/e2e.test.utils";
+const content = '<span slot="summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </span><p slot="details">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.</p>';
+const baseArgs = { toggleClosed: 'Show details', toggleOpened: 'Hide details' };
+const htmlContent = (args, style) => `<style>*, *:before, *:after { box-sizing: border-box; } .e2e-screenshot { width: 100%; } ${style}</style><mg-details ${renderAttributes(args)}>${content}</mg-details>`;
+describe('mg-details', () => {
+  testEach([{}, { 'hide-summary': '' }])('Should toggle details %s', async (page, args) => {
+    await setPageContent(page, htmlContent(Object.assign(Object.assign({}, baseArgs), args)));
+    await page.setViewportSize({ width: 700, height: 100 });
+    await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Space');
+    await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+  });
+  test('Should not render toggle text when window size is under 700px', async ({ page }) => {
+    await setPageContent(page, htmlContent(Object.assign({}, baseArgs)));
+    await page.setViewportSize({ width: 650, height: 100 });
+    await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+  });
+  testEach([0, 5])('Should update space (%s) between summary and details', async (page, args) => {
+    await setPageContent(page, htmlContent(Object.assign({}, baseArgs), `mg-details {
+        --mg-details-spacing: ${args}rem;
+      })`));
+    await page.setViewportSize({ width: 700, height: 100 });
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Space');
+    await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+  });
+});
+//# sourceMappingURL=mg-details.e2e.playwright.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-details.e2e.playwright.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-details/test/mg-details.e2e.playwright.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAY,IAAI,EAAE,MAAM,6CAA6C,CAAC;AACzH,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAEpE,MAAM,OAAO,GACX,ifAAif,CAAC;AAEpf,MAAM,QAAQ,GAAG,EAAE,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,cAAc,EAAE,CAAC;AAEhF,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,KAAM,EAAE,EAAE,CACnC,4FAA4F,KAAK,uBAAuB,gBAAgB,CAAC,IAAI,CAAC,IAAI,OAAO,eAAe,CAAC;AAE3K,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;EAC1B,QAAQ,CAAC,CAAC,EAAE,EAAE,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,0BAA0B,EAAE,KAAK,EAAE,IAAc,EAAE,IAAY,EAAE,EAAE;IACxG,MAAM,cAAc,CAAC,IAAI,EAAE,WAAW,iCAAM,QAAQ,GAAK,IAAI,EAAG,CAAC,CAAC;IAElE,MAAM,IAAI,CAAC,eAAe,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;IAExD,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;IAEjE,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACjC,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAEnC,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;EACnE,CAAC,CAAC,CAAC;EAEH,IAAI,CAAC,+DAA+D,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;IACvF,MAAM,cAAc,CAAC,IAAI,EAAE,WAAW,mBAAM,QAAQ,EAAG,CAAC,CAAC;IAEzD,MAAM,IAAI,CAAC,eAAe,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;IAExD,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;EACnE,CAAC,CAAC,CAAC;EAEH,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,sDAAsD,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE;IAC5F,MAAM,cAAc,CAClB,IAAI,EACJ,WAAW,mBACJ,QAAQ,GACb;gCACwB,IAAI;SAC3B,CACF,CACF,CAAC;IAEF,MAAM,IAAI,CAAC,eAAe,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;IAExD,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACjC,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAEnC,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;EACnE,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { setPageContent, describe, testEach, expect, PageType, test } from '../../../../utils/playwright.e2e.test.utils';\nimport { renderAttributes } from '../../../../utils/e2e.test.utils';\n\nconst content =\n  '<span slot=\"summary\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </span><p slot=\"details\">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.</p>';\n\nconst baseArgs = { toggleClosed: 'Show details', toggleOpened: 'Hide details' };\n\nconst htmlContent = (args, style?) =>\n  `<style>*, *:before, *:after { box-sizing: border-box; } .e2e-screenshot { width: 100%; } ${style}</style><mg-details ${renderAttributes(args)}>${content}</mg-details>`;\n\ndescribe('mg-details', () => {\n  testEach([{}, { 'hide-summary': '' }])('Should toggle details %s', async (page: PageType, args: object) => {\n    await setPageContent(page, htmlContent({ ...baseArgs, ...args }));\n\n    await page.setViewportSize({ width: 700, height: 100 });\n\n    await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n\n    await page.keyboard.press('Tab');\n    await page.keyboard.press('Space');\n\n    await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n  });\n\n  test('Should not render toggle text when window size is under 700px', async ({ page }) => {\n    await setPageContent(page, htmlContent({ ...baseArgs }));\n\n    await page.setViewportSize({ width: 650, height: 100 });\n\n    await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n  });\n\n  testEach([0, 5])('Should update space (%s) between summary and details', async (page, args) => {\n    await setPageContent(\n      page,\n      htmlContent(\n        { ...baseArgs },\n        `mg-details {\n        --mg-details-spacing: ${args}rem;\n      })`,\n      ),\n    );\n\n    await page.setViewportSize({ width: 700, height: 100 });\n\n    await page.keyboard.press('Tab');\n    await page.keyboard.press('Space');\n\n    await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n  });\n});\n"]}

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

@@ -0,0 +1,42 @@
+import { h } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { MgDetails } from "../mg-details";
+const getPage = args => newSpecPage({
+  components: [MgDetails],
+  template: () => (h("mg-details", Object.assign({}, args), h("span", { slot: "summary" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), h("p", { slot: "details" }, "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."))),
+});
+describe('mg-details', () => {
+  test.each([
+    { toggleClosed: 'Show details', toggleOpened: 'Hide details' },
+    { toggleClosed: 'Show details', toggleOpened: 'Hide details', expanded: true },
+    { toggleClosed: 'Show details', toggleOpened: 'Hide details', hideSummary: true },
+  ])('with args %s', async (args) => {
+    const { root } = await getPage(args);
+    expect(root).toMatchSnapshot();
+  });
+  test.each([
+    {},
+    { toggleClosed: 'Show details' },
+    { toggleOpened: 'Hide details' },
+    { toggleClosed: ' ', toggleOpened: 'Hide details' },
+    { toggleClosed: 'Show details', toggleOpened: ' ' },
+  ])('Should throw error when missing toogle messages: %s', async (args) => {
+    expect.assertions(1);
+    try {
+      await getPage(args);
+    }
+    catch (err) {
+      expect(err.message).toMatch('<mg-details> prop "toggleClosed" and "toggleOpened" must be defined.');
+    }
+  });
+  test('Should toggle details on click', async () => {
+    const page = await getPage({ toggleClosed: 'Show details', toggleOpened: 'Hide details' });
+    const element = page.doc.querySelector('mg-details');
+    const summary = element.shadowRoot.querySelector('summary');
+    jest.spyOn(page.rootInstance.expandedChange, 'emit');
+    summary.dispatchEvent(new CustomEvent('toggle', { bubbles: true }));
+    await page.waitForChanges();
+    expect(page.rootInstance.expandedChange.emit).toHaveBeenCalledTimes(1);
+  });
+});
+//# sourceMappingURL=mg-details.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-details.spec.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-details/test/mg-details.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CACrB,WAAW,CAAC;EACV,UAAU,EAAE,CAAC,SAAS,CAAC;EACvB,QAAQ,EAAE,GAAG,EAAE,CAAC,CACd,kCAAgB,IAAI;IAClB,YAAM,IAAI,EAAC,SAAS,kIAAmI;IACvJ,SAAG,IAAI,EAAC,SAAS,wUAGb,CACO,CACd;CACF,CAAC,CAAC;AAEL,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;EAC1B,IAAI,CAAC,IAAI,CAAC;IACR,EAAE,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,cAAc,EAAE;IAC9D,EAAE,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,cAAc,EAAE,QAAQ,EAAE,IAAI,EAAE;IAC9E,EAAE,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,IAAI,EAAE;GAClF,CAAC,CAAC,cAAc,EAAE,KAAK,EAAC,IAAI,EAAC,EAAE;IAC9B,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;EACjC,CAAC,CAAC,CAAC;EAEH,IAAI,CAAC,IAAI,CAAC;IACR,EAAE;IACF,EAAE,YAAY,EAAE,cAAc,EAAE;IAChC,EAAE,YAAY,EAAE,cAAc,EAAE;IAChC,EAAE,YAAY,EAAE,GAAG,EAAE,YAAY,EAAE,cAAc,EAAE;IACnD,EAAE,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,GAAG,EAAE;GACpD,CAAC,CAAC,qDAAqD,EAAE,KAAK,EAAC,IAAI,EAAC,EAAE;IACrE,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IACrB,IAAI;MACF,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;KACrB;IAAC,OAAO,GAAG,EAAE;MACZ,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,sEAAsE,CAAC,CAAC;KACrG;EACH,CAAC,CAAC,CAAC;EAEH,IAAI,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;IAChD,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC,EAAE,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,cAAc,EAAE,CAAC,CAAC;IAE3F,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;IACrD,MAAM,OAAO,GAAG,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;IAE5D,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;IAErD,OAAO,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IACpE,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;EACzE,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { MgDetails } from '../mg-details';\n\nconst getPage = args =>\n  newSpecPage({\n    components: [MgDetails],\n    template: () => (\n      <mg-details {...args}>\n        <span slot=\"summary\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>\n        <p slot=\"details\">\n          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\n          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n        </p>\n      </mg-details>\n    ),\n  });\n\ndescribe('mg-details', () => {\n  test.each([\n    { toggleClosed: 'Show details', toggleOpened: 'Hide details' },\n    { toggleClosed: 'Show details', toggleOpened: 'Hide details', expanded: true },\n    { toggleClosed: 'Show details', toggleOpened: 'Hide details', hideSummary: true },\n  ])('with args %s', async args => {\n    const { root } = await getPage(args);\n    expect(root).toMatchSnapshot();\n  });\n\n  test.each([\n    {},\n    { toggleClosed: 'Show details' },\n    { toggleOpened: 'Hide details' },\n    { toggleClosed: ' ', toggleOpened: 'Hide details' },\n    { toggleClosed: 'Show details', toggleOpened: ' ' },\n  ])('Should throw error when missing toogle messages: %s', async args => {\n    expect.assertions(1);\n    try {\n      await getPage(args);\n    } catch (err) {\n      expect(err.message).toMatch('<mg-details> prop \"toggleClosed\" and \"toggleOpened\" must be defined.');\n    }\n  });\n\n  test('Should toggle details on click', async () => {\n    const page = await getPage({ toggleClosed: 'Show details', toggleOpened: 'Hide details' });\n\n    const element = page.doc.querySelector('mg-details');\n    const summary = element.shadowRoot.querySelector('summary');\n\n    jest.spyOn(page.rootInstance.expandedChange, 'emit');\n\n    summary.dispatchEvent(new CustomEvent('toggle', { bubbles: true }));\n    await page.waitForChanges();\n\n    expect(page.rootInstance.expandedChange.emit).toHaveBeenCalledTimes(1);\n  });\n});\n"]}

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

@@ -1,6 +1,6 @@
-import { h } from '@stencil/core';
-import { createID, ClassList } from '../../../utils/components.utils';
-import { initLocales } from '../../../locales';
+import { h } from "@stencil/core";
+import { createID, ClassList } from "../../../utils/components.utils";
+import { initLocales } from "../../../locales";
 export class MgForm {
   constructor() {
     // Classes
@@ -324,7 +324,8 @@ export class MgForm {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -347,3 +348,4 @@ export class MgForm {
       }];
   }
 }
+//# sourceMappingURL=mg-form.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-form.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-form/mg-form.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { createID, ClassList } from '../../../utils/components.utils';\nimport { initLocales } from '../../../locales';\nimport { HTMLMgInputsElement } from '../inputs/MgInput.conf';\n\n@Component({\n  tag: 'mg-form',\n  styleUrl: 'mg-form.scss',\n  shadow: true,\n})\nexport class MgForm {\n  /************\n   * Internal *\n   ************/\n\n  private mgInputs: HTMLMgInputsElement[];\n  private mgButtons: HTMLMgButtonElement[];\n\n  // Classes\n  private readonly classAllRequired = 'mg-form--all-required';\n\n  // HTML selector\n  private form: HTMLFormElement;\n\n  // Locales\n  private messages;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgFormElement;\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-form');\n\n  /**\n   * Input name\n   * If not set the value equals the identifier\n   */\n  @Prop() name: string = this.identifier;\n\n  /**\n   * Define if form is readonly\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Define if form is disabled\n   */\n  @Prop() disabled = false;\n  @Watch('readonly')\n  @Watch('disabled')\n  handleAttributeChange(): void {\n    this.setMgInputs();\n    this.setRequiredMessage();\n  }\n\n  /**\n   * Define form valid state\n   */\n  @Prop({ mutable: true }) valid: boolean;\n\n  /**\n   * Define form invalid state\n   */\n  @Prop({ mutable: true }) invalid: boolean;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-form']);\n\n  /**\n   * Required message\n   */\n  @State() requiredMessage: string;\n\n  /**\n   * Emitted event on form validity check\n   * Tells if form is valid or not\n   */\n  @Event({ eventName: 'form-valid' }) formValid: EventEmitter<boolean>;\n\n  /**\n   * Emitted event on form submit\n   */\n  @Event({ eventName: 'form-submit' }) formSubmit: EventEmitter<boolean>;\n\n  /**\n   * Public method to display errors\n   */\n  @Method()\n  async displayError(): Promise<void> {\n    if (!this.readonly) {\n      this.mgInputs.forEach(input => {\n        input.displayError && input.displayError();\n      });\n      this.checkValidity();\n    }\n  }\n\n  /**\n   * Define required message based on mg-inputs required elements\n   */\n  private setRequiredMessage = (): void => {\n    // init required message\n    this.requiredMessage = null;\n    this.classCollection.delete(this.classAllRequired);\n    // If the form is disabled or readonly none of them are required\n    // Check if all fields are not editable (readonly or disabled)\n    const isEditable = input => !(input.disabled || input.readonly);\n    const isMgInputToggle = input => input.nodeName === 'MG-INPUT-TOGGLE';\n    if (!this.disabled && !this.readonly && this.mgInputs.some(input => isEditable(input) && !isMgInputToggle(input))) {\n      // Get editable inputs\n      const editableInputs: HTMLMgInputsElement[] = this.mgInputs.filter(isEditable);\n      // Get required inputs\n      // mg-input-toggle can not be required\n      const requiredInputs: HTMLMgInputsElement[] = editableInputs.filter(input => !isMgInputToggle(input) && input.required);\n      // All inputs are required\n      if (\n        [requiredInputs.length, editableInputs.length].every(length => length === 1) ||\n        (requiredInputs.length > 1 && requiredInputs.length === editableInputs.filter(input => !isMgInputToggle(input)).length)\n      ) {\n        this.requiredMessage = this.getRequiredMessageBasedOnCount(requiredInputs, 'allRequiredSingle', 'allRequired');\n        this.classCollection.add(this.classAllRequired);\n      }\n      // Some fields are required\n      else if (requiredInputs.length > 0) {\n        this.requiredMessage = this.getRequiredMessageBasedOnCount(requiredInputs, 'requiredSingle', 'required');\n      }\n    }\n  };\n\n  /**\n   * Returns a required message based on the count of required inputs.\n   * @param requiredInputs - An array of required input elements.\n   * @param keySingle - The key for the singular message format.\n   * @param keyPlural - The key for the plural message format.\n   * @returns The appropriate required message based on the count of required inputs.\n   */\n  private getRequiredMessageBasedOnCount = (requiredInputs: HTMLMgInputsElement[], keySingle: string, keyPlural: string) =>\n    this.messages.form[requiredInputs.length === 1 ? keySingle : keyPlural];\n\n  /**\n   * Check if form is valid\n   */\n  private checkValidity = (): void => {\n    // Update required on input event\n    this.setRequiredMessage();\n\n    this.valid = !this.mgInputs.some(input => input.invalid);\n    this.invalid = !this.valid;\n    // We need to send valid event if it is the same value\n    this.formValid.emit(this.valid);\n  };\n\n  /**\n   * Handle Form Submit\n   * @param event - submit event\n   */\n  private handleFormSubmit = (event: SubmitEvent): void => {\n    event.preventDefault();\n    this.formSubmit.emit();\n  };\n\n  /**\n   * Set mgInputs\n   */\n  private setMgInputs = (): void => {\n    // Get slotted mgInputs\n    this.mgInputs = Array.from(this.element.querySelectorAll('*')).filter((node: Node) => node.nodeName.startsWith('MG-INPUT-')) as HTMLMgInputsElement[];\n    // Set inputs readonly or disabled based on form configuration\n    // Othewise listen to events\n    this.mgInputs.forEach(input => {\n      if (this.readonly) input.readonly = true;\n      else if (this.disabled) input.disabled = true;\n      else input.addEventListener('input-valid', this.checkValidity);\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\n    // Get slotted mgButtons\n    this.mgButtons = Array.from(this.element.querySelectorAll('mg-button'));\n\n    // Set button form identifier\n    this.mgButtons.forEach(mgButton => {\n      mgButton.setAttribute('form', this.identifier);\n    });\n\n    // Set mgInputs\n    this.setMgInputs();\n\n    // Define required message\n    this.setRequiredMessage();\n\n    // Check validity when slotted mgInputs are ready\n    Promise.all(\n      this.mgInputs.map(async input => {\n        try {\n          await input.componentOnReady();\n        } catch {} // prevent error with VueJS first render\n      }),\n    ).then(() => {\n      this.checkValidity();\n    });\n  }\n\n  /**\n   * Add slot listeners\n   */\n  componentDidLoad(): void {\n    this.mgButtons.forEach(mgButton => {\n      // submit buttons should trigger form submition;\n      if (['submit', null].includes(mgButton.getAttribute('type'))) {\n        mgButton.addEventListener('click', () => {\n          this.form.dispatchEvent(new SubmitEvent('submit', { bubbles: true, cancelable: true }));\n        });\n      }\n    });\n    // Update mgInputs when mgForm content change\n    new MutationObserver(() => {\n      this.setMgInputs();\n    }).observe(this.element, { childList: true });\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <form class={this.classCollection.join()} id={this.identifier} name={this.name} ref={(el: HTMLFormElement) => (this.form = el)} onSubmit={this.handleFormSubmit}>\n        {this.requiredMessage && <p innerHTML={this.requiredMessage}></p>}\n        <slot></slot>\n        {!this.readonly && !this.disabled && <slot name=\"actions\"></slot>}\n      </form>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,169 @@
+import { createPage } from "../../../../utils/stencil.e2e.test.utils";
+const inputs = `<mg-input-checkbox identifier="mg-input-checkbox" label="mg-input-checkbox label"></mg-input-checkbox>
+<mg-input-date identifier="mg-input-date" label="mg-input-date label"></mg-input-date>
+<mg-input-numeric identifier="mg-input-numeric" label="mg-input-numeric label"></mg-input-numeric>
+<mg-input-password identifier="mg-input-password" label="mg-input-password label"></mg-input-password>
+<mg-input-radio identifier="mg-input-radio" label="mg-input-radio label"></mg-input-radio>
+<mg-input-select identifier="mg-input-select" label="mg-input-select label"></mg-input-select>
+<mg-input-text identifier="mg-input-text" label="mg-input-text label"></mg-input-text>
+<mg-input-textarea identifier="mg-input-textarea" label="mg-input-textarea label"></mg-input-textarea>
+<mg-input-toggle identifier="mg-input-toggle" label="mg-input-toggle label">
+  <span slot="item-1">non</span>
+  <span slot="item-2">oui</span>
+</mg-input-toggle>`;
+const inputsScript = `<script>
+  const mgInputCheckbox = document.querySelector('mg-input-checkbox');
+  const mgInputDate = document.querySelector('mg-input-date');
+  const mgInputNumeric = document.querySelector('mg-input-numeric');
+  const mgInputPassword = document.querySelector('mg-input-password');
+  const mgInputRadio = document.querySelector('mg-input-radio');
+  const mgInputSelect = document.querySelector('mg-input-select');
+  const mgInputText = document.querySelector('mg-input-text');
+  const mgInputTextarea = document.querySelector('mg-input-textarea');
+  const mgInputToggle = document.querySelector('mg-input-toggle');
+
+  mgInputCheckbox.value = [
+    { title: 'oui', value: false },
+    { title: 'non', value: false },
+  ];
+  mgInputRadio.items = ['blu', 'bli', 'bla', 'blo'];
+  mgInputSelect.items = ['blu', 'bli', 'bla', 'blo'];
+  mgInputToggle.items = [
+    { title: 'non', value: false },
+    { title: 'oui', value: true },
+  ];
+</script>`;
+const inputsScriptSetValues = `<script>
+  mgInputCheckbox.value = [
+    { title: 'oui', value: true },
+    { title: 'non', value: false },
+  ];
+  mgInputDate.value = '2022-04-15';
+  mgInputNumeric.value = 1234567890;
+  mgInputPassword.value = 'p455w0rD';
+  mgInputRadio.value = mgInputRadio.items[0];
+  mgInputSelect.value = mgInputSelect.items[0];
+  mgInputText.value = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
+  mgInputTextarea.value =
+    '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.';
+  mgInputToggle.value = mgInputToggle.items[1].value;
+</script>`;
+const inputsScriptRequiredAll = `<script>
+  mgInputCheckbox.required = true;
+  mgInputDate.required = true;
+  mgInputNumeric.required = true;
+  mgInputPassword.required = true;
+  mgInputRadio.required = true;
+  mgInputSelect.required = true;
+  mgInputText.required = true;
+  mgInputTextarea.required = true;
+</script>`;
+const inputsScriptRequiredSome = `<script>
+  mgInputCheckbox.required = true;
+  mgInputNumeric.required = true;
+  mgInputRadio.required = true;
+  mgInputText.required = true;
+</script>`;
+const inputsScriptRequiredSingle = `<script>
+  mgInputCheckbox.required = true;
+</script>`;
+const inputsScriptReadonlyAll = `<script>
+  mgInputCheckbox.readonly = true;
+  mgInputDate.readonly = true;
+  mgInputNumeric.readonly = true;
+  mgInputPassword.readonly = true;
+  mgInputRadio.readonly = true;
+  mgInputSelect.readonly = true;
+  mgInputText.readonly = true;
+  mgInputTextarea.readonly = true;
+  mgInputToggle.readonly = true;
+</script>`;
+const inputsScriptDisabledAll = `<script>
+  mgInputCheckbox.disabled = true;
+  mgInputDate.disabled = true;
+  mgInputNumeric.disabled = true;
+  mgInputPassword.disabled = true;
+  mgInputRadio.disabled = true;
+  mgInputSelect.disabled = true;
+  mgInputText.disabled = true;
+  mgInputTextarea.disabled = true;
+  mgInputToggle.disabled = true;
+</script>`;
+describe('mg-form', () => {
+  describe.each([`<mg-form>`, `<mg-form disabled>`, `<mg-form readonly>`])('params %s', startTag => {
+    test('Should render', async () => {
+      const page = await createPage(`${startTag}
+        ${inputs}
+        </mg-form>
+        ${inputsScript}
+        ${inputsScriptSetValues}`);
+      const element = await page.find('mg-form');
+      expect(element).toHaveClass('hydrated');
+      const screenshot = await page.screenshot();
+      expect(screenshot).toMatchImageSnapshot();
+    });
+    test('Should render with custom style', async () => {
+      const page = await createPage(`${startTag}
+        ${inputs}
+        </mg-form>
+        ${inputsScript}
+        ${inputsScriptSetValues}
+        ${inputsScriptRequiredSome}`);
+      await page.$eval('mg-form', el => {
+        el.setAttribute('style', '--mg-form-inputs-title-width: 25rem;');
+      });
+      const screenshot = await page.screenshot();
+      expect(screenshot).toMatchImageSnapshot();
+    });
+  });
+  describe.each(['<mg-form>', '<mg-form lang="fr">'])('With different locale', startTag => {
+    describe.each([inputsScriptRequiredAll, inputsScriptRequiredSome, inputsScriptRequiredSingle])('Should render required and errors', inputsScriptRequired => {
+      test('Should render errors', async () => {
+        const page = await createPage(`${startTag}
+        ${inputs}
+        </mg-form>
+        ${inputsScript}
+        ${inputsScriptRequired}`);
+        const element = await page.find('mg-form');
+        expect(element).toHaveClass('hydrated');
+        const screenshot = await page.screenshot();
+        expect(screenshot).toMatchImageSnapshot();
+        await element.callMethod('displayError');
+        await page.waitForChanges();
+        const screenshotErrors = await page.screenshot();
+        expect(screenshotErrors).toMatchImageSnapshot();
+      });
+    });
+    test('Should render single required input in form', async () => {
+      const page = await createPage(`${startTag}
+        <mg-input-date identifier="mg-input-date" label="mg-input-date label"></mg-input-date>
+      </mg-form>
+      <script>
+        const mgInputDate = document.querySelector('mg-input-date');
+        mgInputDate.required = true;
+      </script>`);
+      const element = await page.find('mg-form');
+      expect(element).toHaveClass('hydrated');
+      const screenshot = await page.screenshot();
+      expect(screenshot).toMatchImageSnapshot();
+      await element.callMethod('displayError');
+      await page.waitForChanges();
+      const screenshotErrors = await page.screenshot();
+      expect(screenshotErrors).toMatchImageSnapshot();
+    });
+  });
+  test.each(['readonly', 'disabled'])('Should not have required message when all inputs are required and %s', async (attribute) => {
+    const page = await createPage(`<mg-form>
+    ${inputs}
+    </mg-form>
+    ${inputsScript}
+    ${inputsScriptSetValues}
+    ${inputsScriptRequiredAll}
+    ${attribute === 'readonly' ? inputsScriptReadonlyAll : inputsScriptDisabledAll}`);
+    const element = await page.find('mg-form');
+    expect(element).toHaveClass('hydrated');
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+  });
+});
+//# sourceMappingURL=mg-form.e2e.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-form.e2e.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-form/test/mg-form.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { createPage } from '../../../../utils/stencil.e2e.test.utils';\n\nconst inputs = `<mg-input-checkbox identifier=\"mg-input-checkbox\" label=\"mg-input-checkbox label\"></mg-input-checkbox>\n<mg-input-date identifier=\"mg-input-date\" label=\"mg-input-date label\"></mg-input-date>\n<mg-input-numeric identifier=\"mg-input-numeric\" label=\"mg-input-numeric label\"></mg-input-numeric>\n<mg-input-password identifier=\"mg-input-password\" label=\"mg-input-password label\"></mg-input-password>\n<mg-input-radio identifier=\"mg-input-radio\" label=\"mg-input-radio label\"></mg-input-radio>\n<mg-input-select identifier=\"mg-input-select\" label=\"mg-input-select label\"></mg-input-select>\n<mg-input-text identifier=\"mg-input-text\" label=\"mg-input-text label\"></mg-input-text>\n<mg-input-textarea identifier=\"mg-input-textarea\" label=\"mg-input-textarea label\"></mg-input-textarea>\n<mg-input-toggle identifier=\"mg-input-toggle\" label=\"mg-input-toggle label\">\n  <span slot=\"item-1\">non</span>\n  <span slot=\"item-2\">oui</span>\n</mg-input-toggle>`;\n\nconst inputsScript = `<script>\n  const mgInputCheckbox = document.querySelector('mg-input-checkbox');\n  const mgInputDate = document.querySelector('mg-input-date');\n  const mgInputNumeric = document.querySelector('mg-input-numeric');\n  const mgInputPassword = document.querySelector('mg-input-password');\n  const mgInputRadio = document.querySelector('mg-input-radio');\n  const mgInputSelect = document.querySelector('mg-input-select');\n  const mgInputText = document.querySelector('mg-input-text');\n  const mgInputTextarea = document.querySelector('mg-input-textarea');\n  const mgInputToggle = document.querySelector('mg-input-toggle');\n\n  mgInputCheckbox.value = [\n    { title: 'oui', value: false },\n    { title: 'non', value: false },\n  ];\n  mgInputRadio.items = ['blu', 'bli', 'bla', 'blo'];\n  mgInputSelect.items = ['blu', 'bli', 'bla', 'blo'];\n  mgInputToggle.items = [\n    { title: 'non', value: false },\n    { title: 'oui', value: true },\n  ];\n</script>`;\n\nconst inputsScriptSetValues = `<script>\n  mgInputCheckbox.value = [\n    { title: 'oui', value: true },\n    { title: 'non', value: false },\n  ];\n  mgInputDate.value = '2022-04-15';\n  mgInputNumeric.value = 1234567890;\n  mgInputPassword.value = 'p455w0rD';\n  mgInputRadio.value = mgInputRadio.items[0];\n  mgInputSelect.value = mgInputSelect.items[0];\n  mgInputText.value = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';\n  mgInputTextarea.value =\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  mgInputToggle.value = mgInputToggle.items[1].value;\n</script>`;\n\nconst inputsScriptRequiredAll = `<script>\n  mgInputCheckbox.required = true;\n  mgInputDate.required = true;\n  mgInputNumeric.required = true;\n  mgInputPassword.required = true;\n  mgInputRadio.required = true;\n  mgInputSelect.required = true;\n  mgInputText.required = true;\n  mgInputTextarea.required = true;\n</script>`;\n\nconst inputsScriptRequiredSome = `<script>\n  mgInputCheckbox.required = true;\n  mgInputNumeric.required = true;\n  mgInputRadio.required = true;\n  mgInputText.required = true;\n</script>`;\n\nconst inputsScriptRequiredSingle = `<script>\n  mgInputCheckbox.required = true;\n</script>`;\n\nconst inputsScriptReadonlyAll = `<script>\n  mgInputCheckbox.readonly = true;\n  mgInputDate.readonly = true;\n  mgInputNumeric.readonly = true;\n  mgInputPassword.readonly = true;\n  mgInputRadio.readonly = true;\n  mgInputSelect.readonly = true;\n  mgInputText.readonly = true;\n  mgInputTextarea.readonly = true;\n  mgInputToggle.readonly = true;\n</script>`;\n\nconst inputsScriptDisabledAll = `<script>\n  mgInputCheckbox.disabled = true;\n  mgInputDate.disabled = true;\n  mgInputNumeric.disabled = true;\n  mgInputPassword.disabled = true;\n  mgInputRadio.disabled = true;\n  mgInputSelect.disabled = true;\n  mgInputText.disabled = true;\n  mgInputTextarea.disabled = true;\n  mgInputToggle.disabled = true;\n</script>`;\n\ndescribe('mg-form', () => {\n  describe.each([`<mg-form>`, `<mg-form disabled>`, `<mg-form readonly>`])('params %s', startTag => {\n    test('Should render', async () => {\n      const page = await createPage(`${startTag}\n        ${inputs}\n        </mg-form>\n        ${inputsScript}\n        ${inputsScriptSetValues}`);\n\n      const element = await page.find('mg-form');\n      expect(element).toHaveClass('hydrated');\n\n      const screenshot = await page.screenshot();\n      expect(screenshot).toMatchImageSnapshot();\n    });\n\n    test('Should render with custom style', async () => {\n      const page = await createPage(`${startTag}\n        ${inputs}\n        </mg-form>\n        ${inputsScript}\n        ${inputsScriptSetValues}\n        ${inputsScriptRequiredSome}`);\n\n      await page.$eval('mg-form', el => {\n        el.setAttribute('style', '--mg-form-inputs-title-width: 25rem;');\n      });\n\n      const screenshot = await page.screenshot();\n      expect(screenshot).toMatchImageSnapshot();\n    });\n  });\n\n  describe.each(['<mg-form>', '<mg-form lang=\"fr\">'])('With different locale', startTag => {\n    describe.each([inputsScriptRequiredAll, inputsScriptRequiredSome, inputsScriptRequiredSingle])('Should render required and errors', inputsScriptRequired => {\n      test('Should render errors', async () => {\n        const page = await createPage(`${startTag}\n        ${inputs}\n        </mg-form>\n        ${inputsScript}\n        ${inputsScriptRequired}`);\n\n        const element = await page.find('mg-form');\n        expect(element).toHaveClass('hydrated');\n\n        const screenshot = await page.screenshot();\n        expect(screenshot).toMatchImageSnapshot();\n\n        await element.callMethod('displayError');\n        await page.waitForChanges();\n\n        const screenshotErrors = await page.screenshot();\n        expect(screenshotErrors).toMatchImageSnapshot();\n      });\n    });\n    test('Should render single required input in form', async () => {\n      const page = await createPage(`${startTag}\n        <mg-input-date identifier=\"mg-input-date\" label=\"mg-input-date label\"></mg-input-date>\n      </mg-form>\n      <script>\n        const mgInputDate = document.querySelector('mg-input-date');\n        mgInputDate.required = true;\n      </script>`);\n      const element = await page.find('mg-form');\n      expect(element).toHaveClass('hydrated');\n\n      const screenshot = await page.screenshot();\n      expect(screenshot).toMatchImageSnapshot();\n\n      await element.callMethod('displayError');\n      await page.waitForChanges();\n\n      const screenshotErrors = await page.screenshot();\n      expect(screenshotErrors).toMatchImageSnapshot();\n    });\n  });\n\n  test.each(['readonly', 'disabled'])('Should not have required message when all inputs are required and %s', async attribute => {\n    const page = await createPage(`<mg-form>\n    ${inputs}\n    </mg-form>\n    ${inputsScript}\n    ${inputsScriptSetValues}\n    ${inputsScriptRequiredAll}\n    ${attribute === 'readonly' ? inputsScriptReadonlyAll : inputsScriptDisabledAll}`);\n\n    const element = await page.find('mg-form');\n    expect(element).toHaveClass('hydrated');\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n  });\n});\n"]}