@siemens/ix 0.0.0-20240419081748 → 0.0.0-20240508065324

package/dist/collection/components/group/group-context-menu.css

@@ -17,4 +17,7 @@
 }
 :host .hide {
   visibility: collapse;
+}
+:host ::slotted(ix-dropdown) {
+  cursor: default;
 }

package/dist/collection/components/group/group.js

@@ -6,7 +6,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { Fragment, h, Host, } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import { createMutationObserver } from "../utils/mutation-observer";
 import { hasSlottedElements } from "../utils/shadow-dom";
 export class Group {
@@ -22,6 +22,7 @@ export class Group {
         this.dropdownTriggerRef = undefined;
         this.slotSize = this.groupItems.length;
         this.footerVisible = false;
+        this.showExpandCollapsedIcon = false;
     }
     get dropdownItems() {
         return Array.from(this.hostElement.querySelectorAll('ix-group-dropdown-item'));
@@ -100,21 +101,26 @@ export class Group {
         }
     }
     render() {
-        return (h(Host, { key: 'ae563c8c4bd705c6c290eda0654aecabd90b441d' }, h("div", { key: '833310ab5fb8f61ba9fd02ffe484e3357cdf8ba1', class: {
+        return (h(Host, { key: '6b775c7d0b0184c3d33c46c2401b378c3b6c4c08' }, h("div", { key: '9a3c57add7b086b0223e8957e7863e0f0caa5c0b', class: {
                 'group-header': true,
                 expand: !this.collapsed,
                 selected: this.selected,
-            }, tabindex: "0" }, h("div", { key: 'e19b49f36efe557aa18aa9b2f536fa0b5fe1c532', class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, h("div", { key: '82ac45359bd081ca6b0ebf725cc1c95e594edcbc', class: {
+            }, tabindex: "0" }, h("div", { key: 'ff7b3e3b0dd048cac13a13d892abaf3d9b12de08', class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, h("div", { key: '1b60a84b9c98de13a498ab54e88f72c54fa3d35c', class: {
                 'group-header-selection-indicator': true,
                 'group-header-selection-indicator-item-selected': this.itemSelected,
-            } }), h("div", { key: '6854fb9a7d061149fc1d19329bad6b7b67277f15', class: "btn-expand-header" }, h("ix-icon", { key: '342017a6a8dccb6d29c0ada93ee37620f7ab0237', class: {
-                hidden: this.slotSize === 0,
-            }, name: this.collapsed ? 'chevron-right-small' : 'chevron-down-small', onClick: (e) => this.onExpandClick(e) })), h("div", { key: 'b829051829db7df20de99a3a523ced036acf3392', class: "group-header-content" }, this.header ? (h("div", { class: "group-header-props-container" }, h("div", { class: "group-header-title" }, h("span", { title: this.header }, this.header)), h("div", { class: "group-subheader", title: this.subHeader }, this.subHeader))) : null, h("slot", { key: '61e4435295d8875eac855da9542c89707bce9936', name: "header" }))), h("ix-group-context-menu", { key: 'd88cfb86005c5ea3342d6327c799d2a80e0bb281' }, h("slot", { key: '9bf82a1c5ff2c931995fff0a92eac522d5515bca', name: "dropdown" }))), h("div", { key: 'b4b412f8704f3618443a18d191b05a4fa9604df7', class: {
+            } }), h("div", { key: 'bc128ad0a4fa2af31cbd03cb67fd8785f605bac1', class: "btn-expand-header" }, h("ix-icon", { key: '8fbfe095e0d37b74804e67c174b347cca9471f60', "data-testid": "expand-collapsed-icon", class: {
+                hidden: !this.showExpandCollapsedIcon,
+            }, name: this.collapsed ? 'chevron-right-small' : 'chevron-down-small', onClick: (e) => this.onExpandClick(e) })), h("div", { key: '78551a007fe0e0919f556742020a9d2d510d2fb0', class: "group-header-content" }, this.header ? (h("div", { class: "group-header-props-container" }, h("div", { class: "group-header-title" }, h("span", { title: this.header }, this.header)), h("div", { class: "group-subheader", title: this.subHeader }, this.subHeader))) : null, h("slot", { key: 'ad99eba2934c2a910e5260ac8f8c62f43319b674', name: "header" }))), h("ix-group-context-menu", { key: 'b4203f23bc8c19bd45ad088c6314c5bb03187932' }, h("slot", { key: '9b77656e2282afdfe7836c54bc970effb2c351f7', name: "dropdown" }))), h("div", { key: 'a26dd0dfac3d432920ba566dc5d2dc5776ea7fce', class: {
                 'group-content': true,
-            } }, !this.collapsed ? (h(Fragment, null, h("slot", null), h("ix-group-item", { suppressSelection: true, focusable: false, class: {
+            } }, h("div", { key: 'ba7fd9e27461fe30ed804e03d0e7b99b377f0dff', style: {
+                display: this.collapsed ? 'none' : 'contents',
+            } }, h("slot", { key: 'e4ce555634eae2b89f64d18ce2220d6ec677baf1', onSlotchange: () => {
+                const slot = this.hostElement.shadowRoot.querySelector('slot:not([name])');
+                this.showExpandCollapsedIcon = hasSlottedElements(slot);
+            } }), h("ix-group-item", { key: '1f50e8d0639ad719f84dd938e8c30f28856a2ee3', suppressSelection: true, focusable: false, class: {
                 footer: true,
                 'footer-visible': this.footerVisible,
-            } }, h("slot", { name: "footer", onSlotchange: () => this.onSlotChange() })))) : null)));
+            } }, h("slot", { key: '96a102b08e08ff95f0f56ddf06b6ff47efdbb89c', name: "footer", onSlotchange: () => this.onSlotChange() }))))));
     }
     static get is() { return "ix-group"; }
     static get encapsulation() { return "shadow"; }
@@ -259,7 +265,8 @@ export class Group {
             "itemSelected": {},
             "dropdownTriggerRef": {},
             "slotSize": {},
-            "footerVisible": {}
+            "footerVisible": {},
+            "showExpandCollapsedIcon": {}
         };
     }
     static get events() {

package/dist/collection/components/group/group.js.map

@@ -1 +1 @@
-{"version":3,"file":"group.js","sourceRoot":"","sources":["../../../../src/components/group/group.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 */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { hasSlottedElements } from '../utils/shadow-dom';\n\n@Component({\n  tag: 'ix-group',\n  styleUrl: 'group.scss',\n  shadow: true,\n})\nexport class Group {\n  @Element() hostElement!: HTMLIxGroupElement;\n\n  /**\n   * Prevent header from being selectable\n   */\n  @Prop() suppressHeaderSelection = false;\n\n  /**\n   * Group header\n   */\n  @Prop() header: string;\n\n  /**\n   * Group header subtitle\n   */\n  @Prop() subHeader: string;\n\n  /**\n   * Whether the group is collapsed or expanded. Defaults to true.\n   */\n  @Prop({ mutable: true, reflect: true }) collapsed = true;\n\n  /**\n   * Whether the group is selected.\n   */\n  @Prop({ mutable: true, reflect: true }) selected: boolean;\n\n  /**\n   * The index of the selected group entry.\n   * If undefined no group item is selected.\n   */\n  @Prop({ mutable: true, reflect: true }) index: number;\n\n  /**\n   * Expand the group if the header is clicked\n   */\n  @Prop() expandOnHeaderClick = false;\n\n  /**\n   * Emits when whole group gets selected.\n   */\n  @Event() selectGroup: EventEmitter<boolean>;\n\n  /**\n   * Emits when group item gets selected.\n   */\n  @Event() selectItem: EventEmitter<number>;\n\n  /**\n   * Group collapsed\n   */\n  @Event() collapsedChanged: EventEmitter<boolean>;\n\n  @State() itemSelected = false;\n  @State() dropdownTriggerRef: HTMLElement;\n  @State() slotSize = this.groupItems.length;\n  @State() footerVisible = false;\n\n  private observer: MutationObserver;\n\n  get dropdownItems() {\n    return Array.from(\n      this.hostElement.querySelectorAll('ix-group-dropdown-item')\n    );\n  }\n\n  get groupItems(): Array<HTMLIxGroupItemElement> {\n    return Array.from(\n      this.hostElement.querySelectorAll('ix-group-item:not(.footer)')\n    );\n  }\n\n  get groupContent() {\n    return this.hostElement.shadowRoot.querySelector('.group-content');\n  }\n\n  private onExpandClick(event: Event) {\n    this.collapsed = !this.collapsed;\n\n    this.collapsedChanged.emit(this.collapsed);\n    event.stopPropagation();\n  }\n\n  private onHeaderClick(event: Event) {\n    this.setGroupSelection(!this.selected);\n\n    if (this.suppressHeaderSelection) {\n      this.onExpandClick(event);\n    }\n  }\n\n  private onItemClick(index: number) {\n    if (index === this.index) {\n      this.index = undefined;\n      this.selectItem.emit(undefined);\n    } else {\n      this.index = index;\n      this.selectItem.emit(index);\n    }\n\n    if (this.index >= 0) {\n      this.itemSelected = true;\n    } else this.itemSelected = false;\n\n    this.setGroupSelection(false);\n  }\n\n  private setGroupSelection(selection: boolean) {\n    if (!this.suppressHeaderSelection) {\n      this.selected = selection;\n      this.selectGroup.emit(this.selected);\n    }\n  }\n\n  private onSlotChange() {\n    const slot = this.hostElement.shadowRoot.querySelector(\n      'slot[name=\"footer\"]'\n    );\n\n    if (slot) {\n      this.footerVisible = hasSlottedElements(slot);\n    }\n  }\n\n  componentWillRender() {\n    this.groupItems.forEach((item, index) => {\n      if (this.selected === true) {\n        item.selected = false;\n        this.index = undefined;\n        this.itemSelected = false;\n        return;\n      }\n      item.selected = index === this.index;\n      item.index = index;\n    });\n  }\n\n  componentDidLoad() {\n    this.observer = createMutationObserver(() => {\n      this.slotSize = this.groupItems.length;\n    });\n\n    this.observer.observe(this.groupContent, {\n      childList: true,\n    });\n\n    this.groupContent.addEventListener(\n      'selectedChanged',\n      (evt: CustomEvent<HTMLIxGroupItemElement>) => {\n        this.onItemClick(evt.detail.index);\n      }\n    );\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'group-header': true,\n            expand: !this.collapsed,\n            selected: this.selected,\n          }}\n          tabindex=\"0\"\n        >\n          <div\n            class=\"group-header-clickable\"\n            onClick={(e) => this.onHeaderClick(e)}\n          >\n            <div\n              class={{\n                'group-header-selection-indicator': true,\n                'group-header-selection-indicator-item-selected':\n                  this.itemSelected,\n              }}\n            ></div>\n            <div class=\"btn-expand-header\">\n              <ix-icon\n                class={{\n                  hidden: this.slotSize === 0,\n                }}\n                name={\n                  this.collapsed ? 'chevron-right-small' : 'chevron-down-small'\n                }\n                onClick={(e) => this.onExpandClick(e)}\n              ></ix-icon>\n            </div>\n\n            <div class=\"group-header-content\">\n              {this.header ? (\n                <div class=\"group-header-props-container\">\n                  <div class=\"group-header-title\">\n                    <span title={this.header}>{this.header}</span>\n                  </div>\n                  <div class=\"group-subheader\" title={this.subHeader}>\n                    {this.subHeader}\n                  </div>\n                </div>\n              ) : null}\n              <slot name=\"header\"></slot>\n            </div>\n          </div>\n          <ix-group-context-menu>\n            <slot name=\"dropdown\"></slot>\n          </ix-group-context-menu>\n        </div>\n        <div\n          class={{\n            'group-content': true,\n          }}\n        >\n          {!this.collapsed ? (\n            <Fragment>\n              <slot></slot>\n              <ix-group-item\n                suppressSelection={true}\n                focusable={false}\n                class={{\n                  footer: true,\n                  'footer-visible': this.footerVisible,\n                }}\n              >\n                <slot\n                  name=\"footer\"\n                  onSlotchange={() => this.onSlotChange()}\n                ></slot>\n              </ix-group-item>\n            </Fragment>\n          ) : null}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"group.js","sourceRoot":"","sources":["../../../../src/components/group/group.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 */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { hasSlottedElements } from '../utils/shadow-dom';\n\n@Component({\n  tag: 'ix-group',\n  styleUrl: 'group.scss',\n  shadow: true,\n})\nexport class Group {\n  @Element() hostElement!: HTMLIxGroupElement;\n\n  /**\n   * Prevent header from being selectable\n   */\n  @Prop() suppressHeaderSelection = false;\n\n  /**\n   * Group header\n   */\n  @Prop() header: string;\n\n  /**\n   * Group header subtitle\n   */\n  @Prop() subHeader: string;\n\n  /**\n   * Whether the group is collapsed or expanded. Defaults to true.\n   */\n  @Prop({ mutable: true, reflect: true }) collapsed = true;\n\n  /**\n   * Whether the group is selected.\n   */\n  @Prop({ mutable: true, reflect: true }) selected: boolean;\n\n  /**\n   * The index of the selected group entry.\n   * If undefined no group item is selected.\n   */\n  @Prop({ mutable: true, reflect: true }) index: number;\n\n  /**\n   * Expand the group if the header is clicked\n   */\n  @Prop() expandOnHeaderClick = false;\n\n  /**\n   * Emits when whole group gets selected.\n   */\n  @Event() selectGroup: EventEmitter<boolean>;\n\n  /**\n   * Emits when group item gets selected.\n   */\n  @Event() selectItem: EventEmitter<number>;\n\n  /**\n   * Group collapsed\n   */\n  @Event() collapsedChanged: EventEmitter<boolean>;\n\n  @State() itemSelected = false;\n  @State() dropdownTriggerRef: HTMLElement;\n  @State() slotSize = this.groupItems.length;\n  @State() footerVisible = false;\n\n  @State() showExpandCollapsedIcon = false;\n\n  private observer: MutationObserver;\n\n  get dropdownItems() {\n    return Array.from(\n      this.hostElement.querySelectorAll('ix-group-dropdown-item')\n    );\n  }\n\n  get groupItems(): Array<HTMLIxGroupItemElement> {\n    return Array.from(\n      this.hostElement.querySelectorAll('ix-group-item:not(.footer)')\n    );\n  }\n\n  get groupContent() {\n    return this.hostElement.shadowRoot.querySelector('.group-content');\n  }\n\n  private onExpandClick(event: Event) {\n    this.collapsed = !this.collapsed;\n\n    this.collapsedChanged.emit(this.collapsed);\n    event.stopPropagation();\n  }\n\n  private onHeaderClick(event: Event) {\n    this.setGroupSelection(!this.selected);\n\n    if (this.suppressHeaderSelection) {\n      this.onExpandClick(event);\n    }\n  }\n\n  private onItemClick(index: number) {\n    if (index === this.index) {\n      this.index = undefined;\n      this.selectItem.emit(undefined);\n    } else {\n      this.index = index;\n      this.selectItem.emit(index);\n    }\n\n    if (this.index >= 0) {\n      this.itemSelected = true;\n    } else this.itemSelected = false;\n\n    this.setGroupSelection(false);\n  }\n\n  private setGroupSelection(selection: boolean) {\n    if (!this.suppressHeaderSelection) {\n      this.selected = selection;\n      this.selectGroup.emit(this.selected);\n    }\n  }\n\n  private onSlotChange() {\n    const slot = this.hostElement.shadowRoot.querySelector(\n      'slot[name=\"footer\"]'\n    );\n\n    if (slot) {\n      this.footerVisible = hasSlottedElements(slot);\n    }\n  }\n\n  componentWillRender() {\n    this.groupItems.forEach((item, index) => {\n      if (this.selected === true) {\n        item.selected = false;\n        this.index = undefined;\n        this.itemSelected = false;\n        return;\n      }\n      item.selected = index === this.index;\n      item.index = index;\n    });\n  }\n\n  componentDidLoad() {\n    this.observer = createMutationObserver(() => {\n      this.slotSize = this.groupItems.length;\n    });\n\n    this.observer.observe(this.groupContent, {\n      childList: true,\n    });\n\n    this.groupContent.addEventListener(\n      'selectedChanged',\n      (evt: CustomEvent<HTMLIxGroupItemElement>) => {\n        this.onItemClick(evt.detail.index);\n      }\n    );\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'group-header': true,\n            expand: !this.collapsed,\n            selected: this.selected,\n          }}\n          tabindex=\"0\"\n        >\n          <div\n            class=\"group-header-clickable\"\n            onClick={(e) => this.onHeaderClick(e)}\n          >\n            <div\n              class={{\n                'group-header-selection-indicator': true,\n                'group-header-selection-indicator-item-selected':\n                  this.itemSelected,\n              }}\n            ></div>\n            <div class=\"btn-expand-header\">\n              <ix-icon\n                data-testid=\"expand-collapsed-icon\"\n                class={{\n                  hidden: !this.showExpandCollapsedIcon,\n                }}\n                name={\n                  this.collapsed ? 'chevron-right-small' : 'chevron-down-small'\n                }\n                onClick={(e) => this.onExpandClick(e)}\n              ></ix-icon>\n            </div>\n\n            <div class=\"group-header-content\">\n              {this.header ? (\n                <div class=\"group-header-props-container\">\n                  <div class=\"group-header-title\">\n                    <span title={this.header}>{this.header}</span>\n                  </div>\n                  <div class=\"group-subheader\" title={this.subHeader}>\n                    {this.subHeader}\n                  </div>\n                </div>\n              ) : null}\n              <slot name=\"header\"></slot>\n            </div>\n          </div>\n          <ix-group-context-menu>\n            <slot name=\"dropdown\"></slot>\n          </ix-group-context-menu>\n        </div>\n        <div\n          class={{\n            'group-content': true,\n          }}\n        >\n          <div\n            style={{\n              display: this.collapsed ? 'none' : 'contents',\n            }}\n          >\n            <slot\n              onSlotchange={() => {\n                const slot =\n                  this.hostElement.shadowRoot.querySelector('slot:not([name])');\n                this.showExpandCollapsedIcon = hasSlottedElements(slot);\n              }}\n            ></slot>\n            <ix-group-item\n              suppressSelection={true}\n              focusable={false}\n              class={{\n                footer: true,\n                'footer-visible': this.footerVisible,\n              }}\n            >\n              <slot\n                name=\"footer\"\n                onSlotchange={() => this.onSlotChange()}\n              ></slot>\n            </ix-group-item>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/group/test/group.ct.js

@@ -0,0 +1,47 @@
+/*
+ * 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 "../../../tests/utils/test/index";
+test('renders', async ({ mount, page }) => {
+    await mount(`<ix-group></ix-group>`);
+    const group = page.locator('ix-group');
+    await expect(group).toHaveClass(/hydrated/);
+});
+test('hide expand icon initial', async ({ mount, page }) => {
+    await mount(`
+    <ix-group>
+    </ix-group>
+  `);
+    const group = page.locator('ix-group');
+    await expect(group).toHaveClass(/hydrated/);
+    const expandIcon = group.getByTestId('expand-collapsed-icon');
+    await expect(expandIcon).not.toBeVisible();
+    await group.evaluate((group) => {
+        const item = document.createElement('ix-group-item');
+        group.appendChild(item);
+    });
+    await expect(expandIcon).toBeVisible();
+});
+test('show expand icon initial', async ({ mount, page }) => {
+    await mount(`
+    <ix-group>
+      <ix-group-item>Item 1</ix-group-item>
+    </ix-group>
+  `);
+    const group = page.locator('ix-group');
+    await expect(group).toHaveClass(/hydrated/);
+    const expandIcon = group.getByTestId('expand-collapsed-icon');
+    await expect(expandIcon).toBeVisible();
+    await group.evaluate((group) => {
+        const item = group.querySelector('ix-group-item');
+        item.remove();
+    });
+    await expect(expandIcon).not.toBeVisible();
+});
+//# sourceMappingURL=group.ct.js.map

package/dist/collection/components/group/test/group.ct.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"group.ct.js","sourceRoot":"","sources":["../../../../../src/components/group/test/group.ct.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,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;IACxC,MAAM,KAAK,CAAC,uBAAuB,CAAC,CAAC;IACrC,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;IACvC,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;AAC9C,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,0BAA0B,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IACzD,MAAM,KAAK,CAAC;;;GAGX,CAAC,CAAC;IACH,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;IACvC,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAE5C,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAAC,uBAAuB,CAAC,CAAC;IAC9D,MAAM,MAAM,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC;IAE3C,MAAM,KAAK,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE;QAC7B,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;QACrD,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC,CAAC,CAAC;IAEH,MAAM,MAAM,CAAC,UAAU,CAAC,CAAC,WAAW,EAAE,CAAC;AACzC,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,0BAA0B,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IACzD,MAAM,KAAK,CAAC;;;;GAIX,CAAC,CAAC;IACH,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;IACvC,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAE5C,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAAC,uBAAuB,CAAC,CAAC;IAC9D,MAAM,MAAM,CAAC,UAAU,CAAC,CAAC,WAAW,EAAE,CAAC;IAEvC,MAAM,KAAK,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE;QAC7B,MAAM,IAAI,GAAG,KAAK,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;QAClD,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC,CAAC,CAAC;IAEH,MAAM,MAAM,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC;AAC7C,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 */\n\nimport { expect } from '@playwright/test';\nimport { test } from '@utils/test';\n\ntest('renders', async ({ mount, page }) => {\n  await mount(`<ix-group></ix-group>`);\n  const group = page.locator('ix-group');\n  await expect(group).toHaveClass(/hydrated/);\n});\n\ntest('hide expand icon initial', async ({ mount, page }) => {\n  await mount(`\n    <ix-group>\n    </ix-group>\n  `);\n  const group = page.locator('ix-group');\n  await expect(group).toHaveClass(/hydrated/);\n\n  const expandIcon = group.getByTestId('expand-collapsed-icon');\n  await expect(expandIcon).not.toBeVisible();\n\n  await group.evaluate((group) => {\n    const item = document.createElement('ix-group-item');\n    group.appendChild(item);\n  });\n\n  await expect(expandIcon).toBeVisible();\n});\n\ntest('show expand icon initial', async ({ mount, page }) => {\n  await mount(`\n    <ix-group>\n      <ix-group-item>Item 1</ix-group-item>\n    </ix-group>\n  `);\n  const group = page.locator('ix-group');\n  await expect(group).toHaveClass(/hydrated/);\n\n  const expandIcon = group.getByTestId('expand-collapsed-icon');\n  await expect(expandIcon).toBeVisible();\n\n  await group.evaluate((group) => {\n    const item = group.querySelector('ix-group-item');\n    item.remove();\n  });\n\n  await expect(expandIcon).not.toBeVisible();\n});\n"]}

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

@@ -107,6 +107,7 @@
   background-color: var(--theme-group-item--background);
   border: 1px solid transparent;
   color: var(--theme-color-std-text);
+  cursor: pointer;
   padding-left: 2.5rem;
 }
 :host > button:focus-visible {
@@ -155,6 +156,10 @@
   white-space: nowrap;
 }
 
+:host(.suppress-selection) {
+  pointer-events: none;
+}
+
 :host(.selected) {
   border-top-width: 0.062rem !important;
   background-color: var(--theme-color-ghost--selected);
@@ -163,20 +168,20 @@
   background-color: var(--theme-group-item-indicator--background--selected);
 }
 
-:host(:not(.suppress-selection):hover) {
+:host(:hover) {
   background-color: var(--theme-color-ghost--selected-hover);
   border-color: var(--theme-group-item--border-color--hover);
 }
 
-:host(:not(.suppress-selection).selected:hover) {
+:host(.selected:hover) {
   background-color: var(--theme-color-ghost--selected-hover);
 }
 
-:host(:not(.suppress-selection):active) {
+:host(:active) {
   background-color: var(--theme-color-ghost--selected-active);
   border-color: var(--theme-group-item--border-color--active);
 }
 
-:host(:not(.suppress-selection).selected:active) {
+:host(.selected:active) {
   background-color: var(--theme-color-ghost--selected-active);
 }

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

@@ -24,10 +24,10 @@ export class GroupItem {
         this.selectedChanged.emit(this.hostElement);
     }
     render() {
-        return (h(Host, { key: '5d465a80365854b2dc13389fcee91f0e824cf9c6', class: {
+        return (h(Host, { key: 'ec30959a56062acbad4443b9ca91fb8c99125b03', class: {
                 selected: this.selected && !this.suppressSelection,
                 'suppress-selection': this.suppressSelection,
-            } }, h("button", { key: 'df47595b58a38860ec502bb9478b3626a47c9d9d', tabindex: this.focusable ? 0 : -1 }, h("div", { key: '97b2949849401b49e746676b077b9b9f134ba4a0', class: "group-entry-selection-indicator" }), this.icon ? h("ix-icon", { size: "16", name: this.icon }) : null, this.text ? (h("span", { class: "group-entry-text" }, h("span", { title: this.text }, this.text))) : null, this.secondaryText ? (h("span", { class: "group-entry-text-secondary" }, h("span", { title: this.secondaryText }, this.secondaryText))) : null, h("slot", { key: '4b81d50e99262b562ffc5b4745059ad83973c8bf' }))));
+            } }, h("button", { key: 'e29e098d709f657d5109ff840d54e84b7c645d28', tabindex: this.focusable ? 0 : -1 }, h("div", { key: 'd82048e82f3a9de77f1acb19f9500c475f400147', class: "group-entry-selection-indicator" }), this.icon ? h("ix-icon", { size: "16", name: this.icon }) : null, this.text ? (h("span", { class: "group-entry-text" }, h("span", { title: this.text }, this.text))) : null, this.secondaryText ? (h("span", { class: "group-entry-text-secondary" }, h("span", { title: this.secondaryText }, this.secondaryText))) : null, h("slot", { key: '1cde0aba243ca5f3537ce589be9e44d3ba9e2494' }))));
     }
     static get is() { return "ix-group-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/icon-toggle-button/icon-toggle-button.js

@@ -73,7 +73,7 @@ export class IconToggleButton {
             extraClasses: Object.assign({ 'icon-button': true }, this.getIconSizeClass()),
         };
         console.log(baseButtonProps, this.disabled, this.loading);
-        return (h(Host, { key: 'd36e5f7e9bad1ea53f65d5b2b805f69e4e76e4b0', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, h(BaseIconButton, Object.assign({ key: '1e19be2923cec5d80bb27cc96ef50caf267bcd70' }, baseButtonProps))));
+        return (h(Host, { key: '90281a49cd680bd8cf611726bf0c6370452432d1', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, h(BaseIconButton, Object.assign({ key: '12a0e3c4c9654c522dbf65bb43744143b842c44c' }, baseButtonProps))));
     }
     static get is() { return "ix-icon-toggle-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/input-group/input-group.js

@@ -124,7 +124,7 @@ export class InputGroup {
         return width;
     }
     render() {
-        return (h(Host, { key: 'd347bbb23bf05a8315f422ad77eb519736cae42a', class: { disabled: this.disabled } }, h("div", { key: '11b71f6e732610672b81fb84c68bce4263dc05ce', class: "group group-start" }, h("slot", { key: '0dcab523c356c1a85779c9d04fff293a99988b2c', name: "input-start" })), h("slot", { key: 'bc6e83ae8ffb35fa6ab3004de1363d6d1016a912' }), h("div", { key: 'dd56e9147b66fef48e6ed4e95a4f666079304650', class: "group group-end" }, h("slot", { key: 'ba31566fea59c9bcb35cca6512dc317b11c769cd', name: "input-end" }))));
+        return (h(Host, { key: '32aef634c699370147d06d110ecf4bfee619f657', class: { disabled: this.disabled } }, h("div", { key: '285517df8b9cb66cc63de951bd9146ca4dd0d098', class: "group group-start" }, h("slot", { key: '79af98dc6dd8352c768d5eb14346f39f88978bac', name: "input-start" })), h("slot", { key: '070682be2e58879ec9b1d2adeac9031b75d52a14' }), h("div", { key: 'f9d0fdbdafe8a23d23e4ce11e2b0c07dfbeda159', class: "group group-end" }, h("slot", { key: '02c882edae38c3fd655ab1abe82abd9f016bb09c', name: "input-end" }))));
     }
     static get is() { return "ix-input-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/key-value-list/key-value-list.js

@@ -15,7 +15,7 @@ export class KeyValueList {
         this.striped = undefined;
     }
     render() {
-        return (h(Host, { key: '93f8b95ef19267858e92d059f1b2840ecf3a2e5c', class: { keyValueList: true, 'keyValueList--striped': this.striped } }, h("slot", { key: '7a41ec73e964e56550283fc740bb752e54e09882' })));
+        return (h(Host, { key: '754310ec87f8ab82d3cddc18beea932d72136d73', class: { keyValueList: true, 'keyValueList--striped': this.striped } }, h("slot", { key: '2dc0039fc53a720330b1e9b175ff668b72dd80f6' })));
     }
     static get is() { return "ix-key-value-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/kpi/kpi.js

@@ -33,13 +33,13 @@ export class Kpi {
         return tooltip;
     }
     render() {
-        return (h(Host, { key: '751730b5f1dbc31cc005dadddcaf39544e84f836', title: this.getTooltipText(), tabindex: "1", class: {
+        return (h(Host, { key: 'd6ad8fb6abdd54276ed4d6e99602abc765b7224d', title: this.getTooltipText(), tabindex: "1", class: {
                 stacked: this.orientation === 'vertical',
-            } }, h("div", { key: '45944d031045ae7f4305b2f5d9cb1b3504072913', class: {
+            } }, h("div", { key: 'c42c84ed0f27a7b1bd083bb4fb7b424a54e2f892', class: {
                 'kpi-container': true,
                 alarm: this.state === 'alarm',
                 warning: this.state === 'warning',
-            } }, h("span", { key: '82c42a25610de7571d98be7fdc3214c9bb281bd8', class: "kpi-label" }, this.getStateIcon(), h("span", { key: '5197e0eb51b1847b9d7d5dc62aff3d136eebf9ec', class: "kpi-label-text" }, this.label)), h("span", { key: '3270922b848fd2ff6be53519d7b57a2509da68c2', class: "kpi-value-container" }, h("span", { key: '913974768deb16e9fb8d3e90f45a9d5c4dafc8cf', class: "kpi-value" }, this.value), this.unit ? h("span", { class: "kpi-unit" }, this.unit) : ''))));
+            } }, h("span", { key: 'fdd055e5a2b67ef84a77c6cef50f728506793f3f', class: "kpi-label" }, this.getStateIcon(), h("span", { key: '9fb3820732fdc053135215cf3e39df0fb7ec90cc', class: "kpi-label-text" }, this.label)), h("span", { key: 'e4856bfd98c838a15fc28e28754899d36007e778', class: "kpi-value-container" }, h("span", { key: 'e8757664f1480828a940d17be00822bbfa7e4c39', class: "kpi-value" }, this.value), this.unit ? h("span", { class: "kpi-unit" }, this.unit) : ''))));
     }
     static get is() { return "ix-kpi"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/link-button/link-button.js

@@ -17,13 +17,13 @@ export class LinkButton {
         this.target = '_self';
     }
     render() {
-        return (h(Host, { key: '52fa8b05a14564aa2d422fe3a2612224854b37a6' }, h("a", { key: '301f380e66162b16624c15048f7f3082aac9b334', title: this.url, tabindex: "0", class: {
+        return (h(Host, { key: '0308562a5da54b5dbc6e5fff61ff5c40458220a4' }, h("a", { key: '31312e87d8ec1a6876d0f9f0d119ec5a99e3d7df', title: this.url, tabindex: "0", class: {
                 'link-button': true,
                 disabled: this.disabled,
-            }, href: this.disabled ? undefined : this.url, target: this.target }, h("ix-icon", { key: 'ed0b948e2a66635d666db533fbdcf63c321b76d9', class: "icon", name: 'chevron-right-small', size: "16" }), h("div", { key: '20c5ff5cc5c3b9e4974d866a30c928874711f4e1', class: {
+            }, href: this.disabled ? undefined : this.url, target: this.target }, h("ix-icon", { key: 'f2f046c1695abcb7ab6c5aae112c78cd9ef4163d', class: "icon", name: 'chevron-right-small', size: "16" }), h("div", { key: '04a4a97aa51211e18a585c74aff33b9cd5ed6bc1', class: {
                 link: true,
                 disabled: this.disabled,
-            } }, h("slot", { key: 'b36befb3534304704d320efca6c8b825156394cc' })))));
+            } }, h("slot", { key: 'a1d09c078e9a4a63ca06a4bbc65c8b8d3e8e1e89' })))));
     }
     static get is() { return "ix-link-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/map-navigation/map-navigation.js

@@ -155,11 +155,11 @@ export class MapNavigation {
         this.hasContentHeader = (nodes === null || nodes === void 0 ? void 0 : nodes.length) !== 0;
     }
     render() {
-        return (h(Host, { key: 'da13112a9c8e48074fef6ee0020b430e504f8775' }, h("slot", { key: 'f1796d6932ecbd587e1a347afb1d2adef4a3cc7a', name: "menu" }), h("div", { key: 'be44e812efee522740f272b47c6fa8c5bb92ca12', class: "map-nav" }, h("div", { key: '3ca2fc131d03b610fbd3d502c9a3407391edccc7', class: "map-nav-sidebar" }, h("div", { key: '9ff12bebf91ca086117a8b96b988cd062fc97a04', class: "map-nav-header" }, h("ix-application-header", { key: '6f7db93363381306a8bb841f4bc674c66cf2c1cc', name: this.applicationName, class: "map-nav-header-brand" }, h("slot", { key: 'ad878765b9f0be087a4885c0a28333ad8e8b7a75', slot: "logo", name: "logo" }))), h("div", { key: 'af230a4eb04548576bef004d95b8af4c46318bdd', class: "map-nav-sidebar-content" }, h("div", { key: '7100bcc4d0bd30ac9d556d953efb8854f954071c', class: "map-nav-sidebar-static-content" }, h("div", { key: 'cb8fc4df05ec589ae63a25355430bae657154c02', class: "map-nav-title" }, this.navigationTitle), this.hideContextMenu ? ('') : (h("ix-icon-button", { icon: 'context-menu', ghost: true, size: "24", variant: "secondary", onClick: (_) => this.contextMenuClick.emit() }))), h("div", { key: 'c79ad0be478058858416fa64597efc92efe53006', class: "map-nav-sidebar-user-content" }, h("slot", { key: '5af678364192e6cbd18973ff052c42f97332fa26', name: "sidebar-content" })))), h("div", { key: '23f214ac776d9d4049f2e9a6438cd6ee9d915da7', class: "content" }, h("div", { key: '1065a1c4ec51653f34700ed66e4ea9cf24e172a4', class: {
+        return (h(Host, { key: '2946dcb874fe6142c5e46fc0e631528f9c252acd' }, h("slot", { key: '1dade6736fb8ca41922269af3613069109e0f7e1', name: "menu" }), h("div", { key: 'ebf94a90f8d8bc250f50e3b6b81ab9529403ced4', class: "map-nav" }, h("div", { key: 'ca6e3fb3f7222e415a2c3b0a0485852e0d24eb27', class: "map-nav-sidebar" }, h("div", { key: 'eedd75c6ed28651eb0dacc304c2a6bb74a3acb48', class: "map-nav-header" }, h("ix-application-header", { key: '29c589f85db676ffd91bb12488e70de7e2e4dbe1', name: this.applicationName, class: "map-nav-header-brand" }, h("slot", { key: 'c19497c92151dffa74f57177b67b4ba4e0927598', slot: "logo", name: "logo" }))), h("div", { key: '4b3f49c7a748481ba6644748cf81b97346a93e86', class: "map-nav-sidebar-content" }, h("div", { key: '2f3ae2b3b2b82259c9d50f84446b3c3b9187595e', class: "map-nav-sidebar-static-content" }, h("div", { key: '55256b8072af12003597c805c5b79e5996326199', class: "map-nav-title" }, this.navigationTitle), this.hideContextMenu ? ('') : (h("ix-icon-button", { icon: 'context-menu', ghost: true, size: "24", variant: "secondary", onClick: (_) => this.contextMenuClick.emit() }))), h("div", { key: 'fb536c51269368ac94db2464fa040992c1bfb272', class: "map-nav-sidebar-user-content" }, h("slot", { key: '46a3481ffdb3b1fd94dbcb3e4100d36abd3ec800', name: "sidebar-content" })))), h("div", { key: '68e57564835c8813e97a6a5ca27bb6560744b635', class: "content" }, h("div", { key: '51fe8de82f713940d867a5d369a4e9c520f8a13b', class: {
                 'map-nav-header-content': true,
                 'bg-2': true,
                 empty: !this.hasContentHeader,
-            } }, h("slot", { key: '902317e41640c10d20d465f69e234c57905a59ee', name: "content-header", onSlotchange: (e) => this.checkHasContentHeader(e) })), h("main", { key: '24be144f96016b88614f6f28e37986cb43a5564d' }, h("slot", { key: 'eea65a81824e09e9f8e7a315ce4fab99aec83c79' }), h("slot", { key: '9b9e19fc09f21d77e61fd772695c5d9e25e37d98', name: "overlay" }))))));
+            } }, h("slot", { key: 'bb2fd5b5bb1577353c85780fa3f285702f1d224e', name: "content-header", onSlotchange: (e) => this.checkHasContentHeader(e) })), h("main", { key: '2735c1d81e97f98b9a9e5652ee7d281e233a21a6' }, h("slot", { key: '830e9656af5d9e46e0d39202abd82ad9fe1ce7fa' }), h("slot", { key: '7bf4f8bce525e3572acdeb08a852e029e7f5cd09', name: "overlay" }))))));
     }
     static get is() { return "ix-map-navigation"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/map-navigation-overlay/map-navigation-overlay.js

@@ -44,14 +44,14 @@ export class MapNavigationOverlay {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: 'd9bbc6c5b08a7104ae14233a90d73803a9d711f1' }, h("div", { key: '150555600e31d6a9108c71a79cd59ce10aa8000e', class: "overlay-header" }, h("div", { key: '9a9b9599e9e7e2beabf0b01b699be49357e678fe', class: {
+        return (h(Host, { key: 'c992b5ea02d714ebf9ca9b567c5047d74dc588c7' }, h("div", { key: '6b2312354d083296f7c2daca376d82bd33f50b29', class: "overlay-header" }, h("div", { key: 'be432f47e376532f48a5408f4f080c2a30af9f9c', class: {
                 'color-indicator': true,
                 'd-none': ((_a = this.iconColor) !== null && _a !== void 0 ? _a : this.color) === undefined,
             }, style: {
                 'background-color': ((_b = this.iconColor) !== null && _b !== void 0 ? _b : this.color)
                     ? `var(--theme-${(_c = this.iconColor) !== null && _c !== void 0 ? _c : this.color})`
                     : '',
-            } }), h("div", { key: 'eb2f2c1204e672cbc5d4abeac43b0e88d556a921', class: "overlay-header-content" }, h("ix-icon", { key: '4fc7a68f6826d5c39accd056e322bc9210032e8e', size: "32", name: this.icon }), h("span", { key: '4cfbfacf6e6a9fab19cdf3d162261f5851029db9', class: "overlay-header-title", title: this.name }, this.name)), h("ix-icon-button", { key: 'c77d6dafb88168c83d50dd889dc56305516c0af0', class: "overlay-close", ghost: true, icon: 'close', size: "24", onClick: () => this.closeOverlay() })), h("slot", { key: '01f890dbc18fbc62b76e5f07d6fc0e53edecfd34' })));
+            } }), h("div", { key: '41fe4514c4076704cdad94ccef438401ff7f4e41', class: "overlay-header-content" }, h("ix-icon", { key: '815d0df9d50aa9dd91ccd094a7801c215c0f3f7e', size: "32", name: this.icon }), h("span", { key: '670420d4703b65b39c9b0dc4d9031fadb73934da', class: "overlay-header-title", title: this.name }, this.name)), h("ix-icon-button", { key: '3ef17d0836b665787e22f6e9da0e14ccecc15d52', class: "overlay-close", ghost: true, icon: 'close', size: "24", onClick: () => this.closeOverlay() })), h("slot", { key: '4328f4ab00517bc4de787fc45117c14afc309efb' })));
     }
     static get is() { return "ix-map-navigation-overlay"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/menu/menu-expand-icon.js

@@ -46,7 +46,7 @@ export class MenuExpandIcon {
         return this.getSmallScreenIcon();
     }
     render() {
-        return (h(Host, { key: '36ee1cac55573a7413f6fd89635987a1a38d3a1d', class: {
+        return (h(Host, { key: '01c334cc036c65c1ba58b1eb2266fec201e7204e', class: {
                 expanded: this.expanded,
             } }, this.getMenuIcon()));
     }

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

@@ -382,44 +382,44 @@ export class Menu {
     }
     render() {
         var _a;
-        return (h(Host, { key: '61f040004004c0ac92ac737c133bbdc5c8a0479d', class: {
+        return (h(Host, { key: '04381993d2b3de312e2d2cf9960e4674f817d112', class: {
                 expanded: this.expand,
                 [`breakpoint-${this.breakpoint}`]: true,
-            }, slot: "menu" }, h("aside", { key: 'dd588610dfacb86ede84c8ebc73ad8653e8d31e2', class: {
+            }, slot: "menu" }, h("aside", { key: '03991cabbeb7fbc4ed620e2cc65739127c76c2e5', class: {
                 menu: true,
                 expanded: this.expand,
             }, onClick: () => {
                 this.resetActiveTab();
-            } }, h("div", { key: '56538ac36be893ab8b78c8859da08b05a2f05201', class: "menu-buttons" }, this.breakpoint !== 'sm' && (h("ix-menu-expand-icon", { breakpoint: this.breakpoint, expanded: this.expand, pinned: this.pinned, class: "menu-expand-icon", ixAriaLabel: this.i18nExpandSidebar, onClick: async () => this.toggleMenu() })), this.breakpoint === 'sm' &&
-            this.applicationLayoutContext.appSwitchConfig && (h("ix-icon-button", { onClick: () => showAppSwitch(this.applicationLayoutContext.appSwitchConfig), icon: "apps", ghost: true }))), h("div", { key: '36df72f91c00ed97845198f30676475202ff000d', id: "menu-tabs", style: {
+            } }, h("div", { key: 'db75ed295b5d528f63a557168acc87dbb0f9f7cc', class: "menu-buttons" }, this.breakpoint !== 'sm' && (h("ix-menu-expand-icon", { breakpoint: this.breakpoint, expanded: this.expand, pinned: this.pinned, class: "menu-expand-icon", ixAriaLabel: this.i18nExpandSidebar, onClick: async () => this.toggleMenu() })), this.breakpoint === 'sm' &&
+            this.applicationLayoutContext.appSwitchConfig && (h("ix-icon-button", { onClick: () => showAppSwitch(this.applicationLayoutContext.appSwitchConfig), icon: "apps", ghost: true }))), h("div", { key: '2720ecc044b969dce2c30ce4caebc337a2c14fdf', id: "menu-tabs", style: {
                 display: 'contents',
-            }, onClick: (e) => this.onMenuItemsClick(e) }, h("div", { key: '2af53795b7e3250848d9014271f97ea5cd330672', class: "tabs-shadow-container" }, h("div", { key: 'bcf6e5caf81a5eee24d6575923c6b7694742e5a0', class: {
+            }, onClick: (e) => this.onMenuItemsClick(e) }, h("div", { key: '41cf30c3ff12c6bc4b6cbee1b7ac6e38e0591a8e', class: "tabs-shadow-container" }, h("div", { key: '1ab4dfeb9512cd11553c3cf957f499cb3f3f0874', class: {
                 'tabs--shadow': true,
                 'tabs--shadow-top': true,
                 'tabs--shadow--show': this.itemsScrollShadowTop,
-            } }), h("div", { key: '8bf83467772dabd34f296de37f5926a935b9facd', class: {
+            } }), h("div", { key: '13b064b021d8cc95748336a09b2abe102c43255c', class: {
                 tabs: true,
                 'show-scrollbar': this.expand,
-            }, onScroll: () => this.handleOverflowIndicator() }, h("div", { key: 'ac25103b4145a4c3ce9426119f32278812dfd908', class: "menu-avatar" }, h("slot", { key: '2f4f9d54fc218d4a8d87b74317000aee7b4e613a', name: "ix-menu-avatar" })), h("slot", { key: '87e191c1a7c73eca7f58eed464affbcd2baa0812', name: "home" }), this.breakpoint !== 'sm' || !this.isHiddenFromViewport() ? (h("slot", null)) : null), h("div", { key: '85d1018c78bf76b49eb9162357e8862ff6fb6ed5', class: {
+            }, onScroll: () => this.handleOverflowIndicator() }, h("div", { key: '56b8bdaaf62dcb141c05ac3f0d85f212280ae3be', class: "menu-avatar" }, h("slot", { key: '71558d01cc5c4402daffa2a14565f9413f86eb38', name: "ix-menu-avatar" })), h("slot", { key: 'a9769cfeafc4a704ef6bd5b3ba8a067599c1d0eb', name: "home" }), this.breakpoint !== 'sm' || !this.isHiddenFromViewport() ? (h("slot", null)) : null), h("div", { key: '1207b0712c13e075944db84015646e80c36384cf', class: {
                 'tabs--shadow': true,
                 'tabs--shadow-bottom': true,
                 'tabs--shadow--show': this.itemsScrollShadowBottom,
-            } }))), h("div", { key: '28adcb235d366f352575973034ff5d2d7dca1bc0', class: "bottom-tab-divider" }), this.settings ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "settings", class: {
+            } }))), h("div", { key: 'bf3b36fd14b0845c50c554fa3a160165fcb7cb4a', class: "bottom-tab-divider" }), this.settings ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "settings", class: {
                 'internal-tab': true,
                 'bottom-tab': true,
                 active: this.showSettings,
-            }, icon: 'cogwheel', onClick: async () => this.toggleSettings(!this.showSettings) }, this.i18nSettings)) : null, h("div", { key: 'f87516229b665d80e620d9b96a85247e970733a4', onClick: (e) => this.onMenuItemsClick(e) }, h("slot", { key: 'fac63e22b70435a22482af1fee8595e3a510ad6e', name: "bottom" })), h("div", { key: '150bea99ffcfe3277da5f42ff27b57b4dc9fc6ec', id: "popover-area" }), this.about ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "aboutAndLegal", class: {
+            }, icon: 'cogwheel', onClick: async () => this.toggleSettings(!this.showSettings) }, this.i18nSettings)) : null, h("div", { key: '6ed7e214926341ed613df5586c4e03f34cc75147', onClick: (e) => this.onMenuItemsClick(e) }, h("slot", { key: '235d19eade65b8a3005f81dba02869ee8185abb8', name: "bottom" })), h("div", { key: '1ab169504cb519a9634ae808ea9be0a062c60e8f', id: "popover-area" }), this.about ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "aboutAndLegal", class: {
                 'internal-tab': true,
                 'bottom-tab': true,
                 active: this.showAbout,
-            }, icon: 'info', onClick: async () => this.toggleAbout(!this.showAbout) }, this.i18nLegal)) : null, this.enableToggleTheme ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "toggleTheme", onClick: () => themeSwitcher.toggleMode(), class: "internal-tab bottom-tab", icon: 'light-dark' }, this.i18nToggleTheme)) : null, this.enableMapExpand || ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.sidebar) ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "menu-collapse", onClick: () => this.sidebarToggle(), class: "internal-tab bottom-tab", icon: `${this.getCollapseIcon()}` }, this.getCollapseText())) : null), h("div", { key: 'f45c34fbbaa23c7b1918a8468adb42f535a72444', class: {
+            }, icon: 'info', onClick: async () => this.toggleAbout(!this.showAbout) }, this.i18nLegal)) : null, this.enableToggleTheme ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "toggleTheme", onClick: () => themeSwitcher.toggleMode(), class: "internal-tab bottom-tab", icon: 'light-dark' }, this.i18nToggleTheme)) : null, this.enableMapExpand || ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.sidebar) ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "menu-collapse", onClick: () => this.sidebarToggle(), class: "internal-tab bottom-tab", icon: `${this.getCollapseIcon()}` }, this.getCollapseText())) : null), h("div", { key: '95766018d4ef14f54142f69b4193c21378732930', class: {
                 'menu-overlay': true,
                 visible: this.isOverlayVisible(),
                 expanded: this.expand,
             }, onTransitionEnd: () => {
                 this.isTransitionDisabled = true;
                 this.checkTransition();
-            } }, h("div", { key: 'a404af2395bf1659555e8581687564ded60f4811', class: 'menu-overlay-container' }, this.showSettings ? h("slot", { name: "ix-menu-settings" }) : null), h("div", { key: '03b635c41744e4dea67330f02bfe89eac4f1ad82', class: 'menu-overlay-container' }, this.showAbout ? h("slot", { name: "ix-menu-about" }) : null))));
+            } }, h("div", { key: '01080a1085e7cf7805552e4226e5af59be81ed0b', class: 'menu-overlay-container' }, this.showSettings ? h("slot", { name: "ix-menu-settings" }) : null), h("div", { key: '1f432ce86c44d5d1460345b84f2c3d16dbf8c68e', class: 'menu-overlay-container' }, this.showAbout ? h("slot", { name: "ix-menu-about" }) : null))));
     }
     static get is() { return "ix-menu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -26,7 +26,7 @@ export class MenuAbout {
         forceUpdate(this.el);
     }
     render() {
-        return h(MenuTabs, { key: '1e1fb130f2d7ea2cc703621c6c4ef91cbe97c1bc', context: this });
+        return h(MenuTabs, { key: 'dc8ff17b6bee972f3ed647d700db41cad0125aa1', context: this });
     }
     static get is() { return "ix-menu-about"; }
     static get encapsulation() { return "shadow"; }
