@siemens/ix 0.0.0-pr-1974-20250627114851 → 0.0.0-pr-1974-20250627115746

package/components/ix-dropdown-header.d.ts

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

package/components/ix-dropdown-header.js

@@ -0,0 +1,44 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-BuJ6BWIi.js';
+import { d as defineCustomElement$2 } from './p-DyMgW0fR.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}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}: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}";
+
+const DropdownHeader = /*@__PURE__*/ proxyCustomElement(class DropdownHeader extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    render() {
+        return (h(Host, { key: 'cd107d89cbb21bf785b8b3eac11a46254128eee2' }, h("ix-typography", { key: 'f19132492b63e43cb3fed1fa32f0532e6b02ae7f', class: 'category-text', format: 'h5' }, 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
+
+//# sourceMappingURL=ix-dropdown-header.js.map

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

@@ -0,0 +1 @@
+{"file":"ix-dropdown-header.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,k6BAAk6B;;MCgB/6B,cAAc,iBAAAA,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;;;;;;IAMzB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAe,KAAK,EAAE,eAAe,EAAE,MAAM,EAAE,IAAI,EAChD,EAAA,IAAI,CAAC,KAAK,CACG,CACX;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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@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'} format={'h5'}>\n          {this.label}\n        </ix-typography>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-dropdown-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IxDropdownItem extends Components.IxDropdownItem, HTMLElement {}
+export const IxDropdownItem: {
+    prototype: IxDropdownItem;
+    new (): IxDropdownItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ix-dropdown-item.js

@@ -0,0 +1,9 @@
+import { D as DropdownItem, d as defineCustomElement$1 } from './p-TNoCM8Wi.js';
+
+const IxDropdownItem = DropdownItem;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxDropdownItem, defineCustomElement };
+//# sourceMappingURL=ix-dropdown-item.js.map
+
+//# sourceMappingURL=ix-dropdown-item.js.map

package/components/ix-dropdown-item.js.map

@@ -0,0 +1 @@
+{"file":"ix-dropdown-item.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/components/ix-dropdown-quick-actions.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IxDropdownQuickActions extends Components.IxDropdownQuickActions, HTMLElement {}
+export const IxDropdownQuickActions: {
+    prototype: IxDropdownQuickActions;
+    new (): IxDropdownQuickActions;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ix-dropdown-quick-actions.js

@@ -0,0 +1,36 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-BuJ6BWIi.js';
+
+const dropdownQuickActionsCss = ":host{display:flex;justify-content:center;align-items:center;margin-inline-start:1.5rem;margin-inline-end:1.5rem;margin-block-end:0.25rem}:host slot::slotted(*){display:flex;margin-inline-end:0.625rem}";
+
+const DropdownQuickActions = /*@__PURE__*/ proxyCustomElement(class DropdownQuickActions extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    render() {
+        return (h(Host, { key: 'a110e69d9c4dfe30e866666109ad70ba44a289ad' }, h("slot", { key: 'c59028d1fbd1bb06fdf67806fa3ec0b5771f7d05' })));
+    }
+    static get style() { return dropdownQuickActionsCss; }
+}, [1, "ix-dropdown-quick-actions"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-dropdown-quick-actions"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ix-dropdown-quick-actions":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DropdownQuickActions);
+            }
+            break;
+    } });
+}
+
+const IxDropdownQuickActions = DropdownQuickActions;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxDropdownQuickActions, defineCustomElement };
+//# sourceMappingURL=ix-dropdown-quick-actions.js.map
+
+//# sourceMappingURL=ix-dropdown-quick-actions.js.map

package/components/ix-dropdown-quick-actions.js.map

@@ -0,0 +1 @@
+{"file":"ix-dropdown-quick-actions.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,2MAA2M;;MCe9N,oBAAoB,iBAAAA,kBAAA,CAAA,MAAA,oBAAA,SAAAC,CAAA,CAAA;;;;;;IAC/B,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/dropdown-quick-actions/dropdown-quick-actions.scss?tag=ix-dropdown-quick-actions&encapsulation=shadow","src/components/dropdown-quick-actions/dropdown-quick-actions.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 'common-variables';\n\n:host {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-inline-start: $large-space;\n  margin-inline-end: $large-space;\n  margin-block-end: $tiny-space;\n\n  slot::slotted(*) {\n    display: flex;\n    margin-inline-end: 0.625rem;\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 */\nimport { Component, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'ix-dropdown-quick-actions',\n  styleUrl: 'dropdown-quick-actions.scss',\n  shadow: true,\n})\nexport class DropdownQuickActions {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-dropdown.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IxDropdown extends Components.IxDropdown, HTMLElement {}
+export const IxDropdown: {
+    prototype: IxDropdown;
+    new (): IxDropdown;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ix-dropdown.js

@@ -0,0 +1,9 @@
+import { D as Dropdown, d as defineCustomElement$1 } from './p-Cut5OrRw.js';
+
+const IxDropdown = Dropdown;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxDropdown, defineCustomElement };
+//# sourceMappingURL=ix-dropdown.js.map
+
+//# sourceMappingURL=ix-dropdown.js.map

package/components/ix-dropdown.js.map

@@ -0,0 +1 @@
+{"file":"ix-dropdown.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/components/ix-empty-state.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IxEmptyState extends Components.IxEmptyState, HTMLElement {}
+export const IxEmptyState: {
+    prototype: IxEmptyState;
+    new (): IxEmptyState;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ix-empty-state.js

@@ -0,0 +1,65 @@
+import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-BuJ6BWIi.js';
+import { d as defineCustomElement$4 } from './p-CvvOe8xV.js';
+import { d as defineCustomElement$3 } from './p-BygLxZIM.js';
+import { d as defineCustomElement$2 } from './p-DyMgW0fR.js';
+
+const emptyStateCss = ":host{}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}: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 .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--large) .label__subHeader,:host(.emptyState.emptyState--large) ix-typography{text-align:center}: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}";
+
+const EmptyState = /*@__PURE__*/ proxyCustomElement(class EmptyState extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.actionClick = createEvent(this, "actionClick", 7);
+        /**
+         * Optional empty state layout - one of 'large', 'compact' or 'compactBreak'
+         */
+        this.layout = 'large';
+    }
+    render() {
+        return (h(Host, { key: 'd434c7fbfd8d3c287c49fa0f2c8db22316347a1d', class: `emptyState emptyState--${this.layout}` }, this.icon && (h("div", { key: '302252fc8678ebcaf3c4bc4a7c3395e341f8a7fb', class: "emptyState__icon" }, h("ix-icon", { key: '95a56f0258f249d9fedaf4c5cc32fe8d88c122f4', name: this.icon, size: this.layout === 'large' ? '32' : '32', color: "color-soft-text" }))), h("div", { key: '9a6726a7adbc8c647aa02d8c5205072a3b8a08b7', class: "emptyState__content" }, h("div", { key: 'a47e763cc591996408988226c04af78e08357825', class: "content__label" }, h("ix-typography", { key: '418514c4b661f4efb13fb6fa66a459c851077f13', format: this.layout === 'large' ? 'h3' : 'body' }, this.header), this.subHeader && (h("div", { key: 'a96c66dba511294c02a01a7b2e0b9557af988833', class: "label__subHeader" }, this.subHeader))), this.action && (h("div", { key: '6c51df2aea608a3f5017eda7a1c9a2d634003d16', class: "content__action" }, h("ix-button", { key: '34753a75886db6a921ee1e5af3804da0bfdd1c1b', onClick: () => this.actionClick.emit() }, this.action))))));
+    }
+    static get style() { return emptyStateCss; }
+}, [1, "ix-empty-state", {
+        "layout": [1],
+        "icon": [1],
+        "header": [1],
+        "subHeader": [1, "sub-header"],
+        "action": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-empty-state", "ix-button", "ix-spinner", "ix-typography"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ix-empty-state":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EmptyState);
+            }
+            break;
+        case "ix-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ix-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ix-typography":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const IxEmptyState = EmptyState;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxEmptyState, defineCustomElement };
+//# sourceMappingURL=ix-empty-state.js.map
+
+//# sourceMappingURL=ix-empty-state.js.map

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

@@ -0,0 +1 @@
+{"file":"ix-empty-state.js","mappings":";;;;;AAAA,MAAM,aAAa,GAAG,yzEAAyzE;;MCiBl0E,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AALvB,IAAA,WAAA,GAAA;;;;;AAME;;AAEG;AACK,QAAA,IAAM,CAAA,MAAA,GAAqB,OAAO;AA+D3C;IApCC,MAAM,GAAA;QACJ,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAA0B,uBAAA,EAAA,IAAI,CAAC,MAAM,CAAE,CAAA,EAAA,EACjD,IAAI,CAAC,IAAI,KACR,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAE3B,CACE,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO,GAAG,IAAI,GAAG,IAAI,EAC3C,KAAK,EAAC,iBAAiB,EACvB,CAAA,CACE,CACP,EAED,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qBAAqB,EAAA,EAC9B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EACzB,CAAA,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAe,MAAM,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO,GAAG,IAAI,GAAG,MAAM,IAC3D,IAAI,CAAC,MAAM,CACE,EAEf,IAAI,CAAC,SAAS,KACb,4DAAK,KAAK,EAAC,kBAAkB,EAAA,EAAE,IAAI,CAAC,SAAS,CAAO,CACrD,CACG,EAEL,IAAI,CAAC,MAAM,KACV,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAW,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,EAC9C,EAAA,IAAI,CAAC,MAAM,CACF,CACR,CACP,CACG,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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  .label__subHeader,\n  ix-typography {\n    text-align: center;\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';\nimport type { EmptyStateLayout } from './empty-state.types';\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 format={this.layout === 'large' ? 'h3' : 'body'}>\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/components/ix-event-list-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IxEventListItem extends Components.IxEventListItem, HTMLElement {}
+export const IxEventListItem: {
+    prototype: IxEventListItem;
+    new (): IxEventListItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,72 @@
+import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-BuJ6BWIi.js';
+import { w as iconChevronRight } from './p-CGwHQeMX.js';
+import { a as a11yBoolean } from './p-Bb7pDeaQ.js';
+
+const eventListItemCss = ":host{}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}: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}";
+
+const EventListItem = /*@__PURE__*/ proxyCustomElement(class EventListItem extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.itemClick = createEvent(this, "itemClick", 7);
+        /**
+         * Show event list item as selected
+         */
+        this.selected = false;
+        /**
+         * Disable event list item
+         */
+        this.disabled = false;
+        /**
+         * Show chevron on right side of the event list item
+         */
+        this.chevron = false;
+    }
+    handleItemClick() {
+        this.itemClick.emit();
+    }
+    render() {
+        var _a;
+        let color = ((_a = this.itemColor) === null || _a === void 0 ? void 0 : _a.startsWith('--theme'))
+            ? `var(${this.itemColor})`
+            : `var(--theme-${this.itemColor})`;
+        return (h(Host, { key: '45315c323b72663ab459c1ac82be84a289719b6d', class: {
+                disabled: this.disabled,
+            } }, h("div", { key: '5d380bf2e02591a9be10a4e2b8b3585c83d035b5', role: "listitem", "aria-disabled": a11yBoolean(this.disabled), class: {
+                'event-list-item': true,
+                selected: this.selected,
+                disabled: this.disabled,
+            } }, h("div", { key: '802085e76fa0a9c9d486f6f5777058da1d7ba9fd', class: `indicator ${!this.itemColor ? 'indicator-empty' : ''}`, style: {
+                'background-color': this.itemColor ? color : 'inherit',
+                opacity: `${this.disabled ? 0.4 : 1}`,
+            } }), h("div", { key: 'e90e4d2f639ec22b161e2c57d361f959e20f60a9', class: "event-list-item-container" }, h("div", { key: '34a3a544f2f05078b9a75fbe80d1165a4bd10bde', class: "event-content" }, h("slot", { key: '4ef3f92e68fa17c1369ccdd6b60d27cdafd84596' })), this.chevron && (h("ix-icon", { key: '8663521673022b881b4818367a0c97c3d5260e19', name: iconChevronRight, size: "16", class: "chevron-icon" }))))));
+    }
+    static get style() { return eventListItemCss; }
+}, [1, "ix-event-list-item", {
+        "itemColor": [1, "item-color"],
+        "selected": [4],
+        "disabled": [4],
+        "chevron": [4]
+    }, [[1, "click", "handleItemClick"]]]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-event-list-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ix-event-list-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EventListItem);
+            }
+            break;
+    } });
+}
+
+const IxEventListItem = EventListItem;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxEventListItem, defineCustomElement };
+//# sourceMappingURL=ix-event-list-item.js.map
+
+//# sourceMappingURL=ix-event-list-item.js.map

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

