@siemens/ix 0.0.0-20240419081748

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

@@ -0,0 +1,180 @@
+/*
+ * 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";
+export class EventListItem {
+    constructor() {
+        this.color = undefined;
+        this.itemColor = undefined;
+        this.selected = undefined;
+        this.disabled = undefined;
+        this.chevron = undefined;
+    }
+    handleItemClick() {
+        this.itemClick.emit();
+    }
+    render() {
+        var _a, _b, _c, _d;
+        let color = ((_a = this.itemColor) === null || _a === void 0 ? void 0 : _a.startsWith('--theme'))
+            ? `var(${this.itemColor})`
+            : `var(--theme-${this.itemColor})`;
+        if (this.color) {
+            color = ((_b = this.color) === null || _b === void 0 ? void 0 : _b.startsWith('--theme'))
+                ? `var(${this.color})`
+                : `var(--theme-${this.color})`;
+        }
+        return (h(Host, { key: 'ea6803280e270d6b6c4dc0023de76812bc7e90ed', class: {
+                disabled: this.disabled,
+            } }, h("div", { key: '75efa47c7a119ea2d7aa659f5c2709fa34cfb3eb', class: {
+                'event-list-item': true,
+                selected: this.selected,
+                disabled: this.disabled,
+            } }, h("div", { key: '74d747f6b58ce8b56343983e3f4cc1c97e0623fc', class: `indicator ${!((_c = this.itemColor) !== null && _c !== void 0 ? _c : this.color) ? 'indicator-empty' : ''}`, style: {
+                'background-color': ((_d = this.itemColor) !== null && _d !== void 0 ? _d : this.color) ? color : 'inherit',
+                opacity: `${this.disabled ? 0.4 : 1}`,
+            } }), h("div", { key: 'b32602b0c89701f487cf10b1600c2ed039e86498', class: "event-list-item-container" }, h("div", { key: 'd3298c260d4f74aa91a747a61b93203fab354432', class: "event-content" }, h("slot", { key: '45c7a053766b5f7ce3dcae9d74bb22201c0dba9b' })), this.chevron && (h("ix-icon", { name: 'chevron-right', size: "16", class: "chevron-icon" }))))));
+    }
+    static get is() { return "ix-event-list-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["event-list-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["event-list-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "link",
+                            "text": "https://ix.siemens.io/docs/theming/colors/"
+                        }, {
+                            "name": "deprecated",
+                            "text": "since 2.1.0 use `item-color`"
+                        }],
+                    "text": "Color of the status indicator.\nYou can find a list of all available colors in our documentation.\nExample values are `--theme-color-alarm` or `color-alarm`"
+                },
+                "attribute": "color",
+                "reflect": false
+            },
+            "itemColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "link",
+                            "text": "https://ix.siemens.io/docs/theming/colors/"
+                        }],
+                    "text": "Color of the status indicator.\nYou can find a list of all available colors in our documentation.\nExample values are `--theme-color-alarm` or `color-alarm`"
+                },
+                "attribute": "item-color",
+                "reflect": false
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show event list item as selected"
+                },
+                "attribute": "selected",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disable event list item"
+                },
+                "attribute": "disabled",
+                "reflect": false
+            },
+            "chevron": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show chevron on right side of the event list item"
+                },
+                "attribute": "chevron",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "itemClick",
+                "name": "itemClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event list item click"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleItemClick",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }];
+    }
+}
+//# sourceMappingURL=event-list-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"event-list-item.js","sourceRoot":"","sources":["../../../../src/components/event-list-item/event-list-item.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,GACL,MAAM,eAAe,CAAC;AAOvB,MAAM,OAAO,aAAa;;;;;;;;IA2CxB,eAAe;QACb,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;IACxB,CAAC;IAED,MAAM;;QACJ,IAAI,KAAK,GAAG,CAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,UAAU,CAAC,SAAS,CAAC;YAC/C,CAAC,CAAC,OAAO,IAAI,CAAC,SAAS,GAAG;YAC1B,CAAC,CAAC,eAAe,IAAI,CAAC,SAAS,GAAG,CAAC;QAErC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,KAAK,GAAG,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU,CAAC,SAAS,CAAC;gBACvC,CAAC,CAAC,OAAO,IAAI,CAAC,KAAK,GAAG;gBACtB,CAAC,CAAC,eAAe,IAAI,CAAC,KAAK,GAAG,CAAC;QACnC,CAAC;QAED,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB;YAED,4DACE,KAAK,EAAE;oBACL,iBAAiB,EAAE,IAAI;oBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;oBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;iBACxB;gBAED,4DACE,KAAK,EAAE,aACL,CAAC,CAAC,MAAA,IAAI,CAAC,SAAS,mCAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EACxD,EAAE,EACF,KAAK,EAAE;wBACL,kBAAkB,EAChB,CAAA,MAAA,IAAI,CAAC,SAAS,mCAAI,IAAI,CAAC,KAAK,EAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;wBAClD,OAAO,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE;qBACtC,GACI;gBAEP,4DAAK,KAAK,EAAC,2BAA2B;oBACpC,4DAAK,KAAK,EAAC,eAAe;wBACxB,8DAAa,CACT;oBACL,IAAI,CAAC,OAAO,IAAI,CACf,eACE,IAAI,EAAE,eAAe,EACrB,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,cAAc,GACX,CACZ,CACG,CACF,CACD,CACR,CAAC;IACJ,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  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-event-list-item',\n  styleUrl: 'event-list-item.scss',\n  shadow: true,\n})\nexport class EventListItem {\n  /**\n   * Color of the status indicator.\n   * You can find a list of all available colors in our documentation.\n   * Example values are `--theme-color-alarm` or `color-alarm`\n   *\n   * @link https://ix.siemens.io/docs/theming/colors/\n   *\n   * @deprecated since 2.1.0 use `item-color`\n   */\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  @Prop() color: string;\n\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: boolean;\n\n  /**\n   * Disable event list item\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * Show chevron on right side of the event list item\n   */\n  @Prop() chevron: boolean;\n\n  /**\n   * 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    if (this.color) {\n      color = this.color?.startsWith('--theme')\n        ? `var(${this.color})`\n        : `var(--theme-${this.color})`;\n    }\n\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n        }}\n      >\n        <div\n          class={{\n            'event-list-item': true,\n            selected: this.selected,\n            disabled: this.disabled,\n          }}\n        >\n          <div\n            class={`indicator ${\n              !(this.itemColor ?? this.color) ? 'indicator-empty' : ''\n            }`}\n            style={{\n              'background-color':\n                this.itemColor ?? this.color ? 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={'chevron-right'}\n                size=\"16\"\n                class=\"chevron-icon\"\n              ></ix-icon>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,20 @@
+/*
+ * 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";
+import { EventListItem } from "../event-list-item";
+describe('event-list-item', () => {
+    it('renders', async () => {
+        const page = await newSpecPage({
+            components: [EventListItem],
+            html: '<event-list-item></event-list-item>',
+        });
+        expect(page.root).toEqualHtml('<event-list-item></event-list-item>');
+    });
+});
+//# sourceMappingURL=event-list-item.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"event-list-item.spec.js","sourceRoot":"","sources":["../../../../../src/components/event-list-item/test/event-list-item.spec.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;IAC/B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,aAAa,CAAC;YAC3B,IAAI,EAAE,qCAAqC;SAC5C,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,qCAAqC,CAAC,CAAC;IACvE,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","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';\nimport { EventListItem } from '../event-list-item';\n\ndescribe('event-list-item', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [EventListItem],\n      html: '<event-list-item></event-list-item>',\n    });\n\n    expect(page.root).toEqualHtml('<event-list-item></event-list-item>');\n  });\n});\n"]}

package/dist/collection/components/expanding-search/expanding-search.css

@@ -0,0 +1,412 @@
+/*
+ * 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.
+ */
+/* Dimensions */
+/* Font sizes */
+/* Line heights */
+/* Animation timings */
+/*
+ * 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.
+ */
+/* Dimensions */
+/* Font sizes */
+/* Line heights */
+/* Animation timings */
+/*
+ * 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.
+ */
+.form-control,
+.form-control-plaintext {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.429em;
+  color: var(--theme-color-std-text);
+  color: var(--theme-input--color);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border-radius: var(--theme-input--border-radius);
+  height: 2rem;
+  min-height: 2rem;
+  min-width: 2rem;
+  background-color: var(--theme-input--background);
+  border: solid 1px var(--theme-input--border-color);
+  box-shadow: var(--theme-input--box-shadow);
+  padding-inline-start: 0.5rem;
+  padding-inline-end: 0.5rem;
+}
+.form-control::-moz-placeholder, .form-control-plaintext::-moz-placeholder {
+  color: var(--theme-input-hint--color);
+}
+.form-control::placeholder,
+.form-control-plaintext::placeholder {
+  color: var(--theme-input-hint--color);
+}
+.form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled), .form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+.form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled),
+.form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+.form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover, .form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover, .form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover, .form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-input--background--hover);
+  border-color: var(--theme-input--border-color--hover);
+  cursor: auto;
+}
+.form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover, .form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,
+.form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,
+.form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-input--background--hover);
+  border-color: var(--theme-input--border-color--hover);
+  cursor: auto;
+}
+.form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible, .form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible {
+  background-color: var(--theme-input--background--focus);
+  border-color: var(--theme-input--border-color--focus);
+  outline-offset: var(--theme-input--focus--outline-offset);
+  box-shadow: var(--theme-input--box-shadow);
+  outline: 1px solid var(--theme-color-focus-bdr);
+}
+.form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible,
+.form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible {
+  background-color: var(--theme-input--background--focus);
+  border-color: var(--theme-input--border-color--focus);
+  outline-offset: var(--theme-input--focus--outline-offset);
+  box-shadow: var(--theme-input--box-shadow);
+  outline: 1px solid var(--theme-color-focus-bdr);
+}
+
+.form-control:focus-visible {
+  color: var(--theme-input--color);
+}
+
+.form-control[type=number] {
+  text-align: right;
+}
+.form-control[type=number]::-webkit-inner-spin-button {
+  margin-right: -2px;
+  margin-left: 2px;
+  display: none;
+}
+
+.form-control.readonly,
+.form-control[readonly] {
+  background: transparent !important;
+  border-block-start: none !important;
+  border-inline-start: none !important;
+  border-inline-end: none !important;
+  border-radius: 0rem;
+}
+
+.form-control:-moz-read-only {
+  box-shadow: none !important;
+  outline: none !important;
+  border-color: var(--theme-input--border-color);
+  cursor: default !important;
+}
+
+.form-control:read-only,
+.form-control[readonly],
+.form-control[readOnly],
+.form-control.readonly {
+  box-shadow: none !important;
+  outline: none !important;
+  border-color: var(--theme-input--border-color);
+  cursor: default !important;
+}
+.form-control:read-only::-moz-placeholder, .form-control[readonly]::-moz-placeholder, .form-control[readOnly]::-moz-placeholder, .form-control.readonly::-moz-placeholder {
+  color: transparent;
+}
+.form-control:-moz-read-only::placeholder {
+  color: transparent;
+}
+.form-control:read-only::placeholder,
+.form-control[readonly]::placeholder,
+.form-control[readOnly]::placeholder,
+.form-control.readonly::placeholder {
+  color: transparent;
+}
+
+.form-control:disabled,
+.form-control.disabled {
+  background: transparent !important;
+  border-block-start: none !important;
+  border-inline-start: none !important;
+  border-inline-end: none !important;
+  border-radius: 0rem;
+  color: var(--theme-color-weak-text);
+  border-color: var(--theme-input--border-color-bottom--disabled);
+}
+.form-control:disabled::-moz-placeholder, .form-control.disabled::-moz-placeholder {
+  color: transparent;
+}
+.form-control:disabled::placeholder,
+.form-control.disabled::placeholder {
+  color: transparent;
+}
+
+.form-control-plaintext {
+  outline: 0;
+}
+
+.form-group {
+  position: relative;
+}
+
+.input-wrapper {
+  display: flex;
+  position: relative;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+.input-wrapper > .glyph {
+  display: block;
+  position: absolute;
+  margin-inline-start: 0.312rem;
+  color: var(--theme-color-std-text);
+}
+.input-wrapper > input {
+  padding-inline-start: 2.2rem;
+}
+
+select.form-control {
+  padding: 0 0.312rem;
+}
+
+textarea.form-control {
+  padding: 0.375rem 0.5rem;
+}
+
+input.disabled, input:disabled {
+  color: var(--theme-input--color--disabled);
+}
+input:-moz-read-only {
+  cursor: default;
+}
+input:read-only, input.readonly {
+  cursor: default;
+}
+
+/*
+ * 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.
+ */
+:host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+  display: inline-flex;
+  width: auto;
+  height: 2rem;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  /*collapsed view*/
+  /*expanded view*/
+}
+: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 .input-container {
+  transition: all var(--theme-medium-time) ease-in-out;
+}
+:host input {
+  box-shadow: var(--theme-input--box-shadow);
+  cursor: auto !important;
+  width: 100%;
+}
+:host .expanded {
+  width: 11.5625rem;
+}
+:host .expanded.fullWidth {
+  width: 100%;
+}
+:host .collapsed {
+  width: 1.5rem;
+  border: none;
+}
+:host .btn-search-icon {
+  align-self: center;
+  margin: auto;
+  position: relative;
+}
+:host .btn-search {
+  display: flex;
+  max-width: 2rem;
+  max-height: 2rem;
+  border-radius: var(--theme-input--border-radius);
+  transition: all var(--theme-default-time) ease-in-out;
+  z-index: 1;
+  align-items: center;
+  position: relative;
+  border: none;
+}
+:host .btn-search:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-search:not(.disabled):not(:disabled):hover, :host .btn-search:not(.disabled):not(:disabled):hover {
+  border-color: transparent;
+}
+:host .btn-search:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-search:not(.disabled):not(:disabled):active, :host .btn-search:not(.disabled):not(:disabled).active {
+  border-color: transparent;
+}
+:host .btn-search:not(.disabled):not(:disabled):focus-visible {
+  outline: none;
+}
+:host .btn-search:not(.disabled):not(:disabled):focus-visible {
+  outline: var(--focus--border-color);
+  outline-width: 1px;
+  outline-style: solid;
+}
+:host .btn-search.btn-search--expanded {
+  margin-left: 0.25rem;
+  pointer-events: none;
+}
+:host .btn-search:active {
+  width: 2rem;
+  height: 2rem;
+  border-radius: var(--theme-input--border-radius);
+  border: var(--theme-std-bdr-1) !important;
+}
+:host .input-container {
+  display: flex;
+  position: absolute;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+:host .btn-clear {
+  position: absolute;
+  border-radius: var(--theme-input--border-radius);
+  right: 0px;
+  margin-right: 0.25rem;
+}
+:host .input {
+  padding-left: 2rem !important;
+  padding-right: 2.5rem !important;
+}
+:host .opacity-before {
+  opacity: 0;
+}
+:host .opacity-after {
+  opacity: 1;
+}
+
+:host(.right-position) {
+  width: 11.5625rem !important;
+}
+
+:host(.right-position.fullWidth) {
+  width: 100% !important;
+}
+:host(.right-position.fullWidth) .fullWidth {
+  width: 100% !important;
+}