@siemens/ix 0.0.0-20240419081748

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

@@ -0,0 +1,77 @@
+/*
+ * 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: 2024 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: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+:host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+  display: block;
+  position: relative;
+}
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
+:host ::-webkit-scrollbar-button {
+  display: none;
+}
+:host ::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+:host ::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
+}
+:host ::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
+}
+:host ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host ::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host ::-webkit-scrollbar-corner {
+  display: none;
+}
+:host ul {
+  list-style: none;
+  padding: 0;
+  margin-top: 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;
+}

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

@@ -0,0 +1,210 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { h, Host } from "@stencil/core";
+import { createMutationObserver } from "../utils/mutation-observer";
+import { convertToRemString } from "../utils/rwd.util";
+export class EventList {
+    constructor() {
+        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 (!Number.isNaN(Number(this.itemHeight))) {
+            const height = convertToRemString(this.itemHeight);
+            this.hostElement
+                .querySelectorAll('ix-event-list-item')
+                .forEach((item) => {
+                this.setCustomHeight(item, height);
+            });
+        }
+        this.handleChevron(this.chevron);
+        this.mutationObserver.observe(this.hostElement, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    onMutation(mutationRecords) {
+        this.triggerFadeOut().then(() => {
+            if (typeof this.itemHeight === 'number') {
+                const height = convertToRemString(this.itemHeight);
+                mutationRecords
+                    .filter((mutation) => mutation.type === 'childList')
+                    .forEach((mutation) => mutation.addedNodes.forEach((item) => {
+                    const itemHtml = item;
+                    this.setCustomHeight(itemHtml, height);
+                }));
+            }
+            this.handleChevron(this.chevron);
+            this.triggerFadeIn();
+        });
+    }
+    setCustomHeight(item, height) {
+        item.style.setProperty('--event-list-item-height', height);
+    }
+    triggerFadeOut() {
+        if (!this.animated) {
+            return Promise.resolve();
+        }
+        const keyframes = [
+            {
+                opacity: 1,
+                easing: 'ease-in',
+            },
+            { opacity: 0 },
+        ];
+        const listElement = this.hostElement.shadowRoot.querySelector('ul');
+        return listElement.animate(keyframes, {
+            duration: EventList.fadeOutDuration,
+        }).finished;
+    }
+    triggerFadeIn() {
+        if (!this.animated) {
+            return;
+        }
+        const listItems = this.hostElement.querySelectorAll('ix-event-list-item');
+        listItems.forEach((e, i) => {
+            const delay = i * 80;
+            const offset = delay / (delay + EventList.fadeInDuration);
+            const keyframes = [
+                { opacity: 0 },
+                { opacity: 0, easing: 'ease-out', offset },
+                { opacity: 1 },
+            ];
+            const options = {
+                duration: EventList.fadeInDuration + delay,
+                iterations: 1,
+            };
+            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, { key: '753ef5eaecb97380a454359d59397b163a75c70f', class: {
+                'item-size-s': this.itemHeight === 'S',
+                'item-size-l': this.itemHeight === 'L',
+                compact: this.compact,
+            } }, h("ul", { key: 'c4264b59d439dc2dae8ec3153aa04fe5ee04383c' }, h("slot", { key: '114837af21b63c7acec8eed2901aacc046608ab3' }))));
+    }
+    static get is() { return "ix-event-list"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["event-list.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["event-list.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "itemHeight": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "'S' | 'L' | number",
+                    "resolved": "\"L\" | \"S\" | number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines the height of list items.\nThis can either be one of two predefined sizes ('S' or 'L') or an absolute pixel value.\nIn case a number is supplied it will get converted to rem internally.\nDefaults to 'S'."
+                },
+                "attribute": "item-height",
+                "reflect": false,
+                "defaultValue": "'S'"
+            },
+            "compact": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Make event-list items more compact"
+                },
+                "attribute": "compact",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "animated": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Animate state change transitions. Defaults to 'true'."
+                },
+                "attribute": "animated",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "chevron": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Display a chevron icon in list items. Defaults to 'false'"
+                },
+                "attribute": "chevron",
+                "reflect": false
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "chevron",
+                "methodName": "watchChevron"
+            }];
+    }
+}
+EventList.fadeOutDuration = 50;
+EventList.fadeInDuration = 150;
+//# sourceMappingURL=event-list.js.map

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

@@ -0,0 +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, 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/test/event-list.spec.js

@@ -0,0 +1,112 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { newSpecPage } from "@stencil/core/testing";
+//@ts-ignore
+import { createMutationObserver } from "../../utils/mutation-observer";
+import { EventList } from "../event-list";
+jest.mock('../../utils/mutation-observer');
+describe('event-list', () => {
+    beforeEach(() => {
+        //@ts-ignore
+        createMutationObserver = jest.fn(() => ({
+            observe: jest.fn(),
+        }));
+    });
+    it('renders', async () => {
+        const page = await newSpecPage({
+            components: [EventList],
+            html: `
+        <ix-event-list>
+          <ix-event-list-item  />
+        </ix-event-list>
+      `,
+        });
+        expect(page.root).toEqualHtml(`
+      <ix-event-list class="item-size-s">
+        <mock:shadow-root>
+          <ul>
+            <slot></slot>
+          </ul>
+        </mock:shadow-root>
+        <ix-event-list-item></ix-event-list-item>
+      </ix-event-list>
+    `);
+    });
+    it('compact', async () => {
+        const page = await newSpecPage({
+            components: [EventList],
+            html: `
+        <ix-event-list>
+          <ix-event-list-item  />
+        </ix-event-list>
+      `,
+        });
+        const eventList = page.doc.querySelector('ix-event-list');
+        eventList.compact = true;
+        await page.waitForChanges();
+        expect(page.root).toEqualHtml(`
+      <ix-event-list class="compact item-size-s">
+        <mock:shadow-root>
+          <ul>
+            <slot></slot>
+          </ul>
+        </mock:shadow-root>
+        <ix-event-list-item></ix-event-list-item>
+      </ix-event-list>
+    `);
+    });
+    it('animated', async () => {
+        const page = await newSpecPage({
+            components: [EventList],
+            html: '<div></div>',
+        });
+        const eventList = page.doc.createElement('ix-event-list');
+        const eventListItem = page.doc.createElement('ix-event-list-item');
+        eventListItem.animate = jest.fn();
+        eventList.appendChild(eventListItem);
+        page.root.appendChild(eventList);
+        await page.waitForChanges();
+        expect(eventListItem.animate).toHaveBeenCalled();
+        expect(page.root).toEqualHtml(`
+      <ix-event-list class="item-size-s">
+        <mock:shadow-root>
+          <ul>
+            <slot></slot>
+          </ul>
+        </mock:shadow-root>
+        <ix-event-list-item></ix-event-list-item>
+      </ix-event-list>
+    `);
+    });
+    it('not animated', async () => {
+        const page = await newSpecPage({
+            components: [EventList],
+            html: '<div></div>',
+        });
+        const eventList = page.doc.createElement('ix-event-list');
+        eventList.animated = false;
+        const eventListItem = page.doc.createElement('ix-event-list-item');
+        eventListItem.animate = jest.fn();
+        eventList.appendChild(eventListItem);
+        page.root.appendChild(eventList);
+        await page.waitForChanges();
+        expect(eventListItem.animate).not.toHaveBeenCalled();
+        expect(page.root).toEqualHtml(`
+      <ix-event-list class="item-size-s">
+        <mock:shadow-root>
+          <ul>
+            <slot></slot>
+          </ul>
+        </mock:shadow-root>
+        <ix-event-list-item></ix-event-list-item>
+      </ix-event-list>
+    `);
+    });
+});
+//# sourceMappingURL=event-list.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"event-list.spec.js","sourceRoot":"","sources":["../../../../../src/components/event-list/test/event-list.spec.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 { newSpecPage } from '@stencil/core/testing';\n//@ts-ignore\nimport { createMutationObserver } from '../../utils/mutation-observer';\nimport { EventList } from '../event-list';\n\njest.mock('../../utils/mutation-observer');\n\ndescribe('event-list', () => {\n  beforeEach(() => {\n    //@ts-ignore\n    createMutationObserver = jest.fn(() => ({\n      observe: jest.fn(),\n    }));\n  });\n\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [EventList],\n      html: `\n        <ix-event-list>\n          <ix-event-list-item  />\n        </ix-event-list>\n      `,\n    });\n    expect(page.root).toEqualHtml(`\n      <ix-event-list class=\"item-size-s\">\n        <mock:shadow-root>\n          <ul>\n            <slot></slot>\n          </ul>\n        </mock:shadow-root>\n        <ix-event-list-item></ix-event-list-item>\n      </ix-event-list>\n    `);\n  });\n\n  it('compact', async () => {\n    const page = await newSpecPage({\n      components: [EventList],\n      html: `\n        <ix-event-list>\n          <ix-event-list-item  />\n        </ix-event-list>\n      `,\n    });\n\n    const eventList = page.doc.querySelector(\n      'ix-event-list'\n    ) as HTMLIxEventListElement;\n\n    eventList.compact = true;\n\n    await page.waitForChanges();\n\n    expect(page.root).toEqualHtml(`\n      <ix-event-list class=\"compact item-size-s\">\n        <mock:shadow-root>\n          <ul>\n            <slot></slot>\n          </ul>\n        </mock:shadow-root>\n        <ix-event-list-item></ix-event-list-item>\n      </ix-event-list>\n    `);\n  });\n\n  it('animated', async () => {\n    const page = await newSpecPage({\n      components: [EventList],\n      html: '<div></div>',\n    });\n\n    const eventList = page.doc.createElement('ix-event-list');\n    const eventListItem = page.doc.createElement('ix-event-list-item');\n\n    eventListItem.animate = jest.fn();\n\n    eventList.appendChild(eventListItem);\n    page.root.appendChild(eventList);\n\n    await page.waitForChanges();\n\n    expect(eventListItem.animate).toHaveBeenCalled();\n\n    expect(page.root).toEqualHtml(`\n      <ix-event-list class=\"item-size-s\">\n        <mock:shadow-root>\n          <ul>\n            <slot></slot>\n          </ul>\n        </mock:shadow-root>\n        <ix-event-list-item></ix-event-list-item>\n      </ix-event-list>\n    `);\n  });\n\n  it('not animated', async () => {\n    const page = await newSpecPage({\n      components: [EventList],\n      html: '<div></div>',\n    });\n\n    const eventList = page.doc.createElement('ix-event-list');\n    eventList.animated = false;\n\n    const eventListItem = page.doc.createElement('ix-event-list-item');\n\n    eventListItem.animate = jest.fn();\n\n    eventList.appendChild(eventListItem);\n    page.root.appendChild(eventList);\n\n    await page.waitForChanges();\n\n    expect(eventListItem.animate).not.toHaveBeenCalled();\n\n    expect(page.root).toEqualHtml(`\n      <ix-event-list class=\"item-size-s\">\n        <mock:shadow-root>\n          <ul>\n            <slot></slot>\n          </ul>\n        </mock:shadow-root>\n        <ix-event-list-item></ix-event-list-item>\n      </ix-event-list>\n    `);\n  });\n});\n"]}

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

@@ -0,0 +1,192 @@
+/*
+ * 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: 2024 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: 2024 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: 2024 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: 2024 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: 2024 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: 2024 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 */
+:host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+}
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
+:host ::-webkit-scrollbar-button {
+  display: none;
+}
+:host ::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+:host ::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
+}
+:host ::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
+}
+:host ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host ::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host ::-webkit-scrollbar-corner {
+  display: none;
+}
+:host .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: var(--theme-default-time);
+  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;
+  padding-inline-end: 0.5rem;
+}
+: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, :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, :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, :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, :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;
+}