@mgdis/mg-components 5.15.0 → 5.17.0

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

@@ -0,0 +1,223 @@
+import { h } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { MgPanel } from "../mg-panel";
+import { MgButton } from "../../../atoms/mg-button/mg-button";
+import { MgInputText } from "../../inputs/mg-input-text/mg-input-text";
+import { expandToggleDisplays, titlePositions } from "../mg-panel.conf";
+const getPage = (args, slot) => {
+  const page = newSpecPage({
+    components: [MgPanel, MgButton, MgInputText],
+    template: () => h("mg-panel", Object.assign({}, args), slot),
+  });
+  jest.runAllTimers();
+  return page;
+};
+describe('mg-panel', () => {
+  beforeAll(() => (global.HTMLInputElement.prototype.focus = jest.fn()));
+  afterAll(() => delete global.HTMLInputElement.prototype.focus);
+  beforeEach(() => jest.useFakeTimers());
+  afterEach(() => jest.runOnlyPendingTimers());
+  test.each([
+    { identifier: 'identifier', panelTitle: 'panel title' },
+    { identifier: 'identifier', panelTitle: 'panel title', expanded: true },
+    { identifier: 'identifier', panelTitle: 'panel title', titleEditable: true },
+    { identifier: 'identifier', panelTitle: 'panel title', titleEditable: true, titlePattern: /joker/, titlePatternErrorMessage: "You can't enter a bad guy !" },
+    { identifier: 'identifier', panelTitle: 'panel title', titleEditable: true, lang: 'fr' },
+    { identifier: 'identifier', panelTitle: 'panel title', titleEditable: true, lang: 'xx' },
+    ...titlePositions.map(titlePosition => ({ identifier: 'identifier', panelTitle: 'panel title', titlePosition })),
+    ...expandToggleDisplays.map(expandToggleDisplay => ({ identifier: 'identifier', panelTitle: 'panel title', expandToggleDisplay })),
+    ...expandToggleDisplays.map(expandToggleDisplay => ({ identifier: 'identifier', panelTitle: 'panel title', titleEditable: true, expandToggleDisplay })),
+  ])('Should render with args %s:', async (args) => {
+    const { root } = await getPage(args);
+    expect(root).toMatchSnapshot();
+  });
+  describe('errors', () => {
+    test.each([
+      { props: { identifier: 'identifier', panelTitle: 'panel title', titlePattern: /joker/ }, error: '<mg-panel> prop "titleEditable" must be set to `true`.' },
+      {
+        props: { identifier: 'identifier', panelTitle: 'panel title', titleEditable: true, titlePattern: '^(?!(joker)$)[a-z A-Z0-9s]+$' },
+        error: '<mg-panel> prop "titlePattern" must be paired with the prop "titlePatternErrorMessage".',
+      },
+      {
+        props: { identifier: 'identifier', panelTitle: 'panel title', titleEditable: true, titlePattern: '^(?!(joker)$)[a-z A-Z0-9s]+$', titlePatternErrorMessage: '' },
+        error: '<mg-panel> prop "titlePattern" must be paired with the prop "titlePatternErrorMessage".',
+      },
+    ])('Should throw error when props association are unauthorized %s:', async ({ props, error }) => {
+      expect.assertions(1);
+      try {
+        await getPage(props);
+      }
+      catch (err) {
+        expect(err.message).toBe(error);
+      }
+    });
+    test.each(['', ' ', undefined])('Should not render with invalid panelTitle property: %s', async (panelTitle) => {
+      expect.assertions(1);
+      try {
+        await getPage({ panelTitle });
+      }
+      catch (err) {
+        expect(err.message).toMatch('<mg-panel> prop "panelTitle" is required.');
+      }
+    });
+    test.each(['', ' ', 'batman'].map(titlePosition => ({ panelTitle: 'panel title', titlePosition })))('Should throw an error when prop "titlePosition" is invalid', async (props) => {
+      try {
+        await getPage(props);
+      }
+      catch (err) {
+        expect(err.message).toMatch(`<mg-panel> prop "titlePosition" must be one of: ${titlePositions.join(', ')}.`);
+      }
+    });
+    test.each(['', ' ', 'batman'].map(expandToggleDisplay => ({ panelTitle: 'panel title', expandToggleDisplay })))('Should throw an error when prop "expandToggleDisplay" is invalid', async (props) => {
+      try {
+        await getPage(props);
+      }
+      catch (err) {
+        expect(err.message).toMatch(`<mg-panel> prop "expandToggleDisplay" must be one of: ${expandToggleDisplays.join(', ')}.`);
+      }
+    });
+  });
+  describe('navigation', () => {
+    test.each([true, false])('Should toggle collapse panel, expanded %s', async (expanded) => {
+      const page = await getPage({ identifier: 'identifier', panelTitle: 'panel title', expanded });
+      const mgPanel = page.doc.querySelector('mg-panel');
+      const collapseButton = mgPanel.shadowRoot.querySelector('mg-button:first-of-type');
+      const spy = jest.spyOn(page.rootInstance.expandedChange, 'emit');
+      expect(page.root).toMatchSnapshot();
+      collapseButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+      collapseButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+      expect(spy).toBeCalledTimes(2);
+    });
+    test.each([true, false])('Should NOT collapse panel, case expandToggleDisabled = true', async (expanded) => {
+      const page = await getPage({ identifier: 'identifier', panelTitle: 'panel title', expanded, expandToggleDisabled: true });
+      const mgPanel = page.doc.querySelector('mg-panel');
+      const collapseButton = mgPanel.shadowRoot.querySelector('mg-button:first-of-type');
+      expect(page.root).toMatchSnapshot();
+      collapseButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+    });
+    test.each([true, false])('Should toggle edit panel title', async (titleEditable) => {
+      const page = await getPage({ identifier: 'identifier', panelTitle: 'panel title', titleEditable });
+      const mgPanel = page.doc.querySelector('mg-panel');
+      const editButton = mgPanel.shadowRoot.querySelector('.mg-panel__header-title mg-button[is-icon]');
+      expect(page.root).toMatchSnapshot();
+      if (titleEditable) {
+        editButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot();
+        editButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));
+        jest.runOnlyPendingTimers();
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot();
+      }
+    });
+    test.each(['first-of-type', 'last-of-type'])('should update panel title, case %s', async (lastAction) => {
+      const updatedPanelTitle = 'Updated panel title';
+      const args = { identifier: 'identifier', panelTitle: 'panel title', titleEditable: true };
+      const page = await getPage(args);
+      const mgPanel = page.doc.querySelector('mg-panel');
+      const editButton = mgPanel.shadowRoot.querySelector('.mg-panel__header-title mg-button[is-icon]');
+      expect(page.root).toMatchSnapshot();
+      jest.spyOn(page.rootInstance.titleChange, 'emit');
+      editButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+      const mgInputText = mgPanel.shadowRoot.querySelector('mg-input-text');
+      const input = mgInputText.shadowRoot.querySelector('input');
+      input.value = updatedPanelTitle;
+      input.dispatchEvent(new CustomEvent('input', { bubbles: true }));
+      await page.waitForChanges();
+      input.dispatchEvent(new CustomEvent('blur', { bubbles: true }));
+      await page.waitForChanges();
+      const afterInputAction = mgPanel.shadowRoot.querySelector(`.mg-panel__header-title mg-input-text mg-button:${lastAction}`);
+      afterInputAction.dispatchEvent(new CustomEvent('click', { bubbles: true }));
+      jest.runOnlyPendingTimers();
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+      if (lastAction === 'last-of-type') {
+        expect(mgPanel.panelTitle).toBe(updatedPanelTitle);
+        expect(page.rootInstance.titleChange.emit).toHaveBeenCalledWith(updatedPanelTitle);
+      }
+      else {
+        expect(mgPanel.panelTitle).toBe(args.panelTitle);
+        expect(page.rootInstance.titleChange.emit).not.toHaveBeenCalled();
+      }
+    });
+    test('should NOT update panel title, case no enter in input', async () => {
+      const updatedPanelTitle = 'Updated panel title';
+      const args = { identifier: 'identifier', panelTitle: 'panel title', titleEditable: true };
+      const page = await getPage(args);
+      const mgPanel = page.doc.querySelector('mg-panel');
+      const editButton = mgPanel.shadowRoot.querySelector('.mg-panel__header-title mg-button[is-icon]');
+      expect(page.root).toMatchSnapshot();
+      jest.spyOn(page.rootInstance.titleChange, 'emit');
+      editButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+      const mgInputText = mgPanel.shadowRoot.querySelector('mg-input-text');
+      const input = mgInputText.shadowRoot.querySelector('input');
+      input.dispatchEvent(new CustomEvent('blur', { bubbles: true }));
+      await page.waitForChanges();
+      const afterInputAction = mgPanel.shadowRoot.querySelector('.mg-panel__header-title mg-input-text mg-button:last-of-type');
+      afterInputAction.dispatchEvent(new CustomEvent('click', { bubbles: true }));
+      jest.runOnlyPendingTimers();
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+      expect(mgPanel.panelTitle).toBe(args.panelTitle);
+      expect(page.rootInstance.titleChange.emit).not.toHaveBeenCalledWith(updatedPanelTitle);
+    });
+    test('Should NOT update panel title, case input new value does NOT match pattern', async () => {
+      const updatedPanelTitle = 'joker';
+      const args = {
+        identifier: 'identifier',
+        panelTitle: 'panel title',
+        titleEditable: true,
+        titlePattern: '^(?!(joker)$)[a-z A-Z0-9s]+$',
+        titlePatternErrorMessage: "You can't enter a bad guy !",
+      };
+      const page = await getPage(args);
+      const mgPanel = page.doc.querySelector('mg-panel');
+      const editButton = mgPanel.shadowRoot.querySelector('.mg-panel__header-title mg-button[is-icon]');
+      expect(page.root).toMatchSnapshot();
+      jest.spyOn(page.rootInstance.titleChange, 'emit');
+      // first switch to title edition
+      editButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+      const mgInputText = mgPanel.shadowRoot.querySelector('mg-input-text');
+      const input = mgInputText.shadowRoot.querySelector('input');
+      input.checkValidity = jest.fn(() => false);
+      Object.defineProperty(input, 'validity', {
+        get: jest.fn(() => ({
+          patternMismatch: false,
+        })),
+      });
+      // second update title with a falsy update title
+      input.value = updatedPanelTitle;
+      input.dispatchEvent(new CustomEvent('input', { bubbles: true }));
+      await page.waitForChanges();
+      input.dispatchEvent(new CustomEvent('blur', { bubbles: true }));
+      await page.waitForChanges();
+      // and click on validate button
+      const afterInputAction = mgPanel.shadowRoot.querySelector('.mg-panel__header-title mg-input-text mg-button:last-of-type');
+      afterInputAction.dispatchEvent(new CustomEvent('click', { bubbles: true }));
+      jest.runOnlyPendingTimers();
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+      expect(mgPanel.panelTitle).toBe(args.panelTitle);
+      expect(page.rootInstance.titleChange.emit).not.toHaveBeenCalledWith(updatedPanelTitle);
+      // finaly return to default view by clicking on cancel button
+      const cancelAction = mgPanel.shadowRoot.querySelector('.mg-panel__header-title mg-input-text mg-button:last-of-type');
+      cancelAction.dispatchEvent(new CustomEvent('click', { bubbles: true }));
+      jest.runOnlyPendingTimers();
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+    });
+  });
+});
+//# sourceMappingURL=mg-panel.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-panel.spec.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-panel/test/mg-panel.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { MgPanel } from '../mg-panel';\n\nimport { MgButton } from '../../../atoms/mg-button/mg-button';\nimport { MgInputText } from '../../inputs/mg-input-text/mg-input-text';\nimport { expandToggleDisplays, titlePositions } from '../mg-panel.conf';\n\nconst getPage = (args, slot?) => {\n  const page = newSpecPage({\n    components: [MgPanel, MgButton, MgInputText],\n    template: () => <mg-panel {...args}>{slot}</mg-panel>,\n  });\n  jest.runAllTimers();\n\n  return page;\n};\n\ndescribe('mg-panel', () => {\n  beforeAll(() => (global.HTMLInputElement.prototype.focus = jest.fn()));\n  afterAll(() => delete global.HTMLInputElement.prototype.focus);\n\n  beforeEach(() => jest.useFakeTimers());\n  afterEach(() => jest.runOnlyPendingTimers());\n\n  test.each([\n    { identifier: 'identifier', panelTitle: 'panel title' },\n    { identifier: 'identifier', panelTitle: 'panel title', expanded: true },\n    { identifier: 'identifier', panelTitle: 'panel title', titleEditable: true },\n    { identifier: 'identifier', panelTitle: 'panel title', titleEditable: true, titlePattern: /joker/, titlePatternErrorMessage: \"You can't enter a bad guy !\" },\n    { identifier: 'identifier', panelTitle: 'panel title', titleEditable: true, lang: 'fr' },\n    { identifier: 'identifier', panelTitle: 'panel title', titleEditable: true, lang: 'xx' },\n    ...titlePositions.map(titlePosition => ({ identifier: 'identifier', panelTitle: 'panel title', titlePosition })),\n    ...expandToggleDisplays.map(expandToggleDisplay => ({ identifier: 'identifier', panelTitle: 'panel title', expandToggleDisplay })),\n    ...expandToggleDisplays.map(expandToggleDisplay => ({ identifier: 'identifier', panelTitle: 'panel title', titleEditable: true, expandToggleDisplay })),\n  ])('Should render with args %s:', async args => {\n    const { root } = await getPage(args);\n    expect(root).toMatchSnapshot();\n  });\n\n  describe('errors', () => {\n    test.each([\n      { props: { identifier: 'identifier', panelTitle: 'panel title', titlePattern: /joker/ }, error: '<mg-panel> prop \"titleEditable\" must be set to `true`.' },\n      {\n        props: { identifier: 'identifier', panelTitle: 'panel title', titleEditable: true, titlePattern: '^(?!(joker)$)[a-z A-Z0-9s]+$' },\n        error: '<mg-panel> prop \"titlePattern\" must be paired with the prop \"titlePatternErrorMessage\".',\n      },\n      {\n        props: { identifier: 'identifier', panelTitle: 'panel title', titleEditable: true, titlePattern: '^(?!(joker)$)[a-z A-Z0-9s]+$', titlePatternErrorMessage: '' },\n        error: '<mg-panel> prop \"titlePattern\" must be paired with the prop \"titlePatternErrorMessage\".',\n      },\n    ])('Should throw error when props association are unauthorized %s:', async ({ props, error }) => {\n      expect.assertions(1);\n      try {\n        await getPage(props);\n      } catch (err) {\n        expect(err.message).toBe(error);\n      }\n    });\n\n    test.each(['', ' ', undefined])('Should not render with invalid panelTitle property: %s', async panelTitle => {\n      expect.assertions(1);\n      try {\n        await getPage({ panelTitle });\n      } catch (err) {\n        expect(err.message).toMatch('<mg-panel> prop \"panelTitle\" is required.');\n      }\n    });\n\n    test.each(['', ' ', 'batman'].map(titlePosition => ({ panelTitle: 'panel title', titlePosition })))(\n      'Should throw an error when prop \"titlePosition\" is invalid',\n      async props => {\n        try {\n          await getPage(props);\n        } catch (err) {\n          expect(err.message).toMatch(`<mg-panel> prop \"titlePosition\" must be one of: ${titlePositions.join(', ')}.`);\n        }\n      },\n    );\n\n    test.each(['', ' ', 'batman'].map(expandToggleDisplay => ({ panelTitle: 'panel title', expandToggleDisplay })))(\n      'Should throw an error when prop \"expandToggleDisplay\" is invalid',\n      async props => {\n        try {\n          await getPage(props);\n        } catch (err) {\n          expect(err.message).toMatch(`<mg-panel> prop \"expandToggleDisplay\" must be one of: ${expandToggleDisplays.join(', ')}.`);\n        }\n      },\n    );\n  });\n\n  describe('navigation', () => {\n    test.each([true, false])('Should toggle collapse panel, expanded %s', async expanded => {\n      const page = await getPage({ identifier: 'identifier', panelTitle: 'panel title', expanded });\n      const mgPanel = page.doc.querySelector('mg-panel');\n      const collapseButton = mgPanel.shadowRoot.querySelector('mg-button:first-of-type');\n\n      const spy = jest.spyOn(page.rootInstance.expandedChange, 'emit');\n\n      expect(page.root).toMatchSnapshot();\n\n      collapseButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n\n      collapseButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n\n      expect(spy).toBeCalledTimes(2);\n    });\n\n    test.each([true, false])('Should NOT collapse panel, case expandToggleDisabled = true', async expanded => {\n      const page = await getPage({ identifier: 'identifier', panelTitle: 'panel title', expanded, expandToggleDisabled: true });\n      const mgPanel = page.doc.querySelector('mg-panel');\n      const collapseButton = mgPanel.shadowRoot.querySelector('mg-button:first-of-type');\n\n      expect(page.root).toMatchSnapshot();\n\n      collapseButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n    });\n\n    test.each([true, false])('Should toggle edit panel title', async titleEditable => {\n      const page = await getPage({ identifier: 'identifier', panelTitle: 'panel title', titleEditable });\n      const mgPanel = page.doc.querySelector('mg-panel');\n      const editButton = mgPanel.shadowRoot.querySelector('.mg-panel__header-title mg-button[is-icon]');\n\n      expect(page.root).toMatchSnapshot();\n\n      if (titleEditable) {\n        editButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n        await page.waitForChanges();\n\n        expect(page.root).toMatchSnapshot();\n\n        editButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n        jest.runOnlyPendingTimers();\n        await page.waitForChanges();\n\n        expect(page.root).toMatchSnapshot();\n      }\n    });\n\n    test.each(['first-of-type', 'last-of-type'])('should update panel title, case %s', async lastAction => {\n      const updatedPanelTitle = 'Updated panel title';\n      const args = { identifier: 'identifier', panelTitle: 'panel title', titleEditable: true };\n      const page = await getPage(args);\n      const mgPanel = page.doc.querySelector('mg-panel');\n      const editButton = mgPanel.shadowRoot.querySelector('.mg-panel__header-title mg-button[is-icon]');\n\n      expect(page.root).toMatchSnapshot();\n\n      jest.spyOn(page.rootInstance.titleChange, 'emit');\n\n      editButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n\n      const mgInputText = mgPanel.shadowRoot.querySelector('mg-input-text');\n      const input = mgInputText.shadowRoot.querySelector('input');\n\n      input.value = updatedPanelTitle;\n      input.dispatchEvent(new CustomEvent('input', { bubbles: true }));\n      await page.waitForChanges();\n\n      input.dispatchEvent(new CustomEvent('blur', { bubbles: true }));\n      await page.waitForChanges();\n\n      const afterInputAction = mgPanel.shadowRoot.querySelector(`.mg-panel__header-title mg-input-text mg-button:${lastAction}`);\n\n      afterInputAction.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n      jest.runOnlyPendingTimers();\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n\n      if (lastAction === 'last-of-type') {\n        expect(mgPanel.panelTitle).toBe(updatedPanelTitle);\n        expect(page.rootInstance.titleChange.emit).toHaveBeenCalledWith(updatedPanelTitle);\n      } else {\n        expect(mgPanel.panelTitle).toBe(args.panelTitle);\n        expect(page.rootInstance.titleChange.emit).not.toHaveBeenCalled();\n      }\n    });\n\n    test('should NOT update panel title, case no enter in input', async () => {\n      const updatedPanelTitle = 'Updated panel title';\n      const args = { identifier: 'identifier', panelTitle: 'panel title', titleEditable: true };\n      const page = await getPage(args);\n      const mgPanel = page.doc.querySelector('mg-panel');\n      const editButton = mgPanel.shadowRoot.querySelector('.mg-panel__header-title mg-button[is-icon]');\n\n      expect(page.root).toMatchSnapshot();\n\n      jest.spyOn(page.rootInstance.titleChange, 'emit');\n\n      editButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n\n      const mgInputText = mgPanel.shadowRoot.querySelector('mg-input-text');\n      const input = mgInputText.shadowRoot.querySelector('input');\n\n      input.dispatchEvent(new CustomEvent('blur', { bubbles: true }));\n      await page.waitForChanges();\n\n      const afterInputAction = mgPanel.shadowRoot.querySelector('.mg-panel__header-title mg-input-text mg-button:last-of-type');\n\n      afterInputAction.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n      jest.runOnlyPendingTimers();\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n\n      expect(mgPanel.panelTitle).toBe(args.panelTitle);\n      expect(page.rootInstance.titleChange.emit).not.toHaveBeenCalledWith(updatedPanelTitle);\n    });\n\n    test('Should NOT update panel title, case input new value does NOT match pattern', async () => {\n      const updatedPanelTitle = 'joker';\n      const args = {\n        identifier: 'identifier',\n        panelTitle: 'panel title',\n        titleEditable: true,\n        titlePattern: '^(?!(joker)$)[a-z A-Z0-9s]+$',\n        titlePatternErrorMessage: \"You can't enter a bad guy !\",\n      };\n      const page = await getPage(args);\n      const mgPanel = page.doc.querySelector('mg-panel');\n      const editButton = mgPanel.shadowRoot.querySelector('.mg-panel__header-title mg-button[is-icon]');\n\n      expect(page.root).toMatchSnapshot();\n\n      jest.spyOn(page.rootInstance.titleChange, 'emit');\n\n      // first switch to title edition\n      editButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n\n      const mgInputText = mgPanel.shadowRoot.querySelector('mg-input-text');\n      const input = mgInputText.shadowRoot.querySelector('input');\n      input.checkValidity = jest.fn(() => false);\n      Object.defineProperty(input, 'validity', {\n        get: jest.fn(() => ({\n          patternMismatch: false,\n        })),\n      });\n\n      // second update title with a falsy update title\n      input.value = updatedPanelTitle;\n      input.dispatchEvent(new CustomEvent('input', { bubbles: true }));\n      await page.waitForChanges();\n\n      input.dispatchEvent(new CustomEvent('blur', { bubbles: true }));\n      await page.waitForChanges();\n\n      // and click on validate button\n      const afterInputAction = mgPanel.shadowRoot.querySelector('.mg-panel__header-title mg-input-text mg-button:last-of-type');\n\n      afterInputAction.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n      jest.runOnlyPendingTimers();\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n\n      expect(mgPanel.panelTitle).toBe(args.panelTitle);\n      expect(page.rootInstance.titleChange.emit).not.toHaveBeenCalledWith(updatedPanelTitle);\n\n      // finaly return to default view by clicking on cancel button\n      const cancelAction = mgPanel.shadowRoot.querySelector('.mg-panel__header-title mg-input-text mg-button:last-of-type');\n\n      cancelAction.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n      jest.runOnlyPendingTimers();\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n    });\n  });\n});\n"]}

