@mgdis/mg-components 5.15.0 → 5.17.0

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

@@ -1,21 +1,15 @@
-import { Host, h } from '@stencil/core';
-import { createID, isTagName, getWindows, ClassList } from '../../../utils/components.utils';
-import { createPopper } from '@popperjs/core';
-import { initLocales } from '../../../locales';
+import { Host, h } from "@stencil/core";
+import { createID, getWindows } from "../../../utils/components.utils";
+import { createPopper } from "@popperjs/core";
 export class MgPopover {
   constructor() {
-    this.closeButtonId = '';
-    // Classes
-    this.classArrowHide = `mg-popover--arrow-hide`;
     /**
      * Check if clicked outside of component
      * @param event - mouse event
      */
     this.clickOutside = (event) => {
-      var _a;
-      if (!this.disabled &&
-        event.target.closest('mg-popover') !== this.element &&
-        !(((_a = event.target.closest(`[data-mg-popover-guard]`)) === null || _a === void 0 ? void 0 : _a.dataset.mgPopoverGuard) === this.identifier)) {
+      const closestElement = event.target.closest(`[data-mg-popover-guard]`);
+      if (!this.disabled && event.target.closest('mg-popover') !== this.element && (closestElement === null || closestElement === void 0 ? void 0 : closestElement.dataset.mgPopoverGuard) !== this.identifier) {
         this.display = false;
       }
     };
@@ -49,24 +43,46 @@ export class MgPopover {
       });
     };
     /**
-     * Handle action for close button
+     * Handle content hide event
      */
-    this.handleCloseButton = () => {
+    this.handleHideContent = () => {
       this.display = false;
     };
+    /**
+     * Render popover content element
+     */
+    this.renderPopoverContent = () => {
+      this.mgPopoverContent = document.createElement('mg-popover-content');
+      this.mgPopoverContent.setAttribute('slot', 'content');
+      this.mgPopoverContent.setAttribute('id', this.identifier);
+      this.mgPopoverContent.addEventListener('hide-content', this.handleHideContent);
+      const arrow = document.createElement('div');
+      arrow.setAttribute('slot', 'arrow');
+      arrow.dataset.popperArrow = '';
+      this.mgPopoverContent.appendChild(arrow);
+      // insert elements in DOM
+      ['[slot="title"]', '[slot="content"]:not(mg-popover-content)'].forEach(slotType => {
+        Array.from(this.element.querySelectorAll(slotType)).forEach(slot => {
+          this.mgPopoverContent.appendChild(slot);
+        });
+      });
+      this.element.appendChild(this.mgPopoverContent);
+    };
     this.identifier = createID('mg-popover');
     this.placement = 'bottom';
     this.arrowHide = false;
     this.closeButton = false;
     this.display = false;
     this.disabled = false;
-    this.classCollection = new ClassList(['mg-popover']);
   }
   validateArrowHide(newValue) {
     if (newValue)
-      this.classCollection.add(this.classArrowHide);
+      this.mgPopoverContent.dataset.arrowHide = '';
     else
-      this.classCollection.delete(this.classArrowHide);
+      delete this.mgPopoverContent.dataset.arrowHide;
+  }
+  validateCloseButton(newValue) {
+    this.mgPopoverContent.closeButton = newValue;
   }
   handleDisplay(newValue) {
     if (newValue) {
@@ -92,25 +108,17 @@ export class MgPopover {
   componentWillLoad() {
     // Get windows to attach events
     this.windows = getWindows(window);
-    // Get locales
-    this.messages = initLocales(this.element).messages;
+    // render mg-popover-content slot
+    this.renderPopoverContent();
+    this.validateCloseButton(this.closeButton);
     this.validateArrowHide(this.arrowHide);
   }
   /**
    * Check if component props are well configured on init
    */
   componentDidLoad() {
-    const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
-    const slottedTitleElement = this.element.querySelector('[slot="title"]');
-    if (slottedTitleElement && !isTagName(slottedTitleElement, headingTags)) {
-      throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}`);
-    }
-    // Set close button id
-    if (this.closeButton) {
-      this.closeButtonId = `${this.identifier}-close-button`;
-    }
     // Get popover content
-    this.mgPopover = this.element.shadowRoot.getElementById(this.identifier);
+    this.mgPopover = this.element.querySelector(`#${this.identifier}`);
     //Get interactive element (first element without slot attribute)
     const interactiveElement = this.element.querySelector(':not([slot])');
     // Add aria attributes
@@ -129,17 +137,10 @@ export class MgPopover {
         },
       ],
     });
-    if (this.resizeObserver === undefined) {
-      // add resize observer
-      this.resizeObserver = new ResizeObserver(entries => {
-        if (entries.some(entrie => entrie.target.getAttribute('slot') !== null)) {
-          this.popper.update();
-        }
-      });
-      Array.from(this.element.querySelectorAll('[slot]')).forEach(element => {
-        this.resizeObserver.observe(element);
-      });
-    }
+    // add resize observer
+    new ResizeObserver(() => {
+      this.popper.update();
+    }).observe(this.element.querySelector('mg-popover-content'));
     // Add events to toggle display
     interactiveElement.addEventListener('click', () => {
       if (!this.disabled)
@@ -159,7 +160,7 @@ export class MgPopover {
    * @returns HTML Element
    */
   render() {
-    return (h(Host, null, h("slot", null), h("div", { id: this.identifier, class: this.classCollection.join() }, h("mg-card", null, this.closeButton && (h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { icon: "cross" }))), h("div", { class: "mg-popover__title" }, h("slot", { name: "title" })), h("slot", { name: "content" })), !this.arrowHide && h("div", { class: "mg-popover__arrow", "data-popper-arrow": true }))));
+    return (h(Host, null, h("slot", null), h("slot", { name: "content" })));
   }
   static get is() { return "mg-popover"; }
   static get encapsulation() { return "shadow"; }
@@ -202,7 +203,8 @@ export class MgPopover {
           "references": {
             "Placement": {
               "location": "import",
-              "path": "@popperjs/core"
+              "path": "@popperjs/core",
+              "id": "../../node_modules/.pnpm/@popperjs+core@2.11.7/node_modules/@popperjs/core/index.d.ts::Placement"
             }
           }
         },
@@ -290,11 +292,6 @@ export class MgPopover {
       }
     };
   }
-  static get states() {
-    return {
-      "classCollection": {}
-    };
-  }
   static get events() {
     return [{
         "method": "displayChange",
@@ -318,9 +315,13 @@ export class MgPopover {
     return [{
         "propName": "arrowHide",
         "methodName": "validateArrowHide"
+      }, {
+        "propName": "closeButton",
+        "methodName": "validateCloseButton"
       }, {
         "propName": "display",
         "methodName": "handleDisplay"
       }];
   }
 }
+//# sourceMappingURL=mg-popover.js.map

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

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

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

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

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

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

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

@@ -0,0 +1,130 @@
+import { h } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { MgPopover } from "../mg-popover";
+import { MgButton } from "../../../atoms/mg-button/mg-button";
+import { mockConsoleError, mockWindowFrames, setupResizeObserverMock } from "../../../../utils/unit.test.utils";
+import { MgPopoverContent } from "../mg-popover-content/mg-popover-content";
+mockConsoleError();
+mockWindowFrames();
+const getPage = (args, slot, parent) => {
+  const popover = () => h("mg-popover", Object.assign({}, args), slot);
+  return newSpecPage({
+    components: [MgPopover, MgPopoverContent, MgButton],
+    template: () => (parent ? h("span", { "data-mg-popover-guard": args.identifier }, popover()) : popover()),
+  });
+};
+describe('mg-popover', () => {
+  let fireRo;
+  beforeEach(() => {
+    jest.useFakeTimers();
+    setupResizeObserverMock({
+      observe: function () {
+        fireRo = this.cb;
+      },
+      disconnect: function () {
+        return null;
+      },
+    });
+  });
+  afterEach(() => jest.clearAllTimers());
+  test.each([
+    { identifier: 'identifier' },
+    { identifier: 'identifier', placement: 'auto' },
+    { identifier: 'identifier', display: true },
+    { identifier: 'identifier', closeButton: true },
+    { identifier: 'identifier', display: true },
+    { identifier: 'identifier', closeButton: true, lang: 'fr' },
+    { identifier: 'identifier', closeButton: true, lang: 'xx' },
+    { identifier: 'identifier', arrowHide: true },
+  ])('Should render with element', async (args) => {
+    const { root } = await getPage(args, [
+      h("h2", { slot: "title" }, "Blu bli blo bla"),
+      h("p", { slot: "content" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),
+      h("mg-button", { identifier: "identifier-btn" }, "mg-button"),
+    ]);
+    expect(root).toMatchSnapshot();
+  });
+  test.each([
+    { eventIn: 'click', eventOut: 'clickBtn' },
+    { eventIn: 'click', eventOut: { code: 'Escape' } },
+    { eventIn: 'click', eventOut: 'clickCross' },
+    { eventIn: 'click', eventOut: 'clickDocument' },
+    { eventIn: 'click', eventOut: 'clickPopover' },
+    { eventIn: 'click', eventOut: 'clickGuard' },
+  ])('Should manage display on events %s', async ({ eventIn, eventOut }) => {
+    const args = { identifier: 'identifier', closeButton: true };
+    const page = await getPage(args, [
+      h("h2", { slot: "title" }, "Blu bli blo bla"),
+      h("p", { slot: "content" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),
+      h("mg-button", { identifier: "identifier-btn" }, "mg-button"),
+    ], eventOut === 'clickGuard');
+    const mgPopover = page.doc.querySelector('mg-popover');
+    const interactiveElement = mgPopover.querySelector(`[aria-controls*='${args.identifier}']`);
+    const popover = mgPopover.querySelector(`#${args.identifier}`);
+    const popoverButton = popover.shadowRoot.querySelector(`mg-button`);
+    const dataGuard = page.doc.querySelector('[data-mg-popover-guard]');
+    const focusSpy = jest.spyOn(interactiveElement, 'focus');
+    const displayChangeSpy = jest.spyOn(page.rootInstance.displayChange, 'emit');
+    interactiveElement.dispatchEvent(new CustomEvent(eventIn, { bubbles: true }));
+    await page.waitForChanges();
+    jest.runAllTimers();
+    expect(popover).toHaveAttribute('data-show');
+    if (typeof eventOut === 'string') {
+      if (eventOut === 'clickBtn') {
+        interactiveElement.dispatchEvent(new Event('click', { bubbles: true }));
+      }
+      else if (eventOut === 'clickCross') {
+        popoverButton.dispatchEvent(new Event('click', { bubbles: true }));
+      }
+      else if (eventOut === 'clickDocument') {
+        document.dispatchEvent(new Event('click', { bubbles: true }));
+      }
+      else if (eventOut === 'clickPopover') {
+        popover.dispatchEvent(new Event('click', { bubbles: true }));
+      }
+      else if (eventOut === 'clickGuard') {
+        dataGuard.dispatchEvent(new Event('click', { bubbles: true }));
+      }
+    }
+    else {
+      mgPopover.dispatchEvent(new KeyboardEvent('keydown', { code: eventOut.code }));
+      expect(focusSpy).toHaveBeenCalled();
+    }
+    await page.waitForChanges();
+    if (typeof eventOut === 'string' && ['clickPopover', 'clickGuard'].includes(eventOut)) {
+      expect(popover).toHaveAttribute('data-show');
+      expect(displayChangeSpy).toHaveBeenCalledWith(true);
+    }
+    else {
+      expect(popover).not.toHaveAttribute('data-show');
+      expect(displayChangeSpy).toHaveBeenCalledWith(false);
+    }
+  });
+  test('Should throw error if slot title element is not a heading', async () => {
+    expect.assertions(1);
+    try {
+      const args = { identifier: 'identifier', closeButton: true };
+      await getPage(args, [
+        h("span", { slot: "title" }, "Blu bli blo bla"),
+        h("p", { slot: "content" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),
+        h("mg-button", { identifier: "identifier-btn" }, "mg-button"),
+      ]);
+    }
+    catch (err) {
+      expect(err.message).toContain('<mg-popover> Slotted title must be a heading: ');
+    }
+  });
+  test('should update popper instance when slot %s update', async () => {
+    const page = await getPage({ identifier: 'identifier', display: true }, [
+      h("h2", { slot: "title" }, "Blu bli blo bla"),
+      h("p", { slot: "content" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),
+      h("mg-button", { identifier: "identifier-btn" }, "mg-button"),
+    ]);
+    expect(page.root).toMatchSnapshot();
+    const spy = jest.spyOn(page.rootInstance.popper, 'update');
+    fireRo([]);
+    expect(spy).toHaveBeenCalled();
+    expect(page.root).toMatchSnapshot();
+  });
+});
+//# sourceMappingURL=mg-popover.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-popover.spec.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-popover/test/mg-popover.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { MgPopover } from '../mg-popover';\nimport { MgButton } from '../../../atoms/mg-button/mg-button';\nimport { mockConsoleError, mockWindowFrames, setupResizeObserverMock } from '../../../../utils/unit.test.utils';\nimport { MgPopoverContent } from '../mg-popover-content/mg-popover-content';\n\nmockConsoleError();\nmockWindowFrames();\n\nconst getPage = (args, slot, parent?: boolean) => {\n  const popover = () => <mg-popover {...args}>{slot}</mg-popover>;\n  return newSpecPage({\n    components: [MgPopover, MgPopoverContent, MgButton],\n    template: () => (parent ? <span data-mg-popover-guard={args.identifier}>{popover()}</span> : popover()),\n  });\n};\n\ndescribe('mg-popover', () => {\n  let fireRo;\n  beforeEach(() => {\n    jest.useFakeTimers();\n    setupResizeObserverMock({\n      observe: function () {\n        fireRo = this.cb;\n      },\n      disconnect: function () {\n        return null;\n      },\n    });\n  });\n  afterEach(() => jest.clearAllTimers());\n\n  test.each([\n    { identifier: 'identifier' },\n    { identifier: 'identifier', placement: 'auto' },\n    { identifier: 'identifier', display: true },\n    { identifier: 'identifier', closeButton: true },\n    { identifier: 'identifier', display: true },\n    { identifier: 'identifier', closeButton: true, lang: 'fr' },\n    { identifier: 'identifier', closeButton: true, lang: 'xx' },\n    { identifier: 'identifier', arrowHide: true },\n  ])('Should render with element', async args => {\n    const { root } = await getPage(args, [\n      <h2 slot=\"title\">Blu bli blo bla</h2>,\n      <p slot=\"content\">\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud\n        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.\n        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n      </p>,\n      <mg-button identifier=\"identifier-btn\">mg-button</mg-button>,\n    ]);\n    expect(root).toMatchSnapshot();\n  });\n\n  test.each([\n    { eventIn: 'click', eventOut: 'clickBtn' },\n    { eventIn: 'click', eventOut: { code: 'Escape' } },\n    { eventIn: 'click', eventOut: 'clickCross' },\n    { eventIn: 'click', eventOut: 'clickDocument' },\n    { eventIn: 'click', eventOut: 'clickPopover' },\n    { eventIn: 'click', eventOut: 'clickGuard' },\n  ])('Should manage display on events %s', async ({ eventIn, eventOut }) => {\n    const args = { identifier: 'identifier', closeButton: true };\n    const page = await getPage(\n      args,\n      [\n        <h2 slot=\"title\">Blu bli blo bla</h2>,\n        <p slot=\"content\">\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud\n          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\n          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n        </p>,\n        <mg-button identifier=\"identifier-btn\">mg-button</mg-button>,\n      ],\n      eventOut === 'clickGuard',\n    );\n\n    const mgPopover = page.doc.querySelector('mg-popover');\n    const interactiveElement = mgPopover.querySelector(`[aria-controls*='${args.identifier}']`) as HTMLElement;\n    const popover = mgPopover.querySelector(`#${args.identifier}`);\n    const popoverButton = popover.shadowRoot.querySelector(`mg-button`);\n    const dataGuard = page.doc.querySelector('[data-mg-popover-guard]');\n\n    const focusSpy = jest.spyOn(interactiveElement, 'focus');\n    const displayChangeSpy = jest.spyOn(page.rootInstance.displayChange, 'emit');\n\n    interactiveElement.dispatchEvent(new CustomEvent(eventIn, { bubbles: true }));\n    await page.waitForChanges();\n    jest.runAllTimers();\n\n    expect(popover).toHaveAttribute('data-show');\n\n    if (typeof eventOut === 'string') {\n      if (eventOut === 'clickBtn') {\n        interactiveElement.dispatchEvent(new Event('click', { bubbles: true }));\n      } else if (eventOut === 'clickCross') {\n        popoverButton.dispatchEvent(new Event('click', { bubbles: true }));\n      } else if (eventOut === 'clickDocument') {\n        document.dispatchEvent(new Event('click', { bubbles: true }));\n      } else if (eventOut === 'clickPopover') {\n        popover.dispatchEvent(new Event('click', { bubbles: true }));\n      } else if (eventOut === 'clickGuard') {\n        dataGuard.dispatchEvent(new Event('click', { bubbles: true }));\n      }\n    } else {\n      mgPopover.dispatchEvent(new KeyboardEvent('keydown', { code: eventOut.code }));\n      expect(focusSpy).toHaveBeenCalled();\n    }\n    await page.waitForChanges();\n\n    if (typeof eventOut === 'string' && ['clickPopover', 'clickGuard'].includes(eventOut)) {\n      expect(popover).toHaveAttribute('data-show');\n      expect(displayChangeSpy).toHaveBeenCalledWith(true);\n    } else {\n      expect(popover).not.toHaveAttribute('data-show');\n      expect(displayChangeSpy).toHaveBeenCalledWith(false);\n    }\n  });\n\n  test('Should throw error if slot title element is not a heading', async () => {\n    expect.assertions(1);\n    try {\n      const args = { identifier: 'identifier', closeButton: true };\n      await getPage(args, [\n        <span slot=\"title\">Blu bli blo bla</span>,\n        <p slot=\"content\">\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\n          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\n          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n        </p>,\n        <mg-button identifier=\"identifier-btn\">mg-button</mg-button>,\n      ]);\n    } catch (err) {\n      expect(err.message).toContain('<mg-popover> Slotted title must be a heading: ');\n    }\n  });\n\n  test('should update popper instance when slot %s update', async () => {\n    const page = await getPage({ identifier: 'identifier', display: true }, [\n      <h2 slot=\"title\">Blu bli blo bla</h2>,\n      <p slot=\"content\">\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud\n        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.\n        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n      </p>,\n      <mg-button identifier=\"identifier-btn\">mg-button</mg-button>,\n    ]);\n    expect(page.root).toMatchSnapshot();\n\n    const spy = jest.spyOn(page.rootInstance.popper, 'update');\n\n    fireRo([]);\n\n    expect(spy).toHaveBeenCalled();\n    expect(page.root).toMatchSnapshot();\n  });\n});\n"]}

package/dist/collection/components/molecules/mg-skip-links/mg-skip-links.conf.js

@@ -1 +1,2 @@
 export {};
+//# sourceMappingURL=mg-skip-links.conf.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-skip-links.conf.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-skip-links/mg-skip-links.conf.tsx"],"names":[],"mappings":"","sourcesContent":["/**\n * type SkipLink\n */\nexport type SkipLink = {\n  href: string;\n  label: string;\n};\n"]}

package/dist/collection/components/molecules/mg-skip-links/mg-skip-links.js

@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/no-redundant-roles */
-import { h } from '@stencil/core';
-import { initLocales } from '../../../locales';
+import { h } from "@stencil/core";
+import { initLocales } from "../../../locales";
 export class MgSkipLinks {
   constructor() {
     /***********
@@ -63,7 +63,8 @@ export class MgSkipLinks {
           "references": {
             "SkipLink": {
               "location": "import",
-              "path": "./mg-skip-links.conf"
+              "path": "./mg-skip-links.conf",
+              "id": "src/components/molecules/mg-skip-links/mg-skip-links.conf.tsx::SkipLink"
             }
           }
         },
@@ -102,3 +103,4 @@ export class MgSkipLinks {
       }];
   }
 }
+//# sourceMappingURL=mg-skip-links.js.map

package/dist/collection/components/molecules/mg-skip-links/mg-skip-links.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mg-skip-links.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-skip-links/mg-skip-links.tsx"],"names":[],"mappings":"AAAA,gDAAgD;AAChD,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAExF,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAO/C,MAAM,OAAO,WAAW;;IAoCtB;;gBAEY;IAEZ;;;OAGG;IACK,oBAAe,GAAG,CAAC,KAAkD,EAAQ,EAAE;MACrF,KAAK,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;MAC3B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC;IACjE,CAAC,CAAC;;;EA1BF,aAAa,CAAC,KAAiB;IAC7B,IACE,KAAK,KAAK,SAAS;MACnB,KAAK,CAAC,MAAM,KAAK,CAAC;MAClB,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,EACjI;MACA,MAAM,IAAI,KAAK,CAAC,yIAAyI,CAAC,CAAC;KAC5J;EACH,CAAC;EAoBD;;iBAEe;EAEf;;KAEG;EACH,iBAAiB;IACf,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/B,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;EACrD,CAAC;EAED;;;KAGG;EACH,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,YAAY,gBAAa,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,QAAQ;MACvF,UAAI,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,MAAM,IACxC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACtB,UAAI,GAAG,EAAE,IAAI,CAAC,IAAI;QAChB,SAAG,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,eAAe,IAC1E,IAAI,CAAC,KAAK,CACT,CACD,CACN,CAAC,CACC,CACD,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/* eslint-disable jsx-a11y/no-redundant-roles */\nimport { Component, Element, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { SkipLink } from './mg-skip-links.conf';\nimport { initLocales } from '../../../locales';\n\n@Component({\n  tag: 'mg-skip-links',\n  styleUrl: 'mg-skip-links.scss',\n  shadow: true,\n})\nexport class MgSkipLinks {\n  /************\n   * Internal *\n   ************/\n\n  private messages;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgSkipLinksElement;\n\n  /**\n   * Skip links\n   */\n  @Prop() links: SkipLink[];\n  @Watch('links')\n  validateLinks(links: SkipLink[]): void {\n    if (\n      links === undefined ||\n      links.length === 0 ||\n      links.some(link => link.href === undefined || !link.href.startsWith('#') || link.label === undefined || link.label.trim() === '')\n    ) {\n      throw new Error(`<mg-skip-links> prop \"links\": Cannot be empty and each link must contains an href starting with a \"#\" and a non empty label attributes.`);\n    }\n  }\n\n  /**\n   * Emited event when link is clicked\n   */\n  @Event({ eventName: 'go-to-anchor' }) goToAnchor: EventEmitter<string>;\n\n  /***********\n   * Methods *\n   **********/\n\n  /**\n   * Handle link click and emit go-to-anchor event\n   * @param event - mouse event\n   */\n  private handleLinkCLick = (event: MouseEvent & { currentTarget: HTMLElement }): void => {\n    event.currentTarget.blur();\n    this.goToAnchor.emit(event.currentTarget.getAttribute('href'));\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if props are well configured on init\n   */\n  componentWillLoad(): void {\n    this.validateLinks(this.links);\n    this.messages = initLocales(this.element).messages;\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <nav class=\"mg-skip-links\" role=\"navigation\" aria-label={this.messages.skipLinks.navLabel}>\n        <ul class=\"mg-skip-links__list\" role=\"list\">\n          {this.links.map(link => (\n            <li key={link.href}>\n              <a class=\"mg-skip-links__link\" href={link.href} onClick={this.handleLinkCLick}>\n                {link.label}\n              </a>\n            </li>\n          ))}\n        </ul>\n      </nav>\n    );\n  }\n}\n"]}