@@ -0,0 +1 @@
+{"file":"ix-event-list-item.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,knIAAknI;;MC0B9nI,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAL1B,IAAA,WAAA,GAAA;;;;;AAeE;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAExB;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAExB;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AAwDxB;IAhDC,eAAe,GAAA;AACb,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE;;IAGvB,MAAM,GAAA;;AACJ,QAAA,IAAI,KAAK,GAAG,CAAA,CAAA,EAAA,GAAA,IAAI,CAAC,SAAS,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,CAAC,SAAS,CAAC;AAC/C,cAAE,CAAA,IAAA,EAAO,IAAI,CAAC,SAAS,CAAG,CAAA;AAC1B,cAAE,CAAe,YAAA,EAAA,IAAI,CAAC,SAAS,GAAG;QAEpC,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,EAAA,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,UAAU,EAAA,eAAA,EACA,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,EACzC,KAAK,EAAE;AACL,gBAAA,iBAAiB,EAAE,IAAI;gBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACxB,aAAA,EAAA,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,CAAa,UAAA,EAAA,CAAC,IAAI,CAAC,SAAS,GAAG,iBAAiB,GAAG,EAAE,CAAA,CAAE,EAC9D,KAAK,EAAE;gBACL,kBAAkB,EAAE,IAAI,CAAC,SAAS,GAAG,KAAK,GAAG,SAAS;AACtD,gBAAA,OAAO,EAAE,CAAA,EAAG,IAAI,CAAC,QAAQ,GAAG,GAAG,GAAG,CAAC,CAAE,CAAA;AACtC,aAAA,EACI,CAAA,EAEP,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACpC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACL,IAAI,CAAC,OAAO,KACX,gEACE,IAAI,EAAE,gBAAgB,EACtB,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,cAAc,EAAA,CACX,CACZ,CACG,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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: var(--theme-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      padding-inline-end: $small-space;\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 { iconChevronRight } from '@siemens/ix-icons/icons';\nimport {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n} from '@stencil/core';\nimport { a11yBoolean } from '../utils/a11y';\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   * @link https://ix.siemens.io/docs/theming/colors/\n   */\n  @Prop() itemColor?: string;\n\n  /**\n   * Show event list item as selected\n   */\n  @Prop() selected = false;\n\n  /**\n   * Disable event list item\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Show chevron on right side of the event list item\n   */\n  @Prop() chevron = false;\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    let color = this.itemColor?.startsWith('--theme')\n      ? `var(${this.itemColor})`\n      : `var(--theme-${this.itemColor})`;\n\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n        }}\n      >\n        <div\n          role=\"listitem\"\n          aria-disabled={a11yBoolean(this.disabled)}\n          class={{\n            'event-list-item': true,\n            selected: this.selected,\n            disabled: this.disabled,\n          }}\n        >\n          <div\n            class={`indicator ${!this.itemColor ? 'indicator-empty' : ''}`}\n            style={{\n              'background-color': this.itemColor ? color : 'inherit',\n              opacity: `${this.disabled ? 0.4 : 1}`,\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={iconChevronRight}\n                size=\"16\"\n                class=\"chevron-icon\"\n              ></ix-icon>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-event-list.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IxEventList extends Components.IxEventList, HTMLElement {}
+export const IxEventList: {
+    prototype: IxEventList;
+    new (): IxEventList;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ix-event-list.js

@@ -0,0 +1,173 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-BuJ6BWIi.js';
+import { c as createMutationObserver } from './p-CX81WQtk.js';
+import { a as convertToRemString } from './p-JJddxCCh.js';
+import { a as anime } from './p-Ou74PMQs.js';
+
+const eventListCss = ":host{display:block;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}: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(.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 H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.mutationObserver = createMutationObserver(this.onMutation.bind(this));
+        /**
+         * Determines the height of list items.
+         * This can either be one of two predefined sizes ('S' or 'L') or an absolute pixel value.
+         * In case a number is supplied it will get converted to rem internally.
+         * Defaults to 'S'.
+         */
+        this.itemHeight = 'S';
+        /**
+         * Make event-list items more compact
+         */
+        this.compact = false;
+        /**
+         * Animate state change transitions. Defaults to 'true'.
+         */
+        this.animated = true;
+        /**
+         * Display a chevron icon in list items. Defaults to 'false'
+         */
+        this.chevron = false;
+    }
+    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 (!Number.isNaN(Number(this.itemHeight))) {
+                const height = convertToRemString(this.itemHeight);
+                const eventListItems = this.findEventListItems(mutationRecords);
+                eventListItems.forEach((item) => this.setCustomHeight(item, height));
+            }
+            this.handleChevron(this.chevron);
+            this.triggerFadeIn();
+        });
+    }
+    findEventListItems(mutationRecords) {
+        const eventListItems = [];
+        mutationRecords.forEach((mutation) => {
+            if (mutation.type !== 'childList') {
+                return;
+            }
+            mutation.addedNodes.forEach((node) => {
+                const element = node;
+                if (element.tagName === 'IX-EVENT-LIST-ITEM') {
+                    eventListItems.push(element);
+                }
+            });
+        });
+        return eventListItems;
+    }
+    setCustomHeight(item, height) {
+        item.style.setProperty('--event-list-item-height', height);
+    }
+    triggerFadeOut() {
+        return new Promise((resolve) => {
+            if (!this.animated) {
+                resolve();
+            }
+            const keyframes = [{ opacity: 1, easing: 'easeInSine' }, { opacity: 0 }];
+            const listElement = this.hostElement.shadowRoot.querySelector('ul');
+            anime({
+                targets: listElement,
+                opacity: keyframes,
+                duration: EventList.fadeOutDuration,
+                complete: () => {
+                    resolve();
+                },
+            });
+        });
+    }
+    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);
+            anime({
+                targets: e,
+                offset: offset,
+                duration: EventList.fadeInDuration + delay,
+                opacity: [0, 1],
+                easing: 'easeInOutSine',
+                delay: delay,
+                autoplay: true,
+            });
+        });
+    }
+    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: 'd65b84a521b9ee53cbd4f4fa353c4161257c175b', class: {
+                'item-size-s': this.itemHeight === 'S',
+                'item-size-l': this.itemHeight === 'L',
+                compact: this.compact,
+            } }, h("div", { key: '53d66cb0234e75c3152c53a445e7fb61b5e39440', role: "list" }, h("slot", { key: '16ce6ba7fb44794b23a52d45818b5927c5475d15' }))));
+    }
+    get hostElement() { return this; }
+    static get watchers() { return {
+        "chevron": ["watchChevron"]
+    }; }
+    static get style() { return eventListCss; }
+}, [1, "ix-event-list", {
+        "itemHeight": [8, "item-height"],
+        "compact": [4],
+        "animated": [4],
+        "chevron": [4]
+    }, undefined, {
+        "chevron": ["watchChevron"]
+    }]);
+EventList.fadeOutDuration = 50;
+EventList.fadeInDuration = 150;
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-event-list"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ix-event-list":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EventList);
+            }
+            break;
+    } });
+}
+
+const IxEventList = EventList;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxEventList, defineCustomElement };
+//# sourceMappingURL=ix-event-list.js.map
+
+//# sourceMappingURL=ix-event-list.js.map

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

