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

package/dist/esm/ix-pagination.entry.js

@@ -0,0 +1,111 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-3d163acd.js';
+
+const paginationCss = ".sc-ix-pagination-h,.sc-ix-pagination-h .advanced-pagination.sc-ix-pagination,.sc-ix-pagination-h .item-count.sc-ix-pagination{display:inline-flex;align-items:center}.sc-ix-pagination-h .basic-pagination.sc-ix-pagination{padding:0 0.125rem}.sc-ix-pagination-h .advanced-pagination.sc-ix-pagination{padding:0 0.75rem}.sc-ix-pagination-h input.sc-ix-pagination{width:4.125rem;text-align:center;margin:0 0.5rem}.sc-ix-pagination-h .page-buttons.sc-ix-pagination{white-space:nowrap}.sc-ix-pagination-h .total-count.sc-ix-pagination{white-space:nowrap}.sc-ix-pagination-h .item-count.sc-ix-pagination{flex-grow:1;justify-content:flex-end;-webkit-margin-start:1.5rem;margin-inline-start:1.5rem}.sc-ix-pagination-h .item-count.sc-ix-pagination ix-select.sc-ix-pagination{width:4.125rem;-webkit-margin-start:1.5rem;margin-inline-start:1.5rem}.sc-ix-pagination-h ix-index-button.sc-ix-pagination+ix-index-button.sc-ix-pagination{-webkit-margin-start:0.125rem;margin-inline-start:0.125rem}";
+
+const Pagination = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.pageSelected = createEvent(this, "pageSelected", 7);
+    this.itemCountChanged = createEvent(this, "itemCountChanged", 7);
+    this.maxCountPages = 7;
+    this.advanced = undefined;
+    this.itemCount = 15;
+    this.showItemCount = true;
+    this.count = undefined;
+    this.selectedPage = 0;
+    this.i18nPage = 'Page';
+    this.i18nOf = 'of';
+    this.i18nItems = 'Items';
+  }
+  selectPage(index) {
+    if (index < 0 || index >= this.count) {
+      console.warn(`ix-pagination - invalid index ${index}`);
+      return;
+    }
+    this.selectedPage = index;
+    this.pageSelected.emit(index);
+  }
+  increase() {
+    if (this.selectedPage === this.count - 1) {
+      return;
+    }
+    this.selectPage(this.selectedPage + 1);
+  }
+  decrease() {
+    if (this.selectedPage === 0) {
+      return;
+    }
+    this.selectPage(this.selectedPage - 1);
+  }
+  getPageButton(index) {
+    return (h("ix-index-button", { variant: "Primary", onClick: () => {
+        this.selectPage(index);
+      }, selected: this.selectedPage === index }, index + 1));
+  }
+  renderPageButtons() {
+    const pagesBeforeOverflow = Math.floor(this.maxCountPages / 2);
+    const hasOverflow = this.count > this.maxCountPages;
+    const hasOverflowStart = hasOverflow && this.selectedPage > pagesBeforeOverflow;
+    const hasOverflowEnd = hasOverflow && this.selectedPage < this.count - pagesBeforeOverflow - 1;
+    const pageButtons = [];
+    let start = 0;
+    let end = Math.min(this.count, this.maxCountPages);
+    let pageCount = Math.floor((this.maxCountPages - 4) / 2);
+    if (hasOverflowStart) {
+      pageButtons.push(this.getPageButton(0));
+      pageButtons.push(h("ix-index-button", { variant: "Secondary", onClick: () => {
+          if (hasOverflowEnd) {
+            this.selectPage(this.selectedPage - Math.max(0, 2 * pageCount + 1));
+          }
+          else {
+            this.selectPage(this.count - this.maxCountPages);
+          }
+        } }, "..."));
+      if (hasOverflowEnd) {
+        start = this.count - this.maxCountPages + 2;
+      }
+      else {
+        start = this.count - this.maxCountPages + 2;
+        end = this.count;
+      }
+    }
+    if (hasOverflowEnd) {
+      if (hasOverflowStart) {
+        start = this.selectedPage - pageCount;
+        end = this.selectedPage + pageCount + 1;
+      }
+      else {
+        end = this.maxCountPages - 2;
+      }
+    }
+    for (let i = start; i < end; i++) {
+      pageButtons.push(this.getPageButton(i));
+    }
+    if (hasOverflowEnd) {
+      pageButtons.push(h("ix-index-button", { variant: "Secondary", onClick: () => {
+          if (hasOverflowStart) {
+            this.selectPage(this.selectedPage + Math.max(0, 2 * pageCount + 1));
+          }
+          else {
+            this.selectPage(this.maxCountPages - 1);
+          }
+        } }, "..."));
+      pageButtons.push(this.getPageButton(this.count - 1));
+    }
+    return h("span", { class: "page-buttons" }, pageButtons);
+  }
+  render() {
+    return (h(Host, null, h("ix-icon-button", { disabled: this.selectedPage === 0, ghost: true, icon: "chevron-left-small", onClick: () => this.decrease() }), this.advanced ? (h("div", { class: "advanced-pagination" }, this.i18nPage, h("input", { class: "form-control", type: "number", value: this.selectedPage, onChange: (e) => {
+        const index = Number.parseInt(e.target['value']);
+        this.selectPage(index);
+      } }), h("span", { class: "total-count" }, this.i18nOf, " ", this.count))) : (h("span", { class: "basic-pagination" }, this.renderPageButtons(), " ")), h("ix-icon-button", { disabled: this.selectedPage === this.count - 1, ghost: true, icon: "chevron-right-small", onClick: () => this.increase() }), this.advanced && this.showItemCount ? (h("span", { class: "item-count" }, this.i18nItems, h("ix-select", { i18nPlaceholder: "", i18nSelectListHeader: "", "selected-indices": this.itemCount, onItemSelectionChange: (e) => {
+        const count = Number.parseInt(e.detail[0]);
+        this.itemCountChanged.emit(count);
+      } }, h("ix-select-item", { label: "10", value: "10" }), h("ix-select-item", { label: "15", value: "15" }), h("ix-select-item", { label: "20", value: "20" }), h("ix-select-item", { label: "40", value: "40" }), h("ix-select-item", { label: "100", value: "100" })))) : ('')));
+  }
+};
+Pagination.style = paginationCss;
+
+export { Pagination as ix_pagination };
+
+//# sourceMappingURL=ix-pagination.entry.js.map

