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

@mgdis/mg-components 5.17.0 → 5.18.0

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

Files changed (111) hide show

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

@@ -52,21 +52,27 @@ export class MgPopover {
      * 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);
+      const mgPopoverContent = this.element.querySelector('mg-popover-content');
+      if (mgPopoverContent === null) {
+        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.element.appendChild(this.mgPopoverContent);
+      }
+      else {
+        mgPopoverContent.setAttribute('id', this.identifier);
+      }
     };
     this.identifier = createID('mg-popover');
     this.placement = 'bottom';
@@ -75,6 +81,10 @@ export class MgPopover {
     this.display = false;
     this.disabled = false;
   }
+  validateIdentifier() {
+    // use renderPopoverContent to update popover-content id
+    this.renderPopoverContent();
+  }
   validateArrowHide(newValue) {
     if (newValue)
       this.mgPopoverContent.dataset.arrowHide = '';
@@ -111,6 +121,7 @@ export class MgPopover {
     // render mg-popover-content slot
     this.renderPopoverContent();
     this.validateCloseButton(this.closeButton);
+    this.validateIdentifier();
     this.validateArrowHide(this.arrowHide);
   }
   /**
@@ -135,6 +146,12 @@ export class MgPopover {
             offset: [0, 0],
           },
         },
+        {
+          name: 'flip',
+          options: {
+            fallbackPlacements: ['auto'],
+          },
+        },
       ],
     });
     // add resize observer
@@ -313,6 +330,9 @@ export class MgPopover {
   static get elementRef() { return "element"; }
   static get watchers() {
     return [{
+        "propName": "identifier",
+        "methodName": "validateIdentifier"
+      }, {
         "propName": "arrowHide",
         "methodName": "validateArrowHide"
       }, {

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

	@@ -1 +1 @@
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"]}
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 @Watch('identifier')\n validateIdentifier(): void {\n // use renderPopoverContent to update popover-content id\n this.renderPopoverContent();\n }\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 const mgPopoverContent = this.element.querySelector('mg-popover-content');\n if (mgPopoverContent === null) {\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 } else {\n mgPopoverContent.setAttribute('id', this.identifier);\n }\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.validateIdentifier();\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 name: 'flip',\n options: {\n fallbackPlacements: ['auto'],\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 CHANGED Viewed

@@ -41,7 +41,7 @@ describe('mg-popover', () => {
       await page.waitForChanges();
       await page.waitForNetworkIdle();
       expect(popover).toHaveAttribute('data-show');
-      await page.setViewport({ width: 800, height: 800 });
+      await page.setViewport({ width: 1200, height: 1200 });
       const screenshot = await page.screenshot();
       expect(screenshot).toMatchImageSnapshot();
       // hide popover on click on slotted element
@@ -95,7 +95,7 @@ describe('mg-popover', () => {
         <${tagName} slot="${slot}">
           Lorem ipsum
         </${tagName}>
-        </mg-popover>`, { width: 400, height: 100 });
+        </mg-popover>`, { width: 400, height: 130 });
       let screenshot = await page.screenshot();
       expect(screenshot).toMatchImageSnapshot();
       await page.$eval(`mg-popover-content [slot="${slot}"]`, el => {
@@ -106,6 +106,17 @@ describe('mg-popover', () => {
       expect(screenshot).toMatchImageSnapshot();
     });
   });
+  test(`should position popover where it have enough place`, async () => {
+    const page = await createPage(`<style>mg-button{position:fixed;left:0;bottom:0}</style>
+      <mg-popover ${renderAttributes({ display: true })}>
+      <mg-button>Button</mg-button>
+      <p slot="content">
+        Lorem ipsum
+      </p>
+      </mg-popover>`, { width: 400, height: 100 });
+    const 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">

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

	@@ -1 +1 @@
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"]}
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: 1200, height: 1200 });\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: 130 },\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 test(`should position popover where it have enough place`, async () => {\n const page = await createPage(\n `<style>mg-button{position:fixed;left:0;bottom:0}</style>\n <mg-popover ${renderAttributes({ display: true })}>\n <mg-button>Button</mg-button>\n <p slot=\"content\">\n Lorem ipsum\n </p>\n </mg-popover>`,\n { width: 400, height: 100 },\n );\n\n const screenshot = await page.screenshot();\n expect(screenshot).toMatchImageSnapshot();\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 CHANGED Viewed

@@ -126,5 +126,17 @@ describe('mg-popover', () => {
     expect(spy).toHaveBeenCalled();
     expect(page.root).toMatchSnapshot();
   });
+  test('should update mg-popover-content id when identifier is updated', async () => {
+    const page = await getPage({ identifier: 'identifier' }, [
+      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();
+    fireRo([]);
+    page.doc.querySelector('mg-popover').identifier = 'new-identifier';
+    await page.waitForChanges();
+    expect(page.root).toMatchSnapshot();
+  });
 });
 //# sourceMappingURL=mg-popover.spec.js.map

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

	@@ -1 +1 @@
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"]}
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 test('should update mg-popover-content id when identifier is updated', async () => {\n const page = await getPage({ identifier: 'identifier' }, [\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 fireRo([]);\n page.doc.querySelector('mg-popover').identifier = 'new-identifier';\n\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot();\n });\n});\n"]}

package/dist/collection/utils/components.utils.js CHANGED Viewed

@@ -126,4 +126,10 @@ const getChildWindows = (localWindow, windows = []) => {
   }
   return windows;
 };
+/**
+ * Validate string
+ * @param value - value to check
+ * @returns if string is valid
+ */
+export const isValidString = (value) => typeof value === 'string' && value.trim() !== '';
 //# sourceMappingURL=components.utils.js.map

package/dist/collection/utils/components.utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"components.utils.js","sourceRoot":"","sources":["../../src/utils/components.utils.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n Create random ID\n * @param prefix - add prefix to created ID\n * @param length - ID length\n * @returns ID\n /\nexport const createID = (prefix = '', length = 10): string => {\n const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';\n const charsLength = chars.length;\n\n let ID = '';\n let now = Date.now();\n while (length > 0) {\n now += Math.pow(10, 6); // Add 1 millisecond to the timestamp\n const index = now % charsLength;\n ID += chars.charAt(index);\n length--;\n }\n return (prefix !== '' ? `${prefix}-` : '') + ID;\n};\n\n/\n Class to manage component classlist\n * Set() are not working when imported in project\n /\nexport class ClassList {\n /\n Available classes\n /\n classes: string[];\n\n constructor(classlist: string[] = []) {\n this.classes = classlist;\n }\n\n /\n Add class\n * @param className - class name to add\n /\n add = (className: string): void => {\n if (!this.has(className)) {\n this.classes.push(className);\n }\n };\n\n /\n Delete class\n * @param className - class name to delete\n /\n delete = (className: string): void => {\n const index = this.classes.indexOf(className);\n if (index > -1) {\n this.classes.splice(index, 1);\n }\n };\n\n /\n Check if class exist in list\n * @param className - class name to check\n * @returns class name is in the list\n /\n has = (className: string): boolean => {\n return this.classes.includes(className);\n };\n\n /\n Join classes seperated by spaces\n * @returns joined values\n /\n join = (): string => {\n return this.classes.join(' ');\n };\n}\n\n/\n Check if all items are string\n * @param items - items to check\n * @returns all items are string\n /\nexport const allItemsAreString = (items: unknown): items is string[] => Array.isArray(items) && items.every(item => typeof item === 'string');\n\n/\n Check if element is a heading\n * @param element - slotted element\n * @param tagNames - allowed tag names list\n * @returns element is a heading\n /\nexport const isTagName = (element: Element, tagNames: string[]): boolean => {\n return tagNames.includes(element?.tagName.toLowerCase());\n};\n\n/\n Focusable elements query selector\n /\nexport const focusableElements = 'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex=\"-1\"]), [identifier]';\n\n/\n Get windows\n * @param localWindow - the window we are lookink for other windows\n * @returns The list of windows found\n /\nexport const getWindows = (localWindow: Window): Window[] => {\n const parentWindows = getParentWindows(localWindow);\n const childWindows = getChildWindows(localWindow);\n return [localWindow, ...parentWindows, ...childWindows];\n};\n\n/\n Get parent windows\n * @param localWindow - the window we are lookink for parents\n * @param windows - The list of allready found windows\n * @returns The list of windows found\n /\nexport const getParentWindows = (localWindow: Window, windows: Window[] = []): Window[] => {\n // Check if is in iframe\n if (localWindow.self !== localWindow.top) {\n // Check if we have permission to access parent\n try {\n const parentWindow: Window = localWindow.parent;\n windows.push(parentWindow);\n return getParentWindows(parentWindow, windows);\n } catch (err) {\n console.error('Different hosts between iframes:', err);\n return windows;\n }\n }\n return windows;\n};\n\n/\n Get child windows\n * @param localWindow - the window we are lookink for children\n * @param windows - The list of allready found windows\n * @returns The list of windows found\n */\nconst getChildWindows = (localWindow: Window, windows: Window[] = []): Window[] => {\n if (localWindow.frames.length > 0) {\n for (const childWindow of Array.from(localWindow.frames)) {\n windows.push(childWindow);\n getChildWindows(childWindow, windows);\n }\n }\n return windows;\n};\n"]}
1	+ {"version":3,"file":"components.utils.js","sourceRoot":"","sources":["../../src/utils/components.utils.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n Create random ID\n * @param prefix - add prefix to created ID\n * @param length - ID length\n * @returns ID\n /\nexport const createID = (prefix = '', length = 10): string => {\n const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';\n const charsLength = chars.length;\n\n let ID = '';\n let now = Date.now();\n while (length > 0) {\n now += Math.pow(10, 6); // Add 1 millisecond to the timestamp\n const index = now % charsLength;\n ID += chars.charAt(index);\n length--;\n }\n return (prefix !== '' ? `${prefix}-` : '') + ID;\n};\n\n/\n Class to manage component classlist\n * Set() are not working when imported in project\n /\nexport class ClassList {\n /\n Available classes\n /\n classes: string[];\n\n constructor(classlist: string[] = []) {\n this.classes = classlist;\n }\n\n /\n Add class\n * @param className - class name to add\n /\n add = (className: string): void => {\n if (!this.has(className)) {\n this.classes.push(className);\n }\n };\n\n /\n Delete class\n * @param className - class name to delete\n /\n delete = (className: string): void => {\n const index = this.classes.indexOf(className);\n if (index > -1) {\n this.classes.splice(index, 1);\n }\n };\n\n /\n Check if class exist in list\n * @param className - class name to check\n * @returns class name is in the list\n /\n has = (className: string): boolean => {\n return this.classes.includes(className);\n };\n\n /\n Join classes seperated by spaces\n * @returns joined values\n /\n join = (): string => {\n return this.classes.join(' ');\n };\n}\n\n/\n Check if all items are string\n * @param items - items to check\n * @returns all items are string\n /\nexport const allItemsAreString = (items: unknown): items is string[] => Array.isArray(items) && items.every(item => typeof item === 'string');\n\n/\n Check if element is a heading\n * @param element - slotted element\n * @param tagNames - allowed tag names list\n * @returns element is a heading\n /\nexport const isTagName = (element: Element, tagNames: string[]): boolean => {\n return tagNames.includes(element?.tagName.toLowerCase());\n};\n\n/\n Focusable elements query selector\n /\nexport const focusableElements = 'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex=\"-1\"]), [identifier]';\n\n/\n Get windows\n * @param localWindow - the window we are lookink for other windows\n * @returns The list of windows found\n /\nexport const getWindows = (localWindow: Window): Window[] => {\n const parentWindows = getParentWindows(localWindow);\n const childWindows = getChildWindows(localWindow);\n return [localWindow, ...parentWindows, ...childWindows];\n};\n\n/\n Get parent windows\n * @param localWindow - the window we are lookink for parents\n * @param windows - The list of allready found windows\n * @returns The list of windows found\n /\nexport const getParentWindows = (localWindow: Window, windows: Window[] = []): Window[] => {\n // Check if is in iframe\n if (localWindow.self !== localWindow.top) {\n // Check if we have permission to access parent\n try {\n const parentWindow: Window = localWindow.parent;\n windows.push(parentWindow);\n return getParentWindows(parentWindow, windows);\n } catch (err) {\n console.error('Different hosts between iframes:', err);\n return windows;\n }\n }\n return windows;\n};\n\n/\n Get child windows\n * @param localWindow - the window we are lookink for children\n * @param windows - The list of allready found windows\n * @returns The list of windows found\n /\nconst getChildWindows = (localWindow: Window, windows: Window[] = []): Window[] => {\n if (localWindow.frames.length > 0) {\n for (const childWindow of Array.from(localWindow.frames)) {\n windows.push(childWindow);\n getChildWindows(childWindow, windows);\n }\n }\n return windows;\n};\n\n/\n Validate string\n * @param value - value to check\n * @returns if string is valid\n */\nexport const isValidString = (value: unknown): boolean => typeof value === 'string' && value.trim() !== '';\n"]}

