@siemens/ix 3.0.0-alpha.0 → 3.0.0-alpha.1

package/dist/collection/components/menu-category/menu-category.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-category.js","sourceRoot":"","sources":["../../../src/components/menu-category/menu-category.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport {\n  Component,\n  Element,\n  h,\n  Host,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Listen,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { closestIxMenu } from '../utils/application-layout/context';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { createEnterLeaveDebounce } from './enter-leave';\nimport { iconChevronDownSmall } from '@siemens/ix-icons/icons';\n\nconst DefaultIxMenuItemHeight = 40;\nconst DefaultAnimationTimeout = 150;\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-menu-category',\n  styleUrl: 'menu-category.scss',\n  shadow: true,\n})\nexport class MenuCategory {\n  @Element() hostElement!: HTMLIxMenuCategoryElement;\n\n  /**\n   * Display name of the category\n   */\n  @Prop() label?: string;\n\n  /**\n   * Icon of the category\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Show notification count on the category\n   */\n  @Prop() notifications?: number;\n\n  /** @internal */\n  // eslint-disable-next-line @stencil-community/decorators-style\n  @Event({ bubbles: true, cancelable: true })\n  closeOtherCategories!: EventEmitter;\n\n  @State() menuExpand = false;\n  @State() showItems = false;\n  @State() showDropdown = false;\n  @State() nestedItems: HTMLIxMenuItemElement[] = [];\n\n  private observer?: MutationObserver;\n  private menuItemsContainer?: HTMLDivElement;\n  private ixMenu?: HTMLIxMenuElement;\n\n  private enterLeaveDebounce = createEnterLeaveDebounce(\n    () => {\n      this.onPointerEnter();\n    },\n    () => {\n      this.onPointerLeave();\n    }\n  );\n\n  private isNestedItemActive() {\n    return this.getNestedItems().some((item) => item.active);\n  }\n\n  private getNestedItems() {\n    return Array.from(\n      this.hostElement.querySelectorAll(':scope ix-menu-item')\n    ) as HTMLIxMenuItemElement[];\n  }\n\n  private getNestedItemsHeight() {\n    const items = this.getNestedItems();\n\n    return items.length * DefaultIxMenuItemHeight;\n  }\n\n  private onExpandCategory(showItems: boolean) {\n    if (showItems) {\n      this.animateFadeIn();\n    } else {\n      this.animateFadeOut();\n    }\n  }\n\n  private animateFadeOut() {\n    const slotHideThresholdMs = 25;\n    anime({\n      targets: this.menuItemsContainer,\n      duration: DefaultAnimationTimeout,\n      easing: 'easeInSine',\n      opacity: [1, 0],\n      maxHeight: [this.getNestedItemsHeight() + DefaultIxMenuItemHeight, 0],\n      complete: () => {\n        setTimeout(() => {\n          this.showItems = false;\n          this.showDropdown = false;\n        }, DefaultAnimationTimeout + slotHideThresholdMs);\n      },\n    });\n  }\n\n  private animateFadeIn() {\n    anime({\n      targets: this.menuItemsContainer,\n      duration: DefaultAnimationTimeout,\n      easing: 'easeInSine',\n      opacity: [0, 1],\n      maxHeight: [0, this.getNestedItemsHeight() + DefaultIxMenuItemHeight],\n      begin: () => {\n        this.showItems = true;\n        this.showDropdown = false;\n      },\n    });\n  }\n\n  private onPointerEnter() {\n    if (this.ixMenu?.expand) {\n      return;\n    }\n    this.closeOtherCategories.emit();\n    this.showDropdown = true;\n  }\n\n  @Listen('closeOtherCategories', { target: 'window' })\n  private onPointerLeave() {\n    this.showDropdown = false;\n  }\n\n  private onCategoryClick(e: MouseEvent) {\n    e.stopPropagation();\n    if (this.ixMenu?.expand) {\n      this.onExpandCategory(!this.showItems);\n      return;\n    }\n  }\n\n  private onNestedItemsChanged(mutations?: MutationRecord[]) {\n    const oldNestedItemsLength = this.nestedItems.length;\n    this.nestedItems = this.getNestedItems();\n\n    if (\n      this.showItems &&\n      this.menuItemsContainer &&\n      oldNestedItemsLength !== this.nestedItems.length\n    ) {\n      this.menuItemsContainer.style.maxHeight = `${\n        this.getNestedItemsHeight() + DefaultIxMenuItemHeight\n      }px`;\n    }\n\n    if (!this.menuExpand || this.showItems || !mutations) {\n      return;\n    }\n\n    for (const mutation of mutations ?? []) {\n      if (\n        mutation.attributeName === 'class' &&\n        mutation.target instanceof HTMLElement &&\n        mutation.target.classList.contains('active')\n      ) {\n        this.showItems = true;\n        this.onExpandCategory(true);\n        return;\n      }\n    }\n  }\n\n  private isCategoryItemListVisible() {\n    return this.menuExpand && (this.showItems || this.isNestedItemActive());\n  }\n\n  componentWillLoad() {\n    const closestMenu = closestIxMenu(this.hostElement);\n    if (!closestMenu) {\n      throw Error('ix-menu-category can only be used as a child of ix-menu');\n    }\n    this.ixMenu = closestMenu;\n\n    this.menuExpand = this.ixMenu.expand;\n    this.showItems = this.isCategoryItemListVisible();\n  }\n\n  componentDidLoad() {\n    this.observer = createMutationObserver((mutations: MutationRecord[]) =>\n      this.onNestedItemsChanged(mutations)\n    );\n\n    this.observer.observe(this.hostElement, {\n      attributes: true,\n      childList: true,\n      subtree: true,\n    });\n\n    requestAnimationFrame(() => {\n      this.onNestedItemsChanged();\n    });\n\n    this.ixMenu?.addEventListener(\n      'expandChange',\n      ({ detail: menuExpand }: CustomEvent<boolean>) => {\n        this.menuExpand = menuExpand;\n        if (!menuExpand) {\n          this.clearMenuItemStyles();\n        }\n        this.showItems = this.isCategoryItemListVisible();\n      }\n    );\n  }\n\n  clearMenuItemStyles() {\n    this.menuItemsContainer?.style.removeProperty('max-height');\n    this.menuItemsContainer?.style.removeProperty('opacity');\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          expanded: this.showItems,\n        }}\n        onPointerEnter={() => {\n          this.enterLeaveDebounce.onEnter();\n        }}\n        onPointerLeave={(event: PointerEvent) => {\n          if (event.pointerType === 'touch') {\n            return;\n          }\n          this.enterLeaveDebounce.onLeave();\n        }}\n      >\n        <ix-menu-item\n          class={'category-parent'}\n          active={this.isNestedItemActive()}\n          notifications={this.notifications}\n          icon={this.icon}\n          onClick={(e) => this.onCategoryClick(e)}\n          onFocus={() => this.onPointerEnter()}\n          isCategory\n        >\n          <div class=\"category\">\n            <div class=\"category-text\">{this.label}</div>\n            <ix-icon\n              name={iconChevronDownSmall}\n              class={{\n                'category-chevron': true,\n                'category-chevron--open': this.showItems,\n              }}\n            ></ix-icon>\n          </div>\n        </ix-menu-item>\n        <div\n          ref={(ref) => (this.menuItemsContainer = ref!)}\n          class={{\n            'menu-items': true,\n            'menu-items--expanded': this.showItems,\n            'menu-items--collapsed': !this.showItems,\n          }}\n        >\n          {this.showItems ? <slot></slot> : null}\n        </div>\n        <ix-dropdown\n          closeBehavior={'both'}\n          show={this.showDropdown}\n          onShowChanged={({ detail: dropdownShown }: CustomEvent<boolean>) => {\n            this.showDropdown = dropdownShown;\n          }}\n          class={'category-dropdown'}\n          anchor={this.hostElement}\n          placement=\"right-start\"\n          offset={{\n            mainAxis: 3,\n          }}\n          onClick={(e) => {\n            if (e.target instanceof HTMLElement) {\n              if (e.target.tagName === 'IX-MENU-ITEM') {\n                this.showDropdown = false;\n              } else {\n                e.preventDefault();\n              }\n            }\n          }}\n        >\n          <ix-dropdown-item class={'category-dropdown-header'}>\n            <ix-typography format=\"label\" bold textColor=\"std\">\n              {this.label}\n            </ix-typography>\n          </ix-dropdown-item>\n          <ix-divider></ix-divider>\n          <slot></slot>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/menu-category/test/menu-category.ct.js

@@ -0,0 +1,274 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { expect } from "@playwright/test";
+import { regressionTest, test } from "../../../tests/utils/test/index";
+regressionTest('renders', async ({ mount, page }) => {
+    await mount(`
+    <ix-application>
+      <ix-menu>
+        <ix-menu-category label="Category label">
+          <ix-menu-item>Test</ix-menu-item>
+          <ix-menu-item>Test</ix-menu-item>
+        </ix-menu-category>
+      </ix-menu>
+    </ix-application>
+    `);
+    const element = page.locator('ix-menu-category');
+    await expect(element).toHaveClass('hydrated');
+});
+regressionTest('should collapse by click', async ({ mount, page }) => {
+    await mount(`
+  <ix-basic-navigation>
+    <ix-menu>
+      <ix-menu-category label="Category label">
+        <ix-menu-item>Test</ix-menu-item>
+        <ix-menu-item>Test 2</ix-menu-item>
+      </ix-menu-category>
+    </ix-menu>
+  </ix-basic-navigation>
+  `);
+    const categoryItem = page.locator('ix-menu-category');
+    const app = page.locator('ix-basic-navigation');
+    const expandMenuButton = page
+        .locator('ix-menu')
+        .locator('ix-menu-expand-icon');
+    await app.evaluate((menu) => (menu.breakpoints = ['md']));
+    await categoryItem.click();
+    const item = page.locator('ix-menu-item').getByText('Test 2');
+    await item.evaluate((item) => (item.active = true));
+    await expect(item).toHaveClass(/active/);
+    await item.click();
+    await expandMenuButton.click();
+    await expect(categoryItem.locator('.menu-items')).toHaveClass(/menu-items--expanded/);
+    await categoryItem.locator('.category-parent').click();
+    await expect(categoryItem.locator('.menu-items')).not.toHaveClass(/menu-items--expanded/);
+});
+regressionTest('should expand items', async ({ mount, page }) => {
+    await mount(`
+  <ix-basic-navigation>
+    <ix-menu>
+      <ix-menu-category label="Category label">
+        <ix-menu-item>Test Item 1</ix-menu-item>
+        <ix-menu-item>Test Item 2</ix-menu-item>
+      </ix-menu-category>
+    </ix-menu>
+  </ix-basic-navigation>
+  `);
+    const menu = page.locator('ix-menu');
+    await page
+        .locator('ix-basic-navigation')
+        .evaluate((menu) => (menu.breakpoints = ['md']));
+    const menuButton = menu.locator('ix-menu-expand-icon');
+    await menuButton.click();
+    const menuCategory = page.locator('ix-menu-category');
+    await menuCategory.click();
+    await expect(menuCategory.locator('.menu-items')).toHaveClass('menu-items menu-items--expanded');
+    const dropdown = menuCategory.locator('ix-dropdown');
+    await expect(dropdown).not.toBeVisible();
+});
+regressionTest('should show items as dropdown', async ({ mount, page }) => {
+    await mount(`
+  <ix-basic-navigation>
+    <ix-menu>
+      <ix-menu-category label="Category label">
+        <ix-menu-item>Test Item 1</ix-menu-item>
+        <ix-menu-item>Test Item 2</ix-menu-item>
+      </ix-menu-category>
+    </ix-menu>
+  </ix-basic-navigation>
+  `);
+    await page.waitForSelector('ix-menu');
+    await page
+        .locator('ix-basic-navigation')
+        .evaluate((menu) => (menu.breakpoints = ['md']));
+    const menuCategory = page.locator('ix-menu-category');
+    await menuCategory.hover();
+    const dropdown = menuCategory.locator('ix-dropdown');
+    await expect(dropdown).toBeVisible();
+    await expect(menuCategory.locator('.menu-items')).toHaveClass('menu-items menu-items--collapsed');
+    const dropdownHeader = dropdown.locator('ix-dropdown-item');
+    await expect(dropdownHeader).toHaveText('Category label');
+    const itemOne = page.locator('ix-menu-item').nth(0);
+    const itemTwo = page.locator('ix-menu-item').nth(1);
+    await expect(itemOne).toBeVisible();
+    await expect(itemTwo).toBeVisible();
+});
+regressionTest('should collapse category after collapse menu', async ({ mount, page }) => {
+    await mount(`
+    <ix-basic-navigation>
+      <ix-menu>
+        <ix-menu-category label="Category label">
+          <ix-menu-item>Test Item 1</ix-menu-item>
+          <ix-menu-item>Test Item 2</ix-menu-item>
+        </ix-menu-category>
+      </ix-menu>
+    </ix-basic-navigation>
+  `);
+    await page.waitForSelector('ix-menu');
+    const menu = page.locator('ix-menu');
+    await page
+        .locator('ix-basic-navigation')
+        .evaluate((menu) => (menu.breakpoints = ['md']));
+    const menuButton = menu.locator('ix-menu-expand-icon');
+    await menuButton.click();
+    const menuCategory = page.locator('ix-menu-category');
+    await menuCategory.click();
+    await expect(menuCategory.locator('.menu-items')).toHaveClass('menu-items menu-items--expanded');
+    await menuButton.click();
+    await expect(menuCategory.locator('.menu-items')).toHaveClass('menu-items menu-items--collapsed');
+});
+regressionTest('should hide menu-items when collapsed', async ({ mount, page }) => {
+    await mount(`
+    <ix-basic-navigation>
+      <ix-menu>
+        <ix-menu-category label="Category label">
+          <ix-menu-item>Test Item 1</ix-menu-item>
+          <ix-menu-item>Test Item 2</ix-menu-item>
+        </ix-menu-category>
+      </ix-menu>
+    </ix-basic-navigation>
+  `);
+    await page.waitForSelector('ix-menu');
+    const menu = page.locator('ix-menu');
+    await page
+        .locator('ix-basic-navigation')
+        .evaluate((menu) => (menu.breakpoints = ['md']));
+    const menuButton = menu.locator('ix-menu-expand-icon');
+    await menuButton.click();
+    const menuCategory = page.locator('ix-menu-category');
+    await expect(menuCategory.locator('.menu-items')).toHaveClass('menu-items menu-items--collapsed');
+    await expect(menuCategory.locator('.menu-items')).toBeHidden();
+});
+regressionTest('should open category when collapsed initially and active', async ({ mount, page }) => {
+    await mount(`
+    <ix-basic-navigation>
+      <ix-menu>
+        <ix-menu-category label="Category label">
+          <ix-menu-item active="true">Test Item 1</ix-menu-item>
+          <ix-menu-item>Test Item 2</ix-menu-item>
+        </ix-menu-category>
+      </ix-menu>
+    </ix-basic-navigation>
+  `);
+    await page.waitForSelector('ix-menu');
+    const menu = page.locator('ix-menu');
+    await page
+        .locator('ix-basic-navigation')
+        .evaluate((menu) => (menu.breakpoints = ['md']));
+    const menuButton = menu.locator('ix-menu-expand-icon');
+    await menuButton.click();
+    const menuCategory = page.locator('ix-menu-category');
+    await expect(menuCategory.locator('.menu-items')).toHaveClass('menu-items menu-items--expanded');
+    await menuCategory.locator('.category-parent').click();
+    await expect(menuCategory.locator('.menu-items')).toHaveClass(/menu-items/);
+    await menuButton.click();
+    await menuButton.click();
+    await expect(menuCategory.locator('.menu-items')).toHaveClass('menu-items menu-items--expanded');
+});
+regressionTest('do not show tooltip', async ({ mount, page }) => {
+    await mount(`
+    <ix-application>
+      <ix-menu>
+        <ix-menu-category label="Category label">
+          <ix-menu-item>Test</ix-menu-item>
+          <ix-menu-item>Test</ix-menu-item>
+        </ix-menu-category>
+      </ix-menu>
+    </ix-application>
+    `);
+    const categoryElement = page.locator('ix-menu-category');
+    await expect(categoryElement).toHaveClass(/hydrated/);
+    await categoryElement.hover();
+    await page.waitForTimeout(1500);
+    const tooltip = categoryElement
+        .locator('ix-menu-item.category-parent')
+        .locator('ix-tooltip');
+    await expect(tooltip).not.toBeVisible();
+});
+regressionTest('collapse after category blur', async ({ mount, page }) => {
+    await mount(`
+    <ix-application>
+      <ix-menu>
+        <ix-menu-item label="Other"></ix-menu-item>
+        <ix-menu-category label="Category label">
+          <ix-menu-item>Test</ix-menu-item>
+          <ix-menu-item>Test</ix-menu-item>
+        </ix-menu-category>
+      </ix-menu>
+    </ix-application>
+    `);
+    const menuItem = page.locator('ix-menu-item').filter({
+        hasText: 'Other',
+    });
+    const categoryElement = page.locator('ix-menu-category');
+    await expect(categoryElement).toHaveClass(/hydrated/);
+    await categoryElement.hover();
+    const dropdown = categoryElement.locator('ix-dropdown');
+    await expect(dropdown).toBeVisible();
+    await categoryElement.hover();
+    await menuItem.hover();
+    await expect(dropdown).not.toBeVisible();
+});
+regressionTest('show category if item are focused', async ({ mount, page }) => {
+    await mount(`
+    <ix-application>
+      <ix-menu>
+        <ix-menu-category label="Category label">
+          <ix-menu-item>Test</ix-menu-item>
+          <ix-menu-item>Test</ix-menu-item>
+        </ix-menu-category>
+      </ix-menu>
+    </ix-application>
+    `);
+    const categoryElement = page.locator('ix-menu-category');
+    await expect(categoryElement).toHaveClass(/hydrated/);
+    // Navigate to category
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    const dropdown = categoryElement.locator('ix-dropdown');
+    await expect(dropdown).toBeVisible();
+});
+test('should adjust height when items are added dynamically', async ({ mount, page, }) => {
+    await mount(`
+    <ix-application>
+      <ix-menu>
+        <ix-menu-category label="Category label">
+          <ix-menu-item>Test</ix-menu-item>
+          <ix-menu-item>Test</ix-menu-item>
+        </ix-menu-category>
+      </ix-menu>
+    </ix-application>
+  `);
+    const menuCategory = page.locator('ix-menu-category');
+    await page.locator('ix-menu-expand-icon').click();
+    await menuCategory.click();
+    // wait for dropdown items to be visible
+    await page.waitForTimeout(300);
+    const initialHeight = await menuCategory
+        .boundingBox()
+        .then((box) => box === null || box === void 0 ? void 0 : box.height);
+    await page.evaluate(() => {
+        const menuCategory = document.querySelector('ix-menu-category');
+        const newMenuItem1 = document.createElement('ix-menu-item');
+        const newMenuItem2 = document.createElement('ix-menu-item');
+        newMenuItem1.textContent = 'Dynamically Added';
+        newMenuItem2.textContent = 'Dynamically Added';
+        menuCategory === null || menuCategory === void 0 ? void 0 : menuCategory.appendChild(newMenuItem1);
+        menuCategory === null || menuCategory === void 0 ? void 0 : menuCategory.appendChild(newMenuItem2);
+    });
+    // wait for new items to be visible
+    await page.waitForTimeout(300);
+    const newHeight = await menuCategory.boundingBox().then((box) => box === null || box === void 0 ? void 0 : box.height);
+    expect(initialHeight).toBeDefined();
+    expect(newHeight).toBeDefined();
+    expect(initialHeight).toBe(136);
+    expect(newHeight).toBe(216);
+});
+//# sourceMappingURL=menu-category.ct.js.map

package/dist/collection/components/menu-category/test/menu-category.ct.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-category.ct.js","sourceRoot":"","sources":["../../../../src/components/menu-category/test/menu-category.ct.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { expect } from '@playwright/test';\nimport { regressionTest, test } from '@utils/test';\n\nregressionTest('renders', async ({ mount, page }) => {\n  await mount(`\n    <ix-application>\n      <ix-menu>\n        <ix-menu-category label=\"Category label\">\n          <ix-menu-item>Test</ix-menu-item>\n          <ix-menu-item>Test</ix-menu-item>\n        </ix-menu-category>\n      </ix-menu>\n    </ix-application>\n    `);\n  const element = page.locator('ix-menu-category');\n  await expect(element).toHaveClass('hydrated');\n});\n\nregressionTest('should collapse by click', async ({ mount, page }) => {\n  await mount(`\n  <ix-basic-navigation>\n    <ix-menu>\n      <ix-menu-category label=\"Category label\">\n        <ix-menu-item>Test</ix-menu-item>\n        <ix-menu-item>Test 2</ix-menu-item>\n      </ix-menu-category>\n    </ix-menu>\n  </ix-basic-navigation>\n  `);\n  const categoryItem = page.locator('ix-menu-category');\n  const app = page.locator('ix-basic-navigation');\n  const expandMenuButton = page\n    .locator('ix-menu')\n    .locator('ix-menu-expand-icon');\n\n  await app.evaluate(\n    (menu: HTMLIxBasicNavigationElement) => (menu.breakpoints = ['md'])\n  );\n\n  await categoryItem.click();\n\n  const item = page.locator('ix-menu-item').getByText('Test 2');\n  await item.evaluate((item: HTMLIxMenuItemElement) => (item.active = true));\n  await expect(item).toHaveClass(/active/);\n\n  await item.click();\n  await expandMenuButton.click();\n\n  await expect(categoryItem.locator('.menu-items')).toHaveClass(\n    /menu-items--expanded/\n  );\n\n  await categoryItem.locator('.category-parent').click();\n\n  await expect(categoryItem.locator('.menu-items')).not.toHaveClass(\n    /menu-items--expanded/\n  );\n});\n\nregressionTest('should expand items', async ({ mount, page }) => {\n  await mount(`\n  <ix-basic-navigation>\n    <ix-menu>\n      <ix-menu-category label=\"Category label\">\n        <ix-menu-item>Test Item 1</ix-menu-item>\n        <ix-menu-item>Test Item 2</ix-menu-item>\n      </ix-menu-category>\n    </ix-menu>\n  </ix-basic-navigation>\n  `);\n\n  const menu = page.locator('ix-menu');\n  await page\n    .locator('ix-basic-navigation')\n    .evaluate(\n      (menu: HTMLIxBasicNavigationElement) => (menu.breakpoints = ['md'])\n    );\n\n  const menuButton = menu.locator('ix-menu-expand-icon');\n  await menuButton.click();\n  const menuCategory = page.locator('ix-menu-category');\n  await menuCategory.click();\n\n  await expect(menuCategory.locator('.menu-items')).toHaveClass(\n    'menu-items menu-items--expanded'\n  );\n  const dropdown = menuCategory.locator('ix-dropdown');\n  await expect(dropdown).not.toBeVisible();\n});\n\nregressionTest('should show items as dropdown', async ({ mount, page }) => {\n  await mount(`\n  <ix-basic-navigation>\n    <ix-menu>\n      <ix-menu-category label=\"Category label\">\n        <ix-menu-item>Test Item 1</ix-menu-item>\n        <ix-menu-item>Test Item 2</ix-menu-item>\n      </ix-menu-category>\n    </ix-menu>\n  </ix-basic-navigation>\n  `);\n\n  await page.waitForSelector('ix-menu');\n  await page\n    .locator('ix-basic-navigation')\n    .evaluate(\n      (menu: HTMLIxBasicNavigationElement) => (menu.breakpoints = ['md'])\n    );\n\n  const menuCategory = page.locator('ix-menu-category');\n  await menuCategory.hover();\n\n  const dropdown = menuCategory.locator('ix-dropdown');\n  await expect(dropdown).toBeVisible();\n  await expect(menuCategory.locator('.menu-items')).toHaveClass(\n    'menu-items menu-items--collapsed'\n  );\n\n  const dropdownHeader = dropdown.locator('ix-dropdown-item');\n  await expect(dropdownHeader).toHaveText('Category label');\n\n  const itemOne = page.locator('ix-menu-item').nth(0);\n  const itemTwo = page.locator('ix-menu-item').nth(1);\n\n  await expect(itemOne).toBeVisible();\n  await expect(itemTwo).toBeVisible();\n});\n\nregressionTest(\n  'should collapse category after collapse menu',\n  async ({ mount, page }) => {\n    await mount(`\n    <ix-basic-navigation>\n      <ix-menu>\n        <ix-menu-category label=\"Category label\">\n          <ix-menu-item>Test Item 1</ix-menu-item>\n          <ix-menu-item>Test Item 2</ix-menu-item>\n        </ix-menu-category>\n      </ix-menu>\n    </ix-basic-navigation>\n  `);\n\n    await page.waitForSelector('ix-menu');\n    const menu = page.locator('ix-menu');\n    await page\n      .locator('ix-basic-navigation')\n      .evaluate(\n        (menu: HTMLIxBasicNavigationElement) => (menu.breakpoints = ['md'])\n      );\n\n    const menuButton = menu.locator('ix-menu-expand-icon');\n    await menuButton.click();\n\n    const menuCategory = page.locator('ix-menu-category');\n    await menuCategory.click();\n\n    await expect(menuCategory.locator('.menu-items')).toHaveClass(\n      'menu-items menu-items--expanded'\n    );\n\n    await menuButton.click();\n    await expect(menuCategory.locator('.menu-items')).toHaveClass(\n      'menu-items menu-items--collapsed'\n    );\n  }\n);\n\nregressionTest(\n  'should hide menu-items when collapsed',\n  async ({ mount, page }) => {\n    await mount(`\n    <ix-basic-navigation>\n      <ix-menu>\n        <ix-menu-category label=\"Category label\">\n          <ix-menu-item>Test Item 1</ix-menu-item>\n          <ix-menu-item>Test Item 2</ix-menu-item>\n        </ix-menu-category>\n      </ix-menu>\n    </ix-basic-navigation>\n  `);\n\n    await page.waitForSelector('ix-menu');\n    const menu = page.locator('ix-menu');\n    await page\n      .locator('ix-basic-navigation')\n      .evaluate(\n        (menu: HTMLIxBasicNavigationElement) => (menu.breakpoints = ['md'])\n      );\n\n    const menuButton = menu.locator('ix-menu-expand-icon');\n    await menuButton.click();\n\n    const menuCategory = page.locator('ix-menu-category');\n\n    await expect(menuCategory.locator('.menu-items')).toHaveClass(\n      'menu-items menu-items--collapsed'\n    );\n    await expect(menuCategory.locator('.menu-items')).toBeHidden();\n  }\n);\n\nregressionTest(\n  'should open category when collapsed initially and active',\n  async ({ mount, page }) => {\n    await mount(`\n    <ix-basic-navigation>\n      <ix-menu>\n        <ix-menu-category label=\"Category label\">\n          <ix-menu-item active=\"true\">Test Item 1</ix-menu-item>\n          <ix-menu-item>Test Item 2</ix-menu-item>\n        </ix-menu-category>\n      </ix-menu>\n    </ix-basic-navigation>\n  `);\n\n    await page.waitForSelector('ix-menu');\n    const menu = page.locator('ix-menu');\n    await page\n      .locator('ix-basic-navigation')\n      .evaluate(\n        (menu: HTMLIxBasicNavigationElement) => (menu.breakpoints = ['md'])\n      );\n\n    const menuButton = menu.locator('ix-menu-expand-icon');\n    await menuButton.click();\n\n    const menuCategory = page.locator('ix-menu-category');\n    await expect(menuCategory.locator('.menu-items')).toHaveClass(\n      'menu-items menu-items--expanded'\n    );\n\n    await menuCategory.locator('.category-parent').click();\n    await expect(menuCategory.locator('.menu-items')).toHaveClass(/menu-items/);\n    await menuButton.click();\n    await menuButton.click();\n\n    await expect(menuCategory.locator('.menu-items')).toHaveClass(\n      'menu-items menu-items--expanded'\n    );\n  }\n);\n\nregressionTest('do not show tooltip', async ({ mount, page }) => {\n  await mount(`\n    <ix-application>\n      <ix-menu>\n        <ix-menu-category label=\"Category label\">\n          <ix-menu-item>Test</ix-menu-item>\n          <ix-menu-item>Test</ix-menu-item>\n        </ix-menu-category>\n      </ix-menu>\n    </ix-application>\n    `);\n  const categoryElement = page.locator('ix-menu-category');\n  await expect(categoryElement).toHaveClass(/hydrated/);\n\n  await categoryElement.hover();\n  await page.waitForTimeout(1500);\n\n  const tooltip = categoryElement\n    .locator('ix-menu-item.category-parent')\n    .locator('ix-tooltip');\n\n  await expect(tooltip).not.toBeVisible();\n});\n\nregressionTest('collapse after category blur', async ({ mount, page }) => {\n  await mount(`\n    <ix-application>\n      <ix-menu>\n        <ix-menu-item label=\"Other\"></ix-menu-item>\n        <ix-menu-category label=\"Category label\">\n          <ix-menu-item>Test</ix-menu-item>\n          <ix-menu-item>Test</ix-menu-item>\n        </ix-menu-category>\n      </ix-menu>\n    </ix-application>\n    `);\n  const menuItem = page.locator('ix-menu-item').filter({\n    hasText: 'Other',\n  });\n  const categoryElement = page.locator('ix-menu-category');\n  await expect(categoryElement).toHaveClass(/hydrated/);\n\n  await categoryElement.hover();\n\n  const dropdown = categoryElement.locator('ix-dropdown');\n  await expect(dropdown).toBeVisible();\n\n  await categoryElement.hover();\n  await menuItem.hover();\n\n  await expect(dropdown).not.toBeVisible();\n});\n\nregressionTest('show category if item are focused', async ({ mount, page }) => {\n  await mount(`\n    <ix-application>\n      <ix-menu>\n        <ix-menu-category label=\"Category label\">\n          <ix-menu-item>Test</ix-menu-item>\n          <ix-menu-item>Test</ix-menu-item>\n        </ix-menu-category>\n      </ix-menu>\n    </ix-application>\n    `);\n  const categoryElement = page.locator('ix-menu-category');\n  await expect(categoryElement).toHaveClass(/hydrated/);\n\n  // Navigate to category\n  await page.keyboard.press('Tab');\n  await page.keyboard.press('Tab');\n  await page.keyboard.press('Tab');\n\n  const dropdown = categoryElement.locator('ix-dropdown');\n  await expect(dropdown).toBeVisible();\n});\n\ntest('should adjust height when items are added dynamically', async ({\n  mount,\n  page,\n}) => {\n  await mount(`\n    <ix-application>\n      <ix-menu>\n        <ix-menu-category label=\"Category label\">\n          <ix-menu-item>Test</ix-menu-item>\n          <ix-menu-item>Test</ix-menu-item>\n        </ix-menu-category>\n      </ix-menu>\n    </ix-application>\n  `);\n\n  const menuCategory = page.locator('ix-menu-category');\n\n  await page.locator('ix-menu-expand-icon').click();\n  await menuCategory.click();\n\n  // wait for dropdown items to be visible\n  await page.waitForTimeout(300);\n\n  const initialHeight = await menuCategory\n    .boundingBox()\n    .then((box) => box?.height);\n\n  await page.evaluate(() => {\n    const menuCategory = document.querySelector('ix-menu-category');\n\n    const newMenuItem1 = document.createElement('ix-menu-item');\n    const newMenuItem2 = document.createElement('ix-menu-item');\n\n    newMenuItem1.textContent = 'Dynamically Added';\n    newMenuItem2.textContent = 'Dynamically Added';\n\n    menuCategory?.appendChild(newMenuItem1);\n    menuCategory?.appendChild(newMenuItem2);\n  });\n\n  // wait for new items to be visible\n  await page.waitForTimeout(300);\n\n  const newHeight = await menuCategory.boundingBox().then((box) => box?.height);\n\n  expect(initialHeight).toBeDefined();\n  expect(newHeight).toBeDefined();\n  expect(initialHeight).toBe(136);\n  expect(newHeight).toBe(216);\n});\n"]}

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

@@ -0,0 +1,187 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/* Dimensions */
+/* Font sizes */
+/* Line heights */
+/* Animation timings */
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+:host {
+  position: relative;
+  display: block;
+  cursor: pointer;
+  height: var(--ix-menu-item-height, 3rem);
+  min-height: var(--ix-menu-item-height, 3rem);
+  max-height: var(--ix-menu-item-height, 3rem);
+}
+:host .tab {
+  all: unset;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  align-items: center;
+  height: var(--ix-menu-item-height, 3rem);
+  width: 100%;
+  z-index: 500;
+  padding-left: 0.875rem;
+}
+:host .tab:not(.disabled):not(:disabled).hover, :host .tab:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-ghost--background--hover);
+}
+:host .tab:not(.disabled):not(:disabled).active, :host .tab:not(.disabled):not(:disabled):active {
+  background-color: var(--theme-ghost--background--active);
+}
+:host .tab-icon {
+  color: var(--theme-nav-item-primary-icon--color);
+  position: relative;
+  pointer-events: none;
+}
+:host .tab:focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: -1px;
+}
+:host .notification {
+  display: inline-flex;
+  position: absolute;
+  top: 0.25rem;
+  left: 1.5rem;
+}
+:host .notification .pill {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  height: 0.5rem;
+  min-width: 1rem;
+  position: relative;
+  border-radius: 6.25rem;
+  background-color: var(--theme-color-primary);
+  font-size: 0.75rem;
+  font-weight: bold;
+  line-height: 1;
+  font-family: Siemens Sans, Arial, sans-serif;
+  color: var(--theme-color-primary--contrast);
+  padding: 0.25rem;
+}
+:host .tab-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--theme-nav-item-primary--color);
+  margin: 0 1rem 0 1.25rem;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  width: 100%;
+}
+
+:host(.active) .tab,
+:host(.selected) .tab {
+  background-color: var(--theme-nav-item-primary--background--selected);
+}
+:host(.active) .tab::before,
+:host(.selected) .tab::before {
+  content: "";
+  background-color: var(--theme-nav-item-primary--border-color--selected);
+  height: var(--ix-menu-item-height, 3rem);
+  width: 0.25rem;
+  left: 0;
+  position: absolute;
+}
+:host(.active) .tab > .glyph,
+:host(.selected) .tab > .glyph {
+  color: var(--theme-nav-item-primary-icon--color--selected);
+}
+
+:host(.disabled) {
+  color: var(--theme-color-weak-text);
+  pointer-events: none;
+  cursor: default;
+}
+:host(.disabled) .tab > .tab-icon {
+  color: var(--theme-color-weak-text);
+}
+:host(.disabled) .tab-text {
+  color: var(--theme-color-weak-text);
+}
+
+:host(.bottom-tab),
+:host([slot=bottom]) {
+  min-height: 2.25rem;
+  height: 2.25rem;
+  max-height: 2.25rem;
+}
+:host(.bottom-tab) .tab,
+:host([slot=bottom]) .tab {
+  height: 2.25rem;
+}
+:host(.bottom-tab) .tab::before,
+:host([slot=bottom]) .tab::before {
+  height: 2.25rem;
+  background-color: transparent;
+}
+:host(.bottom-tab).active:hover, :host(.bottom-tab).selected:hover,
+:host([slot=bottom]).active:hover,
+:host([slot=bottom]).selected:hover {
+  background-color: var(--theme-nav-item-secondary--background--selected);
+}
+:host(.bottom-tab).active:active, :host(.bottom-tab).selected:active,
+:host([slot=bottom]).active:active,
+:host([slot=bottom]).selected:active {
+  background-color: var(--theme-nav-item-secondary--background--selected);
+}
+
+:host(.bottom-tab.active) .tab,
+:host(.bottom-tab.selected) .tab,
+:host(.active[slot=bottom]) .tab,
+:host(.selected[slot=bottom]) .tab {
+  background-color: var(--theme-nav-item-secondary--background--selected);
+}
+
+:host(.tab-nested) .tab {
+  flex-direction: row;
+  padding-left: 1.375rem;
+}
+:host(.tab-nested) .tab .notification {
+  position: relative;
+  top: 0;
+  left: 0;
+  padding-left: 0.5rem;
+}
+:host(.tab-nested) .tab .tab-icon {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+:host(.tab-nested) .tab .tab-text {
+  margin-left: 0.5rem;
+}
+:host(.tab-nested) .tab::before {
+  display: none;
+}