@siemens/ix 2.3.0 → 2.4.1

package/dist/collection/components/event-list-item/event-list-item.js

@@ -29,16 +29,16 @@ export class EventListItem {
                 ? `var(${this.color})`
                 : `var(--theme-${this.color})`;
         }
-        return (h(Host, { key: '886fd04038ed9b7ae7e9137b2e939ce5a391889b', class: {
+        return (h(Host, { key: 'f4867d7f68254b7f4929ce6746172eb03aa5caea', class: {
                 disabled: this.disabled,
-            } }, h("li", { key: 'abcf0a5109a0a267482a21cf5daf0aa1190b14df', "aria-disabled": a11yBoolean(this.disabled), class: {
+            } }, h("li", { key: '325588cc80c9b8988b37aaeb72a8d9c7affc088e', "aria-disabled": a11yBoolean(this.disabled), class: {
                 'event-list-item': true,
                 selected: this.selected,
                 disabled: this.disabled,
-            } }, h("div", { key: '80965a6f06a8e06e7fd4eb3c7e18a42cfb1fe68d', class: `indicator ${!((_c = this.itemColor) !== null && _c !== void 0 ? _c : this.color) ? 'indicator-empty' : ''}`, style: {
+            } }, h("div", { key: '24ef52d3c26ccb528934fa0366c9ebdce05ca38d', class: `indicator ${!((_c = this.itemColor) !== null && _c !== void 0 ? _c : this.color) ? 'indicator-empty' : ''}`, style: {
                 'background-color': ((_d = this.itemColor) !== null && _d !== void 0 ? _d : this.color) ? color : 'inherit',
                 opacity: `${this.disabled ? 0.4 : 1}`,
-            } }), h("div", { key: '1848fb6081def3209f3089713c1fee3e5f10379f', class: "event-list-item-container" }, h("div", { key: '93938c03d5576c5ecc35006b1620ff5170e37fb7', class: "event-content" }, h("slot", { key: 'e35b7858bf2766e1e546e850b037bf98880083fc' })), this.chevron && (h("ix-icon", { name: 'chevron-right', size: "16", class: "chevron-icon" }))))));
+            } }), h("div", { key: '74fac568b74471bcd6051f25d13bbac6d3aaadb4', class: "event-list-item-container" }, h("div", { key: '47d69475c3d448ca417b1892b30f22e7de77b19f', class: "event-content" }, h("slot", { key: 'c87d4fc509bdbc2041122e274caa2860a2530843' })), this.chevron && (h("ix-icon", { key: '8626b6e5ff1f23163d4a75d5c3a114adc3942c2c', name: 'chevron-right', size: "16", class: "chevron-icon" }))))));
     }
     static get is() { return "ix-event-list-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/event-list-item/event-list-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"event-list-item.js","sourceRoot":"","sources":["../../../src/components/event-list-item/event-list-item.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,GACL,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAO5C,MAAM,OAAO,aAAa;;;;;;;;IA2CxB,eAAe;QACb,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;IACxB,CAAC;IAED,MAAM;;QACJ,IAAI,KAAK,GAAG,CAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,UAAU,CAAC,SAAS,CAAC;YAC/C,CAAC,CAAC,OAAO,IAAI,CAAC,SAAS,GAAG;YAC1B,CAAC,CAAC,eAAe,IAAI,CAAC,SAAS,GAAG,CAAC;QAErC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,KAAK,GAAG,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU,CAAC,SAAS,CAAC;gBACvC,CAAC,CAAC,OAAO,IAAI,CAAC,KAAK,GAAG;gBACtB,CAAC,CAAC,eAAe,IAAI,CAAC,KAAK,GAAG,CAAC;QACnC,CAAC;QAED,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB;YAED,4EACiB,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,EACzC,KAAK,EAAE;oBACL,iBAAiB,EAAE,IAAI;oBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;oBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;iBACxB;gBAED,4DACE,KAAK,EAAE,aACL,CAAC,CAAC,MAAA,IAAI,CAAC,SAAS,mCAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EACxD,EAAE,EACF,KAAK,EAAE;wBACL,kBAAkB,EAChB,CAAA,MAAA,IAAI,CAAC,SAAS,mCAAI,IAAI,CAAC,KAAK,EAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;wBAClD,OAAO,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE;qBACtC,GACI;gBAEP,4DAAK,KAAK,EAAC,2BAA2B;oBACpC,4DAAK,KAAK,EAAC,eAAe;wBACxB,8DAAa,CACT;oBACL,IAAI,CAAC,OAAO,IAAI,CACf,eACE,IAAI,EAAE,eAAe,EACrB,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,cAAc,GACX,CACZ,CACG,CACH,CACA,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 {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n} from '@stencil/core';\nimport { a11yBoolean } from '../utils/a11y';\n\n@Component({\n  tag: 'ix-event-list-item',\n  styleUrl: 'event-list-item.scss',\n  shadow: true,\n})\nexport class EventListItem {\n  /**\n   * Color of the status indicator.\n   * You can find a list of all available colors in our documentation.\n   * Example values are `--theme-color-alarm` or `color-alarm`\n   *\n   * @link https://ix.siemens.io/docs/theming/colors/\n   *\n   * @deprecated since 2.1.0 use `item-color`\n   */\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  @Prop() color: string;\n\n  /**\n   * Color of the status indicator.\n   * You can find a list of all available colors in our documentation.\n   * Example values are `--theme-color-alarm` or `color-alarm`\n   *\n   * @link https://ix.siemens.io/docs/theming/colors/\n   */\n  @Prop() itemColor: string;\n\n  /**\n   * Show event list item as selected\n   */\n  @Prop() selected: boolean;\n\n  /**\n   * Disable event list item\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * Show chevron on right side of the event list item\n   */\n  @Prop() chevron: boolean;\n\n  /**\n   * Event list item click\n   */\n  @Event() itemClick: EventEmitter;\n\n  @Listen('click', { passive: true })\n  handleItemClick() {\n    this.itemClick.emit();\n  }\n\n  render() {\n    let color = this.itemColor?.startsWith('--theme')\n      ? `var(${this.itemColor})`\n      : `var(--theme-${this.itemColor})`;\n\n    if (this.color) {\n      color = this.color?.startsWith('--theme')\n        ? `var(${this.color})`\n        : `var(--theme-${this.color})`;\n    }\n\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n        }}\n      >\n        <li\n          aria-disabled={a11yBoolean(this.disabled)}\n          class={{\n            'event-list-item': true,\n            selected: this.selected,\n            disabled: this.disabled,\n          }}\n        >\n          <div\n            class={`indicator ${\n              !(this.itemColor ?? this.color) ? 'indicator-empty' : ''\n            }`}\n            style={{\n              'background-color':\n                this.itemColor ?? this.color ? color : 'inherit',\n              opacity: `${this.disabled ? 0.4 : 1}`,\n            }}\n          ></div>\n\n          <div class=\"event-list-item-container\">\n            <div class=\"event-content\">\n              <slot></slot>\n            </div>\n            {this.chevron && (\n              <ix-icon\n                name={'chevron-right'}\n                size=\"16\"\n                class=\"chevron-icon\"\n              ></ix-icon>\n            )}\n          </div>\n        </li>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"event-list-item.js","sourceRoot":"","sources":["../../../src/components/event-list-item/event-list-item.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,GACL,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAO5C,MAAM,OAAO,aAAa;;;;;;;;IA2CxB,eAAe;QACb,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;IACxB,CAAC;IAED,MAAM;;QACJ,IAAI,KAAK,GAAG,CAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,UAAU,CAAC,SAAS,CAAC;YAC/C,CAAC,CAAC,OAAO,IAAI,CAAC,SAAS,GAAG;YAC1B,CAAC,CAAC,eAAe,IAAI,CAAC,SAAS,GAAG,CAAC;QAErC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,KAAK,GAAG,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU,CAAC,SAAS,CAAC;gBACvC,CAAC,CAAC,OAAO,IAAI,CAAC,KAAK,GAAG;gBACtB,CAAC,CAAC,eAAe,IAAI,CAAC,KAAK,GAAG,CAAC;QACnC,CAAC;QAED,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB;YAED,4EACiB,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,EACzC,KAAK,EAAE;oBACL,iBAAiB,EAAE,IAAI;oBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;oBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;iBACxB;gBAED,4DACE,KAAK,EAAE,aACL,CAAC,CAAC,MAAA,IAAI,CAAC,SAAS,mCAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EACxD,EAAE,EACF,KAAK,EAAE;wBACL,kBAAkB,EAChB,CAAA,MAAA,IAAI,CAAC,SAAS,mCAAI,IAAI,CAAC,KAAK,EAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;wBAClD,OAAO,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE;qBACtC,GACI;gBAEP,4DAAK,KAAK,EAAC,2BAA2B;oBACpC,4DAAK,KAAK,EAAC,eAAe;wBACxB,8DAAa,CACT;oBACL,IAAI,CAAC,OAAO,IAAI,CACf,gEACE,IAAI,EAAE,eAAe,EACrB,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,cAAc,GACX,CACZ,CACG,CACH,CACA,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 {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n} from '@stencil/core';\nimport { a11yBoolean } from '../utils/a11y';\n\n@Component({\n  tag: 'ix-event-list-item',\n  styleUrl: 'event-list-item.scss',\n  shadow: true,\n})\nexport class EventListItem {\n  /**\n   * Color of the status indicator.\n   * You can find a list of all available colors in our documentation.\n   * Example values are `--theme-color-alarm` or `color-alarm`\n   *\n   * @link https://ix.siemens.io/docs/theming/colors/\n   *\n   * @deprecated since 2.1.0 use `item-color`\n   */\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  @Prop() color: string;\n\n  /**\n   * Color of the status indicator.\n   * You can find a list of all available colors in our documentation.\n   * Example values are `--theme-color-alarm` or `color-alarm`\n   *\n   * @link https://ix.siemens.io/docs/theming/colors/\n   */\n  @Prop() itemColor: string;\n\n  /**\n   * Show event list item as selected\n   */\n  @Prop() selected: boolean;\n\n  /**\n   * Disable event list item\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * Show chevron on right side of the event list item\n   */\n  @Prop() chevron: boolean;\n\n  /**\n   * Event list item click\n   */\n  @Event() itemClick: EventEmitter;\n\n  @Listen('click', { passive: true })\n  handleItemClick() {\n    this.itemClick.emit();\n  }\n\n  render() {\n    let color = this.itemColor?.startsWith('--theme')\n      ? `var(${this.itemColor})`\n      : `var(--theme-${this.itemColor})`;\n\n    if (this.color) {\n      color = this.color?.startsWith('--theme')\n        ? `var(${this.color})`\n        : `var(--theme-${this.color})`;\n    }\n\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n        }}\n      >\n        <li\n          aria-disabled={a11yBoolean(this.disabled)}\n          class={{\n            'event-list-item': true,\n            selected: this.selected,\n            disabled: this.disabled,\n          }}\n        >\n          <div\n            class={`indicator ${\n              !(this.itemColor ?? this.color) ? 'indicator-empty' : ''\n            }`}\n            style={{\n              'background-color':\n                this.itemColor ?? this.color ? color : 'inherit',\n              opacity: `${this.disabled ? 0.4 : 1}`,\n            }}\n          ></div>\n\n          <div class=\"event-list-item-container\">\n            <div class=\"event-content\">\n              <slot></slot>\n            </div>\n            {this.chevron && (\n              <ix-icon\n                name={'chevron-right'}\n                size=\"16\"\n                class=\"chevron-icon\"\n              ></ix-icon>\n            )}\n          </div>\n        </li>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/expanding-search/expanding-search.js

@@ -52,20 +52,20 @@ export class ExpandingSearch {
         this.valueChange.emit(this.value);
     }
     render() {
-        return (h(Host, { key: 'bcb1ca47c9ad17a20fd6f2fd02a8eef8739f9de2', class: {
+        return (h(Host, { key: 'ce6a0b2941966880a2a47a20ddf39820d8110836', class: {
                 expanded: this.expanded,
                 'right-position': this.expanded,
                 fullWidth: this.fullWidth,
-            } }, h("ix-icon-button", { key: '14f9d42caca8c525b2d866fedde1a27e564793b3', size: this.expanded ? '16' : '24', icon: this.icon, ghost: true, variant: "primary", "data-testid": "button", onClick: () => this.expandInput(), tabindex: this.expanded ? -1 : 0, color: this.hasFocus ? 'input-search-icon--color--focus' : undefined, class: {
+            } }, h("ix-icon-button", { key: 'e773bc67a18476c86d530e14a0b062f1b10caae7', size: this.expanded ? '16' : '24', icon: this.icon, ghost: true, variant: "primary", "data-testid": "button", onClick: () => this.expandInput(), tabindex: this.expanded ? -1 : 0, color: this.hasFocus ? 'input-search-icon--color--focus' : undefined, class: {
                 'btn-search': true,
                 'btn-search--expanded': this.expanded,
-            } }), h("div", { key: 'a1b5b7ed57ea1f3ccd1d728b86bbb686204dc4c3', class: {
+            } }), h("div", { key: 'ab6b7f77f88713c1b0230a83a3c2eb50df35f340', class: {
                 expanded: this.expanded,
                 fullWidth: this.fullWidth,
                 collapsed: !this.expanded,
                 'disable-pointer': !this.expanded,
                 'input-container': true,
-            }, "data-testid": "input-wrapper" }, h("input", { key: 'b8d99d4076dfa798c23558ec366e02320b139c2b', class: {
+            }, "data-testid": "input-wrapper" }, h("input", { key: 'fb3f5e5c926a5eed3d2a0bac878ef806684f9d8d', class: {
                 'form-control': true,
                 input: this.expanded,
                 'disable-pointer': !this.expanded,

package/dist/collection/components/filter-chip/filter-chip.js

@@ -18,7 +18,7 @@ export class FilterChip {
         this.closeClick.emit();
     }
     render() {
-        return (h(Host, { key: 'ab9555b6ab060074b79e61b6262821ce545e9e62', class: { disabled: this.disabled, readonly: this.readonly }, title: this.el.textContent }, h("div", { key: '889e241f3ea192f23452f499934c4d0e7aee2cde', class: "slot-container" }, h("slot", { key: 'd48aea2e83bf484d77d13240dec464bac3a483fa' })), !this.disabled && !this.readonly ? (h("ix-icon-button", { ghost: true, oval: true, icon: 'close-small', size: "16", tabindex: this.disabled ? -1 : 0, variant: "primary", disabled: this.disabled, onClick: (e) => this.onCloseClick(e) })) : null));
+        return (h(Host, { key: '215ed3c9b71df4ba795032725d76950f10a33184', class: { disabled: this.disabled, readonly: this.readonly }, title: this.el.textContent }, h("div", { key: '68f822ed7365a1b9375721e5fc9a9ce91bd79313', class: "slot-container" }, h("slot", { key: '8c334798a0c6c274d68564ba12b01d59054c338c' })), !this.disabled && !this.readonly ? (h("ix-icon-button", { ghost: true, oval: true, icon: 'close-small', size: "16", tabindex: this.disabled ? -1 : 0, variant: "primary", disabled: this.disabled, onClick: (e) => this.onCloseClick(e) })) : null));
     }
     static get is() { return "ix-filter-chip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/flip-tile/flip-tile.js

@@ -59,26 +59,26 @@ export class FlipTile {
         }, 2 * this.ANIMATION_DURATION);
     }
     render() {
-        return (h(Host, { key: '0b942337cb77e1cb7727d016e3a9a571f86582de', style: {
+        return (h(Host, { key: '6325a67810cec0daa810626fd07fdee585dff321', style: {
                 height: `${this.height}${this.height === 'auto' ? '' : 'rem'}`,
                 'min-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,
                 'max-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,
                 width: `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
                 'min-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
                 'max-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
-            } }, h("div", { key: '3c2b6418b48c676358608e08cd878f912327aa8a', class: {
+            } }, h("div", { key: 'b32de5296d6f9eaa2a47d7fca8fc37ccc3038ca8', class: {
                 'flip-tile-container': true,
                 info: this.state === FlipTileState.Info,
                 warning: this.state === FlipTileState.Warning,
                 alarm: this.state === FlipTileState.Alarm,
                 primary: this.state === FlipTileState.Primary,
                 'flip-animation-active': this.isFlipAnimationActive,
-            } }, h("div", { key: 'bc46de76725d49e89f0d0b3fb30908bd84918b1b', class: "flip-tile-header" }, h("div", { key: 'c42c692b8f5e1d03eaa3b02c0344fc3766754522', class: "header-slot-container text-l-title" }, h("slot", { key: 'b382eb85bb86f8026aefb1e1679278ab36d3a141', name: "header" })), h("ix-icon-button", { key: 'a7fbd03314c3fc5973c84656265114aca26458ce', icon: 'eye', variant: "primary", ghost: true, onClick: () => this.toggleIndex() })), h("div", { key: '2902c41ee142c4185af4f01dfb9fd18a2180769e', class: "content-container" }, h("slot", { key: 'abe7abe1590d698591ce64b9072cb26e16935fab' })), h("div", { key: 'f265f08af13cac0f5a52750d45fd0d51e1d5fb52', class: {
+            } }, h("div", { key: '547fd0065516281539327d61b7ba4806973b230e', class: "flip-tile-header" }, h("div", { key: '6f6105b466f35d94e7d5c51e6a8d0cd9190fda90', class: "header-slot-container text-l-title" }, h("slot", { key: 'e0d28500f1b867e120308d8ae08d19f8e2ed62ef', name: "header" })), h("ix-icon-button", { key: '9b1115eedef1cd2b5c20322e7126d69a7ddd5367', icon: 'eye', variant: "primary", ghost: true, onClick: () => this.toggleIndex() })), h("div", { key: '208e84bf8a58d0f0d664e6afa61f4c0134c170a1', class: "content-container" }, h("slot", { key: 'e58477ccc1f34df0f10d34b76ebfeb8740e6a2b7' })), h("div", { key: '1d2775674ae6ccf49d45349bb092e62a4edb6839', class: {
                 footer: true,
                 'contrast-light': this.state === FlipTileState.Warning,
                 'contrast-dark': this.state === FlipTileState.Info ||
                     this.state === FlipTileState.Alarm,
-            } }, h("slot", { key: 'f95f6d923988154f23faef4780cfc34a332cb31b', name: "footer" })))));
+            } }, h("slot", { key: '0876aa784c23b91f289b9feec114d94c5860bf29', name: "footer" })))));
     }
     static get is() { return "ix-flip-tile"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/flip-tile-content/flip-tile-content.js

@@ -12,7 +12,7 @@ export class FlipTileContent {
         this.contentVisible = false;
     }
     render() {
-        return h(Host, { key: '42fe2007b429b2791c5f0a43758d55d4429c3255' }, this.contentVisible ? h("slot", null) : null);
+        return h(Host, { key: '5168ef23e528f9bb5a8408a6df292bd2bbadd1fc' }, this.contentVisible ? h("slot", null) : null);
     }
     static get is() { return "ix-flip-tile-content"; }
     static get encapsulation() { return "shadow"; }

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

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

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

@@ -17,12 +17,12 @@ export class LayoutGrid {
         this.columns = 12;
     }
     render() {
-        return (h(Host, { key: 'e04816c23d075d12ae1cf1cd935322b48c24e249', class: {
+        return (h(Host, { key: 'd77291cf3cca2fd4a61c8998a095923f195b3d8f', class: {
                 'no-margin': this.noMargin,
             }, style: {
                 '--ix-layout-grid-columns': `${this.columns}`,
                 '--ix-layout-grid-gutter': `${this.gap}px`,
-            } }, h("slot", { key: '5068a91f517f248963912a57ff0a0890cfee9410' })));
+            } }, h("slot", { key: 'c149d8a794c75e48d748cccbc3cb9aada30c30ef' })));
     }
     static get is() { return "ix-layout-grid"; }
     static get encapsulation() { return "shadow"; }

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

@@ -37,7 +37,7 @@ export class GroupContextMenu {
         this.configureDropdown(dropdownElement, triggerElement);
     }
     render() {
-        return (h(Host, { key: '288d46637e80e99a79a01e071d69a77582edf051' }, h("ix-icon-button", { key: '7c9ad1282215761c6d160799971114cc3533e30a', class: { hide: !this.showContextMenu }, size: "24", ghost: true, icon: 'context-menu' }), h("slot", { key: 'c80375c5028e87d03c5af3b3deaa45fa2958e11f', onSlotchange: () => this.onSlotChange() })));
+        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() })));
     }
     static get is() { return "ix-group-context-menu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -11,15 +11,15 @@ 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;
@@ -31,7 +31,8 @@ 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) {
         this.collapsed = !this.collapsed;
@@ -45,15 +46,10 @@ export class Group {
         }
     }
     onItemClick(index) {
-        if (index === this.index) {
-            this.index = undefined;
-            this.selectItem.emit(undefined);
-        }
-        else {
-            this.index = index;
-            this.selectItem.emit(index);
-        }
-        if (this.index >= 0) {
+        const newIndex = index === this.index ? undefined : index;
+        this.selectItem.emit(newIndex);
+        this.index = newIndex;
+        if (this.index !== undefined && this.index >= 0) {
             this.itemSelected = true;
         }
         else
@@ -67,7 +63,8 @@ export class Group {
         }
     }
     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);
         }
@@ -85,13 +82,21 @@ export class Group {
         });
     }
     componentDidLoad() {
+        var _a;
         this.observer = createMutationObserver(() => {
             this.slotSize = this.groupItems.length;
         });
+        if (!this.groupContent) {
+            return;
+        }
         this.observer.observe(this.groupContent, {
             childList: true,
         });
-        this.groupContent.addEventListener('selectedChanged', (evt) => {
+        (_a = this.groupContent) === null || _a === void 0 ? void 0 : _a.addEventListener('selectedChanged', (evt) => {
+            if (evt.detail.suppressSelection) {
+                evt.stopPropagation();
+                return;
+            }
             this.onItemClick(evt.detail.index);
         });
     }
@@ -101,26 +106,27 @@ export class Group {
         }
     }
     render() {
-        return (h(Host, { key: '6b775c7d0b0184c3d33c46c2401b378c3b6c4c08' }, h("div", { key: '9a3c57add7b086b0223e8957e7863e0f0caa5c0b', class: {
+        return (h(Host, { key: '8153fe3f0c5fd78f733287dacb9fb5cfd23e624c' }, h("div", { key: '109139ea65795878ffd08e539ef5a59ade8c05ba', class: {
                 'group-header': true,
                 expand: !this.collapsed,
                 selected: this.selected,
-            }, tabindex: "0" }, h("div", { key: 'ff7b3e3b0dd048cac13a13d892abaf3d9b12de08', class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, h("div", { key: '1b60a84b9c98de13a498ab54e88f72c54fa3d35c', class: {
+            }, tabindex: "0" }, h("div", { key: '262c00872bbfb8958de008e6a5d9f847a6121777', class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, h("div", { key: 'c64dc6333e5b8cd876d5dac4ed294885fa9d97db', class: {
                 'group-header-selection-indicator': true,
                 'group-header-selection-indicator-item-selected': this.itemSelected,
-            } }), h("div", { key: 'bc128ad0a4fa2af31cbd03cb67fd8785f605bac1', class: "btn-expand-header" }, h("ix-icon", { key: '8fbfe095e0d37b74804e67c174b347cca9471f60', "data-testid": "expand-collapsed-icon", class: {
+            } }), h("div", { key: 'b295acc0552867f1d97803cf7ffa2fcdafe30931', class: "btn-expand-header" }, h("ix-icon", { key: 'd0b798aa02a970d77d1636ff38677f2b5777dc0b', "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: {
+            }, name: this.collapsed ? 'chevron-right-small' : 'chevron-down-small', onClick: (e) => this.onExpandClick(e) })), h("div", { key: 'fa7a41f9e379ec4972d1c3db364f0ab82e57a0b5', 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: '4caba82a4558a06a999723d52dd05ed1c19c772b', name: "header" }))), h("ix-group-context-menu", { key: 'ca29c2ff305e9a0ba11299771cdb27c509cf887c' }, h("slot", { key: 'dfd21416520cac904b790be7fceb0f02f8ef630d', name: "dropdown" }))), h("div", { key: '07470786706f46bd197ea7ff9ce6b0b97d8b114a', class: {
                 'group-content': true,
-            } }, h("div", { key: 'ba7fd9e27461fe30ed804e03d0e7b99b377f0dff', style: {
+            } }, h("div", { key: 'f9ec75f57035ff5583dd728d34907139f7d787f5', style: {
                 display: this.collapsed ? 'none' : 'contents',
-            } }, h("slot", { key: 'e4ce555634eae2b89f64d18ce2220d6ec677baf1', onSlotchange: () => {
-                const slot = this.hostElement.shadowRoot.querySelector('slot:not([name])');
+            } }, h("slot", { key: 'bc86c0d2b2cc896e350c61aeb98896979ffb3647', 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: '1f50e8d0639ad719f84dd938e8c30f28856a2ee3', suppressSelection: true, focusable: false, class: {
+            } }), h("ix-group-item", { key: 'ad82143a05418d19517e06205452ed1db0367258', suppressSelection: true, focusable: false, class: {
                 footer: true,
                 'footer-visible': this.footerVisible,
-            } }, h("slot", { key: '96a102b08e08ff95f0f56ddf06b6ff47efdbb89c', name: "footer", onSlotchange: () => this.onSlotChange() }))))));
+            } }, h("slot", { key: 'e4aec4e664f7f4479e9be7d90bec9ea19c1b8677', name: "footer", onSlotchange: () => this.onSlotChange() }))))));
     }
     static get is() { return "ix-group"; }
     static get encapsulation() { return "shadow"; }
@@ -163,7 +169,7 @@ export class Group {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Group header"
@@ -180,7 +186,7 @@ export class Group {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Group header subtitle"
@@ -221,7 +227,8 @@ export class Group {
                     "text": "Whether the group is selected."
                 },
                 "attribute": "selected",
-                "reflect": true
+                "reflect": true,
+                "defaultValue": "false"
             },
             "index": {
                 "type": "number",
@@ -232,7 +239,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 +270,6 @@ export class Group {
     static get states() {
         return {
             "itemSelected": {},
-            "dropdownTriggerRef": {},
             "slotSize": {},
             "footerVisible": {},
             "showExpandCollapsedIcon": {}

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: 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 = 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  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    const newIndex = index === this.index ? undefined : index;\n    this.selectItem.emit(newIndex);\n\n    this.index = newIndex;\n\n    if (this.index !== undefined && 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    if (!this.groupContent) {\n      return;\n    }\n\n    this.observer.observe(this.groupContent, {\n      childList: true,\n    });\n\n    this.groupContent?.addEventListener(\n      'selectedChanged',\n      (evt: CustomEvent<HTMLIxGroupItemElement>) => {\n        if (evt.detail.suppressSelection) {\n          evt.stopPropagation();\n          return;\n        }\n\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(\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

@@ -40,8 +40,46 @@ 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('prevent default', 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('selectedChanged', (e) => e.preventDefault());
+    });
+    await groupItem.click();
+    await expect(groupItem).not.toHaveClass('/hydrated 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: 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    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('prevent default', 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('selectedChanged', (e) => e.preventDefault());\n  });\n\n  await groupItem.click();\n  await expect(groupItem).not.toHaveClass('/hydrated 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);

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

@@ -13,21 +13,17 @@ export class GroupItem {
         this.text = undefined;
         this.secondaryText = undefined;
         this.suppressSelection = false;
-        this.selected = undefined;
+        this.selected = false;
         this.focusable = true;
         this.index = undefined;
     }
     clickListen() {
-        if (this.suppressSelection) {
-            return;
-        }
         this.selectedChanged.emit(this.hostElement);
     }
     render() {
-        return (h(Host, { key: 'ec30959a56062acbad4443b9ca91fb8c99125b03', class: {
+        return (h(Host, { key: 'ae51a9df7d4b27336b05017a18300c5ee91473c7', class: {
                 selected: this.selected && !this.suppressSelection,
-                'suppress-selection': this.suppressSelection,
-            } }, 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' }))));
+            } }, h("button", { key: 'd70ce085f9deb507c5365c4d4c3c75dac4864560', tabindex: this.focusable ? 0 : -1 }, h("div", { key: '194d910fb5b1dc94e27b504568ef9b5d774fcaca', 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: '4934b9729052b030c04ea695d23abde6634eaf10' }))));
     }
     static get is() { return "ix-group-item"; }
     static get encapsulation() { return "shadow"; }
@@ -52,7 +48,7 @@ export class GroupItem {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Group item icon"
@@ -69,7 +65,7 @@ export class GroupItem {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Group item text"
@@ -86,7 +82,7 @@ export class GroupItem {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Group item secondary text"
@@ -127,7 +123,8 @@ export class GroupItem {
                     "text": "Show selected state"
                 },
                 "attribute": "selected",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "false"
             },
             "focusable": {
                 "type": "boolean",
@@ -156,7 +153,7 @@ export class GroupItem {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Index"

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

@@ -1 +1 @@
-{"version":3,"file":"group-item.js","sourceRoot":"","sources":["../../../src/components/group-item/group-item.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,GACL,MAAM,eAAe,CAAC;AAOvB,MAAM,OAAO,SAAS;;;;;iCAqBQ,KAAK;;yBAWb,IAAI;;;IAaxB,WAAW;QACT,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC3B,OAAO;QACT,CAAC;QACD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC9C,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,iBAAiB;gBAClD,oBAAoB,EAAE,IAAI,CAAC,iBAAiB;aAC7C;YAED,+DAAQ,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBACvC,4DAAK,KAAK,EAAC,iCAAiC,GAAO;gBAClD,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,eAAS,IAAI,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY,CAAC,CAAC,CAAC,IAAI;gBACjE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACX,YAAM,KAAK,EAAC,kBAAkB;oBAC5B,YAAM,KAAK,EAAE,IAAI,CAAC,IAAI,IAAG,IAAI,CAAC,IAAI,CAAQ,CACrC,CACR,CAAC,CAAC,CAAC,IAAI;gBACP,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CACpB,YAAM,KAAK,EAAC,4BAA4B;oBACtC,YAAM,KAAK,EAAE,IAAI,CAAC,aAAa,IAAG,IAAI,CAAC,aAAa,CAAQ,CACvD,CACR,CAAC,CAAC,CAAC,IAAI;gBACR,8DAAa,CACN,CACJ,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 {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-group-item',\n  styleUrl: 'group-item.scss',\n  shadow: true,\n})\nexport class GroupItem {\n  @Element() hostElement!: HTMLIxGroupItemElement;\n\n  /**\n   * Group item icon\n   */\n  @Prop() icon: string;\n\n  /**\n   * Group item text\n   */\n  @Prop() text: string;\n\n  /**\n   * Group item secondary text\n   */\n  @Prop() secondaryText: string;\n\n  /**\n   * Supress the selection of the group\n   */\n  @Prop() suppressSelection = false;\n\n  /**\n   * Show selected state\n   */\n  @Prop() selected: boolean;\n\n  /**\n   * The elements tabindex attribute will get set accordingly.\n   * If true tabindex will be 0, -1 otherwise.\n   */\n  @Prop() focusable = true;\n\n  /**\n   * Selection changed\n   */\n  @Event() selectedChanged: EventEmitter<HTMLIxGroupItemElement>;\n\n  /**\n   * Index\n   */\n  @Prop() index: number;\n\n  @Listen('click', { passive: true })\n  clickListen() {\n    if (this.suppressSelection) {\n      return;\n    }\n    this.selectedChanged.emit(this.hostElement);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          selected: this.selected && !this.suppressSelection,\n          'suppress-selection': this.suppressSelection,\n        }}\n      >\n        <button tabindex={this.focusable ? 0 : -1}>\n          <div class=\"group-entry-selection-indicator\"></div>\n          {this.icon ? <ix-icon size=\"16\" name={this.icon}></ix-icon> : null}\n          {this.text ? (\n            <span class=\"group-entry-text\">\n              <span title={this.text}>{this.text}</span>\n            </span>\n          ) : null}\n          {this.secondaryText ? (\n            <span class=\"group-entry-text-secondary\">\n              <span title={this.secondaryText}>{this.secondaryText}</span>\n            </span>\n          ) : null}\n          <slot></slot>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"group-item.js","sourceRoot":"","sources":["../../../src/components/group-item/group-item.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,GACL,MAAM,eAAe,CAAC;AAOvB,MAAM,OAAO,SAAS;;;;;iCAqBQ,KAAK;wBAKL,KAAK;yBAMb,IAAI;;;IAaxB,WAAW;QACT,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC9C,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,iBAAiB;aACnD;YAED,+DAAQ,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBACvC,4DAAK,KAAK,EAAC,iCAAiC,GAAO;gBAClD,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,eAAS,IAAI,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY,CAAC,CAAC,CAAC,IAAI;gBACjE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACX,YAAM,KAAK,EAAC,kBAAkB;oBAC5B,YAAM,KAAK,EAAE,IAAI,CAAC,IAAI,IAAG,IAAI,CAAC,IAAI,CAAQ,CACrC,CACR,CAAC,CAAC,CAAC,IAAI;gBACP,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CACpB,YAAM,KAAK,EAAC,4BAA4B;oBACtC,YAAM,KAAK,EAAE,IAAI,CAAC,aAAa,IAAG,IAAI,CAAC,aAAa,CAAQ,CACvD,CACR,CAAC,CAAC,CAAC,IAAI;gBACR,8DAAa,CACN,CACJ,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 {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-group-item',\n  styleUrl: 'group-item.scss',\n  shadow: true,\n})\nexport class GroupItem {\n  @Element() hostElement!: HTMLIxGroupItemElement;\n\n  /**\n   * Group item icon\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Group item text\n   */\n  @Prop() text?: string;\n\n  /**\n   * Group item secondary text\n   */\n  @Prop() secondaryText?: string;\n\n  /**\n   * Supress the selection of the group\n   */\n  @Prop() suppressSelection = false;\n\n  /**\n   * Show selected state\n   */\n  @Prop() selected: boolean = false;\n\n  /**\n   * The elements tabindex attribute will get set accordingly.\n   * If true tabindex will be 0, -1 otherwise.\n   */\n  @Prop() focusable = true;\n\n  /**\n   * Selection changed\n   */\n  @Event() selectedChanged!: EventEmitter<HTMLIxGroupItemElement>;\n\n  /**\n   * Index\n   */\n  @Prop() index?: number;\n\n  @Listen('click', { passive: true })\n  clickListen() {\n    this.selectedChanged.emit(this.hostElement);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          selected: this.selected && !this.suppressSelection,\n        }}\n      >\n        <button tabindex={this.focusable ? 0 : -1}>\n          <div class=\"group-entry-selection-indicator\"></div>\n          {this.icon ? <ix-icon size=\"16\" name={this.icon}></ix-icon> : null}\n          {this.text ? (\n            <span class=\"group-entry-text\">\n              <span title={this.text}>{this.text}</span>\n            </span>\n          ) : null}\n          {this.secondaryText ? (\n            <span class=\"group-entry-text-secondary\">\n              <span title={this.secondaryText}>{this.secondaryText}</span>\n            </span>\n          ) : null}\n          <slot></slot>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -69,7 +69,7 @@ export class IconButton {
             type: this.type,
             extraClasses: this.getIconSizeClass(),
         };
-        return (h(Host, { key: '0de06c10c66ae48a19a61794482353383007175d', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, h(BaseIconButton, Object.assign({ key: '151dac878b35e83b8cca149e8b68c28f1198d5db' }, baseButtonProps))));
+        return (h(Host, { key: '3936b4cb8d9419a0be9618949383a20e91d26b24', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, h(BaseIconButton, Object.assign({ key: '44c24801e0082622aa94c3ac213b633c6da00d61' }, baseButtonProps))));
     }
     static get is() { return "ix-icon-button"; }
     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: '90281a49cd680bd8cf611726bf0c6370452432d1', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, h(BaseIconButton, Object.assign({ key: '12a0e3c4c9654c522dbf65bb43744143b842c44c' }, baseButtonProps))));
+        return (h(Host, { key: '8e9838c22d5fced8887a6d6381394875b81433ac', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, h(BaseIconButton, Object.assign({ key: '5d758620c26f25e52825a2319320a770406a4cb7' }, 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: '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" }))));
+        return (h(Host, { key: '94b064c7c5cb011576c94a27846843f3c919ceac', class: { disabled: this.disabled } }, h("div", { key: 'a35679f97300d5070505e07c1a67591a578864b5', class: "group group-start" }, h("slot", { key: '6c1541e103b20d36ddc024399cc55284bebe239e', name: "input-start" })), h("slot", { key: 'a1d004e8ced49abd3ed2f861018af0d954e294f7' }), h("div", { key: '6e712535611adcfd25e91f1136c7a89808edaf0a', class: "group group-end" }, h("slot", { key: 'bf4302e8ecf94f5a83db1c5e3c9636c6c8a2e67e', name: "input-end" }))));
     }
     static get is() { return "ix-input-group"; }
     static get encapsulation() { return "shadow"; }