@siemens/ix 1.6.3 → 2.0.0-beta.1

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

@@ -7,28 +7,40 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { h, Host } from '@stencil/core';
+import { getSlottedElements } from '../utils/shadow-dom';
 export class GroupContextMenu {
   constructor() {
     this.showContextMenu = false;
   }
-  get dropdownElement() {
-    return this.host.querySelector('ix-dropdown');
-  }
-  get groupDropdownItem() {
-    return this.host.querySelectorAll('ix-group-dropdown-item');
-  }
-  configureDropdown(triggerElement) {
-    this.dropdownElement.positioningStrategy = 'fixed';
-    this.dropdownElement.trigger = triggerElement;
-  }
-  componentWillRender() {
-    this.showContextMenu = !!this.dropdownElement;
+  getTrigger() {
+    return this.hostElement;
+  }
+  configureDropdown(dropdownElement, triggerElement) {
+    dropdownElement.positioningStrategy = 'fixed';
+    dropdownElement.trigger = triggerElement;
+  }
+  onSlotChange() {
+    const slot = this.hostElement.shadowRoot.querySelector('slot');
+    if (!slot) {
+      return;
+    }
+    const elements = getSlottedElements(slot);
+    this.showContextMenu = elements.length !== 0;
+    const dropdownElement = elements.find((elm) => elm.tagName === 'IX-DROPDOWN');
+    const triggerElement = this.getTrigger();
+    if (!triggerElement) {
+      return;
+    }
+    if (!dropdownElement) {
+      return;
+    }
+    this.configureDropdown(dropdownElement, triggerElement);
   }
   render() {
-    return (h(Host, null, h("ix-icon-button", { class: { hide: !this.showContextMenu }, ref: (ref) => this.dropdownElement ? this.configureDropdown(ref) : null, size: "24", ghost: true, icon: "context-menu" }), h("slot", null)));
+    return (h(Host, null, h("ix-icon-button", { class: { hide: !this.showContextMenu }, size: "24", ghost: true, icon: "context-menu" }), h("slot", { onSlotchange: () => this.onSlotChange() })));
   }
   static get is() { return "ix-group-context-menu"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["./group-context-menu.scss"]
@@ -44,6 +56,6 @@ export class GroupContextMenu {
       "showContextMenu": {}
     };
   }
-  static get elementRef() { return "host"; }
+  static get elementRef() { return "hostElement"; }
 }
 //# sourceMappingURL=group-context-menu.js.map

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;AAOnE,MAAM,OAAO,gBAAgB;;2BAGA,KAAK;;EAEhC,IAAI,eAAe;IACjB,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;EAChD,CAAC;EAED,IAAI,iBAAiB;IACnB,OAAO,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAC;EAC9D,CAAC;EAEO,iBAAiB,CAAC,cAA2B;IACnD,IAAI,CAAC,eAAe,CAAC,mBAAmB,GAAG,OAAO,CAAC;IACnD,IAAI,CAAC,eAAe,CAAC,OAAO,GAAG,cAAc,CAAC;EAChD,CAAC;EAED,mBAAmB;IACjB,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC;EAChD,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,sBACE,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,EACtC,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CACX,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,EAE3D,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,IAAI,EACX,IAAI,EAAC,cAAc,GACH;MAClB,eAAa,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, State } from '@stencil/core';\n\n@Component({\n  tag: 'ix-group-context-menu',\n  styleUrl: './group-context-menu.scss',\n  scoped: true,\n})\nexport class GroupContextMenu {\n  @Element() host!: HTMLIxGroupContextMenuElement;\n\n  @State() showContextMenu = false;\n\n  get dropdownElement() {\n    return this.host.querySelector('ix-dropdown');\n  }\n\n  get groupDropdownItem() {\n    return this.host.querySelectorAll('ix-group-dropdown-item');\n  }\n\n  private configureDropdown(triggerElement: HTMLElement) {\n    this.dropdownElement.positioningStrategy = 'fixed';\n    this.dropdownElement.trigger = triggerElement;\n  }\n\n  componentWillRender() {\n    this.showContextMenu = !!this.dropdownElement;\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-icon-button\n          class={{ hide: !this.showContextMenu }}\n          ref={(ref) =>\n            this.dropdownElement ? this.configureDropdown(ref) : null\n          }\n          size=\"24\"\n          ghost={true}\n          icon=\"context-menu\"\n        ></ix-icon-button>\n        <slot></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;;2BAGA,KAAK;;EAExB,UAAU;IAChB,OAAO,IAAI,CAAC,WAAW,CAAC;EAC1B,CAAC;EAEO,iBAAiB,CACvB,eAAsC,EACtC,cAA2B;IAE3B,eAAe,CAAC,mBAAmB,GAAG,OAAO,CAAC;IAC9C,eAAe,CAAC,OAAO,GAAG,cAAc,CAAC;EAC3C,CAAC;EAEO,YAAY;IAClB,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC/D,IAAI,CAAC,IAAI,EAAE;MACT,OAAO;KACR;IACD,MAAM,QAAQ,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAAC;IAC1C,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC,MAAM,KAAK,CAAC,CAAC;IAE7C,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CACnC,CAAC,GAAY,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,KAAK,aAAa,CAChD,CAAC;IAEF,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;IAEzC,IAAI,CAAC,cAAc,EAAE;MACnB,OAAO;KACR;IAED,IAAI,CAAC,eAAe,EAAE;MACpB,OAAO;KACR;IAED,IAAI,CAAC,iBAAiB,CAAC,eAAe,EAAE,cAAc,CAAC,CAAC;EAC1D,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,sBACE,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,EACtC,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,IAAI,EACX,IAAI,EAAC,cAAc,GACH;MAClB,YAAM,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,GAAS,CACjD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, 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

@@ -65,19 +65,19 @@
 :host .group-header:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .group-header:not(.disabled):not(:disabled):hover {
+:host .group-header:not(.disabled):not(:disabled):hover, :host .group-header:not(.disabled):not(:disabled):hover {
   background-color: var(--theme-group-item--background--hover);
 }
-:host .group-header:not(.disabled):not(:disabled):hover.selected {
+:host .group-header:not(.disabled):not(:disabled):hover.selected, :host .group-header:not(.disabled):not(:disabled):hover.selected {
   background-color: var(--theme-group-item--background--selected);
 }
 :host .group-header:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .group-header:not(.disabled):not(:disabled):active {
+:host .group-header:not(.disabled):not(:disabled):active, :host .group-header:not(.disabled):not(:disabled).active {
   background-color: var(--theme-group-item--background--active);
 }
-:host .group-header:not(.disabled):not(:disabled):active.selected {
+:host .group-header:not(.disabled):not(:disabled):active.selected, :host .group-header:not(.disabled):not(:disabled).active.selected {
   background-color: var(--theme-group-item--background--selected);
 }
 :host .group-header:not(.disabled):not(:disabled):focus-visible {
@@ -158,11 +158,17 @@
 :host .group-content {
   display: flex;
   flex-direction: column;
+  gap: 1px;
+  margin-top: 1px;
 }
 :host .footer {
+  visibility: collapse;
   height: auto;
   min-height: 0;
 }
+:host .footer-visible {
+  visibility: visible;
+}
 :host .hidden {
   display: none;
 }

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

@@ -6,9 +6,23 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { h, Host, } from '@stencil/core';
+import { Fragment, h, Host, } from '@stencil/core';
 import { createMutationObserver } from '../utils/mutation-observer';
+import { hasSlottedElements } from '../utils/shadow-dom';
 export class Group {
+  constructor() {
+    this.suppressHeaderSelection = false;
+    this.header = undefined;
+    this.subHeader = undefined;
+    this.collapsed = true;
+    this.selected = undefined;
+    this.index = undefined;
+    this.expandOnHeaderClick = false;
+    this.itemSelected = false;
+    this.dropdownTriggerRef = undefined;
+    this.slotSize = this.groupItems.length;
+    this.footerVisible = false;
+  }
   get dropdownItems() {
     return Array.from(this.hostElement.querySelectorAll('ix-group-dropdown-item'));
   }
@@ -16,31 +30,7 @@ export class Group {
     return Array.from(this.hostElement.querySelectorAll('ix-group-item:not(.footer)'));
   }
   get groupContent() {
-    return this.hostElement.querySelector('.group-content');
-  }
-  get footer() {
-    return this.hostElement.querySelector('.footer');
-  }
-  constructor() { this.suppressHeaderSelection = false; this.header = undefined; this.subHeader = undefined; this.collapsed = true; this.selected = undefined; this.index = undefined; this.expandOnHeaderClick = false; this.itemSelected = false; this.dropdownTriggerRef = undefined; this.slotSize = this.groupItems.length; }
-  async onKeyDown(event) {
-    const targetElement = event.target;
-    if (!this.hostElement.contains(targetElement)) {
-      return;
-    }
-    if (event.code === 'Enter' || event.code === 'NumpadEnter') {
-      if (targetElement.classList.contains('group-header')) {
-        if (this.suppressHeaderSelection) {
-          this.collapsed = !this.collapsed;
-        }
-        else {
-          this.selected = !this.selected;
-        }
-      }
-      else if (targetElement.matches('ix-group-item')) {
-        const groupItem = targetElement;
-        groupItem.selected = !groupItem.selected;
-      }
-    }
+    return this.hostElement.shadowRoot.querySelector('.group-content');
   }
   onExpandClick(event) {
     this.collapsed = !this.collapsed;
@@ -75,10 +65,14 @@ export class Group {
       this.selectGroup.emit(this.selected);
     }
   }
+  onSlotChange() {
+    const slot = this.hostElement.shadowRoot.querySelector('slot[name="footer"]');
+    if (slot) {
+      this.footerVisible = hasSlottedElements(slot);
+    }
+  }
   componentWillRender() {
-    var _a;
     this.groupItems.forEach((item, index) => {
-      var _a;
       if (this.selected === true) {
         item.selected = false;
         this.index = undefined;
@@ -87,14 +81,7 @@ export class Group {
       }
       item.selected = index === this.index;
       item.index = index;
-      item.classList.remove('last');
-      if (!((_a = this.footer) === null || _a === void 0 ? void 0 : _a.children.length) && index === this.slotSize - 1) {
-        item.classList.add('last');
-      }
     });
-    if (((_a = this.footer) === null || _a === void 0 ? void 0 : _a.childElementCount) > 1) {
-      this.groupContent.appendChild(this.footer);
-    }
   }
   componentDidLoad() {
     this.observer = createMutationObserver(() => {
@@ -124,11 +111,13 @@ export class Group {
         hidden: this.slotSize === 0,
       }, name: `chevron-${this.collapsed ? 'right' : 'down'}-small`, onClick: (e) => this.onExpandClick(e) })), h("div", { 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", { name: "header" }))), h("ix-group-context-menu", null, h("slot", { name: "dropdown" }))), h("div", { class: {
         'group-content': true,
-        'd-none': this.collapsed,
-      } }, h("slot", null)), h("div", { class: "d-none" }, h("ix-group-item", { class: "footer last", suppressSelection: true, focusable: false }, h("slot", { name: "footer" })))));
+      } }, !this.collapsed ? (h(Fragment, null, h("slot", null), h("ix-group-item", { suppressSelection: true, focusable: false, class: {
+        footer: true,
+        'footer-visible': this.footerVisible,
+      } }, h("slot", { name: "footer", onSlotchange: () => this.onSlotChange() })))) : null)));
   }
   static get is() { return "ix-group"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["group.scss"]
@@ -269,7 +258,8 @@ export class Group {
     return {
       "itemSelected": {},
       "dropdownTriggerRef": {},
-      "slotSize": {}
+      "slotSize": {},
+      "footerVisible": {}
     };
   }
   static get events() {
@@ -321,14 +311,5 @@ export class Group {
       }];
   }
   static get elementRef() { return "hostElement"; }
