@mgdis/mg-components 5.18.0 → 5.19.1

package/dist/collection/components/molecules/menu/mg-menu/mg-menu.css

@@ -1,37 +0,0 @@
-/**
- * A11Y
- */
-.sr-only {
-  border: 0 !important;
-  clip: rect(1px, 1px, 1px, 1px) !important;
-  -webkit-clip-path: inset(50%) !important;
-  clip-path: inset(50%) !important;
-  height: 1px !important;
-  margin: -1px !important;
-  overflow: hidden !important;
-  padding: 0 !important;
-  position: absolute !important;
-  width: 1px !important;
-  white-space: nowrap !important;
-}
-
-*:focus:not(:focus-visible) {
-  outline: none;
-}
-
-@media (prefers-reduced-motion) {
-  .mg-a11y-animation {
-    animation: none !important;
-    transition: none !important;
-  }
-}
-:host {
-  display: flex;
-  background-color: hsl(var(--mg-menu-background-color-hsl, var(--color-light)));
-}
-
-:host([direction=vertical]) {
-  flex-direction: column;
-  height: 100%;
-  overflow-y: auto;
-}

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

@@ -1 +0,0 @@
-{"version":3,"file":"mg-menu.e2e.js","sourceRoot":"","sources":["../../../../../../src/components/molecules/menu/mg-menu/test/mg-menu.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { KeyInput } from 'puppeteer';\nimport { createPage, DesignSystemE2EPage } from '../../../../../utils/stencil.e2e.test.utils';\nimport { renderAttributes } from '../../../../../utils/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 expectImageSnapshot = async (page: DesignSystemE2EPage) => {\n  await page.waitForChanges();\n  await page.waitForTimeout(200);\n  const screenshot = await page.screenshot();\n  expect(screenshot).toMatchImageSnapshot();\n};\n\nconst getSubMenuSize = (size: MenuSizeType) => {\n  if (size === 'large') return 'medium';\n  else if (size === 'medium') return 'regular';\n  else return 'regular';\n};\n\nconst getFrameSize = (direction, size?) =>\n  direction === Direction.VERTICAL\n    ? { width: 400, height: ['medium', 'large'].includes(size) ? 400 : 250 }\n    : { width: ['medium', 'large'].includes(size) ? 1100 : 800, height: 200 };\n\nconst createHTML = (args, containerSize?) => `\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  describe.each([Direction.HORIZONTAL, Direction.VERTICAL])('direction %s', direction => {\n    test.each(sizes)(`should renders, case direction ${direction} size %s with large screen`, async size => {\n      const page = await createPage(createHTML({ direction, size, badge: true }), getFrameSize(direction, size));\n\n      const element = await page.find('mg-menu');\n      expect(element).toHaveClass('hydrated');\n\n      await expectImageSnapshot(page);\n    });\n  });\n\n  describe('navigation horizontal', () => {\n    test(`should success mouse navigation, case direction ${Direction.HORIZONTAL}`, async () => {\n      const page = await createPage(createHTML({ direction: Direction.HORIZONTAL }), getFrameSize(Direction.HORIZONTAL));\n      await expectImageSnapshot(page);\n\n      const actions = [\n        { position: 1, expanded: true },\n        { position: 5, expanded: true },\n        { position: 5, expanded: false },\n        { position: 1, expanded: true },\n      ];\n      for await (const action of actions) {\n        let item = await page.find(`header > mg-menu > mg-menu-item:nth-of-type(${action.position}) >>> button`);\n        await item.click();\n        await page.waitForChanges();\n\n        expect(item.getAttribute('aria-expanded')).toBe(`${action.expanded}`);\n        item = await page.find(`header > mg-menu > mg-menu-item:not(:nth-of-type(${action.position})) >>> button[aria-expanded=\"true\"]`);\n        expect(item).toBe(null);\n      }\n\n      // menu-item close\n      await page.$eval('body', elm => {\n        elm.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n      });\n      await page.waitForChanges();\n      await expectImageSnapshot(page);\n    });\n\n    test(`should success keyboard navigation, case direction ${Direction.HORIZONTAL}`, async () => {\n      const page = await createPage(createHTML({ direction: Direction.HORIZONTAL }), getFrameSize(Direction.HORIZONTAL));\n      await expectImageSnapshot(page);\n\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\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 as unknown as KeyInput);\n        }\n        await page.waitForChanges();\n        let item;\n        if (action.openeItem > 0) {\n          item = await page.find(`header > mg-menu > mg-menu-item:nth-of-type(${action.openeItem}) >>> button[aria-expanded=\"true\"]`);\n          expect(item).not.toBe(null);\n          item = await page.find(`header > mg-menu > mg-menu-item:not(:nth-of-type(${action.openeItem})) >>> button[aria-expanded=\"true\"]`);\n        } else {\n          item = await page.find(`header > mg-menu > mg-menu-item >>> button[aria-expanded=\"true\"]`);\n        }\n        expect(item).toBe(null);\n      }\n    });\n  });\n\n  describe('navigation vertical', () => {\n    test(`should success mouse navigation, case direction ${Direction.VERTICAL}`, async () => {\n      const page = await createPage(createHTML({ direction: Direction.VERTICAL }), getFrameSize(Direction.VERTICAL));\n      await expectImageSnapshot(page);\n\n      const positions = [1, 5, 5, 1];\n      for await (const position of positions) {\n        const item = await page.find(`header > mg-menu > mg-menu-item:nth-of-type(${position}) >>> button`);\n        await item.click();\n        await page.waitForChanges();\n        await expectImageSnapshot(page);\n      }\n\n      await page.$eval('body', elm => {\n        elm.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n      });\n      await page.waitForChanges();\n      await expectImageSnapshot(page);\n    });\n    test(`should success keyboard navigation, case direction ${Direction.VERTICAL}`, async () => {\n      const page = await createPage(createHTML({ direction: Direction.VERTICAL }), getFrameSize(Direction.VERTICAL));\n      await expectImageSnapshot(page);\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 as unknown as KeyInput);\n        }\n        await page.waitForChanges();\n        await expectImageSnapshot(page);\n      }\n    });\n  });\n});\n"]}

