@mgdis/mg-components 5.18.0 → 5.19.1

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

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

@@ -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/mg-menu-item.js

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { ClassList, createID } from "../../../../utils/components.utils";
+import { ClassList, createID, isValidString } from "../../../../utils/components.utils";
 import { initLocales } from "../../../../locales";
 import { Direction } from "../mg-menu/mg-menu.conf";
 import { Status } from "./mg-menu-item.conf";
@@ -9,7 +9,7 @@ export class MgMenuItem {
      * Internal *
      ************/
     this.name = 'mg-menu-item';
-    this.navigationButton = `${this.name}__navigation-button`;
+    this.navigationButton = 'mg-c-menu-item__navigation-button';
     /***********
      * Methods *
      **********/
@@ -62,7 +62,7 @@ export class MgMenuItem {
         throw new Error(`<${this.name}> slot "label" is required.`);
       ['label', 'metadata'].forEach(slot => {
         Array.from(this.element.querySelectorAll(`[slot="${slot}"]`)).forEach(element => {
-          if (element.textContent.trim().length < 1)
+          if (!isValidString(element.textContent))
             throw new Error(`<${this.name}> slot "${slot}" must have text content.`);
           if ((guard && element.getAttribute('title') === null) || !guard)
             element.setAttribute('title', element.textContent);
@@ -264,10 +264,9 @@ export class MgMenuItem {
    */
   renderInteractiveElement() {
     const TagName = this.href !== undefined ? 'a' : 'button';
-    return (h(TagName, { href: this.href, class: this.navigationButtonClassList.join(), tabindex: [Status.DISABLED, Status.HIDDEN].includes(this.status) ? -1 : undefined, disabled: this.status === Status.DISABLED, hidden: this.status === Status.HIDDEN, "aria-expanded": this.hasChildren && this.expanded.toString(), "aria-current": this.status === Status.ACTIVE && 'page', onClick: this.handleElementCLick }, h("slot", { name: "image" }), h("div", { class: `${this.navigationButton}-center` }, h("div", { class: `${this.navigationButton}-text-content` }, h("slot", { name: "label" }), !this.displayNotificationBadge && h("slot", { name: "information" }), this.displayNotificationBadge && (h("span", { class: "mg-menu-item__navigation-button-text-content-notification" }, h("mg-badge", { label: this.badgeLabel, value: "!", variant: "text-color", slot: "information" })))), this.size !== 'regular' && h("slot", { name: "metadata" })), this.hasChildren && this.href === undefined && (h("span", { class: {
+    return (h(TagName, { href: this.href, class: this.navigationButtonClassList.join(), tabindex: [Status.DISABLED, Status.HIDDEN].includes(this.status) ? -1 : undefined, disabled: this.status === Status.DISABLED, hidden: this.status === Status.HIDDEN, "aria-expanded": this.hasChildren && this.expanded.toString(), "aria-current": this.status === Status.ACTIVE && 'page', onClick: this.handleElementCLick }, h("slot", { name: "image" }), h("div", { class: `${this.navigationButton}-center` }, h("div", { class: `${this.navigationButton}-text-content` }, h("slot", { name: "label" }), !this.displayNotificationBadge && h("slot", { name: "information" }), this.displayNotificationBadge && (h("span", { class: `${this.navigationButton}-text-content-notification` }, h("mg-badge", { label: this.badgeLabel, value: "!", variant: "text-color", slot: "information" })))), this.size !== 'regular' && h("slot", { name: "metadata" })), this.hasChildren && this.href === undefined && (h("span", { class: {
         [`${this.navigationButton}-chevron`]: true,
         [`${this.navigationButton}-chevron--rotate`]: this.expanded === true,
-        'mg-a11y-animation': true,
       } }, h("mg-icon", { icon: "chevron-down", size: "small" })))));
   }
   /**
@@ -276,8 +275,8 @@ export class MgMenuItem {
    */
   render() {
     const getContainerClasses = () => ({
-      [`${this.name}__collapse-container`]: true,
-      [`${this.name}__collapse-container--first-level`]: (this.isInMainMenu || this.isItemMore) && this.isDirection(Direction.HORIZONTAL),
+      ['mg-c-menu-item__collapse-container']: true,
+      ['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu || this.isItemMore) && this.isDirection(Direction.HORIZONTAL),
     });
     return (h(Host, { role: this.isItemMore ? 'presentation' : 'listitem' }, this.displayPopover() ? (h("mg-popover", { display: this.expanded, placement: "bottom-start", arrowHide: true, "onDisplay-change": this.handlePopoverDisplay, identifier: this.getPopoverIdentifier() }, this.renderInteractiveElement(), h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
       this.renderInteractiveElement(),
@@ -288,12 +287,12 @@ export class MgMenuItem {
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["mg-menu-item.scss"]
+      "$": ["../../../../../node_modules/@mgdis/styles/dist/components/mg-menu-item.css"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["mg-menu-item.css"]
+      "$": ["../../../../../node_modules/@mgdis/styles/dist/components/mg-menu-item.css"]
     };
   }
   static get properties() {

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

@@ -1 +1 @@
-{"version":3,"file":"mg-menu-item.js","sourceRoot":"","sources":["../../../../../src/components/molecules/menu/mg-menu-item/mg-menu-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Host, Watch, Element, Event, EventEmitter } from '@stencil/core';\nimport { ClassList, createID } from '../../../../utils/components.utils';\nimport { initLocales } from '../../../../locales';\nimport { Direction } from '../mg-menu/mg-menu.conf';\nimport { Status } from './mg-menu-item.conf';\nimport type { MessageType } from '../../mg-item-more/mg-item-more.conf';\nimport type { MenuSizeType } from '../mg-menu/mg-menu.conf';\nimport type { DirectionType } from './mg-menu-item.conf';\nimport type { MgPopover } from '../../mg-popover/mg-popover';\n\n@Component({\n  tag: 'mg-menu-item',\n  styleUrl: 'mg-menu-item.scss',\n  shadow: true,\n})\nexport class MgMenuItem {\n  /************\n   * Internal *\n   ************/\n\n  private readonly name = 'mg-menu-item';\n  private readonly navigationButton = `${this.name}__navigation-button`;\n  private badgeLabel: string;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgMenuItemElement;\n\n  /************\n   * Props *\n   ************/\n\n  /**\n   * Identifier is used to control mg-popover\n   */\n  @Prop() identifier = createID('mg-menu-item');\n\n  /**\n   * Define menu-item href\n   * when defined menu-item contain an anchor instead of button\n   */\n  @Prop() href: string;\n\n  /**\n   * Define menu-item status.\n   */\n  @Prop({ reflect: true, mutable: true }) status: Status = Status.VISIBLE;\n  @Watch('status')\n  validateStatus(newValue: MgMenuItem['status'], oldValue?: MgMenuItem['status']): void {\n    if (oldValue !== undefined) {\n      this.navigationButtonClassList.delete(`${this.navigationButton}--${oldValue}`);\n    }\n    this.navigationButtonClassList.add(`${this.navigationButton}--${newValue}`);\n    this.statusChange.emit(newValue);\n  }\n\n  /**\n   * Define menu-item content expanded.\n   */\n  @Prop({ mutable: true }) expanded = false;\n  @Watch('expanded')\n  validateExpanded(newValue: MgMenuItem['expanded']): void {\n    if (typeof newValue !== 'boolean') throw new Error(`<${this.name}> prop \"expanded\" must be a boolean.`);\n\n    // if menu-item has sub-menu we have to apply some updates:\n    if (this.hasChildren) {\n      const subItems = Array.from(this.element.querySelectorAll(this.name));\n      if (!newValue) {\n        // - when main menu item is NOT expanded we need NOT expanded sub-items and NOT expanded sub-content\n        subItems.forEach(item => {\n          item.expanded = false;\n        });\n      } else if (this.element.querySelector(`${this.name}[status=\"${Status.ACTIVE}\"]`) !== null) {\n        // - when expanded and contain an active item parents are expended too\n        subItems.forEach(item => {\n          if (this.hasStatus(item, Status.ACTIVE)) {\n            item.expanded = true;\n          }\n        });\n      }\n    }\n  }\n\n  /**********\n   * Events *\n   *********/\n\n  /**\n   * Emited event when status change\n   */\n  @Event({ eventName: 'status-change' }) statusChange: EventEmitter<MgMenuItem['status']>;\n\n  /**\n   * Emited event when item is loaded\n   */\n  @Event({ eventName: 'item-loaded' }) itemLoaded: EventEmitter<void>;\n\n  /**********\n   * States *\n   *********/\n\n  /**\n   * Define menu-item size.\n   */\n  @State() size: MenuSizeType = 'regular';\n  @Watch('size')\n  validateSize(newValue: MgMenuItem['size'], oldValue?: MgMenuItem['size']): void {\n    this.navigationButtonClassList.delete(`${this.navigationButton}--size-${oldValue}`);\n    this.navigationButtonClassList.add(`${this.navigationButton}--size-${newValue}`);\n  }\n\n  /**\n   * Component button classes\n   */\n  @State() navigationButtonClassList: ClassList = new ClassList([this.navigationButton]);\n\n  /**\n   * Parent menu direction\n   */\n  @State() direction: DirectionType;\n  @Watch('direction')\n  validateDirection(newValue: MgMenuItem['direction']): void {\n    // manage menu items style depending to parent menu horientation\n    this.element.setAttribute(`data-style-direction-${newValue}`, '');\n    this.navigationButtonClassList.add(`${this.navigationButton}--${newValue}`);\n    // manage all sub levels child menu-items level with data-level attribut\n    if (this.isDirection(Direction.VERTICAL, newValue)) {\n      Array.from(this.element.querySelectorAll('mg-menu-item')).forEach(item => {\n        item.dataset.level = `${(Number(item.dataset.level) || 1) + 1}`;\n      });\n    }\n  }\n\n  /**\n   * Does component is in main menu\n   */\n  @State() isInMainMenu: boolean;\n\n  /**\n   * Does element is item-more\n   */\n  @State() isItemMore: boolean;\n\n  /**\n   * Does component have children.\n   */\n  @State() hasChildren = false;\n  @Watch('hasChildren')\n  validateHasChildren(newValue: boolean): void {\n    if (newValue && this.element.href !== undefined) {\n      throw new Error(`<${this.name}> prop \"href\" is unauthorizied when element is a parent.`);\n    }\n  }\n\n  /**\n   * Does component should display notification badge.\n   */\n  @State() displayNotificationBadge: boolean;\n\n  /***********\n   * Methods *\n   **********/\n\n  /**\n   * Toggle expanded prop value\n   */\n  private toggleExpanded = (): void => {\n    this.expanded = !this.expanded;\n  };\n\n  /**\n   * Does an Element have given Status\n   * @param mgMenuItemElement - to parse\n   * @param status - to check\n   * @returns true if element with status is found\n   */\n  private hasStatus = (mgMenuItemElement: HTMLMgMenuItemElement, status: MgMenuItem['status']): boolean => mgMenuItemElement.status === status;\n\n  /**\n   * Is component contextual direction match the given direction\n   * @param direction - in parent menu\n   * @param compareWith - direction to compare with. Default: `this.direction`\n   * @returns true is direction match the direction propertie\n   */\n  private isDirection = (direction: MgMenuItem['direction'], compareWith = this.direction): boolean => direction === compareWith;\n\n  /**\n   * Update displayNotificationBadge\n   * current component notification badge have priority over the slot badge when submenu contain badge\n   */\n  private updateDisplayNotificationBadge = (): void => {\n    const childMenu = this.element.querySelector('mg-menu');\n    this.displayNotificationBadge =\n      childMenu !== null &&\n      Array.from(childMenu.children).some((subItem: HTMLMgMenuItemElement) => subItem.querySelector('mg-badge') !== null && subItem.getAttribute('hidden') === null);\n  };\n\n  /**\n   * Method to control if one of component children have active status\n   * @returns truthy if component has active child\n   */\n  private hasActiveChild = (): boolean =>\n    Array.from(this.element.querySelector('mg-menu')?.children || []).some(\n      (element: HTMLMgMenuItemElement) => element.nodeName === 'MG-MENU-ITEM' && this.hasStatus(element, Status.ACTIVE) && element.getAttribute('hidden') === null,\n    );\n\n  /**\n   * Validate slots\n   * @param guard - prevent action whith guard. Default: false.\n   */\n  private validateSlot = (guard = false): void => {\n    // slot title AND metadata validation\n    // add title on label AND metada slots due to text-overflow on these element\n    if (Array.from(this.element.children).find(child => child.getAttribute('slot') === 'label') === undefined) throw new Error(`<${this.name}> slot \"label\" is required.`);\n    ['label', 'metadata'].forEach(slot => {\n      Array.from(this.element.querySelectorAll(`[slot=\"${slot}\"]`)).forEach(element => {\n        if (element.textContent.trim().length < 1) throw new Error(`<${this.name}> slot \"${slot}\" must have text content.`);\n        if ((guard && element.getAttribute('title') === null) || !guard) element.setAttribute('title', element.textContent);\n      });\n    });\n  };\n\n  /**\n   * Update status\n   * @param guard - status to exclude from process in addition to [Status.HIDDEN, Status.DISABLED] . Default: [].\n   */\n  private updateStatus = (guard = []): void => {\n    if (![Status.HIDDEN, Status.DISABLED, ...guard].includes(this.status)) {\n      this.status = this.hasActiveChild() ? Status.ACTIVE : Status.VISIBLE;\n    }\n  };\n\n  /**\n   * Init event-listeners\n   */\n  private initListeners = (): void => {\n    // manage first sub-level menu-items\n    Array.from(this.element.querySelector('mg-menu')?.children || []).forEach(item => {\n      if (item.nodeName === 'MG-MENU-ITEM') {\n        // manage child menu listener\n        item.addEventListener('status-change', () => {\n          this.updateStatus();\n        });\n      }\n    });\n  };\n\n  /**\n   * Get mg-popover identifier\n   * @returns generated mg-popover identifier\n   */\n  private getPopoverIdentifier = (): MgPopover['identifier'] => `${this.identifier}-popover`;\n\n  /**\n   * Render popover clickoutside guard for content slot\n   */\n  private updatePopoverGuard(): void {\n    if (this.displayPopover())\n      Array.from(this.element.children)\n        .filter((child: HTMLElement) => child.getAttribute('slot') === null && child.nodeName !== 'MG-MENU' && Boolean(child.dataset))\n        .forEach((slot: HTMLElement) => (slot.dataset.mgPopoverGuard = this.getPopoverIdentifier()));\n  }\n\n  /**\n   * Condition to know if component should display a mg-popover\n   * @returns truthy if component display popover\n   */\n  private displayPopover = (): boolean => this.isDirection(Direction.HORIZONTAL) && this.hasChildren && this.href === undefined;\n\n  /************\n   * Handlers *\n   ************/\n\n  /**\n   * Handle interacrtive element click\n   * @param event - click on element\n   */\n  private handleElementCLick = (event: MouseEvent): void => {\n    if ((this.hasChildren && !this.isInMainMenu) || this.status === Status.DISABLED) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n\n    // toggle expanded when mg-menu-item has child items\n    if (this.hasChildren) this.toggleExpanded();\n  };\n\n  /**\n   * Handle popover element display-change event\n   * @param event - popover display event\n   */\n  private handlePopoverDisplay = (event: CustomEvent): void => {\n    this.expanded = event.detail;\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Validate props\n   */\n  componentWillLoad(): void {\n    // has children items that is NOT [slot='image' | 'information' | 'label' | 'metadata'] element\n    // we store only matching elements\n    this.hasChildren = Array.from(this.element.children).some(child => !['image', 'information', 'label', 'metadata'].includes(child.getAttribute('slot')));\n    this.badgeLabel = (initLocales(this.element).messages as { plusMenu: MessageType }).plusMenu.badgeLabel;\n    this.isItemMore = this.element.dataset.overflowMore !== undefined;\n\n    // Validate props\n    this.validateStatus(this.status);\n    this.validateExpanded(this.expanded);\n\n    // Validate states\n    this.validateSize(this.size);\n  }\n\n  /**\n   * Check if component slots configuration\n   * @returns timeout\n   */\n  componentDidLoad(): ReturnType<typeof setTimeout> {\n    // validation\n    this.validateSlot(true);\n\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      // define menu-item context states\n      const menu = this.element.closest('mg-menu');\n      this.direction = this.isItemMore || menu === null ? Direction.HORIZONTAL : menu.direction;\n      this.isInMainMenu = menu !== null && this.element.parentElement.closest('mg-menu-item') === null;\n      if (menu?.size !== undefined) this.size = menu.size;\n\n      if (this.isItemMore) this.size = this.element.dataset.size as MgMenuItem['size'];\n\n      // when main menu item contain an active item it will get the active style\n      // AND if item is in vertical menu it will be expanded\n      if (this.hasActiveChild() && this.isInMainMenu) this.expanded = this.isDirection(Direction.VERTICAL);\n\n      this.updateStatus([Status.ACTIVE]);\n      this.updateDisplayNotificationBadge();\n      this.updatePopoverGuard();\n\n      // manage child dom changes with mutationObserver and listzners\n      this.initListeners();\n\n      // emit loaded event when component is fully loaded\n      this.itemLoaded.emit();\n\n      new MutationObserver(mutationsList => {\n        if (mutationsList.some(mutation => mutation.attributeName === 'hidden')) this.updateStatus();\n        if (mutationsList.some(mutation => mutation.type === 'characterData')) this.validateSlot();\n        this.updateDisplayNotificationBadge();\n      }).observe(this.element, { attributes: true, childList: true, characterData: true, subtree: true });\n    }, 0);\n  }\n\n  /**\n   * Render ineractive element\n   * @returns HTML Element\n   */\n  private renderInteractiveElement(): HTMLElement {\n    const TagName: string = this.href !== undefined ? 'a' : 'button';\n    return (\n      <TagName\n        href={this.href}\n        class={this.navigationButtonClassList.join()}\n        tabindex={[Status.DISABLED, Status.HIDDEN].includes(this.status) ? -1 : undefined}\n        disabled={this.status === Status.DISABLED}\n        hidden={this.status === Status.HIDDEN}\n        aria-expanded={this.hasChildren && this.expanded.toString()}\n        aria-current={this.status === Status.ACTIVE && 'page'}\n        onClick={this.handleElementCLick}\n      >\n        <slot name=\"image\"></slot>\n        <div class={`${this.navigationButton}-center`}>\n          <div class={`${this.navigationButton}-text-content`}>\n            <slot name=\"label\"></slot>\n            {!this.displayNotificationBadge && <slot name=\"information\"></slot>}\n            {this.displayNotificationBadge && (\n              <span class=\"mg-menu-item__navigation-button-text-content-notification\">\n                <mg-badge label={this.badgeLabel} value=\"!\" variant=\"text-color\" slot=\"information\"></mg-badge>\n              </span>\n            )}\n          </div>\n          {this.size !== 'regular' && <slot name=\"metadata\"></slot>}\n        </div>\n        {this.hasChildren && this.href === undefined && (\n          <span\n            class={{\n              [`${this.navigationButton}-chevron`]: true,\n              [`${this.navigationButton}-chevron--rotate`]: this.expanded === true,\n              'mg-a11y-animation': true,\n            }}\n          >\n            <mg-icon icon=\"chevron-down\" size=\"small\"></mg-icon>\n          </span>\n        )}\n      </TagName>\n    );\n  }\n\n  /**\n   * Render slot\n   * @returns HTML Element\n   */\n  private renderSlot = (): HTMLElement => <slot></slot>;\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    const getContainerClasses = () => ({\n      [`${this.name}__collapse-container`]: true,\n      [`${this.name}__collapse-container--first-level`]: (this.isInMainMenu || this.isItemMore) && this.isDirection(Direction.HORIZONTAL),\n    });\n\n    return (\n      <Host role={this.isItemMore ? 'presentation' : 'listitem'}>\n        {this.displayPopover() ? (\n          <mg-popover display={this.expanded} placement=\"bottom-start\" arrowHide={true} onDisplay-change={this.handlePopoverDisplay} identifier={this.getPopoverIdentifier()}>\n            {this.renderInteractiveElement()}\n            <div class={getContainerClasses()} slot=\"content\">\n              {this.renderSlot()}\n            </div>\n          </mg-popover>\n        ) : (\n          [\n            this.renderInteractiveElement(),\n            <div key=\"vertical-container\" class={getContainerClasses()} hidden={!this.expanded}>\n              {this.renderSlot()}\n            </div>,\n          ]\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"mg-menu-item.js","sourceRoot":"","sources":["../../../../../src/components/molecules/menu/mg-menu-item/mg-menu-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Host, Watch, Element, Event, EventEmitter } from '@stencil/core';\nimport { ClassList, createID, isValidString } from '../../../../utils/components.utils';\nimport { initLocales } from '../../../../locales';\nimport { Direction } from '../mg-menu/mg-menu.conf';\nimport { Status } from './mg-menu-item.conf';\nimport type { MessageType } from '../../mg-item-more/mg-item-more.conf';\nimport type { MenuSizeType } from '../mg-menu/mg-menu.conf';\nimport type { DirectionType } from './mg-menu-item.conf';\nimport type { MgPopover } from '../../mg-popover/mg-popover';\n\n@Component({\n  tag: 'mg-menu-item',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-menu-item.css',\n  shadow: true,\n})\nexport class MgMenuItem {\n  /************\n   * Internal *\n   ************/\n\n  private readonly name = 'mg-menu-item';\n  private readonly navigationButton = 'mg-c-menu-item__navigation-button';\n  private badgeLabel: string;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgMenuItemElement;\n\n  /************\n   * Props *\n   ************/\n\n  /**\n   * Identifier is used to control mg-popover\n   */\n  @Prop() identifier = createID('mg-menu-item');\n\n  /**\n   * Define menu-item href\n   * when defined menu-item contain an anchor instead of button\n   */\n  @Prop() href: string;\n\n  /**\n   * Define menu-item status.\n   */\n  @Prop({ reflect: true, mutable: true }) status: Status = Status.VISIBLE;\n  @Watch('status')\n  validateStatus(newValue: MgMenuItem['status'], oldValue?: MgMenuItem['status']): void {\n    if (oldValue !== undefined) {\n      this.navigationButtonClassList.delete(`${this.navigationButton}--${oldValue}`);\n    }\n    this.navigationButtonClassList.add(`${this.navigationButton}--${newValue}`);\n    this.statusChange.emit(newValue);\n  }\n\n  /**\n   * Define menu-item content expanded.\n   */\n  @Prop({ mutable: true }) expanded = false;\n  @Watch('expanded')\n  validateExpanded(newValue: MgMenuItem['expanded']): void {\n    if (typeof newValue !== 'boolean') throw new Error(`<${this.name}> prop \"expanded\" must be a boolean.`);\n\n    // if menu-item has sub-menu we have to apply some updates:\n    if (this.hasChildren) {\n      const subItems = Array.from(this.element.querySelectorAll(this.name));\n      if (!newValue) {\n        // - when main menu item is NOT expanded we need NOT expanded sub-items and NOT expanded sub-content\n        subItems.forEach(item => {\n          item.expanded = false;\n        });\n      } else if (this.element.querySelector(`${this.name}[status=\"${Status.ACTIVE}\"]`) !== null) {\n        // - when expanded and contain an active item parents are expended too\n        subItems.forEach(item => {\n          if (this.hasStatus(item, Status.ACTIVE)) {\n            item.expanded = true;\n          }\n        });\n      }\n    }\n  }\n\n  /**********\n   * Events *\n   *********/\n\n  /**\n   * Emited event when status change\n   */\n  @Event({ eventName: 'status-change' }) statusChange: EventEmitter<MgMenuItem['status']>;\n\n  /**\n   * Emited event when item is loaded\n   */\n  @Event({ eventName: 'item-loaded' }) itemLoaded: EventEmitter<void>;\n\n  /**********\n   * States *\n   *********/\n\n  /**\n   * Define menu-item size.\n   */\n  @State() size: MenuSizeType = 'regular';\n  @Watch('size')\n  validateSize(newValue: MgMenuItem['size'], oldValue?: MgMenuItem['size']): void {\n    this.navigationButtonClassList.delete(`${this.navigationButton}--size-${oldValue}`);\n    this.navigationButtonClassList.add(`${this.navigationButton}--size-${newValue}`);\n  }\n\n  /**\n   * Component button classes\n   */\n  @State() navigationButtonClassList: ClassList = new ClassList([this.navigationButton]);\n\n  /**\n   * Parent menu direction\n   */\n  @State() direction: DirectionType;\n  @Watch('direction')\n  validateDirection(newValue: MgMenuItem['direction']): void {\n    // manage menu items style depending to parent menu horientation\n    this.element.setAttribute(`data-style-direction-${newValue}`, '');\n    this.navigationButtonClassList.add(`${this.navigationButton}--${newValue}`);\n    // manage all sub levels child menu-items level with data-level attribut\n    if (this.isDirection(Direction.VERTICAL, newValue)) {\n      Array.from(this.element.querySelectorAll('mg-menu-item')).forEach(item => {\n        item.dataset.level = `${(Number(item.dataset.level) || 1) + 1}`;\n      });\n    }\n  }\n\n  /**\n   * Does component is in main menu\n   */\n  @State() isInMainMenu: boolean;\n\n  /**\n   * Does element is item-more\n   */\n  @State() isItemMore: boolean;\n\n  /**\n   * Does component have children.\n   */\n  @State() hasChildren = false;\n  @Watch('hasChildren')\n  validateHasChildren(newValue: boolean): void {\n    if (newValue && this.element.href !== undefined) {\n      throw new Error(`<${this.name}> prop \"href\" is unauthorizied when element is a parent.`);\n    }\n  }\n\n  /**\n   * Does component should display notification badge.\n   */\n  @State() displayNotificationBadge: boolean;\n\n  /***********\n   * Methods *\n   **********/\n\n  /**\n   * Toggle expanded prop value\n   */\n  private toggleExpanded = (): void => {\n    this.expanded = !this.expanded;\n  };\n\n  /**\n   * Does an Element have given Status\n   * @param mgMenuItemElement - to parse\n   * @param status - to check\n   * @returns true if element with status is found\n   */\n  private hasStatus = (mgMenuItemElement: HTMLMgMenuItemElement, status: MgMenuItem['status']): boolean => mgMenuItemElement.status === status;\n\n  /**\n   * Is component contextual direction match the given direction\n   * @param direction - in parent menu\n   * @param compareWith - direction to compare with. Default: `this.direction`\n   * @returns true is direction match the direction propertie\n   */\n  private isDirection = (direction: MgMenuItem['direction'], compareWith = this.direction): boolean => direction === compareWith;\n\n  /**\n   * Update displayNotificationBadge\n   * current component notification badge have priority over the slot badge when submenu contain badge\n   */\n  private updateDisplayNotificationBadge = (): void => {\n    const childMenu = this.element.querySelector('mg-menu');\n    this.displayNotificationBadge =\n      childMenu !== null &&\n      Array.from(childMenu.children).some((subItem: HTMLMgMenuItemElement) => subItem.querySelector('mg-badge') !== null && subItem.getAttribute('hidden') === null);\n  };\n\n  /**\n   * Method to control if one of component children have active status\n   * @returns truthy if component has active child\n   */\n  private hasActiveChild = (): boolean =>\n    Array.from(this.element.querySelector('mg-menu')?.children || []).some(\n      (element: HTMLMgMenuItemElement) => element.nodeName === 'MG-MENU-ITEM' && this.hasStatus(element, Status.ACTIVE) && element.getAttribute('hidden') === null,\n    );\n\n  /**\n   * Validate slots\n   * @param guard - prevent action whith guard. Default: false.\n   */\n  private validateSlot = (guard = false): void => {\n    // slot title AND metadata validation\n    // add title on label AND metada slots due to text-overflow on these element\n    if (Array.from(this.element.children).find(child => child.getAttribute('slot') === 'label') === undefined) throw new Error(`<${this.name}> slot \"label\" is required.`);\n    ['label', 'metadata'].forEach(slot => {\n      Array.from(this.element.querySelectorAll(`[slot=\"${slot}\"]`)).forEach(element => {\n        if (!isValidString(element.textContent)) throw new Error(`<${this.name}> slot \"${slot}\" must have text content.`);\n        if ((guard && element.getAttribute('title') === null) || !guard) element.setAttribute('title', element.textContent);\n      });\n    });\n  };\n\n  /**\n   * Update status\n   * @param guard - status to exclude from process in addition to [Status.HIDDEN, Status.DISABLED] . Default: [].\n   */\n  private updateStatus = (guard = []): void => {\n    if (![Status.HIDDEN, Status.DISABLED, ...guard].includes(this.status)) {\n      this.status = this.hasActiveChild() ? Status.ACTIVE : Status.VISIBLE;\n    }\n  };\n\n  /**\n   * Init event-listeners\n   */\n  private initListeners = (): void => {\n    // manage first sub-level menu-items\n    Array.from(this.element.querySelector('mg-menu')?.children || []).forEach(item => {\n      if (item.nodeName === 'MG-MENU-ITEM') {\n        // manage child menu listener\n        item.addEventListener('status-change', () => {\n          this.updateStatus();\n        });\n      }\n    });\n  };\n\n  /**\n   * Get mg-popover identifier\n   * @returns generated mg-popover identifier\n   */\n  private getPopoverIdentifier = (): MgPopover['identifier'] => `${this.identifier}-popover`;\n\n  /**\n   * Render popover clickoutside guard for content slot\n   */\n  private updatePopoverGuard(): void {\n    if (this.displayPopover())\n      Array.from(this.element.children)\n        .filter((child: HTMLElement) => child.getAttribute('slot') === null && child.nodeName !== 'MG-MENU' && Boolean(child.dataset))\n        .forEach((slot: HTMLElement) => (slot.dataset.mgPopoverGuard = this.getPopoverIdentifier()));\n  }\n\n  /**\n   * Condition to know if component should display a mg-popover\n   * @returns truthy if component display popover\n   */\n  private displayPopover = (): boolean => this.isDirection(Direction.HORIZONTAL) && this.hasChildren && this.href === undefined;\n\n  /************\n   * Handlers *\n   ************/\n\n  /**\n   * Handle interacrtive element click\n   * @param event - click on element\n   */\n  private handleElementCLick = (event: MouseEvent): void => {\n    if ((this.hasChildren && !this.isInMainMenu) || this.status === Status.DISABLED) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n\n    // toggle expanded when mg-menu-item has child items\n    if (this.hasChildren) this.toggleExpanded();\n  };\n\n  /**\n   * Handle popover element display-change event\n   * @param event - popover display event\n   */\n  private handlePopoverDisplay = (event: CustomEvent): void => {\n    this.expanded = event.detail;\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Validate props\n   */\n  componentWillLoad(): void {\n    // has children items that is NOT [slot='image' | 'information' | 'label' | 'metadata'] element\n    // we store only matching elements\n    this.hasChildren = Array.from(this.element.children).some(child => !['image', 'information', 'label', 'metadata'].includes(child.getAttribute('slot')));\n    this.badgeLabel = (initLocales(this.element).messages as { plusMenu: MessageType }).plusMenu.badgeLabel;\n    this.isItemMore = this.element.dataset.overflowMore !== undefined;\n\n    // Validate props\n    this.validateStatus(this.status);\n    this.validateExpanded(this.expanded);\n\n    // Validate states\n    this.validateSize(this.size);\n  }\n\n  /**\n   * Check if component slots configuration\n   * @returns timeout\n   */\n  componentDidLoad(): ReturnType<typeof setTimeout> {\n    // validation\n    this.validateSlot(true);\n\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      // define menu-item context states\n      const menu = this.element.closest('mg-menu');\n      this.direction = this.isItemMore || menu === null ? Direction.HORIZONTAL : menu.direction;\n      this.isInMainMenu = menu !== null && this.element.parentElement.closest('mg-menu-item') === null;\n      if (menu?.size !== undefined) this.size = menu.size;\n\n      if (this.isItemMore) this.size = this.element.dataset.size as MgMenuItem['size'];\n\n      // when main menu item contain an active item it will get the active style\n      // AND if item is in vertical menu it will be expanded\n      if (this.hasActiveChild() && this.isInMainMenu) this.expanded = this.isDirection(Direction.VERTICAL);\n\n      this.updateStatus([Status.ACTIVE]);\n      this.updateDisplayNotificationBadge();\n      this.updatePopoverGuard();\n\n      // manage child dom changes with mutationObserver and listzners\n      this.initListeners();\n\n      // emit loaded event when component is fully loaded\n      this.itemLoaded.emit();\n\n      new MutationObserver(mutationsList => {\n        if (mutationsList.some(mutation => mutation.attributeName === 'hidden')) this.updateStatus();\n        if (mutationsList.some(mutation => mutation.type === 'characterData')) this.validateSlot();\n        this.updateDisplayNotificationBadge();\n      }).observe(this.element, { attributes: true, childList: true, characterData: true, subtree: true });\n    }, 0);\n  }\n\n  /**\n   * Render ineractive element\n   * @returns HTML Element\n   */\n  private renderInteractiveElement(): HTMLElement {\n    const TagName: string = this.href !== undefined ? 'a' : 'button';\n    return (\n      <TagName\n        href={this.href}\n        class={this.navigationButtonClassList.join()}\n        tabindex={[Status.DISABLED, Status.HIDDEN].includes(this.status) ? -1 : undefined}\n        disabled={this.status === Status.DISABLED}\n        hidden={this.status === Status.HIDDEN}\n        aria-expanded={this.hasChildren && this.expanded.toString()}\n        aria-current={this.status === Status.ACTIVE && 'page'}\n        onClick={this.handleElementCLick}\n      >\n        <slot name=\"image\"></slot>\n        <div class={`${this.navigationButton}-center`}>\n          <div class={`${this.navigationButton}-text-content`}>\n            <slot name=\"label\"></slot>\n            {!this.displayNotificationBadge && <slot name=\"information\"></slot>}\n            {this.displayNotificationBadge && (\n              <span class={`${this.navigationButton}-text-content-notification`}>\n                <mg-badge label={this.badgeLabel} value=\"!\" variant=\"text-color\" slot=\"information\"></mg-badge>\n              </span>\n            )}\n          </div>\n          {this.size !== 'regular' && <slot name=\"metadata\"></slot>}\n        </div>\n        {this.hasChildren && this.href === undefined && (\n          <span\n            class={{\n              [`${this.navigationButton}-chevron`]: true,\n              [`${this.navigationButton}-chevron--rotate`]: this.expanded === true,\n            }}\n          >\n            <mg-icon icon=\"chevron-down\" size=\"small\"></mg-icon>\n          </span>\n        )}\n      </TagName>\n    );\n  }\n\n  /**\n   * Render slot\n   * @returns HTML Element\n   */\n  private renderSlot = (): HTMLElement => <slot></slot>;\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    const getContainerClasses = () => ({\n      ['mg-c-menu-item__collapse-container']: true,\n      ['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu || this.isItemMore) && this.isDirection(Direction.HORIZONTAL),\n    });\n\n    return (\n      <Host role={this.isItemMore ? 'presentation' : 'listitem'}>\n        {this.displayPopover() ? (\n          <mg-popover display={this.expanded} placement=\"bottom-start\" arrowHide={true} onDisplay-change={this.handlePopoverDisplay} identifier={this.getPopoverIdentifier()}>\n            {this.renderInteractiveElement()}\n            <div class={getContainerClasses()} slot=\"content\">\n              {this.renderSlot()}\n            </div>\n          </mg-popover>\n        ) : (\n          [\n            this.renderInteractiveElement(),\n            <div key=\"vertical-container\" class={getContainerClasses()} hidden={!this.expanded}>\n              {this.renderSlot()}\n            </div>,\n          ]\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

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