@mgdis/mg-components 5.16.0 → 5.18.0

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

@@ -0,0 +1,57 @@
+import { setPageContent, expect, describe, testEach, test } from "../../../../utils/playwright.e2e.test.utils";
+import { renderAttributes } from "../../../../utils/e2e.test.utils";
+const createHTML = args => `<mg-pagination ${renderAttributes(args)}></mg-pagination>`;
+describe('mg-pagination', () => {
+  describe('template', () => {
+    testEach([1, 2, 3].flatMap(totalPages => [true, false].flatMap(hidePageCount => [true, false].map(hideNavigationLabels => ({ totalPages, hideNavigationLabels, hidePageCount })))))('render %s', async (page, args) => {
+      await setPageContent(page, createHTML(args));
+      if (args.totalPages > 1)
+        await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+      else
+        expect(await page.locator('mg-pagination').isVisible()).toBe(false);
+    });
+  });
+  describe('navigation', () => {
+    testEach([2, 3, 10])('should success mouse navigation %s', async (page, totalPages) => {
+      await setPageContent(page, createHTML({ totalPages }));
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+      const actions = [...Array(totalPages - 1).keys()];
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      for (const _ of actions) {
+        const nextButton = await page.locator('mg-pagination mg-button:last-of-type');
+        await nextButton.click();
+        await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+      }
+    });
+    test('should success keyboard navigation', async ({ page }) => {
+      await setPageContent(page, createHTML({ totalPages: 5 }));
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+      // take focus on mg-input-select
+      await page.keyboard.down('Tab');
+      await page.keyboard.down('Tab');
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+      // change mg-input-select to value 3
+      await page.keyboard.down('ArrowDown');
+      await page.keyboard.down('ArrowDown');
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+      // take focus on previous button
+      await page.keyboard.down('Shift');
+      await page.keyboard.press('Tab');
+      await page.keyboard.up('Shift');
+      await page.keyboard.down('Enter');
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+      // take focus on next
+      await page.keyboard.down('Tab');
+      await page.keyboard.down('Tab');
+      await page.keyboard.down('Enter');
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+    });
+  });
+  describe('locales', () => {
+    test('render with locale: %s', async ({ page }) => {
+      await setPageContent(page, createHTML({ totalPages: 5, lang: 'fr' }));
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+    });
+  });
+});
+//# sourceMappingURL=mg-pagination.e2e.playwright.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-pagination.e2e.playwright.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-pagination/test/mg-pagination.e2e.playwright.ts"],"names":[],"mappings":"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","sourcesContent":["import { setPageContent, expect, describe, testEach, PageType, test } from '../../../../utils/playwright.e2e.test.utils';\nimport { renderAttributes } from '../../../../utils/e2e.test.utils';\nimport { MgPagination } from '../mg-pagination';\n\nconst createHTML = args => `<mg-pagination ${renderAttributes(args)}></mg-pagination>`;\n\ndescribe('mg-pagination', () => {\n  describe('template', () => {\n    testEach(\n      [1, 2, 3].flatMap(totalPages => [true, false].flatMap(hidePageCount => [true, false].map(hideNavigationLabels => ({ totalPages, hideNavigationLabels, hidePageCount })))),\n    )('render %s', async (page: PageType, args: Partial<MgPagination>) => {\n      await setPageContent(page, createHTML(args));\n\n      if (args.totalPages > 1) await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n      else expect(await page.locator('mg-pagination').isVisible()).toBe(false);\n    });\n  });\n\n  describe('navigation', () => {\n    testEach([2, 3, 10])('should success mouse navigation %s', async (page: PageType, totalPages: number) => {\n      await setPageContent(page, createHTML({ totalPages }));\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n\n      const actions = [...Array(totalPages - 1).keys()];\n\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      for (const _ of actions) {\n        const nextButton = await page.locator('mg-pagination mg-button:last-of-type');\n        await nextButton.click();\n        await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n      }\n    });\n\n    test('should success keyboard navigation', async ({ page }) => {\n      await setPageContent(page, createHTML({ totalPages: 5 }));\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n\n      // take focus on mg-input-select\n      await page.keyboard.down('Tab');\n      await page.keyboard.down('Tab');\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n\n      // change mg-input-select to value 3\n      await page.keyboard.down('ArrowDown');\n      await page.keyboard.down('ArrowDown');\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n\n      // take focus on previous button\n      await page.keyboard.down('Shift');\n      await page.keyboard.press('Tab');\n      await page.keyboard.up('Shift');\n      await page.keyboard.down('Enter');\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n\n      // take focus on next\n      await page.keyboard.down('Tab');\n      await page.keyboard.down('Tab');\n      await page.keyboard.down('Enter');\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n    });\n  });\n\n  describe('locales', () => {\n    test('render with locale: %s', async ({ page }) => {\n      await setPageContent(page, createHTML({ totalPages: 5, lang: 'fr' }));\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n    });\n  });\n});\n"]}

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

