@siemens/ix 1.5.0-beta.1 → 1.5.0-beta.3

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

@@ -18,6 +18,8 @@ export class Select {
     this.i18nPlaceholder = 'Select an option';
     this.i18nPlaceholderEditable = 'Type of select option';
     this.i18nSelectListHeader = 'Please select an option';
+    this.i18nNoMatches = 'No matches';
+    this.hideListHeader = false;
     this.dropdownShow = false;
     this.value = undefined;
     this.dropdownWrapperRef = undefined;
@@ -43,6 +45,9 @@ export class Select {
   get isMultipleMode() {
     return this.mode === 'multiple';
   }
+  get isEveryDropdownItemHidden() {
+    return this.items.every((item) => item.classList.contains('d-none'));
+  }
   watchSelectedIndices(newId) {
     if (!newId) {
       this.selectValue([]);
@@ -58,14 +63,6 @@ export class Select {
     const newId = event.detail;
     this.emitItemClick(newId);
   }
-  watchInputText(newValue) {
-    if (!this.editable) {
-      return;
-    }
-    if (this.itemExists(newValue)) {
-      return;
-    }
-  }
   emitItemClick(newId) {
     if (this.isMultipleMode && Array.isArray(this.selectedIndices)) {
       if (this.selectedIndices.includes(newId)) {
@@ -85,10 +82,10 @@ export class Select {
     if (value.trim() === '') {
       return;
     }
-    const test = document.createElement('ix-select-item');
-    test.value = value;
-    test.label = value;
-    this.addItemRef.appendChild(test);
+    const newItem = document.createElement('ix-select-item');
+    newItem.value = value;
+    newItem.label = value;
+    this.addItemRef.appendChild(newItem);
     this.clearInput();
     this.emitItemClick(value);
     this.addItem.emit(value);
@@ -129,14 +126,16 @@ export class Select {
   }
   dropdownVisibilityChanged(event) {
     this.dropdownShow = event.detail;
+    this.hasFocus = event.detail;
     if (event.detail) {
       this.inputRef.focus();
       this.inputRef.select();
-      this.navigationItem = this.items[0];
-      this.setHoverEffectForNavigatedSelectItem();
       this.removeHiddenFromItems();
+      this.isDropdownEmpty = this.isEveryDropdownItemHidden;
+    }
+    else {
+      this.navigationItem = undefined;
     }
-    this.hasFocus = event.detail;
   }
   async onKeyDown(event) {
     if (!this.dropdownShow) {
@@ -170,6 +169,8 @@ export class Select {
   onArrowNavigation(event) {
     event.stopPropagation();
     event.preventDefault();
+    const focusItem = this.items.find((item) => document.activeElement === item.querySelector('button'));
+    this.navigationItem = focusItem;
     const selectItems = this.items.filter((i) => !i.classList.contains('d-none'));
     const index = selectItems.indexOf(this.navigationItem);
     if (event.code === 'ArrowDown' && index < selectItems.length - 1) {
@@ -181,9 +182,8 @@ export class Select {
     this.setHoverEffectForNavigatedSelectItem();
   }
   setHoverEffectForNavigatedSelectItem() {
-    this.items.forEach((item) => {
-      item.hover = item === this.navigationItem;
-    });
+    var _a;
+    (_a = this.navigationItem) === null || _a === void 0 ? void 0 : _a.querySelector('button').focus();
   }
   filterItemsWithTypeahead() {
     this.inputFilterText = this.inputRef.value;
@@ -198,7 +198,7 @@ export class Select {
     else {
       this.removeHiddenFromItems();
     }
-    this.isDropdownEmpty = this.items.every((item) => item.classList.contains('d-none'));
+    this.isDropdownEmpty = this.isEveryDropdownItemHidden;
   }
   removeHiddenFromItems() {
     this.items.forEach((item) => {
@@ -216,6 +216,28 @@ export class Select {
     this.itemSelectionChange.emit(null);
     this.dropdownShow = false;
   }
+  onInputBlur(e) {
+    if (this.editable) {
+      return;
+    }
+    if (this.isSingleMode) {
+      if (this.dropdownShow && this.isDropdownEmpty) {
+        this.dropdownShow = false;
+      }
+    }
+    if (!this.dropdownShow && this.mode !== 'multiple') {
+      e.target['value'] = this.value;
+    }
+  }
+  placeholderValue() {
+    if (this.editable) {
+      return this.i18nPlaceholderEditable;
+    }
+    if (this.readonly) {
+      return '';
+    }
+    return this.i18nPlaceholder;
+  }
   render() {
     var _a, _b, _c;
     return (h(Host, null, h("div", { class: {
@@ -237,11 +259,8 @@ export class Select {
         } }, 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),
-      }, placeholder: this.editable
-        ? this.i18nPlaceholderEditable
-        : this.i18nPlaceholder, value: this.inputValue, ref: (ref) => (this.inputRef = ref), onInput: () => this.filterItemsWithTypeahead() }), this.isMultipleMode &&
-      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: "24", onClick: (e) => {
+      }, 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) => {
         e.preventDefault();
         e.stopPropagation();
         this.clear();
@@ -249,21 +268,22 @@ export class Select {
         if (this.editable)
           this.dropdownWrapperRef = ref;
       } }, h("ix-icon", { class: "chevron", name: "chevron-down-small" }))))))), h("ix-dropdown", { ref: (ref) => (this.dropdownRef = ref), show: this.dropdownShow, class: {
-        'd-none': this.disabled ||
-          this.readonly ||
-          (this.isDropdownEmpty && !this.editable),
+        'd-none': this.disabled || this.readonly,
       }, anchor: this.dropdownAnchor, trigger: this.dropdownWrapperRef, onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "auto-start", overwriteDropdownStyle: async () => {
         return {
-          width: `${this.hostElement.clientWidth}px`,
+          minWidth: `${this.hostElement.clientWidth}px`,
         };
-      } }, h("div", { class: "select-list-header", 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: {
+      } }, 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: {
         '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)) : (''))));
   }
   static get is() { return "ix-select"; }
   static get encapsulation() { return "scoped"; }
@@ -291,7 +311,7 @@ export class Select {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Indices of selected items"
+          "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."
         },
         "attribute": "selected-indices",
         "reflect": false,
@@ -440,6 +460,51 @@ export class Select {
         "attribute": "i-1-8n-select-list-header",
         "reflect": false,
         "defaultValue": "'Please select an option'"
+      },
+      "i18nNoMatches": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "since",
+              "text": "1.5.0"
+            }],
+          "text": "Hint inside of dropdown if no items where found with current filter text"
+        },
+        "attribute": "i-1-8n-no-matches",
+        "reflect": false,
+        "defaultValue": "'No matches'"
+      },
+      "hideListHeader": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "since",
+              "text": "1.5.0"
+            }, {
+              "name": "",
+              "text": undefined
+            }],
+          "text": "Hide list header"
+        },
+        "attribute": "hide-list-header",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
@@ -494,9 +559,6 @@ export class Select {
     return [{
         "propName": "selectedIndices",
         "methodName": "watchSelectedIndices"
-      }, {
-        "propName": "inputFilterText",
-        "methodName": "watchInputText"
       }];
   }
   static get listeners() {

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

@@ -1 +1 @@
-{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../src/components/select/select.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  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { IxSelectItemLabelChangeEvent } from '../select-item/events';\n\n@Component({\n  tag: 'ix-select',\n  styleUrl: 'select.scss',\n  scoped: true,\n})\nexport class Select {\n  @Element() hostElement!: HTMLIxSelectElement;\n\n  /**\n   * Indices of selected items\n   */\n  @Prop({ mutable: true }) selectedIndices: string | string[] = [];\n\n  /**\n   * Show clear button\n   */\n  @Prop() allowClear = false;\n\n  /**\n   * Selection mode\n   */\n  @Prop() mode: 'single' | 'multiple' = 'single';\n\n  /**\n   * Select is extendable\n   */\n  @Prop() editable = false;\n\n  /**\n   * If true the select will be in disabled state\n   */\n  @Prop() disabled = false;\n\n  /**\n   * If true the select will be in readonly mode\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Input field placeholder\n   */\n  @Prop() i18nPlaceholder = 'Select an option';\n\n  /**\n   * Input field placeholder for editable select\n   */\n  @Prop() i18nPlaceholderEditable = 'Type of select option';\n\n  /**\n   * Select list header\n   */\n  @Prop() i18nSelectListHeader = 'Please select an option';\n\n  /**\n   * Item selection changed\n   */\n  @Event() itemSelectionChange: EventEmitter<string | string[]>;\n\n  /**\n   * Item added to selection\n   */\n  @Event() addItem: EventEmitter<string>;\n\n  @State() dropdownShow = false;\n  @State() value: string[];\n  @State() dropdownWrapperRef!: HTMLElement;\n  @State() dropdownAnchor!: HTMLElement;\n  @State() isDropdownEmpty = false;\n  @State() hasFocus = false;\n  @State() navigationItem: HTMLIxSelectItemElement;\n  @State() inputFilterText: string;\n  @State() inputValue: string;\n\n  private inputRef!: HTMLInputElement;\n  private dropdownRef!: HTMLIxDropdownElement;\n  private addItemRef!: HTMLDivElement;\n\n  private labelMutationObserver: MutationObserver;\n\n  get items() {\n    return Array.from(this.hostElement.querySelectorAll('ix-select-item'));\n  }\n\n  get selectedItems() {\n    return this.items.filter((item) => item.selected);\n  }\n\n  get addItemButton() {\n    return this.hostElement.querySelector('.add-item');\n  }\n\n  get isSingleMode() {\n    return this.mode === 'single';\n  }\n\n  get isMultipleMode() {\n    return this.mode === 'multiple';\n  }\n\n  @Watch('selectedIndices')\n  watchSelectedIndices(newId: string | string[]) {\n    if (!newId) {\n      this.selectValue([]);\n      return;\n    }\n\n    if (Array.isArray(newId)) {\n      this.selectValue([...newId]);\n      return;\n    }\n\n    this.selectValue([newId]);\n  }\n\n  @Listen('itemClick')\n  onItemClicked(event: CustomEvent<string>) {\n    const newId = event.detail;\n    this.emitItemClick(newId);\n  }\n\n  @Watch('inputFilterText')\n  watchInputText(newValue: string) {\n    if (!this.editable) {\n      return;\n    }\n\n    if (this.itemExists(newValue)) {\n      return;\n    }\n  }\n\n  private emitItemClick(newId: string) {\n    if (this.isMultipleMode && Array.isArray(this.selectedIndices)) {\n      if (this.selectedIndices.includes(newId)) {\n        this.selectedIndices = this.selectedIndices.filter((i) => i !== newId);\n      } else {\n        this.selectedIndices = [...this.selectedIndices, newId];\n      }\n    } else {\n      this.selectedIndices = [newId];\n    }\n\n    this.selectValue(this.selectedIndices);\n    this.itemSelectionChange.emit(this.selectedIndices);\n  }\n\n  private emitAddItem(value: string) {\n    if (value.trim() === '') {\n      return;\n    }\n\n    const test = document.createElement('ix-select-item');\n    test.value = value;\n    test.label = value;\n\n    this.addItemRef.appendChild(test);\n\n    this.clearInput();\n    this.emitItemClick(value);\n    this.addItem.emit(value);\n  }\n\n  private selectValue(ids: string[]) {\n    this.items.forEach((item) => {\n      item.selected = ids.some((i) => i === item.value);\n    });\n\n    this.value = this.selectedItems.map((item) => item.label);\n\n    if (this.isSingleMode) {\n      this.inputValue = this.value?.length ? this.value[0] : null;\n      return;\n    }\n\n    this.inputValue = null;\n  }\n\n  componentWillLoad() {\n    if (this.selectedIndices) {\n      this.selectValue(\n        Array.isArray(this.selectedIndices)\n          ? this.selectedIndices\n          : [this.selectedIndices]\n      );\n    }\n  }\n\n  @Listen('ix-select-item:labelChange')\n  onLabelChange(event: IxSelectItemLabelChangeEvent) {\n    event.preventDefault();\n    event.stopImmediatePropagation();\n    this.selectValue(\n      Array.isArray(this.selectedIndices)\n        ? this.selectedIndices\n        : [this.selectedIndices]\n    );\n  }\n\n  disconnectedCallback() {\n    if (this.labelMutationObserver) {\n      this.labelMutationObserver.disconnect();\n    }\n  }\n\n  private itemExists(item: string) {\n    return this.items.find((i) => i.label === item);\n  }\n\n  private dropdownVisibilityChanged(event: CustomEvent<boolean>) {\n    this.dropdownShow = event.detail;\n\n    if (event.detail) {\n      this.inputRef.focus();\n      this.inputRef.select();\n\n      this.navigationItem = this.items[0];\n      this.setHoverEffectForNavigatedSelectItem();\n      this.removeHiddenFromItems();\n    }\n    this.hasFocus = event.detail;\n  }\n\n  @Listen('keydown', {\n    target: 'window',\n  })\n  async onKeyDown(event: KeyboardEvent) {\n    if (!this.dropdownShow) {\n      return;\n    }\n\n    if (event.code === 'ArrowDown' || event.code === 'ArrowUp') {\n      this.onArrowNavigation(event);\n    }\n\n    if (event.code === 'Enter' || event.code === 'NumpadEnter') {\n      await this.onEnterNavigation();\n    }\n\n    if (event.code === 'Escape') {\n      this.dropdownShow = false;\n    }\n  }\n\n  private async onEnterNavigation() {\n    if (this.isMultipleMode) {\n      return;\n    }\n\n    if (this.editable && !this.itemExists(this.inputFilterText)) {\n      this.emitAddItem(this.inputFilterText);\n      this.navigationItem = this.items[this.items.length - 1];\n    }\n\n    this.navigationItem?.onItemClick();\n    await this.dropdownRef?.updatePosition();\n\n    if (this.isSingleMode && !this.editable) {\n      this.dropdownShow = false;\n    }\n  }\n\n  private onArrowNavigation(event: KeyboardEvent) {\n    event.stopPropagation();\n    event.preventDefault();\n\n    const selectItems = this.items.filter(\n      (i) => !i.classList.contains('d-none')\n    );\n\n    const index = selectItems.indexOf(this.navigationItem);\n\n    if (event.code === 'ArrowDown' && index < selectItems.length - 1) {\n      this.navigationItem = selectItems[index + 1];\n    } else if (event.code === 'ArrowUp' && index > 0) {\n      this.navigationItem = selectItems[index - 1];\n    }\n\n    this.setHoverEffectForNavigatedSelectItem();\n  }\n\n  private setHoverEffectForNavigatedSelectItem() {\n    this.items.forEach((item: HTMLIxSelectItemElement) => {\n      item.hover = item === this.navigationItem;\n    });\n  }\n\n  private filterItemsWithTypeahead() {\n    this.inputFilterText = this.inputRef.value;\n    if (this.inputFilterText) {\n      this.items.forEach((item) => {\n        item.classList.remove('d-none');\n        if (\n          !item.label.toLowerCase().includes(this.inputFilterText.toLowerCase())\n        ) {\n          item.classList.add('d-none');\n        }\n      });\n    } else {\n      this.removeHiddenFromItems();\n    }\n    this.isDropdownEmpty = this.items.every((item) =>\n      item.classList.contains('d-none')\n    );\n  }\n\n  private removeHiddenFromItems() {\n    this.items.forEach((item) => {\n      item.classList.remove('d-none');\n    });\n  }\n\n  private clearInput() {\n    this.inputRef.value = '';\n    this.inputFilterText = '';\n  }\n\n  private clear() {\n    this.clearInput();\n    this.value = [];\n    this.selectedIndices = [];\n    this.itemSelectionChange.emit(null);\n    this.dropdownShow = false;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'form-control': true,\n            select: true,\n            focus: this.hasFocus,\n            editable: this.editable,\n            disabled: this.disabled,\n            readonly: this.readonly,\n          }}\n          ref={(ref) => {\n            this.dropdownAnchor = ref;\n            if (!this.editable) this.dropdownWrapperRef = ref;\n          }}\n        >\n          <div class=\"input-container\">\n            <div class=\"chips\">\n              {this.isMultipleMode\n                ? this.selectedItems?.map((item) => (\n                    <ix-filter-chip\n                      disabled={this.disabled || this.readonly}\n                      key={item.value}\n                      onCloseClick={(e) => {\n                        e.preventDefault();\n                        e.stopPropagation();\n                        this.emitItemClick(item.value);\n                      }}\n                    >\n                      {item.label}\n                    </ix-filter-chip>\n                  ))\n                : ''}\n              <div class=\"trigger\">\n                <input\n                  data-testid=\"input\"\n                  disabled={this.disabled}\n                  readOnly={this.readonly}\n                  type=\"text\"\n                  class={{\n                    'allow-clear': this.allowClear && !!this.value?.length,\n                  }}\n                  placeholder={\n                    this.editable\n                      ? this.i18nPlaceholderEditable\n                      : this.i18nPlaceholder\n                  }\n                  value={this.inputValue}\n                  ref={(ref) => (this.inputRef = ref)}\n                  onInput={() => this.filterItemsWithTypeahead()}\n                />\n                {this.isMultipleMode &&\n                this.allowClear &&\n                (this.value?.length || this.inputFilterText) ? (\n                  <ix-icon-button\n                    class=\"clear\"\n                    icon=\"clear\"\n                    ghost\n                    oval\n                    size=\"24\"\n                    onClick={(e) => {\n                      e.preventDefault();\n                      e.stopPropagation();\n                      this.clear();\n                    }}\n                  />\n                ) : null}\n                {this.disabled || this.readonly ? null : (\n                  <div\n                    class=\"chevron-down-container\"\n                    ref={(ref) => {\n                      if (this.editable) this.dropdownWrapperRef = ref;\n                    }}\n                  >\n                    <ix-icon class=\"chevron\" name=\"chevron-down-small\" />\n                  </div>\n                )}\n              </div>\n            </div>\n          </div>\n        </div>\n        <ix-dropdown\n          ref={(ref) => (this.dropdownRef = ref)}\n          show={this.dropdownShow}\n          class={{\n            'd-none':\n              this.disabled ||\n              this.readonly ||\n              (this.isDropdownEmpty && !this.editable),\n          }}\n          anchor={this.dropdownAnchor}\n          trigger={this.dropdownWrapperRef}\n          onShowChanged={(e) => this.dropdownVisibilityChanged(e)}\n          placement=\"auto-start\"\n          overwriteDropdownStyle={async () => {\n            return {\n              width: `${this.hostElement.clientWidth}px`,\n            };\n          }}\n        >\n          <div class=\"select-list-header\" title={this.i18nSelectListHeader}>\n            {this.i18nSelectListHeader}\n          </div>\n          <slot></slot>\n          <div ref={(ref) => (this.addItemRef = ref)} class=\"d-contents\"></div>\n          {this.itemExists(this.inputFilterText) ? (\n            ''\n          ) : (\n            <ix-dropdown-item\n              data-testid=\"add-item\"\n              icon=\"plus\"\n              class={{\n                'add-item': true,\n                'd-none': !(this.editable && this.inputFilterText),\n              }}\n              label={this.inputFilterText}\n              onItemClick={(e) => {\n                e.preventDefault();\n                e.stopPropagation();\n                this.emitAddItem(this.inputFilterText);\n              }}\n            ></ix-dropdown-item>\n          )}\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../src/components/select/select.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  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { IxSelectItemLabelChangeEvent } from '../select-item/events';\n\n@Component({\n  tag: 'ix-select',\n  styleUrl: 'select.scss',\n  scoped: true,\n})\nexport class Select {\n  @Element() hostElement!: HTMLIxSelectElement;\n\n  /**\n   * Indices of selected items\n   * This corresponds to the value property of ix-select-items and therefor not neccessarily the indices of the items in the list.\n   */\n  @Prop({ mutable: true }) selectedIndices: string | string[] = [];\n\n  /**\n   * Show clear button\n   */\n  @Prop() allowClear = false;\n\n  /**\n   * Selection mode\n   */\n  @Prop() mode: 'single' | 'multiple' = 'single';\n\n  /**\n   * Select is extendable\n   */\n  @Prop() editable = false;\n\n  /**\n   * If true the select will be in disabled state\n   */\n  @Prop() disabled = false;\n\n  /**\n   * If true the select will be in readonly mode\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Input field placeholder\n   */\n  @Prop() i18nPlaceholder = 'Select an option';\n\n  /**\n   * Input field placeholder for editable select\n   */\n  @Prop() i18nPlaceholderEditable = 'Type of select option';\n\n  /**\n   * Select list header\n   */\n  @Prop() i18nSelectListHeader = 'Please select an option';\n\n  /**\n   * Hint inside of dropdown if no items where found with current filter text\n   *\n   * @since 1.5.0\n   */\n  @Prop() i18nNoMatches = 'No matches';\n\n  /**\n   * Hide list header\n   *\n   * @since 1.5.0\n   @\n   */\n  @Prop() hideListHeader = false;\n\n  /**\n   * Item selection changed\n   */\n  @Event() itemSelectionChange: EventEmitter<string | string[]>;\n\n  /**\n   * Item added to selection\n   */\n  @Event() addItem: EventEmitter<string>;\n\n  @State() dropdownShow = false;\n  @State() value: string[];\n  @State() dropdownWrapperRef!: HTMLElement;\n  @State() dropdownAnchor!: HTMLElement;\n  @State() isDropdownEmpty = false;\n  @State() hasFocus = false;\n  @State() navigationItem: HTMLIxSelectItemElement;\n  @State() inputFilterText: string;\n  @State() inputValue: string;\n\n  private inputRef!: HTMLInputElement;\n  private dropdownRef!: HTMLIxDropdownElement;\n  private addItemRef!: HTMLDivElement;\n\n  private labelMutationObserver: MutationObserver;\n\n  get items() {\n    return Array.from(this.hostElement.querySelectorAll('ix-select-item'));\n  }\n\n  get selectedItems() {\n    return this.items.filter((item) => item.selected);\n  }\n\n  get addItemButton() {\n    return this.hostElement.querySelector('.add-item');\n  }\n\n  get isSingleMode() {\n    return this.mode === 'single';\n  }\n\n  get isMultipleMode() {\n    return this.mode === 'multiple';\n  }\n\n  get isEveryDropdownItemHidden() {\n    return this.items.every((item) => item.classList.contains('d-none'));\n  }\n\n  @Watch('selectedIndices')\n  watchSelectedIndices(newId: string | string[]) {\n    if (!newId) {\n      this.selectValue([]);\n      return;\n    }\n\n    if (Array.isArray(newId)) {\n      this.selectValue([...newId]);\n      return;\n    }\n\n    this.selectValue([newId]);\n  }\n\n  @Listen('itemClick')\n  onItemClicked(event: CustomEvent<string>) {\n    const newId = event.detail;\n    this.emitItemClick(newId);\n  }\n\n  private emitItemClick(newId: string) {\n    if (this.isMultipleMode && Array.isArray(this.selectedIndices)) {\n      if (this.selectedIndices.includes(newId)) {\n        this.selectedIndices = this.selectedIndices.filter((i) => i !== newId);\n      } else {\n        this.selectedIndices = [...this.selectedIndices, newId];\n      }\n    } else {\n      this.selectedIndices = [newId];\n    }\n\n    this.selectValue(this.selectedIndices);\n    this.itemSelectionChange.emit(this.selectedIndices);\n  }\n\n  private emitAddItem(value: string) {\n    if (value.trim() === '') {\n      return;\n    }\n\n    const newItem = document.createElement('ix-select-item');\n    newItem.value = value;\n    newItem.label = value;\n\n    this.addItemRef.appendChild(newItem);\n\n    this.clearInput();\n    this.emitItemClick(value);\n    this.addItem.emit(value);\n  }\n\n  private selectValue(ids: string[]) {\n    this.items.forEach((item) => {\n      item.selected = ids.some((i) => i === item.value);\n    });\n\n    this.value = this.selectedItems.map((item) => item.label);\n\n    if (this.isSingleMode) {\n      this.inputValue = this.value?.length ? this.value[0] : null;\n      return;\n    }\n\n    this.inputValue = null;\n  }\n\n  componentWillLoad() {\n    if (this.selectedIndices) {\n      this.selectValue(\n        Array.isArray(this.selectedIndices)\n          ? this.selectedIndices\n          : [this.selectedIndices]\n      );\n    }\n  }\n\n  @Listen('ix-select-item:labelChange')\n  onLabelChange(event: IxSelectItemLabelChangeEvent) {\n    event.preventDefault();\n    event.stopImmediatePropagation();\n    this.selectValue(\n      Array.isArray(this.selectedIndices)\n        ? this.selectedIndices\n        : [this.selectedIndices]\n    );\n  }\n\n  disconnectedCallback() {\n    if (this.labelMutationObserver) {\n      this.labelMutationObserver.disconnect();\n    }\n  }\n\n  private itemExists(item: string) {\n    return this.items.find((i) => i.label === item);\n  }\n\n  private dropdownVisibilityChanged(event: CustomEvent<boolean>) {\n    this.dropdownShow = event.detail;\n    this.hasFocus = event.detail;\n\n    if (event.detail) {\n      this.inputRef.focus();\n      this.inputRef.select();\n\n      this.removeHiddenFromItems();\n      this.isDropdownEmpty = this.isEveryDropdownItemHidden;\n    } else {\n      this.navigationItem = undefined;\n    }\n  }\n\n  @Listen('keydown', {\n    target: 'window',\n  })\n  async onKeyDown(event: KeyboardEvent) {\n    if (!this.dropdownShow) {\n      return;\n    }\n\n    if (event.code === 'ArrowDown' || event.code === 'ArrowUp') {\n      this.onArrowNavigation(event);\n    }\n\n    if (event.code === 'Enter' || event.code === 'NumpadEnter') {\n      await this.onEnterNavigation();\n    }\n\n    if (event.code === 'Escape') {\n      this.dropdownShow = false;\n    }\n  }\n\n  private async onEnterNavigation() {\n    if (this.isMultipleMode) {\n      return;\n    }\n\n    if (this.editable && !this.itemExists(this.inputFilterText)) {\n      this.emitAddItem(this.inputFilterText);\n      this.navigationItem = this.items[this.items.length - 1];\n    }\n\n    this.navigationItem?.onItemClick();\n    await this.dropdownRef?.updatePosition();\n\n    if (this.isSingleMode && !this.editable) {\n      this.dropdownShow = false;\n    }\n  }\n\n  private onArrowNavigation(event: KeyboardEvent) {\n    event.stopPropagation();\n    event.preventDefault();\n\n    const focusItem = this.items.find(\n      (item) => document.activeElement === item.querySelector('button')\n    );\n    this.navigationItem = focusItem;\n\n    const selectItems = this.items.filter(\n      (i) => !i.classList.contains('d-none')\n    );\n\n    const index = selectItems.indexOf(this.navigationItem);\n\n    if (event.code === 'ArrowDown' && index < selectItems.length - 1) {\n      this.navigationItem = selectItems[index + 1];\n    } else if (event.code === 'ArrowUp' && index > 0) {\n      this.navigationItem = selectItems[index - 1];\n    }\n\n    this.setHoverEffectForNavigatedSelectItem();\n  }\n\n  private setHoverEffectForNavigatedSelectItem() {\n    this.navigationItem?.querySelector('button').focus();\n  }\n\n  private filterItemsWithTypeahead() {\n    this.inputFilterText = this.inputRef.value;\n\n    if (this.inputFilterText) {\n      this.items.forEach((item) => {\n        item.classList.remove('d-none');\n        if (\n          !item.label.toLowerCase().includes(this.inputFilterText.toLowerCase())\n        ) {\n          item.classList.add('d-none');\n        }\n      });\n    } else {\n      this.removeHiddenFromItems();\n    }\n\n    this.isDropdownEmpty = this.isEveryDropdownItemHidden;\n  }\n\n  private removeHiddenFromItems() {\n    this.items.forEach((item) => {\n      item.classList.remove('d-none');\n    });\n  }\n\n  private clearInput() {\n    this.inputRef.value = '';\n    this.inputFilterText = '';\n  }\n\n  private clear() {\n    this.clearInput();\n    this.value = [];\n    this.selectedIndices = [];\n    this.itemSelectionChange.emit(null);\n    this.dropdownShow = false;\n  }\n\n  private onInputBlur(e) {\n    if (this.editable) {\n      return;\n    }\n\n    if (this.isSingleMode) {\n      if (this.dropdownShow && this.isDropdownEmpty) {\n        this.dropdownShow = false;\n      }\n    }\n\n    if (!this.dropdownShow && this.mode !== 'multiple') {\n      e.target['value'] = this.value;\n    }\n  }\n\n  private placeholderValue() {\n    if (this.editable) {\n      return this.i18nPlaceholderEditable;\n    }\n\n    if (this.readonly) {\n      return '';\n    }\n\n    return this.i18nPlaceholder;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'form-control': true,\n            select: true,\n            focus: this.hasFocus,\n            editable: this.editable,\n            disabled: this.disabled,\n            readonly: this.readonly,\n          }}\n          ref={(ref) => {\n            this.dropdownAnchor = ref;\n            if (!this.editable) this.dropdownWrapperRef = ref;\n          }}\n        >\n          <div class=\"input-container\">\n            <div class=\"chips\">\n              {this.isMultipleMode\n                ? this.selectedItems?.map((item) => (\n                    <ix-filter-chip\n                      disabled={this.disabled || this.readonly}\n                      key={item.value}\n                      onCloseClick={(e) => {\n                        e.preventDefault();\n                        e.stopPropagation();\n                        this.emitItemClick(item.value);\n                      }}\n                    >\n                      {item.label}\n                    </ix-filter-chip>\n                  ))\n                : ''}\n              <div class=\"trigger\">\n                <input\n                  data-testid=\"input\"\n                  disabled={this.disabled}\n                  readOnly={this.readonly}\n                  type=\"text\"\n                  class={{\n                    'allow-clear': this.allowClear && !!this.value?.length,\n                  }}\n                  placeholder={this.placeholderValue()}\n                  value={this.inputValue}\n                  ref={(ref) => (this.inputRef = ref)}\n                  onBlur={(e) => this.onInputBlur(e)}\n                  onInput={() => this.filterItemsWithTypeahead()}\n                />\n                {this.allowClear &&\n                (this.value?.length || this.inputFilterText) ? (\n                  <ix-icon-button\n                    class=\"clear\"\n                    icon=\"clear\"\n                    ghost\n                    oval\n                    size=\"16\"\n                    onClick={(e) => {\n                      e.preventDefault();\n                      e.stopPropagation();\n                      this.clear();\n                    }}\n                  />\n                ) : null}\n                {this.disabled || this.readonly ? null : (\n                  <div\n                    class=\"chevron-down-container\"\n                    ref={(ref) => {\n                      if (this.editable) this.dropdownWrapperRef = ref;\n                    }}\n                  >\n                    <ix-icon class=\"chevron\" name=\"chevron-down-small\" />\n                  </div>\n                )}\n              </div>\n            </div>\n          </div>\n        </div>\n        <ix-dropdown\n          ref={(ref) => (this.dropdownRef = ref)}\n          show={this.dropdownShow}\n          class={{\n            'd-none': this.disabled || this.readonly,\n          }}\n          anchor={this.dropdownAnchor}\n          trigger={this.dropdownWrapperRef}\n          onShowChanged={(e) => this.dropdownVisibilityChanged(e)}\n          placement=\"auto-start\"\n          overwriteDropdownStyle={async () => {\n            return {\n              minWidth: `${this.hostElement.clientWidth}px`,\n            };\n          }}\n        >\n          <div\n            class={{\n              'select-list-header': true,\n              hidden: this.hideListHeader || this.isDropdownEmpty,\n            }}\n            title={this.i18nSelectListHeader}\n          >\n            {this.i18nSelectListHeader}\n          </div>\n          <slot></slot>\n          <div ref={(ref) => (this.addItemRef = ref)} class=\"d-contents\"></div>\n          {this.itemExists(this.inputFilterText) ? (\n            ''\n          ) : (\n            <ix-dropdown-item\n              data-testid=\"add-item\"\n              icon=\"plus\"\n              class={{\n                'add-item': true,\n                'd-none': !(this.editable && this.inputFilterText),\n              }}\n              label={this.inputFilterText}\n              onItemClick={(e) => {\n                e.preventDefault();\n                e.stopPropagation();\n                this.emitAddItem(this.inputFilterText);\n              }}\n            ></ix-dropdown-item>\n          )}\n          {this.isDropdownEmpty && !this.editable ? (\n            <div class=\"select-list-header\">{this.i18nNoMatches}</div>\n          ) : (\n            ''\n          )}\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -8,7 +8,4 @@
  */
 :host {
   display: block;
-}
-:host ix-dropdown-item button {
-  margin-left: 1rem;
 }

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

@@ -36,7 +36,7 @@ export class SelectItem {
     }));
   }
   render() {
-    return (h(Host, null, h("ix-dropdown-item", { checked: this.selected, hover: this.hover, label: this.label ? this.label : this.value, onItemClick: (e) => this.onItemClick(e) })));
+    return (h(Host, null, h("ix-dropdown-item", { checked: this.selected, label: this.label ? this.label : this.value, onItemClick: (e) => this.onItemClick(e) })));
   }
   static get is() { return "ix-select-item"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/select-item/select-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-item.js","sourceRoot":"","sources":["../../../src/components/select-item/select-item.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,4BAA4B,EAAE,MAAM,UAAU,CAAC;AAOxD,MAAM,OAAO,UAAU;;;;oBAgBF,KAAK;iBAKR,KAAK;;EAOrB;;;KAGG;EAEH,KAAK,CAAC,WAAW,CAAC,KAA8C;IAC9D,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,cAAc,EAAE,CAAC;IACxB,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,EAAE,CAAC;IAEzB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAClC,CAAC;EAED,kBAAkB;IAChB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACf,MAAM,KAAK,CAAC,6CAA6C,CAAC,CAAC;KAC5D;EACH,CAAC;EAGD,WAAW,CAAC,QAAgB,EAAE,QAAgB;IAC5C,IAAI,CAAC,WAAW,CAAC,aAAa,CAC5B,IAAI,4BAA4B,CAAC;MAC/B,QAAQ,EAAE,QAAQ;MAClB,QAAQ,EAAE,QAAQ;KACnB,CAAC,CACH,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,wBACE,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAC3C,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,GACrB,CACf,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  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { IxSelectItemLabelChangeEvent } from './events';\n\n@Component({\n  tag: 'ix-select-item',\n  styleUrl: 'select-item.scss',\n  scoped: true,\n})\nexport class SelectItem {\n  @Element() hostElement: HTMLIxSelectItemElement;\n\n  /**\n   * Displayed name of the item\n   */\n  @Prop({ reflect: true }) label: string;\n\n  /**\n   * Item value\n   */\n  @Prop({ reflect: true }) value!: any;\n\n  /**\n   * Whether the item is selected.\n   */\n  @Prop() selected = false;\n\n  /**\n   * @internal\n   */\n  @Prop() hover = false;\n\n  /**\n   * Item clicked\n   */\n  @Event() itemClick: EventEmitter<string>;\n\n  /**\n   * @internal\n   * @param event\n   */\n  @Method()\n  async onItemClick(event?: CustomEvent<HTMLIxDropdownItemElement>) {\n    event?.preventDefault();\n    event?.stopPropagation();\n\n    this.itemClick.emit(this.value);\n  }\n\n  componentDidRender() {\n    if (!this.value) {\n      throw Error('ix-select-item must have a `value` property');\n    }\n  }\n\n  @Watch('label')\n  labelChange(newValue: string, oldValue: string) {\n    this.hostElement.dispatchEvent(\n      new IxSelectItemLabelChangeEvent({\n        newValue: newValue,\n        oldValue: oldValue,\n      })\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-dropdown-item\n          checked={this.selected}\n          hover={this.hover}\n          label={this.label ? this.label : this.value}\n          onItemClick={(e) => this.onItemClick(e)}\n        ></ix-dropdown-item>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"select-item.js","sourceRoot":"","sources":["../../../src/components/select-item/select-item.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,4BAA4B,EAAE,MAAM,UAAU,CAAC;AAOxD,MAAM,OAAO,UAAU;;;;oBAgBF,KAAK;iBAKR,KAAK;;EAOrB;;;KAGG;EAEH,KAAK,CAAC,WAAW,CAAC,KAA8C;IAC9D,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,cAAc,EAAE,CAAC;IACxB,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,EAAE,CAAC;IAEzB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAClC,CAAC;EAED,kBAAkB;IAChB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACf,MAAM,KAAK,CAAC,6CAA6C,CAAC,CAAC;KAC5D;EACH,CAAC;EAGD,WAAW,CAAC,QAAgB,EAAE,QAAgB;IAC5C,IAAI,CAAC,WAAW,CAAC,aAAa,CAC5B,IAAI,4BAA4B,CAAC;MAC/B,QAAQ,EAAE,QAAQ;MAClB,QAAQ,EAAE,QAAQ;KACnB,CAAC,CACH,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,wBACE,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAC3C,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,GACrB,CACf,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  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { IxSelectItemLabelChangeEvent } from './events';\n\n@Component({\n  tag: 'ix-select-item',\n  styleUrl: 'select-item.scss',\n  scoped: true,\n})\nexport class SelectItem {\n  @Element() hostElement: HTMLIxSelectItemElement;\n\n  /**\n   * Displayed name of the item\n   */\n  @Prop({ reflect: true }) label: string;\n\n  /**\n   * Item value\n   */\n  @Prop({ reflect: true }) value!: any;\n\n  /**\n   * Whether the item is selected.\n   */\n  @Prop() selected = false;\n\n  /**\n   * @internal\n   */\n  @Prop() hover = false;\n\n  /**\n   * Item clicked\n   */\n  @Event() itemClick: EventEmitter<string>;\n\n  /**\n   * @internal\n   * @param event\n   */\n  @Method()\n  async onItemClick(event?: CustomEvent<HTMLIxDropdownItemElement>) {\n    event?.preventDefault();\n    event?.stopPropagation();\n\n    this.itemClick.emit(this.value);\n  }\n\n  componentDidRender() {\n    if (!this.value) {\n      throw Error('ix-select-item must have a `value` property');\n    }\n  }\n\n  @Watch('label')\n  labelChange(newValue: string, oldValue: string) {\n    this.hostElement.dispatchEvent(\n      new IxSelectItemLabelChangeEvent({\n        newValue: newValue,\n        oldValue: oldValue,\n      })\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-dropdown-item\n          checked={this.selected}\n          label={this.label ? this.label : this.value}\n          onItemClick={(e) => this.onItemClick(e)}\n        ></ix-dropdown-item>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/toggle/toggle.css

@@ -210,18 +210,21 @@
 :host.indeterminate .slider:before {
   transform: translateX(0.625rem);
 }
-:host[disabled] .slider, :host.disabled .slider {
+:host.disabled {
+  pointer-events: none;
+}
+:host.disabled .slider {
   cursor: initial;
   opacity: 0.5;
 }
-:host[disabled] .slider:before, :host.disabled .slider:before {
+:host.disabled .slider:before {
   background-color: var(--theme-switch-thumb-off--background--disabled);
   border-color: var(--theme-switch-thumb-off--border-color--disabled);
 }
-:host[disabled] .slider .slider-track, :host.disabled .slider .slider-track {
+:host.disabled .slider .slider-track {
   background-color: var(--theme-switch-off--background--disabled);
   border-color: var(--theme-switch-off--border-color--disabled);
 }
-:host[disabled] .text, :host.disabled .text {
+:host.disabled .text {
   color: var(--theme-switch--color--disabled);
 }

package/dist/collection/components/tooltip/tooltip.js

@@ -8,6 +8,7 @@
  */
 import { arrow, autoUpdate, computePosition, flip, offset, shift, } from '@floating-ui/dom';
 import { h, Host } from '@stencil/core';
+const numberToPixel = (value) => (value != null ? `${value}px` : '');
 /**
  * @slot title-icon - Icon of tooltip title
  * @slot title-content - Content of tooltip title
@@ -22,6 +23,7 @@ export class Tooltip {
     this.for = undefined;
     this.titleContent = undefined;
     this.interactive = false;
+    this.placement = 'top';
     this.visible = false;
   }
   get arrowElement() {
@@ -43,12 +45,39 @@ export class Tooltip {
     }, this.tooltipCloseTimeInMS);
     this.destroyAutoUpdate();
   }
+  computeArrowPosition({ placement, middlewareData, }) {
+    let { x, y } = middlewareData.arrow;
+    if (placement.startsWith('top')) {
+      return {
+        left: numberToPixel(x),
+        top: numberToPixel(y),
+      };
+    }
+    if (placement.startsWith('right')) {
+      return {
+        left: numberToPixel(-4),
+        top: numberToPixel(y),
+      };
+    }
+    if (placement.startsWith('bottom')) {
+      return {
+        left: numberToPixel(x),
+        top: numberToPixel(-4),
+      };
+    }
+    if (placement.startsWith('left')) {
+      return {
+        right: numberToPixel(-4),
+        top: numberToPixel(y),
+      };
+    }
+  }
   async computeTooltipPosition(target) {
     this.disposeAutoUpdate = autoUpdate(target, this.hostElement, async () => {
-      requestAnimationFrame(async () => {
+      setTimeout(async () => {
         const computeResponse = await computePosition(target, this.hostElement, {
           strategy: 'fixed',
-          placement: 'top',
+          placement: this.placement,
           middleware: [
             shift(),
             offset(8),
@@ -57,18 +86,13 @@ export class Tooltip {
             }),
             flip({
               fallbackStrategy: 'initialPlacement',
+              padding: 10,
             }),
           ],
         });
         if (computeResponse.middlewareData.arrow) {
-          let { x, y } = computeResponse.middlewareData.arrow;
-          if (computeResponse.placement === 'bottom') {
-            y = -4;
-          }
-          Object.assign(this.arrowElement.style, {
-            left: x != null ? `${x}px` : '',
-            top: y != null ? `${y}px` : '',
-          });
+          const arrowPosition = this.computeArrowPosition(computeResponse);
+          Object.assign(this.arrowElement.style, arrowPosition);
         }
         const { x, y } = computeResponse;
         Object.assign(this.hostElement.style, {
@@ -195,6 +219,27 @@ export class Tooltip {
         "attribute": "interactive",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "placement": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'top' | 'right' | 'bottom' | 'left'",
+          "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "since",
+              "text": "1.5.0"
+            }],
+          "text": "Initial placement of the tooltip. If the placement don\"t have enough space,\nthe tooltip will placed on another location."
+        },
+        "attribute": "placement",
+        "reflect": false,
+        "defaultValue": "'top'"
       }
     };
   }

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.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 */\nimport {\n  arrow,\n  autoUpdate,\n  computePosition,\n  flip,\n  offset,\n  shift,\n} from '@floating-ui/dom';\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\n/**\n * @slot title-icon - Icon of tooltip title\n * @slot title-content - Content of tooltip title\n *\n * @since 1.4.0\n */\n@Component({\n  tag: 'ix-tooltip',\n  styleUrl: 'tooltip.scss',\n  shadow: true,\n})\nexport class Tooltip {\n  /**\n   * CSS selector for hover trigger element e.g. `for=\"[data-my-custom-select]\"`\n   */\n  @Prop() for: string;\n\n  /**\n   * Title of the tooltip\n   */\n  @Prop() titleContent: string;\n\n  /**\n   * Define if the user can access the tooltip via mouse.\n   */\n  @Prop() interactive = false;\n\n  @State() visible = false;\n\n  @Element() hostElement: HTMLIxTooltipElement;\n\n  private observer: MutationObserver;\n  private hideTooltipTimeout: NodeJS.Timeout;\n  private onMouseEnterBind = this.showTooltip.bind(this);\n  private onMouseLeaveBind = this.hideTooltip.bind(this);\n  private disposeAutoUpdate?: () => void;\n  private tooltipCloseTimeInMS = 50;\n\n  private get arrowElement() {\n    return this.hostElement.shadowRoot.querySelector('.arrow') as HTMLElement;\n  }\n\n  private destroyAutoUpdate() {\n    if (this.disposeAutoUpdate !== undefined) {\n      this.disposeAutoUpdate();\n    }\n  }\n\n  private showTooltip(e: any) {\n    clearTimeout(this.hideTooltipTimeout);\n    this.visible = true;\n    this.computeTooltipPosition(e.target);\n  }\n\n  private hideTooltip() {\n    this.hideTooltipTimeout = setTimeout(() => {\n      this.visible = false;\n    }, this.tooltipCloseTimeInMS);\n    this.destroyAutoUpdate();\n  }\n\n  private async computeTooltipPosition(target: HTMLElement) {\n    this.disposeAutoUpdate = autoUpdate(\n      target,\n      this.hostElement,\n      async () => {\n        requestAnimationFrame(async () => {\n          const computeResponse = await computePosition(\n            target,\n            this.hostElement,\n            {\n              strategy: 'fixed',\n              placement: 'top',\n              middleware: [\n                shift(),\n                offset(8),\n                arrow({\n                  element: this.arrowElement,\n                }),\n                flip({\n                  fallbackStrategy: 'initialPlacement',\n                }),\n              ],\n            }\n          );\n\n          if (computeResponse.middlewareData.arrow) {\n            let { x, y } = computeResponse.middlewareData.arrow;\n\n            if (computeResponse.placement === 'bottom') {\n              y = -4;\n            }\n\n            Object.assign(this.arrowElement.style, {\n              left: x != null ? `${x}px` : '',\n              top: y != null ? `${y}px` : '',\n            });\n          }\n\n          const { x, y } = computeResponse;\n          Object.assign(this.hostElement.style, {\n            left: x !== null ? `${x}px` : '',\n            top: y !== null ? `${y}px` : '',\n          });\n        });\n      },\n      {\n        ancestorResize: true,\n        ancestorScroll: true,\n        elementResize: true,\n      }\n    );\n  }\n\n  private queryAnchorElements() {\n    return Array.from(document.querySelectorAll(this.for));\n  }\n\n  private registerTriggerListener() {\n    const elements = this.queryAnchorElements();\n    elements.forEach((e) => {\n      e.addEventListener('mouseenter', this.onMouseEnterBind);\n      e.addEventListener('mouseleave', this.onMouseLeaveBind);\n    });\n  }\n\n  private registerTooltipListener() {\n    this.hostElement.addEventListener('mouseenter', () => {\n      if (this.interactive) {\n        clearTimeout(this.hideTooltipTimeout);\n      }\n    });\n    this.hostElement.addEventListener('mouseleave', () => {\n      this.hideTooltip();\n    });\n  }\n\n  componentDidLoad() {\n    if (this.interactive) {\n      this.tooltipCloseTimeInMS = 150;\n    }\n\n    this.observer = new MutationObserver(() => {\n      this.registerTriggerListener();\n    });\n\n    this.observer.observe(document.body, {\n      attributes: true,\n      attributeFilter: ['data-ix-tooltip'],\n      childList: true,\n      subtree: true,\n    });\n\n    this.registerTriggerListener();\n    this.registerTooltipListener();\n  }\n\n  disconnectedCallback() {\n    this.observer.disconnect();\n    this.destroyAutoUpdate();\n  }\n\n  render() {\n    const tooltipContentClass = {\n      'tooltip-content': true,\n    };\n\n    return (\n      <Host\n        class={{\n          visible: this.visible,\n        }}\n      >\n        <div class={'tooltip-title'}>\n          <slot name=\"title-icon\"></slot>\n          <ix-typography variant=\"default-title\">\n            {this.titleContent}\n            <slot name=\"title-content\"></slot>\n          </ix-typography>\n        </div>\n        <div class={tooltipContentClass}>\n          <slot></slot>\n        </div>\n        <div class=\"arrow\"></div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.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 */\nimport {\n  arrow,\n  autoUpdate,\n  computePosition,\n  ComputePositionReturn,\n  flip,\n  offset,\n  shift,\n} from '@floating-ui/dom';\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\ntype ArrowPosition = {\n  top?: string;\n  left?: string;\n  right?: string;\n};\n\nconst numberToPixel = (value: number) => (value != null ? `${value}px` : '');\n\n/**\n * @slot title-icon - Icon of tooltip title\n * @slot title-content - Content of tooltip title\n *\n * @since 1.4.0\n */\n@Component({\n  tag: 'ix-tooltip',\n  styleUrl: 'tooltip.scss',\n  shadow: true,\n})\nexport class Tooltip {\n  /**\n   * CSS selector for hover trigger element e.g. `for=\"[data-my-custom-select]\"`\n   */\n  @Prop() for: string;\n\n  /**\n   * Title of the tooltip\n   */\n  @Prop() titleContent: string;\n\n  /**\n   * Define if the user can access the tooltip via mouse.\n   */\n  @Prop() interactive = false;\n\n  /**\n   * Initial placement of the tooltip. If the placement don\"t have enough space,\n   * the tooltip will placed on another location.\n   *\n   * @since 1.5.0\n   */\n  @Prop() placement: 'top' | 'right' | 'bottom' | 'left' = 'top';\n\n  @State() visible = false;\n\n  @Element() hostElement: HTMLIxTooltipElement;\n\n  private observer: MutationObserver;\n  private hideTooltipTimeout: NodeJS.Timeout;\n  private onMouseEnterBind = this.showTooltip.bind(this);\n  private onMouseLeaveBind = this.hideTooltip.bind(this);\n  private disposeAutoUpdate?: () => void;\n  private tooltipCloseTimeInMS = 50;\n\n  private get arrowElement() {\n    return this.hostElement.shadowRoot.querySelector('.arrow') as HTMLElement;\n  }\n\n  private destroyAutoUpdate() {\n    if (this.disposeAutoUpdate !== undefined) {\n      this.disposeAutoUpdate();\n    }\n  }\n\n  private showTooltip(e: any) {\n    clearTimeout(this.hideTooltipTimeout);\n    this.visible = true;\n    this.computeTooltipPosition(e.target);\n  }\n\n  private hideTooltip() {\n    this.hideTooltipTimeout = setTimeout(() => {\n      this.visible = false;\n    }, this.tooltipCloseTimeInMS);\n    this.destroyAutoUpdate();\n  }\n\n  private computeArrowPosition({\n    placement,\n    middlewareData,\n  }: ComputePositionReturn): ArrowPosition {\n    let { x, y } = middlewareData.arrow;\n\n    if (placement.startsWith('top')) {\n      return {\n        left: numberToPixel(x),\n        top: numberToPixel(y),\n      };\n    }\n\n    if (placement.startsWith('right')) {\n      return {\n        left: numberToPixel(-4),\n        top: numberToPixel(y),\n      };\n    }\n\n    if (placement.startsWith('bottom')) {\n      return {\n        left: numberToPixel(x),\n        top: numberToPixel(-4),\n      };\n    }\n\n    if (placement.startsWith('left')) {\n      return {\n        right: numberToPixel(-4),\n        top: numberToPixel(y),\n      };\n    }\n  }\n\n  private async computeTooltipPosition(target: HTMLElement) {\n    this.disposeAutoUpdate = autoUpdate(\n      target,\n      this.hostElement,\n      async () => {\n        setTimeout(async () => {\n          const computeResponse = await computePosition(\n            target,\n            this.hostElement,\n            {\n              strategy: 'fixed',\n              placement: this.placement,\n              middleware: [\n                shift(),\n                offset(8),\n                arrow({\n                  element: this.arrowElement,\n                }),\n                flip({\n                  fallbackStrategy: 'initialPlacement',\n                  padding: 10,\n                }),\n              ],\n            }\n          );\n\n          if (computeResponse.middlewareData.arrow) {\n            const arrowPosition = this.computeArrowPosition(computeResponse);\n            Object.assign(this.arrowElement.style, arrowPosition);\n          }\n\n          const { x, y } = computeResponse;\n          Object.assign(this.hostElement.style, {\n            left: x !== null ? `${x}px` : '',\n            top: y !== null ? `${y}px` : '',\n          });\n        });\n      },\n      {\n        ancestorResize: true,\n        ancestorScroll: true,\n        elementResize: true,\n      }\n    );\n  }\n\n  private queryAnchorElements() {\n    return Array.from(document.querySelectorAll(this.for));\n  }\n\n  private registerTriggerListener() {\n    const elements = this.queryAnchorElements();\n    elements.forEach((e) => {\n      e.addEventListener('mouseenter', this.onMouseEnterBind);\n      e.addEventListener('mouseleave', this.onMouseLeaveBind);\n    });\n  }\n\n  private registerTooltipListener() {\n    this.hostElement.addEventListener('mouseenter', () => {\n      if (this.interactive) {\n        clearTimeout(this.hideTooltipTimeout);\n      }\n    });\n    this.hostElement.addEventListener('mouseleave', () => {\n      this.hideTooltip();\n    });\n  }\n\n  componentDidLoad() {\n    if (this.interactive) {\n      this.tooltipCloseTimeInMS = 150;\n    }\n\n    this.observer = new MutationObserver(() => {\n      this.registerTriggerListener();\n    });\n\n    this.observer.observe(document.body, {\n      attributes: true,\n      attributeFilter: ['data-ix-tooltip'],\n      childList: true,\n      subtree: true,\n    });\n\n    this.registerTriggerListener();\n    this.registerTooltipListener();\n  }\n\n  disconnectedCallback() {\n    this.observer.disconnect();\n    this.destroyAutoUpdate();\n  }\n\n  render() {\n    const tooltipContentClass = {\n      'tooltip-content': true,\n    };\n\n    return (\n      <Host\n        class={{\n          visible: this.visible,\n        }}\n      >\n        <div class={'tooltip-title'}>\n          <slot name=\"title-icon\"></slot>\n          <ix-typography variant=\"default-title\">\n            {this.titleContent}\n            <slot name=\"title-content\"></slot>\n          </ix-typography>\n        </div>\n        <div class={tooltipContentClass}>\n          <slot></slot>\n        </div>\n        <div class=\"arrow\"></div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/utils/a11y.js

@@ -0,0 +1,10 @@
+/*
+ * 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.
+ */
+export const a11yBoolean = (value) => (value ? 'true' : 'false');
+//# sourceMappingURL=a11y.js.map

package/dist/collection/components/utils/a11y.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"a11y.js","sourceRoot":"","sources":["../../../src/components/utils/a11y.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAc,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,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 */\nexport const a11yBoolean = (value: boolean) => (value ? 'true' : 'false');\n"]}

package/dist/collection/components/workflow-step/workflow-step.css

@@ -6,9 +6,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
 /*
  * SPDX-FileCopyrightText: 2023 Siemens AG
  *
@@ -51,6 +48,9 @@
 :host .step .wrapper .line.last {
   margin: 0 auto 0 0;
 }
+:host .step .wrapper .line.single {
+  width: 0;
+}
 :host .step .wrapper .line.selected {
   background-color: var(--theme-workflow-step-icon-default--color--selected);
 }
@@ -103,6 +103,9 @@
 :host .step.vertical .wrapper .line.last {
   margin: 0 0 auto 0;
 }
+:host .step.vertical .wrapper .line.single {
+  width: 0;
+}
 :host .step.vertical .text {
   margin-top: 0;
   margin-left: 1rem;