package/dist/collection/components/molecules/mg-popover/mg-popover-content/mg-popover-content.css

@@ -0,0 +1,135 @@
+:host {
+  display: none;
+  padding: 1rem;
+  z-index: 2000;
+  color: hsl(var(--mg-popover-font-color));
+  position: relative;
+}
+
+:host([data-show]) {
+  display: block;
+}
+
+:host([data-popper-placement^=left-start]),
+:host([data-popper-placement^=left-end]),
+:host([data-popper-placement^=right-start]),
+:host([data-popper-placement^=right-end]) {
+  padding: 0 1rem;
+}
+
+.mg-popover-content {
+  --mg-card-max-width: var(--mg-popover-max-width);
+  --mg-card-min-width: var(--mg-popover-min-width);
+}
+.mg-popover-content mg-button {
+  float: right;
+  margin-right: calc(0rem - (var(--default-size) - var(--mg-icon-regular-size)) / 2);
+  margin-top: calc(0rem - (var(--default-size) - var(--mg-popover-title-font-size) * var(--line-height)) / 2);
+  margin-left: 3rem;
+}
+.mg-popover-content__title ::slotted([slot=title]) {
+  margin: 0 0 1rem !important;
+  font-size: var(--mg-popover-title-font-size) !important;
+  font-weight: 600;
+}
+.mg-popover-content ::slotted(*) {
+  --mg-card-border: var(--mg-card-border-default);
+  --mg-card-padding: var(--mg-card-padding-default);
+  --mg-card-border-radius: var(--mg-card-border-radius-default);
+  --mg-card-background: var(--mg-card-background-default);
+  --mg-card-box-shadow: var(--mg-card-box-shadow-default);
+  --mg-card-max-width: unset;
+  --mg-card-min-width: unset;
+}
+
+/**
+* Arrow hide
+*/
+:host([data-popper-placement^=top][data-arrow-hide]) {
+  padding-bottom: 0;
+}
+
+:host([data-popper-placement^=bottom][data-arrow-hide]) {
+  padding-top: 0;
+}
+
+:host([data-popper-placement$=end][data-arrow-hide]),
+:host([data-popper-placement^=left][data-arrow-hide]) {
+  padding-right: 0;
+}
+
+:host([data-popper-placement$=start][data-arrow-hide]),
+:host([data-popper-placement^=right][data-arrow-hide]) {
+  padding-left: 0;
+}
+
+/**
+* Arrow style
+*/
+::slotted([slot=arrow]) {
+  position: absolute;
+  visibility: hidden;
+  width: calc(3rem + 2 * var(--mg-card-border-radius) + 2rem);
+  height: calc(3rem + 2 * var(--mg-card-border-radius) + 2rem);
+  /**
+  * Arrow position
+  */
+}
+::slotted([slot=arrow]):before {
+  visibility: visible;
+  content: "";
+  position: absolute;
+}
+:host([data-arrow-hide]) ::slotted([slot=arrow]) {
+  display: none;
+}
+:host([data-popper-placement^=top]) ::slotted([slot=arrow]), :host([data-popper-placement^=bottom]) ::slotted([slot=arrow]) {
+  height: 1rem;
+}
+:host([data-popper-placement^=top]) ::slotted([slot=arrow]):before, :host([data-popper-placement^=bottom]) ::slotted([slot=arrow]):before {
+  left: calc(var(--mg-card-border-radius) + 1rem);
+  border-right: calc(3rem / 2) solid transparent;
+  border-left: calc(3rem / 2) solid transparent;
+}
+:host([data-popper-placement^=top]) ::slotted([slot=arrow]) {
+  bottom: 0.1rem;
+  filter: drop-shadow(0 0.5rem 0.25rem hsl(var(--color-dark), 0.15));
+}
+:host([data-popper-placement^=top]) ::slotted([slot=arrow]):before {
+  border-top: 1rem solid hsl(var(--mg-popover-background-color));
+}
+:host([data-popper-placement^=bottom]) ::slotted([slot=arrow]) {
+  top: 0.1rem;
+  filter: drop-shadow(0 -0.5rem 0.25rem hsl(var(--color-dark), 0.15));
+}
+:host([data-popper-placement^=bottom]) ::slotted([slot=arrow]):before {
+  border-bottom: 1rem solid hsl(var(--mg-popover-background-color));
+}
+:host([data-popper-placement^=left]) ::slotted([slot=arrow]), :host([data-popper-placement^=right]) ::slotted([slot=arrow]) {
+  width: 1rem;
+}
+:host([data-popper-placement^=left]) ::slotted([slot=arrow]):before, :host([data-popper-placement^=right]) ::slotted([slot=arrow]):before {
+  top: calc(var(--mg-card-border-radius) + 1rem);
+  border-top: calc(3rem / 2) solid transparent;
+  border-bottom: calc(3rem / 2) solid transparent;
+}
+:host([data-popper-placement^=left]) ::slotted([slot=arrow]) {
+  right: 0.1rem;
+  filter: drop-shadow(0.5rem 0 0.25rem hsl(var(--color-dark), 0.15));
+}
+:host([data-popper-placement^=left]) ::slotted([slot=arrow]):before {
+  border-left: 1rem solid hsl(var(--mg-popover-background-color));
+}
+:host([data-popper-placement^=right]) ::slotted([slot=arrow]) {
+  left: 0.1rem;
+  filter: drop-shadow(-0.5rem 0 0.25rem hsl(var(--color-dark), 0.15));
+}
+:host([data-popper-placement^=right]) ::slotted([slot=arrow]):before {
+  border-right: 1rem solid hsl(var(--mg-popover-background-color));
+}
+:host([data-popper-placement^=left-start]) ::slotted([slot=arrow]), :host([data-popper-placement^=left-end]) ::slotted([slot=arrow]), :host([data-popper-placement^=right-start]) ::slotted([slot=arrow]), :host([data-popper-placement^=right-end]) ::slotted([slot=arrow]) {
+  height: calc(3rem + 2 * var(--mg-card-border-radius));
+}
+:host([data-popper-placement^=left-start]) ::slotted([slot=arrow]):before, :host([data-popper-placement^=left-end]) ::slotted([slot=arrow]):before, :host([data-popper-placement^=right-start]) ::slotted([slot=arrow]):before, :host([data-popper-placement^=right-end]) ::slotted([slot=arrow]):before {
+  top: var(--mg-card-border-radius);
+}

