@siemens/ix 4.0.0 → 4.1.0

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

@@ -1 +1 @@
-{"version":3,"file":"ix-pagination.entry.js","sources":["src/components/pagination/pagination.scss?tag=ix-pagination&encapsulation=shadow","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@use './common-variables' as vars;\n@use 'legacy/components/forms';\n@use '../icon-button/icon-button';\n@use 'mixins/shadow-dom/component';\n\n:host {\n  @include component.ix-component;\n\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 vars.$medium-space;\n  }\n\n  .page-selection {\n    width: 4.125rem;\n    text-align: center;\n    margin: 0 vars.$small-space;\n    -moz-appearance: textfield;\n    -webkit-appearance: textfield;\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: vars.$large-space;\n\n    ix-select {\n      width: 4.5rem;\n      margin-inline-start: vars.$large-space;\n    }\n  }\n\n  button {\n    width: auto;\n    min-width: 2rem;\n    height: 2rem;\n    padding: 0 0.5rem;\n  }\n\n  button + 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 {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\nimport { a11yBoolean } from '../utils/a11y';\nimport {\n  iconChevronLeftSmall,\n  iconChevronRightSmall,\n} from '@siemens/ix-icons/icons';\n\n@Component({\n  tag: 'ix-pagination',\n  styleUrl: 'pagination.scss',\n  shadow: true,\n})\nexport class Pagination {\n  private readonly baseButtonConfig: BaseButtonProps = {\n    variant: 'subtle-tertiary',\n    iconOnly: true,\n    iconOval: false,\n    disabled: false,\n    icon: '',\n    loading: false,\n    selected: false,\n    type: 'button',\n  };\n\n  private readonly maxCountPages = 7;\n\n  @Element() hostElement!: HTMLIxPaginationElement;\n\n  /**\n   * Advanced mode\n   */\n  @Prop() advanced = false;\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   * Hide item count in advanced mode\n   */\n  @Prop() hideItemCount = false;\n\n  /**\n   * Total number of pages\n   */\n  @Prop() count: number = 0;\n\n  /**\n   * Zero based index of currently selected page\n   */\n  @Prop({ mutable: true }) selectedPage = 0;\n\n  /**\n   * i18n label for 'Page'\n   */\n  @Prop({ attribute: 'i18n-page' }) i18nPage = 'Page';\n\n  /**\n   * i18n label for 'of'\n   */\n  @Prop({ attribute: 'i18n-of' }) i18nOf = 'of';\n\n  /**\n   * i18n label for 'Items'\n   */\n  @Prop({ attribute: 'i18n-items' }) i18nItems = 'Items';\n\n  /**\n   * ARIA label for the chevron left icon button\n   * Will be set as aria-label on the nested HTML button element\n   *\n   * @since 3.2.0\n   */\n  @Prop() ariaLabelChevronLeftIconButton?: string;\n\n  /**\n   * ARIA label for the chevron right icon button\n   * Will be set as aria-label on the nested HTML button element\n   *\n   * @since 3.2.0\n   */\n  @Prop() ariaLabelChevronRightIconButton?: string;\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    const oldIndex = this.selectedPage;\n\n    if (index < 0) {\n      this.selectedPage = 0;\n    } else if (index > this.count - 1) {\n      this.selectedPage = this.count - 1;\n    } else {\n      this.selectedPage = index;\n    }\n\n    const { defaultPrevented } = this.pageSelected.emit(this.selectedPage);\n\n    if (defaultPrevented) {\n      this.selectedPage = oldIndex;\n    }\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    const baseButtonProps: BaseButtonProps = {\n      ...this.baseButtonConfig,\n      onClick: () => this.selectPage(index),\n      selected: this.selectedPage === index,\n      ariaAttributes: {\n        'aria-pressed': a11yBoolean(this.selectedPage === index),\n      },\n    };\n\n    return <BaseButton {...baseButtonProps}>{index + 1}</BaseButton>;\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      const baseButtonProps = {\n        ...this.baseButtonConfig,\n        onClick: () => {\n          if (hasOverflowEnd) {\n            this.selectPage(this.selectedPage - Math.max(0, 2 * pageCount + 1));\n          } else {\n            this.selectPage(this.count - this.maxCountPages);\n          }\n        },\n      };\n      pageButtons.push(this.getPageButton(0));\n      pageButtons.push(<BaseButton {...baseButtonProps}>...</BaseButton>);\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      const baseButtonProps = {\n        ...this.baseButtonConfig,\n        onClick: () => {\n          if (hasOverflowStart) {\n            this.selectPage(this.selectedPage + Math.max(0, 2 * pageCount + 1));\n          } else {\n            this.selectPage(this.maxCountPages - 1);\n          }\n        },\n      };\n      pageButtons.push(<BaseButton {...baseButtonProps}>...</BaseButton>);\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.count || this.selectedPage === 0}\n          variant=\"subtle-tertiary\"\n          icon={iconChevronLeftSmall}\n          onClick={() => this.decrease()}\n          aria-label={this.ariaLabelChevronLeftIconButton}\n        ></ix-icon-button>\n\n        {this.advanced ? (\n          <div class=\"advanced-pagination\">\n            <ix-typography format=\"body\">{this.i18nPage}</ix-typography>\n            <input\n              class=\"ix-form-control page-selection\"\n              type=\"number\"\n              min=\"1\"\n              max={this.count}\n              value={this.selectedPage + 1}\n              onChange={(event: Event) => {\n                const eventTarget = event.target as HTMLInputElement;\n                if (eventTarget) {\n                  const index = Number.parseInt(eventTarget.value);\n                  this.selectPage(index - 1);\n                }\n              }}\n            />\n            <span class=\"total-count\">\n              <ix-typography format=\"body\">\n                {this.i18nOf} {this.count}\n              </ix-typography>\n            </span>\n          </div>\n        ) : (\n          <span class=\"basic-pagination\">{this.renderPageButtons()} </span>\n        )}\n\n        <ix-icon-button\n          disabled={!this.count || this.selectedPage === this.count - 1}\n          variant=\"subtle-tertiary\"\n          icon={iconChevronRightSmall}\n          onClick={() => this.increase()}\n          aria-label={this.ariaLabelChevronRightIconButton}\n        ></ix-icon-button>\n\n        {this.advanced && !this.hideItemCount && (\n          <span class=\"item-count\">\n            <ix-typography format=\"body\">{this.i18nItems}</ix-typography>\n            <ix-select\n              hideListHeader\n              i18nPlaceholder=\"\"\n              i18nSelectListHeader=\"\"\n              value={`${this.itemCount}`}\n              onValueChange={(e) => {\n                const count = Number.parseInt(\n                  Array.isArray(e.detail) ? e.detail[0] : e.detail\n                );\n\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      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ix-pagination.entry.js","sources":["src/components/pagination/pagination.scss?tag=ix-pagination&encapsulation=shadow","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@use './common-variables' as vars;\n@use 'legacy/components/forms';\n@use '../icon-button/icon-button';\n@use 'mixins/shadow-dom/component';\n\n:host {\n  @include component.ix-component;\n\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 vars.$medium-space;\n  }\n\n  .page-selection {\n    width: 4.125rem;\n    text-align: center;\n    margin: 0 vars.$small-space;\n    -moz-appearance: textfield;\n    -webkit-appearance: textfield;\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: vars.$large-space;\n\n    ix-select {\n      width: 4.5rem;\n      margin-inline-start: vars.$large-space;\n    }\n  }\n\n  button {\n    width: auto;\n    min-width: 2rem;\n    height: 2rem;\n    padding: 0 0.5rem;\n  }\n\n  button + 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 {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\nimport { a11yBoolean } from '../utils/a11y';\nimport {\n  iconChevronLeftSmall,\n  iconChevronRightSmall,\n} from '@siemens/ix-icons/icons';\n\n@Component({\n  tag: 'ix-pagination',\n  styleUrl: 'pagination.scss',\n  shadow: true,\n})\nexport class Pagination {\n  private readonly baseButtonConfig: BaseButtonProps = {\n    variant: 'subtle-tertiary',\n    iconOnly: true,\n    iconOval: false,\n    disabled: false,\n    icon: '',\n    loading: false,\n    selected: false,\n    type: 'button',\n  };\n\n  private readonly maxCountPages = 7;\n\n  @Element() hostElement!: HTMLIxPaginationElement;\n\n  /**\n   * Advanced mode\n   */\n  @Prop() advanced = false;\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   * Hide item count in advanced mode\n   */\n  @Prop() hideItemCount = false;\n\n  /**\n   * Total number of pages\n   */\n  @Prop() count: number = 0;\n\n  /**\n   * Zero based index of currently selected page\n   */\n  @Prop({ mutable: true }) selectedPage = 0;\n\n  /**\n   * i18n label for 'Page'\n   */\n  @Prop({ attribute: 'i18n-page' }) i18nPage = 'Page';\n\n  /**\n   * i18n label for 'of'\n   */\n  @Prop({ attribute: 'i18n-of' }) i18nOf = 'of';\n\n  /**\n   * i18n label for 'Items'\n   */\n  @Prop({ attribute: 'i18n-items' }) i18nItems = 'Items';\n\n  /**\n   * ARIA label for the chevron left icon button\n   * Will be set as aria-label on the nested HTML button element\n   *\n   * @since 3.2.0\n   */\n  @Prop() ariaLabelChevronLeftIconButton?: string;\n\n  /**\n   * ARIA label for the chevron right icon button\n   * Will be set as aria-label on the nested HTML button element\n   *\n   * @since 3.2.0\n   */\n  @Prop() ariaLabelChevronRightIconButton?: string;\n\n  /**\n   * ARIA label for the page selection input\n   * Will be set as aria-label on the nested HTML input element\n   *\n   * @since 4.1.0\n   */\n  @Prop() ariaLabelPageSelection = 'Page selection input';\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    const oldIndex = this.selectedPage;\n\n    if (index < 0) {\n      this.selectedPage = 0;\n    } else if (index > this.count - 1) {\n      this.selectedPage = this.count - 1;\n    } else {\n      this.selectedPage = index;\n    }\n\n    const { defaultPrevented } = this.pageSelected.emit(this.selectedPage);\n\n    if (defaultPrevented) {\n      this.selectedPage = oldIndex;\n    }\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    const baseButtonProps: BaseButtonProps = {\n      ...this.baseButtonConfig,\n      onClick: () => this.selectPage(index),\n      selected: this.selectedPage === index,\n      ariaAttributes: {\n        'aria-pressed': a11yBoolean(this.selectedPage === index),\n      },\n    };\n\n    return <BaseButton {...baseButtonProps}>{index + 1}</BaseButton>;\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      const baseButtonProps = {\n        ...this.baseButtonConfig,\n        onClick: () => {\n          if (hasOverflowEnd) {\n            this.selectPage(this.selectedPage - Math.max(0, 2 * pageCount + 1));\n          } else {\n            this.selectPage(this.count - this.maxCountPages);\n          }\n        },\n      };\n      pageButtons.push(this.getPageButton(0));\n      pageButtons.push(<BaseButton {...baseButtonProps}>...</BaseButton>);\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      const baseButtonProps = {\n        ...this.baseButtonConfig,\n        onClick: () => {\n          if (hasOverflowStart) {\n            this.selectPage(this.selectedPage + Math.max(0, 2 * pageCount + 1));\n          } else {\n            this.selectPage(this.maxCountPages - 1);\n          }\n        },\n      };\n      pageButtons.push(<BaseButton {...baseButtonProps}>...</BaseButton>);\n      pageButtons.push(this.getPageButton(this.count - 1));\n    }\n\n    return <span class=\"page-buttons\">{pageButtons}</span>;\n  }\n\n  private handlePageInput(inputValue: string) {\n    const value = Number.parseInt(inputValue, 10);\n    if (!Number.isNaN(value)) {\n      const clampedValue = Math.max(1, Math.min(value, this.count));\n      this.selectPage(clampedValue - 1);\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-icon-button\n          disabled={!this.count || this.selectedPage === 0}\n          variant=\"subtle-tertiary\"\n          icon={iconChevronLeftSmall}\n          onClick={() => this.decrease()}\n          aria-label={this.ariaLabelChevronLeftIconButton}\n        ></ix-icon-button>\n\n        {this.advanced ? (\n          <div class=\"advanced-pagination\">\n            <ix-typography format=\"body\">{this.i18nPage}</ix-typography>\n            <input\n              aria-label={this.ariaLabelPageSelection}\n              class=\"ix-form-control page-selection\"\n              type=\"number\"\n              min=\"1\"\n              max={this.count}\n              value={this.selectedPage + 1}\n              onChange={(event: Event) => {\n                const inputElement = event.target as HTMLInputElement;\n                this.handlePageInput(inputElement.value);\n              }}\n              onKeyDown={(event: KeyboardEvent) => {\n                if (['e', 'E', '+', '-', '.'].includes(event.key))\n                  event.preventDefault();\n                if (event.key === 'Enter') {\n                  const inputElement = event.target as HTMLInputElement;\n                  this.handlePageInput(inputElement.value);\n                  inputElement.blur();\n                }\n              }}\n              onBlur={(e: Event) => {\n                const inputElement = e.target as HTMLInputElement;\n                inputElement.value = (this.selectedPage + 1).toString();\n              }}\n            />\n            <span class=\"total-count\">\n              <ix-typography format=\"body\">\n                {this.i18nOf} {this.count}\n              </ix-typography>\n            </span>\n          </div>\n        ) : (\n          <span class=\"basic-pagination\">{this.renderPageButtons()} </span>\n        )}\n\n        <ix-icon-button\n          disabled={!this.count || this.selectedPage === this.count - 1}\n          variant=\"subtle-tertiary\"\n          icon={iconChevronRightSmall}\n          onClick={() => this.increase()}\n          aria-label={this.ariaLabelChevronRightIconButton}\n        ></ix-icon-button>\n\n        {this.advanced && !this.hideItemCount && (\n          <span class=\"item-count\">\n            <ix-typography format=\"body\">{this.i18nItems}</ix-typography>\n            <ix-select\n              hideListHeader\n              i18nPlaceholder=\"\"\n              i18nSelectListHeader=\"\"\n              value={`${this.itemCount}`}\n              onValueChange={(e) => {\n                const count = Number.parseInt(\n                  Array.isArray(e.detail) ? e.detail[0] : e.detail\n                );\n\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      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/ix-pane-layout.entry.js

@@ -235,7 +235,7 @@ const Panes = class {
         return pane ? pane.floating : false;
     }
     render() {
-        return (h(Host, { key: '8750c0c2d53cce0c8996dc28e8ed328d0036142e' }, !this.isMobile ? (this.layout == 'full-vertical' ? (h("div", { class: "side-panes-wrapper" }, h("div", { class: {
+        return (h(Host, { key: 'f5825e5fd84ca1f96e9eb6d19c528107167b4e16' }, !this.isMobile ? (this.layout == 'full-vertical' ? (h("div", { class: "side-panes-wrapper" }, h("div", { class: {
                 row: true,
                 'padding-left': this.hasPadding('left'),
                 'padding-right': this.hasPadding('right'),

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

@@ -454,7 +454,7 @@ const Pane = class {
     }
     render() {
         const rotate = !this.expanded && !this.isMobile && this.isLeftRightPane;
-        return (h(Host, { key: 'd90ef7a63b141b3af9c9f04aba41cf8ef13c448a', class: {
+        return (h(Host, { key: 'd4dcd94494a7a1a20cb9ce1613f60b07708a1a6a', class: {
                 'floating-pane': this.floating,
                 'inline-pane': !this.floating,
                 'mobile-overlay': this.expanded && this.isMobile,
@@ -478,28 +478,28 @@ const Pane = class {
                     !this.expanded &&
                     !this.floating,
                 'not-visible': this.hideOnCollapse && !this.expanded,
-            }, "aria-expanded": a11yBoolean(this.expanded) }, h("aside", { key: '02cb43bcca7a7d6acf5d341f9a4e7ee5739f72c1', id: `pane-${this.composition}`, class: {
+            }, "aria-expanded": a11yBoolean(this.expanded) }, h("aside", { key: '16c38b4a2706ee2cc82975e7cc8f48434997d668', id: `pane-${this.composition}`, class: {
                 'top-bottom-pane': this.isBottomTopPane && !this.isMobile,
                 'left-right-pane': this.isLeftRightPane && !this.isMobile,
                 'mobile-pane': this.isMobile,
                 expanded: this.expanded,
-            } }, h("div", { key: 'be05dfaf0f1080ad0bcdbd41ea01ac151b2aeb86', id: "title-div", class: {
+            } }, h("div", { key: 'e4f68f0ab4d1c720bd2bbd2c8a3362e8c1166216', id: "title-div", class: {
                 title: !this.isMobile && !this.hideOnCollapse && !this.showContent,
                 'title-finished': !this.isMobile && !this.hideOnCollapse && this.showContent,
                 'title-expanded': !this.isMobile && !this.hideOnCollapse && this.expanded,
                 'title-hide-on-collapse': !this.isMobile && this.hideOnCollapse,
                 'title-mobile': this.isMobile,
                 'header-gap': !this.isMobile && !this.hideOnCollapse,
-            } }, h("ix-icon-button", { key: '767886aea1428fdc4c10875de8eb0dd3750b5cdf', class: "title-icon", size: "24", icon: this.expanded
+            } }, h("ix-icon-button", { key: '3d6a8b606b790e4a0401de198dd7f96536cff5a9', class: "title-icon", size: "24", icon: this.expanded
                 ? this.isMobile || this.hideOnCollapse
                     ? iconClose
                     : this.expandIcon
                 : this.minimizeIcon, iconColor: this.expanded && (this.isMobile || this.hideOnCollapse)
                 ? 'color-soft-text'
-                : undefined, variant: "subtle-tertiary", onClick: () => this.dispatchExpandedChangedEvent(), "aria-controls": `pane-${this.composition}`, "aria-label": this.ariaLabelCollapseCloseButton }), h("div", { key: '5fd6b9619ce193b891fd98a9bee39aad31f3747d', class: {
+                : undefined, variant: "subtle-tertiary", onClick: () => this.dispatchExpandedChangedEvent(), "aria-controls": `pane-${this.composition}`, "aria-label": this.ariaLabelCollapseCloseButton }), h("div", { key: 'e7410bc38e5c387ac6b92d7805cd4b82a4e5517e', class: {
                 'title-text': true,
                 rotate: rotate,
-            } }, this.icon && (h("ix-icon", { key: '38d9ad10b7d61868aa94b9b02ca3f74063e1f6e8', class: "pane-icon", size: "24", name: this.icon, "aria-label": this.ariaLabelIcon })), h("div", { key: '4b69e18d0297c51b814531353192a2199477ca29', class: "title-text-overflow" }, h("ix-typography", { key: 'fe5a51d0b8189484c85c7e373e4144aacdda2605', format: "h4" }, this.heading)), this.expanded && (h("div", { key: '39edc85909cabbbc8103d6a322c0385ae9d495b5', class: "slot-header" }, h("slot", { key: '886bd5bc2aad66c103698cf38259072ca524563a', name: "header" }))))), h("div", { key: 'e4bdfa446878efd622c8d1c10ad53f94caf0da9d', class: "side-pane-content", hidden: !this.showContent }, h("slot", { key: '967fed090b6ab347a2140815dd93a29dee023b54' })))));
+            } }, this.icon && (h("ix-icon", { key: '0429aadaabf1c6ff85d2858530d134884dde885a', class: "pane-icon", size: "24", name: this.icon, "aria-label": this.ariaLabelIcon })), h("div", { key: 'a1f91e5bfc947a90423df8706bc97c13c5fe8f5b', class: "title-text-overflow" }, h("ix-typography", { key: 'c7e45df0f33e0ca37fe1ca02ed552c7602e241f4', format: "h4" }, this.heading)), this.expanded && (h("div", { key: '1780fd1205121d168c240ef7f2990318f42cef52', class: "slot-header" }, h("slot", { key: 'ff9c90ed6e1c9fd23850168a0cb6457aeb27663f', name: "header" }))))), h("div", { key: '67ce0be6d20ecbaf426f6d11acf9bdfab14d9945', class: "side-pane-content", hidden: !this.showContent }, h("slot", { key: 'd5ee452fe64264f93ba57300a099abbaa89cfbd5' })))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

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

@@ -53,13 +53,13 @@ const Pill = class {
                 [this.outline ? 'borderColor' : 'backgroundColor']: this.background,
             };
         }
-        return (h(Host, { key: '95aefc19a906deedb01249939024ad937f82f212', style: this.variant === 'custom'
+        return (h(Host, { key: 'aa669a2d03f9fc237cc40003d5a28718a403b764', style: this.variant === 'custom'
                 ? {
                     '--ix-icon-button-color': this.pillColor,
                 }
                 : {}, class: {
                 'align-left': this.alignLeft,
-            } }, h("div", { key: '2e056a3b7a048b087ea1cd7cfbfed90a899cb5b1', ref: this.containerElementRef, style: Object.assign({}, customStyle), class: {
+            } }, h("div", { key: '0e15da18791505629957df85918d7752cfa62662', ref: this.containerElementRef, style: Object.assign({}, customStyle), class: {
                 container: true,
                 outline: this.outline,
                 inactive: false,
@@ -74,9 +74,9 @@ const Pill = class {
                 closable: false,
                 icon: !!this.icon,
                 'with-gap': !this.iconOnly,
-            } }, this.icon && (h("ix-icon", { key: '7ad101403100e938791c5f6c8c1ea5df7bc9097f', class: {
+            } }, this.icon && (h("ix-icon", { key: '49abe1808017f85a25fb2d8abd24db421f43f762', class: {
                 'with-icon': true,
-            }, name: this.icon, size: '16', "aria-label": this.ariaLabelIcon })), h("span", { key: '5a7fafab5c670fb778febc21477eefe42475aea3', class: "slot-container" }, h("slot", { key: '595de03aae3978e6b40674adf16ffb3b47db1e6d', onSlotchange: () => this.checkIfContentAvailable() }))), this.getTooltip()));
+            }, name: this.icon, size: '16', "aria-label": this.ariaLabelIcon })), h("span", { key: '582ec1baae99962550035f613a8f74d9d8d9f56e', class: "slot-container" }, h("slot", { key: '46c0481383cfbc55dcb60981cb10dd2b460930eb', onSlotchange: () => this.checkIfContentAvailable() }))), this.getTooltip()));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/ix-progress-indicator.entry.js

@@ -132,17 +132,17 @@ const ProgressIndicator = class {
     render() {
         const normalizedValue = ((this.value - this.min) / (this.max - this.min)) * 100;
         const clampedValue = Math.max(0, Math.min(normalizedValue, 100));
-        return (h(Host, { key: '640d68ad2e2fd3f61c60c91ea2b18725334a939f', class: {
+        return (h(Host, { key: '55cecc574b40c14bd8a4ba7a4d1f0e1d8d73f07b', class: {
                 linear: this.type === 'linear',
                 circular: this.type === 'circular',
-            }, tabIndex: -1 }, h("div", { key: 'c9cbf3913838d5ea0d9f89dc46680d86690a3382', class: {
+            }, tabIndex: -1 }, h("div", { key: '3db1f913e4c4793106d7865b52ef4dcb07889188', class: {
                 'progress-indicator': true,
                 [this.size]: true,
                 [this.status]: true,
                 ['text-center']: this.textAlignment === 'center',
                 ['text-left']: this.textAlignment === 'left',
                 ['text-right']: this.textAlignment === 'right',
-            } }, this.label && (h("ix-typography", { key: '25682b4008e976cb4a02d2bb957baed33e0250d7', format: "label", textColor: this.status === 'error' ? 'alarm' : 'soft', class: 'label' }, this.label)), h("div", { key: '74a13977a442268c72278f005965d5263e741e12', class: "progress-container" }, this.type === 'linear' ? (h(Fragment, null, h(LinearBar, { value: clampedValue, status: this.status }), h("div", { class: "linear-slot" }, h("slot", null)))) : (h(CircularProgress, { status: this.status, alignment: this.textAlignment, value: clampedValue, size: this.size }, h("slot", null)))), this.showTextAsTooltip === true && this.helperText ? (h("ix-tooltip", { for: this.hostElement, showDelay: 500, placement: "bottom" }, this.getHelperText())) : (this.getHelperText()))));
+            } }, this.label && (h("ix-typography", { key: 'd8cd960dcfee8bfc20102d2b071661a186dcc854', format: "label", textColor: this.status === 'error' ? 'alarm' : 'soft', class: 'label' }, this.label)), h("div", { key: 'd149e99776e95f8051cc02e70d16d3c5103d98ba', class: "progress-container" }, this.type === 'linear' ? (h(Fragment, null, h(LinearBar, { value: clampedValue, status: this.status }), h("div", { class: "linear-slot" }, h("slot", null)))) : (h(CircularProgress, { status: this.status, alignment: this.textAlignment, value: clampedValue, size: this.size }, h("slot", null)))), this.showTextAsTooltip === true && this.helperText ? (h("ix-tooltip", { for: this.hostElement, showDelay: 500, placement: "bottom" }, this.getHelperText())) : (this.getHelperText()))));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/ix-push-card.entry.js

@@ -16,7 +16,7 @@ const PushCard = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: '32d1c2383ba5f21901eacfd3048af7435100b2b7', class: `card-${this.variant}` }, h("ix-card", { key: 'b1d03d963e570c329056cf3eb70c09ef6abc13a9', variant: this.variant }, h("ix-card-content", { key: '9c46d2744676c929137f8bd9dd9ac1058d6c6a53' }, h("ix-card-title", { key: '76c052d9be63151295802b58d42e269dc0149c68' }, this.icon ? (h("ix-icon", { class: 'icon', name: this.icon, size: "32", "aria-label": this.ariaLabelIcon })) : null, h("ix-typography", { key: 'be3a399500fa1dc58c10c8d01eb1691fb662940f', format: "display-xxl" }, (_a = this.notification) !== null && _a !== void 0 ? _a : 0), h("slot", { key: 'eadeb7a0b034113e2e0a5d8557a8bf9000027306', name: "title-action" })), h("ix-typography", { key: '93dd2faeba0563a3e7c195941dc1424975e032fb', format: "h4" }, this.heading), h("ix-typography", { key: '3279cd3e6b24c0029e8d83a66a5f3344eee496b4' }, this.subheading)), h("ix-card-accordion", { key: 'c36c63dac6e2ccf61745143a0fa5bf82bebac085', collapse: !this.expanded, variant: this.variant }, h("slot", { key: '7567ec4ff104a9933a632004aea3b3e607660471' })))));
+        return (h(Host, { key: 'ce5e4eb49ffe548ae912dfb9df2ff02e570aef15', class: `card-${this.variant}` }, h("ix-card", { key: '09ee07b5244171d3cd2a2eaf99180a71364326e6', variant: this.variant }, h("ix-card-content", { key: '4ca37f7946dfaf600c21fa516a6a79c95c3369f3' }, h("ix-card-title", { key: '14508386f9ad32b641b7404b8d1845f8f215a12f' }, this.icon ? (h("ix-icon", { class: 'icon', name: this.icon, size: "32", "aria-label": this.ariaLabelIcon })) : null, h("ix-typography", { key: '004e0f78e304e16b085cba401d4fe6067c579819', format: "display-xxl" }, (_a = this.notification) !== null && _a !== void 0 ? _a : 0), h("slot", { key: 'b5207aabd014e0e180eb1248795bccc23c09b850', name: "title-action" })), h("ix-typography", { key: 'e39c0d3762869afd918cf9f8bb75bcbad35798d2', format: "h4" }, this.heading), h("ix-typography", { key: '52c82e776f50a1e848cb163cf974402fc58a5011' }, this.subheading)), h("ix-card-accordion", { key: '28ba4043b6494617eb0a4ea03eca56c198e10766', collapse: !this.expanded, variant: this.variant }, h("slot", { key: 'f2be8b7cd43af05c3af1be4a5642871e3413d6f8' })))));
     }
 };
 PushCard.style = pushCardCss;

package/dist/esm/ix-radio-group.entry.js

@@ -141,10 +141,10 @@ const RadiobuttonGroup = class {
         nextRadio.focus();
     }
     render() {
-        return (h(Host, { key: '25eec92511036bb23386e7ccd58ed9529a8d6723', onIxBlur: () => (this.touched = true), ref: this.groupRef, role: "radiogroup" }, h("ix-field-wrapper", { key: '6651bfac925b36a90036e41dc5c0040a8730a8da', label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, isInvalid: this.isInvalid, controlRef: this.groupRef }, h("div", { key: '76d7c9f366118f8d056e94cc079fc23a0b21eea5', class: {
+        return (h(Host, { key: 'db3158ccabcd99d1b5185607b848c424a4c4c970', onIxBlur: () => (this.touched = true), ref: this.groupRef, role: "radiogroup" }, h("ix-field-wrapper", { key: '5668fbc12f4d264869dfe03dc2bbd3d380da6ae1', label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, isInvalid: this.isInvalid, controlRef: this.groupRef }, h("div", { key: 'a5ec59c15eb8353d66bc6f0668dd7148dbd447a6', class: {
                 'checkbox-container': true,
                 'row-layout': this.direction === 'row',
-            } }, h("slot", { key: '231e640d7a46d5428b0c8a852c41fe08bbfdbe09' })))));
+            } }, h("slot", { key: '325b19034d55cc20cd556a24585d05ce32f22bb6' })))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

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

@@ -114,17 +114,17 @@ const Radio = class {
         if (this.disabled) {
             tabIndex = -1;
         }
-        return (h(Host, { key: 'f2af88d1133c45be1101d9148f8e00f5428be7a6', "aria-checked": a11yBoolean(this.checked), "aria-disabled": a11yBoolean(this.disabled), role: "radio", tabindex: tabIndex, class: {
+        return (h(Host, { key: '0a08dcbeaaf21bb9063ff44dbb9b7fec0bd18b85', "aria-checked": a11yBoolean(this.checked), "aria-disabled": a11yBoolean(this.disabled), role: "radio", tabindex: tabIndex, class: {
                 disabled: this.disabled,
                 checked: this.checked,
             }, onClick: () => {
                 if (this.disabled)
                     return;
                 this.setCheckedState(true);
-            }, onKeyDown: (event) => this.onKeyDown(event), onBlur: () => this.ixBlur.emit() }, h("label", { key: '93f6a862ac81885b247dc499d34e966d56973970' }, h("div", { key: '253b7ae5544c8d8ee3449ea0be187246cbe314d5', class: "radio-button" }, h("div", { key: '2e0d99a793f5ddd3b3d5a5d32732e8cd88d8b1f5', "aria-hidden": "true", class: {
+            }, onKeyDown: (event) => this.onKeyDown(event), onBlur: () => this.ixBlur.emit() }, h("label", { key: 'ba82e05023a706e366cede669060ec11d2848754' }, h("div", { key: 'c3b75eea221618adc27dec099089dac0f84a91ac', class: "radio-button" }, h("div", { key: 'd5d10cfce1442f641f939aa16a6feb79fc38caf0', "aria-hidden": "true", class: {
                 ['radio-checkmark']: true,
                 checked: this.checked,
-            } }, h("div", { key: '7ad24225a37a30e1f002bc07f450a85eb42b7383', class: "checkmark", style: { visibility: this.checked ? 'visible' : 'hidden' } }))), this.label && (h("ix-typography", { key: '7790a763f1a329cc3e0595aeddbe7e5a66c8339e', format: "label", textColor: this.disabled ? 'weak' : 'std' }, this.label, h("slot", { key: 'ff24cb9646a2a1c4b18236af291d13cd044f3235' }))))));
+            } }, h("div", { key: 'fe7c6830a7fb254291fe95d4310b59bd32ed9492', class: "checkmark", style: { visibility: this.checked ? 'visible' : 'hidden' } }))), this.label && (h("ix-typography", { key: 'bc5fe1821b5686760eb7fa3959cf30b54cca40ee', format: "label", textColor: this.disabled ? 'weak' : 'std' }, this.label, h("slot", { key: 'a72b3d10cdcbaa398a6f59b9ce1d036f12e4819c' }))))));
     }
     static get formAssociated() { return true; }
     get hostElement() { return getElement(this); }

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

@@ -46,6 +46,13 @@ const Select = class {
          * A Boolean attribute indicating that an option with a non-empty string value must be selected
          */
         this.required = false;
+        /**
+         * ARIA label for the chevron down icon button
+         * Will be set as aria-label on the nested HTML button element
+         *
+         * @since 3.2.0
+         */
+        this.ariaLabelChevronDownIconButton = 'Open select dropdown';
         /**
          * Current selected value.
          * This corresponds to the value property of ix-select-items
@@ -87,10 +94,18 @@ const Select = class {
          * Information inside of dropdown if no items where found with current filter text
          */
         this.i18nNoMatches = 'No matches';
+        /**
+         * Chip label for all selected items in multiple mode.
+         */
+        this.i18nAllSelected = 'All';
         /**
          * Hide list header
          */
         this.hideListHeader = false;
+        /**
+         * Show "all" chip when all items are selected in multiple mode
+         */
+        this.collapseMultipleSelection = false;
         this.dropdownShow = false;
         this.selectedLabels = [];
         this.isDropdownEmpty = false;
@@ -212,6 +227,14 @@ const Select = class {
             return;
         }
         this.updateSelection();
+        if (this.isMultipleMode && this.inputFilterText) {
+            this.clearInput();
+            this.removeHiddenFromItems();
+            if (this.arrowFocusController) {
+                this.arrowFocusController.items = this.visibleNonShadowItems;
+            }
+            this.navigationItem = undefined;
+        }
     }
     emitAddItem(value) {
         var _a;
@@ -530,6 +553,24 @@ const Select = class {
             this.editable &&
             this.inputFilterText);
     }
+    shouldDisplayAllChip() {
+        return (this.selectedItems.length === this.items.length &&
+            this.collapseMultipleSelection);
+    }
+    renderAllChip() {
+        return (h("ix-filter-chip", { disabled: this.disabled || this.readonly, ariaLabelCloseIconButton: this.i18nAllSelected, onCloseClick: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                this.clear();
+            } }, `${this.i18nAllSelected} (${this.selectedItems.length})`));
+    }
+    renderChip(item) {
+        return (h("ix-filter-chip", { disabled: this.disabled || this.readonly, key: item.value, onCloseClick: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                this.itemClick(item.value);
+            } }, item.label));
+    }
     onValidationChange({ isInvalid, isInvalidByRequired, isValid, isInfo, isWarning, }) {
         this.isInvalid = isInvalid || isInvalidByRequired;
         this.isValid = isValid;
@@ -569,9 +610,9 @@ const Select = class {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h(Host, { key: '2113db5b5d04704c2bc60f2bb04c8886d9bc5f4c', "aria-disabled": a11yBoolean(this.disabled), class: {
+        return (h(Host, { key: '1610cc7dd06025b8dc05cd905eb1fad5574a64f8', "aria-disabled": a11yBoolean(this.disabled), class: {
                 disabled: this.disabled,
-            } }, h("ix-field-wrapper", { key: 'd48ae99ecb04db8ffa4a22af08ccf89ce7c080be', required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, h("div", { key: 'de5fd6ec7e718893bf763d48032a8ee084cd59a3', class: {
+            } }, h("ix-field-wrapper", { key: '912ca0f6e59259ea7de5fbb4857357fcf1db8370', required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, h("div", { key: '217ad54b9ca7a3e7aa9e60d89482b5fbc5389fc1', class: {
                 select: true,
                 disabled: this.disabled,
                 readonly: this.readonly,
@@ -579,13 +620,11 @@ const Select = class {
                 this.dropdownAnchorRef(ref);
                 if (!this.editable)
                     this.dropdownWrapperRef(ref);
-            } }, h("div", { key: '4128e9c3bae2b348948606783b2d07d427e1e173', class: "input-container" }, h("div", { key: 'b36ef6be27a9b23f11517e44551d902389fcba08', 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, key: item.value, onCloseClick: (e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    this.itemClick(item.value);
-                } }, item.label)))
-            : '', h("div", { key: 'f86b26dab24944a087f1977bc5fbc898002944d4', class: "trigger" }, h("input", { key: 'c8237e81cf58258ad73a125e082513bc55da5160', autocomplete: "off", "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, required: this.required, type: "text", class: {
+            } }, h("div", { key: '58d7051c6e884dc714643dcf974f7424b4581dfb', class: "input-container" }, h("div", { key: 'be6fec6f27345d8033b9b56ca3760c953951b801', class: "chips" }, this.isMultipleMode &&
+            this.items.length !== 0 &&
+            (this.shouldDisplayAllChip()
+                ? this.renderAllChip()
+                : (_a = this.selectedItems) === null || _a === void 0 ? void 0 : _a.map((item) => this.renderChip(item))), h("div", { key: 'a9b0c66c623856ab4b2c34f136bbef89a4b3377f', class: "trigger" }, h("input", { key: '1920a23f38ce924fae991be2b5c4a760031aae1f', autocomplete: "off", "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, required: this.required, type: "text", class: {
                 'allow-clear': this.allowClear && !!((_b = this.selectedLabels) === null || _b === void 0 ? void 0 : _b.length),
             }, placeholder: this.placeholderValue(), value: (_c = this.inputValue) !== null && _c !== void 0 ? _c : '', ref: (ref) => {
                 this.inputElement = ref;
@@ -604,7 +643,7 @@ const Select = class {
                 : iconChevronDownSmall, variant: "subtle-tertiary", ref: (ref) => {
                 if (this.editable)
                     this.dropdownWrapperRef(ref);
-            }, "aria-label": this.ariaLabelChevronDownIconButton }))))))), h("ix-dropdown", { key: '1c304ed548a2b2d30e39a53757fff6291417e680', ref: (ref) => (this.dropdownElement = ref), show: this.dropdownShow, closeBehavior: this.isMultipleMode ? 'outside' : 'both', class: {
+            }, "aria-label": this.ariaLabelChevronDownIconButton }))))))), h("ix-dropdown", { key: '4fcf2193ed3cc0faea0e5de7acab2835751c5583', ref: (ref) => (this.dropdownElement = ref), show: this.dropdownShow, closeBehavior: this.isMultipleMode ? 'outside' : 'both', class: {
                 'display-none': this.disabled || this.readonly,
             }, anchor: this.dropdownAnchorRef.waitForCurrent(), trigger: this.dropdownWrapperRef.waitForCurrent(), onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "bottom-start", overwriteDropdownStyle: async () => {
                 var _a, _b;
@@ -620,12 +659,12 @@ const Select = class {
                     styleOverwrites.maxWidth = `min(${this.dropdownMaxWidth}, 100%)`;
                 }
                 return styleOverwrites;
-            } }, h("div", { key: 'f338a319e31998b5920812726cf92bbca06c85e1', class: {
+            } }, h("div", { key: '428a499947d6f345a83d075d1749831d6b1ab348', class: {
                 'select-list-header': true,
                 hidden: this.hideListHeader || this.isDropdownEmpty,
-            }, title: this.i18nSelectListHeader, onClick: (e) => e.preventDefault() }, this.i18nSelectListHeader), h("slot", { key: 'd873c28ecd6dbb3343d7473e8318742d36ea3626', onSlotchange: () => {
+            }, title: this.i18nSelectListHeader, onClick: (e) => e.preventDefault() }, this.i18nSelectListHeader), h("slot", { key: '9bffa4284f53b45116dfff2f142fd2f4aea2032c', onSlotchange: () => {
                 this.updateSelection();
-            } }), h("div", { key: '91119d208ae834e7c6be27190472258db2d0aebb', ref: (ref) => (this.customItemsContainerElement = ref) }), this.isAddItemVisible() ? (h("ix-dropdown-item", { "data-testid": "add-item", icon: iconPlus, class: {
+            } }), h("div", { key: 'a039c9fda5d61358d39ae9cdc08df2fc82b55fa7', ref: (ref) => (this.customItemsContainerElement = ref) }), this.isAddItemVisible() ? (h("ix-dropdown-item", { "data-testid": "add-item", icon: iconPlus, class: {
                 'add-item': true,
             }, label: this.inputFilterText, onItemClick: (e) => {
                 e.preventDefault();