@siemens/ix 2.0.0-beta.0 → 2.0.0

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

@@ -14,7 +14,19 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 :host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
   display: block;
   position: relative;
 }
@@ -23,6 +35,30 @@
 :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;

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

@@ -46,15 +46,53 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 /* Dimensions */
 /* Font sizes */
 /* Line heights */
 /* Animation timings */
+: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;
@@ -115,25 +153,25 @@
 :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, :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, :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, :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, :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 {

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

@@ -13,7 +13,6 @@ export class EventListItem {
     this.selected = undefined;
     this.disabled = undefined;
     this.chevron = undefined;
-    this.opacity = 1;
   }
   handleItemClick() {
     this.itemClick.emit();
@@ -31,8 +30,8 @@ export class EventListItem {
         disabled: this.disabled,
       } }, h("div", { class: `indicator ${!this.color ? 'indicator-empty' : ''}`, style: {
         'background-color': this.color ? color : 'inherit',
-        opacity: `${this.disabled ? 0.4 : this.opacity}`,
-      } }), h("div", { class: "event-list-item-container" }, h("div", { class: "event-content" }, h("slot", null)), this.chevron && (h("ix-icon", { name: "chevron-right", size: "16", class: "chevron-icon" }))))));
+        opacity: `${this.disabled ? 0.4 : 1}`,
+      } }), h("div", { class: "event-list-item-container" }, h("div", { class: "event-content" }, h("slot", null)), this.chevron && (h("ix-icon", { name: 'chevron-right', size: "16", class: "chevron-icon" }))))));
   }
   static get is() { return "ix-event-list-item"; }
   static get encapsulation() { return "shadow"; }
@@ -118,27 +117,6 @@ export class EventListItem {
         },
         "attribute": "chevron",
         "reflect": false
-      },
-      "opacity": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "Will be removed in 2.0.0"
-            }],
-          "text": "Opacity of the status indicator.\nDefaults to 1.0"
-        },
-        "attribute": "opacity",
-        "reflect": false,
-        "defaultValue": "1"
       }
     };
   }

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

