@siemens/ix 1.6.2 → 2.0.0-beta.0

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

@@ -1 +1 @@
-{"version":3,"file":"menu-avatar.js","sourceRoot":"","sources":["../../../src/components/menu-avatar/menu-avatar.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,SAAS,aAAa,CAAC,KAA4B;EACjD,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;EAE3B,IAAI,QAAQ,EAAE;IACZ,OAAO,WAAK,KAAK,EAAE,iBAAiB,IAAG,QAAQ,CAAO,CAAC;GACxD;EAED,OAAO,CACL,WACE,KAAK,EAAE,cAAc,EACrB,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW;IAEnB,SAAG,IAAI,EAAC,MAAM,eAAW,SAAS;MAChC,YACE,EAAE,EAAC,wBAAwB,EAC3B,CAAC,EAAC,kIACiE,GACnE;MACF,YACE,EAAE,EAAC,oBAAoB,EACvB,CAAC,EAAC,2TAGgE,GAClE,CACA,CACA,CACP,CAAC;AACJ,CAAC;AAED,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,GACL,MAAM,eAAe,CAAC;AAOvB,MAAM,OAAO,UAAU;;IAqCb,oBAAe,GAAG,mBAAmB,CAAC;;;;;sBAPzB,QAAQ;;EAS7B,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,UACE,KAAK,EAAC,mCAAmC,EACzC,KAAK,EAAE,IAAI,CAAC,GAAG,EACf,EAAE,EAAE,IAAI,CAAC,eAAe;QAEvB,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACZ,WAAK,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,KAAK,EAAC,cAAc,GAAO,CAClD,CAAC,CAAC,CAAC,CACF,EAAC,aAAa,IAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CAC3C;QACD,WAAK,KAAK,EAAC,aAAa;UACtB,YAAM,KAAK,EAAC,qBAAqB,EAAC,KAAK,EAAE,IAAI,CAAC,GAAG,IAC9C,IAAI,CAAC,GAAG,CACJ;UACP,YAAM,KAAK,EAAC,qBAAqB,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM,IACjD,IAAI,CAAC,MAAM,CACP,CACH,CACH;MACL,mBACE,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,SAAS,EAAE,aAAa,EACxB,MAAM,EAAE;UACN,QAAQ,EAAE,CAAC;SACZ;QAED,eAAa;QACb,2BACE,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACb,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;UAC3B,CAAC,GACoB,CACX,CACT,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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 */\n\nfunction DefaultAvatar(props: { initials?: string }) {\n  const { initials } = props;\n\n  if (initials) {\n    return <div class={'avatar-initials'}>{initials}</div>;\n  }\n\n  return (\n    <svg\n      class={'avatar-image'}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n      viewBox=\"0 0 32 32\"\n    >\n      <g fill=\"none\" fill-rule=\"evenodd\">\n        <path\n          id=\"avatar-path-background\"\n          d=\"M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163\n          16-16c0-4.243-1.686-8.313-4.686-11.314C24.314 1.686 20.244 0 16 0z\"\n        />\n        <path\n          id=\"avatar-path-person\"\n          d=\"M17.897 17.91c3.8-.018 7.358 1.875 9.485 5.046-2.417 3.999-6.734 6.434-11.382\n        6.42-4.648.014-8.965-2.421-11.382-6.42 2.127-3.171 5.685-5.064\n        9.485-5.045h3.794zM15.821 2.129c3.682 0 6.667 2.984 6.667 6.666 0 3.682-2.985\n        6.667-6.667 6.667s-6.667-2.985-6.667-6.667 2.985-6.666 6.667-6.666z\"\n        />\n      </g>\n    </svg>\n  );\n}\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-menu-avatar',\n  styleUrl: 'menu-avatar.scss',\n  scoped: true,\n})\nexport class MenuAvatar {\n  @Element() hostElement: HTMLIxMenuAvatarElement;\n\n  /**\n   * First line of text\n   */\n  @Prop() top: string;\n\n  /**\n   * Second line of text\n   */\n  @Prop() bottom: string;\n\n  /**\n   * Display a avatar image\n   *\n   * @since 1.4.0\n   */\n  @Prop() image: string;\n\n  /**\n   * Display the initials of the user. Will be overwritten by image\n   *\n   * @since 1.4.0\n   */\n  @Prop() initials: string;\n\n  /**\n   * Use for translation\n   */\n  @Prop() i18nLogout = 'Logout';\n\n  /**\n   * Logout click\n   */\n  @Event() logoutClick: EventEmitter;\n\n  private avatarElementId = 'ix-menu-avatar-id';\n\n  render() {\n    return (\n      <Host>\n        <li\n          class=\"nav-item top-item avatar no-hover\"\n          title={this.top}\n          id={this.avatarElementId}\n        >\n          {this.image ? (\n            <img src={this.image} class=\"avatar-image\"></img>\n          ) : (\n            <DefaultAvatar initials={this.initials} />\n          )}\n          <div class=\"avatar-name\">\n            <span class=\"text-default-single\" title={this.top}>\n              {this.top}\n            </span>\n            <span class=\"text-default-single\" title={this.bottom}>\n              {this.bottom}\n            </span>\n          </div>\n        </li>\n        <ix-dropdown\n          trigger={this.avatarElementId}\n          placement={'right-start'}\n          offset={{\n            mainAxis: 6,\n          }}\n        >\n          <slot></slot>\n          <ix-menu-avatar-item\n            label={this.i18nLogout}\n            icon=\"log-out\"\n            onClick={(e) => {\n              this.logoutClick.emit(e);\n            }}\n          ></ix-menu-avatar-item>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"menu-avatar.js","sourceRoot":"","sources":["../../../src/components/menu-avatar/menu-avatar.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,GACL,MAAM,eAAe,CAAC;AAOvB,MAAM,OAAO,UAAU;;IAqCb,oBAAe,GAAG,mBAAmB,CAAC;;;;;sBAPzB,QAAQ;;EAS7B,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,IAAI,EAAC,gBAAgB;MACzB,UACE,KAAK,EAAC,mCAAmC,EACzC,KAAK,EAAE,IAAI,CAAC,GAAG,EACf,EAAE,EAAE,IAAI,CAAC,eAAe;QAExB,iBAAW,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAc;QAEnE,WAAK,KAAK,EAAC,aAAa;UACtB,YAAM,KAAK,EAAC,qBAAqB,EAAC,KAAK,EAAE,IAAI,CAAC,GAAG,IAC9C,IAAI,CAAC,GAAG,CACJ;UACP,YAAM,KAAK,EAAC,qBAAqB,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM,IACjD,IAAI,CAAC,MAAM,CACP,CACH,CACH;MACL,mBACE,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,aAAa,EACxB,MAAM,EAAE;UACN,QAAQ,EAAE,CAAC;SACZ;QAED,eAAa;QACb,2BACE,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACb,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;UAC3B,CAAC,GACoB,CACX,CACT,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-menu-avatar',\n  styleUrl: 'menu-avatar.scss',\n  shadow: true,\n})\nexport class MenuAvatar {\n  @Element() hostElement!: HTMLIxMenuAvatarElement;\n\n  /**\n   * First line of text\n   */\n  @Prop() top: string;\n\n  /**\n   * Second line of text\n   */\n  @Prop() bottom: string;\n\n  /**\n   * Display a avatar image\n   *\n   * @since 1.4.0\n   */\n  @Prop() image: string;\n\n  /**\n   * Display the initials of the user. Will be overwritten by image\n   *\n   * @since 1.4.0\n   */\n  @Prop() initials: string;\n\n  /**\n   * Use for translation\n   */\n  @Prop() i18nLogout = 'Logout';\n\n  /**\n   * Logout click\n   */\n  @Event() logoutClick: EventEmitter;\n\n  private avatarElementId = 'ix-menu-avatar-id';\n\n  render() {\n    return (\n      <Host slot=\"ix-menu-avatar\">\n        <li\n          class=\"nav-item top-item avatar no-hover\"\n          title={this.top}\n          id={this.avatarElementId}\n        >\n          <ix-avatar image={this.image} initials={this.initials}></ix-avatar>\n\n          <div class=\"avatar-name\">\n            <span class=\"text-default-single\" title={this.top}>\n              {this.top}\n            </span>\n            <span class=\"text-default-single\" title={this.bottom}>\n              {this.bottom}\n            </span>\n          </div>\n        </li>\n        <ix-dropdown\n          trigger={this.hostElement}\n          placement={'right-start'}\n          offset={{\n            mainAxis: 6,\n          }}\n        >\n          <slot></slot>\n          <ix-menu-avatar-item\n            label={this.i18nLogout}\n            icon=\"log-out\"\n            onClick={(e) => {\n              this.logoutClick.emit(e);\n            }}\n          ></ix-menu-avatar-item>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -6,7 +6,19 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
+/*
+ * 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.
+ */
 :host {
   display: block;
 }
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}

package/dist/collection/components/menu-avatar-item/menu-avatar-item.js

@@ -16,10 +16,10 @@ export class MenuAvatarItem {
     return (h("ix-dropdown-item", { icon: this.icon, label: this.label, onClick: (e) => this.itemClick.emit(e) }));
   }
   static get is() { return "ix-menu-avatar-item"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["menu-avatar-item.css"]
+      "$": ["menu-avatar-item.scss"]
     };
   }
   static get styleUrls() {

package/dist/collection/components/menu-avatar-item/menu-avatar-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-avatar-item.js","sourceRoot":"","sources":["../../../src/components/menu-avatar-item/menu-avatar-item.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,GACL,MAAM,eAAe,CAAC;AAOvB,MAAM,OAAO,cAAc;;;;;EAkBzB,MAAM;IACJ,OAAO,CACL,wBACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,GACpB,CACrB,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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 */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-menu-avatar-item',\n  styleUrl: 'menu-avatar-item.css',\n  scoped: true,\n})\nexport class MenuAvatarItem {\n  /**\n   * Avatar dropdown icon\n   */\n  @Prop() icon: string;\n\n  /**\n   * Avatar dropdown label\n   */\n  @Prop() label: string;\n\n  /**\n   * Avatar dropdown item clicked\n   */\n  @Event() itemClick: EventEmitter<MouseEvent>;\n\n  @Element() hostElement: HTMLIxMenuAvatarItemElement;\n\n  render() {\n    return (\n      <ix-dropdown-item\n        icon={this.icon}\n        label={this.label}\n        onClick={(e) => this.itemClick.emit(e)}\n      ></ix-dropdown-item>\n    );\n  }\n}\n"]}
+{"version":3,"file":"menu-avatar-item.js","sourceRoot":"","sources":["../../../src/components/menu-avatar-item/menu-avatar-item.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,GACL,MAAM,eAAe,CAAC;AAOvB,MAAM,OAAO,cAAc;;;;;EAkBzB,MAAM;IACJ,OAAO,CACL,wBACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,GACpB,CACrB,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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 */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-menu-avatar-item',\n  styleUrl: 'menu-avatar-item.scss',\n  shadow: true,\n})\nexport class MenuAvatarItem {\n  /**\n   * Avatar dropdown icon\n   */\n  @Prop() icon: string;\n\n  /**\n   * Avatar dropdown label\n   */\n  @Prop() label: string;\n\n  /**\n   * Avatar dropdown item clicked\n   */\n  @Event() itemClick: EventEmitter<MouseEvent>;\n\n  @Element() hostElement: HTMLIxMenuAvatarItemElement;\n\n  render() {\n    return (\n      <ix-dropdown-item\n        icon={this.icon}\n        label={this.label}\n        onClick={(e) => this.itemClick.emit(e)}\n      ></ix-dropdown-item>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,63 @@
+/*
+ * 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: 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.
+ */
+:host {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
+:host .category {
+  display: flex;
+  position: relative;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+:host .category-chevron {
+  margin-left: auto;
+  margin-right: 0px;
+  transition: var(--theme-default-time) transform ease-in-out;
+}
+:host .category-chevron--open {
+  transform: rotate(-180deg);
+}
+:host .menu-items {
+  overflow: hidden;
+  max-height: 0px;
+  transition: var(--theme-default-time) max-height ease-in-out;
+}
+:host .menu-items--expanded {
+  max-height: 999999999px;
+}
+:host .category-dropdown ::slotted(ix-menu-item) {
+  --ix-menu-item-height: 2.5rem;
+}
+:host .category-dropdown-header {
+  pointer-events: none;
+  min-width: 256px;
+}
+:host ::slotted(ix-menu-item) {
+  --ix-menu-item-height: 2.5rem;
+}
+
+:host(.expanded) {
+  background-color: var(--theme-color-ghost--active);
+}

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

@@ -0,0 +1,212 @@
+/*
+ * 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 { h, Host } from '@stencil/core';
+import anime from 'animejs';
+import { createMutationObserver } from '../utils/mutation-observer';
+import { menuContext } from '../utils/screen/context';
+const DefaultIxMenuItemHeight = 40;
+const DefaultAnimationTimeout = 150;
+/**
+ * @since 2.0.0
+ */
+export class MenuCategory {
+  constructor() {
+    this.label = undefined;
+    this.icon = undefined;
+    this.notifications = undefined;
+    this.menuExpand = false;
+    this.showItems = false;
+    this.showDropdown = false;
+    this.nestedItems = [];
+  }
+  isNestedItemActive() {
+    return this.getNestedItems().some((item) => item.active);
+  }
+  getNestedItems() {
+    return Array.from(this.hostElement.querySelectorAll(':scope > ix-menu-item'));
+  }
+  getNestedItemsHeight() {
+    const items = this.getNestedItems();
+    return items.length * DefaultIxMenuItemHeight;
+  }
+  onExpandCategory(showItems) {
+    if (showItems) {
+      this.animateFadeIn();
+    }
+    else {
+      this.animateFadeOut();
+    }
+  }
+  animateFadeOut() {
+    const slotHideThresholdMs = 25;
+    anime({
+      targets: this.menuItemsContainer,
+      duration: DefaultAnimationTimeout,
+      easing: 'easeInSine',
+      opacity: [1, 0],
+      maxHeight: [this.getNestedItemsHeight() + DefaultIxMenuItemHeight, 0],
+      complete: () => {
+        setTimeout(() => {
+          this.showItems = false;
+          this.showDropdown = false;
+        }, DefaultAnimationTimeout + slotHideThresholdMs);
+      },
+    });
+  }
+  animateFadeIn() {
+    anime({
+      targets: this.menuItemsContainer,
+      duration: DefaultAnimationTimeout,
+      easing: 'easeInSine',
+      opacity: [0, 1],
+      maxHeight: [0, this.getNestedItemsHeight() + DefaultIxMenuItemHeight],
+      begin: () => {
+        this.showItems = true;
+        this.showDropdown = false;
+      },
+    });
+  }
+  onCategoryClicked(e) {
+    if (this.ixMenu.expand) {
+      e === null || e === void 0 ? void 0 : e.stopPropagation();
+      this.onExpandCategory(!this.showItems);
+      return;
+    }
+    this.showDropdown = !this.showDropdown;
+  }
+  onNestedItemsChanged() {
+    this.nestedItems = this.getNestedItems();
+  }
+  isCategoryItemListVisible() {
+    return this.menuExpand && (this.showItems || this.isNestedItemActive());
+  }
+  componentDidLoad() {
+    const closestMenu = menuContext(this.hostElement);
+    if (!closestMenu) {
+      throw Error('ix-menu-category can only be used as a child of ix-menu');
+    }
+    this.ixMenu = closestMenu;
+    this.observer = createMutationObserver(() => this.onNestedItemsChanged());
+    this.observer.observe(this.hostElement, {
+      attributes: true,
+      childList: true,
+      subtree: true,
+    });
+    requestAnimationFrame(() => {
+      this.onNestedItemsChanged();
+    });
+    this.ixMenu.addEventListener('expandChange', ({ detail: menuExpand }) => {
+      this.menuExpand = menuExpand;
+      this.showItems = this.isCategoryItemListVisible();
+    });
+  }
+  disconnectedCallback() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  }
+  render() {
+    return (h(Host, { class: {
+        expanded: this.showItems,
+      } }, h("ix-menu-item", { class: 'category-parent', active: this.isNestedItemActive(), notifications: this.notifications, icon: this.icon, onClick: (e) => this.onCategoryClicked(e) }, h("div", { class: "category" }, this.label, h("ix-icon", { name: "chevron-down-small", class: {
+        'category-chevron': true,
+        'category-chevron--open': this.showItems,
+      } }))), h("div", { ref: (ref) => (this.menuItemsContainer = ref), class: {
+        'menu-items': true,
+        'menu-items--expanded': this.showItems,
+      } }, this.showItems ? h("slot", null) : null), h("ix-dropdown", { closeBehavior: 'both', show: this.showDropdown, onShowChanged: ({ detail: dropdownShown }) => {
+        this.showDropdown = dropdownShown;
+      }, class: 'category-dropdown', anchor: this.hostElement, placement: "right-start", offset: {
+        mainAxis: 3,
+      }, onClick: (e) => {
+        if (e.target instanceof HTMLElement) {
+          if (e.target.tagName === 'IX-MENU-ITEM') {
+            this.showDropdown = false;
+          }
+        }
+      } }, h("ix-dropdown-item", { class: 'category-dropdown-header' }, h("ix-typography", { variant: "default-title-single", color: "std" }, this.label)), h("ix-divider", null), h("slot", null))));
+  }
+  static get is() { return "ix-menu-category"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["menu-category.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["menu-category.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Display name of the category"
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon of the category"
+        },
+        "attribute": "icon",
+        "reflect": false
+      },
+      "notifications": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Show notification count on the category"
+        },
+        "attribute": "notifications",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "menuExpand": {},
+      "showItems": {},
+      "showDropdown": {},
+      "nestedItems": {}
+    };
+  }
+  static get elementRef() { return "hostElement"; }
+}
+//# sourceMappingURL=menu-category.js.map

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 { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport anime from 'animejs';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { menuContext } from '../utils/screen/context';\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  @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 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 onCategoryClicked(e?: MouseEvent) {\n    if (this.ixMenu.expand) {\n      e?.stopPropagation();\n      this.onExpandCategory(!this.showItems);\n      return;\n    }\n\n    this.showDropdown = !this.showDropdown;\n  }\n\n  private onNestedItemsChanged() {\n    this.nestedItems = this.getNestedItems();\n  }\n\n  private isCategoryItemListVisible() {\n    return this.menuExpand && (this.showItems || this.isNestedItemActive());\n  }\n\n  componentDidLoad() {\n    const closestMenu = menuContext(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.observer = createMutationObserver(() => this.onNestedItemsChanged());\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\n        this.showItems = this.isCategoryItemListVisible();\n      }\n    );\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      >\n        <ix-menu-item\n          class={'category-parent'}\n          active={this.isNestedItemActive()}\n          notifications={this.notifications}\n          icon={this.icon}\n          onClick={(e) => this.onCategoryClicked(e)}\n        >\n          <div class=\"category\">\n            {this.label}\n            <ix-icon\n              name=\"chevron-down-small\"\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          }}\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              }\n            }\n          }}\n        >\n          <ix-dropdown-item class={'category-dropdown-header'}>\n            <ix-typography variant=\"default-title-single\" color=\"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,107 @@
+/*
+ * 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 { test } from '@utils/test';
+test('renders', async ({ mount, page }) => {
+  await mount(`
+      <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>
+    `);
+  const element = page.locator('ix-menu-category');
+  await expect(element).toHaveClass('hydrated');
+});
+test('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 menu = page.locator('ix-menu');
+  const expandMenuButton = page.locator('ix-menu').locator('.burger-menu');
+  await menu.evaluate((menu) => (menu.supportedModes = ['medium']));
+  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/);
+});
+test('should expand items', async ({ mount, page }) => {
+  await mount(`
+    <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>
+  `);
+  const menu = page.locator('ix-menu');
+  const menuButton = menu.locator('ix-burger-menu');
+  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();
+});
+test('should show items as dropdown', async ({ mount, page }) => {
+  await mount(`
+    <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>
+  `);
+  await page.waitForSelector('ix-menu');
+  const menuCategory = page.locator('ix-menu-category');
+  await menuCategory.click();
+  const dropdown = menuCategory.locator('ix-dropdown');
+  await expect(dropdown).toBeVisible();
+  await expect(menuCategory.locator('.menu-items')).toHaveClass('menu-items');
+  const dropdownHeader = dropdown.locator('ix-dropdown-item');
+  await expect(dropdownHeader).toHaveText('Category label');
+  const itemOne = page.getByRole('listitem', { name: 'Test Item 1' });
+  const itemTwo = page.getByRole('listitem', { name: 'Test Item 2' });
+  await expect(itemOne).toBeVisible();
+  await expect(itemTwo).toBeVisible();
+});
+test('should collapse category after collapse menu', async ({ mount, page, }) => {
+  await mount(`
+    <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>
+  `);
+  await page.waitForSelector('ix-menu');
+  const menu = page.locator('ix-menu');
+  const menuButton = menu.locator('ix-burger-menu');
+  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');
+});
+//# 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":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;EACxC,MAAM,KAAK,CAAC;;;;;;;KAOT,CAAC,CAAC;EACL,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;EACjD,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;AAChD,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,0BAA0B,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;EACzD,MAAM,KAAK,CAAC;;;;;;;;;GASX,CAAC,CAAC;EACH,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;EACtD,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;EACrC,MAAM,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;EAEzE,MAAM,IAAI,CAAC,QAAQ,CACjB,CAAC,IAAuB,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,CAAC,QAAQ,CAAC,CAAC,CAChE,CAAC;EAEF,MAAM,YAAY,CAAC,KAAK,EAAE,CAAC;EAE3B,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;EAC9D,MAAM,IAAI,CAAC,QAAQ,CAAC,CAAC,IAA2B,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;EAC3E,MAAM,MAAM,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;EAEzC,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC;EACnB,MAAM,gBAAgB,CAAC,KAAK,EAAE,CAAC;EAE/B,MAAM,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW,CAC3D,sBAAsB,CACvB,CAAC;EAEF,MAAM,YAAY,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,KAAK,EAAE,CAAC;EAEvD,MAAM,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,CAAC,WAAW,CAC/D,sBAAsB,CACvB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,qBAAqB,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;EACpD,MAAM,KAAK,CAAC;;;;;;;GAOX,CAAC,CAAC;EAEH,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;EACrC,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;EAClD,MAAM,UAAU,CAAC,KAAK,EAAE,CAAC;EACzB,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;EACtD,MAAM,YAAY,CAAC,KAAK,EAAE,CAAC;EAE3B,MAAM,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW,CAC3D,iCAAiC,CAClC,CAAC;EACF,MAAM,QAAQ,GAAG,YAAY,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;EACrD,MAAM,MAAM,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC;AAC3C,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,+BAA+B,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;EAC9D,MAAM,KAAK,CAAC;;;;;;;GAOX,CAAC,CAAC;EAEH,MAAM,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;EACtC,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;EACtD,MAAM,YAAY,CAAC,KAAK,EAAE,CAAC;EAE3B,MAAM,QAAQ,GAAG,YAAY,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;EACrD,MAAM,MAAM,CAAC,QAAQ,CAAC,CAAC,WAAW,EAAE,CAAC;EACrC,MAAM,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;EAE5E,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;EAC5D,MAAM,MAAM,CAAC,cAAc,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC;EAE1D,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC,CAAC;EACpE,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC,CAAC;EAEpE,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,CAAC;EACpC,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,CAAC;AACtC,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,8CAA8C,EAAE,KAAK,EAAE,EAC1D,KAAK,EACL,IAAI,GACL,EAAE,EAAE;EACH,MAAM,KAAK,CAAC;;;;;;;GAOX,CAAC,CAAC;EAEH,MAAM,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;EACtC,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;EACrC,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;EAClD,MAAM,UAAU,CAAC,KAAK,EAAE,CAAC;EAEzB,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;EACtD,MAAM,YAAY,CAAC,KAAK,EAAE,CAAC;EAE3B,MAAM,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW,CAC3D,iCAAiC,CAClC,CAAC;EAEF,MAAM,UAAU,CAAC,KAAK,EAAE,CAAC;EACzB,MAAM,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;AAC9E,CAAC,CAAC,CAAC","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 { test } from '@utils/test';\n\ntest('renders', async ({ mount, page }) => {\n  await mount(`\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    `);\n  const element = page.locator('ix-menu-category');\n  await expect(element).toHaveClass('hydrated');\n});\n\ntest('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 menu = page.locator('ix-menu');\n  const expandMenuButton = page.locator('ix-menu').locator('.burger-menu');\n\n  await menu.evaluate(\n    (menu: HTMLIxMenuElement) => (menu.supportedModes = ['medium'])\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\ntest('should expand items', async ({ mount, page }) => {\n  await mount(`\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  `);\n\n  const menu = page.locator('ix-menu');\n  const menuButton = menu.locator('ix-burger-menu');\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\ntest('should show items as dropdown', async ({ mount, page }) => {\n  await mount(`\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  `);\n\n  await page.waitForSelector('ix-menu');\n  const menuCategory = page.locator('ix-menu-category');\n  await menuCategory.click();\n\n  const dropdown = menuCategory.locator('ix-dropdown');\n  await expect(dropdown).toBeVisible();\n  await expect(menuCategory.locator('.menu-items')).toHaveClass('menu-items');\n\n  const dropdownHeader = dropdown.locator('ix-dropdown-item');\n  await expect(dropdownHeader).toHaveText('Category label');\n\n  const itemOne = page.getByRole('listitem', { name: 'Test Item 1' });\n  const itemTwo = page.getByRole('listitem', { name: 'Test Item 2' });\n\n  await expect(itemOne).toBeVisible();\n  await expect(itemTwo).toBeVisible();\n});\n\ntest('should collapse category after collapse menu', async ({\n  mount,\n  page,\n}) => {\n  await mount(`\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  `);\n\n  await page.waitForSelector('ix-menu');\n  const menu = page.locator('ix-menu');\n  const menuButton = menu.locator('ix-burger-menu');\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('menu-items');\n});\n"]}

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

@@ -38,15 +38,15 @@
   position: relative;
   display: block;
   cursor: pointer;
-  height: 3rem;
-  min-height: 3rem;
-  max-height: 3rem;
+  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 {
   display: flex;
   position: relative;
   align-items: center;
-  height: 3rem;
+  height: var(--ix-menu-item-height, 3rem);
   z-index: 500;
   padding-left: 0.875rem;
 }
@@ -101,6 +101,7 @@
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
+  width: 100%;
 }
 
 :host(.active) .tab,
@@ -111,7 +112,7 @@
 :host(.selected) .tab::before {
   content: "";
   background-color: var(--theme-nav-item-primary--border-color--selected);
-  height: 3rem;
+  height: var(--ix-menu-item-height, 3rem);
   width: 0.25rem;
   left: 0;
   position: absolute;
@@ -133,11 +134,6 @@
   color: var(--theme-color-weak-text);
 }
 
-:host(.home-tab),
-:host([slot=home]) {
-  margin-bottom: 1.5rem;
-}
-
 :host(.bottom-tab),
 :host([slot=bottom]) {
   min-height: 2.25rem;

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

@@ -8,11 +8,15 @@
  */
 import { h, Host } from '@stencil/core';
 import { createMutationObserver } from '../utils/mutation-observer';
+/**
+ * @slot menu-item-label Custom label
+ */
 export class MenuItem {
   constructor() {
     this.home = false;
     this.bottom = false;
     this.tabIcon = 'document';
+    this.icon = undefined;
     this.notifications = undefined;
     this.active = undefined;
     this.disabled = undefined;
@@ -37,12 +41,24 @@ export class MenuItem {
     }
   }
   render() {
-    return (h(Host, { class: {
+    var _a;
+    let extendedAttributes = {};
+    if (this.home) {
+      extendedAttributes = {
+        slot: 'home',
+      };
+    }
+    if (this.bottom) {
+      extendedAttributes = {
+        slot: 'bottom',
+      };
+    }
+    return (h(Host, Object.assign({ class: {
         disabled: this.disabled,
         'home-tab': this.home,
         'bottom-tab': this.bottom,
         active: this.active,
-      } }, h("li", { class: "tab", title: this.title }, h("ix-icon", { name: this.tabIcon }), h("div", { class: "notification" }, this.notifications ? (h("div", { class: "pill" }, this.notifications)) : null), h("span", { class: "tab-text text-default" }, h("slot", null)))));
+      } }, extendedAttributes), h("li", { class: "tab", title: this.title }, h("ix-icon", { name: (_a = this.icon) !== null && _a !== void 0 ? _a : this.tabIcon }), h("div", { class: "notification" }, this.notifications ? (h("div", { class: "pill" }, this.notifications)) : null), h("span", { class: "tab-text text-default" }, h("slot", null)))));
   }
   static get is() { return "ix-menu-item"; }
   static get encapsulation() { return "shadow"; }
@@ -87,10 +103,7 @@ export class MenuItem {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "Will be removed in 2.0.0. Replaced by slot based implementation"
-            }],
+          "tags": [],
           "text": "Caution: this is no longer working. Please use slot=\"bottom\" instead.\n\nPlace tab on bottom"
         },
         "attribute": "bottom",
@@ -108,13 +121,33 @@ export class MenuItem {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
+          "tags": [{
+              "name": "deprecated",
+              "text": "Use `icon` property. Will be removed in 3.0.0"
+            }],
           "text": "Icon name from @siemens/ix-icons"
         },
         "attribute": "tab-icon",
         "reflect": false,
         "defaultValue": "'document'"
       },
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon name from @siemens/ix-icons"
+        },
+        "attribute": "icon",
+        "reflect": false
+      },
       "notifications": {
         "type": "number",
         "mutable": false,

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

@@ -1 +1 @@
-{"version":3,"file":"menu-item.js","sourceRoot":"","sources":["../../../src/components/menu-item/menu-item.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAOpE,MAAM,OAAO,QAAQ;;gBAIJ,KAAK;kBASH,KAAK;mBAKJ,UAAU;;;;;;EAuB5B,mBAAmB;IACjB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC;EAC1C,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,QAAQ,GAAG,sBAAsB,CAAC,GAAG,EAAE;MAC1C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE;MACtC,OAAO,EAAE,IAAI;MACb,SAAS,EAAE,IAAI;MACf,aAAa,EAAE,IAAI;KACpB,CAAC,CAAC;EACL,CAAC;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;EACH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,UAAU,EAAE,IAAI,CAAC,IAAI;QACrB,YAAY,EAAE,IAAI,CAAC,MAAM;QACzB,MAAM,EAAE,IAAI,CAAC,MAAM;OACpB;MAED,UAAI,KAAK,EAAC,KAAK,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK;QAC/B,eAAS,IAAI,EAAE,IAAI,CAAC,OAAO,GAAY;QACvC,WAAK,KAAK,EAAC,cAAc,IACtB,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CACpB,WAAK,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,aAAa,CAAO,CAC7C,CAAC,CAAC,CAAC,IAAI,CACJ;QACN,YAAM,KAAK,EAAC,uBAAuB;UACjC,eAAa,CACR,CACJ,CACA,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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 */\n\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\n@Component({\n  tag: 'ix-menu-item',\n  styleUrl: 'menu-item.scss',\n  shadow: true,\n})\nexport class MenuItem {\n  /**\n   * Move the Tab to a top position.\n   */\n  @Prop() home = false;\n\n  /**\n   * Caution: this is no longer working. Please use slot=\"bottom\" instead.\n   *\n   * Place tab on bottom\n   *\n   * @deprecated Will be removed in 2.0.0. Replaced by slot based implementation\n   */\n  @Prop() bottom = false;\n\n  /**\n   * Icon name from @siemens/ix-icons\n   */\n  @Prop() tabIcon = 'document';\n\n  /**\n   * Show notification count on tab\n   */\n  @Prop() notifications: number;\n\n  /**\n   * State to display active\n   */\n  @Prop() active: boolean;\n\n  /**\n   * Disable tab and remove event handlers\n   */\n  @Prop() disabled: boolean;\n\n  @Element() hostElement: HTMLIxMenuItemElement;\n\n  @State() title: string;\n\n  private observer: MutationObserver;\n\n  componentWillRender() {\n    this.title = this.hostElement.innerText;\n  }\n\n  connectedCallback() {\n    this.observer = createMutationObserver(() => {\n      this.title = this.hostElement.innerText;\n    });\n\n    this.observer.observe(this.hostElement, {\n      subtree: true,\n      childList: true,\n      characterData: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n          'home-tab': this.home,\n          'bottom-tab': this.bottom,\n          active: this.active,\n        }}\n      >\n        <li class=\"tab\" title={this.title}>\n          <ix-icon name={this.tabIcon}></ix-icon>\n          <div class=\"notification\">\n            {this.notifications ? (\n              <div class=\"pill\">{this.notifications}</div>\n            ) : null}\n          </div>\n          <span class=\"tab-text text-default\">\n            <slot></slot>\n          </span>\n        </li>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"menu-item.js","sourceRoot":"","sources":["../../../src/components/menu-item/menu-item.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAEpE;;GAEG;AAMH,MAAM,OAAO,QAAQ;;gBAIJ,KAAK;kBAOH,KAAK;mBAOJ,UAAU;;;;;;;EA4B5B,mBAAmB;IACjB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC;EAC1C,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,QAAQ,GAAG,sBAAsB,CAAC,GAAG,EAAE;MAC1C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE;MACtC,OAAO,EAAE,IAAI;MACb,SAAS,EAAE,IAAI;MACf,aAAa,EAAE,IAAI;KACpB,CAAC,CAAC;EACL,CAAC;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;EACH,CAAC;EAED,MAAM;;IACJ,IAAI,kBAAkB,GAAG,EAAE,CAAC;IAC5B,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,kBAAkB,GAAG;QACnB,IAAI,EAAE,MAAM;OACb,CAAC;KACH;IAED,IAAI,IAAI,CAAC,MAAM,EAAE;MACf,kBAAkB,GAAG;QACnB,IAAI,EAAE,QAAQ;OACf,CAAC;KACH;IACD,OAAO,CACL,EAAC,IAAI,kBACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,UAAU,EAAE,IAAI,CAAC,IAAI;QACrB,YAAY,EAAE,IAAI,CAAC,MAAM;QACzB,MAAM,EAAE,IAAI,CAAC,MAAM;OACpB,IACG,kBAAkB;MAEtB,UAAI,KAAK,EAAC,KAAK,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK;QAC/B,eAAS,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,mCAAI,IAAI,CAAC,OAAO,GAAY;QACpD,WAAK,KAAK,EAAC,cAAc,IACtB,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CACpB,WAAK,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,aAAa,CAAO,CAC7C,CAAC,CAAC,CAAC,IAAI,CACJ;QACN,YAAM,KAAK,EAAC,uBAAuB;UACjC,eAAa,CACR,CACJ,CACA,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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 */\n\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\n/**\n * @slot menu-item-label Custom label\n */\n@Component({\n  tag: 'ix-menu-item',\n  styleUrl: 'menu-item.scss',\n  shadow: true,\n})\nexport class MenuItem {\n  /**\n   * Move the Tab to a top position.\n   */\n  @Prop() home = false;\n\n  /**\n   * Caution: this is no longer working. Please use slot=\"bottom\" instead.\n   *\n   * Place tab on bottom\n   */\n  @Prop() bottom = false;\n\n  /**\n   * Icon name from @siemens/ix-icons\n   *\n   * @deprecated Use `icon` property. Will be removed in 3.0.0\n   */\n  @Prop() tabIcon = 'document';\n\n  /**\n   * Icon name from @siemens/ix-icons\n   */\n  @Prop() icon: string;\n\n  /**\n   * Show notification count on tab\n   */\n  @Prop() notifications: number;\n\n  /**\n   * State to display active\n   */\n  @Prop() active: boolean;\n\n  /**\n   * Disable tab and remove event handlers\n   */\n  @Prop() disabled: boolean;\n\n  @Element() hostElement: HTMLIxMenuItemElement;\n\n  @State() title: string;\n\n  private observer: MutationObserver;\n\n  componentWillRender() {\n    this.title = this.hostElement.innerText;\n  }\n\n  connectedCallback() {\n    this.observer = createMutationObserver(() => {\n      this.title = this.hostElement.innerText;\n    });\n\n    this.observer.observe(this.hostElement, {\n      subtree: true,\n      childList: true,\n      characterData: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    let extendedAttributes = {};\n    if (this.home) {\n      extendedAttributes = {\n        slot: 'home',\n      };\n    }\n\n    if (this.bottom) {\n      extendedAttributes = {\n        slot: 'bottom',\n      };\n    }\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n          'home-tab': this.home,\n          'bottom-tab': this.bottom,\n          active: this.active,\n        }}\n        {...extendedAttributes}\n      >\n        <li class=\"tab\" title={this.title}>\n          <ix-icon name={this.icon ?? this.tabIcon}></ix-icon>\n          <div class=\"notification\">\n            {this.notifications ? (\n              <div class=\"pill\">{this.notifications}</div>\n            ) : null}\n          </div>\n          <span class=\"tab-text text-default\">\n            <slot></slot>\n          </span>\n        </li>\n      </Host>\n    );\n  }\n}\n"]}