package/dist/esm/ix-pagination.entry.js.map

@@ -0,0 +1 @@
+{"file":"ix-pagination.entry.js","mappings":"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","names":[],"sources":["./src/components/pagination/pagination.scss?tag=ix-pagination&encapsulation=scoped","./src/components/pagination/pagination.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2022 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n\n:host {\n  &,\n  .advanced-pagination,\n  .item-count {\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .basic-pagination {\n    padding: 0 0.125rem;\n  }\n\n  .advanced-pagination {\n    padding: 0 $medium-space;\n  }\n\n  input {\n    width: 4.125rem;\n    text-align: center;\n    margin: 0 $small-space;\n  }\n\n  .page-buttons {\n    white-space: nowrap;\n  }\n\n  .total-count {\n    white-space: nowrap;\n  }\n\n  .item-count {\n    flex-grow: 1;\n    justify-content: flex-end;\n    margin-inline-start: $large-space;\n\n    ix-select {\n      width: 4.125rem;\n      margin-inline-start: $large-space;\n    }\n  }\n\n  ix-index-button + ix-index-button {\n    margin-inline-start: 0.125rem;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2022 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n/**\n * @since 1.5.0\n */\n@Component({\n  tag: 'ix-pagination',\n  styleUrl: 'pagination.scss',\n  scoped: true,\n})\nexport class Pagination {\n  private readonly maxCountPages = 7;\n\n  /**\n   * Advanced mode\n   */\n  @Prop() advanced: boolean;\n\n  /**\n   * Number of items shown at once.\n   * Can only be changed in advaced mode.\n   */\n  @Prop() itemCount = 15;\n\n  /**\n   * Show item count in advanced mode\n   */\n  @Prop() showItemCount = true;\n\n  /**\n   * Total number of pages\n   */\n  @Prop() count: number;\n\n  /**\n   * Zero based index of currently selected page\n   */\n  @Prop({ mutable: true }) selectedPage = 0;\n\n  /**\n   * i18n\n   */\n  @Prop() i18nPage = 'Page';\n\n  /**\n   * i18n\n   */\n  @Prop() i18nOf = 'of';\n\n  /**\n  /**\n   * i18n\n   */\n  @Prop() i18nItems = 'Items';\n\n  /**\n   * Page selection event\n   */\n  @Event() pageSelected: EventEmitter<number>;\n\n  /**\n   * Item count change event\n   */\n  @Event() itemCountChanged: EventEmitter<number>;\n\n  private selectPage(index: number) {\n    if (index < 0 || index >= this.count) {\n      console.warn(`ix-pagination - invalid index ${index}`);\n      return;\n    }\n\n    this.selectedPage = index;\n    this.pageSelected.emit(index);\n  }\n\n  private increase() {\n    if (this.selectedPage === this.count - 1) {\n      return;\n    }\n\n    this.selectPage(this.selectedPage + 1);\n  }\n\n  private decrease() {\n    if (this.selectedPage === 0) {\n      return;\n    }\n\n    this.selectPage(this.selectedPage - 1);\n  }\n\n  private getPageButton(index: number) {\n    return (\n      <ix-index-button\n        variant=\"Primary\"\n        onClick={() => {\n          this.selectPage(index);\n        }}\n        selected={this.selectedPage === index}\n      >\n        {index + 1}\n      </ix-index-button>\n    );\n  }\n\n  private renderPageButtons() {\n    const pagesBeforeOverflow = Math.floor(this.maxCountPages / 2);\n    const hasOverflow = this.count > this.maxCountPages;\n    const hasOverflowStart =\n      hasOverflow && this.selectedPage > pagesBeforeOverflow;\n    const hasOverflowEnd =\n      hasOverflow && this.selectedPage < this.count - pagesBeforeOverflow - 1;\n    const pageButtons = [];\n\n    let start = 0;\n    let end = Math.min(this.count, this.maxCountPages);\n    let pageCount = Math.floor((this.maxCountPages - 4) / 2);\n\n    if (hasOverflowStart) {\n      pageButtons.push(this.getPageButton(0));\n      pageButtons.push(\n        <ix-index-button\n          variant=\"Secondary\"\n          onClick={() => {\n            if (hasOverflowEnd) {\n              this.selectPage(\n                this.selectedPage - Math.max(0, 2 * pageCount + 1)\n              );\n            } else {\n              this.selectPage(this.count - this.maxCountPages);\n            }\n          }}\n        >\n          ...\n        </ix-index-button>\n      );\n\n      if (hasOverflowEnd) {\n        start = this.count - this.maxCountPages + 2;\n      } else {\n        start = this.count - this.maxCountPages + 2;\n        end = this.count;\n      }\n    }\n\n    if (hasOverflowEnd) {\n      if (hasOverflowStart) {\n        start = this.selectedPage - pageCount;\n        end = this.selectedPage + pageCount + 1;\n      } else {\n        end = this.maxCountPages - 2;\n      }\n    }\n\n    for (let i = start; i < end; i++) {\n      pageButtons.push(this.getPageButton(i));\n    }\n\n    if (hasOverflowEnd) {\n      pageButtons.push(\n        <ix-index-button\n          variant=\"Secondary\"\n          onClick={() => {\n            if (hasOverflowStart) {\n              this.selectPage(\n                this.selectedPage + Math.max(0, 2 * pageCount + 1)\n              );\n            } else {\n              this.selectPage(this.maxCountPages - 1);\n            }\n          }}\n        >\n          ...\n        </ix-index-button>\n      );\n      pageButtons.push(this.getPageButton(this.count - 1));\n    }\n\n    return <span class=\"page-buttons\">{pageButtons}</span>;\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-icon-button\n          disabled={this.selectedPage === 0}\n          ghost\n          icon=\"chevron-left-small\"\n          onClick={() => this.decrease()}\n        ></ix-icon-button>\n\n        {this.advanced ? (\n          <div class=\"advanced-pagination\">\n            {this.i18nPage}\n            <input\n              class=\"form-control\"\n              type=\"number\"\n              value={this.selectedPage}\n              onChange={(e) => {\n                const index = Number.parseInt(e.target['value']);\n                this.selectPage(index);\n              }}\n            />\n            <span class=\"total-count\">\n              {this.i18nOf} {this.count}\n            </span>\n          </div>\n        ) : (\n          <span class=\"basic-pagination\">{this.renderPageButtons()} </span>\n        )}\n\n        <ix-icon-button\n          disabled={this.selectedPage === this.count - 1}\n          ghost\n          icon=\"chevron-right-small\"\n          onClick={() => this.increase()}\n        ></ix-icon-button>\n\n        {this.advanced && this.showItemCount ? (\n          <span class=\"item-count\">\n            {this.i18nItems}\n            <ix-select\n              i18nPlaceholder=\"\"\n              i18nSelectListHeader=\"\"\n              selected-indices={this.itemCount}\n              onItemSelectionChange={(e) => {\n                const count = Number.parseInt(e.detail[0]);\n                this.itemCountChanged.emit(count);\n              }}\n            >\n              <ix-select-item label=\"10\" value=\"10\"></ix-select-item>\n              <ix-select-item label=\"15\" value=\"15\"></ix-select-item>\n              <ix-select-item label=\"20\" value=\"20\"></ix-select-item>\n              <ix-select-item label=\"40\" value=\"40\"></ix-select-item>\n              <ix-select-item label=\"100\" value=\"100\"></ix-select-item>\n            </ix-select>\n          </span>\n        ) : (\n          ''\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/ix-select_2.entry.js

@@ -228,7 +228,7 @@ const Select = class {
         if (!this.editable)
           this.dropdownWrapperRef = ref;
       } }, h("div", { class: "input-container" }, h("div", { class: "chips" }, this.isMultipleMode
-      ? (_a = this.selectedItems) === null || _a === void 0 ? void 0 : _a.map((item) => (h("ix-filter-chip", { disabled: this.disabled || this.readonly, onCloseClick: (e) => {
+      ? (_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);
@@ -250,9 +250,9 @@ const Select = class {
         'd-none': this.disabled ||
           this.readonly ||
           (this.isDropdownEmpty && !this.editable),
-      }, anchor: this.dropdownAnchor, trigger: this.dropdownWrapperRef, onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "auto-start", overwriteDropdownStyle: async (delegateConfig) => {
+      }, anchor: this.dropdownAnchor, trigger: this.dropdownWrapperRef, onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "auto-start", overwriteDropdownStyle: async () => {
         return {
-          width: `${delegateConfig.triggerRef.clientWidth}px`,
+          width: `${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: {
         'add-item': true,

package/dist/esm/ix-select_2.entry.js.map

@@ -1 +1 @@
-{"file":"ix-select.ix-select-item.entry.js","mappings":"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","names":[],"sources":["./src/components/select/select.scss?tag=ix-select&encapsulation=scoped","./src/components/select/select.tsx","./src/components/select-item/events.ts","./src/components/select-item/select-item.scss?tag=ix-select-item&encapsulation=scoped","./src/components/select-item/select-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n:host {\n  display: inline-block;\n  position: relative;\n  height: auto;\n  width: 100%;\n\n  .select {\n    position: relative;\n    display: flex;\n    align-items: center;\n    height: auto;\n    background-color: var(--theme-input--background);\n    border: var(--theme-input--border-thickness) solid\n      var(--theme-input--border-color);\n    border-radius: var(--theme-input--border-radius);\n    padding: 0 0 0 $small-space;\n\n    @include hover {\n      background-color: var(--theme-input--background--hover);\n      border-color: var(--theme-input--border-color--hover);\n    }\n\n    &:focus-within {\n      background-color: var(--theme-input--background--focus);\n      border-color: var(--theme-input--border-color--focus);\n      outline: 1px solid #119fff !important;\n      outline-offset: var(--theme-input--focus--outline-offset);\n    }\n  }\n\n  .trigger {\n    display: flex;\n    align-items: center;\n    flex-grow: 1;\n    height: 100%;\n  }\n\n  .input-container {\n    display: flex;\n    position: relative;\n    align-items: flex-start;\n    width: 100%;\n\n    .chips {\n      position: relative;\n      display: flex;\n      align-items: center;\n      flex-wrap: wrap;\n      height: 100%;\n      max-height: 3.5rem;\n      flex-grow: 1;\n      overflow-y: auto;\n\n      > ix-filter-chip {\n        margin: 0 0.1rem;\n      }\n    }\n\n    input {\n      @include ellipsis;\n      @include text-default;\n      background: transparent;\n      height: 1.75rem;\n      width: 100%;\n\n      &,\n      &:hover,\n      &:focus-visible {\n        border: none;\n        outline: none;\n      }\n\n      &::placeholder {\n        color: var(--theme-input-select-icon--color);\n      }\n\n      &.hide-placeholder::placeholder {\n        opacity: 0;\n      }\n    }\n  }\n\n  .chevron-down-container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: $x-large-space;\n    min-width: $x-large-space;\n    height: 100%;\n  }\n\n  .editable {\n    .chevron-down-container {\n      @include hover {\n        background-color: var(\n          --theme-btn-invisible-secondary--background--hover\n        );\n      }\n\n      @include active {\n        background-color: var(\n          --theme-btn-invisible-secondary--background--active\n        );\n      }\n    }\n  }\n\n  .add-item {\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    position: relative;\n    width: 100%;\n  }\n\n  .select-list-header {\n    @include ellipsis;\n    display: flex;\n    align-items: center;\n    height: $default-control-height;\n    color: var(--theme-select-list-item-hint--color);\n    margin: 0 $small-space 0 $x-large-space;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\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                      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 (delegateConfig) => {\n            return {\n              width: `${delegateConfig.triggerRef.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","/*\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 class IxSelectItemLabelChangeEvent extends CustomEvent<{\n  oldValue: string;\n  newValue: string;\n}> {\n  constructor(detail: { oldValue: string; newValue: string }) {\n    super('ix-select-item:labelChange', {\n      bubbles: true,\n      detail,\n    });\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n:host {\n  display: block;\n\n  ix-dropdown-item {\n    button {\n      margin-left: 1rem;\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\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":"ix-select.ix-select-item.entry.js","mappings":"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","names":[],"sources":["./src/components/select/select.scss?tag=ix-select&encapsulation=scoped","./src/components/select/select.tsx","./src/components/select-item/events.ts","./src/components/select-item/select-item.scss?tag=ix-select-item&encapsulation=scoped","./src/components/select-item/select-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n:host {\n  display: inline-block;\n  position: relative;\n  height: auto;\n  width: 100%;\n\n  .select {\n    position: relative;\n    display: flex;\n    align-items: center;\n    height: auto;\n    background-color: var(--theme-input--background);\n    border: var(--theme-input--border-thickness) solid\n      var(--theme-input--border-color);\n    border-radius: var(--theme-input--border-radius);\n    padding: 0 0 0 $small-space;\n\n    @include hover {\n      background-color: var(--theme-input--background--hover);\n      border-color: var(--theme-input--border-color--hover);\n    }\n\n    &:focus-within {\n      background-color: var(--theme-input--background--focus);\n      border-color: var(--theme-input--border-color--focus);\n      outline: 1px solid #119fff !important;\n      outline-offset: var(--theme-input--focus--outline-offset);\n    }\n  }\n\n  .trigger {\n    display: flex;\n    align-items: center;\n    flex-grow: 1;\n    height: 100%;\n  }\n\n  .input-container {\n    display: flex;\n    position: relative;\n    align-items: flex-start;\n    width: 100%;\n\n    .chips {\n      position: relative;\n      display: flex;\n      align-items: center;\n      flex-wrap: wrap;\n      height: 100%;\n      max-height: 3.5rem;\n      flex-grow: 1;\n      overflow-y: auto;\n\n      > ix-filter-chip {\n        margin: 0 0.1rem;\n      }\n    }\n\n    input {\n      @include ellipsis;\n      @include text-default;\n      background: transparent;\n      height: 1.75rem;\n      width: 100%;\n\n      &,\n      &:hover,\n      &:focus-visible {\n        border: none;\n        outline: none;\n      }\n\n      &::placeholder {\n        color: var(--theme-input-select-icon--color);\n      }\n\n      &.hide-placeholder::placeholder {\n        opacity: 0;\n      }\n    }\n  }\n\n  .chevron-down-container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: $x-large-space;\n    min-width: $x-large-space;\n    height: 100%;\n  }\n\n  .editable {\n    .chevron-down-container {\n      @include hover {\n        background-color: var(\n          --theme-btn-invisible-secondary--background--hover\n        );\n      }\n\n      @include active {\n        background-color: var(\n          --theme-btn-invisible-secondary--background--active\n        );\n      }\n    }\n  }\n\n  .add-item {\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    position: relative;\n    width: 100%;\n  }\n\n  .select-list-header {\n    @include ellipsis;\n    display: flex;\n    align-items: center;\n    height: $default-control-height;\n    color: var(--theme-select-list-item-hint--color);\n    margin: 0 $small-space 0 $x-large-space;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\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","/*\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 class IxSelectItemLabelChangeEvent extends CustomEvent<{\n  oldValue: string;\n  newValue: string;\n}> {\n  constructor(detail: { oldValue: string; newValue: string }) {\n    super('ix-select-item:labelChange', {\n      bubbles: true,\n      detail,\n    });\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n:host {\n  display: block;\n\n  ix-dropdown-item {\n    button {\n      margin-left: 1rem;\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\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}

package/dist/esm/ix-toast_2.entry.js

@@ -86,6 +86,7 @@ Toast.style = toastCss;
 const ToastContainer = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.PREFIX_POSITION_CLASS = 'toast-container--';
     this.containerId = 'toast-container';
     this.containerClass = 'toast-container';
     this.position = 'bottom-right';
@@ -98,10 +99,15 @@ const ToastContainer = class {
       const toastContainer = document.createElement('div');
       toastContainer.id = this.containerId;
       toastContainer.classList.add(this.containerClass);
-      toastContainer.classList.add(`toast-container--${this.position}`);
+      toastContainer.classList.add(`${this.PREFIX_POSITION_CLASS}${this.position}`);
       document.body.appendChild(toastContainer);
     }
   }
+  onPositionChange(newPosition, oldPosition) {
+    const toastContainer = document.getElementById(this.containerId);
+    toastContainer.classList.remove(`${this.PREFIX_POSITION_CLASS}${oldPosition}`);
+    toastContainer.classList.add(`${this.PREFIX_POSITION_CLASS}${newPosition}`);
+  }
   /**
    * Display a toast message
    * @param config
@@ -141,6 +147,9 @@ const ToastContainer = class {
     return h(Host, null);
   }
   get host() { return getElement(this); }
+  static get watchers() { return {
+    "position": ["onPositionChange"]
+  }; }
 };
 
 export { Toast as ix_toast, ToastContainer as ix_toast_container };

package/dist/esm/ix-toast_2.entry.js.map

@@ -1 +1 @@
-{"file":"ix-toast.ix-toast-container.entry.js","mappings":"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","names":[],"sources":["./src/components/toast/toast.scss?tag=ix-toast&encapsulation=scoped","./src/components/toast/toast.tsx","./src/components/toast/toast-container.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  min-width: 17.5rem;\n  max-width: 17.5rem;\n  min-height: 3.5rem;\n\n  pointer-events: all;\n\n  background-color: var(--theme-toast--background);\n  border: var(--theme-toast--border-thickness) solid\n    var(--theme-toast--border-color);\n  border-radius: var(--theme-toast--border-radius);\n  box-shadow: var(--theme-toast--box-shadow);\n\n  --animate-duration: #{$medium-time};\n\n  .toast-body {\n    display: flex;\n    position: relative;\n    width: 100%;\n    flex-grow: 1;\n\n    .toast-icon {\n      display: flex;\n      align-items: flex-start;\n      margin: $default-space;\n    }\n\n    .toast-content {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      min-width: 0;\n      width: 100%;\n      max-width: 10.25rem;\n      margin-top: calc(\n        #{$default-space} + var(--theme-toast--border-thickness)\n      );\n      margin-bottom: $medium-space;\n\n      .toast-message {\n        min-width: 0;\n      }\n    }\n  }\n\n  .toast-close {\n    display: flex;\n    position: relative;\n    margin: $medium-space;\n    pointer-events: all;\n  }\n\n  .toast-progress-bar {\n    position: absolute;\n    bottom: 0;\n    height: $tiny-space;\n    width: 100%;\n    background-color: var(--theme-toast-timer-value--background);\n    transform-origin: left;\n\n    &--animated {\n      animation: trackProgress linear 1 forwards;\n    }\n\n    &--touched {\n      transition: transform 1s;\n    }\n  }\n\n  @include hover {\n    .toast-progress-bar {\n      visibility: hidden;\n      transition: none;\n    }\n  }\n\n  @keyframes trackProgress {\n    0% {\n      transform: scaleX(1);\n    }\n    100% {\n      transform: scaleX(0);\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { ToastType } from './toast-utils';\n\n@Component({\n  tag: 'ix-toast',\n  styleUrl: 'toast.scss',\n  scoped: true,\n})\nexport class Toast {\n  /**\n   * Toast type\n   */\n  @Prop() type: ToastType = 'info';\n\n  /**\n   * Toast title\n   */\n  @Prop() toastTitle: string;\n\n  /**\n   * Autoclose title after delay\n   */\n  @Prop() autoCloseDelay = 5000;\n\n  /**\n   * Autoclose behavior\n   */\n  @Prop() autoClose = true;\n\n  /**\n   * Icon of toast\n   */\n  @Prop() icon: string;\n\n  /**\n   * Icon color of toast\n   */\n  @Prop() iconColor: string;\n\n  /**\n   * Toast closed\n   */\n  @Event() closeToast: EventEmitter;\n\n  @State() progress = 0;\n  @State() isRunning = true;\n  @State() touched = false;\n\n  @Element() host!: HTMLIxToastElement;\n\n  private getIcon() {\n    if (this.icon) {\n      return <ix-icon name={this.icon} color={this.iconColor} size=\"24\" />;\n    }\n\n    switch (this.type) {\n      case 'info':\n        return <ix-icon name={'info'} size=\"24\" color=\"color-std-text\" />;\n\n      case 'error':\n        return <ix-icon name={'error'} size=\"24\" color=\"color-alarm\" />;\n\n      case 'success':\n        return <ix-icon name={'success'} size=\"24\" color=\"color-success\" />;\n\n      case 'warning':\n        return <ix-icon name={'warning'} size=\"24\" color=\"color-warning\" />;\n\n      default:\n        return '';\n    }\n  }\n\n  private close() {\n    if (this.host) {\n      this.host.classList.add('animate__fadeOut');\n    }\n    setTimeout(() => {\n      this.closeToast.emit();\n    }, 250);\n  }\n\n  render() {\n    let progressBarElement: HTMLElement;\n    let progressBarStyle: Record<string, string> = {};\n\n    const progressBarClass = ['toast-progress-bar'];\n\n    if (!this.touched) {\n      progressBarStyle = {\n        animationDuration: `${this.autoCloseDelay}ms`,\n        animationPlayState: this.isRunning ? 'running' : 'paused',\n      };\n\n      progressBarClass.push('toast-progress-bar--animated');\n    } else {\n      progressBarClass.push('toast-progress-bar--touched');\n    }\n\n    const updateProgress = () => {\n      requestAnimationFrame(() => {\n        if (progressBarElement) {\n          progressBarElement.style.transform = `scaleX(${this.progress})`;\n        }\n      });\n    };\n\n    return (\n      <Host class=\"animate__animated animate__fadeIn\">\n        <div\n          class=\"toast-body\"\n          onPointerLeave={() => {\n            this.progress = 0;\n            updateProgress();\n          }}\n          onPointerEnter={() => {\n            this.isRunning = false;\n            this.touched = true;\n            this.progress = 1;\n            updateProgress();\n          }}\n        >\n          {this.type || this.icon ? (\n            <div class=\"toast-icon\">{this.getIcon()}</div>\n          ) : null}\n          <div class=\"toast-content\">\n            {this.toastTitle ? (\n              <div class=\"toast-title text-default-title-single\">\n                {this.toastTitle}\n              </div>\n            ) : null}\n            <div class=\"toast-message text-default\">\n              <slot></slot>\n            </div>\n          </div>\n          <div class=\"toast-close\">\n            <ix-icon-button\n              icon=\"close\"\n              size=\"24\"\n              ghost\n              onClick={() => this.closeToast.emit()}\n            />\n          </div>\n        </div>\n        {this.autoClose ? (\n          <div\n            class={progressBarClass.join(' ')}\n            style={progressBarStyle}\n            ref={(r) => (progressBarElement = r)}\n            onAnimationEnd={() => {\n              this.close();\n            }}\n            onTransitionEnd={() => {\n              if (this.progress === 0) {\n                this.close();\n              }\n            }}\n          ></div>\n        ) : null}\n      </Host>\n    );\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Method, Prop } from '@stencil/core';\nimport { TypedEvent } from '../utils/typed-event';\nimport { ToastConfig } from './toast-utils';\n\n@Component({\n  tag: 'ix-toast-container',\n  scoped: true,\n})\nexport class ToastContainer {\n  @Element() host!: HTMLIxToastContainerElement;\n\n  /**\n   */\n  @Prop() containerId = 'toast-container';\n\n  /**\n   */\n  @Prop() containerClass = 'toast-container';\n\n  /**\n   */\n  @Prop() position = 'bottom-right';\n\n  get hostContainer() {\n    return document.getElementById(this.containerId);\n  }\n\n  componentDidLoad() {\n    if (!document.getElementById(this.containerId)) {\n      const toastContainer = document.createElement('div');\n      toastContainer.id = this.containerId;\n      toastContainer.classList.add(this.containerClass);\n      toastContainer.classList.add(`toast-container--${this.position}`);\n      document.body.appendChild(toastContainer);\n    }\n  }\n\n  /**\n   * Display a toast message\n   * @param config\n   */\n  @Method()\n  async showToast(config: ToastConfig) {\n    const toast = document.createElement('ix-toast');\n\n    const onClose = new TypedEvent<any | undefined>();\n\n    function removeToast(result?: any) {\n      toast.remove();\n      onClose.emit(result);\n    }\n\n    toast.toastTitle = config.title;\n    toast.type = config.type;\n    toast.autoClose = config.autoClose;\n    toast.autoCloseDelay = config.autoCloseDelay;\n    toast.icon = config.icon;\n    toast.iconColor = config.iconColor;\n    toast.addEventListener(\n      'closeToast',\n      (event: CustomEvent<any | undefined>) => {\n        const { detail } = event;\n        removeToast(detail);\n      }\n    );\n\n    if (typeof config.message === 'string') {\n      toast.innerText = config.message;\n    } else {\n      toast.appendChild(config.message);\n    }\n\n    this.hostContainer.appendChild(toast);\n\n    return {\n      onClose,\n      close: (result?: any) => {\n        removeToast(result);\n      },\n    };\n  }\n\n  render() {\n    return <Host></Host>;\n  }\n}\n"],"version":3}
+{"file":"ix-toast.ix-toast-container.entry.js","mappings":"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","names":[],"sources":["./src/components/toast/toast.scss?tag=ix-toast&encapsulation=scoped","./src/components/toast/toast.tsx","./src/components/toast/toast-container.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  min-width: 17.5rem;\n  max-width: 17.5rem;\n  min-height: 3.5rem;\n\n  pointer-events: all;\n\n  background-color: var(--theme-toast--background);\n  border: var(--theme-toast--border-thickness) solid\n    var(--theme-toast--border-color);\n  border-radius: var(--theme-toast--border-radius);\n  box-shadow: var(--theme-toast--box-shadow);\n\n  --animate-duration: #{$medium-time};\n\n  .toast-body {\n    display: flex;\n    position: relative;\n    width: 100%;\n    flex-grow: 1;\n\n    .toast-icon {\n      display: flex;\n      align-items: flex-start;\n      margin: $default-space;\n    }\n\n    .toast-content {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      min-width: 0;\n      width: 100%;\n      max-width: 10.25rem;\n      margin-top: calc(\n        #{$default-space} + var(--theme-toast--border-thickness)\n      );\n      margin-bottom: $medium-space;\n\n      .toast-message {\n        min-width: 0;\n      }\n    }\n  }\n\n  .toast-close {\n    display: flex;\n    position: relative;\n    margin: $medium-space;\n    pointer-events: all;\n  }\n\n  .toast-progress-bar {\n    position: absolute;\n    bottom: 0;\n    height: $tiny-space;\n    width: 100%;\n    background-color: var(--theme-toast-timer-value--background);\n    transform-origin: left;\n\n    &--animated {\n      animation: trackProgress linear 1 forwards;\n    }\n\n    &--touched {\n      transition: transform 1s;\n    }\n  }\n\n  @include hover {\n    .toast-progress-bar {\n      visibility: hidden;\n      transition: none;\n    }\n  }\n\n  @keyframes trackProgress {\n    0% {\n      transform: scaleX(1);\n    }\n    100% {\n      transform: scaleX(0);\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { ToastType } from './toast-utils';\n\n@Component({\n  tag: 'ix-toast',\n  styleUrl: 'toast.scss',\n  scoped: true,\n})\nexport class Toast {\n  /**\n   * Toast type\n   */\n  @Prop() type: ToastType = 'info';\n\n  /**\n   * Toast title\n   */\n  @Prop() toastTitle: string;\n\n  /**\n   * Autoclose title after delay\n   */\n  @Prop() autoCloseDelay = 5000;\n\n  /**\n   * Autoclose behavior\n   */\n  @Prop() autoClose = true;\n\n  /**\n   * Icon of toast\n   */\n  @Prop() icon: string;\n\n  /**\n   * Icon color of toast\n   */\n  @Prop() iconColor: string;\n\n  /**\n   * Toast closed\n   */\n  @Event() closeToast: EventEmitter;\n\n  @State() progress = 0;\n  @State() isRunning = true;\n  @State() touched = false;\n\n  @Element() host!: HTMLIxToastElement;\n\n  private getIcon() {\n    if (this.icon) {\n      return <ix-icon name={this.icon} color={this.iconColor} size=\"24\" />;\n    }\n\n    switch (this.type) {\n      case 'info':\n        return <ix-icon name={'info'} size=\"24\" color=\"color-std-text\" />;\n\n      case 'error':\n        return <ix-icon name={'error'} size=\"24\" color=\"color-alarm\" />;\n\n      case 'success':\n        return <ix-icon name={'success'} size=\"24\" color=\"color-success\" />;\n\n      case 'warning':\n        return <ix-icon name={'warning'} size=\"24\" color=\"color-warning\" />;\n\n      default:\n        return '';\n    }\n  }\n\n  private close() {\n    if (this.host) {\n      this.host.classList.add('animate__fadeOut');\n    }\n    setTimeout(() => {\n      this.closeToast.emit();\n    }, 250);\n  }\n\n  render() {\n    let progressBarElement: HTMLElement;\n    let progressBarStyle: Record<string, string> = {};\n\n    const progressBarClass = ['toast-progress-bar'];\n\n    if (!this.touched) {\n      progressBarStyle = {\n        animationDuration: `${this.autoCloseDelay}ms`,\n        animationPlayState: this.isRunning ? 'running' : 'paused',\n      };\n\n      progressBarClass.push('toast-progress-bar--animated');\n    } else {\n      progressBarClass.push('toast-progress-bar--touched');\n    }\n\n    const updateProgress = () => {\n      requestAnimationFrame(() => {\n        if (progressBarElement) {\n          progressBarElement.style.transform = `scaleX(${this.progress})`;\n        }\n      });\n    };\n\n    return (\n      <Host class=\"animate__animated animate__fadeIn\">\n        <div\n          class=\"toast-body\"\n          onPointerLeave={() => {\n            this.progress = 0;\n            updateProgress();\n          }}\n          onPointerEnter={() => {\n            this.isRunning = false;\n            this.touched = true;\n            this.progress = 1;\n            updateProgress();\n          }}\n        >\n          {this.type || this.icon ? (\n            <div class=\"toast-icon\">{this.getIcon()}</div>\n          ) : null}\n          <div class=\"toast-content\">\n            {this.toastTitle ? (\n              <div class=\"toast-title text-default-title-single\">\n                {this.toastTitle}\n              </div>\n            ) : null}\n            <div class=\"toast-message text-default\">\n              <slot></slot>\n            </div>\n          </div>\n          <div class=\"toast-close\">\n            <ix-icon-button\n              icon=\"close\"\n              size=\"24\"\n              ghost\n              onClick={() => this.closeToast.emit()}\n            />\n          </div>\n        </div>\n        {this.autoClose ? (\n          <div\n            class={progressBarClass.join(' ')}\n            style={progressBarStyle}\n            ref={(r) => (progressBarElement = r)}\n            onAnimationEnd={() => {\n              this.close();\n            }}\n            onTransitionEnd={() => {\n              if (this.progress === 0) {\n                this.close();\n              }\n            }}\n          ></div>\n        ) : null}\n      </Host>\n    );\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { TypedEvent } from '../utils/typed-event';\nimport { ToastConfig } from './toast-utils';\n\n@Component({\n  tag: 'ix-toast-container',\n  scoped: true,\n})\nexport class ToastContainer {\n  @Element() host!: HTMLIxToastContainerElement;\n\n  /**\n   */\n  @Prop() containerId = 'toast-container';\n\n  /**\n   */\n  @Prop() containerClass = 'toast-container';\n\n  /**\n   */\n  @Prop() position: 'bottom-right' | 'top-right' = 'bottom-right';\n\n  private readonly PREFIX_POSITION_CLASS = 'toast-container--';\n\n  get hostContainer() {\n    return document.getElementById(this.containerId);\n  }\n\n  componentDidLoad() {\n    if (!document.getElementById(this.containerId)) {\n      const toastContainer = document.createElement('div');\n      toastContainer.id = this.containerId;\n      toastContainer.classList.add(this.containerClass);\n      toastContainer.classList.add(\n        `${this.PREFIX_POSITION_CLASS}${this.position}`\n      );\n      document.body.appendChild(toastContainer);\n    }\n  }\n\n  @Watch('position')\n  onPositionChange(newPosition: string, oldPosition: string) {\n    const toastContainer = document.getElementById(this.containerId);\n    toastContainer.classList.remove(\n      `${this.PREFIX_POSITION_CLASS}${oldPosition}`\n    );\n    toastContainer.classList.add(`${this.PREFIX_POSITION_CLASS}${newPosition}`);\n  }\n\n  /**\n   * Display a toast message\n   * @param config\n   */\n  @Method()\n  async showToast(config: ToastConfig) {\n    const toast = document.createElement('ix-toast');\n\n    const onClose = new TypedEvent<any | undefined>();\n\n    function removeToast(result?: any) {\n      toast.remove();\n      onClose.emit(result);\n    }\n\n    toast.toastTitle = config.title;\n    toast.type = config.type;\n    toast.autoClose = config.autoClose;\n    toast.autoCloseDelay = config.autoCloseDelay;\n    toast.icon = config.icon;\n    toast.iconColor = config.iconColor;\n    toast.addEventListener(\n      'closeToast',\n      (event: CustomEvent<any | undefined>) => {\n        const { detail } = event;\n        removeToast(detail);\n      }\n    );\n\n    if (typeof config.message === 'string') {\n      toast.innerText = config.message;\n    } else {\n      toast.appendChild(config.message);\n    }\n\n    this.hostContainer.appendChild(toast);\n\n    return {\n      onClose,\n      close: (result?: any) => {\n        removeToast(result);\n      },\n    };\n  }\n\n  render() {\n    return <Host></Host>;\n  }\n}\n"],"version":3}

package/dist/esm/ix-tooltip.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-3d163acd.js';
-import { a as autoUpdate, c as computePosition, s as shift, o as offset, b as arrow, d as autoPlacement } from './floating-ui.dom.esm-3130eda0.js';
+import { a as autoUpdate, c as computePosition, s as shift, o as offset, b as arrow, f as flip } from './floating-ui.dom.esm-3130eda0.js';
 
-const tooltipCss = ":host{display:inline-block;position:absolute;left:0px;top:0px;max-width:18.25rem;opacity:0;visibility:collapse;overflow-wrap:break-word;border-radius:0.25rem;background-color:var(--theme-tootlip--background);padding:0.375rem 0.75rem 0.375rem 0.875rem;box-shadow:var(--theme-shadow-4)}:host .tooltip-title{display:flex;align-items:center}:host .tooltip-title ::slotted(ix-icon){margin-right:0.35rem}:host(.visible){opacity:1;visibility:visible}:host .arrow,:host .arrow::before{position:absolute;width:8px;height:8px;background:inherit}:host .arrow{visibility:hidden}:host .arrow::before{visibility:visible;content:\"\";transform:rotate(45deg);background-color:var(--theme-tootlip--background)}";
+const tooltipCss = ":host{display:inline-block;position:fixed;left:0px;top:0px;z-index:var(--theme-z-index-tooltip);max-width:18.25rem;opacity:0;visibility:collapse !important;overflow-wrap:break-word;border-radius:0.25rem;background-color:var(--theme-tootlip--background);padding:0.375rem 0.75rem 0.375rem 0.875rem;box-shadow:var(--theme-shadow-4)}:host .tooltip-title{display:flex;align-items:center}:host .tooltip-title ::slotted(ix-icon){margin-right:0.35rem}:host(.visible){opacity:1;visibility:visible !important}:host(.visible) .arrow,:host(.visible) .arrow::before{position:absolute;width:8px;height:8px;background:inherit}:host(.visible) .arrow{visibility:hidden}:host(.visible) .arrow::before{visibility:visible;content:\"\";transform:rotate(45deg);background-color:var(--theme-tootlip--background)}";
 
 const Tooltip = class {
   constructor(hostRef) {
@@ -18,7 +18,7 @@ const Tooltip = class {
     return this.hostElement.shadowRoot.querySelector('.arrow');
   }
   destroyAutoUpdate() {
-    if (this.disposeAutoUpdate) {
+    if (this.disposeAutoUpdate !== undefined) {
       this.disposeAutoUpdate();
     }
   }
@@ -35,32 +35,36 @@ const Tooltip = class {
   }
   async computeTooltipPosition(target) {
     this.disposeAutoUpdate = autoUpdate(target, this.hostElement, async () => {
-      const computeResponse = await computePosition(target, this.hostElement, {
-        strategy: 'absolute',
-        placement: 'top',
-        middleware: [
-          shift(),
-          offset(8),
-          arrow({
-            element: this.arrowElement,
-          }),
-          autoPlacement({
-            alignment: 'start',
-            allowedPlacements: ['top', 'bottom', 'right', 'left'],
-          }),
-        ],
-      });
-      if (computeResponse.middlewareData.arrow) {
-        const { x, y } = computeResponse.middlewareData.arrow;
-        Object.assign(this.arrowElement.style, {
-          left: x != null ? `${x}px` : '',
-          top: y != null ? `${y}px` : '',
+      requestAnimationFrame(async () => {
+        const computeResponse = await computePosition(target, this.hostElement, {
+          strategy: 'fixed',
+          placement: 'top',
+          middleware: [
+            shift(),
+            offset(8),
+            arrow({
+              element: this.arrowElement,
+            }),
+            flip({
+              fallbackStrategy: 'initialPlacement',
+            }),
+          ],
+        });
+        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 { x, y } = computeResponse;
+        Object.assign(this.hostElement.style, {
+          left: x !== null ? `${x}px` : '',
+          top: y !== null ? `${y}px` : '',
         });
-      }
-      const { x, y } = computeResponse;
-      Object.assign(this.hostElement.style, {
-        left: x !== null ? `${x}px` : '',
-        top: y !== null ? `${y}px` : '',
       });
     }, {
       ancestorResize: true,

package/dist/esm/ix-tooltip.entry.js.map

@@ -1 +1 @@
-{"file":"ix-tooltip.entry.js","mappings":"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","names":[],"sources":["./src/components/tooltip/tooltip.scss?tag=ix-tooltip&encapsulation=shadow","./src/components/tooltip/tooltip.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  position: absolute;\n  left: 0px;\n  top: 0px;\n\n  max-width: 18.25rem;\n\n  opacity: 0;\n  visibility: collapse;\n  overflow-wrap: break-word;\n\n  border-radius: 0.25rem;\n  background-color: var(--theme-tootlip--background);\n  padding: 0.375rem 0.75rem 0.375rem 0.875rem;\n\n  box-shadow: var(--theme-shadow-4);\n\n  .tooltip-title {\n    display: flex;\n    align-items: center;\n\n    ::slotted(ix-icon) {\n      margin-right: 0.35rem;\n    }\n  }\n}\n\n:host(.visible) {\n  opacity: 1;\n  visibility: visible;\n}\n\n:host {\n  .arrow,\n  .arrow::before {\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    background: inherit;\n  }\n\n  .arrow {\n    visibility: hidden;\n  }\n\n  .arrow::before {\n    visibility: visible;\n    content: '';\n    transform: rotate(45deg);\n    background-color: var(--theme-tootlip--background);\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport {\n  arrow,\n  autoPlacement,\n  autoUpdate,\n  computePosition,\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) {\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        const computeResponse = await computePosition(\n          target,\n          this.hostElement,\n          {\n            strategy: 'absolute',\n            placement: 'top',\n            middleware: [\n              shift(),\n              offset(8),\n              arrow({\n                element: this.arrowElement,\n              }),\n              autoPlacement({\n                alignment: 'start',\n                allowedPlacements: ['top', 'bottom', 'right', 'left'],\n              }),\n            ],\n          }\n        );\n\n        if (computeResponse.middlewareData.arrow) {\n          const { x, y } = computeResponse.middlewareData.arrow;\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        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":"ix-tooltip.entry.js","mappings":"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","names":[],"sources":["./src/components/tooltip/tooltip.scss?tag=ix-tooltip&encapsulation=shadow","./src/components/tooltip/tooltip.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  position: fixed;\n  left: 0px;\n  top: 0px;\n  z-index: var(--theme-z-index-tooltip);\n\n  max-width: 18.25rem;\n\n  opacity: 0;\n  visibility: collapse !important;\n  overflow-wrap: break-word;\n\n  border-radius: 0.25rem;\n  background-color: var(--theme-tootlip--background);\n  padding: 0.375rem 0.75rem 0.375rem 0.875rem;\n\n  box-shadow: var(--theme-shadow-4);\n\n  .tooltip-title {\n    display: flex;\n    align-items: center;\n\n    ::slotted(ix-icon) {\n      margin-right: 0.35rem;\n    }\n  }\n}\n\n:host(.visible) {\n  opacity: 1;\n  visibility: visible !important;\n}\n\n:host(.visible) {\n  .arrow,\n  .arrow::before {\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    background: inherit;\n  }\n\n  .arrow {\n    visibility: hidden;\n  }\n\n  .arrow::before {\n    visibility: visible;\n    content: '';\n    transform: rotate(45deg);\n    background-color: var(--theme-tootlip--background);\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport {\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}

package/dist/esm/ix-tree_2.entry.js

@@ -510,6 +510,8 @@ const Tree = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.contextChange = createEvent(this, "contextChange", 7);
+    this.nodeToggled = createEvent(this, "nodeToggled", 7);
+    this.nodeClicked = createEvent(this, "nodeClicked", 7);
     this.nodeRemoved = createEvent(this, "nodeRemoved", 7);
     this.toggleListener = new Map();
     this.itemClickListener = new Map();
@@ -529,6 +531,7 @@ const Tree = class {
           e.stopPropagation();
           const context = this.getContext(list[index].id);
           context.isExpanded = !context.isExpanded;
+          this.nodeToggled.emit({ id: item.id, isExpaned: context.isExpanded });
           this.setContext(item.id, context);
         };
         el.addEventListener('toggle', toggleCallback);
@@ -574,6 +577,7 @@ const Tree = class {
             const context = this.getContext(item.id);
             context.isSelected = true;
             this.setContext(item.id, context);
+            this.nodeClicked.emit(item.id);
           };
           el.addEventListener('itemClick', itemClickCallback);
           this.itemClickListener.set(el, itemClickCallback);