@@ -71,7 +71,7 @@ export class MenuAbout {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Label of first tab"
+                    "text": "Content of the header"
                 },
                 "attribute": "label",
                 "reflect": false,

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

@@ -1 +1 @@
-{"version":3,"file":"menu-about.js","sourceRoot":"","sources":["../../../../src/components/menu-about/menu-about.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,WAAW,EACX,CAAC,EACD,IAAI,EACJ,KAAK,EACL,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAEL,UAAU,EACV,MAAM,GACP,MAAM,oCAAoC,CAAC;AAO5C,MAAM,OAAO,SAAS;;;qBAYJ,2BAA2B;oBAK5B,KAAK;;;IAUpB,SAAS,CAAC,KAAa;QACrB,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IACtB,CAAC;IAED,iBAAiB;QACf,UAAU,CAAC,IAAI,CAAC,CAAC;IACnB,CAAC;IAED,gBAAgB;QACd,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACvB,CAAC;IAED,MAAM;QACJ,OAAO,EAAC,QAAQ,qDAAC,OAAO,EAAE,IAAI,GAAI,CAAC;IACrC,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  forceUpdate,\n  h,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { MenuTabs } from '../utils/menu-tabs/menu-tabs-fc';\nimport {\n  CustomCloseEvent,\n  initialize,\n  setTab,\n} from '../utils/menu-tabs/menu-tabs-utils';\n\n@Component({\n  tag: 'ix-menu-about',\n  styleUrl: 'menu-about.scss',\n  shadow: true,\n})\nexport class MenuAbout {\n  @Element() el!: HTMLIxMenuAboutElement;\n\n  /**\n   * Active tab\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable\n  @Prop({ mutable: true }) activeTabLabel: string;\n\n  /**\n   * Label of first tab\n   */\n  @Prop() label = 'About & legal information';\n\n  /**\n   * Internal\n   */\n  @Prop() show = false;\n\n  /**\n   * About and Legal closed\n   */\n  @Event() close: EventEmitter<CustomCloseEvent>;\n\n  @State() items: HTMLIxMenuAboutItemElement[];\n\n  @Watch('activeTabLabel')\n  updateTab(label: string) {\n    setTab(this, label);\n  }\n\n  componentWillLoad() {\n    initialize(this);\n  }\n\n  componentDidLoad() {\n    forceUpdate(this.el);\n  }\n\n  render() {\n    return <MenuTabs context={this} />;\n  }\n}\n"]}
+{"version":3,"file":"menu-about.js","sourceRoot":"","sources":["../../../../src/components/menu-about/menu-about.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,WAAW,EACX,CAAC,EACD,IAAI,EACJ,KAAK,EACL,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAEL,UAAU,EACV,MAAM,GACP,MAAM,oCAAoC,CAAC;AAO5C,MAAM,OAAO,SAAS;;;qBAYJ,2BAA2B;oBAK5B,KAAK;;;IAUpB,SAAS,CAAC,KAAa;QACrB,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IACtB,CAAC;IAED,iBAAiB;QACf,UAAU,CAAC,IAAI,CAAC,CAAC;IACnB,CAAC;IAED,gBAAgB;QACd,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACvB,CAAC;IAED,MAAM;QACJ,OAAO,EAAC,QAAQ,qDAAC,OAAO,EAAE,IAAI,GAAI,CAAC;IACrC,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  forceUpdate,\n  h,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { MenuTabs } from '../utils/menu-tabs/menu-tabs-fc';\nimport {\n  CustomCloseEvent,\n  initialize,\n  setTab,\n} from '../utils/menu-tabs/menu-tabs-utils';\n\n@Component({\n  tag: 'ix-menu-about',\n  styleUrl: 'menu-about.scss',\n  shadow: true,\n})\nexport class MenuAbout {\n  @Element() el!: HTMLIxMenuAboutElement;\n\n  /**\n   * Active tab\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable\n  @Prop({ mutable: true }) activeTabLabel: string;\n\n  /**\n   * Content of the header\n   */\n  @Prop() label = 'About & legal information';\n\n  /**\n   * Internal\n   */\n  @Prop() show = false;\n\n  /**\n   * About and Legal closed\n   */\n  @Event() close: EventEmitter<CustomCloseEvent>;\n\n  @State() items: HTMLIxMenuAboutItemElement[];\n\n  @Watch('activeTabLabel')\n  updateTab(label: string) {\n    setTab(this, label);\n  }\n\n  componentWillLoad() {\n    initialize(this);\n  }\n\n  componentDidLoad() {\n    forceUpdate(this.el);\n  }\n\n  render() {\n    return <MenuTabs context={this} />;\n  }\n}\n"]}

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