package/dist/collection/utils/components.utils.spec.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { createID, ClassList, allItemsAreString, isTagName, getWindows } from "./components.utils";
+import { createID, ClassList, allItemsAreString, isTagName, getWindows, isValidString } from "./components.utils";
 import { mockConsoleError } from "./unit.test.utils";
 mockConsoleError();
 describe('components.utils', () => {
@@ -116,5 +116,13 @@ describe('components.utils', () => {
       expect(spyWindowParent).toBeCalledTimes(1);
     });
   });
+  describe('isValidString', () => {
+    test.each(['', ' ', null, undefined, 1, {}, []])('Should return "false" for invalid values', value => {
+      expect(isValidString(value)).toEqual(false);
+    });
+    test.each(['batman', 'batman '])('Should return "true" for valid value', value => {
+      expect(isValidString(value)).toEqual(true);
+    });
+  });
 });
 //# sourceMappingURL=components.utils.spec.js.map

package/dist/collection/utils/components.utils.spec.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"components.utils.spec.js","sourceRoot":"","sources":["../../src/utils/components.utils.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { createID, ClassList, allItemsAreString, isTagName, getWindows } from './components.utils';\nimport { mockConsoleError } from './unit.test.utils';\n\nmockConsoleError();\n\ndescribe('components.utils', () => {\n describe('createID', () => {\n test.each([undefined, '', 'blu'])('Should generate a prefixed ID if defined : %s', prefix => {\n const id = createID(prefix);\n let regexp = /^[a-z0-9]{10}$/;\n if (prefix !== undefined && prefix !== '') {\n regexp = new RegExp(`^${prefix}-[a-z0-9]{10}$`);\n }\n expect(id).toMatch(regexp);\n });\n });\n\n describe('ClassList', () => {\n test('Should add classes to list', () => {\n const classCollection = new ClassList();\n expect(classCollection.classes).toEqual([]);\n classCollection.add('blu');\n expect(classCollection.classes).toEqual(['blu']);\n classCollection.add('bli');\n expect(classCollection.classes).toEqual(['blu', 'bli']);\n // Should not add classes if already in list\n classCollection.add('blu');\n expect(classCollection.classes).toEqual(['blu', 'bli']);\n });\n\n test('Should delete classes from list', () => {\n const classCollection = new ClassList(['blu', 'bli']);\n classCollection.delete('blu');\n expect(classCollection.classes).toEqual(['bli']);\n // List doesn't change if class name doesn't existe in list\n classCollection.delete('bla');\n expect(classCollection.classes).toEqual(['bli']);\n });\n\n test('Should check if class already in list', () => {\n const classCollection = new ClassList(['blu']);\n expect(classCollection.has('blu')).toEqual(true);\n expect(classCollection.has('bli')).toEqual(false);\n });\n\n test('Should return seperated space classes list', () => {\n const classCollection = new ClassList(['blu', 'bli']);\n expect(classCollection.join()).toEqual('blu bli');\n });\n });\n\n describe('allItemsAreString', () => {\n test.each([\n { items: ['blu', 'bli', 'blo', 'bla'], expected: true },\n { items: ['blu', 'bli', 'blo', { value: 'bla' }], expected: false },\n ])('Should test if all otems are string: %s', ({ items, expected }) => {\n expect(allItemsAreString(items as string[])).toEqual(expected);\n });\n });\n\n describe('isTagName', () => {\n test.each([\n { querySelector: 'h1', expected: true },\n { querySelector: 'span', expected: false },\n { querySelector: 'blu', expected: false },\n ])('Should test if all otems are string: %s', ({ querySelector, expected }) => {\n const div = document.createElement('div');\n div.innerHTML = '<h1></h1><span></span>';\n const elm = div.querySelector(querySelector);\n expect(isTagName(elm as HTMLElement, ['h1'])).toEqual(expected);\n });\n });\n\n describe('getWindows', () => {\n const mockWindowFramesLength = jest.fn();\n const mockWindowIndexZero = jest.fn();\n Object.defineProperty(window, 'frames', {\n value: {\n get length() {\n return mockWindowFramesLength();\n },\n get 0() {\n return mockWindowIndexZero();\n },\n },\n });\n\n afterEach(() => {\n jest.clearAllMocks();\n });\n\n test('Should return the window in an array', () => {\n mockWindowFramesLength.mockReturnValue(0);\n const localWindow: Window = window;\n const windows: Window[] = getWindows(localWindow);\n expect(windows).toHaveLength(1);\n expect(windows[0]).toEqual(localWindow);\n });\n\n test('Should return the window with a parent', () => {\n mockWindowFramesLength.mockReturnValue(0);\n const spyWindowSelf = jest.spyOn(window, 'self', 'get').mockImplementationOnce(jest.fn());\n const spyWindowParent = jest.spyOn(window, 'parent', 'get').mockImplementationOnce(() => window);\n\n const windows = getWindows(window);\n expect(windows).toHaveLength(2);\n expect(spyWindowSelf).toBeCalledTimes(2);\n expect(spyWindowParent).toBeCalledTimes(1);\n });\n\n test('Should return the window with a child', () => {\n mockWindowFramesLength.mockReturnValueOnce(1).mockReturnValueOnce(1).mockReturnValue(0);\n mockWindowIndexZero.mockReturnValueOnce(window);\n const windows = getWindows(window);\n expect(windows).toHaveLength(2);\n });\n\n test('Should throw an error when cannot access top parent window', () => {\n mockWindowFramesLength.mockReturnValue(0);\n const spyConsole = jest.spyOn(console, 'error');\n const spyWindowSelf = jest.spyOn(window, 'self', 'get').mockImplementationOnce(jest.fn());\n const spyWindowParent = jest.spyOn(window, 'parent', 'get').mockImplementationOnce(() => {\n throw new Error('non');\n });\n const localWindow: Window = window;\n const windows: Window[] = getWindows(localWindow);\n expect(windows).toHaveLength(1);\n expect(windows[0]).toEqual(localWindow);\n expect(spyConsole).toBeCalledTimes(1);\n expect(spyWindowSelf).toBeCalledTimes(1);\n expect(spyWindowParent).toBeCalledTimes(1);\n });\n });\n});\n"]}
1	+ {"version":3,"file":"components.utils.spec.js","sourceRoot":"","sources":["../../src/utils/components.utils.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { createID, ClassList, allItemsAreString, isTagName, getWindows, isValidString } from './components.utils';\nimport { mockConsoleError } from './unit.test.utils';\n\nmockConsoleError();\n\ndescribe('components.utils', () => {\n describe('createID', () => {\n test.each([undefined, '', 'blu'])('Should generate a prefixed ID if defined : %s', prefix => {\n const id = createID(prefix);\n let regexp = /^[a-z0-9]{10}$/;\n if (prefix !== undefined && prefix !== '') {\n regexp = new RegExp(`^${prefix}-[a-z0-9]{10}$`);\n }\n expect(id).toMatch(regexp);\n });\n });\n\n describe('ClassList', () => {\n test('Should add classes to list', () => {\n const classCollection = new ClassList();\n expect(classCollection.classes).toEqual([]);\n classCollection.add('blu');\n expect(classCollection.classes).toEqual(['blu']);\n classCollection.add('bli');\n expect(classCollection.classes).toEqual(['blu', 'bli']);\n // Should not add classes if already in list\n classCollection.add('blu');\n expect(classCollection.classes).toEqual(['blu', 'bli']);\n });\n\n test('Should delete classes from list', () => {\n const classCollection = new ClassList(['blu', 'bli']);\n classCollection.delete('blu');\n expect(classCollection.classes).toEqual(['bli']);\n // List doesn't change if class name doesn't existe in list\n classCollection.delete('bla');\n expect(classCollection.classes).toEqual(['bli']);\n });\n\n test('Should check if class already in list', () => {\n const classCollection = new ClassList(['blu']);\n expect(classCollection.has('blu')).toEqual(true);\n expect(classCollection.has('bli')).toEqual(false);\n });\n\n test('Should return seperated space classes list', () => {\n const classCollection = new ClassList(['blu', 'bli']);\n expect(classCollection.join()).toEqual('blu bli');\n });\n });\n\n describe('allItemsAreString', () => {\n test.each([\n { items: ['blu', 'bli', 'blo', 'bla'], expected: true },\n { items: ['blu', 'bli', 'blo', { value: 'bla' }], expected: false },\n ])('Should test if all otems are string: %s', ({ items, expected }) => {\n expect(allItemsAreString(items as string[])).toEqual(expected);\n });\n });\n\n describe('isTagName', () => {\n test.each([\n { querySelector: 'h1', expected: true },\n { querySelector: 'span', expected: false },\n { querySelector: 'blu', expected: false },\n ])('Should test if all otems are string: %s', ({ querySelector, expected }) => {\n const div = document.createElement('div');\n div.innerHTML = '<h1></h1><span></span>';\n const elm = div.querySelector(querySelector);\n expect(isTagName(elm as HTMLElement, ['h1'])).toEqual(expected);\n });\n });\n\n describe('getWindows', () => {\n const mockWindowFramesLength = jest.fn();\n const mockWindowIndexZero = jest.fn();\n Object.defineProperty(window, 'frames', {\n value: {\n get length() {\n return mockWindowFramesLength();\n },\n get 0() {\n return mockWindowIndexZero();\n },\n },\n });\n\n afterEach(() => {\n jest.clearAllMocks();\n });\n\n test('Should return the window in an array', () => {\n mockWindowFramesLength.mockReturnValue(0);\n const localWindow: Window = window;\n const windows: Window[] = getWindows(localWindow);\n expect(windows).toHaveLength(1);\n expect(windows[0]).toEqual(localWindow);\n });\n\n test('Should return the window with a parent', () => {\n mockWindowFramesLength.mockReturnValue(0);\n const spyWindowSelf = jest.spyOn(window, 'self', 'get').mockImplementationOnce(jest.fn());\n const spyWindowParent = jest.spyOn(window, 'parent', 'get').mockImplementationOnce(() => window);\n\n const windows = getWindows(window);\n expect(windows).toHaveLength(2);\n expect(spyWindowSelf).toBeCalledTimes(2);\n expect(spyWindowParent).toBeCalledTimes(1);\n });\n\n test('Should return the window with a child', () => {\n mockWindowFramesLength.mockReturnValueOnce(1).mockReturnValueOnce(1).mockReturnValue(0);\n mockWindowIndexZero.mockReturnValueOnce(window);\n const windows = getWindows(window);\n expect(windows).toHaveLength(2);\n });\n\n test('Should throw an error when cannot access top parent window', () => {\n mockWindowFramesLength.mockReturnValue(0);\n const spyConsole = jest.spyOn(console, 'error');\n const spyWindowSelf = jest.spyOn(window, 'self', 'get').mockImplementationOnce(jest.fn());\n const spyWindowParent = jest.spyOn(window, 'parent', 'get').mockImplementationOnce(() => {\n throw new Error('non');\n });\n const localWindow: Window = window;\n const windows: Window[] = getWindows(localWindow);\n expect(windows).toHaveLength(1);\n expect(windows[0]).toEqual(localWindow);\n expect(spyConsole).toBeCalledTimes(1);\n expect(spyWindowSelf).toBeCalledTimes(1);\n expect(spyWindowParent).toBeCalledTimes(1);\n });\n });\n\n describe('isValidString', () => {\n test.each(['', ' ', null, undefined, 1, {}, []])('Should return \"false\" for invalid values', value => {\n expect(isValidString(value)).toEqual(false);\n });\n\n test.each(['batman', 'batman '])('Should return \"true\" for valid value', value => {\n expect(isValidString(value)).toEqual(true);\n });\n });\n});\n"]}

