npm - @mgdis/mg-components - Versions diffs - 5.15.0 → 5.17.0 - Mend

@mgdis/mg-components 5.15.0 → 5.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (479) hide show

package/dist/collection/components/molecules/mg-modal/test/mg-modal.spec.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"mg-modal.spec.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-modal/test/mg-modal.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable @typescript-eslint/no-empty-function */\nimport { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { MgButton } from '../../../atoms/mg-button/mg-button';\nimport { MgModal } from '../mg-modal';\nimport { focusableElements } from '../../../../utils/components.utils';\nimport { setupMutationObserverMock } from '../../../../utils/unit.test.utils';\nimport { dialogRoles } from '../mg-modal.conf';\n\nconst getPage = (args, slots?) =>\n newSpecPage({\n components: [MgModal, MgButton],\n template: () => (\n <mg-modal {...args}>\n {slots?.content && (\n <p slot=\"content\">\n <strong>Strong</strong> content with <a href=\"./\">a link</a>!\n </p>\n )}\n {slots?.actions && (\n <div slot=\"actions\" class=\"mg-group-elements mg-group-elements--align-right\">\n <mg-button>Primary</mg-button>\n <mg-button variant=\"secondary\">Secondary</mg-button>\n </div>\n )}\n </mg-modal>\n ),\n });\n\ndescribe('mg-modal', () => {\n let fireMo;\n\n beforeEach(() => {\n setupMutationObserverMock({\n observe: function () {\n fireMo = this.cb;\n },\n disconnect: function () {\n return null;\n },\n takeRecords: () => [],\n });\n });\n\n describe.each([undefined, { content: true }, { actions: true }, { content: true, actions: true }])('Should render a modal', slots => {\n test.each([\n { modalTitle: 'Modal Title', identifier: 'identifier' },\n { modalTitle: 'Modal Title', identifier: 'identifier', dialogRole: 'alertdialog' },\n { modalTitle: 'Modal Title', identifier: 'identifier', closeButton: true },\n { modalTitle: 'Modal Title', identifier: 'identifier', closeButton: true, hide: true },\n { modalTitle: 'Modal Title', identifier: 'identifier', closeButton: true, lang: 'fr' },\n { modalTitle: 'Modal Title', identifier: 'identifier', closeButton: true, lang: 'xx' },\n ])('with args %s', async args => {\n const { root } = await getPage({ ...args }, slots);\n expect(root).toMatchSnapshot();\n });\n });\n\n test.each(['', ' ', undefined])('Should not render with invalid modalTitle property: %s', async modalTitle => {\n expect.assertions(1);\n try {\n await getPage({ modalTitle });\n } catch (err) {\n expect(err.message).toMatch('<mg-modal> prop \"modalTitle\" is required.');\n }\n });\n\n test.each([' ', 'batman'])('Should throw error with invalid dialogRole property: %s', async dialogRole => {\n expect.assertions(1);\n try {\n await getPage({ modalTitle: 'Modal title', dialogRole });\n } catch (err) {\n expect(err.message).toMatch(`<mg-modal> prop \"dialogRole\" must be one of: ${dialogRoles.join(', ')}.`);\n }\n });\n\n describe('navigation', () => {\n test('should hide panel with button', async () => {\n const page = await getPage({ modalTitle: 'Modal Title', identifier: 'identifier', closeButton: true });\n const closeButton = page.root.shadowRoot.querySelector('mg-button');\n\n expect(page.root).toMatchSnapshot();\n\n const spy = jest.spyOn(page.rootInstance.componentHide, 'emit');\n\n closeButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot();\n expect(spy).toHaveBeenCalled();\n });\n\n test.each([true, false])('should hide panel with escape keyboard', async closeButton => {\n const page = await getPage({ modalTitle: 'Modal Title', identifier: 'identifier', closeButton });\n expect(page.root).toMatchSnapshot();\n\n const spy = jest.spyOn(page.rootInstance.componentHide, 'emit');\n\n page.win.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot();\n if (closeButton) {\n expect(spy).toHaveBeenCalled();\n } else {\n expect(spy).not.toHaveBeenCalled();\n }\n });\n\n describe.each([\n { attributeName: 'aria-hidden', target: { ariaHidden: null } },\n { attributeName: 'aria-hidden', target: { ariaHidden: '' } },\n { attributeName: 'aria-hidden', target: { ariaHidden: undefined } },\n ])('mutationObserver', mutation => {\n test.each([true, false])('should keep focus inside modal, closeButton %s', async closeButton => {\n const page = await getPage({ modalTitle: 'Modal Title', identifier: 'identifier', closeButton, hide: true }, { content: true, actions: true });\n const element = page.doc.querySelector('mg-modal');\n // Get all focusable elements\n const modalFocusableElements = Array.from(element.querySelectorAll(focusableElements)).reduce((acc, focusableElement) => {\n acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(focusableElements) || focusableElement : focusableElement);\n return acc;\n }, []);\n // When close button is enabled it's the first focusable element.\n if (closeButton) {\n modalFocusableElements.unshift(element.shadowRoot.querySelector(`.mg-modal__close-button mg-button`));\n }\n const lastFocusableElement = modalFocusableElements[modalFocusableElements.length - 1];\n const spyFirst = jest.spyOn(modalFocusableElements[0], 'focus');\n const spyLast = jest.spyOn(lastFocusableElement, 'focus');\n\n // Display modal\n element.hide = false;\n await page.waitForChanges();\n expect(spyFirst).toHaveBeenCalledTimes(0);\n fireMo([mutation]);\n await page.waitForChanges();\n expect(spyFirst).toHaveBeenCalledTimes(1);\n // Tab from last focusable element\n lastFocusableElement.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, key: 'Tab', shiftKey: false }));\n await page.waitForChanges();\n expect(spyFirst).toHaveBeenCalledTimes(2);\n // Tab first focusable element with shift key\n modalFocusableElements[0].dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, key: 'Tab', shiftKey: true }));\n await page.waitForChanges();\n expect(spyLast).toHaveBeenCalledTimes(1);\n });\n });\n });\n});\n"]}

