@mgdis/mg-components 5.15.0 → 5.17.0

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

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

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

@@ -0,0 +1,5 @@
+/**
+ * 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

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

@@ -1,6 +1,7 @@
-import { h } from '@stencil/core';
-import { createID, ClassList, focusableElements } from '../../../utils/components.utils';
-import { initLocales } from '../../../locales';
+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() {
     /************
@@ -69,13 +70,18 @@ export class MgModal {
       this.hide = true;
     };
     this.identifier = createID('mg-modal');
+    this.dialogRole = dialogRoles[0];
     this.modalTitle = undefined;
     this.closeButton = false;
-    this.hide = false;
+    this.hide = undefined;
     this.hasActions = false;
     this.hasContent = false;
     this.classCollection = new ClassList(['mg-modal']);
   }
+  validateDialogRole(newValue) {
+    if (!dialogRoles.includes(newValue))
+      throw new Error(`<mg-modal> prop "dialogRole" must be one of: ${dialogRoles.join(', ')}.`);
+  }
   validateModalTitle(newValue) {
     if (typeof newValue !== 'string' || newValue.trim() === '') {
       throw new Error('<mg-modal> prop "modalTitle" is required.');
@@ -92,7 +98,7 @@ export class MgModal {
       if (this.modalFocusableElements.length > 0)
         this.modalFocusableElements[0].removeEventListener('keydown', this.handleFirstFocusableElement);
     }
-    else {
+    else if (newValue === false) {
       this.componentShow.emit();
       this.classCollection.delete(this.classHide);
       document.body.style.overflow = 'hidden';
@@ -126,6 +132,7 @@ export class MgModal {
     this.titleId = `${this.identifier}-title`;
     this.validateModalTitle(this.modalTitle);
     this.validateHide(this.hide);
+    this.validateDialogRole(this.dialogRole);
   }
   /**
    * Add observer on component to set focus when displayed
@@ -144,7 +151,7 @@ export class MgModal {
    * @returns HTML Element
    */
   render() {
-    return (h("div", { role: "alertdialog", id: this.identifier, class: this.classCollection.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide }, h("mg-card", null, h("div", { class: "mg-modal__dialog" }, h("header", { class: "mg-modal__header" }, this.closeButton && (h("span", { class: "mg-modal__close-button" }, h("mg-button", { identifier: `${this.identifier}-close-button`, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose, ref: el => {
+    return (h("div", { role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide }, h("mg-card", null, h("div", { class: "mg-modal__dialog" }, h("header", { class: "mg-modal__header" }, this.closeButton && (h("span", { class: "mg-modal__close-button" }, h("mg-button", { identifier: `${this.identifier}-close-button`, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose, ref: (el) => {
         if (el !== null) {
           // store closeButton Element
           this.closeButtonElement = el;
@@ -185,6 +192,30 @@ export class MgModal {
         "reflect": false,
         "defaultValue": "createID('mg-modal')"
       },
+      "dialogRole": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DialogRoleType",
+          "resolved": "\"alertdialog\" | \"dialog\"",
+          "references": {
+            "DialogRoleType": {
+              "location": "import",
+              "path": "./mg-modal.conf",
+              "id": "src/components/molecules/mg-modal/mg-modal.conf.ts::DialogRoleType"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Modal dialog role."
+        },
+        "attribute": "dialog-role",
+        "reflect": false,
+        "defaultValue": "dialogRoles[0]"
+      },
       "modalTitle": {
         "type": "string",
         "mutable": false,
@@ -235,8 +266,7 @@ export class MgModal {
           "text": "Define if modal is hidden"
         },
         "attribute": "hide",
-        "reflect": false,
-        "defaultValue": "false"
+        "reflect": false
       }
     };
   }
@@ -283,6 +313,9 @@ export class MgModal {
   static get elementRef() { return "element"; }
   static get watchers() {
     return [{
+        "propName": "dialogRole",
+        "methodName": "validateDialogRole"
+      }, {
         "propName": "modalTitle",
         "methodName": "validateModalTitle"
       }, {
@@ -300,3 +333,4 @@ export class MgModal {
       }];
   }
 }
+//# sourceMappingURL=mg-modal.js.map

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

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

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

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

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

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

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

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

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