package/dist/components/components.utils.js CHANGED Viewed

@@ -126,7 +126,13 @@ const getChildWindows = (localWindow, windows = []) => {
   }
   return windows;
 };
+/**
+ * Validate string
+ * @param value - value to check
+ * @returns if string is valid
+ */
+const isValidString = (value) => typeof value === 'string' && value.trim() !== '';
-export { ClassList as C, allItemsAreString as a, createID as c, focusableElements as f, getWindows as g, isTagName as i };
+export { ClassList as C, allItemsAreString as a, isValidString as b, createID as c, focusableElements as f, getWindows as g, isTagName as i };
 //# sourceMappingURL=components.utils.js.map

package/dist/components/components.utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"components.utils.js","mappings":"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","names":[],"sources":["src/utils/components.utils.ts"],"sourcesContent":["/*\n Create random ID\n * @param prefix - add prefix to created ID\n * @param length - ID length\n * @returns ID\n /\nexport const createID = (prefix = '', length = 10): string => {\n const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';\n const charsLength = chars.length;\n\n let ID = '';\n let now = Date.now();\n while (length > 0) {\n now += Math.pow(10, 6); // Add 1 millisecond to the timestamp\n const index = now % charsLength;\n ID += chars.charAt(index);\n length--;\n }\n return (prefix !== '' ? `${prefix}-` : '') + ID;\n};\n\n/\n Class to manage component classlist\n * Set() are not working when imported in project\n /\nexport class ClassList {\n /\n Available classes\n /\n classes: string[];\n\n constructor(classlist: string[] = []) {\n this.classes = classlist;\n }\n\n /\n Add class\n * @param className - class name to add\n /\n add = (className: string): void => {\n if (!this.has(className)) {\n this.classes.push(className);\n }\n };\n\n /\n Delete class\n * @param className - class name to delete\n /\n delete = (className: string): void => {\n const index = this.classes.indexOf(className);\n if (index > -1) {\n this.classes.splice(index, 1);\n }\n };\n\n /\n Check if class exist in list\n * @param className - class name to check\n * @returns class name is in the list\n /\n has = (className: string): boolean => {\n return this.classes.includes(className);\n };\n\n /\n Join classes seperated by spaces\n * @returns joined values\n /\n join = (): string => {\n return this.classes.join(' ');\n };\n}\n\n/\n Check if all items are string\n * @param items - items to check\n * @returns all items are string\n /\nexport const allItemsAreString = (items: unknown): items is string[] => Array.isArray(items) && items.every(item => typeof item === 'string');\n\n/\n Check if element is a heading\n * @param element - slotted element\n * @param tagNames - allowed tag names list\n * @returns element is a heading\n /\nexport const isTagName = (element: Element, tagNames: string[]): boolean => {\n return tagNames.includes(element?.tagName.toLowerCase());\n};\n\n/\n Focusable elements query selector\n /\nexport const focusableElements = 'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex=\"-1\"]), [identifier]';\n\n/\n Get windows\n * @param localWindow - the window we are lookink for other windows\n * @returns The list of windows found\n /\nexport const getWindows = (localWindow: Window): Window[] => {\n const parentWindows = getParentWindows(localWindow);\n const childWindows = getChildWindows(localWindow);\n return [localWindow, ...parentWindows, ...childWindows];\n};\n\n/\n Get parent windows\n * @param localWindow - the window we are lookink for parents\n * @param windows - The list of allready found windows\n * @returns The list of windows found\n /\nexport const getParentWindows = (localWindow: Window, windows: Window[] = []): Window[] => {\n // Check if is in iframe\n if (localWindow.self !== localWindow.top) {\n // Check if we have permission to access parent\n try {\n const parentWindow: Window = localWindow.parent;\n windows.push(parentWindow);\n return getParentWindows(parentWindow, windows);\n } catch (err) {\n console.error('Different hosts between iframes:', err);\n return windows;\n }\n }\n return windows;\n};\n\n/\n Get child windows\n * @param localWindow - the window we are lookink for children\n * @param windows - The list of allready found windows\n * @returns The list of windows found\n */\nconst getChildWindows = (localWindow: Window, windows: Window[] = []): Window[] => {\n if (localWindow.frames.length > 0) {\n for (const childWindow of Array.from(localWindow.frames)) {\n windows.push(childWindow);\n getChildWindows(childWindow, windows);\n }\n }\n return windows;\n};\n"],"version":3}
1	+ {"file":"components.utils.js","mappings":"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","names":[],"sources":["src/utils/components.utils.ts"],"sourcesContent":["/*\n Create random ID\n * @param prefix - add prefix to created ID\n * @param length - ID length\n * @returns ID\n /\nexport const createID = (prefix = '', length = 10): string => {\n const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';\n const charsLength = chars.length;\n\n let ID = '';\n let now = Date.now();\n while (length > 0) {\n now += Math.pow(10, 6); // Add 1 millisecond to the timestamp\n const index = now % charsLength;\n ID += chars.charAt(index);\n length--;\n }\n return (prefix !== '' ? `${prefix}-` : '') + ID;\n};\n\n/\n Class to manage component classlist\n * Set() are not working when imported in project\n /\nexport class ClassList {\n /\n Available classes\n /\n classes: string[];\n\n constructor(classlist: string[] = []) {\n this.classes = classlist;\n }\n\n /\n Add class\n * @param className - class name to add\n /\n add = (className: string): void => {\n if (!this.has(className)) {\n this.classes.push(className);\n }\n };\n\n /\n Delete class\n * @param className - class name to delete\n /\n delete = (className: string): void => {\n const index = this.classes.indexOf(className);\n if (index > -1) {\n this.classes.splice(index, 1);\n }\n };\n\n /\n Check if class exist in list\n * @param className - class name to check\n * @returns class name is in the list\n /\n has = (className: string): boolean => {\n return this.classes.includes(className);\n };\n\n /\n Join classes seperated by spaces\n * @returns joined values\n /\n join = (): string => {\n return this.classes.join(' ');\n };\n}\n\n/\n Check if all items are string\n * @param items - items to check\n * @returns all items are string\n /\nexport const allItemsAreString = (items: unknown): items is string[] => Array.isArray(items) && items.every(item => typeof item === 'string');\n\n/\n Check if element is a heading\n * @param element - slotted element\n * @param tagNames - allowed tag names list\n * @returns element is a heading\n /\nexport const isTagName = (element: Element, tagNames: string[]): boolean => {\n return tagNames.includes(element?.tagName.toLowerCase());\n};\n\n/\n Focusable elements query selector\n /\nexport const focusableElements = 'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex=\"-1\"]), [identifier]';\n\n/\n Get windows\n * @param localWindow - the window we are lookink for other windows\n * @returns The list of windows found\n /\nexport const getWindows = (localWindow: Window): Window[] => {\n const parentWindows = getParentWindows(localWindow);\n const childWindows = getChildWindows(localWindow);\n return [localWindow, ...parentWindows, ...childWindows];\n};\n\n/\n Get parent windows\n * @param localWindow - the window we are lookink for parents\n * @param windows - The list of allready found windows\n * @returns The list of windows found\n /\nexport const getParentWindows = (localWindow: Window, windows: Window[] = []): Window[] => {\n // Check if is in iframe\n if (localWindow.self !== localWindow.top) {\n // Check if we have permission to access parent\n try {\n const parentWindow: Window = localWindow.parent;\n windows.push(parentWindow);\n return getParentWindows(parentWindow, windows);\n } catch (err) {\n console.error('Different hosts between iframes:', err);\n return windows;\n }\n }\n return windows;\n};\n\n/\n Get child windows\n * @param localWindow - the window we are lookink for children\n * @param windows - The list of allready found windows\n * @returns The list of windows found\n /\nconst getChildWindows = (localWindow: Window, windows: Window[] = []): Window[] => {\n if (localWindow.frames.length > 0) {\n for (const childWindow of Array.from(localWindow.frames)) {\n windows.push(childWindow);\n getChildWindows(childWindow, windows);\n }\n }\n return windows;\n};\n\n/\n Validate string\n * @param value - value to check\n * @returns if string is valid\n */\nexport const isValidString = (value: unknown): boolean => typeof value === 'string' && value.trim() !== '';\n"],"version":3}