@@ -1 +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;;;;;;mBA+BN,CAAC;;EAQnB,eAAe;IACb,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;EACxB,CAAC;EAED,MAAM;;IACJ,MAAM,KAAK,GAAG,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU,CAAC,SAAS,CAAC;MAC7C,CAAC,CAAC,OAAO,IAAI,CAAC,KAAK,GAAG;MACtB,CAAC,CAAC,eAAe,IAAI,CAAC,KAAK,GAAG,CAAC;IAEjC,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB;MAED,WACE,KAAK,EAAE;UACL,iBAAiB,EAAE,IAAI;UACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;UACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB;QAED,WACE,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,EAAE,EAC1D,KAAK,EAAE;YACL,kBAAkB,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;YAClD,OAAO,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE;WACjD,GACI;QAEP,WAAK,KAAK,EAAC,2BAA2B;UACpC,WAAK,KAAK,EAAC,eAAe;YACxB,eAAa,CACT;UACL,IAAI,CAAC,OAAO,IAAI,CACf,eACE,IAAI,EAAC,eAAe,EACpB,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,cAAc,GACX,CACZ,CACG,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-event-list-item',\n  styleUrl: 'event-list-item.scss',\n  shadow: true,\n})\nexport class EventListItem {\n  /**\n   * Color of the status indicator.\n   * You can find a list of all available colors in our documentation.\n   * Example values are `--theme-color-alarm` or `color-alarm`\n   *\n   * @see https://ix.siemens.io/docs/theming/colors/\n   */\n  @Prop() color: string;\n\n  /**\n   * Show event list item as selected\n   */\n  @Prop() selected: boolean;\n\n  /**\n   * Disable event list item\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * Show chevron on right side of the event list item\n   */\n  @Prop() chevron: boolean;\n\n  /**\n   * Opacity of the status indicator.\n   * Defaults to 1.0\n   *\n   * @deprecated Will be removed in 2.0.0\n   */\n  @Prop() opacity = 1;\n\n  /**\n   * Event list item click\n   */\n  @Event() itemClick: EventEmitter;\n\n  @Listen('click', { passive: true })\n  handleItemClick() {\n    this.itemClick.emit();\n  }\n\n  render() {\n    const color = this.color?.startsWith('--theme')\n      ? `var(${this.color})`\n      : `var(--theme-${this.color})`;\n\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n        }}\n      >\n        <div\n          class={{\n            'event-list-item': true,\n            selected: this.selected,\n            disabled: this.disabled,\n          }}\n        >\n          <div\n            class={`indicator ${!this.color ? 'indicator-empty' : ''}`}\n            style={{\n              'background-color': this.color ? color : 'inherit',\n              opacity: `${this.disabled ? 0.4 : this.opacity}`,\n            }}\n          ></div>\n\n          <div class=\"event-list-item-container\">\n            <div class=\"event-content\">\n              <slot></slot>\n            </div>\n            {this.chevron && (\n              <ix-icon\n                name=\"chevron-right\"\n                size=\"16\"\n                class=\"chevron-icon\"\n              ></ix-icon>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"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;;;;;;;EA+BxB,eAAe;IACb,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;EACxB,CAAC;EAED,MAAM;;IACJ,MAAM,KAAK,GAAG,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU,CAAC,SAAS,CAAC;MAC7C,CAAC,CAAC,OAAO,IAAI,CAAC,KAAK,GAAG;MACtB,CAAC,CAAC,eAAe,IAAI,CAAC,KAAK,GAAG,CAAC;IAEjC,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB;MAED,WACE,KAAK,EAAE;UACL,iBAAiB,EAAE,IAAI;UACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;UACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB;QAED,WACE,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,EAAE,EAC1D,KAAK,EAAE;YACL,kBAAkB,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;YAClD,OAAO,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE;WACtC,GACI;QAEP,WAAK,KAAK,EAAC,2BAA2B;UACpC,WAAK,KAAK,EAAC,eAAe;YACxB,eAAa,CACT;UACL,IAAI,CAAC,OAAO,IAAI,CACf,eACE,IAAI,EAAE,eAAe,EACrB,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,cAAc,GACX,CACZ,CACG,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-event-list-item',\n  styleUrl: 'event-list-item.scss',\n  shadow: true,\n})\nexport class EventListItem {\n  /**\n   * Color of the status indicator.\n   * You can find a list of all available colors in our documentation.\n   * Example values are `--theme-color-alarm` or `color-alarm`\n   *\n   * @see https://ix.siemens.io/docs/theming/colors/\n   */\n  @Prop() color: string;\n\n  /**\n   * Show event list item as selected\n   */\n  @Prop() selected: boolean;\n\n  /**\n   * Disable event list item\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * Show chevron on right side of the event list item\n   */\n  @Prop() chevron: boolean;\n\n  /**\n   * Event list item click\n   */\n  @Event() itemClick: EventEmitter;\n\n  @Listen('click', { passive: true })\n  handleItemClick() {\n    this.itemClick.emit();\n  }\n\n  render() {\n    const color = this.color?.startsWith('--theme')\n      ? `var(${this.color})`\n      : `var(--theme-${this.color})`;\n\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n        }}\n      >\n        <div\n          class={{\n            'event-list-item': true,\n            selected: this.selected,\n            disabled: this.disabled,\n          }}\n        >\n          <div\n            class={`indicator ${!this.color ? 'indicator-empty' : ''}`}\n            style={{\n              'background-color': this.color ? color : 'inherit',\n              opacity: `${this.disabled ? 0.4 : 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/expanding-search/expanding-search.css

@@ -101,12 +101,13 @@
 .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-plaintext: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: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: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);
@@ -251,6 +252,12 @@ textarea.form-control {
 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: 2023 Siemens AG
@@ -276,7 +283,19 @@ input.disabled, input:disabled {
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 :host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
   display: inline-flex;
   width: auto;
   height: 2rem;
@@ -291,6 +310,30 @@ input.disabled, input:disabled {
 :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 0.3s ease-in-out;
 }
@@ -328,13 +371,13 @@ input.disabled, input:disabled {
 :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, :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, :host .btn-search:not(.disabled):not(:disabled).active {
   border-color: transparent;
 }
 :host .btn-search:not(.disabled):not(:disabled):focus-visible {

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

@@ -74,7 +74,7 @@ export class ExpandingSearch {
       }, ref: (el) => (this.textInput = el), "data-testid": "input", placeholder: this.placeholder, type: "text", value: this.value, onBlur: () => {
         this.collapseInput();
         this.hasFocus = false;
-      }, onFocus: () => (this.hasFocus = true), onInput: (e) => this.onChange(e), tabindex: this.expanded ? 0 : -1 }), this.isFieldChanged ? (h("ix-icon-button", { class: "btn-clear", icon: "clear", ghost: true, size: "16", "data-testid": "clear-button", onClick: () => this.clearClicked() })) : null)));
+      }, onFocus: () => (this.hasFocus = true), onInput: (e) => this.onChange(e), tabindex: this.expanded ? 0 : -1 }), this.isFieldChanged ? (h("ix-icon-button", { class: "btn-clear", icon: 'clear', ghost: true, size: "16", "data-testid": "clear-button", onClick: () => this.clearClicked() })) : null)));
   }
   static get is() { return "ix-expanding-search"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/expanding-search/expanding-search.js.map

@@ -1 +1 @@
-{"version":3,"file":"expanding-search.js","sourceRoot":"","sources":["../../../src/components/expanding-search/expanding-search.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 {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-expanding-search',\n  styleUrl: 'expanding-search.scss',\n  shadow: true,\n})\nexport class ExpandingSearch {\n  /**\n   * Search icon\n   */\n  @Prop() icon = 'search';\n\n  /**\n   * Placeholder text\n   */\n  @Prop() placeholder = 'Enter text here';\n\n  /**\n   * Default value\n   */\n  @Prop({ mutable: true }) value = '';\n\n  /**\n   * If true the search field will fill all available horizontal space of it's parent container when expanded.\n   * @since 1.6.0\n   */\n  @Prop() fullWidth = false;\n\n  @State() isFieldChanged = false;\n  @State() expanded = false;\n  @State() hasFocus = false;\n\n  /**\n   * Value changed\n   */\n  @Event() valueChange: EventEmitter<string>;\n\n  private expandInput() {\n    setTimeout(this.focusTextInput, 300);\n    this.expanded = true;\n  }\n\n  private collapseInput() {\n    if (!this.isFieldChanged && this.expanded) {\n      this.expanded = false;\n    }\n  }\n\n  private clearInput() {\n    this.value = '';\n    this.isFieldChanged = false;\n  }\n\n  private onChange(e: InputEvent) {\n    this.value = (e.target as HTMLInputElement).value;\n    if (this.isFieldChanged && this.value === '') {\n      this.isFieldChanged = false;\n    } else {\n      this.isFieldChanged = true;\n    }\n\n    this.valueChange.emit(this.value);\n  }\n\n  private textInput?: HTMLInputElement;\n\n  constructor() {\n    this.focusTextInput = this.focusTextInput.bind(this);\n  }\n\n  private focusTextInput() {\n    this.textInput?.focus();\n  }\n\n  private clearClicked() {\n    this.clearInput();\n    this.textInput?.focus();\n    this.valueChange.emit(this.value);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          expanded: this.expanded,\n          'right-position': this.expanded,\n          fullWidth: this.fullWidth,\n        }}\n      >\n        <ix-icon-button\n          size={this.expanded ? '16' : '24'}\n          icon={this.icon}\n          ghost\n          variant=\"primary\"\n          data-testid=\"button\"\n          onClick={() => this.expandInput()}\n          tabindex={this.expanded ? -1 : 0}\n          color={this.hasFocus ? 'input-search-icon--color--focus' : undefined}\n          class={{\n            'btn-search': true,\n            'btn-search--expanded': this.expanded,\n          }}\n        ></ix-icon-button>\n\n        <div\n          class={{\n            expanded: this.expanded,\n            fullWidth: this.fullWidth,\n            collapsed: !this.expanded,\n            'disable-pointer': !this.expanded,\n            'input-container': true,\n          }}\n          data-testid=\"input-wrapper\"\n        >\n          <input\n            class={{\n              'form-control': true,\n              input: this.expanded,\n              'disable-pointer': !this.expanded,\n              'opacity-before': !this.expanded,\n              'opacity-after': this.expanded,\n            }}\n            ref={(el) => (this.textInput = el)}\n            data-testid=\"input\"\n            placeholder={this.placeholder}\n            type=\"text\"\n            value={this.value}\n            onBlur={() => {\n              this.collapseInput();\n              this.hasFocus = false;\n            }}\n            onFocus={() => (this.hasFocus = true)}\n            onInput={(e: InputEvent) => this.onChange(e)}\n            tabindex={this.expanded ? 0 : -1}\n          />\n\n          {this.isFieldChanged ? (\n            <ix-icon-button\n              class=\"btn-clear\"\n              icon=\"clear\"\n              ghost={true}\n              size=\"16\"\n              data-testid=\"clear-button\"\n              onClick={() => this.clearClicked()}\n            />\n          ) : null}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"expanding-search.js","sourceRoot":"","sources":["../../../src/components/expanding-search/expanding-search.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 {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-expanding-search',\n  styleUrl: 'expanding-search.scss',\n  shadow: true,\n})\nexport class ExpandingSearch {\n  /**\n   * Search icon\n   */\n  @Prop() icon = 'search';\n\n  /**\n   * Placeholder text\n   */\n  @Prop() placeholder = 'Enter text here';\n\n  /**\n   * Default value\n   */\n  @Prop({ mutable: true }) value = '';\n\n  /**\n   * If true the search field will fill all available horizontal space of it's parent container when expanded.\n   * @since 1.6.0\n   */\n  @Prop() fullWidth = false;\n\n  @State() isFieldChanged = false;\n  @State() expanded = false;\n  @State() hasFocus = false;\n\n  /**\n   * Value changed\n   */\n  @Event() valueChange: EventEmitter<string>;\n\n  private expandInput() {\n    setTimeout(this.focusTextInput, 300);\n    this.expanded = true;\n  }\n\n  private collapseInput() {\n    if (!this.isFieldChanged && this.expanded) {\n      this.expanded = false;\n    }\n  }\n\n  private clearInput() {\n    this.value = '';\n    this.isFieldChanged = false;\n  }\n\n  private onChange(e: InputEvent) {\n    this.value = (e.target as HTMLInputElement).value;\n    if (this.isFieldChanged && this.value === '') {\n      this.isFieldChanged = false;\n    } else {\n      this.isFieldChanged = true;\n    }\n\n    this.valueChange.emit(this.value);\n  }\n\n  private textInput?: HTMLInputElement;\n\n  constructor() {\n    this.focusTextInput = this.focusTextInput.bind(this);\n  }\n\n  private focusTextInput() {\n    this.textInput?.focus();\n  }\n\n  private clearClicked() {\n    this.clearInput();\n    this.textInput?.focus();\n    this.valueChange.emit(this.value);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          expanded: this.expanded,\n          'right-position': this.expanded,\n          fullWidth: this.fullWidth,\n        }}\n      >\n        <ix-icon-button\n          size={this.expanded ? '16' : '24'}\n          icon={this.icon}\n          ghost\n          variant=\"primary\"\n          data-testid=\"button\"\n          onClick={() => this.expandInput()}\n          tabindex={this.expanded ? -1 : 0}\n          color={this.hasFocus ? 'input-search-icon--color--focus' : undefined}\n          class={{\n            'btn-search': true,\n            'btn-search--expanded': this.expanded,\n          }}\n        ></ix-icon-button>\n\n        <div\n          class={{\n            expanded: this.expanded,\n            fullWidth: this.fullWidth,\n            collapsed: !this.expanded,\n            'disable-pointer': !this.expanded,\n            'input-container': true,\n          }}\n          data-testid=\"input-wrapper\"\n        >\n          <input\n            class={{\n              'form-control': true,\n              input: this.expanded,\n              'disable-pointer': !this.expanded,\n              'opacity-before': !this.expanded,\n              'opacity-after': this.expanded,\n            }}\n            ref={(el) => (this.textInput = el)}\n            data-testid=\"input\"\n            placeholder={this.placeholder}\n            type=\"text\"\n            value={this.value}\n            onBlur={() => {\n              this.collapseInput();\n              this.hasFocus = false;\n            }}\n            onFocus={() => (this.hasFocus = true)}\n            onInput={(e: InputEvent) => this.onChange(e)}\n            tabindex={this.expanded ? 0 : -1}\n          />\n\n          {this.isFieldChanged ? (\n            <ix-icon-button\n              class=\"btn-clear\"\n              icon={'clear'}\n              ghost={true}\n              size=\"16\"\n              data-testid=\"clear-button\"\n              onClick={() => this.clearClicked()}\n            />\n          ) : null}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/filter-chip/filter-chip.css

@@ -42,8 +42,20 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 :host {
-  display: flex;
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+  display: inline-flex;
   align-items: center;
   justify-content: space-between;
   height: 1.5rem;
@@ -58,6 +70,30 @@
 :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 .slot-container {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -76,6 +112,17 @@
   outline: none;
 }
 
+:host(.disabled) {
+  border: var(--theme-focus--border-thickness) solid var(--theme-color-component-4);
+  color: var(--theme-color-weak-text);
+  padding-right: 0.5rem;
+  cursor: default;
+}
+
+:host(.readonly) {
+  padding-right: 0.5rem;
+}
+
 :host(:not(.disabled):not(:disabled)) {
   cursor: pointer;
 }

package/dist/collection/components/filter-chip/filter-chip.js

@@ -10,6 +10,7 @@ import { h, Host, } from '@stencil/core';
 export class FilterChip {
   constructor() {
     this.disabled = false;
+    this.readonly = false;
   }
   onCloseClick(event) {
     event.preventDefault();
@@ -17,7 +18,7 @@ export class FilterChip {
     this.closeClick.emit();
   }
   render() {
-    return (h(Host, { class: { disabled: this.disabled }, title: this.el.textContent }, h("div", { class: "slot-container" }, h("slot", null)), h("ix-icon-button", { ghost: true, oval: true, icon: "close-small", size: "16", tabindex: this.disabled ? -1 : 0, variant: "primary", disabled: this.disabled, onClick: (e) => this.onCloseClick(e) })));
+    return (h(Host, { class: { disabled: this.disabled, readonly: this.readonly }, title: this.el.textContent }, h("div", { class: "slot-container" }, h("slot", null)), !this.disabled && !this.readonly ? (h("ix-icon-button", { ghost: true, oval: true, icon: 'close-small', size: "16", tabindex: this.disabled ? -1 : 0, variant: "primary", disabled: this.disabled, onClick: (e) => this.onCloseClick(e) })) : null));
   }
   static get is() { return "ix-filter-chip"; }
   static get encapsulation() { return "shadow"; }
@@ -50,6 +51,27 @@ export class FilterChip {
         "attribute": "disabled",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "since",
+              "text": "2.0.0"
+            }],
+          "text": "If true the filter chip will be in readonly mode"
+        },
+        "attribute": "readonly",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

package/dist/collection/components/filter-chip/filter-chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-chip.js","sourceRoot":"","sources":["../../../src/components/filter-chip/filter-chip.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,GACL,MAAM,eAAe,CAAC;AAOvB,MAAM,OAAO,UAAU;;oBAMF,KAAK;;EAOhB,YAAY,CAAC,KAAY;IAC/B,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,KAAK,CAAC,eAAe,EAAE,CAAC;IACxB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;EACzB,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,WAAW;MAClE,WAAK,KAAK,EAAC,gBAAgB;QACzB,eAAa,CACT;MACN,sBACE,KAAK,QACL,IAAI,QACJ,IAAI,EAAC,aAAa,EAClB,IAAI,EAAC,IAAI,EACT,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAChC,OAAO,EAAC,SAAS,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GACpB,CACb,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-filter-chip',\n  styleUrl: 'filter-chip.scss',\n  shadow: true,\n})\nexport class FilterChip {\n  @Element() el: HTMLIxFilterChipElement;\n\n  /**\n   * If true the filter chip will be in disabled state\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Close clicked\n   */\n  @Event() closeClick: EventEmitter<void>;\n\n  private onCloseClick(event: Event) {\n    event.preventDefault();\n    event.stopPropagation();\n    this.closeClick.emit();\n  }\n\n  render() {\n    return (\n      <Host class={{ disabled: this.disabled }} title={this.el.textContent}>\n        <div class=\"slot-container\">\n          <slot></slot>\n        </div>\n        <ix-icon-button\n          ghost\n          oval\n          icon=\"close-small\"\n          size=\"16\"\n          tabindex={this.disabled ? -1 : 0}\n          variant=\"primary\"\n          disabled={this.disabled}\n          onClick={(e) => this.onCloseClick(e)}\n        ></ix-icon-button>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"filter-chip.js","sourceRoot":"","sources":["../../../src/components/filter-chip/filter-chip.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,GACL,MAAM,eAAe,CAAC;AAOvB,MAAM,OAAO,UAAU;;oBAMF,KAAK;oBAML,KAAK;;EAOhB,YAAY,CAAC,KAAY;IAC/B,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,KAAK,CAAC,eAAe,EAAE,CAAC;IACxB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;EACzB,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAC3D,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,WAAW;MAE1B,WAAK,KAAK,EAAC,gBAAgB;QACzB,eAAa,CACT;MACL,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAClC,sBACE,KAAK,QACL,IAAI,QACJ,IAAI,EAAE,aAAa,EACnB,IAAI,EAAC,IAAI,EACT,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAChC,OAAO,EAAC,SAAS,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GACpB,CACnB,CAAC,CAAC,CAAC,IAAI,CACH,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-filter-chip',\n  styleUrl: 'filter-chip.scss',\n  shadow: true,\n})\nexport class FilterChip {\n  @Element() el: HTMLIxFilterChipElement;\n\n  /**\n   * If true the filter chip will be in disabled state\n   */\n  @Prop() disabled = false;\n\n  /**\n   * If true the filter chip will be in readonly mode\n   * @since 2.0.0\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Close clicked\n   */\n  @Event() closeClick: EventEmitter<void>;\n\n  private onCloseClick(event: Event) {\n    event.preventDefault();\n    event.stopPropagation();\n    this.closeClick.emit();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{ disabled: this.disabled, readonly: this.readonly }}\n        title={this.el.textContent}\n      >\n        <div class=\"slot-container\">\n          <slot></slot>\n        </div>\n        {!this.disabled && !this.readonly ? (\n          <ix-icon-button\n            ghost\n            oval\n            icon={'close-small'}\n            size=\"16\"\n            tabindex={this.disabled ? -1 : 0}\n            variant=\"primary\"\n            disabled={this.disabled}\n            onClick={(e) => this.onCloseClick(e)}\n          ></ix-icon-button>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"]}