@mgdis/mg-components 5.16.0 → 5.18.0

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

@@ -0,0 +1,213 @@
+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('Should throw error when props association are unauthorized %s:', async () => {
+      expect.assertions(1);
+      try {
+        await getPage({ identifier: 'identifier', panelTitle: 'panel title', titlePattern: /joker/ });
+      }
+      catch (err) {
+        expect(err.message).toBe('<mg-panel> prop "titleEditable" must be set to "true".');
+      }
+    });
+    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":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AACvE,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAExE,MAAM,OAAO,GAAG,CAAC,IAAI,EAAE,IAAK,EAAE,EAAE;EAC9B,MAAM,IAAI,GAAG,WAAW,CAAC;IACvB,UAAU,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,WAAW,CAAC;IAC5C,QAAQ,EAAE,GAAG,EAAE,CAAC,gCAAc,IAAI,GAAG,IAAI,CAAY;GACtD,CAAC,CAAC;EACH,IAAI,CAAC,YAAY,EAAE,CAAC;EAEpB,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;EACxB,SAAS,CAAC,GAAG,EAAE,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,SAAS,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;EACvE,QAAQ,CAAC,GAAG,EAAE,CAAC,OAAO,MAAM,CAAC,gBAAgB,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;EAE/D,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;EACvC,SAAS,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC,CAAC;EAE7C,IAAI,CAAC,IAAI,CAAC;IACR,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE;IACvD,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,QAAQ,EAAE,IAAI,EAAE;IACvE,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,aAAa,EAAE,IAAI,EAAE;IAC5E,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,aAAa,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,wBAAwB,EAAE,6BAA6B,EAAE;IAC5J,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE;IACxF,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE;IACxF,GAAG,cAAc,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,aAAa,EAAE,CAAC,CAAC;IAChH,GAAG,oBAAoB,CAAC,GAAG,CAAC,mBAAmB,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,mBAAmB,EAAE,CAAC,CAAC;IAClI,GAAG,oBAAoB,CAAC,GAAG,CAAC,mBAAmB,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,aAAa,EAAE,IAAI,EAAE,mBAAmB,EAAE,CAAC,CAAC;GACxJ,CAAC,CAAC,6BAA6B,EAAE,KAAK,EAAC,IAAI,EAAC,EAAE;IAC7C,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,QAAQ,CAAC,QAAQ,EAAE,GAAG,EAAE;IACtB,IAAI,CAAC,gEAAgE,EAAE,KAAK,IAAI,EAAE;MAChF,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;MACrB,IAAI;QACF,MAAM,OAAO,CAAC,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC,CAAC;OAC/F;MAAC,OAAO,GAAG,EAAE;QACZ,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,wDAAwD,CAAC,CAAC;OACpF;IACH,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,SAAS,CAAC,CAAC,CAAC,wDAAwD,EAAE,KAAK,EAAC,UAAU,EAAC,EAAE;MAC3G,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;MACrB,IAAI;QACF,MAAM,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC;OAC/B;MAAC,OAAO,GAAG,EAAE;QACZ,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,2CAA2C,CAAC,CAAC;OAC1E;IACH,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,QAAQ,CAAC,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,aAAa,EAAE,aAAa,EAAE,CAAC,CAAC,CAAC,CACjG,4DAA4D,EAC5D,KAAK,EAAC,KAAK,EAAC,EAAE;MACZ,IAAI;QACF,MAAM,OAAO,CAAC,KAAK,CAAC,CAAC;OACtB;MAAC,OAAO,GAAG,EAAE;QACZ,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,mDAAmD,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;OAC9G;IACH,CAAC,CACF,CAAC;IAEF,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,QAAQ,CAAC,CAAC,GAAG,CAAC,mBAAmB,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,aAAa,EAAE,mBAAmB,EAAE,CAAC,CAAC,CAAC,CAC7G,kEAAkE,EAClE,KAAK,EAAC,KAAK,EAAC,EAAE;MACZ,IAAI;QACF,MAAM,OAAO,CAAC,KAAK,CAAC,CAAC;OACtB;MAAC,OAAO,GAAG,EAAE;QACZ,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,yDAAyD,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;OAC1H;IACH,CAAC,CACF,CAAC;EACJ,CAAC,CAAC,CAAC;EAEH,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,2CAA2C,EAAE,KAAK,EAAC,QAAQ,EAAC,EAAE;MACrF,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,QAAQ,EAAE,CAAC,CAAC;MAC9F,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;MACnD,MAAM,cAAc,GAAG,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,yBAAyB,CAAC,CAAC;MAEnF,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;MAEjE,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;MAEpC,cAAc,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;MAC1E,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;MAEpC,cAAc,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;MAC1E,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;MAEpC,MAAM,CAAC,GAAG,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,6DAA6D,EAAE,KAAK,EAAC,QAAQ,EAAC,EAAE;MACvG,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,QAAQ,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC,CAAC;MAC1H,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;MACnD,MAAM,cAAc,GAAG,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,yBAAyB,CAAC,CAAC;MAEnF,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;MAEpC,cAAc,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;MAC1E,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,gCAAgC,EAAE,KAAK,EAAC,aAAa,EAAC,EAAE;MAC/E,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,aAAa,EAAE,CAAC,CAAC;MACnG,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;MACnD,MAAM,UAAU,GAAG,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,4CAA4C,CAAC,CAAC;MAElG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;MAEpC,IAAI,aAAa,EAAE;QACjB,UAAU,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QACtE,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;QAEpC,UAAU,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QACtE,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;OACrC;IACH,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,cAAc,CAAC,CAAC,CAAC,oCAAoC,EAAE,KAAK,EAAC,UAAU,EAAC,EAAE;MACpG,MAAM,iBAAiB,GAAG,qBAAqB,CAAC;MAChD,MAAM,IAAI,GAAG,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC;MAC1F,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;MACjC,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;MACnD,MAAM,UAAU,GAAG,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,4CAA4C,CAAC,CAAC;MAElG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;MAEpC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;MAElD,UAAU,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;MACtE,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;MAEpC,MAAM,WAAW,GAAG,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;MACtE,MAAM,KAAK,GAAG,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;MAE5D,KAAK,CAAC,KAAK,GAAG,iBAAiB,CAAC;MAChC,KAAK,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;MACjE,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,KAAK,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;MAChE,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,MAAM,gBAAgB,GAAG,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,mDAAmD,UAAU,EAAE,CAAC,CAAC;MAE3H,gBAAgB,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;MAC5E,IAAI,CAAC,oBAAoB,EAAE,CAAC;MAC5B,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;MAEpC,IAAI,UAAU,KAAK,cAAc,EAAE;QACjC,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QACnD,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;OACpF;WAAM;QACL,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACjD,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC;OACnE;IACH,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,uDAAuD,EAAE,KAAK,IAAI,EAAE;MACvE,MAAM,iBAAiB,GAAG,qBAAqB,CAAC;MAChD,MAAM,IAAI,GAAG,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC;MAC1F,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;MACjC,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;MACnD,MAAM,UAAU,GAAG,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,4CAA4C,CAAC,CAAC;MAElG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;MAEpC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;MAElD,UAAU,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;MACtE,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;MAEpC,MAAM,WAAW,GAAG,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;MACtE,MAAM,KAAK,GAAG,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;MAE5D,KAAK,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;MAChE,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,MAAM,gBAAgB,GAAG,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,8DAA8D,CAAC,CAAC;MAE1H,gBAAgB,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;MAC5E,IAAI,CAAC,oBAAoB,EAAE,CAAC;MAC5B,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;MAEpC,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;MACjD,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;IACzF,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,4EAA4E,EAAE,KAAK,IAAI,EAAE;MAC5F,MAAM,iBAAiB,GAAG,OAAO,CAAC;MAClC,MAAM,IAAI,GAAG;QACX,UAAU,EAAE,YAAY;QACxB,UAAU,EAAE,aAAa;QACzB,aAAa,EAAE,IAAI;QACnB,YAAY,EAAE,8BAA8B;QAC5C,wBAAwB,EAAE,6BAA6B;OACxD,CAAC;MACF,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;MACjC,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;MACnD,MAAM,UAAU,GAAG,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,4CAA4C,CAAC,CAAC;MAElG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;MAEpC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;MAElD,gCAAgC;MAChC,UAAU,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;MACtE,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;MAEpC,MAAM,WAAW,GAAG,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;MACtE,MAAM,KAAK,GAAG,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;MAC5D,KAAK,CAAC,aAAa,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC;MAC3C,MAAM,CAAC,cAAc,CAAC,KAAK,EAAE,UAAU,EAAE;QACvC,GAAG,EAAE,IAAI,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC;UAClB,eAAe,EAAE,KAAK;SACvB,CAAC,CAAC;OACJ,CAAC,CAAC;MAEH,gDAAgD;MAChD,KAAK,CAAC,KAAK,GAAG,iBAAiB,CAAC;MAChC,KAAK,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;MACjE,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,KAAK,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;MAChE,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,+BAA+B;MAC/B,MAAM,gBAAgB,GAAG,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,8DAA8D,CAAC,CAAC;MAE1H,gBAAgB,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;MAC5E,IAAI,CAAC,oBAAoB,EAAE,CAAC;MAC5B,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;MAEpC,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;MACjD,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;MAEvF,6DAA6D;MAC7D,MAAM,YAAY,GAAG,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,8DAA8D,CAAC,CAAC;MAEtH,YAAY,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;MACxE,IAAI,CAAC,oBAAoB,EAAE,CAAC;MAC5B,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","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('Should throw error when props association are unauthorized %s:', async () => {\n      expect.assertions(1);\n      try {\n        await getPage({ identifier: 'identifier', panelTitle: 'panel title', titlePattern: /joker/ });\n      } catch (err) {\n        expect(err.message).toBe('<mg-panel> prop \"titleEditable\" must be set to \"true\".');\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.js