-  static get listeners() {
-    return [{
-        "name": "keydown",
-        "method": "onKeyDown",
-        "target": "window",
-        "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  Listen,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\n@Component({\n  tag: 'ix-group',\n  styleUrl: 'group.scss',\n  scoped: true,\n})\nexport class Group {\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  @Element() hostElement!: HTMLIxGroupElement;\n\n  @State() itemSelected = false;\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.querySelector('.group-content');\n  }\n\n  get footer() {\n    return this.hostElement.querySelector('.footer');\n  }\n\n  @State() dropdownTriggerRef: HTMLElement;\n\n  @State() slotSize = this.groupItems.length;\n\n  constructor() {}\n\n  @Listen('keydown', {\n    target: 'window',\n  })\n  async onKeyDown(event: KeyboardEvent) {\n    const targetElement = event.target as HTMLElement;\n\n    if (!this.hostElement.contains(targetElement)) {\n      return;\n    }\n\n    if (event.code === 'Enter' || event.code === 'NumpadEnter') {\n      if (targetElement.classList.contains('group-header')) {\n        if (this.suppressHeaderSelection) {\n          this.collapsed = !this.collapsed;\n        } else {\n          this.selected = !this.selected;\n        }\n      } else if (targetElement.matches('ix-group-item')) {\n        const groupItem = targetElement as HTMLIxGroupItemElement;\n        groupItem.selected = !groupItem.selected;\n      }\n    }\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  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      item.classList.remove('last');\n      if (!this.footer?.children.length && index === this.slotSize - 1) {\n        item.classList.add('last');\n      }\n    });\n\n    if (this.footer?.childElementCount > 1) {\n      this.groupContent.appendChild(this.footer);\n    }\n  }\n\n  private observer: MutationObserver;\n\n  componentDidLoad() {\n    this.observer = createMutationObserver(() => {\n      this.slotSize = this.groupItems.length;\n    });\n\n    this.observer.observe(this.groupContent, {\n      childList: true,\n    });\n\n    this.groupContent.addEventListener(\n      'selectedChanged',\n      (evt: CustomEvent<HTMLIxGroupItemElement>) => {\n        this.onItemClick(evt.detail.index);\n      }\n    );\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'group-header': true,\n            expand: !this.collapsed,\n            selected: this.selected,\n          }}\n          tabindex=\"0\"\n        >\n          <div\n            class=\"group-header-clickable\"\n            onClick={(e) => this.onHeaderClick(e)}\n          >\n            <div\n              class={{\n                'group-header-selection-indicator': true,\n                'group-header-selection-indicator-item-selected':\n                  this.itemSelected,\n              }}\n            ></div>\n            <div class=\"btn-expand-header\">\n              <ix-icon\n                class={{\n                  hidden: this.slotSize === 0,\n                }}\n                name={`chevron-${this.collapsed ? 'right' : 'down'}-small`}\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            'd-none': this.collapsed,\n          }}\n        >\n          <slot></slot>\n        </div>\n        <div class=\"d-none\">\n          <ix-group-item\n            class=\"footer last\"\n            suppressSelection={true}\n            focusable={false}\n          >\n            <slot name=\"footer\"></slot>\n          </ix-group-item>\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  Fragment,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { hasSlottedElements } from '../utils/shadow-dom';\n\n@Component({\n  tag: 'ix-group',\n  styleUrl: 'group.scss',\n  shadow: true,\n})\nexport class Group {\n  @Element() hostElement!: HTMLIxGroupElement;\n\n  /**\n   * Prevent header from being selectable\n   */\n  @Prop() suppressHeaderSelection = false;\n\n  /**\n   * Group header\n   */\n  @Prop() header: string;\n\n  /**\n   * Group header subtitle\n   */\n  @Prop() subHeader: string;\n\n  /**\n   * Whether the group is collapsed or expanded. Defaults to true.\n   */\n  @Prop({ mutable: true, reflect: true }) collapsed = true;\n\n  /**\n   * Whether the group is selected.\n   */\n  @Prop({ mutable: true, reflect: true }) selected: boolean;\n\n  /**\n   * The index of the selected group entry.\n   * If undefined no group item is selected.\n   */\n  @Prop({ mutable: true, reflect: true }) index: number;\n\n  /**\n   * Expand the group if the header is clicked\n   */\n  @Prop() expandOnHeaderClick = false;\n\n  /**\n   * Emits when whole group gets selected.\n   */\n  @Event() selectGroup: EventEmitter<boolean>;\n\n  /**\n   * Emits when group item gets selected.\n   */\n  @Event() selectItem: EventEmitter<number>;\n\n  /**\n   * Group collapsed\n   */\n  @Event() collapsedChanged: EventEmitter<boolean>;\n\n  @State() itemSelected = false;\n  @State() dropdownTriggerRef: HTMLElement;\n  @State() slotSize = this.groupItems.length;\n  @State() footerVisible = false;\n\n  private observer: MutationObserver;\n\n  get dropdownItems() {\n    return Array.from(\n      this.hostElement.querySelectorAll('ix-group-dropdown-item')\n    );\n  }\n\n  get groupItems(): Array<HTMLIxGroupItemElement> {\n    return Array.from(\n      this.hostElement.querySelectorAll('ix-group-item:not(.footer)')\n    );\n  }\n\n  get groupContent() {\n    return this.hostElement.shadowRoot.querySelector('.group-content');\n  }\n\n  private onExpandClick(event: Event) {\n    this.collapsed = !this.collapsed;\n\n    this.collapsedChanged.emit(this.collapsed);\n    event.stopPropagation();\n  }\n\n  private onHeaderClick(event: Event) {\n    this.setGroupSelection(!this.selected);\n\n    if (this.suppressHeaderSelection) {\n      this.onExpandClick(event);\n    }\n  }\n\n  private onItemClick(index: number) {\n    if (index === this.index) {\n      this.index = undefined;\n      this.selectItem.emit(undefined);\n    } else {\n      this.index = index;\n      this.selectItem.emit(index);\n    }\n\n    if (this.index >= 0) {\n      this.itemSelected = true;\n    } else this.itemSelected = false;\n\n    this.setGroupSelection(false);\n  }\n\n  private setGroupSelection(selection: boolean) {\n    if (!this.suppressHeaderSelection) {\n      this.selected = selection;\n      this.selectGroup.emit(this.selected);\n    }\n  }\n\n  private onSlotChange() {\n    const slot = this.hostElement.shadowRoot.querySelector(\n      'slot[name=\"footer\"]'\n    );\n\n    if (slot) {\n      this.footerVisible = hasSlottedElements(slot);\n    }\n  }\n\n  componentWillRender() {\n    this.groupItems.forEach((item, index) => {\n      if (this.selected === true) {\n        item.selected = false;\n        this.index = undefined;\n        this.itemSelected = false;\n        return;\n      }\n      item.selected = index === this.index;\n      item.index = index;\n    });\n  }\n\n  componentDidLoad() {\n    this.observer = createMutationObserver(() => {\n      this.slotSize = this.groupItems.length;\n    });\n\n    this.observer.observe(this.groupContent, {\n      childList: true,\n    });\n\n    this.groupContent.addEventListener(\n      'selectedChanged',\n      (evt: CustomEvent<HTMLIxGroupItemElement>) => {\n        this.onItemClick(evt.detail.index);\n      }\n    );\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'group-header': true,\n            expand: !this.collapsed,\n            selected: this.selected,\n          }}\n          tabindex=\"0\"\n        >\n          <div\n            class=\"group-header-clickable\"\n            onClick={(e) => this.onHeaderClick(e)}\n          >\n            <div\n              class={{\n                'group-header-selection-indicator': true,\n                'group-header-selection-indicator-item-selected':\n                  this.itemSelected,\n              }}\n            ></div>\n            <div class=\"btn-expand-header\">\n              <ix-icon\n                class={{\n                  hidden: this.slotSize === 0,\n                }}\n                name={`chevron-${this.collapsed ? 'right' : 'down'}-small`}\n                onClick={(e) => this.onExpandClick(e)}\n              ></ix-icon>\n            </div>\n\n            <div class=\"group-header-content\">\n              {this.header ? (\n                <div class=\"group-header-props-container\">\n                  <div class=\"group-header-title\">\n                    <span title={this.header}>{this.header}</span>\n                  </div>\n                  <div class=\"group-subheader\" title={this.subHeader}>\n                    {this.subHeader}\n                  </div>\n                </div>\n              ) : null}\n              <slot name=\"header\"></slot>\n            </div>\n          </div>\n          <ix-group-context-menu>\n            <slot name=\"dropdown\"></slot>\n          </ix-group-context-menu>\n        </div>\n        <div\n          class={{\n            'group-content': true,\n          }}\n        >\n          {!this.collapsed ? (\n            <Fragment>\n              <slot></slot>\n              <ix-group-item\n                suppressSelection={true}\n                focusable={false}\n                class={{\n                  footer: true,\n                  'footer-visible': this.footerVisible,\n                }}\n              >\n                <slot\n                  name=\"footer\"\n                  onSlotchange={() => this.onSlotChange()}\n                ></slot>\n              </ix-group-item>\n            </Fragment>\n          ) : null}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -42,21 +42,75 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 :host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
   display: flex;
   min-height: 2.25rem;
   height: 2.25rem;
+}
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
+:host ::-webkit-scrollbar-button {
+  display: none;
+}
+:host ::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+:host ::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
+}
+:host ::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
+}
+:host ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host ::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host ::-webkit-scrollbar-corner {
+  display: none;
+}
+:host > button {
+  display: flex;
+  height: 100%;
+  width: 100%;
   align-items: center;
-  justify-content: space-between;
-  padding: 0.5rem 1.5rem 0.5rem 2.5rem;
+  justify-content: flex-start;
   position: relative;
-  margin-top: 0.0625rem;
   outline: none;
   background-color: var(--theme-group-item--background);
+  border: 1px solid transparent;
+  color: var(--theme-color-std-text);
+  padding-left: 2.5rem;
 }
