@siemens/ix 1.6.3 → 2.0.0-beta.0

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

@@ -6,18 +6,6 @@
  * 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.
- */
-/* Dimensions */
-/* Font sizes */
-/* Line heights */
-/* Animation timings */
 /*
  * SPDX-FileCopyrightText: 2023 Siemens AG
  *
@@ -35,42 +23,102 @@
  * LICENSE file in the root directory of this source tree.
  */
 :host {
-  display: block;
-}
-:host.icon-only {
-  min-width: 0;
+  --ix-dropdown-item-checked-color: var(--theme-color-primary);
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  height: 2.5rem;
+  width: auto;
+  overflow: hidden;
+  cursor: pointer;
 }
-:host.icon-only .dropdown-item > .glyph {
-  -webkit-margin-end: 0;
-          margin-inline-end: 0;
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
 }
-:host.icon-only .dropdown-item {
-  padding: 0.25rem 0.5rem;
+:host .dropdown-item {
+  all: unset;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  position: relative;
+  height: calc(100% - 2px);
+  width: calc(100% - 0.5rem - 1.5rem - 0.125rem);
+  padding: 0 0.5rem;
+  padding-right: 1.5rem;
+  border: 0.0625rem solid transparent;
+  white-space: nowrap;
 }
-:host.icon-only .dropdown-item:not(.disabled):not(:disabled):focus-visible {
-  border-color: #199fff;
+:host .dropdown-item.no-checked-field {
+  width: calc(100% - 1rem - 1.5rem - 0.125rem);
+  padding: 0 1rem;
+  padding-right: 1.5rem;
 }
-:host :focus {
-  background-color: transparent;
-  color: var(--theme-menu-item--color);
+:host .dropdown-item:focus-visible {
+  border-color: var(--theme-color-focus-bdr);
 }
-:host .checkmark {
-  position: absolute;
-  left: 0.5rem;
+:host .dropdown-item-checked {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  height: 100%;
+  width: 1rem;
+  min-width: 1rem;
+  margin-right: 0.25rem;
+  color: var(--ix-dropdown-item-checked-color);
 }
-:host.checked {
-  background-color: var(--theme-select-list-item--background--selected);
+:host .dropdown-item-icon {
+  margin-right: 0.25rem;
+  color: var(--theme-color-soft-text);
 }
-:host .label {
+:host .dropdown-item-text {
+  display: block;
+  position: relative;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-:host.disabled {
-  pointer-events: none;
+:host .dropdown-item:focus-visible {
+  outline: 1px solid yellow;
+}
+:host .submenu-icon {
+  margin-left: auto;
+}
+
+:host(.icon-only) .dropdown-item-icon {
+  margin-right: 0px;
+}
+:host(.icon-only) .dropdown-item-checked {
+  display: none;
+}
+:host(.icon-only) .dropdown-item {
+  width: calc(100% - 0.5rem - 0.5rem - 0.125rem);
+  padding: 0 0.5rem;
+  padding-right: 0.5rem;
+}
+
+:host(.submenu) .dropdown-item {
+  width: calc(100% - 0.5rem - 0.5rem - 0.125rem);
+  padding: 0 0.5rem;
+  padding-right: 0.5rem;
 }
 
-::slotted(ix-icon) {
-  -webkit-margin-start: auto;
-          margin-inline-start: auto;
+:host(:not(.disabled):not(:disabled).hover),
+:host(:not(.disabled):not(:disabled):hover) {
+  background-color: var(--theme-ghost--background--hover);
+}
+
+:host(:not(.disabled):not(:disabled).active),
+:host(:not(.disabled):not(:disabled):active) {
+  background-color: var(--theme-ghost--background--active);
+}
+
+:host(.disabled) {
+  pointer-events: none;
+  color: var(--theme-color-weak-text) !important;
+}
+:host(.disabled) .dropdown-item-icon {
+  color: var(--theme-color-weak-text) !important;
 }

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

@@ -6,6 +6,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import { chevronRightSmall } from '@siemens/ix-icons/icons';
 import { h, Host, } from '@stencil/core';
 export class DropdownItem {
   constructor() {
@@ -14,6 +15,8 @@ export class DropdownItem {
     this.hover = false;
     this.disabled = false;
     this.checked = false;
+    this.isSubMenu = false;
+    this.suppressChecked = false;
   }
   /**
    * Internal usage only
@@ -21,24 +24,24 @@ export class DropdownItem {
   async emitItemClick() {
     this.itemClick.emit(this.hostElement);
   }
+  isIconOnly() {
+    return (this.label === undefined &&
+      this.hostElement.innerText === '' &&
+      this.icon !== undefined);
+  }
   render() {
     return (h(Host, { class: {
-        checked: this.checked,
-        'icon-text': this.label !== undefined && this.icon !== undefined,
-        'icon-only': this.label === undefined && this.icon !== undefined,
-        disabled: this.disabled,
-      } }, h("button", { type: "button", class: {
-        'dropdown-item': true,
         hover: this.hover,
+        'icon-only': this.isIconOnly(),
         disabled: this.disabled,
-      }, onClick: () => this.emitItemClick(), tabindex: 0 }, this.checked ? (h("ix-icon", { class: "checkmark", name: "single-check", size: "16" })) : null, this.icon ? (h("span", { class: {
-        glyph: true,
-        [`glyph-${this.icon}`]: true,
-        disabled: this.disabled,
-      } })) : null, this.label ? h("span", { class: "label" }, this.label) : null, h("slot", null))));
+        submenu: this.isSubMenu,
+      }, role: "listitem" }, h("button", { type: "button", tabIndex: 0, class: {
+        'dropdown-item': true,
+        'no-checked-field': this.suppressChecked,
+      }, onClick: () => this.emitItemClick() }, !this.suppressChecked ? (h("div", { class: "dropdown-item-checked" }, this.checked ? (h("ix-icon", { class: "checkmark", name: "single-check", size: "16" })) : null)) : null, this.icon ? (h("ix-icon", { class: "dropdown-item-icon", name: this.icon })) : null, h("div", { class: "dropdown-item-text" }, this.label, h("slot", null)), this.isSubMenu ? (h("ix-icon", { name: chevronRightSmall, class: 'submenu-icon' })) : null)));
   }
   static get is() { return "ix-dropdown-item"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["dropdown-item.scss"]
@@ -138,6 +141,48 @@ export class DropdownItem {
         "attribute": "checked",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "isSubMenu": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "attribute": "is-sub-menu",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "suppressChecked": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "attribute": "suppress-checked",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown-item.js","sourceRoot":"","sources":["../../../src/components/dropdown-item/dropdown-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,YAAY;;;;iBAgBP,KAAK;oBAKF,KAAK;mBAKN,KAAK;;EAOvB;;KAEG;EAEH,KAAK,CAAC,aAAa;IACjB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;EACxC,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,WAAW,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS;QAChE,WAAW,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS;QAChE,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB;MAED,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE;UACL,eAAe,EAAE,IAAI;UACrB,KAAK,EAAE,IAAI,CAAC,KAAK;UACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,EACnC,QAAQ,EAAE,CAAC;QAEV,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CACd,eAAS,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,IAAI,GAAW,CACpE,CAAC,CAAC,CAAC,IAAI;QAEP,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACX,YACE,KAAK,EAAE;YACL,KAAK,EAAE,IAAI;YACX,CAAC,SAAS,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;YAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ;WACxB,GACK,CACT,CAAC,CAAC,CAAC,IAAI;QAEP,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAAC,CAAC,CAAC,IAAI;QAC5D,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  Method,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-dropdown-item',\n  styleUrl: 'dropdown-item.scss',\n  scoped: true,\n})\nexport class DropdownItem {\n  @Element() hostElement!: HTMLIxDropdownItemElement;\n\n  /**\n   * Label of dropdown item\n   */\n  @Prop() label: string;\n\n  /**\n   * Icon of dropdown item\n   */\n  @Prop() icon: string;\n\n  /**\n   * Display hover state\n   */\n  @Prop() hover = false;\n\n  /**\n   * Disable item and remove event listeners\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Whether the item is checked or not. If true a checkmark will mark the item as checked.\n   */\n  @Prop() checked = false;\n\n  /**\n   * Click on item\n   */\n  @Event() itemClick: EventEmitter<HTMLIxDropdownItemElement>;\n\n  /**\n   * Internal usage only\n   */\n  @Method()\n  async emitItemClick() {\n    this.itemClick.emit(this.hostElement);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          checked: this.checked,\n          'icon-text': this.label !== undefined && this.icon !== undefined,\n          'icon-only': this.label === undefined && this.icon !== undefined,\n          disabled: this.disabled,\n        }}\n      >\n        <button\n          type=\"button\"\n          class={{\n            'dropdown-item': true,\n            hover: this.hover,\n            disabled: this.disabled,\n          }}\n          onClick={() => this.emitItemClick()}\n          tabindex={0}\n        >\n          {this.checked ? (\n            <ix-icon class=\"checkmark\" name=\"single-check\" size=\"16\"></ix-icon>\n          ) : null}\n\n          {this.icon ? (\n            <span\n              class={{\n                glyph: true,\n                [`glyph-${this.icon}`]: true,\n                disabled: this.disabled,\n              }}\n            ></span>\n          ) : null}\n\n          {this.label ? <span class=\"label\">{this.label}</span> : null}\n          <slot></slot>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"dropdown-item.js","sourceRoot":"","sources":["../../../src/components/dropdown-item/dropdown-item.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,GACL,MAAM,eAAe,CAAC;AAOvB,MAAM,OAAO,YAAY;;;;iBAgBP,KAAK;oBAKF,KAAK;mBAKN,KAAK;qBAKH,KAAK;2BAKC,KAAK;;EAO/B;;KAEG;EAEH,KAAK,CAAC,aAAa;IACjB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;EACxC,CAAC;EAEO,UAAU;IAChB,OAAO,CACL,IAAI,CAAC,KAAK,KAAK,SAAS;MACxB,IAAI,CAAC,WAAW,CAAC,SAAS,KAAK,EAAE;MACjC,IAAI,CAAC,IAAI,KAAK,SAAS,CACxB,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,WAAW,EAAE,IAAI,CAAC,UAAU,EAAE;QAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,OAAO,EAAE,IAAI,CAAC,SAAS;OACxB,EACD,IAAI,EAAC,UAAU;MAEf,cACE,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,KAAK,EAAE;UACL,eAAe,EAAE,IAAI;UACrB,kBAAkB,EAAE,IAAI,CAAC,eAAe;SACzC,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE;QAElC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CACvB,WAAK,KAAK,EAAC,uBAAuB,IAC/B,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CACd,eACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,cAAc,EACnB,IAAI,EAAC,IAAI,GACA,CACZ,CAAC,CAAC,CAAC,IAAI,CACJ,CACP,CAAC,CAAC,CAAC,IAAI;QACP,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACX,eAAS,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY,CAChE,CAAC,CAAC,CAAC,IAAI;QACR,WAAK,KAAK,EAAC,oBAAoB;UAC5B,IAAI,CAAC,KAAK;UACX,eAAa,CACT;QACL,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAChB,eAAS,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,cAAc,GAAY,CACpE,CAAC,CAAC,CAAC,IAAI,CACD,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 */\nimport { chevronRightSmall } from '@siemens/ix-icons/icons';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-dropdown-item',\n  styleUrl: 'dropdown-item.scss',\n  shadow: true,\n})\nexport class DropdownItem {\n  @Element() hostElement!: HTMLIxDropdownItemElement;\n\n  /**\n   * Label of dropdown item\n   */\n  @Prop() label: string;\n\n  /**\n   * Icon of dropdown item\n   */\n  @Prop() icon: string;\n\n  /**\n   * Display hover state\n   */\n  @Prop() hover = false;\n\n  /**\n   * Disable item and remove event listeners\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Whether the item is checked or not. If true a checkmark will mark the item as checked.\n   */\n  @Prop() checked = false;\n\n  /**\n   * @internal\n   */\n  @Prop() isSubMenu = false;\n\n  /**\n   * @internal\n   */\n  @Prop() suppressChecked = false;\n\n  /**\n   * Click on item\n   */\n  @Event() itemClick: EventEmitter<HTMLIxDropdownItemElement>;\n\n  /**\n   * Internal usage only\n   */\n  @Method()\n  async emitItemClick() {\n    this.itemClick.emit(this.hostElement);\n  }\n\n  private isIconOnly() {\n    return (\n      this.label === undefined &&\n      this.hostElement.innerText === '' &&\n      this.icon !== undefined\n    );\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          hover: this.hover,\n          'icon-only': this.isIconOnly(),\n          disabled: this.disabled,\n          submenu: this.isSubMenu,\n        }}\n        role=\"listitem\"\n      >\n        <button\n          type=\"button\"\n          tabIndex={0}\n          class={{\n            'dropdown-item': true,\n            'no-checked-field': this.suppressChecked,\n          }}\n          onClick={() => this.emitItemClick()}\n        >\n          {!this.suppressChecked ? (\n            <div class=\"dropdown-item-checked\">\n              {this.checked ? (\n                <ix-icon\n                  class=\"checkmark\"\n                  name=\"single-check\"\n                  size=\"16\"\n                ></ix-icon>\n              ) : null}\n            </div>\n          ) : null}\n          {this.icon ? (\n            <ix-icon class=\"dropdown-item-icon\" name={this.icon}></ix-icon>\n          ) : null}\n          <div class=\"dropdown-item-text\">\n            {this.label}\n            <slot></slot>\n          </div>\n          {this.isSubMenu ? (\n            <ix-icon name={chevronRightSmall} class={'submenu-icon'}></ix-icon>\n          ) : null}\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/event-list/event-list.css

@@ -1,3 +1,11 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 /*
  * SPDX-FileCopyrightText: 2023 Siemens AG
  *
@@ -10,46 +18,23 @@
   display: block;
   position: relative;
 }
-
-ul {
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
+:host ul {
   list-style: none;
   padding: 0;
   margin-bottom: 0;
 }
 
-::slotted(:host:not(.item-size-s) .ix-event-list-item,
-:host:not(.item-size-l) .ix-event-list-item) {
-  display: none;
-}
-
-:host.chevron ::slotted(* .ix-event-list-item) .chevron-icon {
-  display: initial;
+:host(.item-size-l) {
+  --event-list-item-height: 6.5rem;
+  --event-list-item-content-white-space: normal;
 }
 
-.item-size-l ::slotted(* .ix-event-list-item) {
-  height: 6.5rem;
-  max-height: 6.5rem;
-}
-.item-size-l ::slotted(* .ix-event-list-item) .event-content {
-  height: 6.5rem;
-  max-height: 6.5rem;
-  white-space: normal;
-}
-
-.compact ::slotted(* .ix-event-list-item) {
-  margin-bottom: 0px;
-  border-radius: 0px;
-}
-.compact ::slotted(* .ix-event-list-item) .indicator {
-  border-top-left-radius: 0px;
-  border-bottom-left-radius: 0px;
-}
-.compact ::slotted(* .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 .compact:not(:last-child) .event-list-item-container {
-  border-bottom: none;
+:host(.compact) {
+  --event-list-item-border-radius: 0;
+  --event-list-item-margin-bottom: 0;
 }

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

@@ -17,18 +17,26 @@ export class EventList {
     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(() => {
@@ -37,21 +45,16 @@ export class EventList {
         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) {
@@ -64,7 +67,7 @@ export class EventList {
       },
       { opacity: 0 },
     ];
-    const listElement = this.el.querySelector('ul');
+    const listElement = this.hostElement.shadowRoot.querySelector('ul');
     return listElement.animate(keyframes, {
       duration: EventList.fadeOutDuration,
     }).finished;
@@ -73,7 +76,7 @@ export class EventList {
     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);
@@ -89,16 +92,26 @@ export class EventList {
       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))));
   }
   static get is() { return "ix-event-list"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["event-list.scss"]
@@ -184,7 +197,13 @@ export class EventList {
       }
     };
   }
-  static get elementRef() { return "el"; }
+  static get elementRef() { return "hostElement"; }
+  static get watchers() {
+    return [{
+        "propName": "chevron",
+        "methodName": "watchChevron"
+      }];
+  }
 }
 EventList.fadeOutDuration = 50;
 EventList.fadeInDuration = 150;

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

@@ -1 +1 @@
-{"version":3,"file":"event-list.js","sourceRoot":"","sources":["../../../src/components/event-list/event-list.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 } 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":"event-list.js","sourceRoot":"","sources":["../../../src/components/event-list/event-list.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, 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"]}

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

@@ -30,36 +30,57 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 /* Dimensions */
 /* Font sizes */
 /* Line heights */
 /* Animation timings */
-.ix-event-list-item {
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
+:host .event-list-item {
   display: flex;
   align-items: center;
   position: relative;
-  height: 2.5rem;
-  max-height: 2.5rem;
-  border-radius: 0.25rem;
+  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: 0.5rem;
+  margin-bottom: var(--event-list-item-margin-bottom, 0.5rem);
 }
-.ix-event-list-item .indicator {
+:host .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;
+  border-top-left-radius: var(--event-list-item-border-radius, 0.25rem);
+  border-bottom-left-radius: var(--event-list-item-border-radius, 0.25rem);
 }
-.ix-event-list-item .indicator-empty {
+:host .event-list-item .indicator-empty {
   border: var(--theme-weak-bdr-1);
   border-right: none;
 }
-.ix-event-list-item .event-list-item-container {
+:host .event-list-item .event-list-item-container {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -70,57 +91,63 @@
   border: 0.062rem solid;
   border-color: var(--theme-event-item--border);
   border-top-left-radius: 0;
-  border-top-right-radius: 0.25rem;
+  border-top-right-radius: var(--event-list-item-border-radius, 0.25rem);
   border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0.25rem;
+  border-bottom-right-radius: var(--event-list-item-border-radius, 0.25rem);
   border-left: none;
   padding-left: 1rem;
 }
-.ix-event-list-item:not(.selected):not(.disabled):not(:disabled) {
+: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;
 }
-.ix-event-list-item:not(.selected):not(.disabled):not(:disabled):hover {
+:host .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) {
+:host .event-list-item:not(.selected):not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-.ix-event-list-item:not(.selected):not(.disabled):not(:disabled):active {
+:host .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) {
+:host .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 {
+:host .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) {
+:host .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 {
+:host .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 {
+: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);
 }
-.ix-event-list-item[disabled], .ix-event-list-item.disabled {
+:host .event-list-item[disabled], :host .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 {
+: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);
 }
-.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;
+
+:host(.disabled) {
+  pointer-events: none;
 }