@siemens/ix 1.6.3 → 2.0.0-beta.1

package/dist/collection/components/push-card/push-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"push-card.js","sourceRoot":"","sources":["../../../src/components/push-card/push-card.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAKzD;;GAEG;AAMH,MAAM,OAAO,QAAQ;;gBAIgB,SAAS;;;;mBAoBT,SAAS;;EAE5C,MAAM;;IACJ,OAAO,CACL,EAAC,IAAI;MACH,eAAS,OAAO,EAAE,IAAI,CAAC,OAAO;QAC5B;UACG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACX,eAAS,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,GAAW,CAC9D,CAAC,CAAC,CAAC,IAAI;UACR,YAAM,KAAK,EAAE,cAAc,IAAG,MAAA,IAAI,CAAC,YAAY,mCAAI,CAAC,CAAQ;UAC5D,YAAM,IAAI,EAAC,cAAc,GAAQ,CACnB;QAChB;UACE,qBAAe,OAAO,EAAC,sBAAsB,IAC1C,IAAI,CAAC,OAAO,CACC;UAChB,yBAAgB,IAAI,CAAC,UAAU,CAAiB,CAChC;QAClB;UACE,eAAa,CACK,CACZ,CACL,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 { Component, h, Host, Prop } from '@stencil/core';\nimport { CardVariant } from '../card/card';\n\nexport type PushCardVariant = CardVariant;\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-push-card',\n  styleUrl: 'push-card.scss',\n  shadow: true,\n})\nexport class PushCard {\n  /**\n   * Card icon\n   */\n  @Prop() icon: string | undefined = undefined;\n\n  /**\n   * Card KPI value\n   */\n  @Prop() notification: string;\n\n  /**\n   * Card heading\n   */\n  @Prop() heading: string;\n\n  /**\n   * Card subheading\n   */\n  @Prop() subheading: string;\n\n  /**\n   * Card variant\n   */\n  @Prop() variant: PushCardVariant = 'insight';\n\n  render() {\n    return (\n      <Host>\n        <ix-card variant={this.variant}>\n          <ix-card-title>\n            {this.icon ? (\n              <ix-icon class={'icon'} name={this.icon} size=\"32\"></ix-icon>\n            ) : null}\n            <span class={'notification'}>{this.notification ?? 0}</span>\n            <slot name=\"title-action\"></slot>\n          </ix-card-title>\n          <ix-card-content>\n            <ix-typography variant=\"default-title-single\">\n              {this.heading}\n            </ix-typography>\n            <ix-typography>{this.subheading}</ix-typography>\n          </ix-card-content>\n          <ix-card-accordion>\n            <slot></slot>\n          </ix-card-accordion>\n        </ix-card>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"push-card.js","sourceRoot":"","sources":["../../../src/components/push-card/push-card.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAMzD;;GAEG;AAMH,MAAM,OAAO,QAAQ;;gBAIgB,SAAS;;;;mBAoBT,SAAS;;EAE5C,MAAM;;IACJ,MAAM,KAAK,GACT,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,KAAK,cAAc;MAC3D,CAAC,CAAC,KAAK;MACP,CAAC,CAAC,SAAS,CAAC;IAEhB,OAAO,CACL,EAAC,IAAI;MACH,eAAS,OAAO,EAAE,IAAI,CAAC,OAAO;QAC5B;UACG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACX,eAAS,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,GAAW,CAC9D,CAAC,CAAC,CAAC,IAAI;UACR,YAAM,KAAK,EAAE,cAAc,IAAG,MAAA,IAAI,CAAC,YAAY,mCAAI,CAAC,CAAQ;UAC5D,YAAM,IAAI,EAAC,cAAc,GAAQ,CACnB;QAChB;UACE,qBAAe,KAAK,EAAE,KAAK,EAAE,MAAM,EAAC,IAAI,IACrC,IAAI,CAAC,OAAO,CACC;UAChB,qBAAe,KAAK,EAAE,KAAK,IAAG,IAAI,CAAC,UAAU,CAAiB,CAC9C;QAClB;UACE,eAAa,CACK,CACZ,CACL,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 { Component, h, Host, Prop } from '@stencil/core';\nimport { CardVariant } from '../card/card';\nimport { TypographyColors } from '../typography/typography';\n\nexport type PushCardVariant = CardVariant;\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-push-card',\n  styleUrl: 'push-card.scss',\n  shadow: true,\n})\nexport class PushCard {\n  /**\n   * Card icon\n   */\n  @Prop() icon: string | undefined = undefined;\n\n  /**\n   * Card KPI value\n   */\n  @Prop() notification: string;\n\n  /**\n   * Card heading\n   */\n  @Prop() heading: string;\n\n  /**\n   * Card subheading\n   */\n  @Prop() subheading: string;\n\n  /**\n   * Card variant\n   */\n  @Prop() variant: PushCardVariant = 'insight';\n\n  render() {\n    const color: TypographyColors =\n      this.variant === 'insight' || this.variant === 'notification'\n        ? 'std'\n        : undefined;\n\n    return (\n      <Host>\n        <ix-card variant={this.variant}>\n          <ix-card-title>\n            {this.icon ? (\n              <ix-icon class={'icon'} name={this.icon} size=\"32\"></ix-icon>\n            ) : null}\n            <span class={'notification'}>{this.notification ?? 0}</span>\n            <slot name=\"title-action\"></slot>\n          </ix-card-title>\n          <ix-card-content>\n            <ix-typography color={color} format=\"h4\">\n              {this.heading}\n            </ix-typography>\n            <ix-typography color={color}>{this.subheading}</ix-typography>\n          </ix-card-content>\n          <ix-card-accordion>\n            <slot></slot>\n          </ix-card-accordion>\n        </ix-card>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/row/row.css

@@ -0,0 +1,17 @@
+/*
+ * 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;
+  flex-wrap: wrap;
+}
+
+:host(:not(:first-of-type)) {
+  -webkit-margin-before: var(--ix-grid-row-margin, 0);
+          margin-block-start: var(--ix-grid-row-margin, 0);
+}

package/dist/collection/components/row/row.js

@@ -0,0 +1,30 @@
+/*
+ * 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';
+/**
+ * @since 2.0.0
+ */
+export class Row {
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  static get is() { return "ix-row"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["row.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["row.css"]
+    };
+  }
+}
+//# sourceMappingURL=row.js.map

package/dist/collection/components/row/row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"row.js","sourceRoot":"","sources":["../../../src/components/row/row.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;GAEG;AAMH,MAAM,OAAO,GAAG;EACd,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,eAAa,CACR,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 { Component, h, Host } from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-row',\n  styleUrl: 'row.scss',\n  shadow: true,\n})\nexport class Row {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/select/select.css

@@ -42,12 +42,64 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 :host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
   display: inline-block;
   position: relative;
   height: auto;
   border-radius: var(--theme-input--border-radius);
 }
+: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 .d-none {
+  display: none;
+}
 :host .select {
   position: relative;
   display: flex;
@@ -62,18 +114,34 @@
 :host .select:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .select:not(.disabled):not(:disabled):hover {
+:host .select:not(.disabled):not(:disabled):hover, :host .select:not(.disabled):not(:disabled):hover {
   background-color: var(--theme-input--background--hover);
   border-color: var(--theme-input--border-color--hover);
 }
 :host .select:focus-within {
   background-color: var(--theme-input--background--focus);
   border-color: var(--theme-input--border-color--focus);
-  outline: 1px solid #119fff !important;
+  outline: 1px solid #119fff;
   outline-offset: var(--theme-input--focus--outline-offset);
 }
 :host .select.readonly {
   box-shadow: none !important;
+  border: none;
+  border-radius: 0px;
+  border-bottom: var(--theme-input--border-thickness) solid var(--theme-color-weak-bdr);
+}
+:host .select.readonly, :host .select.readonly:hover, :host .select.readonly:active {
+  background-color: transparent !important;
+}
+:host .select.readonly:focus, :host .select.readonly:focus-within, :host .select.readonly:focus-visible {
+  outline: none;
+}
+:host .select.readonly input {
+  color: var(--theme-color-weak-text);
+}
+:host .select.readonly input:focus,
+:host .select.readonly input:focus-visible {
+  outline: none;
 }
 :host .hidden {
   display: none !important;
@@ -145,26 +213,26 @@
 :host .chevron-down-container:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .chevron-down-container:not(.disabled):not(:disabled):hover {
+:host .chevron-down-container:not(.disabled):not(:disabled):hover, :host .chevron-down-container:not(.disabled):not(:disabled):hover {
   color: var(--theme-color-dynamic--hover);
 }
 :host .chevron-down-container:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .chevron-down-container:not(.disabled):not(:disabled):active {
+:host .chevron-down-container:not(.disabled):not(:disabled):active, :host .chevron-down-container:not(.disabled):not(:disabled).active {
   color: var(--theme-color-dynamic--hover);
 }
 :host .editable .chevron-down-container:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .editable .chevron-down-container:not(.disabled):not(:disabled):hover {
+:host .editable .chevron-down-container:not(.disabled):not(:disabled):hover, :host .editable .chevron-down-container:not(.disabled):not(:disabled):hover {
   color: var(--theme-color-std-text);
   background-color: var(--theme-btn-invisible-secondary--background--hover);
 }
 :host .editable .chevron-down-container:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .editable .chevron-down-container:not(.disabled):not(:disabled):active {
+:host .editable .chevron-down-container:not(.disabled):not(:disabled):active, :host .editable .chevron-down-container:not(.disabled):not(:disabled).active {
   color: var(--theme-color-std-text);
   background-color: var(--theme-btn-invisible-secondary--background--active);
 }
@@ -183,5 +251,5 @@
   align-items: center;
   height: 2rem;
   color: var(--theme-select-list-item-hint--color);
-  margin: 0 0.5rem 0 2rem;
+  margin: 0 0.5rem 0 1rem;
 }

package/dist/collection/components/select/select.js

@@ -9,7 +9,8 @@
 import { h, Host, } from '@stencil/core';
 export class Select {
   constructor() {
-    this.selectedIndices = [];
+    this.selectedIndices = undefined;
+    this.value = undefined;
     this.allowClear = false;
     this.mode = 'single';
     this.editable = false;
@@ -21,7 +22,7 @@ export class Select {
     this.i18nNoMatches = 'No matches';
     this.hideListHeader = false;
     this.dropdownShow = false;
-    this.value = undefined;
+    this.selectedLabels = undefined;
     this.dropdownWrapperRef = undefined;
     this.dropdownAnchor = undefined;
     this.isDropdownEmpty = false;
@@ -48,35 +49,22 @@ export class Select {
   get isEveryDropdownItemHidden() {
     return this.items.every((item) => item.classList.contains('d-none'));
   }
-  watchSelectedIndices(newId) {
-    if (!newId) {
-      this.selectValue([]);
-      return;
-    }
-    if (Array.isArray(newId)) {
-      this.selectValue([...newId]);
-      return;
-    }
-    this.selectValue([newId]);
+  watchSelectedIndices(value) {
+    this.value = value;
+    this.updateSelection();
+  }
+  watchValue(value) {
+    this.selectedIndices = value;
+    this.updateSelection();
   }
   onItemClicked(event) {
     const newId = event.detail;
-    this.emitItemClick(newId);
+    this.itemClick(newId);
   }
-  emitItemClick(newId) {
-    if (this.isMultipleMode && Array.isArray(this.selectedIndices)) {
-      if (this.selectedIndices.includes(newId)) {
-        this.selectedIndices = this.selectedIndices.filter((i) => i !== newId);
-      }
-      else {
-        this.selectedIndices = [...this.selectedIndices, newId];
-      }
-    }
-    else {
-      this.selectedIndices = [newId];
-    }
-    this.selectValue(this.selectedIndices);
-    this.itemSelectionChange.emit(this.selectedIndices);
+  itemClick(newId) {
+    this.value = this.toggleValue(newId);
+    this.updateSelection();
+    this.emitValueChange();
   }
   emitAddItem(value) {
     if (value.trim() === '') {
@@ -87,34 +75,69 @@ export class Select {
     newItem.label = value;
     this.addItemRef.appendChild(newItem);
     this.clearInput();
-    this.emitItemClick(value);
+    this.itemClick(value);
     this.addItem.emit(value);
   }
-  selectValue(ids) {
+  toggleValue(itemValue) {
+    if (!this.isMultipleMode) {
+      return itemValue;
+    }
+    if (!this.value) {
+      return [itemValue];
+    }
+    let value = this.value;
+    if (!Array.isArray(value)) {
+      value = [value];
+    }
+    if (value.includes(itemValue)) {
+      return value.filter((value) => value !== itemValue);
+    }
+    else {
+      return [...value, itemValue];
+    }
+  }
+  updateSelection() {
     var _a;
+    let ids = [];
+    if (this.value) {
+      ids = Array.isArray(this.value) ? [...this.value] : [this.value];
+    }
     this.items.forEach((item) => {
       item.selected = ids.some((i) => i === item.value);
     });
-    this.value = this.selectedItems.map((item) => item.label);
+    this.selectedLabels = this.selectedItems.map((item) => item.label);
     if (this.isSingleMode) {
-      this.inputValue = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) ? this.value[0] : null;
+      this.inputValue = ((_a = this.selectedLabels) === null || _a === void 0 ? void 0 : _a.length)
+        ? this.selectedLabels[0]
+        : null;
       return;
     }
     this.inputValue = null;
   }
+  emitValueChange() {
+    this.valueChange.emit(this.value);
+    if (!this.value) {
+      this.itemSelectionChange.emit(null);
+    }
+    else {
+      this.itemSelectionChange.emit(Array.isArray(this.value) ? this.value : [this.value]);
+    }
+  }
+  componentDidLoad() {
+    this.inputRef.addEventListener('input', () => {
+      this.inputChange.emit(this.inputRef.value);
+    });
+  }
   componentWillLoad() {
-    if (this.selectedIndices) {
-      this.selectValue(Array.isArray(this.selectedIndices)
-        ? this.selectedIndices
-        : [this.selectedIndices]);
+    if (this.selectedIndices && !this.value) {
+      this.value = this.selectedIndices;
     }
+    this.updateSelection();
   }
   onLabelChange(event) {
     event.preventDefault();
     event.stopImmediatePropagation();
-    this.selectValue(Array.isArray(this.selectedIndices)
-      ? this.selectedIndices
-      : [this.selectedIndices]);
+    this.updateSelection();
   }
   disconnectedCallback() {
     if (this.labelMutationObserver) {
@@ -211,9 +234,9 @@ export class Select {
   }
   clear() {
     this.clearInput();
+    this.selectedLabels = [];
     this.value = [];
-    this.selectedIndices = [];
-    this.itemSelectionChange.emit(null);
+    this.valueChange.emit(null);
     this.dropdownShow = false;
   }
   onInputBlur(e) {
@@ -226,7 +249,7 @@ export class Select {
       }
     }
     if (!this.dropdownShow && this.mode !== 'multiple') {
-      e.target['value'] = this.value;
+      e.target['value'] = this.selectedLabels;
     }
   }
   placeholderValue() {
@@ -238,10 +261,14 @@ export class Select {
     }
     return this.i18nPlaceholder;
   }
+  isAddItemVisible() {
+    return (!this.itemExists(this.inputFilterText) &&
+      this.editable &&
+      this.inputFilterText);
+  }
   render() {
     var _a, _b, _c;
     return (h(Host, null, h("div", { class: {
-        'form-control': true,
         select: true,
         focus: this.hasFocus,
         editable: this.editable,
@@ -255,12 +282,12 @@ export class Select {
       ? (_a = this.selectedItems) === null || _a === void 0 ? void 0 : _a.map((item) => (h("ix-filter-chip", { disabled: this.disabled || this.readonly, key: item.value, onCloseClick: (e) => {
           e.preventDefault();
           e.stopPropagation();
-          this.emitItemClick(item.value);
+          this.itemClick(item.value);
         } }, item.label)))
       : '', h("div", { class: "trigger" }, h("input", { "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, type: "text", class: {
-        'allow-clear': this.allowClear && !!((_b = this.value) === null || _b === void 0 ? void 0 : _b.length),
+        'allow-clear': this.allowClear && !!((_b = this.selectedLabels) === null || _b === void 0 ? void 0 : _b.length),
       }, placeholder: this.placeholderValue(), value: this.inputValue, ref: (ref) => (this.inputRef = ref), onBlur: (e) => this.onInputBlur(e), onInput: () => this.filterItemsWithTypeahead() }), this.allowClear &&
-      (((_c = this.value) === null || _c === void 0 ? void 0 : _c.length) || this.inputFilterText) ? (h("ix-icon-button", { class: "clear", icon: "clear", ghost: true, oval: true, size: "16", onClick: (e) => {
+      (((_c = this.selectedLabels) === null || _c === void 0 ? void 0 : _c.length) || this.inputFilterText) ? (h("ix-icon-button", { class: "clear", icon: "clear", ghost: true, oval: true, size: "16", onClick: (e) => {
         e.preventDefault();
         e.stopPropagation();
         this.clear();
@@ -269,24 +296,23 @@ export class Select {
           this.dropdownWrapperRef = ref;
       } }, h("ix-icon", { class: "chevron", name: "chevron-down-small" }))))))), h("ix-dropdown", { ref: (ref) => (this.dropdownRef = ref), show: this.dropdownShow, closeBehavior: this.isMultipleMode ? 'outside' : 'both', class: {
         'd-none': this.disabled || this.readonly,
-      }, anchor: this.dropdownAnchor, trigger: this.dropdownWrapperRef, onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "auto-start", overwriteDropdownStyle: async () => {
+      }, anchor: this.dropdownAnchor, trigger: this.dropdownWrapperRef, onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "bottom-start", overwriteDropdownStyle: async () => {
         return {
           minWidth: `${this.hostElement.clientWidth}px`,
         };
       } }, h("div", { class: {
         'select-list-header': true,
         hidden: this.hideListHeader || this.isDropdownEmpty,
-      }, title: this.i18nSelectListHeader }, this.i18nSelectListHeader), h("slot", null), h("div", { ref: (ref) => (this.addItemRef = ref), class: "d-contents" }), this.itemExists(this.inputFilterText) ? ('') : (h("ix-dropdown-item", { "data-testid": "add-item", icon: "plus", class: {
+      }, title: this.i18nSelectListHeader }, this.i18nSelectListHeader), h("slot", null), h("div", { ref: (ref) => (this.addItemRef = ref), class: "d-contents" }), this.isAddItemVisible() ? (h("ix-dropdown-item", { "data-testid": "add-item", icon: "plus", class: {
         'add-item': true,
-        'd-none': !(this.editable && this.inputFilterText),
       }, label: this.inputFilterText, onItemClick: (e) => {
         e.preventDefault();
         e.stopPropagation();
         this.emitAddItem(this.inputFilterText);
-      } })), this.isDropdownEmpty && !this.editable ? (h("div", { class: "select-list-header" }, this.i18nNoMatches)) : (''))));
+      } })) : null, this.isDropdownEmpty && !this.editable ? (h("div", { class: "select-list-header" }, this.i18nNoMatches)) : (''))));
   }
   static get is() { return "ix-select"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["select.scss"]
@@ -308,14 +334,36 @@ export class Select {
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
-          "tags": [],
-          "text": "Indices of selected items\nThis corresponds to the value property of ix-select-items and therefor not neccessarily the indices of the items in the list."
+          "tags": [{
+              "name": "deprecated",
+              "text": "since 2.0.0. Use the `value` property instead."
+            }],
+          "text": "Indices of selected items.\nThis corresponds to the value property of ix-select-items and therefor not necessarily the indices of the items in the list."
         },
         "attribute": "selected-indices",
-        "reflect": false,
-        "defaultValue": "[]"
+        "reflect": false
+      },
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string | string[]",
+          "resolved": "string | string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "since",
+              "text": "2.0.0"
+            }],
+          "text": "Current selected value.\nThis corresponds to the value property of ix-select-items"
+        },
+        "attribute": "value",
+        "reflect": false
       },
       "allowClear": {
         "type": "boolean",
@@ -511,7 +559,7 @@ export class Select {
   static get states() {
     return {
       "dropdownShow": {},
-      "value": {},
+      "selectedLabels": {},
       "dropdownWrapperRef": {},
       "dropdownAnchor": {},
       "isDropdownEmpty": {},
@@ -523,18 +571,57 @@ export class Select {
   }
   static get events() {
     return [{
+        "method": "valueChange",
+        "name": "valueChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "since",
+              "text": "2.0.0"
+            }],
+          "text": "Value changed"
+        },
+        "complexType": {
+          "original": "string | string[]",
+          "resolved": "string | string[]",
+          "references": {}
+        }
+      }, {
         "method": "itemSelectionChange",
         "name": "itemSelectionChange",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
-          "tags": [],
+          "tags": [{
+              "name": "deprecated",
+              "text": "since 2.0.0. Use `valueChange` instead."
+            }],
           "text": "Item selection changed"
         },
         "complexType": {
-          "original": "string | string[]",
-          "resolved": "string | string[]",
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        }
+      }, {
+        "method": "inputChange",
+        "name": "inputChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "since",
+              "text": "2.0.0"
+            }],
+          "text": "Event dispatched whenever the text input changes."
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
           "references": {}
         }
       }, {
@@ -559,6 +646,9 @@ export class Select {
     return [{
         "propName": "selectedIndices",
         "methodName": "watchSelectedIndices"
+      }, {
+        "propName": "value",
+        "methodName": "watchValue"
       }];
   }
   static get listeners() {