npm - @mgdis/mg-components - Versions diffs - 5.19.0 → 5.19.2 - Mend

@mgdis/mg-components 5.19.0 → 5.19.2

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 (157) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"mg-menu.js","sourceRoot":"","sources":["../../../../../src/components/molecules/menu/mg-menu/mg-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Element, Watch, Host } from '@stencil/core';\nimport { Direction, sizes } from './mg-menu.conf';\nimport type { MenuSizeType, ItemMoreType } from './mg-menu.conf';\n\n@Component({\n tag: 'mg-menu',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-menu.css',\n shadow: true,\n})\nexport class MgMenu {\n /***********\n Internal \n *********/\n\n private readonly name = 'mg-menu';\n private menuItems: HTMLMgMenuItemElement[] = [];\n private focusedMenuItem = 0;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgMenuElement;\n\n /\n Menu label. Include short menu description.\n * Required for accessibility\n /\n @Prop() label!: string;\n @Watch('label')\n validateLabel(newValue: MgMenu['label']): void {\n if (newValue === undefined) {\n throw new Error(`<${this.name}> prop \"label\" is required.`);\n }\n }\n\n /\n Component display direction.\n /\n @Prop({ reflect: true }) direction: Direction = Direction.HORIZONTAL;\n @Watch('direction')\n validateDirection(newValue: MgMenu['direction']): void {\n if (![Direction.VERTICAL, Direction.HORIZONTAL].includes(newValue)) {\n throw new Error(`<${this.name}> prop \"direction\" must be one of: ${Direction.HORIZONTAL}, ${Direction.VERTICAL}.`);\n }\n }\n\n /\n Customize \"mg-item-more\" element\n * Used with direction: 'vertical' to manage overflow\n /\n @Prop() itemmore: ItemMoreType;\n @Watch('itemmore')\n validateItemMore(newValue: MgMenu['itemmore']): void {\n if (newValue !== undefined && this.direction !== Direction.HORIZONTAL) {\n throw new Error(`<${this.name}> prop \"itemmore\" must be paired with direction ${Direction.HORIZONTAL}.`);\n }\n }\n\n /\n Define mg-menu size\n /\n @Prop() size: MenuSizeType = 'regular';\n @Watch('size')\n validateSize(newValue: MgMenu['size']): void {\n if (!sizes.includes(newValue)) {\n throw new Error(`<${this.name}> prop \"size\" must be one of: ${sizes.join(', ')}.`);\n }\n }\n\n /\n is this menu a child menu. Used for conditional render.\n /\n @State() isChildMenu: boolean;\n\n /***********\n Methods \n **********/\n\n /\n * Close matching menu-item\n * @param item - menu-item to close\n * @param condition - addionnal condition\n /\n private closeMenuItem = (item: HTMLMgMenuItemElement, condition: boolean): void => {\n if (!this.isChildMenu && condition) {\n item.expanded = false;\n }\n };\n\n /\n get mg-item-more element\n * @returns mg-item-more element\n /\n private getItemMore = (): HTMLMgItemMoreElement => this.element.querySelector('mg-item-more');\n\n /\n get mg-item-more child mg-menu-item element\n * @returns mg-menu-item element\n /\n private getItemMoreMenuItem = (): HTMLMgMenuItemElement => this.getItemMore()?.shadowRoot?.querySelector('mg-menu-item');\n\n /\n Set item listend\n * @param item - mg-menu-item element\n * @param index - number\n /\n private setItemListener = (item: HTMLMgMenuItemElement, index: MgMenu['focusedMenuItem']): void => {\n ['click', 'focus'].forEach(trigger => {\n (item.shadowRoot.querySelector('button') \|\| item.shadowRoot.querySelector('a')).addEventListener(trigger, () => {\n this.focusedMenuItem = index;\n // reset expanded on previous active menu item\n (Boolean(this.getItemMoreMenuItem()) ? [...this.menuItems, this.getItemMoreMenuItem()] : this.menuItems).forEach((item, index) => {\n this.closeMenuItem(item, index !== this.focusedMenuItem);\n });\n });\n });\n };\n\n /\n Store menu-items on component init and add listeners\n /\n private initMenuItemsListeners = (): void => {\n // add listeners on menu item and edit index\n this.menuItems.forEach((item, index) => {\n this.setItemListener(item, index);\n });\n };\n\n /\n Handle item-loaded event on mg-item-more element\n /\n private handleItemLoaded = (): void => {\n this.setItemListener(this.getItemMoreMenuItem(), this.menuItems.length);\n };\n\n /\n render mg-item-more\n /\n private renderMgItemMore = (): void => {\n // /!\\ externalise item tag name to get a string type and bypass type checking when value is used in next createElement\n // by doing this we prevent stencil to generate a circular dependencies graph at build time with mg-item-more component.\n const item = 'mg-item-more';\n const mgItemMore = document.createElement(item);\n Object.assign(mgItemMore, this.itemmore);\n mgItemMore.addEventListener('item-loaded', this.handleItemLoaded);\n this.element.appendChild(mgItemMore);\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Validate props\n /\n componentWillLoad(): void {\n this.validateDirection(this.direction);\n this.validateLabel(this.label);\n this.validateItemMore(this.itemmore);\n this.validateSize(this.size);\n }\n\n /\n Check if component slots configuration\n * @returns timeout\n /\n componentDidLoad(): ReturnType<typeof setTimeout> {\n // update props and states after componentDidLoad hook\n // return a promise to process action only in the FIRST render().\n // https://stenciljs.com/docs/component-lifecycle#componentwillload\n return setTimeout(() => {\n // store all menu-items\n this.menuItems = Array.from(this.element.children).filter(child => child.nodeName === 'MG-MENU-ITEM') as HTMLMgMenuItemElement[];\n this.isChildMenu = this.element.closest('mg-menu-item') !== null;\n\n // add mg-item-more to manage OverflowBehavior\n if (this.direction === Direction.HORIZONTAL && !this.isChildMenu) this.renderMgItemMore();\n\n // use mutation observer to improve reactivity\n new MutationObserver(entries => {\n const mgItemMore = this.getItemMore();\n // prevent infinit loop by exclude mg-item-more deletion entry\n if (entries.some(entry => entry.type === 'childList' && Array.from(entry.removedNodes).some(node => node.nodeName === 'MG-ITEM-MORE'))) return;\n else if (mgItemMore !== null) {\n // render a new mg-item-more\n mgItemMore.remove();\n mgItemMore.removeEventListener('item-loaded', this.handleItemLoaded);\n this.renderMgItemMore();\n }\n }).observe(this.element, { childList: true, characterData: true, subtree: true });\n }, 0);\n }\n\n /\n Add listeners to items\n /\n componentDidRender(): void {\n this.initMenuItemsListeners();\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <Host role=\"list\" aria-label={this.label}>\n <slot></slot>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"mg-menu.js","sourceRoot":"","sources":["../../../../../src/components/molecules/menu/mg-menu/mg-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Element, Watch, Host } from '@stencil/core';\nimport { Direction, sizes } from './mg-menu.conf';\nimport type { MenuSizeType, ItemMoreType } from './mg-menu.conf';\n\n@Component({\n tag: 'mg-menu',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-menu.css',\n shadow: true,\n})\nexport class MgMenu {\n /***********\n Internal \n *********/\n\n private readonly name = 'mg-menu';\n private menuItems: HTMLMgMenuItemElement[] = [];\n private focusedMenuItem = 0;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgMenuElement;\n\n /\n Menu label. Include short menu description.\n * Required for accessibility\n /\n @Prop() label!: string;\n @Watch('label')\n validateLabel(newValue: MgMenu['label']): void {\n if (newValue === undefined) {\n throw new Error(`<${this.name}> prop \"label\" is required.`);\n }\n }\n\n /\n Component display direction.\n /\n @Prop({ reflect: true }) direction: Direction = Direction.HORIZONTAL;\n @Watch('direction')\n validateDirection(newValue: MgMenu['direction']): void {\n if (![Direction.VERTICAL, Direction.HORIZONTAL].includes(newValue)) {\n throw new Error(`<${this.name}> prop \"direction\" must be one of: ${Direction.HORIZONTAL}, ${Direction.VERTICAL}.`);\n }\n }\n\n /\n Customize \"mg-item-more\" element\n * Used with direction: 'vertical' to manage overflow\n /\n @Prop() itemmore: ItemMoreType;\n @Watch('itemmore')\n validateItemMore(newValue: MgMenu['itemmore']): void {\n if (newValue !== undefined && this.direction !== Direction.HORIZONTAL) {\n throw new Error(`<${this.name}> prop \"itemmore\" must be paired with direction ${Direction.HORIZONTAL}.`);\n }\n }\n\n /\n Define mg-menu size\n /\n @Prop() size: MenuSizeType = 'regular';\n @Watch('size')\n validateSize(newValue: MgMenu['size']): void {\n if (!sizes.includes(newValue)) {\n throw new Error(`<${this.name}> prop \"size\" must be one of: ${sizes.join(', ')}.`);\n }\n }\n\n /\n is this menu a child menu. Used for conditional render.\n /\n @State() isChildMenu: boolean;\n\n /***********\n Methods \n **********/\n\n /\n * Close matching menu-item\n * @param item - menu-item to close\n * @param condition - addionnal condition\n /\n private closeMenuItem = (item: HTMLMgMenuItemElement, condition: boolean): void => {\n if (!this.isChildMenu && condition) {\n item.expanded = false;\n }\n };\n\n /\n get mg-item-more element\n * @returns mg-item-more element\n /\n private getItemMore = (): HTMLMgItemMoreElement => this.element.querySelector('mg-item-more');\n\n /\n get mg-item-more child mg-menu-item element\n * @returns mg-menu-item element\n /\n private getItemMoreMenuItem = (): HTMLMgMenuItemElement => this.getItemMore()?.shadowRoot?.querySelector('mg-menu-item');\n\n /\n Set item listend\n * @param item - mg-menu-item element\n * @param index - number\n /\n private setItemListener = (item: HTMLMgMenuItemElement, index: MgMenu['focusedMenuItem']): void => {\n ['click', 'focus'].forEach(trigger => {\n (item.shadowRoot.querySelector('button') \|\| item.shadowRoot.querySelector('a')).addEventListener(trigger, () => {\n this.focusedMenuItem = index;\n // reset expanded on previous active menu item\n (this.getItemMoreMenuItem() ? [...this.menuItems, this.getItemMoreMenuItem()] : this.menuItems).forEach((item, index) => {\n this.closeMenuItem(item, index !== this.focusedMenuItem);\n });\n });\n });\n };\n\n /\n Store menu-items on component init and add listeners\n /\n private initMenuItemsListeners = (): void => {\n // add listeners on menu item and edit index\n this.menuItems.forEach((item, index) => {\n this.setItemListener(item, index);\n });\n };\n\n /\n Handle item-loaded event on mg-item-more element\n /\n private handleItemLoaded = (): void => {\n this.setItemListener(this.getItemMoreMenuItem(), this.menuItems.length);\n };\n\n /\n render mg-item-more\n /\n private renderMgItemMore = (): void => {\n // /!\\ externalise item tag name to get a string type and bypass type checking when value is used in next createElement\n // by doing this we prevent stencil to generate a circular dependencies graph at build time with mg-item-more component.\n const item = 'mg-item-more';\n const mgItemMore = document.createElement(item);\n Object.assign(mgItemMore, this.itemmore);\n mgItemMore.addEventListener('item-loaded', this.handleItemLoaded);\n this.element.appendChild(mgItemMore);\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Validate props\n /\n componentWillLoad(): void {\n this.validateDirection(this.direction);\n this.validateLabel(this.label);\n this.validateItemMore(this.itemmore);\n this.validateSize(this.size);\n }\n\n /\n Check if component slots configuration\n * @returns timeout\n /\n componentDidLoad(): ReturnType<typeof setTimeout> {\n // update props and states after componentDidLoad hook\n // return a promise to process action only in the FIRST render().\n // https://stenciljs.com/docs/component-lifecycle#componentwillload\n return setTimeout(() => {\n // store all menu-items\n this.menuItems = Array.from(this.element.children).filter(child => child.nodeName === 'MG-MENU-ITEM') as HTMLMgMenuItemElement[];\n this.isChildMenu = this.element.closest('mg-menu-item') !== null;\n\n // add mg-item-more to manage OverflowBehavior\n if (this.direction === Direction.HORIZONTAL && !this.isChildMenu) this.renderMgItemMore();\n\n // use mutation observer to improve reactivity\n new MutationObserver(entries => {\n const mgItemMore = this.getItemMore();\n // prevent infinit loop by exclude mg-item-more deletion entry\n if (entries.some(entry => entry.type === 'childList' && Array.from(entry.removedNodes).some(node => node.nodeName === 'MG-ITEM-MORE'))) return;\n else if (mgItemMore !== null) {\n // render a new mg-item-more\n mgItemMore.remove();\n mgItemMore.removeEventListener('item-loaded', this.handleItemLoaded);\n this.renderMgItemMore();\n }\n }).observe(this.element, { childList: true, characterData: true, subtree: true });\n }, 0);\n }\n\n /\n Add listeners to items\n /\n componentDidRender(): void {\n this.initMenuItemsListeners();\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <Host role=\"list\" aria-label={this.label}>\n <slot></slot>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/molecules/menu/mg-menu/test/{mg-menu.e2e.js → mg-menu.e2e.playwright.js} RENAMED Viewed

@@ -6,8 +6,8 @@ var __asyncValues = (this && this.__asyncValues) || function (o) {
   function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
   function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
 };
-import { createPage } from "../../../../../utils/stencil.e2e.test.utils";
 import { renderAttributes } from "../../../../../utils/e2e.test.utils";
+import { setPageContent, expect, describe, describeEach, testEach, test, updateScreenshotClass } from "../../../../../utils/playwright.e2e.test.utils";
 import { Direction, sizes } from "../mg-menu.conf";
 var Position;
 (function (Position) {
@@ -20,12 +20,7 @@ var Key;
   Key["SHIFT"] = "Shift";
   Key["ENTER"] = "Enter";
 })(Key || (Key = {}));
-const expectImageSnapshot = async (page) => {
-  await page.waitForChanges();
-  await page.waitForTimeout(200);
-  const screenshot = await page.screenshot();
-  expect(screenshot).toMatchImageSnapshot();
-};
+const TIMEOUT = 1000;
 const getSubMenuSize = (size) => {
   if (size === 'large')
     return 'medium';
@@ -34,9 +29,10 @@ const getSubMenuSize = (size) => {
   else
     return 'regular';
 };
+const numberToPx = (value) => `${value}px`;
 const getFrameSize = (direction, size) => direction === Direction.VERTICAL
   ? { width: 400, height: ['medium', 'large'].includes(size) ? 400 : 250 }
-  : { width: ['medium', 'large'].includes(size) ? 1100 : 800, height: 200 };
+  : { width: ['medium', 'large'].includes(size) ? 1200 : 800, height: 200 };
 const createHTML = (args, containerSize) => `
   <header class="menu-container menu-container--${containerSize}">
     <mg-menu ${renderAttributes(Object.assign({ label: 'menu' }, args))}>
@@ -73,62 +69,40 @@ const createHTML = (args, containerSize) => `
   </style>
   `;
 describe('mg-menu', () => {
-  describe.each([Direction.HORIZONTAL, Direction.VERTICAL])('direction %s', direction => {
-    test.each(sizes)(`should renders, case direction ${direction} size %s with large screen`, async (size) => {
-      const page = await createPage(createHTML({ direction, size, badge: true }), getFrameSize(direction, size));
-      const element = await page.find('mg-menu');
-      expect(element).toHaveClass('hydrated');
-      await expectImageSnapshot(page);
+  describeEach([Direction.HORIZONTAL, Direction.VERTICAL])('direction %s', (direction) => {
+    testEach(sizes)(`should renders, case direction ${direction} size %s with large screen`, async (page, size) => {
+      await setPageContent(page, createHTML({ direction, size, badge: true }), getFrameSize(direction, size));
+      await updateScreenshotClass(page, { width: numberToPx(getFrameSize(direction, size).width) });
+      await page.locator('mg-menu.hydrated').first().waitFor({ timeout: TIMEOUT });
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
     });
   });
   describe('navigation horizontal', () => {
-    test(`should success mouse navigation, case direction ${Direction.HORIZONTAL}`, async () => {
-      var _a, e_1, _b, _c;
-      const page = await createPage(createHTML({ direction: Direction.HORIZONTAL }), getFrameSize(Direction.HORIZONTAL));
-      await expectImageSnapshot(page);
+    test(`should success mouse navigation, case direction ${Direction.HORIZONTAL}`, async ({ page }) => {
+      await setPageContent(page, createHTML({ direction: Direction.HORIZONTAL }), { width: 800, height: 80 });
+      await page.locator('mg-menu.hydrated').first().waitFor({ timeout: TIMEOUT });
       const actions = [
-        { position: 1, expanded: true },
-        { position: 5, expanded: true },
-        { position: 5, expanded: false },
-        { position: 1, expanded: true },
+        { position: 0, expanded: 'true' },
+        { position: 5, expanded: 'true' },
+        { position: 0, expanded: 'true' },
       ];
-      try {
-        for (var _d = true, actions_1 = __asyncValues(actions), actions_1_1; actions_1_1 = await actions_1.next(), _a = actions_1_1.done, !_a; _d = true) {
-          _c = actions_1_1.value;
-          _d = false;
-          const action = _c;
-          let item = await page.find(`header > mg-menu > mg-menu-item:nth-of-type(${action.position}) >>> button`);
-          await item.click();
-          await page.waitForChanges();
-          expect(item.getAttribute('aria-expanded')).toBe(`${action.expanded}`);
-          item = await page.find(`header > mg-menu > mg-menu-item:not(:nth-of-type(${action.position})) >>> button[aria-expanded="true"]`);
-          expect(item).toBe(null);
-        }
-      }
-      catch (e_1_1) {
-        e_1 = { error: e_1_1 };
-      }
-      finally {
-        try {
-          if (!_d && !_a && (_b = actions_1.return))
-            await _b.call(actions_1);
-        }
-        finally {
-          if (e_1)
-            throw e_1.error;
-        }
+      for (const { position, expanded } of actions) {
+        const item = await page.locator('mg-menu').first().locator('mg-menu-item').nth(position);
+        await item.click();
+        await page.locator('mg-popover-content[data-show]').waitFor({ timeout: TIMEOUT });
+        expect(await item.locator('button').first().getAttribute('aria-expanded')).toEqual(expanded);
       }
       // menu-item close
       await page.$eval('body', elm => {
         elm.dispatchEvent(new MouseEvent('click', { bubbles: true }));
       });
-      await page.waitForChanges();
-      await expectImageSnapshot(page);
+      await expect(page.locator('body')).toHaveScreenshot();
     });
-    test(`should success keyboard navigation, case direction ${Direction.HORIZONTAL}`, async () => {
-      var _a, e_2, _b, _c;
-      const page = await createPage(createHTML({ direction: Direction.HORIZONTAL }), getFrameSize(Direction.HORIZONTAL));
-      await expectImageSnapshot(page);
+    test(`should success keyboard navigation, case direction ${Direction.HORIZONTAL}`, async ({ page }) => {
+      var _a, e_1, _b, _c;
+      await setPageContent(page, createHTML({ direction: Direction.HORIZONTAL }), getFrameSize(Direction.HORIZONTAL));
+      await page.locator('mg-menu.hydrated').first().waitFor({ timeout: TIMEOUT });
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
       const actions = [
         { position: Position.PRESS, key: Key.TAB, openeItem: null },
         { position: Position.PRESS, key: Key.TAB, openeItem: null },
@@ -141,8 +115,8 @@ describe('mg-menu', () => {
         { position: Position.PRESS, key: Key.TAB, openeItem: null },
       ];
       try {
-        for (var _d = true, actions_2 = __asyncValues(actions), actions_2_1; actions_2_1 = await actions_2.next(), _a = actions_2_1.done, !_a; _d = true) {
-          _c = actions_2_1.value;
+        for (var _d = true, actions_1 = __asyncValues(actions), actions_1_1; actions_1_1 = await actions_1.next(), _a = actions_1_1.done, !_a; _d = true) {
+          _c = actions_1_1.value;
           _d = false;
           const action = _c;
           if (action.key === Key.SHIFT) {
@@ -153,53 +127,51 @@ describe('mg-menu', () => {
           else {
             await page.keyboard[action.position](action.key);
           }
-          await page.waitForChanges();
           let item;
           if (action.openeItem > 0) {
-            item = await page.find(`header > mg-menu > mg-menu-item:nth-of-type(${action.openeItem}) >>> button[aria-expanded="true"]`);
-            expect(item).not.toBe(null);
-            item = await page.find(`header > mg-menu > mg-menu-item:not(:nth-of-type(${action.openeItem})) >>> button[aria-expanded="true"]`);
+            item = await page.locator('mg-menu').first().locator('mg-menu-item').nth(action.openeItem).locator('button[aria-expanded="true"]');
+            expect(await item.getAttribute('aria-expanded')).toEqual('true');
           }
           else {
-            item = await page.find(`header > mg-menu > mg-menu-item >>> button[aria-expanded="true"]`);
+            item = await page.locator('mg-menu').first().locator('mg-menu-item').first().locator('button').first();
+            expect(await item.getAttribute('aria-expanded')).toEqual('false');
           }
-          expect(item).toBe(null);
         }
       }
-      catch (e_2_1) {
-        e_2 = { error: e_2_1 };
+      catch (e_1_1) {
+        e_1 = { error: e_1_1 };
       }
       finally {
         try {
-          if (!_d && !_a && (_b = actions_2.return))
-            await _b.call(actions_2);
+          if (!_d && !_a && (_b = actions_1.return))
+            await _b.call(actions_1);
         }
         finally {
-          if (e_2)
-            throw e_2.error;
+          if (e_1)
+            throw e_1.error;
         }
       }
     });
   });
   describe('navigation vertical', () => {
-    test(`should success mouse navigation, case direction ${Direction.VERTICAL}`, async () => {
-      var _a, e_3, _b, _c;
-      const page = await createPage(createHTML({ direction: Direction.VERTICAL }), getFrameSize(Direction.VERTICAL));
-      await expectImageSnapshot(page);
-      const positions = [1, 5, 5, 1];
+    test(`should success mouse navigation, case direction ${Direction.VERTICAL}`, async ({ page }) => {
+      var _a, e_2, _b, _c;
+      await setPageContent(page, createHTML({ direction: Direction.VERTICAL }), getFrameSize(Direction.VERTICAL));
+      await page.locator('mg-menu.hydrated').first().waitFor({ timeout: TIMEOUT });
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+      const positions = [0, 4, 5, 0];
       try {
         for (var _d = true, positions_1 = __asyncValues(positions), positions_1_1; positions_1_1 = await positions_1.next(), _a = positions_1_1.done, !_a; _d = true) {
           _c = positions_1_1.value;
           _d = false;
           const position = _c;
-          const item = await page.find(`header > mg-menu > mg-menu-item:nth-of-type(${position}) >>> button`);
+          const item = await page.locator('mg-menu').first().locator('mg-menu-item').nth(position);
           await item.click();
-          await page.waitForChanges();
-          await expectImageSnapshot(page);
+          await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
         }
       }
-      catch (e_3_1) {
-        e_3 = { error: e_3_1 };
+      catch (e_2_1) {
+        e_2 = { error: e_2_1 };
       }
       finally {
         try {
@@ -207,20 +179,20 @@ describe('mg-menu', () => {
             await _b.call(positions_1);
         }
         finally {
-          if (e_3)
-            throw e_3.error;
+          if (e_2)
+            throw e_2.error;
         }
       }
       await page.$eval('body', elm => {
         elm.dispatchEvent(new MouseEvent('click', { bubbles: true }));
       });
-      await page.waitForChanges();
-      await expectImageSnapshot(page);
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
     });
-    test(`should success keyboard navigation, case direction ${Direction.VERTICAL}`, async () => {
-      var _a, e_4, _b, _c;
-      const page = await createPage(createHTML({ direction: Direction.VERTICAL }), getFrameSize(Direction.VERTICAL));
-      await expectImageSnapshot(page);
+    test(`should success keyboard navigation, case direction ${Direction.VERTICAL}`, async ({ page }) => {
+      var _a, e_3, _b, _c;
+      await setPageContent(page, createHTML({ direction: Direction.VERTICAL }), getFrameSize(Direction.VERTICAL));
+      await page.locator('mg-menu.hydrated').first().waitFor({ timeout: TIMEOUT });
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
       const actions = [
         { position: Position.PRESS, key: Key.TAB },
         { position: Position.PRESS, key: Key.TAB },
@@ -233,8 +205,8 @@ describe('mg-menu', () => {
         { position: Position.PRESS, key: Key.TAB },
       ];
       try {
-        for (var _d = true, actions_3 = __asyncValues(actions), actions_3_1; actions_3_1 = await actions_3.next(), _a = actions_3_1.done, !_a; _d = true) {
-          _c = actions_3_1.value;
+        for (var _d = true, actions_2 = __asyncValues(actions), actions_2_1; actions_2_1 = await actions_2.next(), _a = actions_2_1.done, !_a; _d = true) {
+          _c = actions_2_1.value;
           _d = false;
           const action = _c;
           if (action.key === Key.SHIFT) {
@@ -245,24 +217,23 @@ describe('mg-menu', () => {
           else {
             await page.keyboard[action.position](action.key);
           }
-          await page.waitForChanges();
-          await expectImageSnapshot(page);
+          await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
         }
       }
-      catch (e_4_1) {
-        e_4 = { error: e_4_1 };
+      catch (e_3_1) {
+        e_3 = { error: e_3_1 };
       }
       finally {
         try {
-          if (!_d && !_a && (_b = actions_3.return))
-            await _b.call(actions_3);
+          if (!_d && !_a && (_b = actions_2.return))
+            await _b.call(actions_2);
         }
         finally {
-          if (e_4)
-            throw e_4.error;
+          if (e_3)
+            throw e_3.error;
         }
       }
     });
   });
 });
-//# sourceMappingURL=mg-menu.e2e.js.map
+//# sourceMappingURL=mg-menu.e2e.playwright.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"mg-menu.e2e.playwright.js","sourceRoot":"","sources":["../../../../../../src/components/molecules/menu/mg-menu/test/mg-menu.e2e.playwright.ts"],"names":[],"mappings":"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","sourcesContent":["import { renderAttributes } from '../../../../../utils/e2e.test.utils';\nimport { setPageContent, expect, describe, describeEach, testEach, test, PageType, updateScreenshotClass } from '../../../../../utils/playwright.e2e.test.utils';\nimport { Direction, MenuSizeType, sizes } from '../mg-menu.conf';\n\nenum Position {\n PRESS = 'press',\n DOWN = 'down',\n}\n\nenum Key {\n TAB = 'Tab',\n SHIFT = 'Shift',\n ENTER = 'Enter',\n}\n\nconst TIMEOUT = 1000;\n\nconst getSubMenuSize = (size: MenuSizeType): MenuSizeType => {\n if (size === 'large') return 'medium';\n else if (size === 'medium') return 'regular';\n else return 'regular';\n};\n\nconst numberToPx = (value: number): string => `${value}px`;\n\nconst getFrameSize = (direction: Direction, size?: MenuSizeType): { width: number; height: number } =>\n direction === Direction.VERTICAL\n ? { width: 400, height: ['medium', 'large'].includes(size) ? 400 : 250 }\n : { width: ['medium', 'large'].includes(size) ? 1200 : 800, height: 200 };\n\nconst createHTML = (args, containerSize?): string => `\n <header class=\"menu-container menu-container--${containerSize}\">\n <mg-menu ${renderAttributes({ label: 'menu', ...args })}>\n <mg-menu-item status=\"active\">\n <span slot=\"label\">1 - head-1</span>\n <mg-menu ${renderAttributes({ label: 'sub-menu 1', direction: Direction.VERTICAL, size: getSubMenuSize(args?.size) })}>\n <mg-menu-item><span slot=\"label\">Batman begins</span></mg-menu-item>\n </mg-menu>\n </mg-menu-item>\n <mg-menu-item status=\"disabled\"><span slot=\"label\">1 - head-2 long</span></mg-menu-item>\n <mg-menu-item href=\"#link\">\n <span slot=\"label\">1 - head-3 very long</span>\n <mg-icon icon='user' slot='image'></mg-icon>\n </mg-menu-item>\n <mg-menu-item>\n <span slot=\"label\">1 - head-4</span>\n <mg-icon icon='user' slot='image'></mg-icon>\n ${args?.badge ? \"<mg-badge value='2' label='hello' slot='information'></mg-badge>\" : ''} \n </mg-menu-item>\n <mg-menu-item>\n <span slot=\"label\">1 - head-5</span>\n <mg-icon icon='user' slot='image'></mg-icon>\n ${args?.badge ? \"<mg-badge value='2' label='hello' slot='information'></mg-badge>\" : ''} \n <mg-menu ${renderAttributes({ label: 'sub-menu 2', direction: Direction.VERTICAL, size: getSubMenuSize(args?.size) })}>\n <mg-menu-item><span slot=\"label\">Batman begins with a longer title to go outide screen</span></mg-menu-item>\n </mg-menu>\n </mg-menu-item>\n </mg-menu>\n </header>\n <style>\n .menu-container.menu-container--vertical-small {\n width: 180px;\n }\n </style>\n `;\n\ndescribe('mg-menu', () => {\n describeEach([Direction.HORIZONTAL, Direction.VERTICAL])('direction %s', (direction: Direction) => {\n testEach(sizes)(`should renders, case direction ${direction} size %s with large screen`, async (page: PageType, size: MenuSizeType) => {\n await setPageContent(page, createHTML({ direction, size, badge: true }), getFrameSize(direction, size));\n\n await updateScreenshotClass(page, { width: numberToPx(getFrameSize(direction, size).width) });\n\n await page.locator('mg-menu.hydrated').first().waitFor({ timeout: TIMEOUT });\n\n await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n });\n });\n\n describe('navigation horizontal', () => {\n test(`should success mouse navigation, case direction ${Direction.HORIZONTAL}`, async ({ page }) => {\n await setPageContent(page, createHTML({ direction: Direction.HORIZONTAL }), { width: 800, height: 80 });\n await page.locator('mg-menu.hydrated').first().waitFor({ timeout: TIMEOUT });\n const actions = [\n { position: 0, expanded: 'true' },\n { position: 5, expanded: 'true' },\n { position: 0, expanded: 'true' },\n ];\n for (const { position, expanded } of actions) {\n const item = await page.locator('mg-menu').first().locator('mg-menu-item').nth(position);\n await item.click();\n await page.locator('mg-popover-content[data-show]').waitFor({ timeout: TIMEOUT });\n expect(await item.locator('button').first().getAttribute('aria-expanded')).toEqual(expanded);\n }\n // menu-item close\n await page.$eval('body', elm => {\n elm.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n });\n await expect(page.locator('body')).toHaveScreenshot();\n });\n test(`should success keyboard navigation, case direction ${Direction.HORIZONTAL}`, async ({ page }) => {\n await setPageContent(page, createHTML({ direction: Direction.HORIZONTAL }), getFrameSize(Direction.HORIZONTAL));\n await page.locator('mg-menu.hydrated').first().waitFor({ timeout: TIMEOUT });\n await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n const actions = [\n { position: Position.PRESS, key: Key.TAB, openeItem: null },\n { position: Position.PRESS, key: Key.TAB, openeItem: null },\n { position: Position.PRESS, key: Key.TAB, openeItem: null },\n { position: Position.PRESS, key: Key.TAB, openeItem: null },\n { position: Position.PRESS, key: Key.ENTER, openeItem: 5 },\n { position: Position.PRESS, key: Key.TAB, openeItem: 5 },\n { position: Position.PRESS, key: Key.SHIFT, openeItem: 5 },\n { position: Position.PRESS, key: Key.ENTER, openeItem: null },\n { position: Position.PRESS, key: Key.TAB, openeItem: null },\n ];\n for await (const action of actions) {\n if (action.key === Key.SHIFT) {\n await page.keyboard.down(Key.SHIFT);\n await page.keyboard.press(Key.TAB);\n await page.keyboard.up(Key.SHIFT);\n } else {\n await page.keyboard[action.position](action.key);\n }\n let item;\n if (action.openeItem > 0) {\n item = await page.locator('mg-menu').first().locator('mg-menu-item').nth(action.openeItem).locator('button[aria-expanded=\"true\"]');\n expect(await item.getAttribute('aria-expanded')).toEqual('true');\n } else {\n item = await page.locator('mg-menu').first().locator('mg-menu-item').first().locator('button').first();\n expect(await item.getAttribute('aria-expanded')).toEqual('false');\n }\n }\n });\n });\n\n describe('navigation vertical', () => {\n test(`should success mouse navigation, case direction ${Direction.VERTICAL}`, async ({ page }) => {\n await setPageContent(page, createHTML({ direction: Direction.VERTICAL }), getFrameSize(Direction.VERTICAL));\n await page.locator('mg-menu.hydrated').first().waitFor({ timeout: TIMEOUT });\n\n await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n\n const positions = [0, 4, 5, 0];\n for await (const position of positions) {\n const item = await page.locator('mg-menu').first().locator('mg-menu-item').nth(position);\n await item.click();\n await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n }\n\n await page.$eval('body', elm => {\n elm.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n });\n await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n });\n\n test(`should success keyboard navigation, case direction ${Direction.VERTICAL}`, async ({ page }) => {\n await setPageContent(page, createHTML({ direction: Direction.VERTICAL }), getFrameSize(Direction.VERTICAL));\n await page.locator('mg-menu.hydrated').first().waitFor({ timeout: TIMEOUT });\n await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n\n const actions = [\n { position: Position.PRESS, key: Key.TAB },\n { position: Position.PRESS, key: Key.TAB },\n { position: Position.PRESS, key: Key.TAB },\n { position: Position.PRESS, key: Key.TAB },\n { position: Position.PRESS, key: Key.ENTER },\n { position: Position.PRESS, key: Key.TAB },\n { position: Position.PRESS, key: Key.SHIFT },\n { position: Position.PRESS, key: Key.ENTER },\n { position: Position.PRESS, key: Key.TAB },\n ];\n\n for await (const action of actions) {\n if (action.key === Key.SHIFT) {\n await page.keyboard.down(Key.SHIFT);\n await page.keyboard.press(Key.TAB);\n await page.keyboard.up(Key.SHIFT);\n } else {\n await page.keyboard[action.position](action.key);\n }\n await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n }\n });\n });\n});\n"]}

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

@@ -0,0 +1,100 @@
+var __asyncValues = (this && this.__asyncValues) || function (o) {
+  if (!Symbol.asyncIterator)
+    throw new TypeError("Symbol.asyncIterator is not defined.");
+  var m = o[Symbol.asyncIterator], i;
+  return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
+  function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
+  function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
+};
+import { renderAttributes } from "../../../../../utils/e2e.test.utils";
+import { Direction, sizes } from "../../mg-menu/mg-menu.conf";
+import { Status } from "../mg-menu-item.conf";
+import { describe, describeEach, expect, setPageContent, test, testEach } from "../../../../../utils/playwright.e2e.test.utils";
+const TIMEOUT = 1000;
+const slotContent = '<div><h3>Demo title</h3><p>some content</p></div>';
+const slotMenuItem = '<mg-menu label="submenu"><mg-menu-item><span slot="label">Batman begins</span></mg-menu-item></mg-menu>';
+const slotImage = '<mg-icon icon="user" slot="image"></mg-icon>';
+const slotInformation = '<mg-badge value="2" label="hello" slot="information"></mg-badge>';
+const slotMetadata = '<span slot="metadata">is a hero</span>';
+const createHTML = (args, slot = '', direction = Direction.HORIZONTAL) => `
+<mg-menu ${renderAttributes(Object.assign({ label: 'batmenu', direction }, args))}">
+  <mg-menu-item ${renderAttributes(args)}>
+    <span slot="label">${args.label ? args.label : 'batman'} ${args.href ? 'link' : ''}</span>
+    ${slot}
+  </mg-menu-item>
+</mg-menu>
+`;
+describe('mg-menu-item', () => {
+  describeEach([Direction.HORIZONTAL, Direction.VERTICAL])('render %s', (direction) => {
+    testEach([Status.ACTIVE, Status.VISIBLE, Status.HIDDEN, Status.DISABLED].flatMap(status => [undefined, '#link'].flatMap(href => [true, false].map(submenu => createHTML({ status, href }, submenu && slotMenuItem, direction)))))('should render whith status %s', async (page, html) => {
+      await setPageContent(page, html, { width: 100, height: 38 });
+      if (!html.includes('status="hidden"')) {
+        await page.locator('mg-menu-item.hydrated').first().waitFor({ timeout: TIMEOUT });
+        await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+      }
+      else {
+        await expect(page.locator('body')).toHaveScreenshot();
+      }
+    });
+    testEach([
+      { label: 'submenu', slot: slotMenuItem },
+      { label: 'image', slot: slotImage },
+      { label: 'information', slot: slotInformation },
+      { label: 'information AND image', slot: slotInformation + slotImage },
+    ].flatMap(({ label, slot }) => [slotMenuItem, ''].flatMap(submenu => [slotMetadata, ''].map(metadata => createHTML({ label, size: metadata !== '' ? 'medium' : 'regular' }, [slot, metadata, submenu].join(''), direction)))))('should render whith slots %s', async (page, html) => {
+      await setPageContent(page, html, { width: 130, height: 60 });
+      await page.locator('mg-menu-item.hydrated').first().waitFor({ timeout: TIMEOUT });
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+    });
+    testEach(sizes)(`should renders direction=${direction}, props size=%s`, async (page, size) => {
+      await setPageContent(page, createHTML({ size }, [slotInformation, slotImage, slotMenuItem].join(''), direction), { width: 130, height: 110 });
+      await page.locator('mg-menu-item.hydrated').first().waitFor({ timeout: TIMEOUT });
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+    });
+    testEach([true, false])(`should renders direction=${direction}, props expanded=%s`, async (page, expanded) => {
+      await setPageContent(page, createHTML({ expanded }, slotMenuItem, direction), { width: 130, height: 110 });
+      await page.locator('mg-menu-item.hydrated').first().waitFor({ timeout: TIMEOUT });
+      await expect(page.locator(expanded ? 'body' : '.e2e-screenshot')).toHaveScreenshot();
+    });
+    test('should render content slot', async ({ page }) => {
+      await setPageContent(page, createHTML({ expanded: true }, slotContent, direction), { width: 100, height: 150 });
+      await page.locator('mg-menu-item.hydrated').first().waitFor({ timeout: TIMEOUT });
+      await expect(page.locator('body')).toHaveScreenshot();
+    });
+    testEach([Status.ACTIVE, Status.VISIBLE, Status.HIDDEN, Status.DISABLED])('shoud manage keyboard navigation %s', async (page, status) => {
+      var _a, e_1, _b, _c;
+      await setPageContent(page, createHTML({ status }, slotMenuItem, direction), { width: 120, height: 200 });
+      if (status !== Status.HIDDEN) {
+        await page.locator('mg-menu-item.hydrated').first().waitFor({ timeout: TIMEOUT });
+        await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+      }
+      else {
+        await expect(page.locator('body')).toHaveScreenshot();
+      }
+      try {
+        for (var _d = true, _e = __asyncValues(['Tab', 'Enter']), _f; _f = await _e.next(), _a = _f.done, !_a; _d = true) {
+          _c = _f.value;
+          _d = false;
+          const key = _c;
+          await page.keyboard.press(key);
+          await page.waitForTimeout(200);
+          await expect(page.locator('body')).toHaveScreenshot();
+        }
+      }
+      catch (e_1_1) {
+        e_1 = { error: e_1_1 };
+      }
+      finally {
+        try {
+          if (!_d && !_a && (_b = _e.return))
+            await _b.call(_e);
+        }
+        finally {
+          if (e_1)
+            throw e_1.error;
+        }
+      }
+    });
+  });
+});
+//# sourceMappingURL=mg-menu-item.e2e.playwright.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"mg-menu-item.e2e.playwright.js","sourceRoot":"","sources":["../../../../../../src/components/molecules/menu/mg-menu-item/test/mg-menu-item.e2e.playwright.ts"],"names":[],"mappings":"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","sourcesContent":["import { renderAttributes } from '../../../../../utils/e2e.test.utils';\nimport { Direction, sizes } from '../../mg-menu/mg-menu.conf';\nimport { Status } from '../mg-menu-item.conf';\nimport { PageType, describe, describeEach, expect, setPageContent, test, testEach } from '../../../../../utils/playwright.e2e.test.utils';\n\nconst TIMEOUT = 1000;\nconst slotContent = '<div><h3>Demo title</h3><p>some content</p></div>';\nconst slotMenuItem = '<mg-menu label=\"submenu\"><mg-menu-item><span slot=\"label\">Batman begins</span></mg-menu-item></mg-menu>';\nconst slotImage = '<mg-icon icon=\"user\" slot=\"image\"></mg-icon>';\nconst slotInformation = '<mg-badge value=\"2\" label=\"hello\" slot=\"information\"></mg-badge>';\nconst slotMetadata = '<span slot=\"metadata\">is a hero</span>';\n\nconst createHTML = (args, slot = '', direction = Direction.HORIZONTAL) => `\n<mg-menu ${renderAttributes({ label: 'batmenu', direction, ...args })}\">\n <mg-menu-item ${renderAttributes(args)}>\n <span slot=\"label\">${args.label ? args.label : 'batman'} ${args.href ? 'link' : ''}</span>\n ${slot}\n </mg-menu-item>\n</mg-menu>\n`;\n\ndescribe('mg-menu-item', () => {\n describeEach([Direction.HORIZONTAL, Direction.VERTICAL])('render %s', (direction: Direction) => {\n testEach(\n [Status.ACTIVE, Status.VISIBLE, Status.HIDDEN, Status.DISABLED].flatMap(status =>\n [undefined, '#link'].flatMap(href => [true, false].map(submenu => createHTML({ status, href }, submenu && slotMenuItem, direction))),\n ),\n )('should render whith status %s', async (page: PageType, html: string) => {\n await setPageContent(page, html, { width: 100, height: 38 });\n\n if (!html.includes('status=\"hidden\"')) {\n await page.locator('mg-menu-item.hydrated').first().waitFor({ timeout: TIMEOUT });\n await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n } else {\n await expect(page.locator('body')).toHaveScreenshot();\n }\n });\n\n testEach(\n [\n { label: 'submenu', slot: slotMenuItem },\n { label: 'image', slot: slotImage },\n { label: 'information', slot: slotInformation },\n { label: 'information AND image', slot: slotInformation + slotImage },\n ].flatMap(({ label, slot }) =>\n [slotMenuItem, ''].flatMap(submenu =>\n [slotMetadata, ''].map(metadata => createHTML({ label, size: metadata !== '' ? 'medium' : 'regular' }, [slot, metadata, submenu].join(''), direction)),\n ),\n ),\n )('should render whith slots %s', async (page: PageType, html: string) => {\n await setPageContent(page, html, { width: 130, height: 60 });\n\n await page.locator('mg-menu-item.hydrated').first().waitFor({ timeout: TIMEOUT });\n\n await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n });\n\n testEach(sizes)(`should renders direction=${direction}, props size=%s`, async (page: PageType, size) => {\n await setPageContent(page, createHTML({ size }, [slotInformation, slotImage, slotMenuItem].join(''), direction), { width: 130, height: 110 });\n\n await page.locator('mg-menu-item.hydrated').first().waitFor({ timeout: TIMEOUT });\n\n await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n });\n\n testEach([true, false])(`should renders direction=${direction}, props expanded=%s`, async (page: PageType, expanded: boolean) => {\n await setPageContent(page, createHTML({ expanded }, slotMenuItem, direction), { width: 130, height: 110 });\n\n await page.locator('mg-menu-item.hydrated').first().waitFor({ timeout: TIMEOUT });\n\n await expect(page.locator(expanded ? 'body' : '.e2e-screenshot')).toHaveScreenshot();\n });\n\n test('should render content slot', async ({ page }) => {\n await setPageContent(page, createHTML({ expanded: true }, slotContent, direction), { width: 100, height: 150 });\n\n await page.locator('mg-menu-item.hydrated').first().waitFor({ timeout: TIMEOUT });\n\n await expect(page.locator('body')).toHaveScreenshot();\n });\n\n testEach([Status.ACTIVE, Status.VISIBLE, Status.HIDDEN, Status.DISABLED])('shoud manage keyboard navigation %s', async (page: PageType, status) => {\n await setPageContent(page, createHTML({ status }, slotMenuItem, direction), { width: 120, height: 200 });\n\n if (status !== Status.HIDDEN) {\n await page.locator('mg-menu-item.hydrated').first().waitFor({ timeout: TIMEOUT });\n await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n } else {\n await expect(page.locator('body')).toHaveScreenshot();\n }\n\n for await (const key of ['Tab', 'Enter']) {\n await page.keyboard.press(key);\n await page.waitForTimeout(200);\n await expect(page.locator('body')).toHaveScreenshot();\n }\n });\n });\n});\n"]}

package/dist/collection/components/molecules/mg-action-more/mg-action-more.conf.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"mg-action-more.conf.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-action-more/mg-action-more.conf.ts"],"names":[],"mappings":"","sourcesContent":["import { MgBadge } from '../../atoms/mg-badge/mg-badge';\nimport { MgButton } from '../../atoms/mg-button/mg-button';\nimport { MgIcon } from '../../atoms/mg-icon/mg-icon';\nimport { MgMenuItem } from '../menu/mg-menu-item/mg-menu-item';\n\n/*\n prop icon type\n /\nexport type MgActionMoreIconType = {\n icon: MgIcon['icon'];\n};\n\n/\n prop button type\n /\nexport type MgActionMoreButtonType = {\n isIcon: MgButton['isIcon'];\n variant: MgButton['variant'];\n label?: MgButton['label'];\n};\n\n/\n locals message type\n /\nexport type MgActionMoreMessageType = { label: string };\n\n/\n prop item type\n /\nexport type MgActionMoreItemType = {\n label: string;\n mouseEventHandler: IMouseEventHandler;\n status?: MgMenuItem['status'];\n icon?: MgIcon['icon'];\n href?: MgMenuItem['href'];\n badge?: Pick<MgBadge, 'value' \| 'label'>;\n};\n\n/\n MouseEvent callback interface\n */\~~ninterface~~ IMouseEventHandler ~~{\n~~ (event: MouseEvent): void;\n~~}\n~~"]}
1	+ {"version":3,"file":"mg-action-more.conf.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-action-more/mg-action-more.conf.ts"],"names":[],"mappings":"","sourcesContent":["import { MgBadge } from '../../atoms/mg-badge/mg-badge';\nimport { MgButton } from '../../atoms/mg-button/mg-button';\nimport { MgIcon } from '../../atoms/mg-icon/mg-icon';\nimport { MgMenuItem } from '../menu/mg-menu-item/mg-menu-item';\n\n/*\n prop icon type\n /\nexport type MgActionMoreIconType = {\n icon: MgIcon['icon'];\n};\n\n/\n prop button type\n /\nexport type MgActionMoreButtonType = {\n isIcon: MgButton['isIcon'];\n variant: MgButton['variant'];\n label?: MgButton['label'];\n};\n\n/\n locals message type\n /\nexport type MgActionMoreMessageType = { label: string };\n\n/\n prop item type\n /\nexport type MgActionMoreItemType = {\n label: string;\n mouseEventHandler: IMouseEventHandler;\n status?: MgMenuItem['status'];\n icon?: MgIcon['icon'];\n href?: MgMenuItem['href'];\n badge?: Pick<MgBadge, 'value' \| 'label'>;\n};\n\n/\n MouseEvent callback interface\n */\ntype IMouseEventHandler = (event: MouseEvent) => void;\n"]}

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