package/dist/collection/components/molecules/mg-pagination/mg-pagination.conf.js CHANGED Viewed

@@ -3,3 +3,4 @@ export var NavigationAction;
   NavigationAction["NEXT"] = "next";
   NavigationAction["PREVIOUS"] = "previous";
 })(NavigationAction || (NavigationAction = {}));
+//# sourceMappingURL=mg-pagination.conf.js.map

package/dist/collection/components/molecules/mg-pagination/mg-pagination.conf.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"mg-pagination.conf.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-pagination/mg-pagination.conf.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,gBAGX;AAHD,WAAY,gBAAgB;EAC1B,iCAAa,CAAA;EACb,yCAAqB,CAAA;AACvB,CAAC,EAHW,gBAAgB,KAAhB,gBAAgB,QAG3B","sourcesContent":["export enum NavigationAction {\n NEXT = 'next',\n PREVIOUS = 'previous',\n}\n"]}

package/dist/collection/components/molecules/mg-pagination/mg-pagination.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import { h, Host } from '@stencil/core';
-import { createID } from '../../../utils/components.utils';
-import { NavigationAction } from './mg-pagination.conf';
-import { initLocales } from './../../../locales';
+import { h, Host } from "@stencil/core";
+import { createID } from "../../../utils/components.utils";
+import { NavigationAction } from "./mg-pagination.conf";
+import { initLocales } from "./../../../locales";
 /**
  * Range generator
  *
@@ -250,3 +250,4 @@ export class MgPagination {
       }];
   }
 }
+//# sourceMappingURL=mg-pagination.js.map

package/dist/collection/components/molecules/mg-pagination/mg-pagination.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"mg-pagination.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-pagination/mg-pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, Watch, Event, EventEmitter, Host } from '@stencil/core';\nimport { createID } from '../../../utils/components.utils';\nimport { NavigationAction } from './mg-pagination.conf';\nimport { initLocales } from './../../../locales';\n\n/**\n * Range generator\n *\n * ```\n * start by get the range length, add \"+ 1\" to include last value, ex: Math.ceil((3 + 1 - 1) / 1) => 3\n * then with Array(Math.ceil...) we get the final array with empty values, ex: Array(Math.ceil(2 + 1 - 1) / 1)) => [empty, empty, empty]\n * then with Array(Math.ceil...).keys() we get the Array Iterator from empty values\n * then with Array.from(Array(...)) we get the complete array with \"index\" values instead of \"empty\" values\n * ex: Array.from(Array(Math.ceil((2 + 1 - 1) / 1) || 1).keys()) => [0, 1, 2]\n * finaly we map values from \"start\" range and apply the \"step\" coefficiant,\n * ex: Array.from(Array(Math.ceil((2 + 1 - 1) / 1) || 1).keys()).map(x => 1 + x * 1) => [1, 2, 3]\n * ```\n *\n * range(1, 1) = [1]\n * range(1, 5) = [1, 2, 3, 4, 5]\n * range(10, 20, 2) = [10, 12, 14, 16, 18, 20]\n * @param start - start range\n * @param end - start end\n * @param step - step size\n * @returns range numbers\n */\nconst range = (start: number, end: number, step = 1): number[] => Array.from(Array(Math.ceil((end + 1 - start) / step)).keys()).map(x => start + x * step);\n\n@Component({\n tag: 'mg-pagination',\n styleUrl: 'mg-pagination.scss',\n shadow: true,\n})\nexport class MgPagination {\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: HTMLMgPaginationElement;\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-pagination');\n\n /**\n * Panignation label. Is a short description.\n * Customize default value can be usefull to improve accessibility\n */\n @Prop({ mutable: true }) label: string;\n\n /**\n * Hide navigation label\n */\n @Prop() hideNavigationLabels: boolean;\n\n /**\n * Hide select input\n */\n @Prop() hidePageCount: boolean;\n\n /**\n * Component total pages\n */\n @Prop() totalPages = 1;\n @Watch('totalPages')\n validateTotalPages(newValue: number): void {\n if (newValue < 1) {\n throw new Error('<mg-pagination> prop \"totalPages\" must be greater than 0');\n }\n }\n\n /**\n * Component current page\n */\n @Prop({ reflect: true, mutable: true }) currentPage = 1;\n @Watch('currentPage')\n validateCurrentPage(newValue: number): void {\n if (newValue < 1) {\n throw new Error('<mg-pagination> prop \"currentPage\" must be greater than 0');\n } else if (newValue > this.totalPages) {\n throw new Error('<mg-pagination> prop \"currentPage\" can not be greater than total page');\n }\n\n this.currentPageChange.emit(newValue);\n }\n\n /**\n * Emmited event when current page change\n */\n @Event({ eventName: 'current-page-change' }) currentPageChange: EventEmitter<number>;\n\n /**\n * Change current page from target\n * @param target - target page\n */\n private goToPage = (target: number): void => {\n this.currentPage = target;\n };\n\n /************\n * Handlers *\n ************/\n\n /**\n * select handler\n * @param event - value change event\n */\n private handleSelect = (event: InputEvent & { target: HTMLInputElement }): void => {\n const to = Number(event.target.value);\n this.goToPage(to > 0 ? to : 1);\n };\n\n /**\n * Go to 'previous/next' page button handler\n * @param action - navigation action\n * @param disabled - button disable state\n */\n private handleGoToPage = (action: string, disabled: boolean): void => {\n !disabled && this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);\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.validateTotalPages(this.totalPages);\n this.validateCurrentPage(this.currentPage);\n // Set default label\n if (this.label === undefined || this.label === '') {\n this.label = this.messages.pagination.label;\n }\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n const navigationActionButton = (disabled: boolean, action: string) => (\n <mg-button\n identifier={`${this.identifier}-button-${action}`}\n label={this.messages.pagination[`${action}Page`]}\n // eslint-disable-next-line react/jsx-no-bind\n onClick={() => this.handleGoToPage(action, disabled)}\n disabled={disabled}\n variant=\"flat\"\n isIcon={this.hideNavigationLabels}\n >\n {action === NavigationAction.PREVIOUS && <mg-icon icon=\"chevron-left\"></mg-icon>}\n {!this.hideNavigationLabels && this.messages.general[action]}\n {action === NavigationAction.NEXT && <mg-icon icon=\"chevron-right\"></mg-icon>}\n </mg-button>\n );\n\n return (\n <Host hidden={this.totalPages < 2}>\n <nav aria-label={this.label} id={this.identifier} class={{ 'mg-pagination': true, 'mg-pagination--hide-page-count': this.hidePageCount }}>\n {navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS)}\n {!this.hidePageCount && (\n <mg-input-select\n identifier={`${this.identifier}-select`}\n items={range(1, this.totalPages).map(page => page.toString())}\n label={this.messages.pagination.selectPage}\n label-hide={true}\n on-value-change={this.handleSelect}\n value={this.currentPage.toString()}\n placeholder-hide\n ></mg-input-select>\n )}\n <span class=\"sr-only\">\n {this.messages.pagination.page} {this.currentPage}\n </span>\n <span class={{ 'sr-only': this.hidePageCount }}>\n / {this.totalPages} {this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page}\n </span>\n {navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT)}\n </nav>\n </Host>\n );\n }\n}\n"]}

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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() {
     /************
@@ -70,7 +70,7 @@ export class MgPanel {
      * Render input button
      * @returns edit title input
      */
-    this.renderEditInput = () => (h("mg-input-text", { key: "edition-input", label: this.messages.panel.editLabel, "label-hide": true, value: this.panelTitle, "onValue-change": this.handleUpdateTitle, displayCharacterLeft: false, pattern: this.titlePattern, "pattern-error-message": this.titlePatternErrorMessage, identifier: `${this.identifier}-edition-input`, ref: el => (this.editInputElement = el) }, h("mg-button", { slot: "append-input", label: this.messages.general.cancel, "is-icon": true, variant: "secondary", onClick: this.handleCancelEditButton, identifier: `${this.identifier}-edition-button-cancel` }, h("mg-icon", { icon: "cross" })), h("mg-button", { slot: "append-input", label: this.messages.general.confirm, "is-icon": true, variant: "secondary", onClick: this.handleValidateEditButton, identifier: `${this.identifier}-edition-button-validate` }, h("mg-icon", { icon: "check" }))));
+    this.renderEditInput = () => (h("mg-input-text", { key: "edition-input", label: this.messages.panel.editLabel, "label-hide": true, value: this.panelTitle, "onValue-change": this.handleUpdateTitle, displayCharacterLeft: false, pattern: this.titlePattern, "pattern-error-message": this.titlePatternErrorMessage, identifier: `${this.identifier}-edition-input`, ref: (el) => (this.editInputElement = el) }, h("mg-button", { slot: "append-input", label: this.messages.general.cancel, "is-icon": true, variant: "secondary", onClick: this.handleCancelEditButton, identifier: `${this.identifier}-edition-button-cancel` }, h("mg-icon", { icon: "cross" })), h("mg-button", { slot: "append-input", label: this.messages.general.confirm, "is-icon": true, variant: "secondary", onClick: this.handleValidateEditButton, identifier: `${this.identifier}-edition-button-validate` }, h("mg-icon", { icon: "check" }))));
     /**
      * Render title
      * @returns title element
@@ -274,7 +274,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 +316,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"
             }
           }
         },
@@ -408,3 +410,4 @@ export class MgPanel {
       }];
   }
 }
+//# sourceMappingURL=mg-panel.js.map

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

@@ -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 @Watch('titlePattern')\n validatetitlePattern(newValue: string): void {\n if (newValue !== undefined && !this.titleEditable) throw new Error('<mg-panel> prop \"titleEditable\" must be set to `true`.');\n if (newValue !== undefined && (this.titlePatternErrorMessage === undefined || this.titlePatternErrorMessage.trim() === ''))\n throw new Error('<mg-panel> prop \"titlePattern\" must be paired with the prop \"titlePatternErrorMessage\".');\n }\n\n /**\n * Panel title pattern error message\n */\n @Prop() titlePatternErrorMessage: string;\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.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 ADDED Viewed

@@ -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)$)[a-z A-Z0-9s]+$/, 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 ADDED Viewed

@@ -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)$)[a-z A-Z0-9s]+$/ as unknown as string,\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"]}