-:host.last {
-  border-bottom-left-radius: 0.25rem;
-  border-bottom-right-radius: 0.25rem;
+:host > button:focus-visible {
+  border: 1px solid var(--theme-color-focus-bdr);
 }
 :host ix-icon {
   margin-right: 0.25rem;
@@ -64,15 +118,21 @@
 }
 :host .group-entry-selection-indicator {
   position: absolute;
-  left: 0;
-  height: 100%;
+  left: -1px;
+  height: calc(100% + 2px);
   width: 0.25rem;
 }
 :host .group-entry-text {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.429em;
+  color: var(--theme-color-std-text);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  flex-grow: 1;
 }
 :host .group-entry-text-secondary {
   display: flex;
@@ -80,41 +140,43 @@
   flex-grow: 1;
   white-space: nowrap;
   color: var(--theme-color-soft-text);
-  font-size: 0.875rem;
 }
 :host .group-entry-text-secondary,
 :host .group-entry-text-secondary span {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.429em;
+  color: var(--theme-color-std-text);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-:host:not(.suppress-selection):not(.disabled):not(:disabled) {
-  cursor: pointer;
+
+:host(.selected) {
+  border-top-width: 0.062rem !important;
+  background-color: var(--theme-color-ghost--selected);
 }
-:host:not(.suppress-selection):not(.disabled):not(:disabled):hover {
-  background-color: var(--theme-group-item--background--hover);
-  border-color: var(--theme-group-item--border-color--hover);
+:host(.selected) .group-entry-selection-indicator {
+  background-color: var(--theme-group-item-indicator--background--selected);
 }
-:host:not(.suppress-selection):not(.disabled):not(:disabled):hover.selected {
-  background-color: var(--theme-group-item--background--selected);
+
+:host(:not(.suppress-selection):hover) {
+  background-color: var(--theme-color-ghost--selected-hover);
+  border-color: var(--theme-group-item--border-color--hover);
 }
-:host:not(.suppress-selection):not(.disabled):not(:disabled) {
-  cursor: pointer;
+
+:host(:not(.suppress-selection).selected:hover) {
+  background-color: var(--theme-color-ghost--selected-hover);
 }
-:host:not(.suppress-selection):not(.disabled):not(:disabled):active {
-  background-color: var(--theme-group-item--background--active);
+
+:host(:not(.suppress-selection):active) {
+  background-color: var(--theme-color-ghost--selected-active);
   border-color: var(--theme-group-item--border-color--active);
 }
-:host:not(.suppress-selection):not(.disabled):not(:disabled):active.selected {
-  background-color: var(--theme-group-item--background--selected);
-}
-:host.selected {
-  border-top-width: 0.062rem !important;
-  background-color: var(--theme-group-item--background--selected);
-}
-:host.selected .group-entry-selection-indicator {
-  background-color: var(--theme-group-item-indicator--background--selected);
-}
-:host:not(.disabled):not(:disabled):focus-visible {
-  border: 1px solid var(--theme-color-focus-bdr) !important;
+
+:host(:not(.suppress-selection).selected:active) {
+  background-color: var(--theme-color-ghost--selected-active);
 }

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

@@ -27,10 +27,10 @@ export class GroupItem {
     return (h(Host, { class: {
         selected: this.selected && !this.suppressSelection,
         'suppress-selection': this.suppressSelection,
-      }, tabindex: this.focusable ? 0 : -1 }, h("div", { 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", null)));
+      } }, h("button", { tabindex: this.focusable ? 0 : -1 }, h("div", { 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", null))));
   }
   static get is() { return "ix-group-item"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["group-item.scss"]

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;;;;;6BAqBQ,KAAK;;qBAWb,IAAI;;;EAaxB,WAAW;IACT,IAAI,IAAI,CAAC,iBAAiB,EAAE;MAC1B,OAAO;KACR;IACD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;EAC9C,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,iBAAiB;QAClD,oBAAoB,EAAE,IAAI,CAAC,iBAAiB;OAC7C,EACD,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;MAEjC,WAAK,KAAK,EAAC,iCAAiC,GAAO;MAClD,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,eAAS,IAAI,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY,CAAC,CAAC,CAAC,IAAI;MACjE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACX,YAAM,KAAK,EAAC,kBAAkB;QAC5B,YAAM,KAAK,EAAE,IAAI,CAAC,IAAI,IAAG,IAAI,CAAC,IAAI,CAAQ,CACrC,CACR,CAAC,CAAC,CAAC,IAAI;MACP,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CACpB,YAAM,KAAK,EAAC,4BAA4B;QACtC,YAAM,KAAK,EAAE,IAAI,CAAC,aAAa,IAAG,IAAI,CAAC,aAAa,CAAQ,CACvD,CACR,CAAC,CAAC,CAAC,IAAI;MACR,eAAa,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\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  scoped: 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        tabindex={this.focusable ? 0 : -1}\n      >\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      </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;;;;;6BAqBQ,KAAK;;qBAWb,IAAI;;;EAaxB,WAAW;IACT,IAAI,IAAI,CAAC,iBAAiB,EAAE;MAC1B,OAAO;KACR;IACD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;EAC9C,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,iBAAiB;QAClD,oBAAoB,EAAE,IAAI,CAAC,iBAAiB;OAC7C;MAED,cAAQ,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACvC,WAAK,KAAK,EAAC,iCAAiC,GAAO;QAClD,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,eAAS,IAAI,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY,CAAC,CAAC,CAAC,IAAI;QACjE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACX,YAAM,KAAK,EAAC,kBAAkB;UAC5B,YAAM,KAAK,EAAE,IAAI,CAAC,IAAI,IAAG,IAAI,CAAC,IAAI,CAAQ,CACrC,CACR,CAAC,CAAC,CAAC,IAAI;QACP,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CACpB,YAAM,KAAK,EAAC,4BAA4B;UACtC,YAAM,KAAK,EAAE,IAAI,CAAC,aAAa,IAAG,IAAI,CAAC,aAAa,CAAQ,CACvD,CACR,CAAC,CAAC,CAAC,IAAI;QACR,eAAa,CACN,CACJ,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\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"]}

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

@@ -0,0 +1,14 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { h } from '@stencil/core';
+import { BaseButton } from '../button/base-button';
+export function BaseIconButton(props) {
+  return h(BaseButton, Object.assign({}, props, { type: "button" }));
+}
+//# sourceMappingURL=base-icon-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"base-icon-button.js","sourceRoot":"","sources":["../../../src/components/icon-button/base-icon-button.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClC,OAAO,EAAE,UAAU,EAAmB,MAAM,uBAAuB,CAAC;AAEpE,MAAM,UAAU,cAAc,CAAC,KAAoC;EACjE,OAAO,EAAC,UAAU,oBAAK,KAAK,IAAE,IAAI,EAAC,QAAQ,IAAc,CAAC;AAC5D,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 { h } from '@stencil/core';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\n\nexport function BaseIconButton(props: Omit<BaseButtonProps, 'type'>) {\n  return <BaseButton {...props} type=\"button\"></BaseButton>;\n}\n"]}