@@ -79,7 +79,7 @@ export class MgActionMore {
     if (newValue && !isMgActionMoreIcon(newValue)) {
       throw new Error(`<${this.name}> prop icon must match MgActionMoreIconType.`);
     }
-    else if (!Boolean(newValue === null || newValue === void 0 ? void 0 : newValue.icon) && Boolean(this.button.isIcon)) {
+    else if (!(newValue === null || newValue === void 0 ? void 0 : newValue.icon) && Boolean(this.button.isIcon)) {
       this.icon = { icon: 'ellipsis' };
     }
   }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"mg-action-more.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-action-more/mg-action-more.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Element, Prop, Watch, State, Host } from '@stencil/core';\nimport { MgActionMoreItemType, MgActionMoreButtonType, MgActionMoreIconType, MgActionMoreMessageType } from './mg-action-more.conf';\nimport { initLocales } from '../../../locales';\nimport { Status } from '../menu/mg-menu-item/mg-menu-item.conf';\nimport { Direction } from '../menu/mg-menu/mg-menu.conf';\nimport { createID } from '../../../utils/components.utils';\n\n/*\n MgActionMore['items'] type guard\n * @param prop - commponent items prop\n * @returns return true if type is valid\n /\nconst isMgActionMoreItems = (prop: unknown): prop is MgActionMoreItemType[] => {\n const items = prop as MgActionMoreItemType[];\n return typeof items === 'object' && items.every(item => typeof item === 'object' && typeof item.label === 'string' && typeof item.mouseEventHandler === 'function');\n};\n\n/\n MgActionMore['button'] type guard\n * @param prop - commponent button prop\n * @returns return true if type is valid\n /\nconst isMgActionMoreButton = (prop: unknown): prop is MgActionMoreButtonType => {\n const button = prop as MgActionMoreButtonType;\n return typeof button === 'object' && typeof button.variant === 'string' && typeof button.isIcon === 'boolean';\n};\n\n/\n MgActionMore['icon'] type guard\n * @param prop - commponent icon prop\n * @returns return true if type is valid\n /\nconst isMgActionMoreIcon = (prop: unknown): prop is MgActionMoreIconType => {\n const icon = prop as MgActionMoreIconType;\n return typeof icon === 'object' && typeof icon.icon === 'string';\n};\n\n@Component({\n tag: 'mg-action-more',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-action-more.css',\n shadow: true,\n})\nexport class MgActionMore {\n /**********\n Internal \n *********/\n\n private readonly name = 'mg-action-more';\n private readonly classBase = 'mg-c-action-more';\n private readonly mgPopoverIdentifier = createID(this.name);\n private messages: MgActionMoreMessageType;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgActionMoreElement;\n\n /\n Define displaied icon\n /\n @Prop({ mutable: true }) icon: MgActionMoreIconType;\n @Watch('icon')\n validateIcon(newValue: MgActionMore['icon']): void {\n if (newValue && !isMgActionMoreIcon(newValue)) {\n throw new Error(`<${this.name}> prop icon must match MgActionMoreIconType.`);\n } else if (!Boolean(newValue?.icon) && Boolean(this.button.isIcon)) {\n this.icon = { icon: 'ellipsis' };\n }\n }\n\n /\n Define button properties\n /\n @Prop() button: MgActionMoreButtonType = { variant: 'flat', isIcon: true };\n @Watch('button')\n validateButton(newValue: MgActionMore['button']): void {\n if (newValue && !isMgActionMoreButton(newValue)) {\n throw new Error(`<${this.name}> prop button must match MgActionMoreButtonType.`);\n }\n }\n\n /\n Define the menu-items elements\n /\n @Prop() items!: MgActionMoreItemType[];\n @Watch('items')\n validateItems(newValue: MgActionMore['items']): void {\n if (!isMgActionMoreItems(newValue)) {\n throw new Error(`<${this.name}> prop \"items\" is required and all values must be the same type, MgActionMoreItemType.`);\n }\n }\n\n /\n Define if chevron is display\n /\n @Prop() displayChevron: boolean;\n @Watch('displayChevron')\n validateDisplayChevron(newValue: MgActionMore['displayChevron']): void {\n if (newValue && this.button.isIcon === true) {\n throw new Error(`<${this.name}> prop \"displayChevron\" can't be used with a 'button\" prop \"isIcon\" attribute.`);\n }\n }\n /\n Menu expanded state\n /\n @State() expanded = false;\n\n /**********\n Methods \n ********/\n\n /\n * Toggle expanded props\n /\n private toggleExpanded = (): void => {\n this.expanded = !this.expanded;\n };\n\n /\n Handle popover display change value\n * @param event - display change updated value\n /\n private handleDisplayChange = (event: CustomEvent): void => {\n this.expanded = event.detail;\n };\n\n /\n Button click handler\n /\n private handleButton = (): void => {\n this.toggleExpanded();\n };\n\n /\n Item click handler\n * @param event - click event\n * @param customHandler - item['mouseEventHandler']\n /\n private handleItemClick = (event: MouseEvent, customHandler: MgActionMoreItemType['mouseEventHandler']) => {\n this.expanded = false;\n customHandler(event);\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Validate props\n /\n componentWillLoad(): void {\n this.messages = initLocales(this.element).messages.actionMore as MgActionMoreMessageType;\n this.validateItems(this.items);\n this.validateButton(this.button);\n this.validateIcon(this.icon);\n this.validateDisplayChevron(this.displayChevron);\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n const buttonLabel = this.button.label \|\| this.messages.label;\n const buttonContent = [buttonLabel];\n\n if (!this.button.isIcon && this.displayChevron) {\n buttonContent.push(\n <span\n class={{\n [`${this.classBase}__chevron`]: true,\n [`${this.classBase}__chevron--rotate`]: this.expanded === true,\n }}\n >\n <mg-icon icon=\"chevron-down\" size=\"small\"></mg-icon>\n </span>,\n );\n }\n\n return (\n <Host data-mg-popover-guard={this.mgPopoverIdentifier}>\n <span class=\"mg-action-more\">\n <mg-popover identifier={this.mgPopoverIdentifier} display={this.expanded} onDisplay-change={this.handleDisplayChange}>\n <mg-button variant={this.button.variant} isIcon={this.button.isIcon} type=\"button\" label={buttonLabel} onClick={this.handleButton}>\n {this.icon && <mg-icon {...this.icon}></mg-icon>}\n {!this.button.isIcon && buttonContent}\n </mg-button>\n <div slot=\"content\">\n <mg-menu direction={Direction.VERTICAL} label={this.messages.label}>\n {this.items.map(item => (\n // eslint-disable-next-line react/jsx-no-bind\n <mg-menu-item key={item.label} status={item.status \|\| Status.VISIBLE} onClick={e => this.handleItemClick(e, item.mouseEventHandler)} href={item.href}>\n {item.icon && <mg-icon icon={item.icon} slot=\"image\"></mg-icon>}\n <span slot=\"label\">{item.label}</span>\n {item.badge?.label && <mg-badge label={item.badge.label} value={item.badge.value} slot=\"information\" variant=\"text-color\"></mg-badge>}\n </mg-menu-item>\n ))}\n </mg-menu>\n </div>\n </mg-popover>\n </span>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"mg-action-more.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-action-more/mg-action-more.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Element, Prop, Watch, State, Host } from '@stencil/core';\nimport { MgActionMoreItemType, MgActionMoreButtonType, MgActionMoreIconType, MgActionMoreMessageType } from './mg-action-more.conf';\nimport { initLocales } from '../../../locales';\nimport { Status } from '../menu/mg-menu-item/mg-menu-item.conf';\nimport { Direction } from '../menu/mg-menu/mg-menu.conf';\nimport { createID } from '../../../utils/components.utils';\n\n/*\n MgActionMore['items'] type guard\n * @param prop - commponent items prop\n * @returns return true if type is valid\n /\nconst isMgActionMoreItems = (prop: unknown): prop is MgActionMoreItemType[] => {\n const items = prop as MgActionMoreItemType[];\n return typeof items === 'object' && items.every(item => typeof item === 'object' && typeof item.label === 'string' && typeof item.mouseEventHandler === 'function');\n};\n\n/\n MgActionMore['button'] type guard\n * @param prop - commponent button prop\n * @returns return true if type is valid\n /\nconst isMgActionMoreButton = (prop: unknown): prop is MgActionMoreButtonType => {\n const button = prop as MgActionMoreButtonType;\n return typeof button === 'object' && typeof button.variant === 'string' && typeof button.isIcon === 'boolean';\n};\n\n/\n MgActionMore['icon'] type guard\n * @param prop - commponent icon prop\n * @returns return true if type is valid\n /\nconst isMgActionMoreIcon = (prop: unknown): prop is MgActionMoreIconType => {\n const icon = prop as MgActionMoreIconType;\n return typeof icon === 'object' && typeof icon.icon === 'string';\n};\n\n@Component({\n tag: 'mg-action-more',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-action-more.css',\n shadow: true,\n})\nexport class MgActionMore {\n /**********\n Internal \n *********/\n\n private readonly name = 'mg-action-more';\n private readonly classBase = 'mg-c-action-more';\n private readonly mgPopoverIdentifier = createID(this.name);\n private messages: MgActionMoreMessageType;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgActionMoreElement;\n\n /\n Define displaied icon\n /\n @Prop({ mutable: true }) icon: MgActionMoreIconType;\n @Watch('icon')\n validateIcon(newValue: MgActionMore['icon']): void {\n if (newValue && !isMgActionMoreIcon(newValue)) {\n throw new Error(`<${this.name}> prop icon must match MgActionMoreIconType.`);\n } else if (!newValue?.icon && Boolean(this.button.isIcon)) {\n this.icon = { icon: 'ellipsis' };\n }\n }\n\n /\n Define button properties\n /\n @Prop() button: MgActionMoreButtonType = { variant: 'flat', isIcon: true };\n @Watch('button')\n validateButton(newValue: MgActionMore['button']): void {\n if (newValue && !isMgActionMoreButton(newValue)) {\n throw new Error(`<${this.name}> prop button must match MgActionMoreButtonType.`);\n }\n }\n\n /\n Define the menu-items elements\n /\n @Prop() items!: MgActionMoreItemType[];\n @Watch('items')\n validateItems(newValue: MgActionMore['items']): void {\n if (!isMgActionMoreItems(newValue)) {\n throw new Error(`<${this.name}> prop \"items\" is required and all values must be the same type, MgActionMoreItemType.`);\n }\n }\n\n /\n Define if chevron is display\n /\n @Prop() displayChevron: boolean;\n @Watch('displayChevron')\n validateDisplayChevron(newValue: MgActionMore['displayChevron']): void {\n if (newValue && this.button.isIcon === true) {\n throw new Error(`<${this.name}> prop \"displayChevron\" can't be used with a 'button\" prop \"isIcon\" attribute.`);\n }\n }\n /\n Menu expanded state\n /\n @State() expanded = false;\n\n /**********\n Methods \n ********/\n\n /\n * Toggle expanded props\n /\n private toggleExpanded = (): void => {\n this.expanded = !this.expanded;\n };\n\n /\n Handle popover display change value\n * @param event - display change updated value\n /\n private handleDisplayChange = (event: CustomEvent): void => {\n this.expanded = event.detail;\n };\n\n /\n Button click handler\n /\n private handleButton = (): void => {\n this.toggleExpanded();\n };\n\n /\n Item click handler\n * @param event - click event\n * @param customHandler - item['mouseEventHandler']\n /\n private handleItemClick = (event: MouseEvent, customHandler: MgActionMoreItemType['mouseEventHandler']) => {\n this.expanded = false;\n customHandler(event);\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Validate props\n /\n componentWillLoad(): void {\n this.messages = initLocales(this.element).messages.actionMore as MgActionMoreMessageType;\n this.validateItems(this.items);\n this.validateButton(this.button);\n this.validateIcon(this.icon);\n this.validateDisplayChevron(this.displayChevron);\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n const buttonLabel = this.button.label \|\| this.messages.label;\n const buttonContent = [buttonLabel];\n\n if (!this.button.isIcon && this.displayChevron) {\n buttonContent.push(\n <span\n class={{\n [`${this.classBase}__chevron`]: true,\n [`${this.classBase}__chevron--rotate`]: this.expanded === true,\n }}\n >\n <mg-icon icon=\"chevron-down\" size=\"small\"></mg-icon>\n </span>,\n );\n }\n\n return (\n <Host data-mg-popover-guard={this.mgPopoverIdentifier}>\n <span class=\"mg-action-more\">\n <mg-popover identifier={this.mgPopoverIdentifier} display={this.expanded} onDisplay-change={this.handleDisplayChange}>\n <mg-button variant={this.button.variant} isIcon={this.button.isIcon} type=\"button\" label={buttonLabel} onClick={this.handleButton}>\n {this.icon && <mg-icon {...this.icon}></mg-icon>}\n {!this.button.isIcon && buttonContent}\n </mg-button>\n <div slot=\"content\">\n <mg-menu direction={Direction.VERTICAL} label={this.messages.label}>\n {this.items.map(item => (\n // eslint-disable-next-line react/jsx-no-bind\n <mg-menu-item key={item.label} status={item.status \|\| Status.VISIBLE} onClick={e => this.handleItemClick(e, item.mouseEventHandler)} href={item.href}>\n {item.icon && <mg-icon icon={item.icon} slot=\"image\"></mg-icon>}\n <span slot=\"label\">{item.label}</span>\n {item.badge?.label && <mg-badge label={item.badge.label} value={item.badge.value} slot=\"information\" variant=\"text-color\"></mg-badge>}\n </mg-menu-item>\n ))}\n </mg-menu>\n </div>\n </mg-popover>\n </span>\n </Host>\n );\n }\n}\n"]}

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

@@ -97,7 +97,8 @@ export class MgForm {
   async displayError() {
     if (!this.readonly) {
       this.mgInputs.forEach(input => {
-        input.displayError && input.displayError();
+        var _a;
+        (_a = input.displayError) === null || _a === void 0 ? void 0 : _a.call(input);
       });
       this.checkValidity();
     }