@@ -19,7 +19,7 @@ export class MenuAboutItem {
         });
     }
     render() {
-        return (h(Host, { key: '963b59afed12d8bba0b4107da846b433bc451b1f' }, h("slot", { key: 'fbea143350cd9850db1526e19363f7d8632035af' })));
+        return (h(Host, { key: 'db029b1d15d652d75c93dfc429bf154196d9b9aa' }, h("slot", { key: '8564c8182628fd41a29f5adc896d6482b5ce3ada' })));
     }
     static get is() { return "ix-menu-about-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/menu-about-news/menu-about-news.js

@@ -17,16 +17,16 @@ export class MenuAboutNews {
         this.expanded = false;
     }
     render() {
-        return (h(Host, { key: '96d424d34a1a660200da006c7e00732871be3864', class: {
+        return (h(Host, { key: '39cfad7d2abb6147661da57bc79b528040ea591d', class: {
                 expanded: this.expanded,
                 show: !this.show,
-            } }, h("div", { key: 'de1e583eaf521a4c09fd2319a170f7450901bf3a', class: "banner-container" }, h("ix-icon", { key: 'f132c4275fcc0dfc926ca416d366c6cba0f65e24', color: "color-inv-contrast-text", name: 'shout', size: "32" }), h("svg", { key: 'c6a66eab455135e55ea0623e75fb8c9a7d7ab921', viewBox: "0 0 48 56", xmlns: "http://www.w3.org/2000/svg" }, h("polygon", { key: 'd7373ab9e7784faee3308be7792bead6bea418d4', points: "0 0 48 0 48 56 24 48 0 56" }))), h("div", { key: 'ac563f6a0828c72376a7bac6ad1e00a44f324e6e', class: "cui-popover-news-header" }, h("ix-typography", { key: '6aceab1232844f6af7f7fb024f3d6a2810df7285', variant: "default-title-single" }, this.label)), h("ix-icon-button", { key: '1ac11020750a1c5753d06b1af8cd6583a7dba381', size: "24", icon: 'close', ghost: true, onClick: () => {
+            } }, h("div", { key: '6257ae03e7a15a1712ee5e89db3b0fb7c646d211', class: "banner-container" }, h("ix-icon", { key: 'f2bac5de5b7ec1f83fd93b7a523ed36efb262ec8', color: "color-inv-contrast-text", name: 'shout', size: "32" }), h("svg", { key: 'cac47b22376f5e4541fba3b08fcf6a9e2e6bc385', viewBox: "0 0 48 56", xmlns: "http://www.w3.org/2000/svg" }, h("polygon", { key: '2bab22f0e230dfb4b90da92d2a09c5fc0c8aaf85', points: "0 0 48 0 48 56 24 48 0 56" }))), h("div", { key: '36dabd8f389b71c803ed7e26fb5038811f10f43a', class: "cui-popover-news-header" }, h("ix-typography", { key: 'a82ebe9ebb3a0aee9fe276b37381475d326dfe92', variant: "default-title-single" }, this.label)), h("ix-icon-button", { key: '1b8e63ffaee5befe53c02e772d9f018e29bbf574', size: "24", icon: 'close', ghost: true, onClick: () => {
                 this.show = false;
                 this.closePopover.emit();
-            } }), h("div", { key: '4d599b682868f47e16762e7e30383aa01b96ce2d', class: "slot-container" }, h("slot", { key: '3ddafdf4636c32e7a785338cea83f893b796177d' })), this.aboutItemLabel ? (h("div", { class: "cui-popover-news-footer" }, h("ix-button", { variant: "primary", onClick: (e) => {
+            } }), h("div", { key: '8c18be6b3e1c086c36f02031f2656d8d6122fe6b', class: "slot-container" }, h("slot", { key: '8d784c09bffab1c553c812ed08f4f38f27ab93db' })), this.aboutItemLabel ? (h("div", { class: "cui-popover-news-footer" }, h("ix-button", { variant: "primary", onClick: (e) => {
                 this.show = false;
                 this.showMore.emit(e);
-            } }, this.i18nShowMore))) : null, h("div", { key: 'a21ff21ba788aaa5186bd0ed4e281a9d7ad70911', id: "arrow" })));
+            } }, this.i18nShowMore))) : null, h("div", { key: 'ff66eddc3cab62ee4dc48b2680f99e737cee31bf', id: "arrow" })));
     }
     static get is() { return "ix-menu-about-news"; }
     static get encapsulation() { return "shadow"; }

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

@@ -28,9 +28,9 @@ export class MenuAvatar {
         this.showContextMenu = elements.length !== 0;
     }
     render() {
-        return (h(Host, { key: '658e27fb6385bda64d9d7f68f77eb70a4c65ba6a', slot: "ix-menu-avatar" }, h("button", { key: '42024cf4bd2c5d350b9369ebeba474a62f006639', class: "nav-item top-item avatar no-hover", title: this.top, id: this.avatarElementId, tabIndex: 0 }, h("ix-avatar", { key: 'a4e855427e1fe55b6d866895587b53cda99b3b3b', image: this.image, initials: this.initials }), h("div", { key: 'c41428278d3309934761759d5f1f3587e2bff850', class: "avatar-name" }, h("span", { key: '9504c5acb6d1903068897e3a151116428f5e05da', class: "text-default-single", title: this.top }, this.top), h("span", { key: '423bfa9d792d7c0c92500cb961c21d15f9d2a0cd', class: "text-default-single", title: this.bottom }, this.bottom))), h("ix-dropdown", { key: 'cf520e8c7e940c05bb7ff850ba86d137ca606ab5', trigger: this.hostElement, placement: 'right-start', hidden: !this.showContextMenu && !this.showLogoutButton, offset: {
+        return (h(Host, { key: '5ce6a18ce0ad5abe546f26eb0792ae9277ee3330', slot: "ix-menu-avatar" }, h("button", { key: '1b3da5028c32b38c396aab0e4122772be4b10ae4', class: "nav-item top-item avatar no-hover", title: this.top, id: this.avatarElementId, tabIndex: 0 }, h("ix-avatar", { key: '237e2b1841f7070bfb11ef83a72e8d427fbf1316', image: this.image, initials: this.initials }), h("div", { key: 'e1091468ca746a3e471b83ee1f3337d8cfe2baf6', class: "avatar-name" }, h("span", { key: '63e8130a4b5f15a35b4d3eac2f3bcaea30243c28', class: "text-default-single", title: this.top }, this.top), h("span", { key: '378fe56221b406bf0846304938b8ca122ac626cc', class: "text-default-single", title: this.bottom }, this.bottom))), h("ix-dropdown", { key: 'dd7e541e91c15b4d1c309d01ed75666f5cdb61fa', trigger: this.hostElement, placement: 'right-start', hidden: !this.showContextMenu && !this.showLogoutButton, offset: {
                 mainAxis: 16,
-            } }, h("slot", { key: '4fcfea4ec3e971d4d29fedd00d556405fdb77209', onSlotchange: () => this.onSlotChange() }), this.showLogoutButton ? (h("ix-menu-avatar-item", { label: this.i18nLogout, icon: 'log-out', onClick: (e) => {
+            } }, h("slot", { key: '671b121c9b7313526fa3ab075cb0cafaacf67503', onSlotchange: () => this.onSlotChange() }), this.showLogoutButton ? (h("ix-menu-avatar-item", { label: this.i18nLogout, icon: 'log-out', onClick: (e) => {
                 this.logoutClick.emit(e);
             } })) : null)));
     }

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

@@ -19,7 +19,7 @@ export class MenuAvatarItem {
         return this.dropdownItemRef.waitForCurrent();
     }
     render() {
-        return (h("ix-dropdown-item", { key: '29fc32af98771990e67a0f31197db8d20151d3d0', ref: this.dropdownItemRef, icon: this.icon, label: this.label, onClick: (e) => this.itemClick.emit(e) }));
+        return (h("ix-dropdown-item", { key: 'daf1c8be62496e8c4240eea2394857abb98497d0', ref: this.dropdownItemRef, icon: this.icon, label: this.label, onClick: (e) => this.itemClick.emit(e) }));
     }
     static get is() { return "ix-menu-avatar-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -139,7 +139,7 @@ export class MenuCategory {
         }
     }
     render() {
-        return (h(Host, { key: '17d25dacba5afe08d75eb84c1063856e79efa255', class: {
+        return (h(Host, { key: 'e62e654ac84f229e1f669a732c051d96848c730d', class: {
                 expanded: this.showItems,
             }, onPointerEnter: () => {
                 this.enterLeaveDebounce.onEnter();
@@ -148,14 +148,14 @@ export class MenuCategory {
                     return;
                 }
                 this.enterLeaveDebounce.onLeave();
-            } }, h("ix-menu-item", { key: '3d7cc544297fbf21c5948bd390f9a65fa3e9892f', class: 'category-parent', active: this.isNestedItemActive(), notifications: this.notifications, icon: this.icon, onClick: (e) => this.onCategoryClick(e), onFocus: () => this.onPointerEnter(), isCategory: true }, h("div", { key: '44cf05761426822b2a0d5ad7b43bc0ac84b66ef2', class: "category" }, h("div", { key: '7d0c2c9efff3d54e3ed5eb0f19294703f7cf853f', class: "category-text" }, this.label), h("ix-icon", { key: '1eeb7a9da2b3b2cbf9f2b37f1e7d42162b7f65e5', name: 'chevron-down-small', class: {
+            } }, h("ix-menu-item", { key: 'f64066062bdd83ee3c49228d04877fbe78eb15ce', class: 'category-parent', active: this.isNestedItemActive(), notifications: this.notifications, icon: this.icon, onClick: (e) => this.onCategoryClick(e), onFocus: () => this.onPointerEnter(), isCategory: true }, h("div", { key: '89f722bf950f5428e5b090e14a1ea68be2a27536', class: "category" }, h("div", { key: 'd72fc532b76d2807a3fad5a54e5243dc712383b6', class: "category-text" }, this.label), h("ix-icon", { key: '080cfeb2201ce391ca621fdb1b1bc3b5bfbbe6bb', name: 'chevron-down-small', class: {
                 'category-chevron': true,
                 'category-chevron--open': this.showItems,
-            } }))), h("div", { key: '783ec3ecb6153f12b43a2f3733b672d9af6390df', ref: (ref) => (this.menuItemsContainer = ref), class: {
+            } }))), h("div", { key: '5f59b31543e5f71fb188a1b6e952e732ef1c3db4', ref: (ref) => (this.menuItemsContainer = ref), class: {
                 'menu-items': true,
                 'menu-items--expanded': this.showItems,
                 'menu-items--collapsed': !this.showItems,
-            } }, this.showItems ? h("slot", null) : null), h("ix-dropdown", { key: '8f7c5bf15a51ca3a57a50e259caa691ffce7a6dd', closeBehavior: 'both', show: this.showDropdown, onShowChanged: ({ detail: dropdownShown }) => {
+            } }, this.showItems ? h("slot", null) : null), h("ix-dropdown", { key: '9d7cdb7ce906a6d2cbeeac5e3d71dc0c49cf1327', closeBehavior: 'both', show: this.showDropdown, onShowChanged: ({ detail: dropdownShown }) => {
                 this.showDropdown = dropdownShown;
             }, class: 'category-dropdown', anchor: this.hostElement, placement: "right-start", offset: {
                 mainAxis: 3,
@@ -165,7 +165,7 @@ export class MenuCategory {
                         this.showDropdown = false;
                     }
                 }
-            } }, h("ix-dropdown-item", { key: 'e5f9d6b9ea910dcb852da7bdffec8117bd0fdf6e', class: 'category-dropdown-header' }, h("ix-typography", { key: '5e8ce8f52f2c089ffabd36e3345c46b83b07a554', variant: "default-title-single", color: "std" }, this.label)), h("ix-divider", { key: 'ebadc6189f93ab6e25262b324259993eaa557400' }), h("slot", { key: 'f9d0e1a321e824390671e380094c78c22f67d428' }))));
+            } }, h("ix-dropdown-item", { key: 'f8d2ec34a4602f977802808e23c3ebc811d2d0ce', class: 'category-dropdown-header' }, h("ix-typography", { key: '1f6fea32ef8b6786cdd35285e44e9715c7622ad9', variant: "default-title-single", color: "std" }, this.label)), h("ix-divider", { key: 'f868a430532498205b95c76addc1c3ef2f5ff239' }), h("slot", { key: 'ba6dd154693ae5040fdadf4c92d4d10e5dc79d2b' }))));
     }
     static get is() { return "ix-menu-category"; }
     static get encapsulation() { return "shadow"; }