package/dist/components/mg-form.js CHANGED Viewed

@@ -100,7 +100,7 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class MgForm extends HTMLEleme
     this.setRequiredMessage();
   }
   /**
-   * Public method to display errors
+   * Display input error if it exists.
    */
   async displayError() {
     if (!this.readonly) {

package/dist/components/mg-form.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"mg-form.js","mappings":"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","names":["MgForm"],"sources":["src/components/molecules/mg-form/mg-form.scss?tag=mg-form&encapsulation=shadow","src/components/molecules/mg-form/mg-form.tsx"],"sourcesContent":["@use '../../../styles/form.scss';\n\n.mg-form,\n.mg-form-group {\n --mg-inputs-title-width: var(--mg-form-inputs-title-width, 15rem);\n --mg-inputs-margin-bottom: 1.5rem;\n --mg-inputs-title-horizontal-space: 3rem;\n --mg-inputs-shrink: 0;\n\n &.mg-form--all-required {\n --mg-input-title-display: none;\n }\n\n & > p {\n font-size: 1.2rem;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { createID, ClassList } from '../../../utils/components.utils';\nimport { initLocales } from '../../../locales';\nimport { HTMLMgInputsElement } from '../inputs/MgInput.conf';\n\n@Component({\n tag: 'mg-form',\n styleUrl: 'mg-form.scss',\n shadow: true,\n})\nexport class MgForm {\n /***********\n Internal \n *********/\n\n private mgInputs: HTMLMgInputsElement[];\n private mgButtons: HTMLMgButtonElement[];\n\n // Classes\n private readonly classAllRequired = 'mg-form--all-required';\n\n // HTML selector\n private form: HTMLFormElement;\n\n // Locales\n private messages;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgFormElement;\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-form');\n\n /\n Input name\n * If not set the value equals the identifier\n /\n @Prop() name: string = this.identifier;\n\n /\n Define if form is readonly\n /\n @Prop() readonly = false;\n\n /\n Define if form is disabled\n /\n @Prop() disabled = false;\n @Watch('readonly')\n @Watch('disabled')\n handleAttributeChange(): void {\n this.setMgInputs();\n this.setRequiredMessage();\n }\n\n /\n Define form valid state\n /\n @Prop({ mutable: true }) valid: boolean;\n\n /\n Define form invalid state\n /\n @Prop({ mutable: true }) invalid: boolean;\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-form']);\n\n /\n Required message\n /\n @State() requiredMessage: string;\n\n /\n Emitted event on form validity check\n * Tells if form is valid or not\n /\n @Event({ eventName: 'form-valid' }) formValid: EventEmitter<boolean>;\n\n /\n Emitted event on form submit\n /\n @Event({ eventName: 'form-submit' }) formSubmit: EventEmitter<boolean>;\n\n /\n Public method to display errors\n /\n @Method()\n async displayError(): Promise<void> {\n if (!this.readonly) {\n this.mgInputs.forEach(input => {\n input.displayError && input.displayError();\n });\n this.checkValidity();\n }\n }\n\n /\n Define required message based on mg-inputs required elements\n /\n private setRequiredMessage = (): void => {\n // init required message\n this.requiredMessage = null;\n this.classCollection.delete(this.classAllRequired);\n // If the form is disabled or readonly none of them are required\n // Check if all fields are not editable (readonly or disabled)\n const isEditable = input => !(input.disabled \|\| input.readonly);\n const isMgInputToggle = input => input.nodeName === 'MG-INPUT-TOGGLE';\n if (!this.disabled && !this.readonly && this.mgInputs.some(input => isEditable(input) && !isMgInputToggle(input))) {\n // Get editable inputs\n const editableInputs: HTMLMgInputsElement[] = this.mgInputs.filter(isEditable);\n // Get required inputs\n // mg-input-toggle can not be required\n const requiredInputs: HTMLMgInputsElement[] = editableInputs.filter(input => !isMgInputToggle(input) && input.required);\n // All inputs are required\n if (\n [requiredInputs.length, editableInputs.length].every(length => length === 1) \|\|\n (requiredInputs.length > 1 && requiredInputs.length === editableInputs.filter(input => !isMgInputToggle(input)).length)\n ) {\n this.requiredMessage = this.getRequiredMessageBasedOnCount(requiredInputs, 'allRequiredSingle', 'allRequired');\n this.classCollection.add(this.classAllRequired);\n }\n // Some fields are required\n else if (requiredInputs.length > 0) {\n this.requiredMessage = this.getRequiredMessageBasedOnCount(requiredInputs, 'requiredSingle', 'required');\n }\n }\n };\n\n /\n Returns a required message based on the count of required inputs.\n * @param requiredInputs - An array of required input elements.\n * @param keySingle - The key for the singular message format.\n * @param keyPlural - The key for the plural message format.\n * @returns The appropriate required message based on the count of required inputs.\n /\n private getRequiredMessageBasedOnCount = (requiredInputs: HTMLMgInputsElement[], keySingle: string, keyPlural: string) =>\n this.messages.form[requiredInputs.length === 1 ? keySingle : keyPlural];\n\n /\n Check if form is valid\n /\n private checkValidity = (): void => {\n // Update required on input event\n this.setRequiredMessage();\n\n this.valid = !this.mgInputs.some(input => input.invalid);\n this.invalid = !this.valid;\n // We need to send valid event if it is the same value\n this.formValid.emit(this.valid);\n };\n\n /\n Handle Form Submit\n * @param event - submit event\n /\n private handleFormSubmit = (event: SubmitEvent): void => {\n event.preventDefault();\n this.formSubmit.emit();\n };\n\n /\n Set mgInputs\n /\n private setMgInputs = (): void => {\n // Get slotted mgInputs\n this.mgInputs = Array.from(this.element.querySelectorAll('')).filter((node: Node) => node.nodeName.startsWith('MG-INPUT-')) as HTMLMgInputsElement[];\n // Set inputs readonly or disabled based on form configuration\n // Othewise listen to events\n this.mgInputs.forEach(input => {\n if (this.readonly) input.readonly = true;\n else if (this.disabled) input.disabled = true;\n else input.addEventListener('input-valid', this.checkValidity);\n });\n };\n\n /************\n Lifecycle \n **********/\n\n /\n * Check if component props are well configured on init\n /\n componentWillLoad(): void {\n // Get locales\n this.messages = initLocales(this.element).messages;\n\n // Get slotted mgButtons\n this.mgButtons = Array.from(this.element.querySelectorAll('mg-button'));\n\n // Set button form identifier\n this.mgButtons.forEach(mgButton => {\n mgButton.setAttribute('form', this.identifier);\n });\n\n // Set mgInputs\n this.setMgInputs();\n\n // Define required message\n this.setRequiredMessage();\n\n // Check validity when slotted mgInputs are ready\n Promise.all(\n this.mgInputs.map(async input => {\n try {\n await input.componentOnReady();\n } catch {} // prevent error with VueJS first render\n }),\n ).then(() => {\n this.checkValidity();\n });\n }\n\n /\n Add slot listeners\n /\n componentDidLoad(): void {\n this.mgButtons.forEach(mgButton => {\n // submit buttons should trigger form submition;\n if (['submit', null].includes(mgButton.getAttribute('type'))) {\n mgButton.addEventListener('click', () => {\n this.form.dispatchEvent(new SubmitEvent('submit', { bubbles: true, cancelable: true }));\n });\n }\n });\n // Update mgInputs when mgForm content change\n new MutationObserver(() => {\n this.setMgInputs();\n }).observe(this.element, { childList: true });\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <form class={this.classCollection.join()} id={this.identifier} name={this.name} ref={(el: HTMLFormElement) => (this.form = el)} onSubmit={this.handleFormSubmit}>\n {this.requiredMessage && <p innerHTML={this.requiredMessage}></p>}\n <slot></slot>\n {!this.readonly && !this.disabled && <slot name=\"actions\"></slot>}\n </form>\n );\n }\n}\n"],"version":3}
1	+ {"file":"mg-form.js","mappings":"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","names":["MgForm"],"sources":["src/components/molecules/mg-form/mg-form.scss?tag=mg-form&encapsulation=shadow","src/components/molecules/mg-form/mg-form.tsx"],"sourcesContent":["@use '../../../styles/form.scss';\n\n.mg-form,\n.mg-form-group {\n --mg-inputs-title-width: var(--mg-form-inputs-title-width, 15rem);\n --mg-inputs-margin-bottom: 1.5rem;\n --mg-inputs-title-horizontal-space: 3rem;\n --mg-inputs-shrink: 0;\n\n &.mg-form--all-required {\n --mg-input-title-display: none;\n }\n\n & > p {\n font-size: 1.2rem;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { createID, ClassList } from '../../../utils/components.utils';\nimport { initLocales } from '../../../locales';\nimport { HTMLMgInputsElement } from '../inputs/MgInput.conf';\n\n@Component({\n tag: 'mg-form',\n styleUrl: 'mg-form.scss',\n shadow: true,\n})\nexport class MgForm {\n /***********\n Internal \n *********/\n\n private mgInputs: HTMLMgInputsElement[];\n private mgButtons: HTMLMgButtonElement[];\n\n // Classes\n private readonly classAllRequired = 'mg-form--all-required';\n\n // HTML selector\n private form: HTMLFormElement;\n\n // Locales\n private messages;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgFormElement;\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-form');\n\n /\n Input name\n * If not set the value equals the identifier\n /\n @Prop() name: string = this.identifier;\n\n /\n Define if form is readonly\n /\n @Prop() readonly = false;\n\n /\n Define if form is disabled\n /\n @Prop() disabled = false;\n @Watch('readonly')\n @Watch('disabled')\n handleAttributeChange(): void {\n this.setMgInputs();\n this.setRequiredMessage();\n }\n\n /\n Define form valid state\n /\n @Prop({ mutable: true }) valid: boolean;\n\n /\n Define form invalid state\n /\n @Prop({ mutable: true }) invalid: boolean;\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-form']);\n\n /\n Required message\n /\n @State() requiredMessage: string;\n\n /\n Emitted event on form validity check\n * Tells if form is valid or not\n /\n @Event({ eventName: 'form-valid' }) formValid: EventEmitter<boolean>;\n\n /\n Emitted event on form submit\n /\n @Event({ eventName: 'form-submit' }) formSubmit: EventEmitter<boolean>;\n\n /\n Display input error if it exists.\n /\n @Method()\n async displayError(): Promise<void> {\n if (!this.readonly) {\n this.mgInputs.forEach(input => {\n input.displayError && input.displayError();\n });\n this.checkValidity();\n }\n }\n\n /\n Define required message based on mg-inputs required elements\n /\n private setRequiredMessage = (): void => {\n // init required message\n this.requiredMessage = null;\n this.classCollection.delete(this.classAllRequired);\n // If the form is disabled or readonly none of them are required\n // Check if all fields are not editable (readonly or disabled)\n const isEditable = input => !(input.disabled \|\| input.readonly);\n const isMgInputToggle = input => input.nodeName === 'MG-INPUT-TOGGLE';\n if (!this.disabled && !this.readonly && this.mgInputs.some(input => isEditable(input) && !isMgInputToggle(input))) {\n // Get editable inputs\n const editableInputs: HTMLMgInputsElement[] = this.mgInputs.filter(isEditable);\n // Get required inputs\n // mg-input-toggle can not be required\n const requiredInputs: HTMLMgInputsElement[] = editableInputs.filter(input => !isMgInputToggle(input) && input.required);\n // All inputs are required\n if (\n [requiredInputs.length, editableInputs.length].every(length => length === 1) \|\|\n (requiredInputs.length > 1 && requiredInputs.length === editableInputs.filter(input => !isMgInputToggle(input)).length)\n ) {\n this.requiredMessage = this.getRequiredMessageBasedOnCount(requiredInputs, 'allRequiredSingle', 'allRequired');\n this.classCollection.add(this.classAllRequired);\n }\n // Some fields are required\n else if (requiredInputs.length > 0) {\n this.requiredMessage = this.getRequiredMessageBasedOnCount(requiredInputs, 'requiredSingle', 'required');\n }\n }\n };\n\n /\n Returns a required message based on the count of required inputs.\n * @param requiredInputs - An array of required input elements.\n * @param keySingle - The key for the singular message format.\n * @param keyPlural - The key for the plural message format.\n * @returns The appropriate required message based on the count of required inputs.\n /\n private getRequiredMessageBasedOnCount = (requiredInputs: HTMLMgInputsElement[], keySingle: string, keyPlural: string) =>\n this.messages.form[requiredInputs.length === 1 ? keySingle : keyPlural];\n\n /\n Check if form is valid\n /\n private checkValidity = (): void => {\n // Update required on input event\n this.setRequiredMessage();\n\n this.valid = !this.mgInputs.some(input => input.invalid);\n this.invalid = !this.valid;\n // We need to send valid event if it is the same value\n this.formValid.emit(this.valid);\n };\n\n /\n Handle Form Submit\n * @param event - submit event\n /\n private handleFormSubmit = (event: SubmitEvent): void => {\n event.preventDefault();\n this.formSubmit.emit();\n };\n\n /\n Set mgInputs\n /\n private setMgInputs = (): void => {\n // Get slotted mgInputs\n this.mgInputs = Array.from(this.element.querySelectorAll('')).filter((node: Node) => node.nodeName.startsWith('MG-INPUT-')) as HTMLMgInputsElement[];\n // Set inputs readonly or disabled based on form configuration\n // Othewise listen to events\n this.mgInputs.forEach(input => {\n if (this.readonly) input.readonly = true;\n else if (this.disabled) input.disabled = true;\n else input.addEventListener('input-valid', this.checkValidity);\n });\n };\n\n /************\n Lifecycle \n **********/\n\n /\n * Check if component props are well configured on init\n /\n componentWillLoad(): void {\n // Get locales\n this.messages = initLocales(this.element).messages;\n\n // Get slotted mgButtons\n this.mgButtons = Array.from(this.element.querySelectorAll('mg-button'));\n\n // Set button form identifier\n this.mgButtons.forEach(mgButton => {\n mgButton.setAttribute('form', this.identifier);\n });\n\n // Set mgInputs\n this.setMgInputs();\n\n // Define required message\n this.setRequiredMessage();\n\n // Check validity when slotted mgInputs are ready\n Promise.all(\n this.mgInputs.map(async input => {\n try {\n await input.componentOnReady();\n } catch {} // prevent error with VueJS first render\n }),\n ).then(() => {\n this.checkValidity();\n });\n }\n\n /\n Add slot listeners\n /\n componentDidLoad(): void {\n this.mgButtons.forEach(mgButton => {\n // submit buttons should trigger form submition;\n if (['submit', null].includes(mgButton.getAttribute('type'))) {\n mgButton.addEventListener('click', () => {\n this.form.dispatchEvent(new SubmitEvent('submit', { bubbles: true, cancelable: true }));\n });\n }\n });\n // Update mgInputs when mgForm content change\n new MutationObserver(() => {\n this.setMgInputs();\n }).observe(this.element, { childList: true });\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <form class={this.classCollection.join()} id={this.identifier} name={this.name} ref={(el: HTMLFormElement) => (this.form = el)} onSubmit={this.handleFormSubmit}>\n {this.requiredMessage && <p innerHTML={this.requiredMessage}></p>}\n <slot></slot>\n {!this.readonly && !this.disabled && <slot name=\"actions\"></slot>}\n </form>\n );\n }\n}\n"],"version":3}