@@ -0,0 +1,121 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { h } from "@stencil/core";
+import { MgPagination } from "../mg-pagination";
+import { MgButton } from "../../../atoms/mg-button/mg-button";
+import { MgIcon } from "../../../atoms/mg-icon/mg-icon";
+import { MgInputSelect } from "../../inputs/mg-input-select/mg-input-select";
+const getPage = args => newSpecPage({
+  components: [MgPagination, MgButton, MgIcon, MgInputSelect],
+  template: () => h("mg-pagination", Object.assign({}, args)),
+});
+describe('mg-pagination', () => {
+  describe('Should render', () => {
+    test.each([1, 2, 3, 10])('with totalPages %s', async (totalPages) => {
+      const page = await getPage({ totalPages, identifier: 'id' });
+      expect(page.root).toMatchSnapshot();
+      const actions = [...Array(totalPages - 1).keys()];
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      for (const _ of actions) {
+        const nextButton = page.root.shadowRoot.querySelector('mg-button:last-of-type');
+        nextButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot();
+      }
+    });
+    test('Should set custom label', async () => {
+      const page = await getPage({ totalPages: 2, identifier: 'id', label: 'custom label' });
+      expect(page.root).toMatchSnapshot();
+    });
+    test.each([true, false])('Should hidde navigation labels', async (hideNavigationLabels) => {
+      const page = await getPage({ totalPages: 2, identifier: 'id', hideNavigationLabels });
+      expect(page.root).toMatchSnapshot();
+    });
+    test.each([true, false])('Should hidde page select', async (hidePageCount) => {
+      const page = await getPage({ totalPages: 2, identifier: 'id', hidePageCount });
+      expect(page.root).toMatchSnapshot();
+    });
+    test.each(['fr', 'xx'])('with locale: %s', async (lang) => {
+      const totalPages = 2;
+      const page = await getPage({ totalPages, identifier: 'id', lang });
+      expect(page.root).toMatchSnapshot();
+    });
+  });
+  describe('errors', () => {
+    test('should throw an error, case totalPages props invalid', async () => {
+      expect.assertions(1);
+      try {
+        await getPage({ totalPages: 0 });
+      }
+      catch ({ message }) {
+        expect(message).toBe('<mg-pagination> prop "totalPages" must be greater than 0');
+      }
+    });
+    test('should throw an error, case currentPage props invalid: 0', async () => {
+      expect.assertions(1);
+      try {
+        await getPage({ currentPage: 0 });
+      }
+      catch ({ message }) {
+        expect(message).toBe('<mg-pagination> prop "currentPage" must be greater than 0');
+      }
+    });
+    test('should throw an error, case currentPage props invalid: currentPage > totalPages', async () => {
+      expect.assertions(1);
+      try {
+        await getPage({ currentPage: 2, totalPages: 1 });
+      }
+      catch ({ message }) {
+        expect(message).toBe('<mg-pagination> prop "currentPage" can not be greater than total page');
+      }
+    });
+  });
+  describe('navigation', () => {
+    test('navigate with select from 1 to 5 to 1, case totalPages=5', async () => {
+      const page = await getPage({ totalPages: 5, identifier: 'id' });
+      expect(page.root).toMatchSnapshot();
+      jest.spyOn(page.rootInstance.currentPageChange, 'emit');
+      const mgInputSelect = page.root.shadowRoot.querySelector('mg-input-select');
+      mgInputSelect.value = '5';
+      mgInputSelect.dispatchEvent(new CustomEvent('value-change', { bubbles: true }));
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+      expect(page.rootInstance.currentPageChange.emit).toHaveBeenCalledWith(5);
+      mgInputSelect.value = '2';
+      mgInputSelect.dispatchEvent(new CustomEvent('value-change', { bubbles: true }));
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+      expect(page.rootInstance.currentPageChange.emit).toHaveBeenCalledWith(2);
+      mgInputSelect.value = 'placeholder';
+      mgInputSelect.dispatchEvent(new CustomEvent('value-change', { bubbles: true }));
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+      expect(page.rootInstance.currentPageChange.emit).toHaveBeenCalledWith(1);
+      expect(page.rootInstance.currentPageChange.emit).toHaveBeenCalledTimes(3);
+    });
+    test('navigate with next and previous, case totalPages=5', async () => {
+      const page = await getPage({ totalPages: 5, identifier: 'id' });
+      expect(page.root).toMatchSnapshot();
+      jest.spyOn(page.rootInstance.currentPageChange, 'emit');
+      // no action with a disabled button clic
+      const pageOneFirstClick = page.root.shadowRoot.querySelector('mg-button:first-of-type');
+      await pageOneFirstClick.dispatchEvent(new CustomEvent('click', { bubbles: true }));
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+      expect(page.rootInstance.currentPageChange.emit).not.toHaveBeenCalled();
+      // action to go to page 2 with a next button clic
+      const pageFive = page.root.shadowRoot.querySelector('mg-button:last-of-type');
+      await pageFive.dispatchEvent(new CustomEvent('click', { bubbles: true }));
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+      expect(page.rootInstance.currentPageChange.emit).toHaveBeenCalledWith(2);
+      // action to go to page 1 with a previous button clic
+      const pageOne = page.root.shadowRoot.querySelector('mg-button:first-of-type');
+      await pageOne.dispatchEvent(new CustomEvent('click', { bubbles: true }));
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+      expect(page.rootInstance.currentPageChange.emit).toHaveBeenCalledWith(1);
+      expect(page.rootInstance.currentPageChange.emit).toHaveBeenCalledTimes(2);
+    });
+  });
+});
+//# sourceMappingURL=mg-pagination.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-pagination.spec.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-pagination/test/mg-pagination.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { h } from '@stencil/core';\nimport { MgPagination } from '../mg-pagination';\nimport { MgButton } from '../../../atoms/mg-button/mg-button';\nimport { MgIcon } from '../../../atoms/mg-icon/mg-icon';\nimport { MgInputSelect } from '../../inputs/mg-input-select/mg-input-select';\n\nconst getPage = args =>\n  newSpecPage({\n    components: [MgPagination, MgButton, MgIcon, MgInputSelect],\n    template: () => <mg-pagination {...args}></mg-pagination>,\n  });\n\ndescribe('mg-pagination', () => {\n  describe('Should render', () => {\n    test.each([1, 2, 3, 10])('with totalPages %s', async totalPages => {\n      const page = await getPage({ totalPages, identifier: 'id' });\n      expect(page.root).toMatchSnapshot();\n\n      const actions = [...Array(totalPages - 1).keys()];\n\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      for (const _ of actions) {\n        const nextButton = page.root.shadowRoot.querySelector('mg-button:last-of-type');\n        nextButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n        await page.waitForChanges();\n\n        expect(page.root).toMatchSnapshot();\n      }\n    });\n\n    test('Should set custom label', async () => {\n      const page = await getPage({ totalPages: 2, identifier: 'id', label: 'custom label' });\n      expect(page.root).toMatchSnapshot();\n    });\n\n    test.each([true, false])('Should hidde navigation labels', async hideNavigationLabels => {\n      const page = await getPage({ totalPages: 2, identifier: 'id', hideNavigationLabels });\n      expect(page.root).toMatchSnapshot();\n    });\n\n    test.each([true, false])('Should hidde page select', async hidePageCount => {\n      const page = await getPage({ totalPages: 2, identifier: 'id', hidePageCount });\n      expect(page.root).toMatchSnapshot();\n    });\n\n    test.each(['fr', 'xx'])('with locale: %s', async lang => {\n      const totalPages = 2;\n      const page = await getPage({ totalPages, identifier: 'id', lang });\n      expect(page.root).toMatchSnapshot();\n    });\n  });\n\n  describe('errors', () => {\n    test('should throw an error, case totalPages props invalid', async () => {\n      expect.assertions(1);\n      try {\n        await getPage({ totalPages: 0 });\n      } catch ({ message }) {\n        expect(message).toBe('<mg-pagination> prop \"totalPages\" must be greater than 0');\n      }\n    });\n    test('should throw an error, case currentPage props invalid: 0', async () => {\n      expect.assertions(1);\n      try {\n        await getPage({ currentPage: 0 });\n      } catch ({ message }) {\n        expect(message).toBe('<mg-pagination> prop \"currentPage\" must be greater than 0');\n      }\n    });\n    test('should throw an error, case currentPage props invalid: currentPage > totalPages', async () => {\n      expect.assertions(1);\n      try {\n        await getPage({ currentPage: 2, totalPages: 1 });\n      } catch ({ message }) {\n        expect(message).toBe('<mg-pagination> prop \"currentPage\" can not be greater than total page');\n      }\n    });\n  });\n\n  describe('navigation', () => {\n    test('navigate with select from 1 to 5 to 1, case totalPages=5', async () => {\n      const page = await getPage({ totalPages: 5, identifier: 'id' });\n      expect(page.root).toMatchSnapshot();\n\n      jest.spyOn(page.rootInstance.currentPageChange, 'emit');\n\n      const mgInputSelect = page.root.shadowRoot.querySelector('mg-input-select');\n      mgInputSelect.value = '5';\n      mgInputSelect.dispatchEvent(new CustomEvent('value-change', { bubbles: true }));\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n      expect(page.rootInstance.currentPageChange.emit).toHaveBeenCalledWith(5);\n\n      mgInputSelect.value = '2';\n      mgInputSelect.dispatchEvent(new CustomEvent('value-change', { bubbles: true }));\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n      expect(page.rootInstance.currentPageChange.emit).toHaveBeenCalledWith(2);\n\n      mgInputSelect.value = 'placeholder';\n      mgInputSelect.dispatchEvent(new CustomEvent('value-change', { bubbles: true }));\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n      expect(page.rootInstance.currentPageChange.emit).toHaveBeenCalledWith(1);\n      expect(page.rootInstance.currentPageChange.emit).toHaveBeenCalledTimes(3);\n    });\n    test('navigate with next and previous, case totalPages=5', async () => {\n      const page = await getPage({ totalPages: 5, identifier: 'id' });\n      expect(page.root).toMatchSnapshot();\n\n      jest.spyOn(page.rootInstance.currentPageChange, 'emit');\n\n      // no action with a disabled button clic\n      const pageOneFirstClick = page.root.shadowRoot.querySelector('mg-button:first-of-type');\n      await pageOneFirstClick.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n      expect(page.rootInstance.currentPageChange.emit).not.toHaveBeenCalled();\n\n      // action to go to page 2 with a next button clic\n      const pageFive = page.root.shadowRoot.querySelector('mg-button:last-of-type');\n      await pageFive.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n      expect(page.rootInstance.currentPageChange.emit).toHaveBeenCalledWith(2);\n\n      // action to go to page 1 with a previous button clic\n      const pageOne = page.root.shadowRoot.querySelector('mg-button:first-of-type');\n      await pageOne.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n      expect(page.rootInstance.currentPageChange.emit).toHaveBeenCalledWith(1);\n      expect(page.rootInstance.currentPageChange.emit).toHaveBeenCalledTimes(2);\n    });\n  });\n});\n"]}

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

