@siemens/ix 1.6.2 → 2.0.0-beta.0

package/dist/components/ix-dropdown-button.js

@@ -1,16 +1,18 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$5 } from './button.js';
-import { d as defineCustomElement$4 } from './dropdown.js';
-import { d as defineCustomElement$3 } from './icon.js';
-import { d as defineCustomElement$2 } from './icon-button.js';
+import { d as defineCustomElement$6 } from './button.js';
+import { d as defineCustomElement$5 } from './dropdown.js';
+import { d as defineCustomElement$4 } from './icon.js';
+import { d as defineCustomElement$3 } from './icon-button.js';
+import { d as defineCustomElement$2 } from './spinner.js';
 
-const dropdownButtonCss = ".sc-ix-dropdown-button-h{display:inline-block;position:relative;height:2rem;width:auto}.disabled.sc-ix-dropdown-button-h{pointer-events:none}.sc-ix-dropdown-button-h .hide.sc-ix-dropdown-button{display:none}.sc-ix-dropdown-button-h .dropdown-button.sc-ix-dropdown-button{display:block;position:relative;width:100%;height:100%}.sc-ix-dropdown-button-h .dropdown-button.sc-ix-dropdown-button>ix-button.sc-ix-dropdown-button{width:100%;height:100%}.sc-ix-dropdown-button-h .dropdown-button.sc-ix-dropdown-button .button-label.sc-ix-dropdown-button{margin-right:auto}.sc-ix-dropdown-button-h .triangle.sc-ix-dropdown-button{position:absolute;-webkit-margin-start:1.5625rem;margin-inline-start:1.5625rem;-webkit-margin-before:-0.4375rem;margin-block-start:-0.4375rem;border-right:0 solid transparent;border-left:4px solid transparent;border-top:0 solid transparent;border-bottom:4px solid;color:var(--theme-btn-primary--color)}.sc-ix-dropdown-button-h .triangle.primary.ghost.sc-ix-dropdown-button{color:var(--theme-btn-invisible-primary--color)}.sc-ix-dropdown-button-h .triangle.primary.outline.sc-ix-dropdown-button{color:var(--theme-btn-outline-primary--color)}.sc-ix-dropdown-button-h .triangle.primary.ghost.disabled.sc-ix-dropdown-button{color:var(--theme-btn-invisible-primary--color--disabled)}.sc-ix-dropdown-button-h .triangle.primary.outline.disabled.sc-ix-dropdown-button{color:var(--theme-btn-outline-primary--color--disabled)}.sc-ix-dropdown-button-h .triangle.primary.disabled.sc-ix-dropdown-button{color:var(--theme-btn-primary--color--disabled)}.sc-ix-dropdown-button-h .triangle.secondary.ghost.sc-ix-dropdown-button{color:var(--theme-btn-invisible-secondary--color)}.sc-ix-dropdown-button-h .triangle.secondary.outline.sc-ix-dropdown-button{color:var(--theme-btn-outline-secondary--color)}.sc-ix-dropdown-button-h .triangle.secondary.ghost.disabled.sc-ix-dropdown-button{color:var(--theme-btn-invisible-secondary--color--disabled)}.sc-ix-dropdown-button-h .triangle.secondary.outline.disabled.sc-ix-dropdown-button{color:var(--theme-btn-outline-secondary--color--disabled)}.sc-ix-dropdown-button-h .triangle.secondary.disabled.sc-ix-dropdown-button{color:var(--theme-btn-secondary--color--disabled)}.sc-ix-dropdown-button-h .dropdown.sc-ix-dropdown-button{width:auto !important;inset:auto !important;transform:unset !important}";
+const dropdownButtonCss = ":host{display:inline-block;position:relative;height:2rem;width:auto}:host *,:host *::after,:host *::before{box-sizing:border-box}:host .hide{display:none}:host .dropdown-button{display:block;position:relative;width:100%;height:100%}:host .dropdown-button>ix-button{width:100%;height:100%}:host .dropdown-button .button-label{margin-right:auto}:host .triangle{position:absolute;-webkit-margin-start:1.5625rem;margin-inline-start:1.5625rem;-webkit-margin-before:-0.4375rem;margin-block-start:-0.4375rem;border-right:0 solid transparent;border-left:4px solid transparent;border-top:0 solid transparent;border-bottom:4px solid;color:var(--theme-btn-primary--color)}:host .triangle.primary.ghost{color:var(--theme-btn-invisible-primary--color)}:host .triangle.primary.outline{color:var(--theme-btn-outline-primary--color)}:host .triangle.primary.ghost.disabled{color:var(--theme-btn-invisible-primary--color--disabled)}:host .triangle.primary.outline.disabled{color:var(--theme-btn-outline-primary--color--disabled)}:host .triangle.primary.disabled{color:var(--theme-btn-primary--color--disabled)}:host .triangle.secondary.ghost{color:var(--theme-btn-invisible-secondary--color)}:host .triangle.secondary.outline{color:var(--theme-btn-outline-secondary--color)}:host .triangle.secondary.ghost.disabled{color:var(--theme-btn-invisible-secondary--color--disabled)}:host .triangle.secondary.outline.disabled{color:var(--theme-btn-outline-secondary--color--disabled)}:host .triangle.secondary.disabled{color:var(--theme-btn-secondary--color--disabled)}:host .dropdown{width:auto !important;inset:auto !important;transform:unset !important}:host(.disabled){pointer-events:none}";
 
 const DropdownButton = /*@__PURE__*/ proxyCustomElement(class DropdownButton extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    this.variant = 'Primary';
+    this.__attachShadow();
+    this.variant = 'primary';
     this.outline = false;
     this.ghost = false;
     this.active = false;
@@ -23,8 +25,8 @@ const DropdownButton = /*@__PURE__*/ proxyCustomElement(class DropdownButton ext
     return (h("div", { class: {
         triangle: true,
         hide: this.label !== '',
-        primary: this.variant === 'Primary',
-        secondary: this.variant === 'Secondary',
+        primary: this.variant === 'primary',
+        secondary: this.variant === 'secondary',
         ghost: this.ghost,
         outline: this.outline,
         disabled: this.disabled,
@@ -35,10 +37,11 @@ const DropdownButton = /*@__PURE__*/ proxyCustomElement(class DropdownButton ext
         disabled: this.disabled,
       } }, h("div", { class: "dropdown-button", ref: (ref) => {
         this.dropdownAnchor = ref;
-      } }, this.label ? (h("ix-button", { variant: this.variant, outline: this.outline, ghost: this.ghost, disabled: this.disabled }, h("ix-icon", { name: this.icon, size: "24", class: { hide: this.icon === '' || this.icon === undefined } }), h("div", { class: 'button-label' }, this.label), h("ix-icon", { name: "chevron-down-small", size: "24" }))) : (h("div", null, h("ix-icon-button", { icon: this.icon, variant: this.variant, outline: this.outline, ghost: this.ghost, disabled: this.disabled }), this.getTriangle()))), h("ix-dropdown", { class: "dropdown", trigger: this.dropdownAnchor, placement: "bottom", positioningStrategy: 'fixed', adjustDropdownWidthToReferenceWidth: true }, h("slot", null))));
+      } }, this.label ? (h("ix-button", { variant: this.variant, outline: this.outline, ghost: this.ghost, disabled: this.disabled }, h("ix-icon", { name: this.icon, size: "24", class: { hide: this.icon === '' || this.icon === undefined } }), h("div", { class: 'button-label' }, this.label), h("ix-icon", { name: "chevron-down-small", size: "24" }))) : (h("div", null, h("ix-icon-button", { icon: this.icon, variant: this.variant, outline: this.outline, ghost: this.ghost, disabled: this.disabled }), this.getTriangle()))), h("ix-dropdown", { class: "dropdown", trigger: this.dropdownAnchor, positioningStrategy: 'fixed' }, h("slot", null))));
   }
+  get hostElement() { return this; }
   static get style() { return dropdownButtonCss; }
