@siemens/ix 1.6.2 → 2.0.0-beta.0

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

@@ -1 +1 @@
-{"version":3,"file":"flip-tile-state.js","sourceRoot":"","sources":["../../../src/components/flip-tile/flip-tile-state.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,MAAM,CAAN,IAAY,aAMX;AAND,WAAY,aAAa;EACvB,8BAAa,CAAA;EACb,8BAAa,CAAA;EACb,oCAAmB,CAAA;EACnB,gCAAe,CAAA;EACf,oCAAmB,CAAA;AACrB,CAAC,EANW,aAAa,KAAb,aAAa,QAMxB","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\nexport enum FlipTileState {\n  None = 'None',\n  Info = 'Info',\n  Warning = 'Warning',\n  Alarm = 'Alarm',\n  Primary = 'Primary',\n}\n"]}
+{"version":3,"file":"flip-tile-state.js","sourceRoot":"","sources":["../../../src/components/flip-tile/flip-tile-state.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,MAAM,CAAN,IAAY,aAMX;AAND,WAAY,aAAa;EACvB,8BAAa,CAAA;EACb,8BAAa,CAAA;EACb,oCAAmB,CAAA;EACnB,gCAAe,CAAA;EACf,oCAAmB,CAAA;AACrB,CAAC,EANW,aAAa,KAAb,aAAa,QAMxB","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\nexport enum FlipTileState {\n  None = 'none',\n  Info = 'info',\n  Warning = 'warning',\n  Alarm = 'alarm',\n  Primary = 'primary',\n}\n"]}

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