@@ -0,0 +1 @@
+{"file":"ix-event-list.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"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\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';\nimport anime from 'animejs';\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 = false;\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 (!Number.isNaN(Number(this.itemHeight))) {\n        const height = convertToRemString(this.itemHeight as number);\n        const eventListItems = this.findEventListItems(mutationRecords);\n        eventListItems.forEach((item) => this.setCustomHeight(item, height));\n      }\n\n      this.handleChevron(this.chevron);\n      this.triggerFadeIn();\n    });\n  }\n\n  private findEventListItems(mutationRecords: MutationRecord[]): HTMLElement[] {\n    const eventListItems: HTMLElement[] = [];\n\n    mutationRecords.forEach((mutation) => {\n      if (mutation.type !== 'childList') {\n        return;\n      }\n\n      mutation.addedNodes.forEach((node) => {\n        const element = node as HTMLElement;\n\n        if (element.tagName === 'IX-EVENT-LIST-ITEM') {\n          eventListItems.push(element);\n        }\n      });\n    });\n\n    return eventListItems;\n  }\n\n  private setCustomHeight(item: HTMLElement, height: string) {\n    item.style.setProperty('--event-list-item-height', height);\n  }\n\n  private triggerFadeOut(): Promise<void> {\n    return new Promise((resolve) => {\n      if (!this.animated) {\n        resolve();\n      }\n\n      const keyframes = [{ opacity: 1, easing: 'easeInSine' }, { opacity: 0 }];\n\n      const listElement = this.hostElement.shadowRoot!.querySelector('ul');\n\n      anime({\n        targets: listElement,\n        opacity: keyframes,\n        duration: EventList.fadeOutDuration,\n        complete: () => {\n          resolve();\n        },\n      });\n    });\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      anime({\n        targets: e,\n        offset: offset,\n        duration: EventList.fadeInDuration + delay,\n        opacity: [0, 1],\n        easing: 'easeInOutSine',\n        delay: delay,\n        autoplay: true,\n      });\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        <div role=\"list\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-expanding-search.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IxExpandingSearch extends Components.IxExpandingSearch, HTMLElement {}
+export const IxExpandingSearch: {
+    prototype: IxExpandingSearch;
+    new (): IxExpandingSearch;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;