@@ -1,6 +1,6 @@
-import { Host, h } from '@stencil/core';
-import { isTagName, ClassList } from '../../../../utils/components.utils';
-import { initLocales } from '../../../../locales';
+import { Host, h } from "@stencil/core";
+import { isTagName, ClassList } from "../../../../utils/components.utils";
+import { initLocales } from "../../../../locales";
 export class MgPopoverContent {
   constructor() {
     /**
@@ -98,3 +98,4 @@ export class MgPopoverContent {
   }
   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.js

@@ -1,6 +1,6 @@
-import { Host, h } from '@stencil/core';
-import { createID, getWindows } from '../../../utils/components.utils';
-import { createPopper } from '@popperjs/core';
+import { Host, h } from "@stencil/core";
+import { createID, getWindows } from "../../../utils/components.utils";
+import { createPopper } from "@popperjs/core";
 export class MgPopover {
   constructor() {
     /**
@@ -52,21 +52,27 @@ export class MgPopover {
      * Render popover content element
      */
     this.renderPopoverContent = () => {
-      this.mgPopoverContent = document.createElement('mg-popover-content');
-      this.mgPopoverContent.setAttribute('slot', 'content');
-      this.mgPopoverContent.setAttribute('id', this.identifier);
-      this.mgPopoverContent.addEventListener('hide-content', this.handleHideContent);
-      const arrow = document.createElement('div');
-      arrow.setAttribute('slot', 'arrow');
-      arrow.dataset.popperArrow = '';
-      this.mgPopoverContent.appendChild(arrow);
-      // insert elements in DOM
-      ['[slot="title"]', '[slot="content"]:not(mg-popover-content)'].forEach(slotType => {
-        Array.from(this.element.querySelectorAll(slotType)).forEach(slot => {
-          this.mgPopoverContent.appendChild(slot);
+      const mgPopoverContent = this.element.querySelector('mg-popover-content');
+      if (mgPopoverContent === null) {
+        this.mgPopoverContent = document.createElement('mg-popover-content');
+        this.mgPopoverContent.setAttribute('slot', 'content');
+        this.mgPopoverContent.setAttribute('id', this.identifier);
+        this.mgPopoverContent.addEventListener('hide-content', this.handleHideContent);
+        const arrow = document.createElement('div');
+        arrow.setAttribute('slot', 'arrow');
+        arrow.dataset.popperArrow = '';
+        this.mgPopoverContent.appendChild(arrow);
+        // insert elements in DOM
+        ['[slot="title"]', '[slot="content"]:not(mg-popover-content)'].forEach(slotType => {
+          Array.from(this.element.querySelectorAll(slotType)).forEach(slot => {
+            this.mgPopoverContent.appendChild(slot);
+          });
         });
-      });
-      this.element.appendChild(this.mgPopoverContent);
+        this.element.appendChild(this.mgPopoverContent);
+      }
+      else {
+        mgPopoverContent.setAttribute('id', this.identifier);
+      }
     };
     this.identifier = createID('mg-popover');
     this.placement = 'bottom';
@@ -75,6 +81,10 @@ export class MgPopover {
     this.display = false;
     this.disabled = false;
   }
+  validateIdentifier() {
+    // use renderPopoverContent to update popover-content id
+    this.renderPopoverContent();
+  }
   validateArrowHide(newValue) {
     if (newValue)
       this.mgPopoverContent.dataset.arrowHide = '';
@@ -111,6 +121,7 @@ export class MgPopover {
     // render mg-popover-content slot
     this.renderPopoverContent();
     this.validateCloseButton(this.closeButton);
+    this.validateIdentifier();
     this.validateArrowHide(this.arrowHide);
   }
   /**
@@ -135,6 +146,12 @@ export class MgPopover {
             offset: [0, 0],
           },
         },
+        {
+          name: 'flip',
+          options: {
+            fallbackPlacements: ['auto'],
+          },
+        },
       ],
     });
     // add resize observer
@@ -203,7 +220,8 @@ export class MgPopover {
           "references": {
             "Placement": {
               "location": "import",
-              "path": "@popperjs/core"
+              "path": "@popperjs/core",
+              "id": "../../node_modules/.pnpm/@popperjs+core@2.11.7/node_modules/@popperjs/core/index.d.ts::Placement"
             }
           }
         },
@@ -312,6 +330,9 @@ export class MgPopover {
   static get elementRef() { return "element"; }
   static get watchers() {
     return [{
+        "propName": "identifier",
+        "methodName": "validateIdentifier"
+      }, {
         "propName": "arrowHide",
         "methodName": "validateArrowHide"
       }, {
@@ -323,3 +344,4 @@ export class MgPopover {
       }];
   }
 }
+//# sourceMappingURL=mg-popover.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-popover.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-popover/mg-popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, h, Prop, Watch, EventEmitter, Event } from '@stencil/core';\nimport { createID, getWindows } from '../../../utils/components.utils';\nimport { Instance as PopperInstance, createPopper, Placement } from '@popperjs/core';\n\n@Component({\n  tag: 'mg-popover',\n  styleUrl: 'mg-popover.scss',\n  shadow: true,\n})\nexport class MgPopover {\n  /************\n   * Internal *\n   ************/\n\n  private popper: PopperInstance;\n  private mgPopover: HTMLElement;\n  private mgPopoverContent: HTMLMgPopoverContentElement;\n  private windows: Window[];\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgPopoverElement;\n\n  /**\n   * Sets an `id` attribute.\n   * Needed by the input for accessibility `aria-decribedby`.\n   */\n  @Prop() identifier: string = createID('mg-popover');\n  @Watch('identifier')\n  validateIdentifier(): void {\n    // use renderPopoverContent to update popover-content id\n    this.renderPopoverContent();\n  }\n\n  /**\n   * Popover placement\n   */\n  @Prop() placement: Placement = 'bottom';\n\n  /**\n   * Hide popover arrow\n   */\n  @Prop() arrowHide = false;\n  @Watch('arrowHide')\n  validateArrowHide(newValue: MgPopover['arrowHide']): void {\n    if (newValue) this.mgPopoverContent.dataset.arrowHide = '';\n    else delete this.mgPopoverContent.dataset.arrowHide;\n  }\n\n  /**\n   * Define if popover has a cross button\n   */\n  @Prop() closeButton = false;\n  @Watch('closeButton')\n  validateCloseButton(newValue: MgPopover['arrowHide']): void {\n    this.mgPopoverContent.closeButton = newValue;\n  }\n\n  /**\n   * Display popover\n   */\n  @Prop({ mutable: true }) display = false;\n  @Watch('display')\n  handleDisplay(newValue: boolean): void {\n    if (newValue) {\n      this.show();\n    } else {\n      this.hide();\n    }\n    this.displayChange.emit(newValue);\n  }\n\n  /**\n   * Disable popover\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Emited event when display value change\n   */\n  @Event({ eventName: 'display-change' }) displayChange: EventEmitter<boolean>;\n\n  /**\n   * Check if clicked outside of component\n   * @param event - mouse event\n   */\n  private clickOutside = (event: MouseEvent & { target: HTMLElement }): void => {\n    const closestElement: HTMLElement = event.target.closest(`[data-mg-popover-guard]`);\n    if (!this.disabled && event.target.closest('mg-popover') !== this.element && closestElement?.dataset.mgPopoverGuard !== this.identifier) {\n      this.display = false;\n    }\n  };\n\n  /**\n   * Show popover\n   */\n  private show = (): void => {\n    // Make the popover visible\n    this.mgPopover.dataset.show = '';\n    // Enable the event listeners\n    this.popper.setOptions(options => ({\n      ...options,\n      modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }],\n    }));\n    // hide when click outside\n    // setTimeout is used to prevent event to trigger after creation\n    setTimeout(() => {\n      this.windows.forEach((localWindow: Window) => {\n        localWindow.addEventListener('click', this.clickOutside, false);\n      });\n    }, 0);\n  };\n\n  /**\n   * Hide popover\n   */\n  private hide = (): void => {\n    // Hide the popover\n    this.mgPopover.removeAttribute('data-show');\n    // Disable the event listeners\n    this.popper.setOptions(options => ({\n      ...options,\n      modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }],\n    }));\n    // Remove event listener\n    this.windows.forEach((localWindow: Window) => {\n      localWindow.removeEventListener('click', this.clickOutside, false);\n    });\n  };\n\n  /**\n   * Handle content hide event\n   */\n  private handleHideContent = (): void => {\n    this.display = false;\n  };\n\n  /**\n   * Render popover content element\n   */\n  private renderPopoverContent = (): void => {\n    const mgPopoverContent = this.element.querySelector('mg-popover-content');\n    if (mgPopoverContent === null) {\n      this.mgPopoverContent = document.createElement('mg-popover-content');\n      this.mgPopoverContent.setAttribute('slot', 'content');\n      this.mgPopoverContent.setAttribute('id', this.identifier);\n      this.mgPopoverContent.addEventListener('hide-content', this.handleHideContent);\n\n      const arrow = document.createElement('div');\n      arrow.setAttribute('slot', 'arrow');\n      arrow.dataset.popperArrow = '';\n      this.mgPopoverContent.appendChild(arrow);\n\n      // insert elements in DOM\n      ['[slot=\"title\"]', '[slot=\"content\"]:not(mg-popover-content)'].forEach(slotType => {\n        Array.from(this.element.querySelectorAll(slotType)).forEach(slot => {\n          this.mgPopoverContent.appendChild(slot);\n        });\n      });\n      this.element.appendChild(this.mgPopoverContent);\n    } else {\n      mgPopoverContent.setAttribute('id', this.identifier);\n    }\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * update popper position after props change on component did update hook to benefit from render ended\n   */\n  componentDidUpdate(): void {\n    this.popper.update();\n  }\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Get windows to attach events\n    this.windows = getWindows(window);\n    // render mg-popover-content slot\n    this.renderPopoverContent();\n    this.validateCloseButton(this.closeButton);\n    this.validateIdentifier();\n    this.validateArrowHide(this.arrowHide);\n  }\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentDidLoad(): void {\n    // Get popover content\n    this.mgPopover = this.element.querySelector(`#${this.identifier}`);\n\n    //Get interactive element (first element without slot attribute)\n    const interactiveElement: HTMLElement = this.element.querySelector(':not([slot])');\n    // Add aria attributes\n    interactiveElement.setAttribute('aria-controls', this.identifier);\n    interactiveElement.setAttribute('aria-expanded', `${this.display}`);\n\n    // Create popperjs popover\n    this.popper = createPopper(interactiveElement, this.mgPopover, {\n      placement: this.placement,\n      strategy: 'fixed',\n      modifiers: [\n        {\n          name: 'offset',\n          options: {\n            offset: [0, 0],\n          },\n        },\n        {\n          name: 'flip',\n          options: {\n            fallbackPlacements: ['auto'],\n          },\n        },\n      ],\n    });\n\n    // add resize observer\n    new ResizeObserver(() => {\n      this.popper.update();\n    }).observe(this.element.querySelector('mg-popover-content'));\n\n    // Add events to toggle display\n    interactiveElement.addEventListener('click', () => {\n      if (!this.disabled) this.display = !this.display;\n    });\n\n    // Add events to hide popover\n    this.element.addEventListener('keydown', e => {\n      if (!this.disabled && e.code === 'Escape') {\n        this.display = false;\n        interactiveElement.focus();\n      }\n    });\n\n    this.handleDisplay(this.display);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <Host>\n        <slot></slot>\n        <slot name=\"content\"></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,159 @@
+import { createPage } from "../../../../utils/stencil.e2e.test.utils";
+import { renderAttributes } from "../../../../utils/e2e.test.utils";
+describe('mg-popover', () => {
+  describe.each([
+    'auto',
+    'auto-start',
+    'auto-end',
+    'top',
+    'top-start',
+    'top-end',
+    'bottom',
+    'bottom-start',
+    'bottom-end',
+    'right',
+    'right-start',
+    'right-end',
+    'left',
+    'left-start',
+    'left-end',
+  ])('placement %s', placement => {
+    test.each([true, false])('Should render, case hide arrow %s', async (arrowHide) => {
+      const page = await createPage(`<style>mg-button{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}</style>
+        <mg-popover ${renderAttributes({ placement, arrowHide })}>
+        <mg-button>Button</mg-button>
+        <h2 slot="title">Blu bli blo bla</h2>
+        <p slot="content">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+          non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+        </mg-popover>`);
+      const mgPopover = await page.find('mg-popover');
+      const mgButton = await page.find('mg-button');
+      const popover = await page.find('mg-popover mg-popover-content');
+      expect(mgPopover).toHaveClass('hydrated');
+      // display popover on click on slotted element
+      mgButton.triggerEvent('click');
+      await page.waitForChanges();
+      await page.waitForNetworkIdle();
+      expect(popover).toHaveAttribute('data-show');
+      await page.setViewport({ width: 1200, height: 1200 });
+      const screenshot = await page.screenshot();
+      expect(screenshot).toMatchImageSnapshot();
+      // hide popover on click on slotted element
+      mgButton.triggerEvent('click');
+      await page.waitForChanges();
+      await page.waitForNetworkIdle();
+      expect(popover).not.toHaveAttribute('data-show');
+      // display popover on keyboad click event on slotted element
+      await page.keyboard.down('Tab');
+      await page.keyboard.down('Enter');
+      await page.waitForChanges();
+      await page.waitForNetworkIdle();
+      expect(popover).toHaveAttribute('data-show');
+      // hide popover on keyboad escape key
+      await page.keyboard.down('Escape');
+      await page.waitForChanges();
+      await page.waitForNetworkIdle();
+      expect(popover).not.toHaveAttribute('data-show');
+    });
+  });
+  describe.each([
+    '',
+    '<h2 slot="title">Titre un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long</h2>',
+  ])('with or without title', title => {
+    test('Should render with close button', async () => {
+      const page = await createPage(`<mg-popover display close-button>
+        <mg-button>Button</mg-button>
+        ${title}
+        <p slot="content">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+          non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+        </mg-popover>`);
+      const mgPopover = await page.find('mg-popover');
+      expect(mgPopover).toHaveClass('hydrated');
+      await page.setViewport({ width: 500, height: 350 });
+      const screenshot = await page.screenshot();
+      expect(screenshot).toMatchImageSnapshot();
+    });
+  });
+  describe.each(['title', 'content'])('re-position %s slot', slot => {
+    test('should re-position when slot size change', async () => {
+      const tagName = slot === 'title' ? 'h2' : 'p';
+      const page = await createPage(`<style>mg-button{position:fixed;left:50%;transform:translateX(-50%)}</style>
+        <mg-popover ${renderAttributes({ placement: 'bottom-start', display: true })}>
+        <mg-button>Button</mg-button>
+        <${tagName} slot="${slot}">
+          Lorem ipsum
+        </${tagName}>
+        </mg-popover>`, { width: 400, height: 130 });
+      let screenshot = await page.screenshot();
+      expect(screenshot).toMatchImageSnapshot();
+      await page.$eval(`mg-popover-content [slot="${slot}"]`, el => {
+        el.textContent = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit';
+      });
+      await page.waitForChanges();
+      screenshot = await page.screenshot();
+      expect(screenshot).toMatchImageSnapshot();
+    });
+  });
+  test(`should position popover where it have enough place`, async () => {
+    const page = await createPage(`<style>mg-button{position:fixed;left:0;bottom:0}</style>
+      <mg-popover ${renderAttributes({ display: true })}>
+      <mg-button>Button</mg-button>
+      <p slot="content">
+        Lorem ipsum
+      </p>
+      </mg-popover>`, { width: 400, height: 100 });
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+  });
+  describe('style', () => {
+    test('Should render with child mg-card', async () => {
+      const page = await createPage(`<mg-popover display close-button class="custom-popover-card">
+        <mg-button>Button</mg-button>
+        <mg-card slot="content">
+          My custom card
+        </mg-card>
+        </mg-popover>
+        <style>
+          .custom-popover-card {
+            --mg-popover-background-color: var(--color-danger);
+          }
+        </style>
+        `);
+      const mgPopover = await page.find('mg-popover');
+      expect(mgPopover).toHaveClass('hydrated');
+      await page.setViewport({ width: 500, height: 300 });
+      const screenshot = await page.screenshot();
+      expect(screenshot).toMatchImageSnapshot();
+    });
+    test.each(['content', 'title'])('Should render with --mg-popover-max-width', async (slot) => {
+      const page = await createPage(`<mg-popover display close-button class="custom-popover">
+        <mg-button>Button</mg-button>
+        <h2 slot="${slot}">Titre un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long</h2>
+        </mg-popover>
+        <style>
+          .custom-popover {
+            --mg-popover-max-width: 10rem;
+          }
+        </style>
+        `);
+      const mgPopover = await page.find('mg-popover');
+      expect(mgPopover).toHaveClass('hydrated');
+      await page.setViewport({ width: 500, height: 300 });
+      const screenshot = await page.screenshot();
+      expect(screenshot).toMatchImageSnapshot();
+    });
+  });
+});
+//# sourceMappingURL=mg-popover.e2e.js.map

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

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