@siemens/ix 0.0.0-pr-1373-20240705054533 → 0.0.0-pr-1522-20241021144048

package/dist/collection/components/form-field/form-field.css

@@ -85,11 +85,11 @@ input::-moz-placeholder {
 input::placeholder {
   color: var(--theme-input-hint--color);
 }
-input.hover, input:hover {
+input.hover:not(.read-only, .disabled, [readonly], [disabled]), input:hover:not(.read-only, .disabled, [readonly], [disabled]) {
   border-color: var(--theme-input--border-color--hover) !important;
   background-color: var(--theme-input--background--hover);
 }
-input.focus, input:focus {
+input.focus:not(.read-only, .disabled, [readonly], [disabled]), input:focus:not(.read-only, .disabled, [readonly], [disabled]) {
   outline: 1px solid var(--theme-color-focus-bdr);
   outline-offset: var(--theme-input--focus--outline-offset);
   border-color: var(--theme-input--border-color--focus) !important;
@@ -117,7 +117,7 @@ input:-moz-read-only::placeholder {
 input.read-only::placeholder, input:read-only::placeholder {
   color: transparent;
 }
-input:disabled {
+input:disabled, input.disabled {
   box-shadow: none;
   background-color: transparent;
   outline: none;
@@ -125,10 +125,10 @@ input:disabled {
   color: var(--theme-input--color--disabled);
   border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled);
 }
-input:disabled::-moz-placeholder {
+input:disabled::-moz-placeholder, input.disabled::-moz-placeholder {
   color: transparent;
 }
-input:disabled::placeholder {
+input:disabled::placeholder, input.disabled::placeholder {
   color: transparent;
 }
 
@@ -187,11 +187,11 @@ textarea::-moz-placeholder {
 textarea::placeholder {
   color: var(--theme-input-hint--color);
 }
-textarea.hover, textarea:hover {
+textarea.hover:not(.read-only, .disabled, [readonly], [disabled]), textarea:hover:not(.read-only, .disabled, [readonly], [disabled]) {
   border-color: var(--theme-input--border-color--hover) !important;
   background-color: var(--theme-input--background--hover);
 }
-textarea.focus, textarea:focus {
+textarea.focus:not(.read-only, .disabled, [readonly], [disabled]), textarea:focus:not(.read-only, .disabled, [readonly], [disabled]) {
   outline: 1px solid var(--theme-color-focus-bdr);
   outline-offset: var(--theme-input--focus--outline-offset);
   border-color: var(--theme-input--border-color--focus) !important;
@@ -219,7 +219,7 @@ textarea:-moz-read-only::placeholder {
 textarea.read-only::placeholder, textarea:read-only::placeholder {
   color: transparent;
 }
-textarea:disabled {
+textarea:disabled, textarea.disabled {
   box-shadow: none;
   background-color: transparent;
   outline: none;
@@ -227,10 +227,10 @@ textarea:disabled {
   color: var(--theme-input--color--disabled);
   border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled);
 }
-textarea:disabled::-moz-placeholder {
+textarea:disabled::-moz-placeholder, textarea.disabled::-moz-placeholder {
   color: transparent;
 }
-textarea:disabled::placeholder {
+textarea:disabled::placeholder, textarea.disabled::placeholder {
   color: transparent;
 }
 

package/dist/collection/components/form-field/form-field.js

@@ -16,7 +16,7 @@ export class FormField {
     }
     componentWillLoad() { }
     render() {
-        return (h(Host, { key: '34305cf7e6ee023ae323d2c1b13248bb08f50001' }, this.label ? (h("label", { htmlFor: this.inputElement.id }, this.label)) : null, h("slot", { key: '7d9937b61fd5f5aa4711a7551c0665a1f048bb47' })));
+        return (h(Host, { key: '36cd104dc9663c917aa715627c49627af54806cb' }, this.label ? (h("label", { htmlFor: this.inputElement.id }, this.label)) : null, h("slot", { key: 'ae5c276915ba75e0e7a8e13ef583d40fef2be1d2' })));
     }
     static get is() { return "ix-form-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/grid/layout-grid.css

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 Siemens AG
+ * SPDX-FileCopyrightText: 2024 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/collection/components/grid/layout-grid.js

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 Siemens AG
+ * SPDX-FileCopyrightText: 2024 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -17,12 +17,12 @@ export class LayoutGrid {
         this.columns = 12;
     }
     render() {
-        return (h(Host, { key: 'd77291cf3cca2fd4a61c8998a095923f195b3d8f', class: {
+        return (h(Host, { key: '3c30ba6939c309e43ce69394c02e61e41a2a0bc3', class: {
                 'no-margin': this.noMargin,
             }, style: {
                 '--ix-layout-grid-columns': `${this.columns}`,
                 '--ix-layout-grid-gutter': `${this.gap}px`,
-            } }, h("slot", { key: 'c149d8a794c75e48d748cccbc3cb9aada30c30ef' })));
+            } }, h("slot", { key: 'a5857e05187e6cc811e00589b3fd6c9008ad46b2' })));
     }
     static get is() { return "ix-layout-grid"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/grid/layout-grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout-grid.js","sourceRoot":"","sources":["../../../src/components/grid/layout-grid.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;GAEG;AAMH,MAAM,OAAO,UAAU;;wBAIF,KAAK;mBAKgB,IAAI;uBAK1B,EAAE;;IAEpB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI,CAAC,QAAQ;aAC3B,EACD,KAAK,EAAE;gBACL,0BAA0B,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE;gBAC7C,yBAAyB,EAAE,GAAG,IAAI,CAAC,GAAG,IAAI;aAC3C;YAED,8DAAa,CACR,CACR,CAAC;IACJ,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, h, Host, Prop } from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-layout-grid',\n  styleUrl: 'layout-grid.scss',\n  shadow: true,\n})\nexport class LayoutGrid {\n  /**\n   * The grid will not have any horizontal padding\n   */\n  @Prop() noMargin = false;\n\n  /**\n   * Grid gap\n   */\n  @Prop() gap: '8' | '12' | '16' | '24' = '24';\n\n  /**\n   * Overwrite the default number of columns. Choose between 2 and 12 columns.\n   */\n  @Prop() columns = 12;\n\n  render() {\n    return (\n      <Host\n        class={{\n          'no-margin': this.noMargin,\n        }}\n        style={{\n          '--ix-layout-grid-columns': `${this.columns}`,\n          '--ix-layout-grid-gutter': `${this.gap}px`,\n        }}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"layout-grid.js","sourceRoot":"","sources":["../../../src/components/grid/layout-grid.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;GAEG;AAMH,MAAM,OAAO,UAAU;;wBAIF,KAAK;mBAKgB,IAAI;uBAK1B,EAAE;;IAEpB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI,CAAC,QAAQ;aAC3B,EACD,KAAK,EAAE;gBACL,0BAA0B,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE;gBAC7C,yBAAyB,EAAE,GAAG,IAAI,CAAC,GAAG,IAAI;aAC3C;YAED,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 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, h, Host, Prop } from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-layout-grid',\n  styleUrl: 'layout-grid.scss',\n  shadow: true,\n})\nexport class LayoutGrid {\n  /**\n   * The grid will not have any horizontal padding\n   */\n  @Prop() noMargin = false;\n\n  /**\n   * Grid gap\n   */\n  @Prop() gap: '8' | '12' | '16' | '24' = '24';\n\n  /**\n   * Overwrite the default number of columns. Choose between 2 and 12 columns.\n   */\n  @Prop() columns = 12;\n\n  render() {\n    return (\n      <Host\n        class={{\n          'no-margin': this.noMargin,\n        }}\n        style={{\n          '--ix-layout-grid-columns': `${this.columns}`,\n          '--ix-layout-grid-gutter': `${this.gap}px`,\n        }}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 Siemens AG
+ * SPDX-FileCopyrightText: 2024 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

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

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 Siemens AG
+ * SPDX-FileCopyrightText: 2024 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -37,7 +37,7 @@ export class GroupContextMenu {
         this.configureDropdown(dropdownElement, triggerElement);
     }
     render() {
-        return (h(Host, { key: 'f0540e7922380e5d6dc1ccd3a9cf89f8899f0b8f' }, h("ix-icon-button", { key: 'd252cde38720925875096a6e57d494da800139f3', class: { hide: !this.showContextMenu }, size: "24", ghost: true, icon: 'context-menu' }), h("slot", { key: 'e5f04fcdd55f57bd9bad2beeb5982f6c6352f19b', onSlotchange: () => this.onSlotChange() })));
+        return (h(Host, { key: '7b826fefe006824752b7d0ff090dfc84f520b2cd' }, h("ix-icon-button", { key: '1009c080580c54ba55697af262cd990dc8c57ca1', class: { hide: !this.showContextMenu }, size: "24", ghost: true, icon: 'context-menu' }), h("slot", { key: '8063b600fd52fa51e00b9cec030f896a2d27e146', onSlotchange: () => this.onSlotChange() })));
     }
     static get is() { return "ix-group-context-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/group/group-context-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"group-context-menu.js","sourceRoot":"","sources":["../../../src/components/group/group-context-menu.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAOzD,MAAM,OAAO,gBAAgB;;+BAGA,KAAK;;IAExB,UAAU;QAChB,OAAO,IAAI,CAAC,WAAW,CAAC;IAC1B,CAAC;IAEO,iBAAiB,CACvB,eAAsC,EACtC,cAA2B;QAE3B,eAAe,CAAC,mBAAmB,GAAG,OAAO,CAAC;QAC9C,eAAe,CAAC,OAAO,GAAG,cAAc,CAAC;IAC3C,CAAC;IAEO,YAAY;QAClB,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC/D,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,OAAO;QACT,CAAC;QACD,MAAM,QAAQ,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAAC;QAC1C,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC,MAAM,KAAK,CAAC,CAAC;QAE7C,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CACnC,CAAC,GAAY,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,KAAK,aAAa,CAChD,CAAC;QAEF,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;QAEzC,IAAI,CAAC,cAAc,EAAE,CAAC;YACpB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,eAAe,EAAE,CAAC;YACrB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,iBAAiB,CAAC,eAAe,EAAE,cAAc,CAAC,CAAC;IAC1D,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,uEACE,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,EACtC,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,IAAI,EACX,IAAI,EAAE,cAAc,GACJ;YAClB,6DAAM,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,GAAS,CACjD,CACR,CAAC;IACJ,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, State } from '@stencil/core';\nimport { getSlottedElements } from '../utils/shadow-dom';\n\n@Component({\n  tag: 'ix-group-context-menu',\n  styleUrl: './group-context-menu.scss',\n  shadow: true,\n})\nexport class GroupContextMenu {\n  @Element() hostElement!: HTMLIxGroupContextMenuElement;\n\n  @State() showContextMenu = false;\n\n  private getTrigger() {\n    return this.hostElement;\n  }\n\n  private configureDropdown(\n    dropdownElement: HTMLIxDropdownElement,\n    triggerElement: HTMLElement\n  ) {\n    dropdownElement.positioningStrategy = 'fixed';\n    dropdownElement.trigger = triggerElement;\n  }\n\n  private onSlotChange() {\n    const slot = this.hostElement.shadowRoot.querySelector('slot');\n    if (!slot) {\n      return;\n    }\n    const elements = getSlottedElements(slot);\n    this.showContextMenu = elements.length !== 0;\n\n    const dropdownElement = elements.find(\n      (elm: Element) => elm.tagName === 'IX-DROPDOWN'\n    );\n\n    const triggerElement = this.getTrigger();\n\n    if (!triggerElement) {\n      return;\n    }\n\n    if (!dropdownElement) {\n      return;\n    }\n\n    this.configureDropdown(dropdownElement, triggerElement);\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-icon-button\n          class={{ hide: !this.showContextMenu }}\n          size=\"24\"\n          ghost={true}\n          icon={'context-menu'}\n        ></ix-icon-button>\n        <slot onSlotchange={() => this.onSlotChange()}></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"group-context-menu.js","sourceRoot":"","sources":["../../../src/components/group/group-context-menu.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAOzD,MAAM,OAAO,gBAAgB;;+BAGA,KAAK;;IAExB,UAAU;QAChB,OAAO,IAAI,CAAC,WAAW,CAAC;IAC1B,CAAC;IAEO,iBAAiB,CACvB,eAAsC,EACtC,cAA2B;QAE3B,eAAe,CAAC,mBAAmB,GAAG,OAAO,CAAC;QAC9C,eAAe,CAAC,OAAO,GAAG,cAAc,CAAC;IAC3C,CAAC;IAEO,YAAY;QAClB,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC/D,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,OAAO;QACT,CAAC;QACD,MAAM,QAAQ,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAAC;QAC1C,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC,MAAM,KAAK,CAAC,CAAC;QAE7C,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CACnC,CAAC,GAAY,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,KAAK,aAAa,CAChD,CAAC;QAEF,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;QAEzC,IAAI,CAAC,cAAc,EAAE,CAAC;YACpB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,eAAe,EAAE,CAAC;YACrB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,iBAAiB,CAAC,eAAe,EAAE,cAAc,CAAC,CAAC;IAC1D,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,uEACE,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,EACtC,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,IAAI,EACX,IAAI,EAAE,cAAc,GACJ;YAClB,6DAAM,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,GAAS,CACjD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 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, State } from '@stencil/core';\nimport { getSlottedElements } from '../utils/shadow-dom';\n\n@Component({\n  tag: 'ix-group-context-menu',\n  styleUrl: './group-context-menu.scss',\n  shadow: true,\n})\nexport class GroupContextMenu {\n  @Element() hostElement!: HTMLIxGroupContextMenuElement;\n\n  @State() showContextMenu = false;\n\n  private getTrigger() {\n    return this.hostElement;\n  }\n\n  private configureDropdown(\n    dropdownElement: HTMLIxDropdownElement,\n    triggerElement: HTMLElement\n  ) {\n    dropdownElement.positioningStrategy = 'fixed';\n    dropdownElement.trigger = triggerElement;\n  }\n\n  private onSlotChange() {\n    const slot = this.hostElement.shadowRoot.querySelector('slot');\n    if (!slot) {\n      return;\n    }\n    const elements = getSlottedElements(slot);\n    this.showContextMenu = elements.length !== 0;\n\n    const dropdownElement = elements.find(\n      (elm: Element) => elm.tagName === 'IX-DROPDOWN'\n    );\n\n    const triggerElement = this.getTrigger();\n\n    if (!triggerElement) {\n      return;\n    }\n\n    if (!dropdownElement) {\n      return;\n    }\n\n    this.configureDropdown(dropdownElement, triggerElement);\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-icon-button\n          class={{ hide: !this.showContextMenu }}\n          size=\"24\"\n          ghost={true}\n          icon={'context-menu'}\n        ></ix-icon-button>\n        <slot onSlotchange={() => this.onSlotChange()}></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 Siemens AG
+ * SPDX-FileCopyrightText: 2024 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -49,7 +49,8 @@
   display: flex;
   flex-direction: column;
   position: relative;
-  max-width: 19.75rem;
+  width: 19.75rem;
+  min-width: 12rem;
   border-color: var(--theme-group-item--border-color);
 }
 :host .group-header {

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

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 Siemens AG
+ * SPDX-FileCopyrightText: 2024 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -11,19 +11,24 @@ import { createMutationObserver } from "../utils/mutation-observer";
 import { hasSlottedElements } from "../utils/shadow-dom";
 export class Group {
     constructor() {
+        this.observer = null;
         this.suppressHeaderSelection = false;
         this.header = undefined;
         this.subHeader = undefined;
         this.collapsed = true;
-        this.selected = undefined;
+        this.selected = false;
         this.index = undefined;
         this.expandOnHeaderClick = false;
         this.itemSelected = false;
-        this.dropdownTriggerRef = undefined;
         this.slotSize = this.groupItems.length;
         this.footerVisible = false;
         this.showExpandCollapsedIcon = false;
     }
+    selectedChanged(newSelected) {
+        if (newSelected === false) {
+            this.changeItemIndex();
+        }
+    }
     get dropdownItems() {
         return Array.from(this.hostElement.querySelectorAll('ix-group-dropdown-item'));
     }
@@ -31,55 +36,63 @@ export class Group {
         return Array.from(this.hostElement.querySelectorAll('ix-group-item:not(.footer)'));
     }
     get groupContent() {
-        return this.hostElement.shadowRoot.querySelector('.group-content');
+        var _a;
+        return (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.group-content');
     }
     onExpandClick(event) {
+        const oldCollapsed = this.collapsed;
         this.collapsed = !this.collapsed;
-        this.collapsedChanged.emit(this.collapsed);
+        const { defaultPrevented } = this.collapsedChanged.emit(this.collapsed);
         event.stopPropagation();
+        if (defaultPrevented) {
+            this.collapsed = oldCollapsed;
+        }
     }
     onHeaderClick(event) {
-        this.setGroupSelection(!this.selected);
         if (this.suppressHeaderSelection) {
             this.onExpandClick(event);
+            return;
         }
+        this.changeHeaderSelection(!this.selected);
+        this.changeItemIndex();
     }
-    onItemClick(index) {
-        if (index === this.index) {
-            this.index = undefined;
-            this.selectItem.emit(undefined);
+    changeHeaderSelection(newSelection) {
+        const oldIsHeaderSelected = this.selected;
+        const newIsHeaderSelected = newSelection;
+        this.selected = newIsHeaderSelected;
+        const { defaultPrevented } = this.selectGroup.emit(newIsHeaderSelected);
+        if (defaultPrevented) {
+            this.selected = oldIsHeaderSelected;
+            return;
         }
-        else {
-            this.index = index;
-            this.selectItem.emit(index);
-        }
-        if (this.index >= 0) {
-            this.itemSelected = true;
-        }
-        else
-            this.itemSelected = false;
-        this.setGroupSelection(false);
     }
-    setGroupSelection(selection) {
-        if (!this.suppressHeaderSelection) {
-            this.selected = selection;
-            this.selectGroup.emit(this.selected);
+    changeItemIndex(index) {
+        const oldIndex = this.index;
+        const newIndex = index === this.index ? undefined : index;
+        if (this.index === newIndex) {
+            return;
+        }
+        this.index = newIndex;
+        const { defaultPrevented } = this.selectItem.emit(newIndex);
+        if (defaultPrevented) {
+            this.index = oldIndex;
+            return;
         }
+        const items = this.groupItems;
+        items.forEach((item, i) => {
+            item.selected = i === this.index;
+        });
+        this.itemSelected = items.some((item) => item.selected);
     }
     onSlotChange() {
-        const slot = this.hostElement.shadowRoot.querySelector('slot[name="footer"]');
+        var _a;
+        const slot = (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="footer"]');
         if (slot) {
             this.footerVisible = hasSlottedElements(slot);
         }
     }
     componentWillRender() {
         this.groupItems.forEach((item, index) => {
-            if (this.selected === true) {
-                item.selected = false;
-                this.index = undefined;
-                this.itemSelected = false;
-                return;
-            }
             item.selected = index === this.index;
             item.index = index;
         });
@@ -88,39 +101,47 @@ export class Group {
         this.observer = createMutationObserver(() => {
             this.slotSize = this.groupItems.length;
         });
+        if (!this.groupContent) {
+            return;
+        }
         this.observer.observe(this.groupContent, {
             childList: true,
         });
-        this.groupContent.addEventListener('selectedChanged', (evt) => {
-            this.onItemClick(evt.detail.index);
-        });
     }
     disconnectedCallback() {
         if (this.observer) {
             this.observer.disconnect();
         }
     }
+    onItemClicked(event) {
+        if (event.target instanceof HTMLElement) {
+            const item = event.target;
+            const index = this.groupItems.indexOf(item);
+            this.changeItemIndex(index);
+        }
+    }
     render() {
-        return (h(Host, { key: 'a6c09009cd058c03a46699d1514a51e5befb5018' }, h("div", { key: '7d0802bd7566f7d47062e91a8264b6d783a8a44b', class: {
+        return (h(Host, { key: '8a2f0e3a30868011765aa6f5b2ce1d5c92700242' }, h("div", { key: '3709d09813b0ae1a213414735cf27c1a222f486e', class: {
                 'group-header': true,
                 expand: !this.collapsed,
                 selected: this.selected,
-            }, tabindex: "0" }, h("div", { key: '3f2e851b6d35893c2a3393348474e6cefa06ae79', class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, h("div", { key: 'dfed4e7962f4f3b071cc6b8d64b4efa06f139ebb', class: {
+            }, tabindex: "0" }, h("div", { key: '6a94aa3b89226d0dd5866fd2db60e14d4cd30458', class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, h("div", { key: 'b6560cfe05acd085af62a9f6845f8d5d1520e758', class: {
                 'group-header-selection-indicator': true,
                 'group-header-selection-indicator-item-selected': this.itemSelected,
-            } }), h("div", { key: 'afe8c9b382b2506f1c86a56abe4b29da07c52b9f', class: "btn-expand-header" }, h("ix-icon", { key: 'de63d1492943de8e4bcf2f1f76b61feab1beea50', "data-testid": "expand-collapsed-icon", class: {
+            } }), h("div", { key: '14065f534c27a40737e287abca1465b6368c60ec', class: "btn-expand-header" }, h("ix-icon", { key: '7a0c2da154a10d5ee89042b743722602db653564', "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: '5ca15ab167295402b4fc5f226b14697777b3abba', 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: '2f78d4b163682214e6325b49ce69f2f737da0399', name: "header" }))), h("ix-group-context-menu", { key: '56a4bcd4e623012de4a7a1bcc66bb1f280f66e90' }, h("slot", { key: '439f0ba04c6ec4543f740ca70b965cd50eae669f', name: "dropdown" }))), h("div", { key: '3cd56e5f026a12ad05ccf85760d2bb4a72ad47d4', class: {
+            }, name: this.collapsed ? 'chevron-right-small' : 'chevron-down-small', onClick: (e) => this.onExpandClick(e) })), h("div", { key: 'a668ae83dce03a1cd0e039d64704cb8302bf875e', 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: '2c1df61ea0568cacb30d31d37268a25551738cbd', name: "header" }))), h("ix-group-context-menu", { key: '03b1e2feb9df772d7232cebed85f25d61ac47169' }, h("slot", { key: 'cedbdf3ac773348642bf188d8ee1e6844b563e99', name: "dropdown" }))), h("div", { key: 'a4ba9933a91ef1de426b7e51d4c8e1416733450c', class: {
                 'group-content': true,
-            } }, h("div", { key: 'c4fb98c378079efb91edc03c5e88e7a01b33a223', style: {
+            } }, h("div", { key: '6c08e019b15016fa98b505d2bc1ec4f4760aba6f', style: {
                 display: this.collapsed ? 'none' : 'contents',
-            } }, h("slot", { key: 'f77631e111614e753f99ec942ff88142c2739c36', onSlotchange: () => {
-                const slot = this.hostElement.shadowRoot.querySelector('slot:not([name])');
+            } }, h("slot", { key: '692f0cdc60a2485ae10fd0af824c1365db149730', onSlotchange: () => {
+                var _a;
+                const slot = (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])');
                 this.showExpandCollapsedIcon = hasSlottedElements(slot);
-            } }), h("ix-group-item", { key: '9f84823ab01988af424b0b3beff5acc7ec963d01', suppressSelection: true, focusable: false, class: {
+            } }), h("ix-group-item", { key: '60ab444c91219852ac96b34ec3f0ec68680bf34e', suppressSelection: true, focusable: false, class: {
                 footer: true,
                 'footer-visible': this.footerVisible,
-            } }, h("slot", { key: '14b0b37dfd590c88021c8c4c714a362dc0e82188', name: "footer", onSlotchange: () => this.onSlotChange() }))))));
+            } }, h("slot", { key: 'aa110666438e18a61e27144078930565aced8dbc', name: "footer", onSlotchange: () => this.onSlotChange() }))))));
     }
     static get is() { return "ix-group"; }
     static get encapsulation() { return "shadow"; }
@@ -163,7 +184,7 @@ export class Group {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Group header"
@@ -180,7 +201,7 @@ export class Group {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Group header subtitle"
@@ -221,7 +242,8 @@ export class Group {
                     "text": "Whether the group is selected."
                 },
                 "attribute": "selected",
-                "reflect": true
+                "reflect": true,
+                "defaultValue": "false"
             },
             "index": {
                 "type": "number",
@@ -232,7 +254,7 @@ export class Group {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The index of the selected group entry.\nIf undefined no group item is selected."
@@ -263,7 +285,6 @@ export class Group {
     static get states() {
         return {
             "itemSelected": {},
-            "dropdownTriggerRef": {},
             "slotSize": {},
             "footerVisible": {},
             "showExpandCollapsedIcon": {}
@@ -318,5 +339,20 @@ export class Group {
             }];
     }
     static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "selected",
+                "methodName": "selectedChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "selectedChanged",
+                "method": "onItemClicked",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 //# sourceMappingURL=group.js.map

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  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"]}
+{"version":3,"file":"group.js","sourceRoot":"","sources":["../../../src/components/group/group.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 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  Listen,\n  Prop,\n  State,\n  Watch,\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 = false;\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() slotSize = this.groupItems.length;\n  @State() footerVisible = false;\n\n  @State() showExpandCollapsedIcon = false;\n\n  private observer: MutationObserver = null!;\n\n  @Watch('selected')\n  selectedChanged(newSelected: boolean) {\n    if (newSelected === false) {\n      this.changeItemIndex();\n    }\n  }\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    const oldCollapsed = this.collapsed;\n    this.collapsed = !this.collapsed;\n    const { defaultPrevented } = this.collapsedChanged.emit(this.collapsed);\n    event.stopPropagation();\n\n    if (defaultPrevented) {\n      this.collapsed = oldCollapsed;\n    }\n  }\n\n  private onHeaderClick(event: Event) {\n    if (this.suppressHeaderSelection) {\n      this.onExpandClick(event);\n      return;\n    }\n\n    this.changeHeaderSelection(!this.selected);\n    this.changeItemIndex();\n  }\n\n  private changeHeaderSelection(newSelection: boolean) {\n    const oldIsHeaderSelected = this.selected;\n    const newIsHeaderSelected = newSelection;\n    this.selected = newIsHeaderSelected;\n    const { defaultPrevented } = this.selectGroup.emit(newIsHeaderSelected);\n\n    if (defaultPrevented) {\n      this.selected = oldIsHeaderSelected;\n      return;\n    }\n  }\n\n  private changeItemIndex(index?: number) {\n    const oldIndex = this.index;\n    const newIndex = index === this.index ? undefined : index;\n\n    if (this.index === newIndex) {\n      return;\n    }\n\n    this.index = newIndex;\n    const { defaultPrevented } = this.selectItem.emit(newIndex);\n    if (defaultPrevented) {\n      this.index = oldIndex;\n      return;\n    }\n\n    const items = this.groupItems;\n    items.forEach((item, i) => {\n      item.selected = i === this.index;\n    });\n\n    this.itemSelected = items.some((item) => item.selected);\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      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    if (!this.groupContent) {\n      return;\n    }\n    this.observer.observe(this.groupContent, {\n      childList: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  @Listen('selectedChanged')\n  onItemClicked(event: CustomEvent) {\n    if (event.target instanceof HTMLElement) {\n      const item = event.target as HTMLIxGroupItemElement;\n      const index = this.groupItems.indexOf(item);\n      this.changeItemIndex(index);\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(\n                    'slot:not([name])'\n                  );\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

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 Siemens AG
+ * SPDX-FileCopyrightText: 2024 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -40,8 +40,76 @@ test('show expand icon initial', async ({ mount, page }) => {
     await expect(expandIcon).toBeVisible();
     await group.evaluate((group) => {
         const item = group.querySelector('ix-group-item');
-        item.remove();
+        if (item) {
+            item.remove();
+        }
     });
     await expect(expandIcon).not.toBeVisible();
 });
+test('suppress selection should not stop event propagation', async ({ mount, page, }) => {
+    await mount(`
+    <ix-group>
+      <ix-group-item suppress-selection>Item 1</ix-group-item>
+      <ix-group-item>Item 2</ix-group-item>
+    </ix-group>
+  `);
+    const group = page.locator('ix-group');
+    const expandIcon = group.getByTestId('expand-collapsed-icon');
+    await expandIcon.click();
+    const groupItem = page.locator('ix-group-item').first();
+    await expect(group).toHaveClass(/hydrated/);
+    await groupItem.evaluate((item) => {
+        item.addEventListener('click', () => (item.innerHTML += 'Clicked'));
+    });
+    await groupItem.click();
+    await expect(groupItem).toHaveText('Item 1Clicked');
+});
+test('item prevent default selection item event', async ({ mount, page }) => {
+    await mount(`
+    <ix-group>
+      <ix-group-item>Item 1</ix-group-item>
+      <ix-group-item>Item 2</ix-group-item>
+    </ix-group>
+  `);
+    const group = page.locator('ix-group');
+    const expandIcon = group.getByTestId('expand-collapsed-icon');
+    await expandIcon.click();
+    const groupItem = page.locator('ix-group-item').first();
+    await expect(group).toHaveClass(/hydrated/);
+    await group.evaluate((item) => {
+        item.addEventListener('selectItem', (e) => e.preventDefault());
+    });
+    await groupItem.click();
+    await expect(groupItem).not.toHaveClass(/hydrated selected/);
+});
+test('group header prevent default collapse/expand', async ({ mount, page, }) => {
+    await mount(`
+    <ix-group>
+      <ix-group-item>Item 1</ix-group-item>
+      <ix-group-item>Item 2</ix-group-item>
+    </ix-group>
+  `);
+    const group = page.locator('ix-group');
+    const expandIcon = group.getByTestId('expand-collapsed-icon');
+    await group.evaluate((item) => {
+        item.addEventListener('collapsedChanged', (e) => e.preventDefault());
+    });
+    await expandIcon.click();
+    await expect(group).toHaveAttribute('collapsed');
+});
+test('group header prevent default selection event', async ({ mount, page, }) => {
+    await mount(`
+    <ix-group header="Test" sub-header="Test2">
+      <ix-group-item>Item 1</ix-group-item>
+      <ix-group-item>Item 2</ix-group-item>
+    </ix-group>
+  `);
+    const group = page.locator('ix-group');
+    const groupHeader = group.locator('.group-header');
+    await group.evaluate((item) => {
+        item.addEventListener('selectGroup', (e) => e.preventDefault());
+    });
+    await groupHeader.click();
+    await expect(group).not.toHaveAttribute('selected');
+});
 //# sourceMappingURL=group.ct.js.map

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

@@ -1 +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"]}
+{"version":3,"file":"group.ct.js","sourceRoot":"","sources":["../../../../src/components/group/test/group.ct.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 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    if (item) {\n      item.remove();\n    }\n  });\n\n  await expect(expandIcon).not.toBeVisible();\n});\n\ntest('suppress selection should not stop event propagation', async ({\n  mount,\n  page,\n}) => {\n  await mount(`\n    <ix-group>\n      <ix-group-item suppress-selection>Item 1</ix-group-item>\n      <ix-group-item>Item 2</ix-group-item>\n    </ix-group>\n  `);\n  const group = page.locator('ix-group');\n  const expandIcon = group.getByTestId('expand-collapsed-icon');\n  await expandIcon.click();\n\n  const groupItem = page.locator('ix-group-item').first();\n  await expect(group).toHaveClass(/hydrated/);\n\n  await groupItem.evaluate((item) => {\n    item.addEventListener('click', () => (item.innerHTML += 'Clicked'));\n  });\n\n  await groupItem.click();\n  await expect(groupItem).toHaveText('Item 1Clicked');\n});\n\ntest('item prevent default selection item event', async ({ mount, page }) => {\n  await mount(`\n    <ix-group>\n      <ix-group-item>Item 1</ix-group-item>\n      <ix-group-item>Item 2</ix-group-item>\n    </ix-group>\n  `);\n  const group = page.locator('ix-group');\n  const expandIcon = group.getByTestId('expand-collapsed-icon');\n  await expandIcon.click();\n\n  const groupItem = page.locator('ix-group-item').first();\n  await expect(group).toHaveClass(/hydrated/);\n\n  await group.evaluate((item) => {\n    item.addEventListener('selectItem', (e) => e.preventDefault());\n  });\n\n  await groupItem.click();\n  await expect(groupItem).not.toHaveClass(/hydrated selected/);\n});\n\ntest('group header prevent default collapse/expand', async ({\n  mount,\n  page,\n}) => {\n  await mount(`\n    <ix-group>\n      <ix-group-item>Item 1</ix-group-item>\n      <ix-group-item>Item 2</ix-group-item>\n    </ix-group>\n  `);\n  const group = page.locator('ix-group');\n  const expandIcon = group.getByTestId('expand-collapsed-icon');\n\n  await group.evaluate((item) => {\n    item.addEventListener('collapsedChanged', (e) => e.preventDefault());\n  });\n\n  await expandIcon.click();\n\n  await expect(group).toHaveAttribute('collapsed');\n});\n\ntest('group header prevent default selection event', async ({\n  mount,\n  page,\n}) => {\n  await mount(`\n    <ix-group header=\"Test\" sub-header=\"Test2\">\n      <ix-group-item>Item 1</ix-group-item>\n      <ix-group-item>Item 2</ix-group-item>\n    </ix-group>\n  `);\n  const group = page.locator('ix-group');\n  const groupHeader = group.locator('.group-header');\n\n  await group.evaluate((item) => {\n    item.addEventListener('selectGroup', (e) => e.preventDefault());\n  });\n\n  await groupHeader.click();\n\n  await expect(group).not.toHaveAttribute('selected');\n});\n"]}

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

@@ -162,10 +162,6 @@
   white-space: nowrap;
 }
 
-:host(.suppress-selection) {
-  pointer-events: none;
-}
-
 :host(.selected) {
   border-top-width: 0.062rem !important;
   background-color: var(--theme-color-ghost--selected);