@mgdis/mg-components 5.15.0 → 5.17.0

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

@@ -0,0 +1,128 @@
+import { setPageContent, expect, describe, testEach, test } from "../../../../utils/playwright.e2e.test.utils";
+import { renderAttributes, renderProperties } from "../../../../utils/e2e.test.utils";
+import { createID } from "../../../../utils/components.utils";
+import { Status } from "../../menu/mg-menu-item/mg-menu-item.conf";
+const createHTML = (args, id = `mg-action-more-${createID()}`) => `<style>body {padding-left: 2rem;} </style><mg-action-more ${renderAttributes(args)} id="${id}"></mg-action-more><script>${renderProperties(args, `#${id}`)}</script>`;
+const mouseEventHandler = () => 'hello batman';
+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: '#',
+  },
+];
+describe('mg-action-more', () => {
+  describe('render', () => {
+    testEach([
+      {
+        items,
+      },
+      {
+        items,
+        button: {
+          label: 'dc-comics',
+          variant: 'primary',
+          isIcon: false,
+        },
+        icon: {
+          icon: 'plus',
+        },
+      },
+      {
+        items,
+        displayChevron: true,
+        icon: {
+          icon: 'ellipsis',
+        },
+        button: {
+          variant: 'flat',
+          isIcon: false,
+        },
+      },
+      {
+        items,
+        displayChevron: true,
+        button: {
+          variant: 'flat',
+          isIcon: false,
+        },
+      },
+      {
+        items,
+        displayChevron: false,
+        button: {
+          variant: 'flat',
+          isIcon: false,
+        },
+      },
+      {
+        items,
+        displayChevron: false,
+        icon: {
+          icon: 'ellipsis',
+        },
+        button: {
+          variant: 'flat',
+          isIcon: false,
+        },
+      },
+    ])('Should render %s', async (page, args) => {
+      await setPageContent(page, createHTML(args));
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+    });
+  });
+  describe('navigation', () => {
+    testEach(['mouse', 'keyboard'])('should toggle button menu, case %s', async (page, navigation) => {
+      await setPageContent(page, createHTML({ items }), { width: 130, height: 200 });
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+      if (navigation === 'mouse') {
+        const mgButton = await page.locator('mg-action-more mg-button');
+        await mgButton.click();
+        await expect(page.locator('body')).toHaveScreenshot();
+        const mgMenuItem = await page.locator('mg-menu-item:first-of-type');
+        await mgMenuItem.click();
+        await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+      }
+      else {
+        for (const [index, key] of ['Tab', 'Enter', 'Tab', 'Enter'].entries()) {
+          await page.keyboard.press(key);
+          await expect(page.locator([0, 3].includes(index) ? '.e2e-screenshot' : 'body')).toHaveScreenshot();
+        }
+      }
+    });
+    test('should toggle button chevron menu', async ({ page }) => {
+      await setPageContent(page, createHTML({
+        items,
+        displayChevron: true,
+        button: {
+          isIcon: false,
+          variant: 'secondary',
+        },
+      }), { width: 130, height: 200 });
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+      const mgButton = await page.locator('mg-action-more mg-button');
+      await mgButton.click();
+      await page.waitForTimeout(300); // wait chevron animation ended
+      await expect(page.locator('body')).toHaveScreenshot();
+    });
+  });
+});
+//# sourceMappingURL=mg-action-more.e2e.playwright.js.map

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":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAY,IAAI,EAAE,MAAM,6CAA6C,CAAC;AACzH,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACtF,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,2CAA2C,CAAC;AAGnE,MAAM,UAAU,GAAG,CAAC,IAAsB,EAAE,EAAE,GAAG,kBAAkB,QAAQ,EAAE,EAAE,EAAE,EAAE,CACjF,6DAA6D,gBAAgB,CAAC,IAAI,CAAC,QAAQ,EAAE,8BAA8B,gBAAgB,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC,WAAW,CAAC;AAEzK,MAAM,iBAAiB,GAAG,GAAG,EAAE,CAAC,cAAc,CAAC;AAI/C,MAAM,KAAK,GAA8B;EACvC;IACE,KAAK,EAAE,QAAQ;IACf,iBAAiB;GAClB;EACD;IACE,KAAK,EAAE,OAAO;IACd,iBAAiB;IACjB,MAAM,EAAE,MAAM,CAAC,MAAM;GACtB;EACD;IACE,KAAK,EAAE,OAAO;IACd,iBAAiB;IACjB,KAAK,EAAE;MACL,KAAK,EAAE,CAAC;MACR,KAAK,EAAE,OAAO;KACf;GACF;EACD;IACE,KAAK,EAAE,MAAM;IACb,iBAAiB;IACjB,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,GAAG;GACV;CACF,CAAC;AAEF,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;EAC9B,QAAQ,CAAC,QAAQ,EAAE,GAAG,EAAE;IACtB,QAAQ,CAAC;MACP;QACE,KAAK;OACN;MACD;QACE,KAAK;QACL,MAAM,EAAE;UACN,KAAK,EAAE,WAAW;UAClB,OAAO,EAAE,SAAS;UAClB,MAAM,EAAE,KAAK;SACd;QACD,IAAI,EAAE;UACJ,IAAI,EAAE,MAAM;SACb;OACF;MACD;QACE,KAAK;QACL,cAAc,EAAE,IAAI;QACpB,IAAI,EAAE;UACJ,IAAI,EAAE,UAAU;SACjB;QACD,MAAM,EAAE;UACN,OAAO,EAAE,MAAM;UACf,MAAM,EAAE,KAAK;SACd;OACF;MACD;QACE,KAAK;QACL,cAAc,EAAE,IAAI;QACpB,MAAM,EAAE;UACN,OAAO,EAAE,MAAM;UACf,MAAM,EAAE,KAAK;SACd;OACF;MACD;QACE,KAAK;QACL,cAAc,EAAE,KAAK;QACrB,MAAM,EAAE;UACN,OAAO,EAAE,MAAM;UACf,MAAM,EAAE,KAAK;SACd;OACF;MACD;QACE,KAAK;QACL,cAAc,EAAE,KAAK;QACrB,IAAI,EAAE;UACJ,IAAI,EAAE,UAAU;SACjB;QACD,MAAM,EAAE;UACN,OAAO,EAAE,MAAM;UACf,MAAM,EAAE,KAAK;SACd;OACF;KACF,CAAC,CAAC,kBAAkB,EAAE,KAAK,EAAE,IAAc,EAAE,IAAsB,EAAE,EAAE;MACtE,MAAM,cAAc,CAAC,IAAI,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC;MAE7C,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;IACnE,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,QAAQ,CAAC,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,oCAAoC,EAAE,KAAK,EAAE,IAAc,EAAE,UAAU,EAAE,EAAE;MACzG,MAAM,cAAc,CAAC,IAAI,EAAE,UAAU,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;MAE/E,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;MAEjE,IAAI,UAAU,KAAK,OAAO,EAAE;QAC1B,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAC,OAAO,CAAC,0BAA0B,CAAC,CAAC;QAChE,MAAM,QAAQ,CAAC,KAAK,EAAE,CAAC;QACvB,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;QAEtD,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,OAAO,CAAC,4BAA4B,CAAC,CAAC;QACpE,MAAM,UAAU,CAAC,KAAK,EAAE,CAAC;QACzB,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;OAClE;WAAM;QACL,KAAK,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;UACrE,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;UAC/B,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;SACpG;OACF;IACH,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,mCAAmC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;MAC3D,MAAM,cAAc,CAClB,IAAI,EACJ,UAAU,CAAC;QACT,KAAK;QACL,cAAc,EAAE,IAAI;QACpB,MAAM,EAAE;UACN,MAAM,EAAE,KAAK;UACb,OAAO,EAAE,WAAW;SACrB;OACF,CAAC,EACF,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,CAC5B,CAAC;MAEF,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;MAEjE,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAC,OAAO,CAAC,0BAA0B,CAAC,CAAC;MAChE,MAAM,QAAQ,CAAC,KAAK,EAAE,CAAC;MAEvB,MAAM,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC,+BAA+B;MAE/D,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;IACxD,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","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() {
     /**
@@ -35,7 +35,7 @@ export class MgDetails {
    * @returns HTML Element
    */
   render() {
-    return (h("details", { class: "mg-details", onToggle: this.handleToggle, open: this.expanded, ref: el => (this.details = el) }, h("summary", null, h("slot", { name: "summary" }), h("span", { class: "mg-details__toggle" }, h("mg-icon", { icon: "chevron-up", size: "small", class: { 'mg-details__toggle-icon': true, 'mg-details__toggle-icon--reverse': !this.expanded } }), h("span", { class: { 'sr-only': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { class: "mg-details__details" }, h("slot", { name: "details" }))));
+    return (h("details", { class: "mg-details", onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", null, h("slot", { name: "summary" }), h("span", { class: "mg-details__toggle" }, h("mg-icon", { icon: "chevron-up", size: "small", class: { 'mg-details__toggle-icon': true, 'mg-details__toggle-icon--reverse': !this.expanded } }), h("span", { class: { 'sr-only': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { class: "mg-details__details" }, h("slot", { name: "details" }))));
   }
   static get is() { return "mg-details"; }
   static get encapsulation() { return "shadow"; }
@@ -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
@@ -25,15 +25,23 @@ export class MgForm {
         // All inputs are required
         if ([requiredInputs.length, editableInputs.length].every(length => length === 1) ||
           (requiredInputs.length > 1 && requiredInputs.length === editableInputs.filter(input => !isMgInputToggle(input)).length)) {
-          this.requiredMessage = this.messages.form[requiredInputs.length === 1 ? 'allRequiredSingle' : 'allRequired'];
+          this.requiredMessage = this.getRequiredMessageBasedOnCount(requiredInputs, 'allRequiredSingle', 'allRequired');
           this.classCollection.add(this.classAllRequired);
         }
         // Some fields are required
         else if (requiredInputs.length > 0) {
-          this.requiredMessage = this.messages.form[requiredInputs.length === 1 ? 'requiredSingle' : 'required'];
+          this.requiredMessage = this.getRequiredMessageBasedOnCount(requiredInputs, 'requiredSingle', 'required');
         }
       }
     };
+    /**
+     * Returns a required message based on the count of required inputs.
+     * @param requiredInputs - An array of required input elements.
+     * @param keySingle - The key for the singular message format.
+     * @param keyPlural - The key for the plural message format.
+     * @returns The appropriate required message based on the count of required inputs.
+     */
+    this.getRequiredMessageBasedOnCount = (requiredInputs, keySingle, keyPlural) => this.messages.form[requiredInputs.length === 1 ? keySingle : keyPlural];
     /**
      * Check if form is valid
      */
@@ -145,7 +153,7 @@ export class MgForm {
    * @returns HTML Element
    */
   render() {
-    return (h("form", { class: this.classCollection.join(), id: this.identifier, name: this.name, ref: el => (this.form = el), onSubmit: this.handleFormSubmit }, this.requiredMessage && h("p", { innerHTML: this.requiredMessage }), h("slot", null), !this.readonly && !this.disabled && h("slot", { name: "actions" })));
+    return (h("form", { class: this.classCollection.join(), id: this.identifier, name: this.name, ref: (el) => (this.form = el), onSubmit: this.handleFormSubmit }, this.requiredMessage && h("p", { innerHTML: this.requiredMessage }), h("slot", null), !this.readonly && !this.disabled && h("slot", { name: "actions" })));
   }
   static get is() { return "mg-form"; }
   static get encapsulation() { return "shadow"; }
@@ -316,7 +324,8 @@ export class MgForm {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -339,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":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACvG,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAQ/C,MAAM,OAAO,MAAM;;IAQjB,UAAU;IACO,qBAAgB,GAAG,uBAAuB,CAAC;IAyF5D;;OAEG;IACK,uBAAkB,GAAG,GAAS,EAAE;MACtC,wBAAwB;MACxB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;MAC5B,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;MACnD,gEAAgE;MAChE,8DAA8D;MAC9D,MAAM,UAAU,GAAG,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC;MAChE,MAAM,eAAe,GAAG,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,KAAK,iBAAiB,CAAC;MACtE,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,EAAE;QACjH,sBAAsB;QACtB,MAAM,cAAc,GAA0B,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;QAC/E,sBAAsB;QACtB,sCAAsC;QACtC,MAAM,cAAc,GAA0B,cAAc,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,eAAe,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC;QACxH,0BAA0B;QAC1B,IACE,CAAC,cAAc,CAAC,MAAM,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,KAAK,CAAC,CAAC;UAC5E,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,IAAI,cAAc,CAAC,MAAM,KAAK,cAAc,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,EACvH;UACA,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,8BAA8B,CAAC,cAAc,EAAE,mBAAmB,EAAE,aAAa,CAAC,CAAC;UAC/G,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;SACjD;QACD,2BAA2B;aACtB,IAAI,cAAc,CAAC,MAAM,GAAG,CAAC,EAAE;UAClC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,8BAA8B,CAAC,cAAc,EAAE,gBAAgB,EAAE,UAAU,CAAC,CAAC;SAC1G;OACF;IACH,CAAC,CAAC;IAEF;;;;;;OAMG;IACK,mCAA8B,GAAG,CAAC,cAAqC,EAAE,SAAiB,EAAE,SAAiB,EAAE,EAAE,CACvH,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAE1E;;OAEG;IACK,kBAAa,GAAG,GAAS,EAAE;MACjC,iCAAiC;MACjC,IAAI,CAAC,kBAAkB,EAAE,CAAC;MAE1B,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;MACzD,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC;MAC3B,sDAAsD;MACtD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAClC,CAAC,CAAC;IAEF;;;OAGG;IACK,qBAAgB,GAAG,CAAC,KAAkB,EAAQ,EAAE;MACtD,KAAK,CAAC,cAAc,EAAE,CAAC;MACvB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;IACzB,CAAC,CAAC;IAEF;;OAEG;IACK,gBAAW,GAAG,GAAS,EAAE;MAC/B,uBAAuB;MACvB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,IAAU,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,WAAW,CAAC,CAA0B,CAAC;MACtJ,8DAA8D;MAC9D,4BAA4B;MAC5B,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;QAC5B,IAAI,IAAI,CAAC,QAAQ;UAAE,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC;aACpC,IAAI,IAAI,CAAC,QAAQ;UAAE,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC;;UACzC,KAAK,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;MACjE,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;sBAjJ2B,QAAQ,CAAC,SAAS,CAAC;gBAMzB,IAAI,CAAC,UAAU;oBAKnB,KAAK;oBAKL,KAAK;;;2BAqBc,IAAI,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC;;;EAlBhE,qBAAqB;IACnB,IAAI,CAAC,WAAW,EAAE,CAAC;IACnB,IAAI,CAAC,kBAAkB,EAAE,CAAC;EAC5B,CAAC;EAiCD;;KAEG;EAEH,KAAK,CAAC,YAAY;IAChB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;QAC5B,KAAK,CAAC,YAAY,IAAI,KAAK,CAAC,YAAY,EAAE,CAAC;MAC7C,CAAC,CAAC,CAAC;MACH,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;EACH,CAAC;EAiFD;;iBAEe;EAEf;;KAEG;EACH,iBAAiB;IACf,cAAc;IACd,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;IAEnD,wBAAwB;IACxB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC;IAExE,6BAA6B;IAC7B,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;MAChC,QAAQ,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;IACjD,CAAC,CAAC,CAAC;IAEH,eAAe;IACf,IAAI,CAAC,WAAW,EAAE,CAAC;IAEnB,0BAA0B;IAC1B,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAE1B,iDAAiD;IACjD,OAAO,CAAC,GAAG,CACT,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,EAAC,KAAK,EAAC,EAAE;MAC9B,IAAI;QACF,MAAM,KAAK,CAAC,gBAAgB,EAAE,CAAC;OAChC;MAAC,WAAM,GAAE,CAAC,wCAAwC;IACrD,CAAC,CAAC,CACH,CAAC,IAAI,CAAC,GAAG,EAAE;MACV,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC,CAAC,CAAC;EACL,CAAC;EAED;;KAEG;EACH,gBAAgB;IACd,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;MAChC,gDAAgD;MAChD,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,EAAE;QAC5D,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;UACtC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAC1F,CAAC,CAAC,CAAC;OACJ;IACH,CAAC,CAAC,CAAC;IACH,6CAA6C;IAC7C,IAAI,gBAAgB,CAAC,GAAG,EAAE;MACxB,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;EAChD,CAAC;EAED;;;KAGG;EACH,MAAM;IACJ,OAAO,CACL,YAAM,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC,EAAmB,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,gBAAgB;MAC5J,IAAI,CAAC,eAAe,IAAI,SAAG,SAAS,EAAE,IAAI,CAAC,eAAe,GAAM;MACjE,eAAa;MACZ,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,YAAM,IAAI,EAAC,SAAS,GAAQ,CAC5D,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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"]}