@@ -64,7 +64,7 @@ export class FlipTile {
         alarm: this.state === FlipTileState.Alarm,
         primary: this.state === FlipTileState.Primary,
         'flip-animation-active': this.isFlipAnimationActive,
-      } }, h("div", { class: "flip-tile-header" }, h("div", { class: "header-slot-container text-l-title" }, h("slot", { name: "header" })), h("ix-icon-button", { icon: "eye", variant: "Primary", ghost: true, onClick: () => this.toggleIndex() })), h("div", { class: "content-container", ref: (el) => (this.contentContainerElement = el) }, h("slot", null)), h("div", { class: {
+      } }, h("div", { class: "flip-tile-header" }, h("div", { class: "header-slot-container text-l-title" }, h("slot", { name: "header" })), h("ix-icon-button", { icon: "eye", variant: "primary", ghost: true, onClick: () => this.toggleIndex() })), h("div", { class: "content-container", ref: (el) => (this.contentContainerElement = el) }, h("slot", null)), h("div", { class: {
         footer: true,
         'contrast-light': this.state === FlipTileState.Warning,
         'contrast-dark': this.state === FlipTileState.Info ||

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

@@ -1 +1 @@
-{"version":3,"file":"flip-tile.js","sourceRoot":"","sources":["../../../src/components/flip-tile/flip-tile.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 { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { FlipTileState } from './flip-tile-state';\n\n@Component({\n  tag: 'ix-flip-tile',\n  styleUrl: 'flip-tile.scss',\n  scoped: true,\n})\nexport class FlipTile {\n  private readonly ANIMATION_DURATION = 150;\n  private contentContainerElement: HTMLDivElement;\n  private contentItems: NodeList;\n\n  @Element() hostElement: HTMLIxFlipTileElement;\n\n  @State() index = 0;\n\n  @State() isFlipAnimationActive: boolean;\n\n  /**\n   * Variation of the Flip\n   */\n  @Prop() state: FlipTileState;\n\n  /**\n   * Tmp property name\n   * @deprecated Will be removed in 2.0.0. Setting this property has no effect\n   */\n  @Prop() footer: string;\n\n  /**\n   * Height interpreted as REM\n   * @since 1.5.0\n   */\n  @Prop() height: number | 'auto' = 15.125;\n\n  /**\n   * Width interpreted as REM\n   * @since 1.5.0\n   */\n  @Prop() width: number | 'auto' = 16;\n\n  componentDidLoad() {\n    this.contentItems = this.contentContainerElement.querySelectorAll(\n      'ix-flip-tile-content'\n    );\n    this.contentItems.forEach((_, index) => {\n      if (index !== this.index) {\n        this.toggleContentItem(index);\n      }\n    });\n  }\n\n  private toggleIndex() {\n    this.doFlipAnimation();\n  }\n\n  private toggleContentItem(index: number) {\n    const item = this.contentItems[index] as HTMLElement;\n    item.classList.toggle('d-none');\n  }\n\n  private doFlipAnimation() {\n    this.isFlipAnimationActive = true;\n\n    setTimeout(() => {\n      this.toggleContentItem(this.index);\n\n      if (this.index >= this.contentItems.length - 1) {\n        this.index = 0;\n      } else {\n        this.index++;\n      }\n\n      this.toggleContentItem(this.index);\n    }, this.ANIMATION_DURATION);\n\n    setTimeout(() => {\n      this.isFlipAnimationActive = false;\n    }, 2 * this.ANIMATION_DURATION);\n  }\n\n  render() {\n    return (\n      <Host\n        style={{\n          height: `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n          'min-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n          'max-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n          width: `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n          'min-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n          'max-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n        }}\n      >\n        <div\n          class={{\n            'flip-tile-container': true,\n            info: this.state === FlipTileState.Info,\n            warning: this.state === FlipTileState.Warning,\n            alarm: this.state === FlipTileState.Alarm,\n            primary: this.state === FlipTileState.Primary,\n            'flip-animation-active': this.isFlipAnimationActive,\n          }}\n        >\n          <div class=\"flip-tile-header\">\n            <div class=\"header-slot-container text-l-title\">\n              <slot name=\"header\"></slot>\n            </div>\n            <ix-icon-button\n              icon=\"eye\"\n              variant=\"Primary\"\n              ghost\n              onClick={() => this.toggleIndex()}\n            ></ix-icon-button>\n          </div>\n\n          <div\n            class=\"content-container\"\n            ref={(el) => (this.contentContainerElement = el)}\n          >\n            <slot></slot>\n          </div>\n          <div\n            class={{\n              footer: true,\n              'contrast-light': this.state === FlipTileState.Warning,\n              'contrast-dark':\n                this.state === FlipTileState.Info ||\n                this.state === FlipTileState.Alarm,\n            }}\n          >\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"flip-tile.js","sourceRoot":"","sources":["../../../src/components/flip-tile/flip-tile.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 { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { FlipTileState } from './flip-tile-state';\n\n@Component({\n  tag: 'ix-flip-tile',\n  styleUrl: 'flip-tile.scss',\n  scoped: true,\n})\nexport class FlipTile {\n  private readonly ANIMATION_DURATION = 150;\n  private contentContainerElement: HTMLDivElement;\n  private contentItems: NodeList;\n\n  @Element() hostElement: HTMLIxFlipTileElement;\n\n  @State() index = 0;\n\n  @State() isFlipAnimationActive: boolean;\n\n  /**\n   * Variation of the Flip\n   */\n  @Prop() state: FlipTileState;\n\n  /**\n   * Tmp property name\n   * @deprecated Will be removed in 2.0.0. Setting this property has no effect\n   */\n  @Prop() footer: string;\n\n  /**\n   * Height interpreted as REM\n   * @since 1.5.0\n   */\n  @Prop() height: number | 'auto' = 15.125;\n\n  /**\n   * Width interpreted as REM\n   * @since 1.5.0\n   */\n  @Prop() width: number | 'auto' = 16;\n\n  componentDidLoad() {\n    this.contentItems = this.contentContainerElement.querySelectorAll(\n      'ix-flip-tile-content'\n    );\n    this.contentItems.forEach((_, index) => {\n      if (index !== this.index) {\n        this.toggleContentItem(index);\n      }\n    });\n  }\n\n  private toggleIndex() {\n    this.doFlipAnimation();\n  }\n\n  private toggleContentItem(index: number) {\n    const item = this.contentItems[index] as HTMLElement;\n    item.classList.toggle('d-none');\n  }\n\n  private doFlipAnimation() {\n    this.isFlipAnimationActive = true;\n\n    setTimeout(() => {\n      this.toggleContentItem(this.index);\n\n      if (this.index >= this.contentItems.length - 1) {\n        this.index = 0;\n      } else {\n        this.index++;\n      }\n\n      this.toggleContentItem(this.index);\n    }, this.ANIMATION_DURATION);\n\n    setTimeout(() => {\n      this.isFlipAnimationActive = false;\n    }, 2 * this.ANIMATION_DURATION);\n  }\n\n  render() {\n    return (\n      <Host\n        style={{\n          height: `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n          'min-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n          'max-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n          width: `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n          'min-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n          'max-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n        }}\n      >\n        <div\n          class={{\n            'flip-tile-container': true,\n            info: this.state === FlipTileState.Info,\n            warning: this.state === FlipTileState.Warning,\n            alarm: this.state === FlipTileState.Alarm,\n            primary: this.state === FlipTileState.Primary,\n            'flip-animation-active': this.isFlipAnimationActive,\n          }}\n        >\n          <div class=\"flip-tile-header\">\n            <div class=\"header-slot-container text-l-title\">\n              <slot name=\"header\"></slot>\n            </div>\n            <ix-icon-button\n              icon=\"eye\"\n              variant=\"primary\"\n              ghost\n              onClick={() => this.toggleIndex()}\n            ></ix-icon-button>\n          </div>\n\n          <div\n            class=\"content-container\"\n            ref={(el) => (this.contentContainerElement = el)}\n          >\n            <slot></slot>\n          </div>\n          <div\n            class={{\n              footer: true,\n              'contrast-light': this.state === FlipTileState.Warning,\n              'contrast-dark':\n                this.state === FlipTileState.Info ||\n                this.state === FlipTileState.Alarm,\n            }}\n          >\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -9,6 +9,8 @@
 :host {
   display: block;
   position: relative;
+  height: 2rem;
+  width: 2rem;
   -webkit-margin-before: 0.3125rem;
           margin-block-start: 0.3125rem;
   -webkit-margin-end: 0.3125rem;
@@ -16,9 +18,6 @@
   -webkit-margin-start: auto;
           margin-inline-start: auto;
 }
-:host ix-icon-button::after {
-  display: none;
-}
 :host .hide {
   visibility: collapse;
 }

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

@@ -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,39 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 :host {
   display: flex;
   min-height: 2.25rem;
   height: 2.25rem;
+}
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
+: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 +82,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 +104,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"]}