@@ -6,3 +6,4 @@ export const expandToggleDisplays = ['text', 'icon'];
  * Available title positions
  */
 export const titlePositions = ['left', 'right'];
+//# sourceMappingURL=mg-panel.conf.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-panel.conf.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-panel/mg-panel.conf.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,MAAM,EAAE,MAAM,CAAU,CAAC;AAO9D;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,MAAM,EAAE,OAAO,CAAU,CAAC","sourcesContent":["/**\n * Available expand toggle display options\n */\nexport const expandToggleDisplays = ['text', 'icon'] as const;\n\n/**\n * Generated expand toggle display type from available expand toggle display options\n */\nexport type ExpandToggleDisplayType = (typeof expandToggleDisplays)[number];\n\n/**\n * Available title positions\n */\nexport const titlePositions = ['left', 'right'] as const;\n\n/**\n * Generated title positions type from available title positions\n */\nexport type TitlePositionType = (typeof titlePositions)[number];\n"]}

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

@@ -1,7 +1,7 @@
-import { h } from '@stencil/core';
-import { createID, ClassList } from '../../../utils/components.utils';
-import { initLocales } from '../../../locales';
-import { expandToggleDisplays, titlePositions } from './mg-panel.conf';
+import { h } from "@stencil/core";
+import { createID, ClassList } from "../../../utils/components.utils";
+import { initLocales } from "../../../locales";
+import { expandToggleDisplays, titlePositions } from "./mg-panel.conf";
 export class MgPanel {
   constructor() {
     /************
@@ -114,11 +114,9 @@ export class MgPanel {
       throw new Error('<mg-panel> prop "panelTitle" is required.');
     this.titleChange.emit(newValue);
   }
-  validatetitlePattern(newValue) {
+  validateTitlePattern(newValue) {
     if (newValue !== undefined && !this.titleEditable)
-      throw new Error('<mg-panel> prop "titleEditable" must be set to `true`.');
-    if (newValue !== undefined && (this.titlePatternErrorMessage === undefined || this.titlePatternErrorMessage.trim() === ''))
-      throw new Error('<mg-panel> prop "titlePattern" must be paired with the prop "titlePatternErrorMessage".');
+      throw new Error(`<mg-panel> prop "titleEditable" must be set to "true".`);
   }
   validateTitlePosition(newValue) {
     if (!titlePositions.includes(newValue))
@@ -143,7 +141,8 @@ export class MgPanel {
     // Get locales
     this.messages = initLocales(this.element).messages;
     // Validate
-    this.validatetitlePattern(this.titlePattern);
+    this.validateTitlePattern(this.titlePattern);
+    this.validateTitlePattern(this.titlePatternErrorMessage);
     this.validatePanelTitle(this.panelTitle);
     this.validateExpandToggleDisplay(this.expandToggleDisplay);
     this.validateTitlePosition(this.titlePosition);
@@ -274,7 +273,8 @@ export class MgPanel {
           "references": {
             "TitlePositionType": {
               "location": "import",
-              "path": "./mg-panel.conf"
+              "path": "./mg-panel.conf",
+              "id": "src/components/molecules/mg-panel/mg-panel.conf.ts::TitlePositionType"
             }
           }
         },
@@ -315,7 +315,8 @@ export class MgPanel {
           "references": {
             "ExpandToggleDisplayType": {
               "location": "import",
-              "path": "./mg-panel.conf"
+              "path": "./mg-panel.conf",
+              "id": "src/components/molecules/mg-panel/mg-panel.conf.ts::ExpandToggleDisplayType"
             }
           }
         },
@@ -395,7 +396,10 @@ export class MgPanel {
         "methodName": "validatePanelTitle"
       }, {
         "propName": "titlePattern",
-        "methodName": "validatetitlePattern"
+        "methodName": "validateTitlePattern"
+      }, {
+        "propName": "titlePatternErrorMessage",
+        "methodName": "validateTitlePattern"
       }, {
         "propName": "titlePosition",
         "methodName": "validateTitlePosition"
@@ -408,3 +412,4 @@ export class MgPanel {
       }];
   }
 }
+//# sourceMappingURL=mg-panel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-panel.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-panel/mg-panel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, State, EventEmitter, Watch, Event } from '@stencil/core';\nimport { createID, ClassList } from '../../../utils/components.utils';\nimport { initLocales } from '../../../locales';\nimport { type ExpandToggleDisplayType, type TitlePositionType, expandToggleDisplays, titlePositions } from './mg-panel.conf';\n\n@Component({\n  tag: 'mg-panel',\n  styleUrl: 'mg-panel.scss',\n  shadow: true,\n})\nexport class MgPanel {\n  /************\n   * Internal *\n   ************/\n\n  // HTML selector\n  private editInputElement: HTMLMgInputTextElement;\n\n  // Locales\n  private messages;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgPanelElement;\n\n  /**\n   * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n   * If not set, it will be created.\n   */\n  @Prop() identifier: string = createID('mg-panel');\n\n  /**\n   * Panel title\n   */\n  @Prop({ mutable: true }) panelTitle!: string;\n  @Watch('panelTitle')\n  validatePanelTitle(newValue: string): void {\n    if (typeof newValue !== 'string' || newValue.trim() === '') throw new Error('<mg-panel> prop \"panelTitle\" is required.');\n    this.titleChange.emit(newValue);\n  }\n\n  /**\n   * Panel title pattern\n   */\n  @Prop() titlePattern: string;\n\n  /**\n   * Panel title pattern error message\n   */\n  @Prop() titlePatternErrorMessage: string;\n  @Watch('titlePattern')\n  @Watch('titlePatternErrorMessage')\n  validateTitlePattern(newValue: string): void {\n    if (newValue !== undefined && !this.titleEditable) throw new Error(`<mg-panel> prop \"titleEditable\" must be set to \"true\".`);\n  }\n\n  /**\n   * Define if panel title is editable\n   */\n  @Prop({ mutable: true }) titleEditable = false;\n\n  /**\n   * Define title position\n   */\n  @Prop() titlePosition: TitlePositionType = titlePositions[0];\n  @Watch('titlePosition')\n  validateTitlePosition(newValue: MgPanel['titlePosition']) {\n    if (!titlePositions.includes(newValue)) throw new Error(`<mg-panel> prop \"titlePosition\" must be one of: ${titlePositions.join(', ')}.`);\n  }\n\n  /**\n   * Panel is opened\n   */\n  @Prop({ mutable: true }) expanded = false;\n  @Watch('expanded')\n  handleExpanded(newValue: boolean): void {\n    this.expandedChange.emit(newValue);\n  }\n\n  /**\n   * Define expand toggle button display\n   */\n  @Prop() expandToggleDisplay: ExpandToggleDisplayType = expandToggleDisplays[0];\n  @Watch('expandToggleDisplay')\n  validateExpandToggleDisplay(newValue: MgPanel['expandToggleDisplay']) {\n    if (!expandToggleDisplays.includes(newValue)) throw new Error(`<mg-panel> prop \"expandToggleDisplay\" must be one of: ${expandToggleDisplays.join(', ')}.`);\n    if (newValue === 'icon' && this.titleEditable) this.titleEditable = false;\n  }\n\n  /**\n   * Disable possibility to toggle expand\n   */\n  @Prop() expandToggleDisabled: boolean;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-panel']);\n\n  /**\n   * Title is in edition mode\n   */\n  @State() isEditing = false;\n\n  /**\n   * Cache for updated panel title before validation\n   */\n  @State() updatedPanelTitle: string;\n\n  /**\n   * Emmited event when title change\n   */\n  @Event({ eventName: 'title-change' }) titleChange: EventEmitter<string>;\n\n  /**\n   * Emmited event when expanded change\n   */\n  @Event({ eventName: 'expanded-change' }) expandedChange: EventEmitter<boolean>;\n\n  /************\n   * Methods *\n   ************/\n\n  /**\n   * Toggle is editing state\n   */\n  private toggleIsEditing = (): void => {\n    this.isEditing = !this.isEditing;\n  };\n\n  /************\n   * Handlers *\n   ************/\n\n  /**\n   * Collapse button click handler\n   */\n  private handleCollapseButton = (): void => {\n    if (!this.expandToggleDisabled) this.expanded = !this.expanded;\n  };\n\n  /**\n   * Edit button click handler\n   */\n  private handleEditButton = (): void => {\n    this.toggleIsEditing();\n  };\n\n  /**\n   * Update title handler\n   * @param event - input value change event\n   */\n  private handleUpdateTitle = (event: CustomEvent<string>): void => {\n    this.updatedPanelTitle = event.detail;\n  };\n\n  /**\n   * Cancel edition button handler\n   */\n  private handleCancelEditButton = (): void => {\n    this.updatedPanelTitle = undefined;\n    this.toggleIsEditing();\n  };\n\n  /**\n   * Validate edition button handler\n   */\n  private handleValidateEditButton = (): void => {\n    if (!this.editInputElement.valid) return;\n    if (this.updatedPanelTitle !== undefined) this.panelTitle = this.updatedPanelTitle;\n    this.toggleIsEditing();\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n    // Validate\n    this.validateTitlePattern(this.titlePattern);\n    this.validateTitlePattern(this.titlePatternErrorMessage);\n    this.validatePanelTitle(this.panelTitle);\n    this.validateExpandToggleDisplay(this.expandToggleDisplay);\n    this.validateTitlePosition(this.titlePosition);\n  }\n\n  /**\n   * Edit DOM after render\n   */\n  componentDidRender(): void {\n    // when we are editing we get focus on edition input\n    if (this.isEditing) this.editInputElement.setFocus();\n  }\n\n  /*************\n   * Render *\n   *************/\n\n  /**\n   * Render collapse button\n   * @returns collpase button\n   */\n  private renderCollapseButton = (): HTMLMgButtonElement => (\n    <mg-button\n      onClick={this.handleCollapseButton}\n      variant=\"flat\"\n      identifier={`${this.identifier}-collapse-button`}\n      aria-expanded={this.expanded !== undefined && this.expanded.toString()}\n      aria-controls={`${this.identifier}-content`}\n      disabled={this.expandToggleDisabled}\n      isIcon={this.expandToggleDisplay === 'icon'}\n      label={this.panelTitle}\n    >\n      <span class=\"mg-panel__collapse-button-content\">\n        <mg-icon icon=\"chevron-up\" class={{ 'mg-panel__collapse-button-icon': true, 'mg-panel__collapse-button-icon--reverse': !this.expanded }}></mg-icon>\n        {!this.isEditing && this.expandToggleDisplay !== 'icon' && this.panelTitle}\n      </span>\n    </mg-button>\n  );\n\n  /**\n   * Render edit button\n   * @returns edit Button\n   */\n  private renderEditButton = (): HTMLMgButtonElement => (\n    <mg-button key=\"edit-button\" is-icon variant=\"flat\" label={this.messages.panel.editLabel} onClick={this.handleEditButton} identifier={`${this.identifier}-edit-button`}>\n      <mg-icon icon=\"pen\"></mg-icon>\n    </mg-button>\n  );\n\n  /**\n   * Render input button\n   * @returns edit title input\n   */\n  private renderEditInput = (): HTMLMgInputTextElement => (\n    <mg-input-text\n      key=\"edition-input\"\n      label={this.messages.panel.editLabel}\n      label-hide\n      value={this.panelTitle}\n      onValue-change={this.handleUpdateTitle}\n      displayCharacterLeft={false}\n      pattern={this.titlePattern}\n      pattern-error-message={this.titlePatternErrorMessage}\n      identifier={`${this.identifier}-edition-input`}\n      ref={(el: HTMLMgInputTextElement) => (this.editInputElement = el)}\n    >\n      <mg-button\n        slot=\"append-input\"\n        label={this.messages.general.cancel}\n        is-icon\n        variant=\"secondary\"\n        onClick={this.handleCancelEditButton}\n        identifier={`${this.identifier}-edition-button-cancel`}\n      >\n        <mg-icon icon=\"cross\"></mg-icon>\n      </mg-button>\n      <mg-button\n        slot=\"append-input\"\n        label={this.messages.general.confirm}\n        is-icon\n        variant=\"secondary\"\n        onClick={this.handleValidateEditButton}\n        identifier={`${this.identifier}-edition-button-validate`}\n      >\n        <mg-icon icon=\"check\"></mg-icon>\n      </mg-button>\n    </mg-input-text>\n  );\n\n  /**\n   * Render title\n   * @returns title element\n   */\n  private renderTitle = (): HTMLElement[] => {\n    const elementsToRender: HTMLElement[] = [this.renderCollapseButton()];\n    if (this.titleEditable) {\n      if (!this.isEditing) elementsToRender.push(this.renderEditButton());\n      else elementsToRender.push(this.renderEditInput());\n    }\n\n    return this.titlePosition === 'right' ? elementsToRender.reverse() : elementsToRender;\n  };\n\n  /**\n   * Render header children\n   * @returns header child\n   */\n  private renderHeaderChildren = (): HTMLElement[] => {\n    const children = [\n      <div\n        class={{ 'mg-panel__header-title': true, 'mg-panel__header-title--full': this.isEditing, 'mg-panel__header-title--reverse': this.titlePosition === 'right' }}\n        key={this.panelTitle}\n      >\n        {this.renderTitle()}\n      </div>,\n      <div class=\"mg-panel__header-content\" key=\"slot-header\">\n        <slot name=\"header-right\"></slot>\n      </div>,\n    ];\n    return this.titlePosition === 'right' ? children.reverse() : children;\n  };\n\n  /**\n   * Render component\n   * @returns rendered component\n   */\n  render(): HTMLElement {\n    const headerId = `${this.identifier}-header`;\n    return (\n      <section class={this.classCollection.join()} id={this.identifier}>\n        <mg-card>\n          <header class={{ 'mg-panel__header': true, 'mg-panel__header--reverse': this.titlePosition === 'right' }} id={headerId}>\n            {this.renderHeaderChildren()}\n          </header>\n          <article class=\"mg-panel__content\" id={`${this.identifier}-content`} aria-labelledby={headerId} hidden={!this.expanded}>\n            <slot></slot>\n          </article>\n        </mg-card>\n      </section>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,106 @@
+import { setPageContent, expect, describe, testEach, updateScreenshotClass, test } from "../../../../utils/playwright.e2e.test.utils";
+import { createID } from "../../../../utils/components.utils";
+import { renderAttributes, renderProperties } from "../../../../utils/e2e.test.utils";
+const slots = ['default', 'flex'];
+const baseArgs = {
+  panelTitle: 'panel title',
+};
+const createHTML = (args) => {
+  const identifier = createID();
+  const slot = Boolean(args.slot) ? args.slot : slots[0];
+  delete args.slot;
+  const flexSlotContainer = (content) => '<mg-badge variant="primary" value="1" label="label"></mg-badge><div>' + content + '</div>';
+  const slotContent = `
+  <mg-button variant="secondary" style="margin-left: 200px;">
+    <mg-icon icon="file-upload"></mg-icon> Upload
+  </mg-button>
+  <mg-button is-icon variant="secondary" label="delete">
+    <mg-icon icon="trash"></mg-icon>
+  </mg-button>
+  `;
+  return `
+    <mg-panel ${renderAttributes(Object.assign(Object.assign({}, args), { identifier }))}>
+      ${slots.includes(slot)
+    ? `
+          <div>Content</div>
+          <div slot="header-right" ${slot === 'flex' ? 'style="display:flex; justify-content:space-between; align-items:center; width:100%;"' : ''}>
+            ${slot === 'flex' ? flexSlotContainer(slotContent) : slotContent}
+          </div>`
+    : slot}
+    </mg-panel>
+    <script>${renderProperties(args, `[identifier="${identifier}"]`)}</script>`;
+};
+describe('mg-panel', () => {
+  testEach([
+    Object.assign({}, baseArgs),
+    Object.assign(Object.assign({}, baseArgs), { titlePosition: 'left' }),
+    Object.assign(Object.assign({}, baseArgs), { titlePosition: 'right' }),
+    Object.assign(Object.assign({}, baseArgs), { titlePosition: 'right', titleEditable: true }),
+    Object.assign(Object.assign({}, baseArgs), { expandToggleDisplay: 'text' }),
+    Object.assign(Object.assign({}, baseArgs), { expandToggleDisplay: 'icon' }),
+    Object.assign(Object.assign({}, baseArgs), { expandToggleDisplay: 'icon', titleEditable: true }),
+    Object.assign(Object.assign({}, baseArgs), { expanded: true }),
+    Object.assign(Object.assign({}, baseArgs), { titleEditable: true }),
+    Object.assign(Object.assign({}, baseArgs), { panelTitle: 'very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title' }),
+    Object.assign(Object.assign({}, baseArgs), { titleEditable: true, panelTitle: 'very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title' }),
+    Object.assign(Object.assign({}, baseArgs), { slot: 'flex' }),
+    Object.assign(Object.assign({}, baseArgs), { slot: 'flex', panelTitle: 'very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title' }),
+    Object.assign(Object.assign({}, baseArgs), { expanded: true, style: '--mg-panel-content-padding: 0', slot: '<div>Content without padding.</div>' }),
+    Object.assign(Object.assign({}, baseArgs), { expanded: true, style: '--mg-panel-background: none; --mg-panel-border-radius: 0; --mg-panel-box-shadow: none', slot: '<div>Transparent mg-panel</div>' }),
+    Object.assign(Object.assign({}, baseArgs), { expanded: true, slot: '<div>header right items should be vertically aligned</div><div slot="header-right"><mg-tag>Label</mg-tag><mg-icon size="small" icon="check-circle" variant="success"></mg-icon></div>' }),
+    Object.assign(Object.assign({}, baseArgs), { expanded: true, style: '--mg-panel-background: var(--color-danger)', slot: '<mg-card>Content whith child card.</mg-card>' }),
+  ])('Should render with template %s', async (page, args) => {
+    await setPageContent(page, createHTML(Object.assign({}, args)));
+    await updateScreenshotClass(page, { width: '500px', height: '100%' });
+    await expect(page.locator('mg-panel')).toHaveScreenshot();
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Enter');
+    await expect(page.locator('mg-panel')).toHaveScreenshot();
+  });
+  describe('navigation', () => {
+    testEach([
+      Object.assign(Object.assign({}, baseArgs), { titleEditable: true }),
+      Object.assign(Object.assign({}, baseArgs), { titleEditable: true, panelTitle: 'very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title' }),
+    ])('Should navigate throw editabled panel %s', async (page, args) => {
+      await setPageContent(page, createHTML(Object.assign({}, args)));
+      await expect(page.locator('mg-panel')).toHaveScreenshot();
+      await page.locator('.mg-panel__header-title mg-button:last-of-type').click();
+      // Hide caret for screenshots
+      await page.locator('mg-panel input').evaluate(element => (element.style.caretColor = 'transparent'));
+      await expect(page.locator('mg-panel')).toHaveScreenshot();
+      const input = await page.locator('mg-panel mg-input-text input');
+      await input.press('Space');
+      await input.press('KeyU');
+      await input.press('KeyP');
+      await input.press('KeyD');
+      await input.press('KeyA');
+      await input.press('KeyT');
+      await input.press('KeyE');
+      await input.press('KeyD');
+      await page.locator('mg-panel mg-input-text mg-button:last-of-type').click();
+      await expect(page.locator('mg-panel')).toHaveScreenshot();
+    });
+    test('Should NOT update panel title, case input new value does NOT match pattern', async ({ page }) => {
+      const args = Object.assign(Object.assign({}, baseArgs), { titleEditable: true, titlePattern: '^((?!joker).)*$', titlePatternErrorMessage: "You can't enter a bad guy !" });
+      await setPageContent(page, createHTML(args));
+      await page.locator('.mg-panel__header-title mg-button:last-of-type').click();
+      // Hide caret for screenshots
+      await page.locator('mg-panel input').evaluate(element => (element.style.caretColor = 'transparent'));
+      await expect(page.locator('mg-panel')).toHaveScreenshot();
+      const input = await page.locator('mg-panel mg-input-text input');
+      await input.press('Backspace');
+      await input.press('Backspace');
+      await input.press('Backspace');
+      await input.press('Backspace');
+      await input.press('Backspace');
+      await input.press('KeyJ');
+      await input.press('KeyO');
+      await input.press('KeyK');
+      await input.press('KeyE');
+      await input.press('KeyR');
+      await page.locator('mg-panel mg-input-text mg-button:last-of-type').click();
+      await expect(page.locator('mg-panel')).toHaveScreenshot();
+    });
+  });
+});
+//# sourceMappingURL=mg-panel.e2e.playwright.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-panel.e2e.playwright.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-panel/test/mg-panel.e2e.playwright.ts"],"names":[],"mappings":"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","sourcesContent":["import { setPageContent, expect, describe, testEach, updateScreenshotClass, PageType, test } from '../../../../utils/playwright.e2e.test.utils';\nimport { createID } from '../../../../utils/components.utils';\nimport { renderAttributes, renderProperties } from '../../../../utils/e2e.test.utils';\nimport { type MgPanel } from '../mg-panel';\n\ntype ArgsType = Partial<MgPanel> & { slot?: SlotType };\nconst slots = ['default', 'flex'] as const;\ntype SlotType = (typeof slots)[number] | string;\n\nconst baseArgs = {\n  panelTitle: 'panel title',\n};\n\nconst createHTML = (args: ArgsType): string => {\n  const identifier = createID();\n  const slot: SlotType = Boolean(args.slot) ? args.slot : slots[0];\n  delete args.slot;\n\n  const flexSlotContainer = (content: string): string => '<mg-badge variant=\"primary\" value=\"1\" label=\"label\"></mg-badge><div>' + content + '</div>';\n  const slotContent = `\n  <mg-button variant=\"secondary\" style=\"margin-left: 200px;\">\n    <mg-icon icon=\"file-upload\"></mg-icon> Upload\n  </mg-button>\n  <mg-button is-icon variant=\"secondary\" label=\"delete\">\n    <mg-icon icon=\"trash\"></mg-icon>\n  </mg-button>\n  `;\n\n  return `\n    <mg-panel ${renderAttributes({ ...args, identifier })}>\n      ${\n        slots.includes(slot as (typeof slots)[number])\n          ? `\n          <div>Content</div>\n          <div slot=\"header-right\" ${slot === 'flex' ? 'style=\"display:flex; justify-content:space-between; align-items:center; width:100%;\"' : ''}>\n            ${slot === 'flex' ? flexSlotContainer(slotContent) : slotContent}\n          </div>`\n          : slot\n      }\n    </mg-panel>\n    <script>${renderProperties(args, `[identifier=\"${identifier}\"]`)}</script>`;\n};\n\ndescribe('mg-panel', () => {\n  testEach([\n    { ...baseArgs },\n    { ...baseArgs, titlePosition: 'left' },\n    { ...baseArgs, titlePosition: 'right' },\n    { ...baseArgs, titlePosition: 'right', titleEditable: true },\n    { ...baseArgs, expandToggleDisplay: 'text' },\n    { ...baseArgs, expandToggleDisplay: 'icon' },\n    { ...baseArgs, expandToggleDisplay: 'icon', titleEditable: true },\n    { ...baseArgs, expanded: true },\n    { ...baseArgs, titleEditable: true },\n    {\n      ...baseArgs,\n      panelTitle:\n        'very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title',\n    },\n    {\n      ...baseArgs,\n      titleEditable: true,\n      panelTitle:\n        'very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title',\n    },\n    { ...baseArgs, slot: 'flex' },\n    {\n      ...baseArgs,\n      slot: 'flex',\n      panelTitle:\n        'very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title',\n    },\n    { ...baseArgs, expanded: true, style: '--mg-panel-content-padding: 0', slot: '<div>Content without padding.</div>' },\n    { ...baseArgs, expanded: true, style: '--mg-panel-background: none; --mg-panel-border-radius: 0; --mg-panel-box-shadow: none', slot: '<div>Transparent mg-panel</div>' },\n    {\n      ...baseArgs,\n      expanded: true,\n      slot: '<div>header right items should be vertically aligned</div><div slot=\"header-right\"><mg-tag>Label</mg-tag><mg-icon size=\"small\" icon=\"check-circle\" variant=\"success\"></mg-icon></div>',\n    },\n    { ...baseArgs, expanded: true, style: '--mg-panel-background: var(--color-danger)', slot: '<mg-card>Content whith child card.</mg-card>' },\n  ])('Should render with template %s', async (page: PageType, args: ArgsType) => {\n    await setPageContent(\n      page,\n      createHTML({\n        ...args,\n      }),\n    );\n\n    await updateScreenshotClass(page, { width: '500px', height: '100%' });\n\n    await expect(page.locator('mg-panel')).toHaveScreenshot();\n\n    await page.keyboard.press('Tab');\n    await page.keyboard.press('Enter');\n    await expect(page.locator('mg-panel')).toHaveScreenshot();\n  });\n\n  describe('navigation', () => {\n    testEach([\n      { ...baseArgs, titleEditable: true },\n      {\n        ...baseArgs,\n        titleEditable: true,\n        panelTitle:\n          'very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title',\n      },\n    ])('Should navigate throw editabled panel %s', async (page: PageType, args: ArgsType) => {\n      await setPageContent(\n        page,\n        createHTML({\n          ...args,\n        }),\n      );\n\n      await expect(page.locator('mg-panel')).toHaveScreenshot();\n\n      await page.locator('.mg-panel__header-title mg-button:last-of-type').click();\n\n      // Hide caret for screenshots\n      await page.locator('mg-panel input').evaluate(element => (element.style.caretColor = 'transparent'));\n\n      await expect(page.locator('mg-panel')).toHaveScreenshot();\n\n      const input = await page.locator('mg-panel mg-input-text input');\n\n      await input.press('Space');\n      await input.press('KeyU');\n      await input.press('KeyP');\n      await input.press('KeyD');\n      await input.press('KeyA');\n      await input.press('KeyT');\n      await input.press('KeyE');\n      await input.press('KeyD');\n\n      await page.locator('mg-panel mg-input-text mg-button:last-of-type').click();\n\n      await expect(page.locator('mg-panel')).toHaveScreenshot();\n    });\n\n    test('Should NOT update panel title, case input new value does NOT match pattern', async ({ page }) => {\n      const args = {\n        ...baseArgs,\n        titleEditable: true,\n        titlePattern: '^((?!joker).)*$',\n        titlePatternErrorMessage: \"You can't enter a bad guy !\",\n      };\n\n      await setPageContent(page, createHTML(args));\n\n      await page.locator('.mg-panel__header-title mg-button:last-of-type').click();\n\n      // Hide caret for screenshots\n      await page.locator('mg-panel input').evaluate(element => (element.style.caretColor = 'transparent'));\n\n      await expect(page.locator('mg-panel')).toHaveScreenshot();\n\n      const input = await page.locator('mg-panel mg-input-text input');\n\n      await input.press('Backspace');\n      await input.press('Backspace');\n      await input.press('Backspace');\n      await input.press('Backspace');\n      await input.press('Backspace');\n      await input.press('KeyJ');\n      await input.press('KeyO');\n      await input.press('KeyK');\n      await input.press('KeyE');\n      await input.press('KeyR');\n\n      await page.locator('mg-panel mg-input-text mg-button:last-of-type').click();\n\n      await expect(page.locator('mg-panel')).toHaveScreenshot();\n    });\n  });\n});\n"]}