npm - @mgdis/mg-components - Versions diffs - 5.16.0 → 5.18.0 - Mend

@mgdis/mg-components 5.16.0 → 5.18.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 (475) hide show

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

@@ -0,0 +1,109 @@
+import { h } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { MgMessage } from "../mg-message";
+import { variants } from "../mg-message.conf";
+const getDefaultContent = () => (h("p", null, h("strong", null, "Strong"), " content!"));
+const getPage = (args, content) => newSpecPage({
+  components: [MgMessage],
+  template: () => h("mg-message", Object.assign({}, args), content),
+});
+describe('mg-message', () => {
+  describe.each(variants)('Should render a %s message', variant => {
+    test.each([
+      { identifier: 'identifier' },
+      { identifier: 'identifier', closeButton: true },
+      { identifier: 'identifier', closeButton: true, lang: 'fr' },
+      { identifier: 'identifier', closeButton: true, lang: 'xx' },
+    ])('with args %s', async (args) => {
+      const { root } = await getPage(Object.assign(Object.assign({}, args), { variant }), getDefaultContent());
+      expect(root).toMatchSnapshot();
+    });
+  });
+  test('Should replace classes on variant changes', async () => {
+    const page = await getPage({ identifier: 'identifier' }, getDefaultContent());
+    const element = page.doc.querySelector('mg-message');
+    let classInfo = element.shadowRoot.querySelector('.mg-message--info');
+    expect(classInfo).not.toBeNull();
+    element.variant = 'danger';
+    await page.waitForChanges();
+    classInfo = element.shadowRoot.querySelector('.mg-message--info');
+    const classDanger = element.shadowRoot.querySelector('.mg-message--danger');
+    expect(classInfo).toBeNull();
+    expect(classDanger).not.toBeNull();
+  });
+  test.each(['', 'blu'])('Should throw error with invalid variant property: %s', async (variant) => {
+    expect.assertions(1);
+    try {
+      await getPage({ identifier: 'identifier', variant }, getDefaultContent());
+    }
+    catch (err) {
+      expect(err.message).toMatch('<mg-message> prop "variant" must be one of:');
+    }
+  });
+  test('Should throw error with invalid delay property: 50ms', async () => {
+    expect.assertions(1);
+    try {
+      await getPage({ identifier: 'identifier', delay: 1 }, getDefaultContent());
+    }
+    catch (err) {
+      expect(err.message).toMatch('<mg-message> prop "delay" must be greater than 2 seconds.');
+    }
+  });
+  test('Should throw error when using prop "close-button" with an action slot', async () => {
+    expect.assertions(1);
+    try {
+      await getPage({ identifier: 'identifier', closeButton: true }, [
+        getDefaultContent(),
+        h("div", { slot: "actions", class: "mg-group-elements mg-group-elements--align-right" }, h("mg-button", null, "Primary"), h("mg-button", { variant: "secondary" }, "Secondary")),
+      ]);
+    }
+    catch (err) {
+      expect(err.message).toMatch('<mg-message> prop "close-button" can\'t be used with the actions slot.');
+    }
+  });
+  test('Should hide message on close button', async () => {
+    const args = { identifier: 'identifier', closeButton: true };
+    const page = await getPage(args, getDefaultContent());
+    const element = page.doc.querySelector('mg-message');
+    const button = element.shadowRoot.querySelector('mg-button');
+    jest.spyOn(page.rootInstance.componentHide, 'emit');
+    button.dispatchEvent(new CustomEvent('click', { bubbles: true }));
+    await page.waitForChanges();
+    expect(page.rootInstance.componentHide.emit).toHaveBeenCalledTimes(1);
+    expect(page.rootInstance.classCollection.join()).toContain('mg-message--hide');
+  });
+  test('Should hide message on delay', async () => {
+    const args = { identifier: 'identifier', delay: 2 };
+    const page = await getPage(args, getDefaultContent());
+    jest.spyOn(page.rootInstance.componentHide, 'emit');
+    jest.spyOn(page.rootInstance.componentShow, 'emit');
+    expect(page.rootInstance.classCollection.join()).not.toContain('mg-message--hide');
+    jest.advanceTimersByTime(args.delay * 1000);
+    expect(page.rootInstance.classCollection.join()).toContain('mg-message--hide');
+    expect(page.rootInstance.componentHide.emit).toHaveBeenCalledTimes(1);
+    page.rootInstance.hide = false;
+    await page.waitForChanges();
+    expect(page.rootInstance.classCollection.join()).not.toContain('mg-message--hide');
+    expect(page.rootInstance.componentShow.emit).toHaveBeenCalledTimes(1);
+    jest.advanceTimersByTime(args.delay * 1000);
+    expect(page.rootInstance.classCollection.join()).toContain('mg-message--hide');
+    expect(page.rootInstance.componentHide.emit).toHaveBeenCalledTimes(2);
+  });
+  test.each(['focus', 'mouse'])('Should manage event %s with delay', async (eventType) => {
+    const args = { identifier: 'identifier', delay: 2 };
+    const page = await getPage(args, getDefaultContent());
+    jest.spyOn(page.rootInstance.componentHide, 'emit');
+    jest.spyOn(page.rootInstance.componentShow, 'emit');
+    const element = page.doc.querySelector('mg-message');
+    expect(page.rootInstance.classCollection.join()).not.toContain('mg-message--hide');
+    jest.advanceTimersByTime((args.delay / 2) * 1000);
+    element.dispatchEvent(eventType === 'focus' ? new FocusEvent('focusin') : new MouseEvent('mouseenter'));
+    jest.advanceTimersByTime(args.delay * 1000);
+    expect(page.rootInstance.classCollection.join()).not.toContain('mg-message--hide');
+    element.dispatchEvent(eventType === 'focus' ? new FocusEvent('focusout') : new MouseEvent('mouseleave'));
+    jest.advanceTimersByTime(args.delay * 1000);
+    expect(page.rootInstance.classCollection.join()).toContain('mg-message--hide');
+    expect(page.rootInstance.componentHide.emit).toHaveBeenCalledTimes(1);
+  });
+});
+//# sourceMappingURL=mg-message.spec.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"mg-message.spec.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-message/test/mg-message.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { MgMessage } from '../mg-message';\nimport { variants } from '../mg-message.conf';\n\nconst getDefaultContent = () => (\n <p>\n <strong>Strong</strong> content!\n </p>\n);\n\nconst getPage = (args, content) =>\n newSpecPage({\n components: [MgMessage],\n template: () => <mg-message {...args}>{content}</mg-message>,\n });\n\ndescribe('mg-message', () => {\n describe.each(variants)('Should render a %s message', variant => {\n test.each([\n { identifier: 'identifier' },\n { identifier: 'identifier', closeButton: true },\n { identifier: 'identifier', closeButton: true, lang: 'fr' },\n { identifier: 'identifier', closeButton: true, lang: 'xx' },\n ])('with args %s', async args => {\n const { root } = await getPage({ ...args, variant }, getDefaultContent());\n expect(root).toMatchSnapshot();\n });\n });\n\n test('Should replace classes on variant changes', async () => {\n const page = await getPage({ identifier: 'identifier' }, getDefaultContent());\n const element = page.doc.querySelector('mg-message');\n let classInfo = element.shadowRoot.querySelector('.mg-message--info');\n\n expect(classInfo).not.toBeNull();\n\n element.variant = 'danger';\n await page.waitForChanges();\n\n classInfo = element.shadowRoot.querySelector('.mg-message--info');\n const classDanger = element.shadowRoot.querySelector('.mg-message--danger');\n\n expect(classInfo).toBeNull();\n expect(classDanger).not.toBeNull();\n });\n\n test.each(['', 'blu'])('Should throw error with invalid variant property: %s', async variant => {\n expect.assertions(1);\n try {\n await getPage({ identifier: 'identifier', variant }, getDefaultContent());\n } catch (err) {\n expect(err.message).toMatch('<mg-message> prop \"variant\" must be one of:');\n }\n });\n\n test('Should throw error with invalid delay property: 50ms', async () => {\n expect.assertions(1);\n try {\n await getPage({ identifier: 'identifier', delay: 1 }, getDefaultContent());\n } catch (err) {\n expect(err.message).toMatch('<mg-message> prop \"delay\" must be greater than 2 seconds.');\n }\n });\n\n test('Should throw error when using prop \"close-button\" with an action slot', async () => {\n expect.assertions(1);\n try {\n await getPage({ identifier: 'identifier', closeButton: true }, [\n getDefaultContent(),\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 } catch (err) {\n expect(err.message).toMatch('<mg-message> prop \"close-button\" can\\'t be used with the actions slot.');\n }\n });\n\n test('Should hide message on close button', async () => {\n const args = { identifier: 'identifier', closeButton: true };\n const page = await getPage(args, getDefaultContent());\n\n const element = page.doc.querySelector('mg-message');\n const button = element.shadowRoot.querySelector('mg-button');\n\n jest.spyOn(page.rootInstance.componentHide, 'emit');\n\n button.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n await page.waitForChanges();\n\n expect(page.rootInstance.componentHide.emit).toHaveBeenCalledTimes(1);\n expect(page.rootInstance.classCollection.join()).toContain('mg-message--hide');\n });\n\n test('Should hide message on delay', async () => {\n const args = { identifier: 'identifier', delay: 2 };\n const page = await getPage(args, getDefaultContent());\n\n jest.spyOn(page.rootInstance.componentHide, 'emit');\n jest.spyOn(page.rootInstance.componentShow, 'emit');\n\n expect(page.rootInstance.classCollection.join()).not.toContain('mg-message--hide');\n\n jest.advanceTimersByTime(args.delay * 1000);\n\n expect(page.rootInstance.classCollection.join()).toContain('mg-message--hide');\n expect(page.rootInstance.componentHide.emit).toHaveBeenCalledTimes(1);\n\n page.rootInstance.hide = false;\n await page.waitForChanges();\n\n expect(page.rootInstance.classCollection.join()).not.toContain('mg-message--hide');\n expect(page.rootInstance.componentShow.emit).toHaveBeenCalledTimes(1);\n\n jest.advanceTimersByTime(args.delay * 1000);\n\n expect(page.rootInstance.classCollection.join()).toContain('mg-message--hide');\n expect(page.rootInstance.componentHide.emit).toHaveBeenCalledTimes(2);\n });\n\n test.each(['focus', 'mouse'])('Should manage event %s with delay', async eventType => {\n const args = { identifier: 'identifier', delay: 2 };\n const page = await getPage(args, getDefaultContent());\n\n jest.spyOn(page.rootInstance.componentHide, 'emit');\n jest.spyOn(page.rootInstance.componentShow, 'emit');\n\n const element = page.doc.querySelector('mg-message');\n\n expect(page.rootInstance.classCollection.join()).not.toContain('mg-message--hide');\n\n jest.advanceTimersByTime((args.delay / 2) * 1000);\n\n element.dispatchEvent(eventType === 'focus' ? new FocusEvent('focusin') : new MouseEvent('mouseenter'));\n\n jest.advanceTimersByTime(args.delay * 1000);\n\n expect(page.rootInstance.classCollection.join()).not.toContain('mg-message--hide');\n\n element.dispatchEvent(eventType === 'focus' ? new FocusEvent('focusout') : new MouseEvent('mouseleave'));\n\n jest.advanceTimersByTime(args.delay * 1000);\n\n expect(page.rootInstance.classCollection.join()).toContain('mg-message--hide');\n expect(page.rootInstance.componentHide.emit).toHaveBeenCalledTimes(1);\n });\n});\n"]}

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