-}, [6, "ix-dropdown-button", {
+}, [1, "ix-dropdown-button", {
     "variant": [1],
     "outline": [4],
     "ghost": [4],
@@ -52,7 +55,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["ix-dropdown-button", "ix-button", "ix-dropdown", "ix-icon", "ix-icon-button"];
+  const components = ["ix-dropdown-button", "ix-button", "ix-dropdown", "ix-icon", "ix-icon-button", "ix-spinner"];
   components.forEach(tagName => { switch (tagName) {
     case "ix-dropdown-button":
       if (!customElements.get(tagName)) {
@@ -61,20 +64,25 @@ function defineCustomElement$1() {
       break;
     case "ix-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$5();
+        defineCustomElement$6();
       }
       break;
     case "ix-dropdown":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$5();
       }
       break;
     case "ix-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$3();
+        defineCustomElement$4();
       }
       break;
     case "ix-icon-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ix-spinner":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }

package/dist/components/ix-dropdown-button.js.map

@@ -1 +1 @@
-{"file":"ix-dropdown-button.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,wyEAAwyE;;MCsBrzE,cAAc;;;;mBAIgB,SAAS;mBAKhC,KAAK;iBAKP,KAAK;kBAKJ,KAAK;oBAKH,KAAK;;;;;EAchB,WAAW;IACjB,QACE,WACE,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI;QACd,IAAI,EAAE,IAAI,CAAC,KAAK,KAAK,EAAE;QACvB,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;QACnC,SAAS,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;QACvC,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,GACI,EACP;GACH;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,IAED,WACE,KAAK,EAAC,iBAAiB,EACvB,GAAG,EAAE,CAAC,GAAG;QACP,IAAI,CAAC,cAAc,GAAG,GAAG,CAAC;OAC3B,IAEA,IAAI,CAAC,KAAK,IACT,iBACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAEvB,eACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,EAAE,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE,GACnD,EACX,WAAK,KAAK,EAAE,cAAc,IAAG,IAAI,CAAC,KAAK,CAAO,EAC9C,eAAS,IAAI,EAAC,oBAAoB,EAAC,IAAI,EAAC,IAAI,GAAW,CAC7C,KAEZ,eACE,sBACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACP,EACjB,IAAI,CAAC,WAAW,EAAE,CACf,CACP,CACG,EAEN,mBACE,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,SAAS,EAAC,QAAQ,EAClB,mBAAmB,EAAE,OAAO,EAC5B,mCAAmC,EAAE,IAAI,IAEzC,eAAa,CACD,CACT,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/dropdown-button/dropdown-button.scss?tag=ix-dropdown-button&encapsulation=scoped","./src/components/dropdown-button/dropdown-button.tsx"],"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@import 'common-variables';\n\n:host {\n  display: inline-block;\n  position: relative;\n  height: $x-large-space;\n  width: auto;\n\n  &.disabled {\n    pointer-events: none;\n  }\n\n  .hide {\n    display: none;\n  }\n\n  .dropdown-button {\n    display: block;\n    position: relative;\n    width: 100%;\n    height: 100%;\n  }\n\n  .dropdown-button > ix-button {\n    width: 100%;\n    height: 100%;\n  }\n\n  .dropdown-button .button-label {\n    margin-right: auto;\n  }\n\n  .triangle {\n    position: absolute;\n    margin-inline-start: 1.5625rem;\n    margin-block-start: -0.4375rem;\n    border-right: 0 solid transparent;\n    border-left: 4px solid transparent;\n    border-top: 0 solid transparent;\n    border-bottom: 4px solid;\n    color: var(--theme-btn-primary--color);\n  }\n\n  .triangle.primary {\n    &.ghost {\n      color: var(--theme-btn-invisible-primary--color);\n    }\n\n    &.outline {\n      color: var(--theme-btn-outline-primary--color);\n    }\n\n    &.ghost.disabled {\n      color: var(--theme-btn-invisible-primary--color--disabled);\n    }\n\n    &.outline.disabled {\n      color: var(--theme-btn-outline-primary--color--disabled);\n    }\n\n    &.disabled {\n      color: var(--theme-btn-primary--color--disabled);\n    }\n  }\n\n  .triangle.secondary {\n    &.ghost {\n      color: var(--theme-btn-invisible-secondary--color);\n    }\n\n    &.outline {\n      color: var(--theme-btn-outline-secondary--color);\n    }\n\n    &.ghost.disabled {\n      color: var(--theme-btn-invisible-secondary--color--disabled);\n    }\n\n    &.outline.disabled {\n      color: var(--theme-btn-outline-secondary--color--disabled);\n    }\n\n    &.disabled {\n      color: var(--theme-btn-secondary--color--disabled);\n    }\n  }\n\n  .dropdown {\n    width: auto !important;\n    inset: auto !important;\n    transform: unset !important;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop, State } from '@stencil/core';\nimport { ButtonVariant } from '../button/button';\n\nexport type DropdownButtonVariant = ButtonVariant;\n\n/**\n * @since 1.3.0\n */\n@Component({\n  tag: 'ix-dropdown-button',\n  styleUrl: 'dropdown-button.scss',\n  scoped: true,\n})\nexport class DropdownButton {\n  /**\n   * Button variant\n   */\n  @Prop() variant: DropdownButtonVariant = 'Primary';\n\n  /**\n   * Outline button\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button with no background or outline\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Active button\n   */\n  @Prop() active = false;\n\n  /**\n   * Disable button\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Set label\n   */\n  @Prop() label: string;\n\n  /**\n   * Button icon\n   */\n  @Prop() icon: string;\n\n  @State() dropdownAnchor!: HTMLElement;\n\n  private getTriangle() {\n    return (\n      <div\n        class={{\n          triangle: true,\n          hide: this.label !== '',\n          primary: this.variant === 'Primary',\n          secondary: this.variant === 'Secondary',\n          ghost: this.ghost,\n          outline: this.outline,\n          disabled: this.disabled,\n        }}\n      ></div>\n    );\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n        }}\n      >\n        <div\n          class=\"dropdown-button\"\n          ref={(ref) => {\n            this.dropdownAnchor = ref;\n          }}\n        >\n          {this.label ? (\n            <ix-button\n              variant={this.variant}\n              outline={this.outline}\n              ghost={this.ghost}\n              disabled={this.disabled}\n            >\n              <ix-icon\n                name={this.icon}\n                size=\"24\"\n                class={{ hide: this.icon === '' || this.icon === undefined }}\n              ></ix-icon>\n              <div class={'button-label'}>{this.label}</div>\n              <ix-icon name=\"chevron-down-small\" size=\"24\"></ix-icon>\n            </ix-button>\n          ) : (\n            <div>\n              <ix-icon-button\n                icon={this.icon}\n                variant={this.variant}\n                outline={this.outline}\n                ghost={this.ghost}\n                disabled={this.disabled}\n              ></ix-icon-button>\n              {this.getTriangle()}\n            </div>\n          )}\n        </div>\n\n        <ix-dropdown\n          class=\"dropdown\"\n          trigger={this.dropdownAnchor}\n          placement=\"bottom\"\n          positioningStrategy={'fixed'}\n          adjustDropdownWidthToReferenceWidth={true}\n        >\n          <slot></slot>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-dropdown-button.js","mappings":";;;;;;;AAAA,MAAM,iBAAiB,GAAG,qoDAAqoD;;MCsBlpD,cAAc;;;;;mBAMgB,SAAS;mBAKhC,KAAK;iBAKP,KAAK;kBAMJ,KAAK;oBAKH,KAAK;;;;;EAchB,WAAW;IACjB,QACE,WACE,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI;QACd,IAAI,EAAE,IAAI,CAAC,KAAK,KAAK,EAAE;QACvB,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;QACnC,SAAS,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;QACvC,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,GACI,EACP;GACH;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,IAED,WACE,KAAK,EAAC,iBAAiB,EACvB,GAAG,EAAE,CAAC,GAAG;QACP,IAAI,CAAC,cAAc,GAAG,GAAG,CAAC;OAC3B,IAEA,IAAI,CAAC,KAAK,IACT,iBACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAEvB,eACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,EAAE,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE,GACnD,EACX,WAAK,KAAK,EAAE,cAAc,IAAG,IAAI,CAAC,KAAK,CAAO,EAC9C,eAAS,IAAI,EAAC,oBAAoB,EAAC,IAAI,EAAC,IAAI,GAAW,CAC7C,KAEZ,eACE,sBACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACP,EACjB,IAAI,CAAC,WAAW,EAAE,CACf,CACP,CACG,EAEN,mBACE,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,mBAAmB,EAAE,OAAO,IAE5B,eAAa,CACD,CACT,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/dropdown-button/dropdown-button.scss?tag=ix-dropdown-button&encapsulation=shadow","./src/components/dropdown-button/dropdown-button.tsx"],"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@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: inline-block;\n  position: relative;\n  height: $x-large-space;\n  width: auto;\n\n  .hide {\n    display: none;\n  }\n\n  .dropdown-button {\n    display: block;\n    position: relative;\n    width: 100%;\n    height: 100%;\n  }\n\n  .dropdown-button > ix-button {\n    width: 100%;\n    height: 100%;\n  }\n\n  .dropdown-button .button-label {\n    margin-right: auto;\n  }\n\n  .triangle {\n    position: absolute;\n    margin-inline-start: 1.5625rem;\n    margin-block-start: -0.4375rem;\n    border-right: 0 solid transparent;\n    border-left: 4px solid transparent;\n    border-top: 0 solid transparent;\n    border-bottom: 4px solid;\n    color: var(--theme-btn-primary--color);\n  }\n\n  .triangle.primary {\n    &.ghost {\n      color: var(--theme-btn-invisible-primary--color);\n    }\n\n    &.outline {\n      color: var(--theme-btn-outline-primary--color);\n    }\n\n    &.ghost.disabled {\n      color: var(--theme-btn-invisible-primary--color--disabled);\n    }\n\n    &.outline.disabled {\n      color: var(--theme-btn-outline-primary--color--disabled);\n    }\n\n    &.disabled {\n      color: var(--theme-btn-primary--color--disabled);\n    }\n  }\n\n  .triangle.secondary {\n    &.ghost {\n      color: var(--theme-btn-invisible-secondary--color);\n    }\n\n    &.outline {\n      color: var(--theme-btn-outline-secondary--color);\n    }\n\n    &.ghost.disabled {\n      color: var(--theme-btn-invisible-secondary--color--disabled);\n    }\n\n    &.outline.disabled {\n      color: var(--theme-btn-outline-secondary--color--disabled);\n    }\n\n    &.disabled {\n      color: var(--theme-btn-secondary--color--disabled);\n    }\n  }\n\n  .dropdown {\n    width: auto !important;\n    inset: auto !important;\n    transform: unset !important;\n  }\n}\n\n:host(.disabled) {\n  pointer-events: none;\n}\n","/*\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 { ButtonVariant } from '../button/button';\n\nexport type DropdownButtonVariant = ButtonVariant;\n\n/**\n * @since 1.3.0\n */\n@Component({\n  tag: 'ix-dropdown-button',\n  styleUrl: 'dropdown-button.scss',\n  shadow: true,\n})\nexport class DropdownButton {\n  @Element() hostElement!: HTMLIxDropdownButtonElement;\n\n  /**\n   * Button variant\n   */\n  @Prop() variant: DropdownButtonVariant = 'primary';\n\n  /**\n   * Outline button\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button with no background or outline\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Active button (has no effect)\n   * @deprecated Will be removed in 3.0.0\n   */\n  @Prop() active = false;\n\n  /**\n   * Disable button\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Set label\n   */\n  @Prop() label: string;\n\n  /**\n   * Button icon\n   */\n  @Prop() icon: string;\n\n  @State() dropdownAnchor!: HTMLElement;\n\n  private getTriangle() {\n    return (\n      <div\n        class={{\n          triangle: true,\n          hide: this.label !== '',\n          primary: this.variant === 'primary',\n          secondary: this.variant === 'secondary',\n          ghost: this.ghost,\n          outline: this.outline,\n          disabled: this.disabled,\n        }}\n      ></div>\n    );\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n        }}\n      >\n        <div\n          class=\"dropdown-button\"\n          ref={(ref) => {\n            this.dropdownAnchor = ref;\n          }}\n        >\n          {this.label ? (\n            <ix-button\n              variant={this.variant}\n              outline={this.outline}\n              ghost={this.ghost}\n              disabled={this.disabled}\n            >\n              <ix-icon\n                name={this.icon}\n                size=\"24\"\n                class={{ hide: this.icon === '' || this.icon === undefined }}\n              ></ix-icon>\n              <div class={'button-label'}>{this.label}</div>\n              <ix-icon name=\"chevron-down-small\" size=\"24\"></ix-icon>\n            </ix-button>\n          ) : (\n            <div>\n              <ix-icon-button\n                icon={this.icon}\n                variant={this.variant}\n                outline={this.outline}\n                ghost={this.ghost}\n                disabled={this.disabled}\n              ></ix-icon-button>\n              {this.getTriangle()}\n            </div>\n          )}\n        </div>\n\n        <ix-dropdown\n          class=\"dropdown\"\n          trigger={this.dropdownAnchor}\n          positioningStrategy={'fixed'}\n        >\n          <slot></slot>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{ix-modal-container.d.ts → ix-dropdown-header.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface IxModalContainer extends Components.IxModalContainer, HTMLElement {}
-export const IxModalContainer: {
-  prototype: IxModalContainer;
-  new (): IxModalContainer;
+interface IxDropdownHeader extends Components.IxDropdownHeader, HTMLElement {}
+export const IxDropdownHeader: {
+  prototype: IxDropdownHeader;
+  new (): IxDropdownHeader;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/ix-dropdown-header.js

@@ -0,0 +1,44 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './typography.js';
+
+const dropdownHeaderCss = ":host{display:flex;align-items:center;position:relative;height:2.5rem;width:auto;padding:0.25rem 1rem;overflow:hidden;cursor:default;color:var(--theme-color-soft-text)}:host *,:host *::after,:host *::before{box-sizing:border-box}";
+
+const DropdownHeader = /*@__PURE__*/ proxyCustomElement(class DropdownHeader extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.label = undefined;
+  }
+  render() {
+    return (h(Host, null, h("ix-typography", { class: 'category-text', variant: 'default-title' }, this.label)));
+  }
+  static get style() { return dropdownHeaderCss; }
+}, [1, "ix-dropdown-header", {
+    "label": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-dropdown-header", "ix-typography"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-dropdown-header":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DropdownHeader);
+      }
+      break;
+    case "ix-typography":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IxDropdownHeader = DropdownHeader;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxDropdownHeader, defineCustomElement };
+
+//# sourceMappingURL=ix-dropdown-header.js.map

package/dist/components/ix-dropdown-header.js.map

@@ -0,0 +1 @@
+{"file":"ix-dropdown-header.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,uOAAuO;;MCmBpP,cAAc;;;;;;;EAMzB,MAAM;IACJ,QACE,EAAC,IAAI,QACH,qBAAe,KAAK,EAAE,eAAe,EAAE,OAAO,EAAE,eAAe,IAC5D,IAAI,CAAC,KAAK,CACG,CACX,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/dropdown-header/dropdown-header.scss?tag=ix-dropdown-header&encapsulation=shadow","./src/components/dropdown-header/dropdown-header.tsx"],"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@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  align-items: center;\n  position: relative;\n  height: 2.5rem;\n  width: auto;\n\n  padding: 0.25rem 1rem;\n\n  overflow: hidden;\n  cursor: default;\n\n  color: var(--theme-color-soft-text);\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-dropdown-header',\n  styleUrl: 'dropdown-header.scss',\n  shadow: true,\n})\nexport class DropdownHeader {\n  /**\n   * Display name of the header\n   */\n  @Prop() label: string;\n\n  render() {\n    return (\n      <Host>\n        <ix-typography class={'category-text'} variant={'default-title'}>\n          {this.label}\n        </ix-typography>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ix-empty-state.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$4 } from './button.js';
-import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$5 } from './button.js';
+import { d as defineCustomElement$4 } from './icon.js';
+import { d as defineCustomElement$3 } from './spinner.js';
 import { d as defineCustomElement$2 } from './typography.js';
 
 const emptyStateCss = ":host *,:host *::after,:host *::before{box-sizing:border-box}:host .label__subHeader{color:var(--theme-color-soft-text)}:host(.emptyState.emptyState--large){display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem}:host(.emptyState.emptyState--large) .emptyState__icon{width:3.5rem;height:3.5rem;display:flex;justify-content:center;align-items:center}:host(.emptyState.emptyState--large) .emptyState__icon ix-icon{transform:scale(1.75)}:host(.emptyState.emptyState--large) .emptyState__content{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.5rem}:host(.emptyState.emptyState--large) .emptyState__content .content__label{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0.5rem}:host(.emptyState.emptyState--compact){display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1rem}:host(.emptyState.emptyState--compact) .emptyState__icon{display:flex;flex-direction:row;align-items:center;height:2.5rem}:host(.emptyState.emptyState--compact) .emptyState__content{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1rem}:host(.emptyState.emptyState--compactBreak){display:flex;flex-direction:row;align-items:flex-start;gap:1rem}:host(.emptyState.emptyState--compactBreak) .emptyState__icon{display:flex;flex-direction:row;align-items:center;height:2.5rem}:host(.emptyState.emptyState--compactBreak) .emptyState__content{display:flex;flex-direction:column;align-items:flex-start;gap:0.5rem}";
@@ -32,7 +33,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["ix-empty-state", "ix-button", "ix-icon", "ix-typography"];
+  const components = ["ix-empty-state", "ix-button", "ix-icon", "ix-spinner", "ix-typography"];
   components.forEach(tagName => { switch (tagName) {
     case "ix-empty-state":
       if (!customElements.get(tagName)) {
@@ -41,10 +42,15 @@ function defineCustomElement$1() {
       break;
     case "ix-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$5();
       }
       break;
     case "ix-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "ix-spinner":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }

package/dist/components/ix-empty-state.js.map

@@ -1 +1 @@
-{"file":"ix-empty-state.js","mappings":";;;;;AAAA,MAAM,aAAa,GAAG,2/CAA2/C;;MCqBpgD,UAAU;;;;;;kBAIc,OAAO;;;;;;EA2B1C,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,0BAA0B,IAAI,CAAC,MAAM,EAAE,IACjD,IAAI,CAAC,IAAI,KACR,WAAK,KAAK,EAAC,kBAAkB,IAE3B,eACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO,GAAG,IAAI,GAAG,IAAI,EAC3C,KAAK,EAAC,iBAAiB,GACvB,CACE,CACP,EAED,WAAK,KAAK,EAAC,qBAAqB,IAC9B,WAAK,KAAK,EAAC,gBAAgB,IACzB,qBACE,OAAO,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO,GAAG,eAAe,GAAG,SAAS,IAE7D,IAAI,CAAC,MAAM,CACE,EAEf,IAAI,CAAC,SAAS,KACb,WAAK,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,SAAS,CAAO,CACrD,CACG,EAEL,IAAI,CAAC,MAAM,KACV,WAAK,KAAK,EAAC,iBAAiB,IAC1B,iBAAW,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,IAC9C,IAAI,CAAC,MAAM,CACF,CACR,CACP,CACG,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/empty-state/empty-state.scss?tag=ix-empty-state&encapsulation=shadow","./src/components/empty-state/empty-state.tsx"],"sourcesContent":["@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  .label__subHeader {\n    color: var(--theme-color-soft-text);\n  }\n}\n\n:host(.emptyState.emptyState--large) {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: $default-space;\n\n  .emptyState__icon {\n    width: 3.5rem;\n    height: 3.5rem;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    ix-icon {\n      transform: scale(1.75);\n    }\n  }\n\n  .emptyState__content {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap: $large-space;\n\n    .content__label {\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n      gap: $small-space;\n    }\n  }\n}\n\n:host(.emptyState.emptyState--compact) {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  gap: $default-space;\n\n  .emptyState__icon {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    height: $large-control-height;\n  }\n\n  .emptyState__content {\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    gap: $default-space;\n  }\n}\n\n:host(.emptyState.emptyState--compactBreak) {\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  gap: $default-space;\n\n  .emptyState__icon {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    height: $large-control-height;\n  }\n\n  .emptyState__content {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: $small-space;\n  }\n}\n","/*\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, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nexport type EmptyStateLayout = 'large' | 'compact' | 'compactBreak';\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-empty-state',\n  styleUrl: 'empty-state.scss',\n  shadow: true,\n})\nexport class EmptyState {\n  /**\n   * Optional empty state layout - one of 'large', 'compact' or 'compactBreak'\n   */\n  @Prop() layout: EmptyStateLayout = 'large';\n\n  /**\n   * Optional empty state icon\n   */\n  @Prop() icon: string;\n\n  /**\n   * Empty state header\n   */\n  @Prop() header!: string;\n\n  /**\n   * Optional empty state sub header\n   */\n  @Prop() subHeader: string;\n\n  /**\n   * Optional empty state action\n   */\n  @Prop() action: string;\n\n  /**\n   * Empty state action click event\n   */\n  @Event() actionClick: EventEmitter<void>;\n\n  render() {\n    return (\n      <Host class={`emptyState emptyState--${this.layout}`}>\n        {this.icon && (\n          <div class=\"emptyState__icon\">\n            {/* TODO: replace size for large layout with '56' if available */}\n            <ix-icon\n              name={this.icon}\n              size={this.layout === 'large' ? '32' : '32'}\n              color=\"color-soft-text\"\n            />\n          </div>\n        )}\n\n        <div class=\"emptyState__content\">\n          <div class=\"content__label\">\n            <ix-typography\n              variant={this.layout === 'large' ? 'display-large' : 'default'}\n            >\n              {this.header}\n            </ix-typography>\n\n            {this.subHeader && (\n              <div class=\"label__subHeader\">{this.subHeader}</div>\n            )}\n          </div>\n\n          {this.action && (\n            <div class=\"content__action\">\n              <ix-button onClick={() => this.actionClick.emit()}>\n                {this.action}\n              </ix-button>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-empty-state.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,2/CAA2/C;;MCqBpgD,UAAU;;;;;;kBAIc,OAAO;;;;;;EA2B1C,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,0BAA0B,IAAI,CAAC,MAAM,EAAE,IACjD,IAAI,CAAC,IAAI,KACR,WAAK,KAAK,EAAC,kBAAkB,IAE3B,eACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO,GAAG,IAAI,GAAG,IAAI,EAC3C,KAAK,EAAC,iBAAiB,GACvB,CACE,CACP,EAED,WAAK,KAAK,EAAC,qBAAqB,IAC9B,WAAK,KAAK,EAAC,gBAAgB,IACzB,qBACE,OAAO,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO,GAAG,eAAe,GAAG,SAAS,IAE7D,IAAI,CAAC,MAAM,CACE,EAEf,IAAI,CAAC,SAAS,KACb,WAAK,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,SAAS,CAAO,CACrD,CACG,EAEL,IAAI,CAAC,MAAM,KACV,WAAK,KAAK,EAAC,iBAAiB,IAC1B,iBAAW,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,IAC9C,IAAI,CAAC,MAAM,CACF,CACR,CACP,CACG,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/empty-state/empty-state.scss?tag=ix-empty-state&encapsulation=shadow","./src/components/empty-state/empty-state.tsx"],"sourcesContent":["@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  .label__subHeader {\n    color: var(--theme-color-soft-text);\n  }\n}\n\n:host(.emptyState.emptyState--large) {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: $default-space;\n\n  .emptyState__icon {\n    width: 3.5rem;\n    height: 3.5rem;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    ix-icon {\n      transform: scale(1.75);\n    }\n  }\n\n  .emptyState__content {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap: $large-space;\n\n    .content__label {\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n      gap: $small-space;\n    }\n  }\n}\n\n:host(.emptyState.emptyState--compact) {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  gap: $default-space;\n\n  .emptyState__icon {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    height: $large-control-height;\n  }\n\n  .emptyState__content {\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    gap: $default-space;\n  }\n}\n\n:host(.emptyState.emptyState--compactBreak) {\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  gap: $default-space;\n\n  .emptyState__icon {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    height: $large-control-height;\n  }\n\n  .emptyState__content {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: $small-space;\n  }\n}\n","/*\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, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nexport type EmptyStateLayout = 'large' | 'compact' | 'compactBreak';\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-empty-state',\n  styleUrl: 'empty-state.scss',\n  shadow: true,\n})\nexport class EmptyState {\n  /**\n   * Optional empty state layout - one of 'large', 'compact' or 'compactBreak'\n   */\n  @Prop() layout: EmptyStateLayout = 'large';\n\n  /**\n   * Optional empty state icon\n   */\n  @Prop() icon: string;\n\n  /**\n   * Empty state header\n   */\n  @Prop() header!: string;\n\n  /**\n   * Optional empty state sub header\n   */\n  @Prop() subHeader: string;\n\n  /**\n   * Optional empty state action\n   */\n  @Prop() action: string;\n\n  /**\n   * Empty state action click event\n   */\n  @Event() actionClick: EventEmitter<void>;\n\n  render() {\n    return (\n      <Host class={`emptyState emptyState--${this.layout}`}>\n        {this.icon && (\n          <div class=\"emptyState__icon\">\n            {/* TODO: replace size for large layout with '56' if available */}\n            <ix-icon\n              name={this.icon}\n              size={this.layout === 'large' ? '32' : '32'}\n              color=\"color-soft-text\"\n            />\n          </div>\n        )}\n\n        <div class=\"emptyState__content\">\n          <div class=\"content__label\">\n            <ix-typography\n              variant={this.layout === 'large' ? 'display-large' : 'default'}\n            >\n              {this.header}\n            </ix-typography>\n\n            {this.subHeader && (\n              <div class=\"label__subHeader\">{this.subHeader}</div>\n            )}\n          </div>\n\n          {this.action && (\n            <div class=\"content__action\">\n              <ix-button onClick={() => this.actionClick.emit()}>\n                {this.action}\n              </ix-button>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,11 +1,13 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './icon.js';
 
-const eventListItemCss = ".ix-event-list-item{display:flex;align-items:center;position:relative;height:2.5rem;max-height:2.5rem;border-radius:0.25rem;background-color:var(--theme-event-item--background);overflow:hidden;transition:150ms;cursor:pointer;margin-bottom:0.5rem}.ix-event-list-item .indicator{height:100%;width:0.5rem;max-width:0.5rem;min-width:0.5rem;border-top-left-radius:0.25rem;border-bottom-left-radius:0.25rem}.ix-event-list-item .indicator-empty{border:var(--theme-weak-bdr-1);border-right:none}.ix-event-list-item .event-list-item-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-grow:1;width:calc(100% - (1rem + 0.5rem));height:100%;border:0.062rem solid;border-color:var(--theme-event-item--border);border-top-left-radius:0;border-top-right-radius:0.25rem;border-bottom-left-radius:0;border-bottom-right-radius:0.25rem;border-left:none;padding-left:1rem}.ix-event-list-item:not(.selected):not(.disabled):not(:disabled){cursor:pointer}.ix-event-list-item:not(.selected):not(.disabled):not(:disabled):hover{background-color:var(--theme-event-item--background--hover)}.ix-event-list-item:not(.selected):not(.disabled):not(:disabled){cursor:pointer}.ix-event-list-item:not(.selected):not(.disabled):not(:disabled):active{background-color:var(--theme-event-item--background--active)}.ix-event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled){cursor:pointer}.ix-event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled):hover{border-color:var(--theme-event-item--border--hover)}.ix-event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled){cursor:pointer}.ix-event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled):active{border-color:var(--theme-event-item--border--active)}.ix-event-list-item.selected .event-list-item-container{background-color:var(--theme-event-item--background--selected);border-color:var(--theme-event-item--border--selected)}.ix-event-list-item[disabled],.ix-event-list-item.disabled{pointer-events:none}.ix-event-list-item[disabled] .event-list-item-container,.ix-event-list-item.disabled .event-list-item-container{background-color:var(--theme-event-item--background--disabled);border-color:var(--theme-event-item--border--disabled)}.ix-event-list-item .chevron-icon{margin-left:auto;margin-right:0.5rem;opacity:0.6;align-self:center}.ix-event-list-item .event-content{display:flex;align-items:center;width:100%;height:100%;overflow:hidden}";
+const eventListItemCss = ":host *,:host *::after,:host *::before{box-sizing:border-box}:host .event-list-item{display:flex;align-items:center;position:relative;height:var(--event-list-item-height, 2.5rem);max-height:var(--event-list-item-height, 2.5rem);border-radius:var(--event-list-item-border-radius, 0.25rem);background-color:var(--theme-event-item--background);overflow:hidden;transition:150ms;cursor:pointer;margin-bottom:var(--event-list-item-margin-bottom, 0.5rem)}:host .event-list-item .indicator{height:100%;width:0.5rem;max-width:0.5rem;min-width:0.5rem;border-top-left-radius:var(--event-list-item-border-radius, 0.25rem);border-bottom-left-radius:var(--event-list-item-border-radius, 0.25rem)}:host .event-list-item .indicator-empty{border:var(--theme-weak-bdr-1);border-right:none}:host .event-list-item .event-list-item-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-grow:1;width:calc(100% - (1rem + 0.5rem));height:100%;border:0.062rem solid;border-color:var(--theme-event-item--border);border-top-left-radius:0;border-top-right-radius:var(--event-list-item-border-radius, 0.25rem);border-bottom-left-radius:0;border-bottom-right-radius:var(--event-list-item-border-radius, 0.25rem);border-left:none;padding-left:1rem}:host .event-list-item .event-content{display:flex;align-items:center;width:100%;height:var(--event-list-item-height, 100%);max-height:var(--event-list-item-height, 100%);white-space:var(--event-list-item-content-white-space, inherit);overflow:hidden}:host .event-list-item .chevron-icon{margin-left:auto;margin-right:0.5rem;opacity:0.6;align-self:center}:host .event-list-item:not(.selected):not(.disabled):not(:disabled){cursor:pointer}:host .event-list-item:not(.selected):not(.disabled):not(:disabled):hover{background-color:var(--theme-event-item--background--hover)}:host .event-list-item:not(.selected):not(.disabled):not(:disabled){cursor:pointer}:host .event-list-item:not(.selected):not(.disabled):not(:disabled):active{background-color:var(--theme-event-item--background--active)}:host .event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled){cursor:pointer}:host .event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled):hover{border-color:var(--theme-event-item--border--hover)}:host .event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled){cursor:pointer}:host .event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled):active{border-color:var(--theme-event-item--border--active)}:host .event-list-item.selected .event-list-item-container{background-color:var(--theme-event-item--background--selected);border-color:var(--theme-event-item--border--selected)}:host .event-list-item[disabled],:host .event-list-item.disabled{pointer-events:none}:host .event-list-item[disabled] .event-list-item-container,:host .event-list-item.disabled .event-list-item-container{background-color:var(--theme-event-item--background--disabled);border-color:var(--theme-event-item--border--disabled)}:host(.disabled){pointer-events:none}";
 
 const EventListItem = /*@__PURE__*/ proxyCustomElement(class EventListItem extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.__attachShadow();
     this.itemClick = createEvent(this, "itemClick", 7);
     this.color = undefined;
     this.selected = undefined;
@@ -17,20 +19,23 @@ const EventListItem = /*@__PURE__*/ proxyCustomElement(class EventListItem exten
     this.itemClick.emit();
   }
   render() {
-    return (h("div", { class: {
-        'ix-event-list-item': true,
+    var _a;
+    const color = ((_a = this.color) === null || _a === void 0 ? void 0 : _a.startsWith('--theme'))
+      ? `var(${this.color})`
+      : `var(--theme-${this.color})`;
+    return (h(Host, { class: {
+        disabled: this.disabled,
+      } }, h("div", { class: {
+        'event-list-item': true,
         selected: this.selected,
         disabled: this.disabled,
       } }, h("div", { class: `indicator ${!this.color ? 'indicator-empty' : ''}`, style: {
-        'background-color': this.color
-          ? `var(--theme-${this.color})`
-          : 'inherit',
+        'background-color': this.color ? color : 'inherit',
         opacity: `${this.disabled ? 0.4 : this.opacity}`,
-      } }), h("div", { class: "event-list-item-container" }, h("div", { class: "event-content" }, h("slot", null)), this.chevron ? (h("i", { class: "glyph glyph-16 glyph-chevron-right chevron-icon" })) : (''))));
+      } }), h("div", { class: "event-list-item-container" }, h("div", { class: "event-content" }, h("slot", null)), this.chevron && (h("ix-icon", { name: "chevron-right", size: "16", class: "chevron-icon" }))))));
   }
-  get el() { return this; }
   static get style() { return eventListItemCss; }
-}, [4, "ix-event-list-item", {
+}, [1, "ix-event-list-item", {
     "color": [1],
     "selected": [4],
     "disabled": [4],
@@ -41,13 +46,18 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["ix-event-list-item"];
+  const components = ["ix-event-list-item", "ix-icon"];
   components.forEach(tagName => { switch (tagName) {
     case "ix-event-list-item":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, EventListItem);
       }
       break;
+    case "ix-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
   } });
 }
 

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

@@ -1 +1 @@
-{"file":"ix-event-list-item.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,u9EAAu9E;;MCwBn+E,aAAa;;;;;;;;;mBA8BN,CAAC;;EAQnB,eAAe;IACb,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;GACvB;EAED,MAAM;IACJ,QACE,WACE,KAAK,EAAE;QACL,oBAAoB,EAAE,IAAI;QAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,IAED,WACE,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,GAAG,iBAAiB,GAAG,EAAE,EAAE,EAC1D,KAAK,EAAE;QACL,kBAAkB,EAAE,IAAI,CAAC,KAAK;YAC1B,eAAe,IAAI,CAAC,KAAK,GAAG;YAC5B,SAAS;QACb,OAAO,EAAE,GAAG,IAAI,CAAC,QAAQ,GAAG,GAAG,GAAG,IAAI,CAAC,OAAO,EAAE;OACjD,GACI,EAEP,WAAK,KAAK,EAAC,2BAA2B,IACpC,WAAK,KAAK,EAAC,eAAe,IACxB,eAAa,CACT,EACL,IAAI,CAAC,OAAO,IACX,SAAG,KAAK,EAAC,iDAAiD,GAAK,KAE/D,EAAE,CACH,CACG,CACF,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/event-list-item/event-list-item.scss?tag=ix-event-list-item","./src/components/event-list-item/event-list-item.tsx"],"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\n@import 'mixins/text-truncation';\n@import 'mixins/hover';\n@import 'common-variables';\n\n$height-single-line: 2.5rem;\n\n.ix-event-list-item {\n  display: flex;\n  align-items: center;\n  position: relative;\n  height: $height-single-line;\n  max-height: $height-single-line;\n  border-radius: $default-border-radius;\n  background-color: var(--theme-event-item--background);\n  overflow: hidden;\n  transition: $default-time;\n  cursor: pointer;\n\n  .indicator {\n    height: 100%;\n    width: $small-space;\n    max-width: $small-space;\n    min-width: $small-space;\n    border-top-left-radius: $default-border-radius;\n    border-bottom-left-radius: $default-border-radius;\n  }\n\n  .indicator-empty {\n    border: var(--theme-weak-bdr-1);\n    border-right: none;\n  }\n\n  .event-list-item-container {\n    @include ellipsis;\n\n    display: flex;\n    flex-grow: 1;\n    width: calc(100% - (#{$default-space} + #{$small-space}));\n    height: 100%;\n    border: 0.062rem solid;\n    border-color: var(--theme-event-item--border);\n    border-top-left-radius: 0;\n    border-top-right-radius: $default-border-radius;\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: $default-border-radius;\n    border-left: none;\n    padding-left: $default-space;\n  }\n\n  &:not(.selected) {\n    @include hover {\n      background-color: var(--theme-event-item--background--hover);\n    }\n\n    @include active {\n      background-color: var(--theme-event-item--background--active);\n    }\n\n    .event-list-item-container {\n      @include hover {\n        border-color: var(--theme-event-item--border--hover);\n      }\n\n      @include active {\n        border-color: var(--theme-event-item--border--active);\n      }\n    }\n  }\n\n  &.selected {\n    .event-list-item-container {\n      background-color: var(--theme-event-item--background--selected);\n      border-color: var(--theme-event-item--border--selected);\n    }\n  }\n\n  &[disabled],\n  &.disabled {\n    pointer-events: none;\n\n    .event-list-item-container {\n      background-color: var(--theme-event-item--background--disabled);\n      border-color: var(--theme-event-item--border--disabled);\n    }\n  }\n\n  .chevron-icon {\n    margin-left: auto;\n    margin-right: $small-space;\n    opacity: 0.6;\n    align-self: center;\n  }\n\n  .event-content {\n    display: flex;\n    align-items: center;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n  }\n\n  margin-bottom: $small-space;\n}\n","/*\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  Listen,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-event-list-item',\n  styleUrl: 'event-list-item.scss',\n  scoped: false,\n})\nexport class EventListItem {\n  @Element() el!: HTMLIxEventListItemElement;\n\n  /**\n   * Color of the status indicator.\n   * Allowed values are all Core UI color names.\n   */\n  @Prop() color: string;\n\n  /**\n   * Show event list item as selected\n   */\n  @Prop() selected: boolean;\n\n  /**\n   * Disable event list item\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * Show chevron on right side of the event list item\n   */\n  @Prop() chevron: boolean;\n\n  /**\n   * Opacity of the status indicator.\n   * Defaults to 1.0\n   *\n   * @deprecated Will be removed in 2.0.0\n   */\n  @Prop() opacity = 1;\n\n  /**\n   * Event list item click\n   */\n  @Event() itemClick: EventEmitter;\n\n  @Listen('click', { passive: true })\n  handleItemClick() {\n    this.itemClick.emit();\n  }\n\n  render() {\n    return (\n      <div\n        class={{\n          'ix-event-list-item': true,\n          selected: this.selected,\n          disabled: this.disabled,\n        }}\n      >\n        <div\n          class={`indicator ${!this.color ? 'indicator-empty' : ''}`}\n          style={{\n            'background-color': this.color\n              ? `var(--theme-${this.color})`\n              : 'inherit',\n            opacity: `${this.disabled ? 0.4 : this.opacity}`,\n          }}\n        ></div>\n\n        <div class=\"event-list-item-container\">\n          <div class=\"event-content\">\n            <slot></slot>\n          </div>\n          {this.chevron ? (\n            <i class=\"glyph glyph-16 glyph-chevron-right chevron-icon\"></i>\n          ) : (\n            ''\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-event-list-item.js","mappings":";;;AAAA,MAAM,gBAAgB,GAAG,kiGAAkiG;;MCwB9iG,aAAa;;;;;;;;;;mBA+BN,CAAC;;EAQnB,eAAe;IACb,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;GACvB;EAED,MAAM;;IACJ,MAAM,KAAK,GAAG,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU,CAAC,SAAS,CAAC;QAC3C,OAAO,IAAI,CAAC,KAAK,GAAG;QACpB,eAAe,IAAI,CAAC,KAAK,GAAG,CAAC;IAEjC,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,IAED,WACE,KAAK,EAAE;QACL,iBAAiB,EAAE,IAAI;QACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,IAED,WACE,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,GAAG,iBAAiB,GAAG,EAAE,EAAE,EAC1D,KAAK,EAAE;QACL,kBAAkB,EAAE,IAAI,CAAC,KAAK,GAAG,KAAK,GAAG,SAAS;QAClD,OAAO,EAAE,GAAG,IAAI,CAAC,QAAQ,GAAG,GAAG,GAAG,IAAI,CAAC,OAAO,EAAE;OACjD,GACI,EAEP,WAAK,KAAK,EAAC,2BAA2B,IACpC,WAAK,KAAK,EAAC,eAAe,IACxB,eAAa,CACT,EACL,IAAI,CAAC,OAAO,KACX,eACE,IAAI,EAAC,eAAe,EACpB,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,cAAc,GACX,CACZ,CACG,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/event-list-item/event-list-item.scss?tag=ix-event-list-item&encapsulation=shadow","./src/components/event-list-item/event-list-item.tsx"],"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\n@import 'mixins/text-truncation';\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n@import 'mixins/shadow-dom/host-disabled';\n@import 'common-variables';\n\n$default-event-list-item-height: 2.5rem;\n\n:host {\n  @include ix-component;\n\n  .event-list-item {\n    display: flex;\n    align-items: center;\n    position: relative;\n    height: var(--event-list-item-height, $default-event-list-item-height);\n    max-height: var(--event-list-item-height, $default-event-list-item-height);\n    border-radius: var(--event-list-item-border-radius, $default-border-radius);\n    background-color: var(--theme-event-item--background);\n    overflow: hidden;\n    transition: $default-time;\n    cursor: pointer;\n    margin-bottom: var(--event-list-item-margin-bottom, $small-space);\n\n    .indicator {\n      height: 100%;\n      width: $small-space;\n      max-width: $small-space;\n      min-width: $small-space;\n      border-top-left-radius: var(\n        --event-list-item-border-radius,\n        $default-border-radius\n      );\n      border-bottom-left-radius: var(\n        --event-list-item-border-radius,\n        $default-border-radius\n      );\n    }\n\n    .indicator-empty {\n      border: var(--theme-weak-bdr-1);\n      border-right: none;\n    }\n\n    .event-list-item-container {\n      @include ellipsis;\n\n      display: flex;\n      flex-grow: 1;\n      width: calc(100% - (#{$default-space} + #{$small-space}));\n      height: 100%;\n      border: 0.062rem solid;\n      border-color: var(--theme-event-item--border);\n      border-top-left-radius: 0;\n      border-top-right-radius: var(\n        --event-list-item-border-radius,\n        $default-border-radius\n      );\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: var(\n        --event-list-item-border-radius,\n        $default-border-radius\n      );\n      border-left: none;\n      padding-left: $default-space;\n    }\n\n    .event-content {\n      display: flex;\n      align-items: center;\n      width: 100%;\n      height: var(--event-list-item-height, 100%);\n      max-height: var(--event-list-item-height, 100%);\n      white-space: var(--event-list-item-content-white-space, inherit);\n      overflow: hidden;\n    }\n\n    .chevron-icon {\n      margin-left: auto;\n      margin-right: $small-space;\n      opacity: 0.6;\n      align-self: center;\n    }\n\n    &:not(.selected) {\n      @include hover {\n        background-color: var(--theme-event-item--background--hover);\n      }\n\n      @include active {\n        background-color: var(--theme-event-item--background--active);\n      }\n\n      .event-list-item-container {\n        @include hover {\n          border-color: var(--theme-event-item--border--hover);\n        }\n\n        @include active {\n          border-color: var(--theme-event-item--border--active);\n        }\n      }\n    }\n\n    &.selected .event-list-item-container {\n      background-color: var(--theme-event-item--background--selected);\n      border-color: var(--theme-event-item--border--selected);\n    }\n\n    &[disabled],\n    &.disabled {\n      pointer-events: none;\n\n      .event-list-item-container {\n        background-color: var(--theme-event-item--background--disabled);\n        border-color: var(--theme-event-item--border--disabled);\n      }\n    }\n  }\n}\n\n@include host-disabled;\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-event-list-item',\n  styleUrl: 'event-list-item.scss',\n  shadow: true,\n})\nexport class EventListItem {\n  /**\n   * Color of the status indicator.\n   * You can find a list of all available colors in our documentation.\n   * Example values are `--theme-color-alarm` or `color-alarm`\n   *\n   * @see https://ix.siemens.io/docs/theming/colors/\n   */\n  @Prop() color: string;\n\n  /**\n   * Show event list item as selected\n   */\n  @Prop() selected: boolean;\n\n  /**\n   * Disable event list item\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * Show chevron on right side of the event list item\n   */\n  @Prop() chevron: boolean;\n\n  /**\n   * Opacity of the status indicator.\n   * Defaults to 1.0\n   *\n   * @deprecated Will be removed in 2.0.0\n   */\n  @Prop() opacity = 1;\n\n  /**\n   * Event list item click\n   */\n  @Event() itemClick: EventEmitter;\n\n  @Listen('click', { passive: true })\n  handleItemClick() {\n    this.itemClick.emit();\n  }\n\n  render() {\n    const color = this.color?.startsWith('--theme')\n      ? `var(${this.color})`\n      : `var(--theme-${this.color})`;\n\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n        }}\n      >\n        <div\n          class={{\n            'event-list-item': true,\n            selected: this.selected,\n            disabled: this.disabled,\n          }}\n        >\n          <div\n            class={`indicator ${!this.color ? 'indicator-empty' : ''}`}\n            style={{\n              'background-color': this.color ? color : 'inherit',\n              opacity: `${this.disabled ? 0.4 : this.opacity}`,\n            }}\n          ></div>\n\n          <div class=\"event-list-item-container\">\n            <div class=\"event-content\">\n              <slot></slot>\n            </div>\n            {this.chevron && (\n              <ix-icon\n                name=\"chevron-right\"\n                size=\"16\"\n                class=\"chevron-icon\"\n              ></ix-icon>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ix-event-list.js

@@ -2,30 +2,39 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { c as createMutationObserver } from './mutation-observer.js';
 import { a as convertToRemString } from './rwd.util.js';
 
-const eventListCss = ".sc-ix-event-list-h{display:block;position:relative}ul.sc-ix-event-list{list-style:none;padding:0;margin-bottom:0}.sc-ix-event-list-s>.sc-ix-event-list-h:not(.item-size-s) .ix-event-list-item,.sc-ix-event-list-h:not(.item-size-l) .ix-event-list-item.sc-ix-event-list{display:none}.sc-ix-event-list-h.chevron .sc-ix-event-list-s .ix-event-list-item .chevron-icon{display:initial}.item-size-l .sc-ix-event-list-s .ix-event-list-item{height:6.5rem;max-height:6.5rem}.item-size-l .sc-ix-event-list-s .ix-event-list-item .event-content{height:6.5rem;max-height:6.5rem;white-space:normal}.compact .sc-ix-event-list-s .ix-event-list-item{margin-bottom:0px;border-radius:0px}.compact .sc-ix-event-list-s .ix-event-list-item .indicator{border-top-left-radius:0px;border-bottom-left-radius:0px}.compact .sc-ix-event-list-s .ix-event-list-item .event-list-item-container{border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.compact.sc-ix-event-list .compact.sc-ix-event-list:not(:last-child) .event-list-item-container.sc-ix-event-list{border-bottom:none}";
+const eventListCss = ":host{display:block;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ul{list-style:none;padding:0;margin-bottom:0}:host(.item-size-l){--event-list-item-height:6.5rem;--event-list-item-content-white-space:normal}:host(.compact){--event-list-item-border-radius:0;--event-list-item-margin-bottom:0}";
 
 const EventList = /*@__PURE__*/ proxyCustomElement(class EventList extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.__attachShadow();
     this.mutationObserver = createMutationObserver(this.onMutation.bind(this));
     this.itemHeight = 'S';
     this.compact = false;
     this.animated = true;
     this.chevron = undefined;
   }
+  watchChevron(chevron) {
+    this.handleChevron(chevron);
+  }
   componentDidLoad() {
     if (this.animated) {
       this.triggerFadeIn();
     }
-    if (typeof this.itemHeight === 'number') {
+    if (!Number.isNaN(Number(this.itemHeight))) {
       const height = convertToRemString(this.itemHeight);
-      this.el.querySelectorAll('.ix-event-list-item').forEach((item) => {
-        item.classList.add('d-flex');
+      this.hostElement
+        .querySelectorAll('ix-event-list-item')
+        .forEach((item) => {
         this.setCustomHeight(item, height);
       });
     }
-    this.mutationObserver.observe(this.el, { childList: true, subtree: true });
+    this.handleChevron(this.chevron);
+    this.mutationObserver.observe(this.hostElement, {
+      childList: true,
+      subtree: true,
+    });
   }
   onMutation(mutationRecords) {
     this.triggerFadeOut().then(() => {
@@ -34,21 +43,16 @@ const EventList = /*@__PURE__*/ proxyCustomElement(class EventList extends HTMLE
         mutationRecords
           .filter((mutation) => mutation.type === 'childList')
           .forEach((mutation) => mutation.addedNodes.forEach((item) => {
-          var _a;
           const itemHtml = item;
-          if (!((_a = itemHtml.classList) === null || _a === void 0 ? void 0 : _a.contains('ix-event-list-item'))) {
-            return;
-          }
-          itemHtml.classList.add('d-flex');
           this.setCustomHeight(itemHtml, height);
         }));
       }
+      this.handleChevron(this.chevron);
       this.triggerFadeIn();
     });
   }
   setCustomHeight(item, height) {
-    item.style.height = height;
-    item.style.maxHeight = height;
+    item.style.setProperty('--event-list-item-height', height);
   }
   triggerFadeOut() {
     if (!this.animated) {
@@ -61,7 +65,7 @@ const EventList = /*@__PURE__*/ proxyCustomElement(class EventList extends HTMLE
       },
       { opacity: 0 },
     ];
-    const listElement = this.el.querySelector('ul');
+    const listElement = this.hostElement.shadowRoot.querySelector('ul');
     return listElement.animate(keyframes, {
       duration: EventList.fadeOutDuration,
     }).finished;
@@ -70,7 +74,7 @@ const EventList = /*@__PURE__*/ proxyCustomElement(class EventList extends HTMLE
     if (!this.animated) {
       return;
     }
-    const listItems = this.el.querySelectorAll('.ix-event-list-item');
+    const listItems = this.hostElement.querySelectorAll('ix-event-list-item');
     listItems.forEach((e, i) => {
       const delay = i * 80;
       const offset = delay / (delay + EventList.fadeInDuration);
@@ -86,17 +90,30 @@ const EventList = /*@__PURE__*/ proxyCustomElement(class EventList extends HTMLE
       e.animate(keyframes, options);
     });
   }
+  handleChevron(chevron) {
+    const listItems = this.hostElement.querySelectorAll('ix-event-list-item');
+    listItems.forEach((e) => {
+      if (chevron) {
+        e.setAttribute('chevron', 'true');
+      }
+      else if (chevron !== undefined) {
+        e.removeAttribute('chevron');
+      }
+    });
+  }
   render() {
     return (h(Host, { class: {
         'item-size-s': this.itemHeight === 'S',
         'item-size-l': this.itemHeight === 'L',
         compact: this.compact,
-        chevron: this.chevron,
       } }, h("ul", null, h("slot", null))));
   }
-  get el() { return this; }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "chevron": ["watchChevron"]
+  }; }
   static get style() { return eventListCss; }
-}, [6, "ix-event-list", {
+}, [1, "ix-event-list", {
     "itemHeight": [8, "item-height"],
     "compact": [4],
     "animated": [4],

package/dist/components/ix-event-list.js.map

@@ -1 +1 @@
-{"file":"ix-event-list.js","mappings":"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","names":[],"sources":["./src/components/event-list/event-list.scss?tag=ix-event-list&encapsulation=scoped","./src/components/event-list/event-list.tsx"],"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\n$item-height-l: 6.5rem;\n\n:host {\n  display: block;\n  position: relative;\n}\n\nul {\n  list-style: none;\n  padding: 0;\n  margin-bottom: 0;\n}\n\n:host:not(.item-size-s),\n:host:not(.item-size-l) {\n  ::slotted(& .ix-event-list-item) {\n    display: none;\n  }\n}\n\n:host.chevron ::slotted(* .ix-event-list-item) .chevron-icon {\n  display: initial;\n}\n\n.item-size-l {\n  ::slotted(* .ix-event-list-item) {\n    height: $item-height-l;\n    max-height: $item-height-l;\n\n    .event-content {\n      height: $item-height-l;\n      max-height: $item-height-l;\n      white-space: normal;\n    }\n  }\n}\n\n.compact {\n  ::slotted(* .ix-event-list-item) {\n    margin-bottom: 0px;\n    border-radius: 0px;\n\n    .indicator {\n      border-top-left-radius: 0px;\n      border-bottom-left-radius: 0px;\n    }\n\n    .event-list-item-container {\n      border-top-left-radius: 0;\n      border-top-right-radius: 0;\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n    }\n  }\n\n  .compact:not(:last-child) {\n    .event-list-item-container {\n      border-bottom: none;\n    }\n  }\n}\n","/*\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 } from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { convertToRemString } from '../utils/rwd.util';\n\n@Component({\n  tag: 'ix-event-list',\n  styleUrl: 'event-list.scss',\n  scoped: true,\n})\nexport class EventList {\n  private readonly mutationObserver = createMutationObserver(\n    this.onMutation.bind(this)\n  );\n\n  private static readonly fadeOutDuration = 50;\n  private static readonly fadeInDuration = 150;\n\n  @Element() el!: HTMLIxEventListElement;\n\n  /**\n   * Determines the height of list items.\n   * This can either be one of two predefined sizes ('S' or 'L') or an absolute pixel value.\n   * In case a number is supplied it will get converted to rem internally.\n   * Defaults to 'S'.\n   */\n  @Prop() itemHeight: 'S' | 'L' | number = 'S';\n\n  /**\n   * Make event-list items more compact\n   */\n  @Prop() compact = false;\n\n  /**\n   * Animate state change transitions. Defaults to 'true'.\n   */\n  @Prop() animated = true;\n\n  /**\n   * Display a chevron icon in list items. Defaults to 'false'\n   */\n  @Prop() chevron: boolean;\n\n  componentDidLoad() {\n    if (this.animated) {\n      this.triggerFadeIn();\n    }\n\n    if (typeof this.itemHeight === 'number') {\n      const height = convertToRemString(this.itemHeight);\n      this.el.querySelectorAll('.ix-event-list-item').forEach((item) => {\n        item.classList.add('d-flex');\n        this.setCustomHeight(item as HTMLElement, height);\n      });\n    }\n\n    this.mutationObserver.observe(this.el, { childList: true, subtree: true });\n  }\n\n  private onMutation(mutationRecords: Array<MutationRecord>) {\n    this.triggerFadeOut().then(() => {\n      if (typeof this.itemHeight === 'number') {\n        const height = convertToRemString(this.itemHeight);\n\n        mutationRecords\n          .filter((mutation) => mutation.type === 'childList')\n          .forEach((mutation) =>\n            mutation.addedNodes.forEach((item) => {\n              const itemHtml = item as HTMLElement;\n              if (!itemHtml.classList?.contains('ix-event-list-item')) {\n                return;\n              }\n\n              itemHtml.classList.add('d-flex');\n              this.setCustomHeight(itemHtml, height);\n            })\n          );\n      }\n\n      this.triggerFadeIn();\n    });\n  }\n\n  private setCustomHeight(item: HTMLElement, height: string) {\n    item.style.height = height;\n    item.style.maxHeight = height;\n  }\n\n  private triggerFadeOut(): Promise<any> {\n    if (!this.animated) {\n      return Promise.resolve();\n    }\n\n    const keyframes = [\n      {\n        opacity: 1,\n        easing: 'ease-in',\n      },\n      { opacity: 0 },\n    ];\n    const listElement = this.el.querySelector('ul');\n    return listElement.animate(keyframes, {\n      duration: EventList.fadeOutDuration,\n    }).finished;\n  }\n\n  private triggerFadeIn() {\n    if (!this.animated) {\n      return;\n    }\n\n    const listItems = this.el.querySelectorAll('.ix-event-list-item');\n    listItems.forEach((e, i) => {\n      const delay = i * 80;\n      const offset = delay / (delay + EventList.fadeInDuration);\n      const keyframes = [\n        { opacity: 0 },\n        { opacity: 0, easing: 'ease-out', offset },\n        { opacity: 1 },\n      ];\n      const options = {\n        duration: EventList.fadeInDuration + delay,\n        iterations: 1,\n      };\n      e.animate(keyframes, options);\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'item-size-s': this.itemHeight === 'S',\n          'item-size-l': this.itemHeight === 'L',\n          compact: this.compact,\n          chevron: this.chevron,\n        }}\n      >\n        <ul>\n          <slot></slot>\n        </ul>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-event-list.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,6UAA6U;;MCkBrV,SAAS;;;;;IACH,qBAAgB,GAAG,sBAAsB,CACxD,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAC3B,CAAC;sBAauC,GAAG;mBAK1B,KAAK;oBAKJ,IAAI;;;EAQvB,YAAY,CAAC,OAA4B;IACvC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;GAC7B;EAED,gBAAgB;IACd,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;IAED,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,EAAE;MAC1C,MAAM,MAAM,GAAG,kBAAkB,CAAC,IAAI,CAAC,UAAoB,CAAC,CAAC;MAC7D,IAAI,CAAC,WAAW;SACb,gBAAgB,CAAC,oBAAoB,CAAC;SACtC,OAAO,CAAC,CAAC,IAAI;QACZ,IAAI,CAAC,eAAe,CAAC,IAAmB,EAAE,MAAM,CAAC,CAAC;OACnD,CAAC,CAAC;KACN;IAED,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAEjC,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE;MAC9C,SAAS,EAAE,IAAI;MACf,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;GACJ;EAEO,UAAU,CAAC,eAAsC;IACvD,IAAI,CAAC,cAAc,EAAE,CAAC,IAAI,CAAC;MACzB,IAAI,OAAO,IAAI,CAAC,UAAU,KAAK,QAAQ,EAAE;QACvC,MAAM,MAAM,GAAG,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAEnD,eAAe;WACZ,MAAM,CAAC,CAAC,QAAQ,KAAK,QAAQ,CAAC,IAAI,KAAK,WAAW,CAAC;WACnD,OAAO,CAAC,CAAC,QAAQ,KAChB,QAAQ,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,IAAI;UAC/B,MAAM,QAAQ,GAAG,IAAmB,CAAC;UAErC,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;SACxC,CAAC,CACH,CAAC;OACL;MAED,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;MAEjC,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB,CAAC,CAAC;GACJ;EAEO,eAAe,CAAC,IAAiB,EAAE,MAAc;IACvD,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,0BAA0B,EAAE,MAAM,CAAC,CAAC;GAC5D;EAEO,cAAc;IACpB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,OAAO,OAAO,CAAC,OAAO,EAAE,CAAC;KAC1B;IAED,MAAM,SAAS,GAAG;MAChB;QACE,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,SAAS;OAClB;MACD,EAAE,OAAO,EAAE,CAAC,EAAE;KACf,CAAC;IACF,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IACpE,OAAO,WAAW,CAAC,OAAO,CAAC,SAAS,EAAE;MACpC,QAAQ,EAAE,SAAS,CAAC,eAAe;KACpC,CAAC,CAAC,QAAQ,CAAC;GACb;EAEO,aAAa;IACnB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,OAAO;KACR;IAED,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;IAC1E,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;MACrB,MAAM,KAAK,GAAG,CAAC,GAAG,EAAE,CAAC;MACrB,MAAM,MAAM,GAAG,KAAK,IAAI,KAAK,GAAG,SAAS,CAAC,cAAc,CAAC,CAAC;MAC1D,MAAM,SAAS,GAAG;QAChB,EAAE,OAAO,EAAE,CAAC,EAAE;QACd,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE;QAC1C,EAAE,OAAO,EAAE,CAAC,EAAE;OACf,CAAC;MACF,MAAM,OAAO,GAAG;QACd,QAAQ,EAAE,SAAS,CAAC,cAAc,GAAG,KAAK;QAC1C,UAAU,EAAE,CAAC;OACd,CAAC;MACF,CAAC,CAAC,OAAO,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;KAC/B,CAAC,CAAC;GACJ;EAEO,aAAa,CAAC,OAA4B;IAChD,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;IAE1E,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;MAClB,IAAI,OAAO,EAAE;QACX,CAAC,CAAC,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;OACnC;WAAM,IAAI,OAAO,KAAK,SAAS,EAAE;QAChC,CAAC,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;OAC9B;KACF,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,aAAa,EAAE,IAAI,CAAC,UAAU,KAAK,GAAG;QACtC,aAAa,EAAE,IAAI,CAAC,UAAU,KAAK,GAAG;QACtC,OAAO,EAAE,IAAI,CAAC,OAAO;OACtB,IAED,cACE,eAAa,CACV,CACA,EACP;GACH;;;;;;;;;;;;AAnJuB,yBAAe,GAAG,EAAE,CAAC;AACrB,wBAAc,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/event-list/event-list.scss?tag=ix-event-list&encapsulation=shadow","./src/components/event-list/event-list.tsx"],"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\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: block;\n  position: relative;\n\n  ul {\n    list-style: none;\n    padding: 0;\n    margin-bottom: 0;\n  }\n}\n\n:host(.item-size-l) {\n  --event-list-item-height: 6.5rem;\n  --event-list-item-content-white-space: normal;\n}\n\n:host(.compact) {\n  --event-list-item-border-radius: 0;\n  --event-list-item-margin-bottom: 0;\n}\n","/*\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, Watch } from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { convertToRemString } from '../utils/rwd.util';\n\n@Component({\n  tag: 'ix-event-list',\n  styleUrl: 'event-list.scss',\n  shadow: true,\n})\nexport class EventList {\n  private readonly mutationObserver = createMutationObserver(\n    this.onMutation.bind(this)\n  );\n\n  private static readonly fadeOutDuration = 50;\n  private static readonly fadeInDuration = 150;\n\n  @Element() hostElement!: HTMLIxEventListElement;\n\n  /**\n   * Determines the height of list items.\n   * This can either be one of two predefined sizes ('S' or 'L') or an absolute pixel value.\n   * In case a number is supplied it will get converted to rem internally.\n   * Defaults to 'S'.\n   */\n  @Prop() itemHeight: 'S' | 'L' | number = 'S';\n\n  /**\n   * Make event-list items more compact\n   */\n  @Prop() compact = false;\n\n  /**\n   * Animate state change transitions. Defaults to 'true'.\n   */\n  @Prop() animated = true;\n\n  /**\n   * Display a chevron icon in list items. Defaults to 'false'\n   */\n  @Prop() chevron: boolean;\n\n  @Watch('chevron')\n  watchChevron(chevron: boolean | undefined) {\n    this.handleChevron(chevron);\n  }\n\n  componentDidLoad() {\n    if (this.animated) {\n      this.triggerFadeIn();\n    }\n\n    if (!Number.isNaN(Number(this.itemHeight))) {\n      const height = convertToRemString(this.itemHeight as number);\n      this.hostElement\n        .querySelectorAll('ix-event-list-item')\n        .forEach((item) => {\n          this.setCustomHeight(item as HTMLElement, height);\n        });\n    }\n\n    this.handleChevron(this.chevron);\n\n    this.mutationObserver.observe(this.hostElement, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  private onMutation(mutationRecords: Array<MutationRecord>) {\n    this.triggerFadeOut().then(() => {\n      if (typeof this.itemHeight === 'number') {\n        const height = convertToRemString(this.itemHeight);\n\n        mutationRecords\n          .filter((mutation) => mutation.type === 'childList')\n          .forEach((mutation) =>\n            mutation.addedNodes.forEach((item) => {\n              const itemHtml = item as HTMLElement;\n\n              this.setCustomHeight(itemHtml, height);\n            })\n          );\n      }\n\n      this.handleChevron(this.chevron);\n\n      this.triggerFadeIn();\n    });\n  }\n\n  private setCustomHeight(item: HTMLElement, height: string) {\n    item.style.setProperty('--event-list-item-height', height);\n  }\n\n  private triggerFadeOut(): Promise<any> {\n    if (!this.animated) {\n      return Promise.resolve();\n    }\n\n    const keyframes = [\n      {\n        opacity: 1,\n        easing: 'ease-in',\n      },\n      { opacity: 0 },\n    ];\n    const listElement = this.hostElement.shadowRoot.querySelector('ul');\n    return listElement.animate(keyframes, {\n      duration: EventList.fadeOutDuration,\n    }).finished;\n  }\n\n  private triggerFadeIn() {\n    if (!this.animated) {\n      return;\n    }\n\n    const listItems = this.hostElement.querySelectorAll('ix-event-list-item');\n    listItems.forEach((e, i) => {\n      const delay = i * 80;\n      const offset = delay / (delay + EventList.fadeInDuration);\n      const keyframes = [\n        { opacity: 0 },\n        { opacity: 0, easing: 'ease-out', offset },\n        { opacity: 1 },\n      ];\n      const options = {\n        duration: EventList.fadeInDuration + delay,\n        iterations: 1,\n      };\n      e.animate(keyframes, options);\n    });\n  }\n\n  private handleChevron(chevron: boolean | undefined): void {\n    const listItems = this.hostElement.querySelectorAll('ix-event-list-item');\n\n    listItems.forEach((e) => {\n      if (chevron) {\n        e.setAttribute('chevron', 'true');\n      } else if (chevron !== undefined) {\n        e.removeAttribute('chevron');\n      }\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'item-size-s': this.itemHeight === 'S',\n          'item-size-l': this.itemHeight === 'L',\n          compact: this.compact,\n        }}\n      >\n        <ul>\n          <slot></slot>\n        </ul>\n      </Host>\n    );\n  }\n}\n"],"version":3}