package/dist/collection/components/molecules/mg-popover/mg-popover-content/mg-popover-content.js

@@ -0,0 +1,101 @@
+import { Host, h } from "@stencil/core";
+import { isTagName, ClassList } from "../../../../utils/components.utils";
+import { initLocales } from "../../../../locales";
+export class MgPopoverContent {
+  constructor() {
+    /**
+     * Handle action for close button
+     */
+    this.handleCloseButton = () => {
+      this.hideContent.emit();
+    };
+    this.closeButton = false;
+    this.classCollection = new ClassList(['mg-popover-content']);
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Check if component props are valide
+   */
+  componentWillLoad() {
+    // Get locales
+    this.messages = initLocales(this.element).messages;
+  }
+  /**
+   * Check if component slots are valide
+   */
+  componentDidLoad() {
+    const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+    const slottedTitleElement = this.element.querySelector('[slot="title"]');
+    if (slottedTitleElement && !isTagName(slottedTitleElement, headingTags)) {
+      throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}`);
+    }
+  }
+  /**
+   * Render
+   * @returns HTML Element
+   */
+  render() {
+    return (h(Host, null, h("mg-card", { class: this.classCollection.join() }, this.closeButton && (h("mg-button", { "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { icon: "cross" }))), h("div", { class: "mg-popover-content__title" }, h("slot", { name: "title" })), h("slot", { name: "content" })), h("slot", { name: "arrow" })));
+  }
+  static get is() { return "mg-popover-content"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["mg-popover-content.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["mg-popover-content.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "closeButton": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define if popover has a cross button"
+        },
+        "attribute": "close-button",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "classCollection": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "hideContent",
+        "name": "hide-content",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emited event when close button is clicked"
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "element"; }
+}
+//# sourceMappingURL=mg-popover-content.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-popover-content.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-popover/mg-popover-content/mg-popover-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAgB,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC9F,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAC1E,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAOlD,MAAM,OAAO,gBAAgB;;IAgC3B;;OAEG;IACK,sBAAiB,GAAG,GAAS,EAAE;MACrC,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;IAC1B,CAAC,CAAC;uBAjBoB,KAAK;2BAKW,IAAI,SAAS,CAAC,CAAC,oBAAoB,CAAC,CAAC;;EAc3E;;iBAEe;EAEf;;KAEG;EACH,iBAAiB;IACf,cAAc;IACd,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;EACrD,CAAC;EAED;;KAEG;EACH,gBAAgB;IACd,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;IAEzD,MAAM,mBAAmB,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACzE,IAAI,mBAAmB,IAAI,CAAC,SAAS,CAAC,mBAAmB,EAAE,WAAW,CAAC,EAAE;MACvE,MAAM,IAAI,KAAK,CAAC,iDAAiD,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KAC5F;EACH,CAAC;EAED;;;KAGG;EACH,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,eAAS,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;QACxC,IAAI,CAAC,WAAW,IAAI,CACnB,kCAAmB,OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,iBAAiB;UACnG,eAAS,IAAI,EAAC,OAAO,GAAW,CACtB,CACb;QACD,WAAK,KAAK,EAAC,2BAA2B;UACpC,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB;QACN,YAAM,IAAI,EAAC,SAAS,GAAQ,CACpB;MACV,YAAM,IAAI,EAAC,OAAO,GAAQ,CACrB,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, h, Prop, EventEmitter, Event, State } from '@stencil/core';\nimport { isTagName, ClassList } from '../../../../utils/components.utils';\nimport { initLocales } from '../../../../locales';\n\n@Component({\n  tag: 'mg-popover-content',\n  styleUrl: 'mg-popover-content.scss',\n  shadow: true,\n})\nexport class MgPopoverContent {\n  /************\n   * Internal *\n   ************/\n\n  // Locales\n  private messages;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgPopoverContentElement;\n\n  /**\n   * Define if popover has a cross button\n   */\n  @Prop() closeButton = false;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-popover-content']);\n\n  /**\n   * Emited event when close button is clicked\n   */\n  @Event({ eventName: 'hide-content' }) hideContent: EventEmitter<string>;\n\n  /**\n   * Handle action for close button\n   */\n  private handleCloseButton = (): void => {\n    this.hideContent.emit();\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are valide\n   */\n  componentWillLoad(): void {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n  }\n\n  /**\n   * Check if component slots are valide\n   */\n  componentDidLoad(): void {\n    const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];\n\n    const slottedTitleElement = this.element.querySelector('[slot=\"title\"]');\n    if (slottedTitleElement && !isTagName(slottedTitleElement, headingTags)) {\n      throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}`);\n    }\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <Host>\n        <mg-card class={this.classCollection.join()}>\n          {this.closeButton && (\n            <mg-button is-icon variant=\"flat\" label={this.messages.general.close} onClick={this.handleCloseButton}>\n              <mg-icon icon=\"cross\"></mg-icon>\n            </mg-button>\n          )}\n          <div class=\"mg-popover-content__title\">\n            <slot name=\"title\"></slot>\n          </div>\n          <slot name=\"content\"></slot>\n        </mg-card>\n        <slot name=\"arrow\"></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/molecules/mg-popover/mg-popover.css

@@ -8,115 +8,4 @@
 }
 :host::slotted(*) {
   display: inline-block;
-}
-
-.mg-popover {
-  display: none;
-  padding: 1rem;
-  z-index: 2000;
-  color: hsl(var(--mg-popover-font-color));
-}
-.mg-popover mg-card {
-  --mg-card-max-width: var(--mg-popover-max-width);
-  --mg-card-min-width: var(--mg-popover-min-width);
-  position: relative;
-}
-.mg-popover[data-show] {
-  display: block;
-}
-.mg-popover mg-button {
-  float: right;
-  margin-right: calc(0rem - (var(--default-size) - var(--mg-icon-regular-size)) / 2);
-  margin-top: calc(0rem - (var(--default-size) - var(--mg-popover-title-font-size) * var(--line-height)) / 2);
-  margin-left: 3rem;
-}
-.mg-popover__arrow {
-  position: absolute;
-  visibility: hidden;
-  width: calc(3rem + 2 * var(--mg-card-border-radius) + 2rem);
-  height: calc(3rem + 2 * var(--mg-card-border-radius) + 2rem);
-}
-.mg-popover__arrow:before {
-  visibility: visible;
-  content: "";
-  position: absolute;
-}
-.mg-popover[data-popper-placement^=top] > .mg-popover__arrow, .mg-popover[data-popper-placement^=bottom] > .mg-popover__arrow {
-  height: 1rem;
-}
-.mg-popover[data-popper-placement^=top] > .mg-popover__arrow:before, .mg-popover[data-popper-placement^=bottom] > .mg-popover__arrow:before {
-  left: calc(var(--mg-card-border-radius) + 1rem);
-  border-right: calc(3rem / 2) solid transparent;
-  border-left: calc(3rem / 2) solid transparent;
-}
-.mg-popover[data-popper-placement^=top] > .mg-popover__arrow {
-  bottom: 0.1rem;
-  filter: drop-shadow(0 0.5rem 0.25rem hsl(var(--color-dark), 0.15));
-}
-.mg-popover[data-popper-placement^=top] > .mg-popover__arrow:before {
-  border-top: 1rem solid hsl(var(--mg-popover-background-color));
-}
-.mg-popover[data-popper-placement^=bottom] > .mg-popover__arrow {
-  top: 0.1rem;
-  filter: drop-shadow(0 -0.5rem 0.25rem hsl(var(--color-dark), 0.15));
-}
-.mg-popover[data-popper-placement^=bottom] > .mg-popover__arrow:before {
-  border-bottom: 1rem solid hsl(var(--mg-popover-background-color));
-}
-.mg-popover[data-popper-placement^=left] > .mg-popover__arrow, .mg-popover[data-popper-placement^=right] > .mg-popover__arrow {
-  width: 1rem;
-}
-.mg-popover[data-popper-placement^=left] > .mg-popover__arrow:before, .mg-popover[data-popper-placement^=right] > .mg-popover__arrow:before {
-  top: calc(var(--mg-card-border-radius) + 1rem);
-  border-top: calc(3rem / 2) solid transparent;
-  border-bottom: calc(3rem / 2) solid transparent;
-}
-.mg-popover[data-popper-placement^=left] > .mg-popover__arrow {
-  right: 0.1rem;
-  filter: drop-shadow(0.5rem 0 0.25rem hsl(var(--color-dark), 0.15));
-}
-.mg-popover[data-popper-placement^=left] > .mg-popover__arrow:before {
-  border-left: 1rem solid hsl(var(--mg-popover-background-color));
-}
-.mg-popover[data-popper-placement^=right] > .mg-popover__arrow {
-  left: 0.1rem;
-  filter: drop-shadow(-0.5rem 0 0.25rem hsl(var(--color-dark), 0.15));
-}
-.mg-popover[data-popper-placement^=right] > .mg-popover__arrow:before {
-  border-right: 1rem solid hsl(var(--mg-popover-background-color));
-}
-.mg-popover[data-popper-placement^=left-start], .mg-popover[data-popper-placement^=left-end], .mg-popover[data-popper-placement^=right-start], .mg-popover[data-popper-placement^=right-end] {
-  padding: 0 1rem;
-}
-.mg-popover[data-popper-placement^=left-start] > .mg-popover__arrow, .mg-popover[data-popper-placement^=left-end] > .mg-popover__arrow, .mg-popover[data-popper-placement^=right-start] > .mg-popover__arrow, .mg-popover[data-popper-placement^=right-end] > .mg-popover__arrow {
-  height: calc(3rem + 2 * var(--mg-card-border-radius));
-}
-.mg-popover[data-popper-placement^=left-start] > .mg-popover__arrow:before, .mg-popover[data-popper-placement^=left-end] > .mg-popover__arrow:before, .mg-popover[data-popper-placement^=right-start] > .mg-popover__arrow:before, .mg-popover[data-popper-placement^=right-end] > .mg-popover__arrow:before {
-  top: var(--mg-card-border-radius);
-}
-.mg-popover__title ::slotted([slot=title]) {
-  margin: 0 0 1rem !important;
-  font-size: var(--mg-popover-title-font-size) !important;
-  font-weight: 600;
-}
-.mg-popover--arrow-hide.mg-popover[data-popper-placement^=top] {
-  padding-bottom: 0;
-}
-.mg-popover--arrow-hide.mg-popover[data-popper-placement^=bottom] {
-  padding-top: 0;
-}
-.mg-popover--arrow-hide.mg-popover[data-popper-placement$=end], .mg-popover--arrow-hide.mg-popover[data-popper-placement^=left] {
-  padding-right: 0;
-}
-.mg-popover--arrow-hide.mg-popover[data-popper-placement$=start], .mg-popover--arrow-hide.mg-popover[data-popper-placement^=right] {
-  padding-left: 0;
-}
-.mg-popover ::slotted(*) {
-  --mg-card-border: var(--mg-card-border-default);
-  --mg-card-padding: var(--mg-card-padding-default);
-  --mg-card-border-radius: var(--mg-card-border-radius-default);
-  --mg-card-background: var(--mg-card-background-default);
-  --mg-card-box-shadow: var(--mg-card-box-shadow-default);
-  --mg-card-max-width: unset;
-  --mg-card-min-width: unset;
 }