@@ -2,3 +2,4 @@
  * List of all possibles dialog roles
  */
 export const dialogRoles = ['dialog', 'alertdialog'];
+//# sourceMappingURL=mg-modal.conf.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"mg-modal.conf.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-modal/mg-modal.conf.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,QAAQ,EAAE,aAAa,CAAU,CAAC","sourcesContent":["/**\n * List of all possibles dialog roles\n */\nexport const dialogRoles = ['dialog', 'alertdialog'] as const;\n\n/**\n * DialogRole type from dialog roles\n */\nexport type DialogRoleType = (typeof dialogRoles)[number];\n"]}

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

@@ -1,7 +1,7 @@
-import { h } from '@stencil/core';
-import { createID, ClassList, focusableElements } from '../../../utils/components.utils';
-import { initLocales } from '../../../locales';
-import { dialogRoles } from './mg-modal.conf';
+import { h } from "@stencil/core";
+import { createID, ClassList, focusableElements } from "../../../utils/components.utils";
+import { initLocales } from "../../../locales";
+import { dialogRoles } from "./mg-modal.conf";
 export class MgModal {
   constructor() {
     /************
@@ -201,7 +201,8 @@ export class MgModal {
           "references": {
             "DialogRoleType": {
               "location": "import",
-              "path": "./mg-modal.conf"
+              "path": "./mg-modal.conf",
+              "id": "src/components/molecules/mg-modal/mg-modal.conf.ts::DialogRoleType"
             }
           }
         },
@@ -332,3 +333,4 @@ export class MgModal {
       }];
   }
 }
+//# sourceMappingURL=mg-modal.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"mg-modal.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-modal/mg-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Watch, Element, Event, EventEmitter, Listen } from '@stencil/core';\nimport { createID, ClassList, focusableElements } from '../../../utils/components.utils';\nimport { initLocales } from '../../../locales';\nimport { DialogRoleType, dialogRoles } from './mg-modal.conf';\n\n@Component({\n tag: 'mg-modal',\n styleUrl: 'mg-modal.scss',\n shadow: true,\n})\nexport class MgModal {\n /************\n * Internal *\n ************/\n\n // Modal focusable elements\n private modalFocusableElements: HTMLElement[] = [];\n private closeButtonElement: HTMLMgButtonElement;\n\n // Classes\n private readonly classHide = 'mg-modal--hide';\n\n // IDs\n private titleId = '';\n\n // Locales\n private messages;\n\n // body overflow default\n private bodyOverflow: string;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgModalElement;\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-modal');\n\n /**\n * Modal dialog role.\n */\n @Prop() dialogRole: DialogRoleType = dialogRoles[0];\n @Watch('dialogRole')\n validateDialogRole(newValue: MgModal['dialogRole']): void {\n if (!dialogRoles.includes(newValue)) throw new Error(`<mg-modal> prop \"dialogRole\" must be one of: ${dialogRoles.join(', ')}.`);\n }\n\n /**\n * Displayed modal title\n */\n @Prop() modalTitle!: string;\n @Watch('modalTitle')\n validateModalTitle(newValue: MgModal['modalTitle']): void {\n if (typeof newValue !== 'string' || newValue.trim() === '') {\n throw new Error('<mg-modal> prop \"modalTitle\" is required.');\n }\n }\n\n /**\n * Define if modal has a cross button\n */\n @Prop() closeButton = false;\n\n /**\n * Define if modal is hidden\n */\n @Prop({ mutable: true }) hide: boolean;\n @Watch('hide')\n validateHide(newValue: MgModal['hide']): void {\n if (newValue) {\n this.componentHide.emit();\n this.classCollection.add(this.classHide);\n document.body.style.overflow = this.bodyOverflow;\n // reset focus handlers\n this.getLastFocusableElement()?.removeEventListener('keydown', this.handleLastFocusableElement);\n if (this.modalFocusableElements.length > 0) this.modalFocusableElements[0].removeEventListener('keydown', this.handleFirstFocusableElement);\n } else if (newValue === false) {\n this.componentShow.emit();\n this.classCollection.delete(this.classHide);\n document.body.style.overflow = 'hidden';\n this.setFocus();\n }\n }\n\n /**\n * Define if component is using actions slot\n */\n @State() hasActions = false;\n\n /**\n * Define if component is using content slot\n */\n @State() hasContent = false;\n\n /**\n * Component classes\n */\n @State() classCollection: ClassList = new ClassList(['mg-modal']);\n\n /**\n * Emmited event when modal is diplayed\n */\n @Event({ eventName: 'component-show' }) componentShow: EventEmitter<string>;\n\n /**\n * Emmited event when modal is hidden\n */\n @Event({ eventName: 'component-hide' }) componentHide: EventEmitter<string>;\n\n /**\n * Handle 'escape' key down\n * @param event - keydown event\n */\n @Listen('keydown', {\n target: 'window',\n })\n handleKeyDown(event: KeyboardEvent): void {\n // we can use 'Escape button\" when this not a blocking modal, induced by closeButton value.\n if (this.closeButton && event.key === 'Escape') {\n this.hide = true;\n }\n }\n\n /**\n * Handle last focusable element\n * @param event - keyboard event\n */\n private handleLastFocusableElement = (event): void => {\n if (event.key === 'Tab' && !event.shiftKey) {\n event.preventDefault();\n this.modalFocusableElements[0].focus();\n }\n };\n\n /**\n * Handle first focusable element\n * @param event - keyboard event\n */\n private handleFirstFocusableElement = (event): void => {\n if (event.key === 'Tab' && event.shiftKey) {\n event.preventDefault();\n this.getLastFocusableElement().focus();\n }\n };\n\n /**\n * Get last focusablmeElement\n * @returns last modal focusable element\n */\n private getLastFocusableElement = (): HTMLElement | null => (this.modalFocusableElements.length > 0 ? this.modalFocusableElements[this.modalFocusableElements.length - 1] : null);\n\n /**\n * Method to manage focus on modal focusable elements\n */\n private setFocus = (): void => {\n // Get all focusable elements\n const allFocusableElements = Array.from(this.element.querySelectorAll(focusableElements));\n // If at least one\n if (allFocusableElements.length > 0) {\n this.modalFocusableElements = allFocusableElements.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 (this.closeButton && this.closeButtonElement !== undefined) {\n this.modalFocusableElements.unshift(this.closeButtonElement);\n }\n // Add event listener on last element\n this.getLastFocusableElement().addEventListener('keydown', this.handleLastFocusableElement);\n // Add event listener on first element (case shift + tab)\n this.modalFocusableElements[0].addEventListener('keydown', this.handleFirstFocusableElement);\n }\n };\n\n /*************\n * Handlers *\n *************/\n\n /**\n * Handle close button\n */\n private handleClose = (): void => {\n this.hide = true;\n };\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if component props are well configured on init\n */\n componentWillLoad(): void {\n // Store body overflow\n this.bodyOverflow = document.body.style.overflow;\n // Get locales\n this.messages = initLocales(this.element).messages;\n // Validate\n this.hasActions = this.element.querySelector('[slot=\"actions\"]') !== null;\n this.hasContent = this.element.querySelector('[slot=\"content\"]') !== null;\n this.titleId = `${this.identifier}-title`;\n this.validateModalTitle(this.modalTitle);\n this.validateHide(this.hide);\n this.validateDialogRole(this.dialogRole);\n }\n\n /**\n * Add observer on component to set focus when displayed\n */\n componentDidLoad(): void {\n new MutationObserver(mutationList => {\n // as mutation.target is null on chrome and '' or undefined on firefox we test both with the 'aria-hidden' attribute mutation\n if (mutationList.some(mutation => mutation.attributeName === 'aria-hidden' && ['', null, undefined].includes((mutation.target as HTMLElement).ariaHidden))) {\n // Set focus on first element\n this.modalFocusableElements[0].focus();\n }\n }).observe(this.element.shadowRoot.getElementById(this.identifier), { attributes: true });\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <div role={this.dialogRole} id={this.identifier} class={this.classCollection.join()} tabindex=\"-1\" aria-labelledby={this.titleId} aria-modal=\"true\" aria-hidden={this.hide}>\n <mg-card>\n <div class=\"mg-modal__dialog\">\n <header class=\"mg-modal__header\">\n {this.closeButton && (\n <span class=\"mg-modal__close-button\">\n <mg-button\n identifier={`${this.identifier}-close-button`}\n is-icon\n variant=\"flat\"\n label={this.messages.modal.closeButton}\n onClick={this.handleClose}\n ref={(el: HTMLMgButtonElement) => {\n if (el !== null) {\n // store closeButton Element\n this.closeButtonElement = el;\n // add close button element to modalFocusableElements when it is render\n this.modalFocusableElements.unshift(this.closeButtonElement);\n }\n }}\n >\n <mg-icon icon=\"cross\"></mg-icon>\n </mg-button>\n </span>\n )}\n <h1 class=\"mg-modal__title\" id={this.titleId}>\n {this.modalTitle}\n </h1>\n </header>\n\n {this.hasContent && (\n <article class=\"mg-modal__content\">\n <slot name=\"content\"></slot>\n </article>\n )}\n\n {this.hasActions && (\n <footer class=\"mg-modal__footer\">\n <slot name=\"actions\"></slot>\n </footer>\n )}\n </div>\n </mg-card>\n </div>\n );\n }\n}\n"]}

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

@@ -0,0 +1,62 @@
+import { setPageContent, expect, describe, describeEach, testEach, test } from "../../../../utils/playwright.e2e.test.utils";
+import { actions, contents, createHTML } from "./mg-modal.e2e.template";
+describe('mg-modal', () => {
+  const slotsToTests = actions.flatMap(action => contents.map(content => ({ action, content })));
+  describeEach(slotsToTests)('render whith slots %s', slots => {
+    testEach([
+      { closeButton: false, hide: false },
+      { closeButton: true, hide: false },
+      {
+        closeButton: true,
+        modalTitle: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat',
+      },
+    ])('Should render %s', async (page, args) => {
+      await setPageContent(page, createHTML(args, slots));
+      await expect(page.locator(args.hide ? 'body' : '.mg-modal')).toHaveScreenshot();
+    });
+  });
+  test('Should render hidden modal', async ({ page }) => {
+    await setPageContent(page, createHTML({ hide: true }));
+    await expect(page.locator('body')).toHaveScreenshot();
+  });
+  describe('style', () => {
+    test('Should render with child mg-card', async ({ page }) => {
+      await setPageContent(page, `<mg-modal modal-title="child mg-card" class="custom-modal-card">
+          <mg-card slot="content">child card</mg-card>
+          </mg-modal>
+          <style>.custom-modal-card {--mg-card-background: hsl(var(--color-danger));}</style>
+        `);
+      await expect(page.locator('.mg-modal')).toHaveScreenshot();
+    });
+  });
+  describe('navigation', () => {
+    test('Should trigger modal and close modal.', async ({ page }) => {
+      await setPageContent(page, createHTML({ closeButton: true, hide: true }, { action: true, content: 'short' }));
+      await expect(page.locator('body')).toHaveScreenshot();
+      // open modal
+      await page.locator('#modal-button').click();
+      await expect(page.locator('.mg-modal')).toHaveScreenshot();
+      // close modal
+      await page.locator('.mg-modal mg-button').click();
+      await expect(page.locator('body')).toHaveScreenshot();
+    });
+    test('should navigate with keyboard', async ({ page }) => {
+      await setPageContent(page, createHTML({ closeButton: true, hide: true }, { action: true, content: 'short' }));
+      await expect(page.locator('body')).toHaveScreenshot();
+      // open modal
+      await page.keyboard.press('Tab');
+      await page.keyboard.press('Enter');
+      await expect(page.locator('.mg-modal')).toHaveScreenshot();
+      // loop in modal
+      await page.keyboard.press('Tab');
+      await expect(page.locator('.mg-modal')).toHaveScreenshot();
+      await page.keyboard.press('Tab');
+      await page.keyboard.press('Tab');
+      await expect(page.locator('.mg-modal')).toHaveScreenshot();
+      // close modal
+      await page.keyboard.press('Enter');
+      await expect(page.locator('body')).toHaveScreenshot();
+    });
+  });
+});
+//# sourceMappingURL=mg-modal.e2e.playwright.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"mg-modal.e2e.playwright.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-modal/test/mg-modal.e2e.playwright.ts"],"names":[],"mappings":"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","sourcesContent":["import { setPageContent, expect, describe, describeEach, testEach, PageType, test } from '../../../../utils/playwright.e2e.test.utils';\nimport { MgModalType, actions, contents, createHTML } from './mg-modal.e2e.template';\n\ndescribe('mg-modal', () => {\n const slotsToTests = actions.flatMap(action => contents.map(content => ({ action, content })));\n describeEach(slotsToTests)('render whith slots %s', slots => {\n testEach([\n { closeButton: false, hide: false },\n { closeButton: true, hide: false },\n {\n closeButton: true,\n modalTitle:\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat',\n },\n ])('Should render %s', async (page: PageType, args: MgModalType) => {\n await setPageContent(page, createHTML(args, slots));\n\n await expect(page.locator(args.hide ? 'body' : '.mg-modal')).toHaveScreenshot();\n });\n });\n\n test('Should render hidden modal', async ({ page }) => {\n await setPageContent(page, createHTML({ hide: true }));\n\n await expect(page.locator('body')).toHaveScreenshot();\n });\n\n describe('style', () => {\n test('Should render with child mg-card', async ({ page }) => {\n await setPageContent(\n page,\n `<mg-modal modal-title=\"child mg-card\" class=\"custom-modal-card\">\n <mg-card slot=\"content\">child card</mg-card>\n </mg-modal>\n <style>.custom-modal-card {--mg-card-background: hsl(var(--color-danger));}</style>\n `,\n );\n\n await expect(page.locator('.mg-modal')).toHaveScreenshot();\n });\n });\n\n describe('navigation', () => {\n test('Should trigger modal and close modal.', async ({ page }) => {\n await setPageContent(page, createHTML({ closeButton: true, hide: true }, { action: true, content: 'short' }));\n\n await expect(page.locator('body')).toHaveScreenshot();\n\n // open modal\n await page.locator('#modal-button').click();\n\n await expect(page.locator('.mg-modal')).toHaveScreenshot();\n\n // close modal\n await page.locator('.mg-modal mg-button').click();\n\n await expect(page.locator('body')).toHaveScreenshot();\n });\n\n test('should navigate with keyboard', async ({ page }) => {\n await setPageContent(page, createHTML({ closeButton: true, hide: true }, { action: true, content: 'short' }));\n await expect(page.locator('body')).toHaveScreenshot();\n\n // open modal\n await page.keyboard.press('Tab');\n await page.keyboard.press('Enter');\n await expect(page.locator('.mg-modal')).toHaveScreenshot();\n\n // loop in modal\n await page.keyboard.press('Tab');\n await expect(page.locator('.mg-modal')).toHaveScreenshot();\n await page.keyboard.press('Tab');\n await page.keyboard.press('Tab');\n await expect(page.locator('.mg-modal')).toHaveScreenshot();\n\n // close modal\n await page.keyboard.press('Enter');\n await expect(page.locator('body')).toHaveScreenshot();\n });\n });\n});\n"]}

package/dist/collection/components/molecules/mg-modal/test/mg-modal.e2e.template.js ADDED Viewed

@@ -0,0 +1,40 @@
+import { renderAttributes } from "../../../../utils/e2e.test.utils";
+export const contents = [null, 'short', 'long'];
+export const actions = [true, false];
+export const createSlots = ({ content, action }) => {
+  let slots = '';
+  if (content === 'short') {
+    slots += `
+    <p slot="content">
+      <strong>Strong</strong> content!
+    </p>`;
+  }
+  if (content === 'long') {
+    slots += `
+      <p slot="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia dLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia dLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia dLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia dLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia dLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia dLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia d</p>
+    `;
+  }
+  if (action) {
+    slots += `
+   <div slot="actions" class="mg-group-elements mg-group-elements--align-right">
+     <mg-button identifier="identifier">Primary</mg-button>
+     <mg-button variant="secondary" identifier="identifier">
+       Secondary
+     </mg-button>
+   </div>`;
+  }
+  return slots;
+};
+export const createHTML = (args, slots = {}) => {
+  const triggerModalId = 'modal-button';
+  return `<mg-button id="${triggerModalId}">Open modal</mg-button>
+  <mg-modal ${renderAttributes(Object.assign({ modalTitle: 'Modal title' }, args))}>${createSlots(slots)}</mg-modal>
+  <script>
+    document.getElementById('${triggerModalId}').addEventListener('click', () => {
+      const mgModal = document.querySelector('mg-modal');
+      mgModal.hide = !mgModal.hide;
+    });
+  </script>
+  `;
+};
+//# sourceMappingURL=mg-modal.e2e.template.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"mg-modal.e2e.template.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-modal/test/mg-modal.e2e.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAGpE,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,CAAU,CAAC;AACzD,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,IAAI,EAAE,KAAK,CAAU,CAAC;AAM9C,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,OAAO,EAAE,MAAM,EAAY,EAAU,EAAE;EACnE,IAAI,KAAK,GAAG,EAAE,CAAC;EACf,IAAI,OAAO,KAAK,OAAO,EAAE;IACvB,KAAK,IAAI;;;SAGJ,CAAC;GACP;EACD,IAAI,OAAO,KAAK,MAAM,EAAE;IACtB,KAAK,IAAI;;KAER,CAAC;GACH;EACD,IAAI,MAAM,EAAE;IACV,KAAK,IAAI;;;;;;UAMH,CAAC;GACR;EAED,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,IAAiB,EAAE,QAAkB,EAAE,EAAU,EAAE;EAC5E,MAAM,cAAc,GAAG,cAAc,CAAC;EACtC,OAAO,kBAAkB,cAAc;cAC3B,gBAAgB,iBAAG,UAAU,EAAE,aAAa,IAAK,IAAI,EAAG,IAAI,WAAW,CAAC,KAAK,CAAC;;+BAE7D,cAAc;;;;;GAK1C,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { renderAttributes } from '../../../../utils/e2e.test.utils';\nimport { MgModal } from '../mg-modal';\n\nexport const contents = [null, 'short', 'long'] as const;\nexport const actions = [true, false] as const;\nexport type ContentsType = (typeof contents)[number];\nexport type ActionsType = (typeof actions)[number];\nexport type SlotType = { content?: ContentsType; action?: ActionsType };\nexport type MgModalType = Partial<MgModal>;\n\nexport const createSlots = ({ content, action }: SlotType): string => {\n let slots = '';\n if (content === 'short') {\n slots += `\n <p slot=\"content\">\n <strong>Strong</strong> content!\n </p>`;\n }\n if (content === 'long') {\n slots += `\n <p slot=\"content\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia dLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia dLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia dLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia dLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia dLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia dLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia d</p>\n `;\n }\n if (action) {\n slots += `\n <div slot=\"actions\" class=\"mg-group-elements mg-group-elements--align-right\">\n <mg-button identifier=\"identifier\">Primary</mg-button>\n <mg-button variant=\"secondary\" identifier=\"identifier\">\n Secondary\n </mg-button>\n </div>`;\n }\n\n return slots;\n};\n\nexport const createHTML = (args: MgModalType, slots: SlotType = {}): string => {\n const triggerModalId = 'modal-button';\n return `<mg-button id=\"${triggerModalId}\">Open modal</mg-button>\n <mg-modal ${renderAttributes({ modalTitle: 'Modal title', ...args })}>${createSlots(slots)}</mg-modal>\n <script>\n document.getElementById('${triggerModalId}').addEventListener('click', () => {\n const mgModal = document.querySelector('mg-modal');\n mgModal.hide = !mgModal.hide;\n });\n </script>\n `;\n};\n"]}

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

@@ -0,0 +1,26 @@
+import { setPageContent, expect, describe, test, devices } from "../../../../utils/playwright.e2e.test.utils";
+import { createHTML } from "./mg-modal.e2e.template";
+test.use(Object.assign({}, devices['Desktop Firefox']));
+describe('mg-modal, firefox', () => {
+  describe('navigation', () => {
+    test('should navigate with keyboard', async ({ page }) => {
+      await setPageContent(page, createHTML({ closeButton: true, hide: true }, { action: true, content: 'short' }));
+      await expect(page.locator('body')).toHaveScreenshot();
+      // open modal
+      await page.keyboard.press('Tab');
+      await page.keyboard.press('Enter');
+      await expect(page.locator('.mg-modal')).toHaveScreenshot();
+      // loop in modal
+      await page.keyboard.press('Tab');
+      await expect(page.locator('.mg-modal')).toHaveScreenshot();
+      await page.keyboard.press('Tab');
+      await page.keyboard.press('Tab');
+      await expect(page.locator('.mg-modal')).toHaveScreenshot();
+      // close modal
+      await page.keyboard.press('Enter');
+      await page.waitForTimeout(100);
+      await expect(page.locator('body')).toHaveScreenshot();
+    });
+  });
+});
+//# sourceMappingURL=mg-modal.firefox.e2e.playwright.js.map

package/dist/collection/components/molecules/mg-modal/test/mg-modal.firefox.e2e.playwright.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"mg-modal.firefox.e2e.playwright.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-modal/test/mg-modal.firefox.e2e.playwright.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,6CAA6C,CAAC;AAC9G,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErD,IAAI,CAAC,GAAG,mBAAM,OAAO,CAAC,iBAAiB,CAAC,EAAG,CAAC;AAE5C,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;EACjC,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,IAAI,CAAC,+BAA+B,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;MACvD,MAAM,cAAc,CAAC,IAAI,EAAE,UAAU,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;MAC9G,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;MAEtD,aAAa;MACb,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;MACjC,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;MACnC,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;MAE3D,gBAAgB;MAChB,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;MACjC,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;MAC3D,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;MACjC,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;MACjC,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;MAE3D,cAAc;MACd,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;MACnC,MAAM,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;MAC/B,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;IACxD,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { setPageContent, expect, describe, test, devices } from '../../../../utils/playwright.e2e.test.utils';\nimport { createHTML } from './mg-modal.e2e.template';\n\ntest.use({ ...devices['Desktop Firefox'] });\n\ndescribe('mg-modal, firefox', () => {\n describe('navigation', () => {\n test('should navigate with keyboard', async ({ page }) => {\n await setPageContent(page, createHTML({ closeButton: true, hide: true }, { action: true, content: 'short' }));\n await expect(page.locator('body')).toHaveScreenshot();\n\n // open modal\n await page.keyboard.press('Tab');\n await page.keyboard.press('Enter');\n await expect(page.locator('.mg-modal')).toHaveScreenshot();\n\n // loop in modal\n await page.keyboard.press('Tab');\n await expect(page.locator('.mg-modal')).toHaveScreenshot();\n await page.keyboard.press('Tab');\n await page.keyboard.press('Tab');\n await expect(page.locator('.mg-modal')).toHaveScreenshot();\n\n // close modal\n await page.keyboard.press('Enter');\n await page.waitForTimeout(100);\n await expect(page.locator('body')).toHaveScreenshot();\n });\n });\n});\n"]}

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

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

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"]}