package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.css

@@ -1,377 +0,0 @@
-/**
- * A11Y
- */
-.sr-only {
-  border: 0 !important;
-  clip: rect(1px, 1px, 1px, 1px) !important;
-  -webkit-clip-path: inset(50%) !important;
-  clip-path: inset(50%) !important;
-  height: 1px !important;
-  margin: -1px !important;
-  overflow: hidden !important;
-  padding: 0 !important;
-  position: absolute !important;
-  width: 1px !important;
-  white-space: nowrap !important;
-}
-
-*:focus:not(:focus-visible) {
-  outline: none;
-}
-
-@media (prefers-reduced-motion) {
-  .mg-a11y-animation {
-    animation: none !important;
-    transition: none !important;
-  }
-}
-.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button,
-.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular {
-  padding: 1rem 2rem;
-  height: 3.8rem;
-}
-.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button,
-.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button ::slotted([slot=label]),
-.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button ::slotted([slot=metadata]),
-.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular,
-.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular ::slotted([slot=label]),
-.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular ::slotted([slot=metadata]) {
-  font-size: var(--font-size);
-}
-.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button.mg-menu-item__navigation-button--horizontal,
-.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular.mg-menu-item__navigation-button--horizontal {
-  padding-bottom: calc(1rem - 0.3rem);
-}
-.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button.mg-menu-item__navigation-button--vertical,
-.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular.mg-menu-item__navigation-button--vertical {
-  padding-left: calc(2rem - 0.3rem);
-}
-
-.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button,
-.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium {
-  padding: 1rem 3rem;
-  height: 5.1rem;
-}
-.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button,
-.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button ::slotted([slot=label]),
-.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button ::slotted([slot=metadata]),
-.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium,
-.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium ::slotted([slot=label]),
-.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium ::slotted([slot=metadata]) {
-  font-size: calc(var(--font-size) + 0.2rem);
-}
-.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button.mg-menu-item__navigation-button--horizontal,
-.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium.mg-menu-item__navigation-button--horizontal {
-  padding-bottom: calc(1rem - 0.3rem);
-}
-.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button.mg-menu-item__navigation-button--vertical,
-.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium.mg-menu-item__navigation-button--vertical {
-  padding-left: calc(3rem - 0.3rem);
-}
-
-.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button,
-.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large {
-  padding: 1rem 4rem;
-  height: 7.1rem;
-}
-.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button,
-.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button ::slotted([slot=label]),
-.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button ::slotted([slot=metadata]),
-.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large,
-.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large ::slotted([slot=label]),
-.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large ::slotted([slot=metadata]) {
-  font-size: calc(var(--font-size) + 0.2rem);
-}
-.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button.mg-menu-item__navigation-button--horizontal,
-.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large.mg-menu-item__navigation-button--horizontal {
-  padding-bottom: calc(1rem - 0.3rem);
-}
-.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button.mg-menu-item__navigation-button--vertical,
-.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large.mg-menu-item__navigation-button--vertical {
-  padding-left: calc(4rem - 0.3rem);
-}
-
-.mg-menu-item__navigation-button {
-  display: flex;
-  align-items: center;
-  column-gap: var(--mg-menu-item-navigation-button-column-gap, 1rem);
-  background-color: unset;
-  border: none;
-  font-family: var(--font-family);
-  font-weight: 400;
-  color: hsl(var(--mg-menu-item-color-hsl, var(--color-dark)));
-  line-height: var(--line-height);
-  text-decoration: none;
-  white-space: nowrap;
-  box-sizing: border-box;
-  cursor: pointer;
-}
-.mg-menu-item__navigation-button:disabled, .mg-menu-item__navigation-button--disabled {
-  cursor: default;
-  opacity: var(--mg-disabled-opacity);
-}
-.mg-menu-item__navigation-button:focus-visible {
-  z-index: 10;
-}
-.mg-menu-item__navigation-button:hover:not(.mg-menu-item__navigation-button--disabled), .mg-menu-item__navigation-button:focus-visible:not(.mg-menu-item__navigation-button--disabled) {
-  background-color: hsl(var(--mg-menu-item-focused-background-color-hsl), 0.1);
-}
-.mg-menu-item__navigation-button.mg-menu-item__navigation-button--active {
-  color: hsl(var(--mg-menu-item-color-active-hsl));
-  font-weight: 600;
-}
-.mg-menu-item__navigation-button.mg-menu-item__navigation-button--active.mg-menu-item__navigation-button--horizontal {
-  border-bottom-color: hsl(var(--mg-menu-item-border-color-active-hsl));
-}
-.mg-menu-item__navigation-button.mg-menu-item__navigation-button--active.mg-menu-item__navigation-button--vertical {
-  border-left-color: hsl(var(--mg-menu-item-border-color-active-hsl));
-}
-.mg-menu-item__navigation-button.mg-menu-item__navigation-button--hidden {
-  display: none;
-}
-.mg-menu-item__navigation-button.mg-menu-item__navigation-button--horizontal {
-  border-bottom: 0.3rem solid transparent;
-}
-.mg-menu-item__navigation-button.mg-menu-item__navigation-button--vertical {
-  border-left: 0.3rem solid transparent;
-}
-
-:host([data-style-direction-vertical][data-level="1"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular {
-  padding-left: calc(1 * 2rem - 0.3rem);
-}
-
-:host([data-level="1"]) .mg-menu-item__collapse-container {
-  z-index: calc(1 * 10);
-}
-
-:host([data-style-direction-vertical][data-level="2"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular {
-  padding-left: calc(2 * 2rem - 0.3rem);
-}
-
-:host([data-level="2"]) .mg-menu-item__collapse-container {
-  z-index: calc(2 * 10);
-}
-
-:host([data-style-direction-vertical][data-level="3"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular {
-  padding-left: calc(3 * 2rem - 0.3rem);
-}
-
-:host([data-level="3"]) .mg-menu-item__collapse-container {
-  z-index: calc(3 * 10);
-}
-
-:host([data-style-direction-vertical][data-level="4"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular {
-  padding-left: calc(4 * 2rem - 0.3rem);
-}
-
-:host([data-level="4"]) .mg-menu-item__collapse-container {
-  z-index: calc(4 * 10);
-}
-
-:host([data-style-direction-vertical][data-level="5"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular {
-  padding-left: calc(5 * 2rem - 0.3rem);
-}
-
-:host([data-level="5"]) .mg-menu-item__collapse-container {
-  z-index: calc(5 * 10);
-}
-
-:host([data-style-direction-vertical][data-level="6"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular {
-  padding-left: calc(6 * 2rem - 0.3rem);
-}
-
-:host([data-level="6"]) .mg-menu-item__collapse-container {
-  z-index: calc(6 * 10);
-}
-
-:host([data-style-direction-vertical][data-level="1"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium {
-  padding-left: calc(1 * 3rem - 0.3rem);
-}
-
-:host([data-level="1"]) .mg-menu-item__collapse-container {
-  z-index: calc(1 * 10);
-}
-
-:host([data-style-direction-vertical][data-level="2"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium {
-  padding-left: calc(2 * 3rem - 0.3rem);
-}
-
-:host([data-level="2"]) .mg-menu-item__collapse-container {
-  z-index: calc(2 * 10);
-}
-
-:host([data-style-direction-vertical][data-level="3"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium {
-  padding-left: calc(3 * 3rem - 0.3rem);
-}
-
-:host([data-level="3"]) .mg-menu-item__collapse-container {
-  z-index: calc(3 * 10);
-}
-
-:host([data-style-direction-vertical][data-level="4"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium {
-  padding-left: calc(4 * 3rem - 0.3rem);
-}
-
-:host([data-level="4"]) .mg-menu-item__collapse-container {
-  z-index: calc(4 * 10);
-}
-
-:host([data-style-direction-vertical][data-level="5"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium {
-  padding-left: calc(5 * 3rem - 0.3rem);
-}
-
-:host([data-level="5"]) .mg-menu-item__collapse-container {
-  z-index: calc(5 * 10);
-}
-
-:host([data-style-direction-vertical][data-level="6"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium {
-  padding-left: calc(6 * 3rem - 0.3rem);
-}
-
-:host([data-level="6"]) .mg-menu-item__collapse-container {
-  z-index: calc(6 * 10);
-}
-
-:host([data-style-direction-vertical][data-level="1"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large {
-  padding-left: calc(1 * 4rem - 0.3rem);
-}
-
-:host([data-level="1"]) .mg-menu-item__collapse-container {
-  z-index: calc(1 * 10);
-}
-
-:host([data-style-direction-vertical][data-level="2"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large {
-  padding-left: calc(2 * 4rem - 0.3rem);
-}
-
-:host([data-level="2"]) .mg-menu-item__collapse-container {
-  z-index: calc(2 * 10);
-}
-
-:host([data-style-direction-vertical][data-level="3"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large {
-  padding-left: calc(3 * 4rem - 0.3rem);
-}
-
-:host([data-level="3"]) .mg-menu-item__collapse-container {
-  z-index: calc(3 * 10);
-}
-
-:host([data-style-direction-vertical][data-level="4"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large {
-  padding-left: calc(4 * 4rem - 0.3rem);
-}
-
-:host([data-level="4"]) .mg-menu-item__collapse-container {
-  z-index: calc(4 * 10);
-}
-
-:host([data-style-direction-vertical][data-level="5"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large {
-  padding-left: calc(5 * 4rem - 0.3rem);
-}
-
-:host([data-level="5"]) .mg-menu-item__collapse-container {
-  z-index: calc(5 * 10);
-}
-
-:host([data-style-direction-vertical][data-level="6"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large {
-  padding-left: calc(6 * 4rem - 0.3rem);
-}
-
-:host([data-level="6"]) .mg-menu-item__collapse-container {
-  z-index: calc(6 * 10);
-}
-
-:host {
-  position: relative;
-  display: flex;
-  --mg-popover-padding-vertical: 0;
-  --mg-popover-padding-horizontal: 0;
-  --mg-popover-max-width: unset;
-}
-
-:host([data-style-direction-vertical]) {
-  flex-direction: column;
-}
-:host([data-style-direction-vertical]) .mg-menu-item__navigation-button {
-  width: 100%;
-}
-:host([data-style-direction-vertical]) .mg-menu-item__collapse-container {
-  left: unset;
-  top: unset;
-  position: unset;
-  width: unset;
-}
-:host([data-style-direction-vertical]) .mg-menu-item-chevron {
-  margin-left: auto;
-}
-
-:host([data-style-direction-horizontal]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level,
-:host([data-overflow-more]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level {
-  background-color: hsl(var(--color-light));
-}
-:host([data-style-direction-horizontal]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level ::slotted(mg-menu),
-:host([data-overflow-more]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level ::slotted(mg-menu) {
-  padding: 1rem 0;
-}
-
-:host([data-overflow-more]) {
-  --mg-menu-item-navigation-button-column-gap: 0;
-}
-:host([data-overflow-more]) .mg-menu-item__navigation-button-chevron {
-  display: none;
-}
-:host([data-overflow-more]) .mg-menu-item__navigation-button-text-content ::slotted([slot=information]) {
-  margin-left: 0;
-}
-:host([data-overflow-more]) ::slotted(mg-menu) {
-  --mg-menu-item-navigation-button-column-gap: 1rem;
-}
-
-.mg-menu-item {
-  max-width: var(--mg-menu-item-navigation-button-max-width);
-}
-.mg-menu-item__collapse-container {
-  width: max-content;
-  z-index: 10;
-}
-.mg-menu-item__navigation-button-center {
-  min-width: 0;
-}
-.mg-menu-item__navigation-button-text-content {
-  width: 100%;
-  display: flex;
-  align-items: center;
-}
-.mg-menu-item__navigation-button-text-content-notification,
-.mg-menu-item__navigation-button-text-content ::slotted([slot=information]) {
-  margin-left: 1rem;
-  font-size: var(--font-size);
-}
-.mg-menu-item__navigation-button-chevron {
-  margin-left: auto;
-  transition: 200ms;
-}
-.mg-menu-item__navigation-button-chevron--rotate.mg-menu-item__navigation-button-chevron {
-  transform: rotate(180deg);
-}
-
-::slotted([slot=label]),
-::slotted([slot=metadata]) {
-  display: block;
-  text-align: left;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-::slotted(*) {
-  display: flex;
-  flex-direction: column;
-}
-
-:host([status=disabled]) {
-  pointer-events: none;
-}
-
-:host([hidden]) {
-  display: none;
-}

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

@@ -1,119 +0,0 @@
-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 { createPage } from "../../../../../utils/stencil.e2e.test.utils";
-import { renderAttributes } from "../../../../../utils/e2e.test.utils";
-import { Direction, sizes } from "../../mg-menu/mg-menu.conf";
-import { Status } from "../mg-menu-item.conf";
-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.href ? 'batman link' : 'batman'}</span>
-    ${slot}
-  </mg-menu-item>
-</mg-menu>
-`;
-describe('mg-menu-item', () => {
-  describe.each([Direction.HORIZONTAL, Direction.VERTICAL])('render', direction => {
-    test('should render whith status', async () => {
-      const html = [Status.ACTIVE, Status.VISIBLE, Status.HIDDEN, Status.DISABLED]
-        .map(status => {
-        const template = [undefined, '#link']
-          .map(href => [true, false].map(submenu => (submenu && href !== undefined ? '' : createHTML({ status, href }, submenu && slotMenuItem, direction))).join(''))
-          .join('');
-        return `<h2>${status}<h2/><div>${template}<div>`;
-      })
-        .join('');
-      const page = await createPage(`<h1>${direction} mg-menu - Status</h1>${html}`);
-      const element = await page.find('mg-menu-item');
-      expect(element).toHaveClass('hydrated');
-      const screenshot = await page.screenshot();
-      expect(screenshot).toMatchImageSnapshot();
-    });
-    test('should render whith slots', async () => {
-      const html = [
-        { label: 'submenu', slot: slotMenuItem },
-        { label: 'image', slot: slotImage },
-        { label: 'information', slot: slotInformation },
-        { label: 'information AND image', slot: slotInformation + slotImage },
-      ]
-        .map(({ label, slot }) => {
-        const template = [true, false]
-          .map(submenu => [true, false]
-          .map(metadata => sizes
-          .map(size => (submenu && label === 'submenu' ? '' : createHTML({ size }, `${metadata ? slotMetadata : ''} ${submenu ? slot + slotMenuItem : slot}`, direction)))
-          .join(''))
-          .join(''))
-          .join('');
-        return `<h2>${label}<h2/><div>${template}<div>`;
-      })
-        .join('');
-      const page = await createPage(`<h1>${direction} mg-menu - Slots</h1>${html}`);
-      const element = await page.find('mg-menu-item');
-      expect(element).toHaveClass('hydrated');
-      const screenshot = await page.screenshot();
-      expect(screenshot).toMatchImageSnapshot();
-    });
-    test.each([true, false])(`should renders direction=${direction}, props expanded=%s`, async (expanded) => {
-      const page = await createPage(createHTML({ expanded }, slotMenuItem, direction));
-      const element = await page.find('mg-menu-item');
-      expect(element).toHaveClass('hydrated');
-      await page.setViewport({ width: 300, height: 200 });
-      const screenshot = await page.screenshot();
-      expect(screenshot).toMatchImageSnapshot();
-    });
-    test('should render content slot', async () => {
-      const page = await createPage(createHTML({ expanded: true }, slotContent, direction));
-      const element = await page.find('mg-menu-item');
-      expect(element).toHaveClass('hydrated');
-      await page.setViewport({ width: 300, height: 200 });
-      const screenshot = await page.screenshot();
-      expect(screenshot).toMatchImageSnapshot();
-    });
-    test.each([[Status.ACTIVE, Status.VISIBLE, Status.HIDDEN, Status.DISABLED]])('shoud manage keyboard navigation', async (status) => {
-      var _a, e_1, _b, _c;
-      const page = await createPage(createHTML({ status }, slotMenuItem, direction));
-      let screenshot = await page.screenshot();
-      expect(screenshot).toMatchImageSnapshot();
-      const element = await page.find('mg-menu-item');
-      expect(element).toHaveClass('hydrated');
-      await page.setViewport({ width: 300, height: 200 });
-      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.waitForChanges();
-          await page.waitForTimeout(200);
-          screenshot = await page.screenshot();
-          expect(screenshot).toMatchImageSnapshot();
-        }
-      }
-      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.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"mg-menu-item.e2e.js","sourceRoot":"","sources":["../../../../../../src/components/molecules/menu/mg-menu-item/test/mg-menu-item.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { KeyInput } from 'puppeteer';\nimport { createPage } from '../../../../../utils/stencil.e2e.test.utils';\nimport { renderAttributes } from '../../../../../utils/e2e.test.utils';\nimport { Direction, sizes } from '../../mg-menu/mg-menu.conf';\nimport { Status } from '../mg-menu-item.conf';\n\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.href ? 'batman link' : 'batman'}</span>\n    ${slot}\n  </mg-menu-item>\n</mg-menu>\n`;\n\ndescribe('mg-menu-item', () => {\n  describe.each([Direction.HORIZONTAL, Direction.VERTICAL])('render', direction => {\n    test('should render whith status', async () => {\n      const html = [Status.ACTIVE, Status.VISIBLE, Status.HIDDEN, Status.DISABLED]\n        .map(status => {\n          const template = [undefined, '#link']\n            .map(href => [true, false].map(submenu => (submenu && href !== undefined ? '' : createHTML({ status, href }, submenu && slotMenuItem, direction))).join(''))\n            .join('');\n          return `<h2>${status}<h2/><div>${template}<div>`;\n        })\n        .join('');\n\n      const page = await createPage(`<h1>${direction} mg-menu - Status</h1>${html}`);\n\n      const element = await page.find('mg-menu-item');\n      expect(element).toHaveClass('hydrated');\n\n      const screenshot = await page.screenshot();\n      expect(screenshot).toMatchImageSnapshot();\n    });\n\n    test('should render whith slots', async () => {\n      const html = [\n        { label: 'submenu', slot: slotMenuItem },\n        { label: 'image', slot: slotImage },\n        { label: 'information', slot: slotInformation },\n        { label: 'information AND image', slot: slotInformation + slotImage },\n      ]\n        .map(({ label, slot }) => {\n          const template = [true, false]\n            .map(submenu =>\n              [true, false]\n                .map(metadata =>\n                  sizes\n                    .map(size => (submenu && label === 'submenu' ? '' : createHTML({ size }, `${metadata ? slotMetadata : ''} ${submenu ? slot + slotMenuItem : slot}`, direction)))\n                    .join(''),\n                )\n                .join(''),\n            )\n            .join('');\n          return `<h2>${label}<h2/><div>${template}<div>`;\n        })\n        .join('');\n\n      const page = await createPage(`<h1>${direction} mg-menu - Slots</h1>${html}`);\n\n      const element = await page.find('mg-menu-item');\n      expect(element).toHaveClass('hydrated');\n\n      const screenshot = await page.screenshot();\n      expect(screenshot).toMatchImageSnapshot();\n    });\n\n    test.each([true, false])(`should renders direction=${direction}, props expanded=%s`, async expanded => {\n      const page = await createPage(createHTML({ expanded }, slotMenuItem, direction));\n\n      const element = await page.find('mg-menu-item');\n      expect(element).toHaveClass('hydrated');\n\n      await page.setViewport({ width: 300, height: 200 });\n\n      const screenshot = await page.screenshot();\n      expect(screenshot).toMatchImageSnapshot();\n    });\n\n    test('should render content slot', async () => {\n      const page = await createPage(createHTML({ expanded: true }, slotContent, direction));\n\n      const element = await page.find('mg-menu-item');\n      expect(element).toHaveClass('hydrated');\n\n      await page.setViewport({ width: 300, height: 200 });\n\n      const screenshot = await page.screenshot();\n      expect(screenshot).toMatchImageSnapshot();\n    });\n\n    test.each([[Status.ACTIVE, Status.VISIBLE, Status.HIDDEN, Status.DISABLED]])('shoud manage keyboard navigation', async status => {\n      const page = await createPage(createHTML({ status }, slotMenuItem, direction));\n      let screenshot = await page.screenshot();\n      expect(screenshot).toMatchImageSnapshot();\n\n      const element = await page.find('mg-menu-item');\n      expect(element).toHaveClass('hydrated');\n\n      await page.setViewport({ width: 300, height: 200 });\n\n      for await (const key of ['Tab', 'Enter']) {\n        await page.keyboard.press(key as unknown as KeyInput);\n        await page.waitForChanges();\n        await page.waitForTimeout(200);\n        screenshot = await page.screenshot();\n        expect(screenshot).toMatchImageSnapshot();\n      }\n    });\n  });\n});\n"]}

package/dist/collection/components/molecules/mg-action-more/mg-action-more.css

@@ -1,39 +0,0 @@
-/**
- * A11Y
- */
-.sr-only {
-  border: 0 !important;
-  clip: rect(1px, 1px, 1px, 1px) !important;
-  -webkit-clip-path: inset(50%) !important;
-  clip-path: inset(50%) !important;
-  height: 1px !important;
-  margin: -1px !important;
-  overflow: hidden !important;
-  padding: 0 !important;
-  position: absolute !important;
-  width: 1px !important;
-  white-space: nowrap !important;
-}
-
-*:focus:not(:focus-visible) {
-  outline: none;
-}
-
-@media (prefers-reduced-motion) {
-  .mg-a11y-animation {
-    animation: none !important;
-    transition: none !important;
-  }
-}
-:host {
-  --mg-popover-padding-vertical: 1rem;
-  --mg-popover-padding-horizontal: 0;
-  --mg-popover-max-width: unset;
-}
-
-.mg-action-more__chevron {
-  transition: 200ms;
-}
-.mg-action-more__chevron--rotate.mg-action-more__chevron {
-  transform: rotate(180deg);
-}