@siemens/ix 2.4.1 → 2.5.0

package/dist/esm/ix-card-list.entry.js.map

@@ -1 +1 @@
-{"file":"ix-card-list.entry.js","mappings":"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","names":[],"sources":["src/components/card-list/card-list.scss?tag=ix-card-list&encapsulation=shadow","src/components/card-list/card-list.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@import 'mixins/shadow-dom/component';\n\n$CardList__Title__Height: 1.5rem;\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  align-items: flex-start;\n  margin: 0.5rem;\n\n  .CardList_Title {\n    display: flex;\n    position: relative;\n    height: $CardList__Title__Height;\n    align-items: center;\n    width: 100%;\n    margin-bottom: 0.5rem;\n  }\n\n  .CardList__Title__Button {\n    margin-right: 1rem;\n    transition: var(--theme-default-time) transform ease-in-out;\n  }\n\n  .CardList__Title__Button__Collapsed {\n    transform: rotate(-90deg);\n  }\n\n  .CardList__Title__Show__All {\n    align-self: center;\n    margin-left: auto;\n    margin-right: 0px;\n  }\n\n  .CardList__Content {\n    display: flex;\n    position: relative;\n    height: calc(100% - #{$CardList__Title__Height});\n    width: 100%;\n    gap: 1.5rem;\n    transition: var(--theme-default-time) ease-in-out;\n    overflow: auto;\n  }\n\n  .CardList__Content__Collapsed {\n    min-height: 0px;\n    max-height: 0px;\n    overflow: hidden;\n    opacity: 0;\n  }\n\n  .CardList__Style__Flexbox__Scroll {\n    flex-wrap: wrap;\n  }\n\n  .CardList__Style__Infinite__Scroll {\n    flex-wrap: nowrap;\n\n    -ms-overflow-style: none;\n    scrollbar-width: none;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  .CardList__Overflow {\n    display: block;\n    position: relative;\n    height: 100%;\n    width: 100%;\n    pointer-events: all;\n    mask-image: var(--ix-card-list-overflow, none);\n  }\n\n  .Show__All__Card {\n    display: flex;\n    position: relative;\n\n    align-self: flex-start;\n    justify-self: center;\n\n    max-width: 11.25rem;\n    min-width: 11.25rem;\n    width: 11.25rem;\n\n    min-height: 11.25rem;\n    max-height: 11.25rem;\n    height: 11.25rem;\n\n    --ix-card-border-color: var(--theme-color-primary);\n    color: var(--theme-color-primary);\n  }\n\n  .CardList__Style__Infinite__Scroll .Show__All__Card {\n    margin-top: 2.375rem;\n  }\n\n  .CardList__Style__Flexbox__Scroll .Show__All__Card {\n    margin-bottom: 2.375rem;\n  }\n\n  .Show__All__Card:hover {\n    background-color: var(--theme-color-ghost--hover);\n  }\n\n  .Show__All__Card:active {\n    background-color: var(--theme-color-ghost--active);\n  }\n\n  .Show__All__Card__Content {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .Show__All__Card__Icon {\n    display: flex;\n    position: absolute;\n    height: 4rem;\n    width: 4rem;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .Show__All__Card__Text {\n    margin-bottom: 0px;\n    margin-top: auto;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\nfunction CardListTitle(props: {\n  label: string;\n  isCollapsed: boolean;\n  onClick: (e: MouseEvent) => void;\n  onShowAllClick: (e: MouseEvent) => void;\n  showAllLabel: string;\n  showAllCounter: number;\n  hideShowAll: boolean;\n}) {\n  if (props.label === '') {\n    return null;\n  }\n\n  return (\n    <div class=\"CardList_Title\">\n      <ix-icon-button\n        ghost\n        icon={'chevron-down'}\n        onClick={props.onClick}\n        color=\"color-primary\"\n        class={{\n          CardList__Title__Button: true,\n          CardList__Title__Button__Collapsed: props.isCollapsed,\n        }}\n      ></ix-icon-button>\n      <ix-typography variant=\"large-single\">{props.label}</ix-typography>\n      {!props.hideShowAll && (\n        <ix-button\n          class=\"CardList__Title__Show__All\"\n          ghost\n          onClick={props.onShowAllClick}\n        >\n          <span>{props.showAllLabel}</span>\n          <span>\n            {!isNaN(props.showAllCounter) ? ` (${props.showAllCounter})` : null}\n          </span>\n        </ix-button>\n      )}\n    </div>\n  );\n}\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card-list',\n  styleUrl: 'card-list.scss',\n  shadow: true,\n})\nexport class CardList {\n  /**\n   * Name the card list\n   */\n  @Prop() label: string;\n\n  /**\n   * Collapse the list\n   */\n  @Prop({ mutable: true }) collapse = false;\n\n  /**\n   * List style\n   */\n  @Prop() listStyle: 'stack' | 'scroll' = 'stack';\n\n  /**\n   * Maximal visible cards\n   *\n   * @internal\n   */\n  @Prop() maxVisibleCards = 12;\n\n  /**\n   * Overwrite the default show all count.\n   * */\n  @Prop() showAllCount: number | undefined;\n\n  /**\n   * Suppress the overflow handling of child elements\n   */\n  @Prop() suppressOverflowHandling = false;\n\n  /**\n   * Hide the show all button\n   *\n   * @since 2.2.0\n   */\n  @Prop() hideShowAll = false;\n\n  /**\n   * i18n Show all button\n   */\n  @Prop() i18nShowAll = 'Show all';\n\n  /**\n   * i18n More cards available\n   */\n  @Prop() i18nMoreCards = 'There are more cards available';\n\n  /**\n   * Fire event when the collapse state is changed by the user\n   */\n  @Event() collapseChanged: EventEmitter<boolean>;\n\n  /**\n   * Fire event when the collapse state is changed by the user\n   */\n  @Event() showAllClick: EventEmitter<{\n    nativeEvent: MouseEvent;\n  }>;\n\n  /**\n   * Fire event when the show more card is clicked.\n   */\n  @Event() showMoreCardClick: EventEmitter<{\n    nativeEvent: MouseEvent;\n  }>;\n\n  @Element() hostElement: HTMLIxCardListElement;\n\n  @State() private hasOverflowingElements = false;\n  @State() private numberOfOverflowingElements = 0;\n  @State() private numberOfAllChildElements = 0;\n  @State() private leftScrollDistance = 0;\n  @State() private rightScrollDistance = 0;\n\n  private observer: MutationObserver;\n\n  private onCardListVisibilityToggle() {\n    this.collapse = !this.collapse;\n    this.collapseChanged.emit(this.collapse);\n  }\n\n  private onShowAllClick(event: MouseEvent) {\n    this.showAllClick.emit({\n      nativeEvent: event,\n    });\n  }\n\n  private getListChildren() {\n    const slot = this.hostElement.shadowRoot.querySelector(\n      '.CardList__Content > slot'\n    ) as HTMLSlotElement;\n    return slot.assignedElements({ flatten: true });\n  }\n\n  private changeVisibilityOfSlotChildren() {\n    const childElements = this.getListChildren();\n    childElements.forEach((element, index) => {\n      if (element instanceof HTMLElement) {\n        if (index > this.maxVisibleCards - 1) {\n          element.classList.add('d-none');\n          return;\n        }\n        element.classList.remove('d-none');\n      }\n    });\n    this.hasOverflowingElements = childElements.length > this.maxVisibleCards;\n    this.numberOfOverflowingElements =\n      childElements.length - this.maxVisibleCards;\n\n    this.numberOfAllChildElements = childElements.length;\n    this.detectOverflow();\n  }\n\n  private registerOverflowHandler() {\n    this.observer = createMutationObserver(() => {\n      this.changeVisibilityOfSlotChildren();\n    });\n\n    this.observer.observe(\n      this.hostElement.shadowRoot.querySelector('.CardList__Content'),\n      {\n        childList: true,\n        subtree: true,\n      }\n    );\n\n    requestAnimationFrame(() => {\n      this.changeVisibilityOfSlotChildren();\n    });\n  }\n\n  private shouldHandleOverflow() {\n    if (this.suppressOverflowHandling) {\n      return false;\n    }\n    if (this.listStyle === 'stack' || this.listStyle === 'scroll') {\n      return true;\n    }\n  }\n\n  private get listElement() {\n    return this.hostElement.shadowRoot.querySelector('.CardList__Content');\n  }\n\n  private onCardListScroll() {\n    this.detectOverflow();\n  }\n\n  private isShowMoreCardVisible() {\n    return (\n      this.suppressOverflowHandling === false && this.hasOverflowingElements\n    );\n  }\n\n  private getOpacityFromScrollDistance(distance: number) {\n    if (!this.listElement) {\n      return 0;\n    }\n\n    if (distance === 0) {\n      return 0;\n    }\n\n    if (distance > 100) {\n      return 1;\n    }\n\n    return distance / 100;\n  }\n\n  private computeMaskLayer() {\n    const maxOverflowWidth = 80;\n    const maskLayer = `linear-gradient(\n      90deg,\n      transparent 0px,\n      black ${\n        maxOverflowWidth *\n        (this.getOpacityFromScrollDistance(this.leftScrollDistance) > 0 ? 1 : 0)\n      }px,\n      black calc(100% - ${\n        maxOverflowWidth *\n        (this.getOpacityFromScrollDistance(this.rightScrollDistance) > 0\n          ? 1\n          : 0)\n      }px),\n      transparent 100%\n    )`;\n    return {\n      '--ix-card-list-overflow': maskLayer,\n    };\n  }\n\n  @Listen('resize', { target: 'window' })\n  private detectOverflow() {\n    const { clientWidth, scrollWidth, scrollLeft } = this.listElement;\n\n    this.leftScrollDistance = scrollLeft;\n    this.rightScrollDistance = scrollWidth - scrollLeft - clientWidth;\n  }\n\n  componentDidLoad() {\n    if (this.shouldHandleOverflow()) {\n      this.registerOverflowHandler();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <CardListTitle\n          isCollapsed={this.collapse}\n          label={this.label}\n          showAllLabel={this.i18nShowAll}\n          showAllCounter={\n            this.showAllCount === undefined\n              ? this.numberOfAllChildElements\n              : this.showAllCount\n          }\n          onClick={() => this.onCardListVisibilityToggle()}\n          onShowAllClick={(e) => this.onShowAllClick(e)}\n          hideShowAll={this.hideShowAll}\n        ></CardListTitle>\n        <div\n          class={{\n            CardList__Overflow: true,\n          }}\n          style={this.computeMaskLayer()}\n        >\n          <div\n            class={{\n              CardList__Content: true,\n              CardList__Content__Collapsed: this.collapse,\n              CardList__Style__Flexbox__Scroll: this.listStyle === 'stack',\n              CardList__Style__Infinite__Scroll: this.listStyle === 'scroll',\n            }}\n            onScroll={() => this.onCardListScroll()}\n          >\n            <slot\n              onSlotchange={() => this.changeVisibilityOfSlotChildren()}\n            ></slot>\n            {this.isShowMoreCardVisible() ? (\n              <ix-card\n                class={{\n                  Show__All__Card: true,\n                }}\n                onClick={(event) =>\n                  this.showMoreCardClick.emit({\n                    nativeEvent: event,\n                  })\n                }\n              >\n                <ix-card-content class=\"Show__All__Card__Content\">\n                  <ix-icon\n                    name={'more-menu'}\n                    size={'32'}\n                    class={'Show__All__Card__Icon'}\n                  ></ix-icon>\n                  <span class=\"Show__All__Card__Text\">\n                    {this.i18nMoreCards} ({this.numberOfOverflowingElements})\n                  </span>\n                </ix-card-content>\n              </ix-card>\n            ) : null}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-card-list.entry.js","mappings":"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","names":[],"sources":["src/components/card-list/card-list.scss?tag=ix-card-list&encapsulation=shadow","src/components/card-list/card-list.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@import 'mixins/shadow-dom/component';\n\n$CardList__Title__Height: 1.5rem;\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  align-items: flex-start;\n  margin: 0.5rem;\n\n  .CardList_Title {\n    display: flex;\n    position: relative;\n    height: $CardList__Title__Height;\n    align-items: center;\n    width: 100%;\n    margin-bottom: 0.5rem;\n\n    &__Label {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n  }\n\n  .CardList__Title__Button {\n    margin-right: 1rem;\n    transition: var(--theme-default-time) transform ease-in-out;\n  }\n\n  .CardList__Title__Button__Collapsed {\n    transform: rotate(-90deg);\n  }\n\n  .CardList__Title__Show__All {\n    align-self: center;\n    margin-left: auto;\n    margin-right: 0px;\n    flex-shrink: 0;\n  }\n\n  .CardList__Content {\n    display: flex;\n    position: relative;\n    height: calc(100% - #{$CardList__Title__Height});\n    width: 100%;\n    gap: 1.5rem;\n    transition: var(--theme-default-time) ease-in-out;\n    overflow: auto;\n  }\n\n  .CardList__Content__Collapsed {\n    min-height: 0px;\n    max-height: 0px;\n    overflow: hidden;\n    opacity: 0;\n  }\n\n  .CardList__Style__Flexbox__Scroll {\n    flex-wrap: wrap;\n  }\n\n  .CardList__Style__Infinite__Scroll {\n    flex-wrap: nowrap;\n\n    -ms-overflow-style: none;\n    scrollbar-width: none;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  .CardList__Overflow {\n    display: block;\n    position: relative;\n    height: 100%;\n    width: 100%;\n    pointer-events: all;\n    mask-image: var(--ix-card-list-overflow, none);\n  }\n\n  .Show__All__Card {\n    display: flex;\n    position: relative;\n\n    align-self: flex-start;\n    justify-self: center;\n\n    max-width: 11.25rem;\n    min-width: 11.25rem;\n    width: 11.25rem;\n\n    min-height: 11.25rem;\n    max-height: 11.25rem;\n    height: 11.25rem;\n\n    --ix-card-border-color: var(--theme-color-primary);\n    color: var(--theme-color-primary);\n  }\n\n  .CardList__Style__Infinite__Scroll .Show__All__Card {\n    margin-top: 2.375rem;\n  }\n\n  .CardList__Style__Flexbox__Scroll .Show__All__Card {\n    margin-bottom: 2.375rem;\n  }\n\n  .Show__All__Card:hover {\n    background-color: var(--theme-color-ghost--hover);\n  }\n\n  .Show__All__Card:active {\n    background-color: var(--theme-color-ghost--active);\n  }\n\n  .Show__All__Card__Content {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .Show__All__Card__Icon {\n    display: flex;\n    position: absolute;\n    height: 4rem;\n    width: 4rem;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .Show__All__Card__Text {\n    margin-bottom: 0px;\n    margin-top: auto;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\nfunction CardListTitle(props: {\n  label: string;\n  isCollapsed: boolean;\n  onClick: (e: MouseEvent) => void;\n  onShowAllClick: (e: MouseEvent) => void;\n  showAllLabel: string;\n  showAllCounter: number;\n  hideShowAll: boolean;\n}) {\n  if (props.label === '') {\n    return null;\n  }\n\n  return (\n    <div class=\"CardList_Title\">\n      <ix-icon-button\n        ghost\n        icon={'chevron-down'}\n        onClick={props.onClick}\n        color=\"color-primary\"\n        class={{\n          CardList__Title__Button: true,\n          CardList__Title__Button__Collapsed: props.isCollapsed,\n        }}\n      ></ix-icon-button>\n      <ix-typography class=\"CardList_Title__Label\" variant=\"large-single\">\n        {props.label}\n      </ix-typography>\n      {!props.hideShowAll && (\n        <ix-button\n          class=\"CardList__Title__Show__All\"\n          ghost\n          onClick={props.onShowAllClick}\n        >\n          <span>{props.showAllLabel}</span>\n          <span>\n            {!isNaN(props.showAllCounter) ? ` (${props.showAllCounter})` : null}\n          </span>\n        </ix-button>\n      )}\n    </div>\n  );\n}\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card-list',\n  styleUrl: 'card-list.scss',\n  shadow: true,\n})\nexport class CardList {\n  /**\n   * Name the card list\n   */\n  @Prop() label: string;\n\n  /**\n   * Collapse the list\n   */\n  @Prop({ mutable: true }) collapse = false;\n\n  /**\n   * List style\n   */\n  @Prop() listStyle: 'stack' | 'scroll' = 'stack';\n\n  /**\n   * Maximal visible cards\n   *\n   * @internal\n   */\n  @Prop() maxVisibleCards = 12;\n\n  /**\n   * Overwrite the default show all count.\n   * */\n  @Prop() showAllCount: number | undefined;\n\n  /**\n   * Suppress the overflow handling of child elements\n   */\n  @Prop() suppressOverflowHandling = false;\n\n  /**\n   * Hide the show all button\n   *\n   * @since 2.2.0\n   */\n  @Prop() hideShowAll = false;\n\n  /**\n   * i18n Show all button\n   */\n  @Prop() i18nShowAll = 'Show all';\n\n  /**\n   * i18n More cards available\n   */\n  @Prop() i18nMoreCards = 'There are more cards available';\n\n  /**\n   * Fire event when the collapse state is changed by the user\n   */\n  @Event() collapseChanged: EventEmitter<boolean>;\n\n  /**\n   * Fire event when the collapse state is changed by the user\n   */\n  @Event() showAllClick: EventEmitter<{\n    nativeEvent: MouseEvent;\n  }>;\n\n  /**\n   * Fire event when the show more card is clicked.\n   */\n  @Event() showMoreCardClick: EventEmitter<{\n    nativeEvent: MouseEvent;\n  }>;\n\n  @Element() hostElement: HTMLIxCardListElement;\n\n  @State() private hasOverflowingElements = false;\n  @State() private numberOfOverflowingElements = 0;\n  @State() private numberOfAllChildElements = 0;\n  @State() private leftScrollDistance = 0;\n  @State() private rightScrollDistance = 0;\n\n  private observer: MutationObserver;\n\n  private onCardListVisibilityToggle() {\n    this.collapse = !this.collapse;\n    this.collapseChanged.emit(this.collapse);\n  }\n\n  private onShowAllClick(event: MouseEvent) {\n    this.showAllClick.emit({\n      nativeEvent: event,\n    });\n  }\n\n  private getListChildren() {\n    const slot = this.hostElement.shadowRoot.querySelector(\n      '.CardList__Content > slot'\n    ) as HTMLSlotElement;\n    return slot.assignedElements({ flatten: true });\n  }\n\n  private changeVisibilityOfSlotChildren() {\n    const childElements = this.getListChildren();\n    childElements.forEach((element, index) => {\n      if (element instanceof HTMLElement) {\n        if (index > this.maxVisibleCards - 1) {\n          element.classList.add('d-none');\n          return;\n        }\n        element.classList.remove('d-none');\n      }\n    });\n    this.hasOverflowingElements = childElements.length > this.maxVisibleCards;\n    this.numberOfOverflowingElements =\n      childElements.length - this.maxVisibleCards;\n\n    this.numberOfAllChildElements = childElements.length;\n    this.detectOverflow();\n  }\n\n  private registerOverflowHandler() {\n    this.observer = createMutationObserver(() => {\n      this.changeVisibilityOfSlotChildren();\n    });\n\n    this.observer.observe(\n      this.hostElement.shadowRoot.querySelector('.CardList__Content'),\n      {\n        childList: true,\n        subtree: true,\n      }\n    );\n\n    requestAnimationFrame(() => {\n      this.changeVisibilityOfSlotChildren();\n    });\n  }\n\n  private shouldHandleOverflow() {\n    if (this.suppressOverflowHandling) {\n      return false;\n    }\n    if (this.listStyle === 'stack' || this.listStyle === 'scroll') {\n      return true;\n    }\n  }\n\n  private get listElement() {\n    return this.hostElement.shadowRoot.querySelector('.CardList__Content');\n  }\n\n  private onCardListScroll() {\n    this.detectOverflow();\n  }\n\n  private isShowMoreCardVisible() {\n    return (\n      this.suppressOverflowHandling === false && this.hasOverflowingElements\n    );\n  }\n\n  private getOpacityFromScrollDistance(distance: number) {\n    if (!this.listElement) {\n      return 0;\n    }\n\n    if (distance === 0) {\n      return 0;\n    }\n\n    if (distance > 100) {\n      return 1;\n    }\n\n    return distance / 100;\n  }\n\n  private computeMaskLayer() {\n    const maxOverflowWidth = 80;\n    const maskLayer = `linear-gradient(\n      90deg,\n      transparent 0px,\n      black ${\n        maxOverflowWidth *\n        (this.getOpacityFromScrollDistance(this.leftScrollDistance) > 0 ? 1 : 0)\n      }px,\n      black calc(100% - ${\n        maxOverflowWidth *\n        (this.getOpacityFromScrollDistance(this.rightScrollDistance) > 0\n          ? 1\n          : 0)\n      }px),\n      transparent 100%\n    )`;\n    return {\n      '--ix-card-list-overflow': maskLayer,\n    };\n  }\n\n  @Listen('resize', { target: 'window' })\n  private detectOverflow() {\n    const { clientWidth, scrollWidth, scrollLeft } = this.listElement;\n\n    this.leftScrollDistance = scrollLeft;\n    this.rightScrollDistance = scrollWidth - scrollLeft - clientWidth;\n  }\n\n  componentDidLoad() {\n    if (this.shouldHandleOverflow()) {\n      this.registerOverflowHandler();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <CardListTitle\n          isCollapsed={this.collapse}\n          label={this.label}\n          showAllLabel={this.i18nShowAll}\n          showAllCounter={\n            this.showAllCount === undefined\n              ? this.numberOfAllChildElements\n              : this.showAllCount\n          }\n          onClick={() => this.onCardListVisibilityToggle()}\n          onShowAllClick={(e) => this.onShowAllClick(e)}\n          hideShowAll={this.hideShowAll}\n        ></CardListTitle>\n        <div\n          class={{\n            CardList__Overflow: true,\n          }}\n          style={this.computeMaskLayer()}\n        >\n          <div\n            class={{\n              CardList__Content: true,\n              CardList__Content__Collapsed: this.collapse,\n              CardList__Style__Flexbox__Scroll: this.listStyle === 'stack',\n              CardList__Style__Infinite__Scroll: this.listStyle === 'scroll',\n            }}\n            onScroll={() => this.onCardListScroll()}\n          >\n            <slot\n              onSlotchange={() => this.changeVisibilityOfSlotChildren()}\n            ></slot>\n            {this.isShowMoreCardVisible() ? (\n              <ix-card\n                class={{\n                  Show__All__Card: true,\n                }}\n                onClick={(event) =>\n                  this.showMoreCardClick.emit({\n                    nativeEvent: event,\n                  })\n                }\n              >\n                <ix-card-content class=\"Show__All__Card__Content\">\n                  <ix-icon\n                    name={'more-menu'}\n                    size={'32'}\n                    class={'Show__All__Card__Icon'}\n                  ></ix-icon>\n                  <span class=\"Show__All__Card__Text\">\n                    {this.i18nMoreCards} ({this.numberOfOverflowingElements})\n                  </span>\n                </ix-card-content>\n              </ix-card>\n            ) : null}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-5429f20b.js';
 
-const cardCss = ":host{display:flex;position:relative;flex-direction:column;align-items:flex-start;align-self:flex-start;overflow:hidden;width:20rem;border:1px solid var(--ix-card-border-color, var(--theme-color-soft-bdr));border-radius:var(--theme-default-border-radius)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .card-content{display:block;position:relative;flex-shrink:0;flex-grow:1;width:100%;height:calc(100% - 2rem);background-color:var(--ix-card-background, transparent);border-top-left-radius:var(--theme-default-border-radius);border-top-right-radius:var(--theme-default-border-radius)}:host .card-footer{display:flex;position:relative;width:100%}:host(.card-insight){--ix-card-background:transparent;--ix-card-border-color:var(--theme-color-soft-bdr)}:host(.card-notification){--ix-card-background:var(--theme-color-component-1)}:host(.card-alarm){--ix-card-background:var(--theme-color-alarm);color:var(--theme-color-alarm--contrast)}:host(.card-critical){--ix-card-background:var(--theme-color-critical);color:var(--theme-color-critical--contrast)}:host(.card-warning){--ix-card-background:var(--theme-color-warning);color:var(--theme-color-warning--contrast)}:host(.card-success){--ix-card-background:var(--theme-color-success);color:var(--theme-color-success--contrast)}:host(.card-info){--ix-card-background:var(--theme-color-info);color:var(--theme-color-info--contrast)}:host(.card-neutral){--ix-card-background:var(--theme-color-neutral);color:var(--theme-color-neutral--contrast)}:host(.card-primary){--ix-card-background:var(--theme-color-primary);color:var(--theme-color-neutral--contrast)}:host(:not(.card-insight)){--ix-card-border-color:transparent}:host(.card-insight:hover){--ix-card-background:var(--theme-color-ghost--hover)}:host(.card-notification:hover){--ix-card-background:var(--theme-color-component-1--hover)}:host(.card-alarm:hover){--ix-card-background:var(--theme-color-alarm--hover)}:host(.card-critical:hover){--ix-card-background:var(--theme-color-critical--hover)}:host(.card-warning:hover){--ix-card-background:var(--theme-color-warning--hover)}:host(.card-success:hover){--ix-card-background:var(--theme-color-success--hover)}:host(.card-info:hover){--ix-card-background:var(--theme-color-info--hover)}:host(.card-neutral:hover){--ix-card-background:var(--theme-color-neutral--hover)}:host(.card-primary:hover){--ix-card-background:var(--theme-color-primary--hover)}:host(.card-insight:active){--ix-card-background:var(--theme-color-ghost--active)}:host(.card-notification:active){--ix-card-background:var(--theme-color-component-1--active)}:host(.card-alarm:active){--ix-card-background:var(--theme-color-alarm--active)}:host(.card-critical:active){--ix-card-background:var(--theme-color-critical--active)}:host(.card-warning:active){--ix-card-background:var(--theme-color-warning--active)}:host(.card-success:active){--ix-card-background:var(--theme-color-success--active)}:host(.card-info:active){--ix-card-background:var(--theme-color-info--active)}:host(.card-neutral:active){--ix-card-background:var(--theme-color-neutral--active)}:host(.card-primary:active){--ix-card-background:var(--theme-color-primary--active)}:host(.selected){--ix-card-border-color:var(--theme-color-dynamic)}:host(.selected.card-insight){--ix-card-background:var(--theme-color-ghost--selected)}:host(.selected.card-notification){--ix-card-background:var(--theme-color-ghost--selected)}:host(.selected.card-alarm){--ix-card-background:var(--theme-color-alarm--active)}:host(.selected.card-critical){--ix-card-background:var(--theme-color-critical--active)}:host(.selected.card-warning){--ix-card-background:var(--theme-color-warning--active)}:host(.selected.card-success){--ix-card-background:var(--theme-color-success--active)}:host(.selected.card-info){--ix-card-background:var(--theme-color-info--active)}:host(.selected.card-neutral){--ix-card-background:var(--theme-color-neutral--active)}:host(.selected.card-primary){--ix-card-background:var(--theme-color-primary--active)}";
+const cardCss = ":host{display:flex;position:relative;flex-direction:column;align-items:flex-start;align-self:flex-start;overflow:hidden;width:20rem;border:1px solid var(--ix-card-border-color, var(--theme-color-soft-bdr));border-radius:var(--theme-default-border-radius)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .card-content{display:block;position:relative;flex-shrink:0;flex-grow:1;width:100%;height:calc(100% - 2rem);background-color:var(--ix-card-background, transparent);border-top-left-radius:var(--theme-default-border-radius);border-top-right-radius:var(--theme-default-border-radius)}:host .card-footer{display:flex;position:relative;width:100%}:host(.card-insight),:host(.card-outline){--ix-card-background:transparent;--ix-card-border-color:var(--theme-color-soft-bdr)}:host(.card-notification),:host(.card-filled){--ix-card-background:var(--theme-color-component-1)}:host(.card-alarm){--ix-card-background:var(--theme-color-alarm);color:var(--theme-color-alarm--contrast)}:host(.card-critical){--ix-card-background:var(--theme-color-critical);color:var(--theme-color-critical--contrast)}:host(.card-warning){--ix-card-background:var(--theme-color-warning);color:var(--theme-color-warning--contrast)}:host(.card-success){--ix-card-background:var(--theme-color-success);color:var(--theme-color-success--contrast)}:host(.card-info){--ix-card-background:var(--theme-color-info);color:var(--theme-color-info--contrast)}:host(.card-neutral){--ix-card-background:var(--theme-color-neutral);color:var(--theme-color-neutral--contrast)}:host(.card-primary){--ix-card-background:var(--theme-color-primary);color:var(--theme-color-neutral--contrast)}:host(:not(.card-insight)){--ix-card-border-color:transparent}:host(.card-insight:hover){--ix-card-background:var(--theme-color-ghost--hover)}:host(.card-notification:hover){--ix-card-background:var(--theme-color-component-1--hover)}:host(.card-alarm:hover){--ix-card-background:var(--theme-color-alarm--hover)}:host(.card-critical:hover){--ix-card-background:var(--theme-color-critical--hover)}:host(.card-warning:hover){--ix-card-background:var(--theme-color-warning--hover)}:host(.card-success:hover){--ix-card-background:var(--theme-color-success--hover)}:host(.card-info:hover){--ix-card-background:var(--theme-color-info--hover)}:host(.card-neutral:hover){--ix-card-background:var(--theme-color-neutral--hover)}:host(.card-primary:hover){--ix-card-background:var(--theme-color-primary--hover)}:host(.card-insight:active){--ix-card-background:var(--theme-color-ghost--active)}:host(.card-notification:active){--ix-card-background:var(--theme-color-component-1--active)}:host(.card-alarm:active){--ix-card-background:var(--theme-color-alarm--active)}:host(.card-critical:active){--ix-card-background:var(--theme-color-critical--active)}:host(.card-warning:active){--ix-card-background:var(--theme-color-warning--active)}:host(.card-success:active){--ix-card-background:var(--theme-color-success--active)}:host(.card-info:active){--ix-card-background:var(--theme-color-info--active)}:host(.card-neutral:active){--ix-card-background:var(--theme-color-neutral--active)}:host(.card-primary:active){--ix-card-background:var(--theme-color-primary--active)}:host(.selected){--ix-card-border-color:var(--theme-color-dynamic)}:host(.selected.card-insight){--ix-card-background:var(--theme-color-ghost--selected)}:host(.selected.card-notification){--ix-card-background:var(--theme-color-ghost--selected)}:host(.selected.card-alarm){--ix-card-background:var(--theme-color-alarm--active)}:host(.selected.card-critical){--ix-card-background:var(--theme-color-critical--active)}:host(.selected.card-warning){--ix-card-background:var(--theme-color-warning--active)}:host(.selected.card-success){--ix-card-background:var(--theme-color-success--active)}:host(.selected.card-info){--ix-card-background:var(--theme-color-info--active)}:host(.selected.card-neutral){--ix-card-background:var(--theme-color-neutral--active)}:host(.selected.card-primary){--ix-card-background:var(--theme-color-primary--active)}";
 const IxCardStyle0 = cardCss;
 
 const Card = class {
@@ -10,10 +10,10 @@ const Card = class {
         this.selected = undefined;
     }
     render() {
-        return (h(Host, { key: 'f91df8c114ec01e95ae0eba29c8acf3cacbdec25', class: {
+        return (h(Host, { key: '4d096be9c3db2847204633f22624296d892e2fb9', class: {
                 selected: this.selected,
                 [`card-${this.variant}`]: true,
-            } }, h("div", { key: '24c775b7ae7b2940df9e101b702b91a17a0f6749', class: "card-content" }, h("slot", { key: '57bfc8eb49985aae6aff8ea277475b2012ac8ba2' })), h("div", { key: '8eac7eefd8020827e0ebf38be231de2c7b934797', class: "card-footer" }, h("slot", { key: '207dc0b0ce6279ecb9dfda76e3d03a145a5ff168', name: "card-accordion" }))));
+            } }, h("div", { key: 'e80707eb333158ac4f90fa0feaaede7309fa3567', class: "card-content" }, h("slot", { key: '50b6d4885936ff438c4fcab7c7b1b9d5e54137f3' })), h("div", { key: 'c964e703c4c7783fd30a889838583d8e0426994b', class: "card-footer" }, h("slot", { key: 'df4b7c7e9f8fbdea42c2e9b657dc6e4488ea4562', name: "card-accordion" }))));
     }
     get hostElement() { return getElement(this); }
 };
@@ -27,7 +27,7 @@ const CardContent = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '17ef18ecf4efe031b707524053d81f91db482696' }, h("slot", { key: '5e91dbb38a4bcc64e36c7bbacb1e2de92f877559' })));
+        return (h(Host, { key: '816fee4fedc0535d0a8991bf6a58a97fecd27069' }, h("slot", { key: '136f2bfa5fd08ff95aa0d3f7a2bed5297aaf57e5' })));
     }
 };
 CardContent.style = IxCardContentStyle0;

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

@@ -1 +1 @@
-{"file":"ix-card.ix-card-content.entry.js","mappings":";;AAAA,MAAM,OAAO,GAAG,wmJAAwmJ,CAAC;AACznJ,qBAAe,OAAO;;MCoBT,IAAI;;;uBAMgB,SAAS;;;IAOxC,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,CAAC,QAAQ,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI;aAC/B,IAED,4DAAK,KAAK,EAAC,cAAc,IACvB,8DAAa,CACT,EACN,4DAAK,KAAK,EAAC,aAAa,IACtB,6DAAM,IAAI,EAAC,gBAAgB,GAAQ,CAC/B,CACD,EACP;KACH;;;;;AClDH,MAAM,cAAc,GAAG,g3BAAg3B,CAAC;AACx4B,4BAAe,cAAc;;MCShB,WAAW;;;;IACtB,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DAAa,CACR,EACP;KACH;;;;;;","names":[],"sources":["src/components/card/card.scss?tag=ix-card&encapsulation=shadow","src/components/card/card.tsx","src/components/card-content/card-content.scss?tag=ix-card-content&encapsulation=shadow","src/components/card-content/card-content.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@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  align-items: flex-start;\n  align-self: flex-start;\n  overflow: hidden;\n\n  width: 20rem;\n\n  border: 1px solid var(--ix-card-border-color, var(--theme-color-soft-bdr));\n  border-radius: var(--theme-default-border-radius);\n\n  .card-content {\n    display: block;\n    position: relative;\n    flex-shrink: 0;\n    flex-grow: 1;\n    width: 100%;\n    height: calc(100% - 2rem);\n    background-color: var(--ix-card-background, transparent);\n    border-top-left-radius: var(--theme-default-border-radius);\n    border-top-right-radius: var(--theme-default-border-radius);\n  }\n\n  .card-footer {\n    display: flex;\n    position: relative;\n    width: 100%;\n  }\n}\n\n:host(.card-insight) {\n  --ix-card-background: transparent;\n  --ix-card-border-color: var(--theme-color-soft-bdr);\n}\n\n:host(.card-notification) {\n  --ix-card-background: var(--theme-color-component-1);\n}\n\n:host(.card-alarm) {\n  --ix-card-background: var(--theme-color-alarm);\n  color: var(--theme-color-alarm--contrast);\n}\n\n:host(.card-critical) {\n  --ix-card-background: var(--theme-color-critical);\n  color: var(--theme-color-critical--contrast);\n}\n\n:host(.card-warning) {\n  --ix-card-background: var(--theme-color-warning);\n  color: var(--theme-color-warning--contrast);\n}\n\n:host(.card-success) {\n  --ix-card-background: var(--theme-color-success);\n  color: var(--theme-color-success--contrast);\n}\n\n:host(.card-info) {\n  --ix-card-background: var(--theme-color-info);\n  color: var(--theme-color-info--contrast);\n}\n\n:host(.card-neutral) {\n  --ix-card-background: var(--theme-color-neutral);\n  color: var(--theme-color-neutral--contrast);\n}\n\n:host(.card-primary) {\n  --ix-card-background: var(--theme-color-primary);\n  color: var(--theme-color-neutral--contrast);\n}\n\n:host(:not(.card-insight)) {\n  --ix-card-border-color: transparent;\n}\n\n// ### Hover ###\n\n:host(.card-insight:hover) {\n  --ix-card-background: var(--theme-color-ghost--hover);\n}\n\n:host(.card-notification:hover) {\n  --ix-card-background: var(--theme-color-component-1--hover);\n}\n\n:host(.card-alarm:hover) {\n  --ix-card-background: var(--theme-color-alarm--hover);\n}\n\n:host(.card-critical:hover) {\n  --ix-card-background: var(--theme-color-critical--hover);\n}\n\n:host(.card-warning:hover) {\n  --ix-card-background: var(--theme-color-warning--hover);\n}\n\n:host(.card-success:hover) {\n  --ix-card-background: var(--theme-color-success--hover);\n}\n\n:host(.card-info:hover) {\n  --ix-card-background: var(--theme-color-info--hover);\n}\n\n:host(.card-neutral:hover) {\n  --ix-card-background: var(--theme-color-neutral--hover);\n}\n\n:host(.card-primary:hover) {\n  --ix-card-background: var(--theme-color-primary--hover);\n}\n\n// ### Active ###\n\n:host(.card-insight:active) {\n  --ix-card-background: var(--theme-color-ghost--active);\n}\n\n:host(.card-notification:active) {\n  --ix-card-background: var(--theme-color-component-1--active);\n}\n\n:host(.card-alarm:active) {\n  --ix-card-background: var(--theme-color-alarm--active);\n}\n\n:host(.card-critical:active) {\n  --ix-card-background: var(--theme-color-critical--active);\n}\n\n:host(.card-warning:active) {\n  --ix-card-background: var(--theme-color-warning--active);\n}\n\n:host(.card-success:active) {\n  --ix-card-background: var(--theme-color-success--active);\n}\n\n:host(.card-info:active) {\n  --ix-card-background: var(--theme-color-info--active);\n}\n\n:host(.card-neutral:active) {\n  --ix-card-background: var(--theme-color-neutral--active);\n}\n\n:host(.card-primary:active) {\n  --ix-card-background: var(--theme-color-primary--active);\n}\n\n// ### Selected ###\n\n:host(.selected) {\n  --ix-card-border-color: var(--theme-color-dynamic);\n}\n\n:host(.selected.card-insight) {\n  --ix-card-background: var(--theme-color-ghost--selected);\n}\n\n:host(.selected.card-notification) {\n  --ix-card-background: var(--theme-color-ghost--selected);\n}\n\n:host(.selected.card-alarm) {\n  --ix-card-background: var(--theme-color-alarm--active);\n}\n\n:host(.selected.card-critical) {\n  --ix-card-background: var(--theme-color-critical--active);\n}\n\n:host(.selected.card-warning) {\n  --ix-card-background: var(--theme-color-warning--active);\n}\n\n:host(.selected.card-success) {\n  --ix-card-background: var(--theme-color-success--active);\n}\n\n:host(.selected.card-info) {\n  --ix-card-background: var(--theme-color-info--active);\n}\n\n:host(.selected.card-neutral) {\n  --ix-card-background: var(--theme-color-neutral--active);\n}\n\n:host(.selected.card-primary) {\n  --ix-card-background: var(--theme-color-primary--active);\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\nexport type CardVariant =\n  | 'insight'\n  | 'notification'\n  | 'alarm'\n  | 'critical'\n  | 'warning'\n  | 'info'\n  | 'neutral'\n  | 'success'\n  | 'primary';\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card',\n  styleUrl: 'card.scss',\n  shadow: true,\n})\nexport class Card {\n  @Element() hostElement: HTMLIxCardElement;\n\n  /**\n   * Card variant\n   */\n  @Prop() variant: CardVariant = 'insight';\n\n  /**\n   * @since 2.1.0\n   */\n  @Prop() selected: boolean;\n\n  render() {\n    return (\n      <Host\n        class={{\n          selected: this.selected,\n          [`card-${this.variant}`]: true,\n        }}\n      >\n        <div class=\"card-content\">\n          <slot></slot>\n        </div>\n        <div class=\"card-footer\">\n          <slot name=\"card-accordion\"></slot>\n        </div>\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@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 0.5rem;\n  padding: 1rem;\n  height: 100%;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card-content',\n  styleUrl: 'card-content.scss',\n  shadow: true,\n})\nexport class CardContent {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-card.ix-card-content.entry.js","mappings":";;AAAA,MAAM,OAAO,GAAG,ipJAAipJ,CAAC;AAClqJ,qBAAe,OAAO;;MCuBT,IAAI;;;uBAOgB,SAAS;;;IAOxC,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,CAAC,QAAQ,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI;aAC/B,IAED,4DAAK,KAAK,EAAC,cAAc,IACvB,8DAAa,CACT,EACN,4DAAK,KAAK,EAAC,aAAa,IACtB,6DAAM,IAAI,EAAC,gBAAgB,GAAQ,CAC/B,CACD,EACP;KACH;;;;;ACtDH,MAAM,cAAc,GAAG,g3BAAg3B,CAAC;AACx4B,4BAAe,cAAc;;MCShB,WAAW;;;;IACtB,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DAAa,CACR,EACP;KACH;;;;;;","names":[],"sources":["src/components/card/card.scss?tag=ix-card&encapsulation=shadow","src/components/card/card.tsx","src/components/card-content/card-content.scss?tag=ix-card-content&encapsulation=shadow","src/components/card-content/card-content.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 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@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  align-items: flex-start;\n  align-self: flex-start;\n  overflow: hidden;\n\n  width: 20rem;\n\n  border: 1px solid var(--ix-card-border-color, var(--theme-color-soft-bdr));\n  border-radius: var(--theme-default-border-radius);\n\n  .card-content {\n    display: block;\n    position: relative;\n    flex-shrink: 0;\n    flex-grow: 1;\n    width: 100%;\n    height: calc(100% - 2rem);\n    background-color: var(--ix-card-background, transparent);\n    border-top-left-radius: var(--theme-default-border-radius);\n    border-top-right-radius: var(--theme-default-border-radius);\n  }\n\n  .card-footer {\n    display: flex;\n    position: relative;\n    width: 100%;\n  }\n}\n\n:host(.card-insight), :host(.card-outline) {\n  --ix-card-background: transparent;\n  --ix-card-border-color: var(--theme-color-soft-bdr);\n}\n\n:host(.card-notification), :host(.card-filled) {\n  --ix-card-background: var(--theme-color-component-1);\n}\n\n:host(.card-alarm) {\n  --ix-card-background: var(--theme-color-alarm);\n  color: var(--theme-color-alarm--contrast);\n}\n\n:host(.card-critical) {\n  --ix-card-background: var(--theme-color-critical);\n  color: var(--theme-color-critical--contrast);\n}\n\n:host(.card-warning) {\n  --ix-card-background: var(--theme-color-warning);\n  color: var(--theme-color-warning--contrast);\n}\n\n:host(.card-success) {\n  --ix-card-background: var(--theme-color-success);\n  color: var(--theme-color-success--contrast);\n}\n\n:host(.card-info) {\n  --ix-card-background: var(--theme-color-info);\n  color: var(--theme-color-info--contrast);\n}\n\n:host(.card-neutral) {\n  --ix-card-background: var(--theme-color-neutral);\n  color: var(--theme-color-neutral--contrast);\n}\n\n:host(.card-primary) {\n  --ix-card-background: var(--theme-color-primary);\n  color: var(--theme-color-neutral--contrast);\n}\n\n:host(:not(.card-insight)) {\n  --ix-card-border-color: transparent;\n}\n\n// ### Hover ###\n\n:host(.card-insight:hover) {\n  --ix-card-background: var(--theme-color-ghost--hover);\n}\n\n:host(.card-notification:hover) {\n  --ix-card-background: var(--theme-color-component-1--hover);\n}\n\n:host(.card-alarm:hover) {\n  --ix-card-background: var(--theme-color-alarm--hover);\n}\n\n:host(.card-critical:hover) {\n  --ix-card-background: var(--theme-color-critical--hover);\n}\n\n:host(.card-warning:hover) {\n  --ix-card-background: var(--theme-color-warning--hover);\n}\n\n:host(.card-success:hover) {\n  --ix-card-background: var(--theme-color-success--hover);\n}\n\n:host(.card-info:hover) {\n  --ix-card-background: var(--theme-color-info--hover);\n}\n\n:host(.card-neutral:hover) {\n  --ix-card-background: var(--theme-color-neutral--hover);\n}\n\n:host(.card-primary:hover) {\n  --ix-card-background: var(--theme-color-primary--hover);\n}\n\n// ### Active ###\n\n:host(.card-insight:active) {\n  --ix-card-background: var(--theme-color-ghost--active);\n}\n\n:host(.card-notification:active) {\n  --ix-card-background: var(--theme-color-component-1--active);\n}\n\n:host(.card-alarm:active) {\n  --ix-card-background: var(--theme-color-alarm--active);\n}\n\n:host(.card-critical:active) {\n  --ix-card-background: var(--theme-color-critical--active);\n}\n\n:host(.card-warning:active) {\n  --ix-card-background: var(--theme-color-warning--active);\n}\n\n:host(.card-success:active) {\n  --ix-card-background: var(--theme-color-success--active);\n}\n\n:host(.card-info:active) {\n  --ix-card-background: var(--theme-color-info--active);\n}\n\n:host(.card-neutral:active) {\n  --ix-card-background: var(--theme-color-neutral--active);\n}\n\n:host(.card-primary:active) {\n  --ix-card-background: var(--theme-color-primary--active);\n}\n\n// ### Selected ###\n\n:host(.selected) {\n  --ix-card-border-color: var(--theme-color-dynamic);\n}\n\n:host(.selected.card-insight) {\n  --ix-card-background: var(--theme-color-ghost--selected);\n}\n\n:host(.selected.card-notification) {\n  --ix-card-background: var(--theme-color-ghost--selected);\n}\n\n:host(.selected.card-alarm) {\n  --ix-card-background: var(--theme-color-alarm--active);\n}\n\n:host(.selected.card-critical) {\n  --ix-card-background: var(--theme-color-critical--active);\n}\n\n:host(.selected.card-warning) {\n  --ix-card-background: var(--theme-color-warning--active);\n}\n\n:host(.selected.card-success) {\n  --ix-card-background: var(--theme-color-success--active);\n}\n\n:host(.selected.card-info) {\n  --ix-card-background: var(--theme-color-info--active);\n}\n\n:host(.selected.card-neutral) {\n  --ix-card-background: var(--theme-color-neutral--active);\n}\n\n:host(.selected.card-primary) {\n  --ix-card-background: var(--theme-color-primary--active);\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n//TODO(IX-1601): Remove insight, notification in 3.0\nexport type CardVariant =\n  | 'insight'\n  | 'notification'\n  | 'alarm'\n  | 'critical'\n  | 'warning'\n  | 'info'\n  | 'neutral'\n  | 'success'\n  | 'primary'\n  | 'outline'\n  | 'filled';\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card',\n  styleUrl: 'card.scss',\n  shadow: true,\n})\nexport class Card {\n  @Element() hostElement: HTMLIxCardElement;\n\n  /**\n   * Card variant\n   * @deprecated variant insight and notification will be removed in 3.0. Use 'outline' or 'filled' instead.\n   */\n  @Prop() variant: CardVariant = 'insight';\n\n  /**\n   * @since 2.1.0\n   */\n  @Prop() selected: boolean;\n\n  render() {\n    return (\n      <Host\n        class={{\n          selected: this.selected,\n          [`card-${this.variant}`]: true,\n        }}\n      >\n        <div class=\"card-content\">\n          <slot></slot>\n        </div>\n        <div class=\"card-footer\">\n          <slot name=\"card-accordion\"></slot>\n        </div>\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@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 0.5rem;\n  padding: 1rem;\n  height: 100%;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card-content',\n  styleUrl: 'card-content.scss',\n  shadow: true,\n})\nexport class CardContent {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/ix-category-filter.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5429f20b.js';
 import { B as BaseButton } from './base-button-1b40b11d.js';
-import { L as LogicalFilterOperator, I as InputState } from './logical-filter-operator-f6701df5.js';
+import { L as LogicalFilterOperator, I as InputState } from './logical-filter-operator-d793d1c3.js';
 
 const categoryFilterCss = ":host{display:inline-block;height:2rem;vertical-align:middle;cursor:pointer;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host button{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem}:host ix-spinner{margin-right:0.25rem}:host ix-icon{margin-right:0.25rem}:host .content{display:inline-block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .content-start{width:100%}:host .icon{pointer-events:none}:host(.disabled){cursor:default}:host .btn-danger{border-radius:var(--theme-btn--border-radius)}:host .btn-danger,:host .btn-danger.focus,:host .btn-danger:focus-visible{background-color:var(--theme-btn-danger--background);color:var(--theme-btn-danger--color);--ix-button-color:var(--theme-btn-danger--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-danger--border-color);border-style:solid}:host .btn-danger:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-danger.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger.selected:not(.disabled):not(:disabled):active,:host .btn-danger.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-danger--border-color--hover);background-color:var(--theme-btn-danger--background--hover);color:var(--theme-btn-danger--color--hover)}:host .btn-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger:not(.disabled):not(:disabled):active,:host .btn-danger:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-danger--border-color--active);background-color:var(--theme-btn-danger--background--active);color:var(--theme-btn-danger--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-danger.disabled,:host(.disabled) .btn-danger:disabled{pointer-events:none;border-color:var(--theme-btn-danger--border-color--disabled);background-color:var(--theme-btn-danger--background--disabled);color:var(--theme-btn-danger--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-danger--color--disabled)}:host .btn-outline-danger{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-danger,:host .btn-outline-danger.focus,:host .btn-outline-danger:focus-visible{background-color:var(--theme-btn-outline-danger--background);color:var(--theme-btn-outline-danger--color);--ix-button-color:var(--theme-btn-outline-danger--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-danger--border-color);border-style:solid}:host .btn-outline-danger:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-danger.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-danger.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-danger.selected:not(.disabled):not(:disabled):active,:host .btn-outline-danger.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-danger:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-danger--border-color--hover);background-color:var(--theme-btn-outline-danger--background--hover);color:var(--theme-btn-outline-danger--color--hover)}:host .btn-outline-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-danger:not(.disabled):not(:disabled):active,:host .btn-outline-danger:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-danger--border-color--active);background-color:var(--theme-btn-outline-danger--background--active);color:var(--theme-btn-outline-danger--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-outline-danger.disabled,:host(.disabled) .btn-outline-danger:disabled{pointer-events:none;border-color:var(--theme-btn-outline-danger--border-color--disabled);background-color:var(--theme-btn-outline-danger--background--disabled);color:var(--theme-btn-outline-danger--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-danger--color--disabled)}:host .btn-invisible-danger{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-danger,:host .btn-invisible-danger.focus,:host .btn-invisible-danger:focus-visible{background-color:var(--theme-btn-invisible-danger--background);color:var(--theme-btn-invisible-danger--color);--ix-button-color:var(--theme-btn-invisible-danger--color);border-color:transparent}:host .btn-invisible-danger:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-danger.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-danger.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-danger.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-danger.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-danger:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-danger--background--hover);color:var(--theme-btn-invisible-danger--color--hover)}:host .btn-invisible-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-danger:not(.disabled):not(:disabled):active,:host .btn-invisible-danger:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-danger--background--active);color:var(--theme-btn-invisible-danger--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-invisible-danger.disabled,:host(.disabled) .btn-invisible-danger:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-danger--background--disabled);color:var(--theme-btn-invisible-danger--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-danger--color--disabled)}:host .btn-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-primary,:host .btn-primary.focus,:host .btn-primary:focus-visible{background-color:var(--theme-btn-primary--background);color:var(--theme-btn-primary--color);--ix-button-color:var(--theme-btn-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-primary--border-color);border-style:solid}:host .btn-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):active,:host .btn-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-primary--border-color--hover);background-color:var(--theme-btn-primary--background--hover);color:var(--theme-btn-primary--color--hover)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):active,:host .btn-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-primary--border-color--active);background-color:var(--theme-btn-primary--background--active);color:var(--theme-btn-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-primary.disabled,:host(.disabled) .btn-primary:disabled{pointer-events:none;border-color:var(--theme-btn-primary--border-color--disabled);background-color:var(--theme-btn-primary--background--disabled);color:var(--theme-btn-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-primary--color--disabled)}:host .btn-outline-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-primary,:host .btn-outline-primary.focus,:host .btn-outline-primary:focus-visible{background-color:var(--theme-btn-outline-primary--background);color:var(--theme-btn-outline-primary--color);--ix-button-color:var(--theme-btn-outline-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-primary--border-color);border-style:solid}:host .btn-outline-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-primary--border-color--hover);background-color:var(--theme-btn-outline-primary--background--hover);color:var(--theme-btn-outline-primary--color--hover)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):active,:host .btn-outline-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-primary--border-color--active);background-color:var(--theme-btn-outline-primary--background--active);color:var(--theme-btn-outline-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-outline-primary.disabled,:host(.disabled) .btn-outline-primary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-primary--border-color--disabled);background-color:var(--theme-btn-outline-primary--background--disabled);color:var(--theme-btn-outline-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-primary--color--disabled)}:host .btn-invisible-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-primary,:host .btn-invisible-primary.focus,:host .btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}:host .btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):active,:host .btn-invisible-primary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-invisible-primary.disabled,:host(.disabled) .btn-invisible-primary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-primary--background--disabled);color:var(--theme-btn-invisible-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-primary--color--disabled)}:host .btn-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-secondary,:host .btn-secondary.focus,:host .btn-secondary:focus-visible{background-color:var(--theme-btn-secondary--background);color:var(--theme-btn-secondary--color);--ix-button-color:var(--theme-btn-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-secondary--border-color);border-style:solid}:host .btn-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-secondary--border-color--hover);background-color:var(--theme-btn-secondary--background--hover);color:var(--theme-btn-secondary--color--hover)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):active,:host .btn-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-secondary--border-color--active);background-color:var(--theme-btn-secondary--background--active);color:var(--theme-btn-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-secondary.disabled,:host(.disabled) .btn-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-secondary--border-color--disabled);background-color:var(--theme-btn-secondary--background--disabled);color:var(--theme-btn-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-secondary--color--disabled)}:host .btn-outline-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-secondary,:host .btn-outline-secondary.focus,:host .btn-outline-secondary:focus-visible{background-color:var(--theme-btn-outline-secondary--background);color:var(--theme-btn-outline-secondary--color);--ix-button-color:var(--theme-btn-outline-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-secondary--border-color);border-style:solid}:host .btn-outline-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-secondary--border-color--hover);background-color:var(--theme-btn-outline-secondary--background--hover);color:var(--theme-btn-outline-secondary--color--hover)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):active,:host .btn-outline-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-secondary--border-color--active);background-color:var(--theme-btn-outline-secondary--background--active);color:var(--theme-btn-outline-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-outline-secondary.disabled,:host(.disabled) .btn-outline-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-secondary--border-color--disabled);background-color:var(--theme-btn-outline-secondary--background--disabled);color:var(--theme-btn-outline-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-secondary--color--disabled)}:host .btn-invisible-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-secondary,:host .btn-invisible-secondary.focus,:host .btn-invisible-secondary:focus-visible{background-color:var(--theme-btn-invisible-secondary--background);color:var(--theme-btn-invisible-secondary--color);--ix-button-color:var(--theme-btn-invisible-secondary--color);border-color:transparent}:host .btn-invisible-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-secondary--background--hover);color:var(--theme-btn-invisible-secondary--color--hover)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-secondary--background--active);color:var(--theme-btn-invisible-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-invisible-secondary.disabled,:host(.disabled) .btn-invisible-secondary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-secondary--background--disabled);color:var(--theme-btn-invisible-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-secondary--color--disabled)}:host{min-width:5rem}.dropdown-group{margin:0.687rem;display:block;position:relative;width:21.562rem;border-radius:0.25rem;background-color:#f8f9fa;border:solid 0.062rem rgba(0, 0, 0, 0.25)}.dropdown-group .dropdown-group-title{display:block;position:relative;font-size:0.875rem;text-align:left;margin:0.937rem 0 1.25rem 0.937rem}.dropdown-group .dropdown-group-content{position:relative;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;height:11.562rem;margin:0.937rem 0 0.937rem 0.937rem}.dropdown-group .dropdown-group-content>*{margin-bottom:1rem}.dropdown-group-submit{display:flex;justify-content:space-between;margin:0 0.687rem 0 0.687rem}.dropdown-menu{position:absolute;background-color:var(--theme-menu--background);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text);border:var(--theme-menu--border-thickness) solid var(--theme-menu--border--color);border-radius:var(--theme-menu--border-radius);max-width:100vw;padding:0.25rem 0;transition:background-color var(--theme-default-time);box-shadow:var(--theme-menu--box-shadow)}.dropdown-menu.xl>.dropdown-item{height:2.5rem;line-height:2.187rem}.dropdown-header{display:flex;align-items:center;height:2.5rem;color:var(--theme-menu-header--color);padding:0 1rem}.dropdown-buttons{display:flex;padding:0.25rem 0.5rem}.dropdown-buttons ix-icon-button+ix-icon-button{margin-inline-start:0.5rem}.dropdown-item{display:flex;height:2.5rem;position:relative;align-items:center;cursor:pointer;padding:0 2rem;border:1px solid transparent;color:var(--theme-menu-item--color);background-color:transparent}.dropdown-item:focus-visible{background-color:var(--theme-menu-item--background);color:var(--theme-menu-item--color)}.dropdown-item:focus-visible{outline:none;background-color:var(--theme-menu-item--background);border-color:#119fff;color:var(--theme-menu-item--color--focus)}.dropdown-item:not(.disabled):not(:disabled){cursor:pointer}.dropdown-item:not(.disabled):not(:disabled):hover{color:var(--theme-menu-item--color--hover);background-color:var(--theme-menu-item--background--hover)}.dropdown-item:not(.disabled):not(:disabled){cursor:pointer}.dropdown-item:not(.disabled):not(:disabled):active,.dropdown-item:not(.disabled):not(:disabled).active{color:var(--theme-menu-item--color--active);background-color:var(--theme-menu-item--background--active)}.dropdown-item.disabled,.dropdown-item:disabled{color:var(--theme-menu-item--color--disabled);background-color:var(--theme-menu-item--background--disabled)}.dropdown-item>a,.dropdown-item a:hover,.dropdown-item a:active{color:var(--theme-color-std-text)}.dropdown-item>.glyph{color:var(--theme-menu-item-icon--color);margin-inline-end:0.5rem}.dropdown-item>.glyph.disabled{color:var(--color-weak-text)}.dropdown-item>.glyph.glyph-single-check{color:var(--theme-menu-item-icon-check--color)}.dropdown-item>input[type=checkbox]+label{margin-bottom:0px}.dropdown-item>input[type=checkbox]+label::before{margin-right:1rem}.dropdown-divider{border-top:1px solid var(--theme-menu-separator--background);margin:0.25rem 0}button.dropdown-toggle{position:relative;padding-right:1.5rem}button.dropdown-toggle::after{position:absolute;top:45%;right:0.5rem}.form-control,.form-control-plaintext{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);color:var(--theme-input--color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--theme-input--border-radius);height:2rem;min-height:2rem;min-width:2rem;background-color:var(--theme-input--background);border:solid 1px var(--theme-input--border-color);box-shadow:var(--theme-input--box-shadow);padding-inline-start:0.5rem;padding-inline-end:0.5rem}.form-control::-moz-placeholder,.form-control-plaintext::-moz-placeholder{color:var(--theme-input-hint--color)}.form-control::placeholder,.form-control-plaintext::placeholder{color:var(--theme-input-hint--color)}.form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled),.form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled){cursor:pointer}.form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled),.form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled){cursor:pointer}.form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,.form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover);cursor:auto}.form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,.form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover);cursor:auto}.form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible,.form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline-offset:var(--theme-input--focus--outline-offset);box-shadow:var(--theme-input--box-shadow);outline:1px solid var(--theme-color-focus-bdr)}.form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible,.form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline-offset:var(--theme-input--focus--outline-offset);box-shadow:var(--theme-input--box-shadow);outline:1px solid var(--theme-color-focus-bdr)}.form-control:focus-visible{color:var(--theme-input--color)}.form-control[type=number]{text-align:right}.form-control[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}.form-control.readonly,.form-control[readonly]{background:transparent !important;border-block-start:none !important;border-inline-start:none !important;border-inline-end:none !important;border-radius:0rem}.form-control:-moz-read-only{box-shadow:none !important;outline:none !important;border-color:var(--theme-input--border-color);cursor:default !important}.form-control:read-only,.form-control[readonly],.form-control[readOnly],.form-control.readonly{box-shadow:none !important;outline:none !important;border-color:var(--theme-input--border-color);cursor:default !important}.form-control:read-only::-moz-placeholder,.form-control[readonly]::-moz-placeholder,.form-control[readOnly]::-moz-placeholder,.form-control.readonly::-moz-placeholder{color:transparent}.form-control:-moz-read-only::placeholder{color:transparent}.form-control:read-only::placeholder,.form-control[readonly]::placeholder,.form-control[readOnly]::placeholder,.form-control.readonly::placeholder{color:transparent}.form-control:disabled,.form-control.disabled{background:transparent !important;border-block-start:none !important;border-inline-start:none !important;border-inline-end:none !important;border-radius:0rem;color:var(--theme-color-weak-text);border-color:var(--theme-input--border-color-bottom--disabled)}.form-control:disabled::-moz-placeholder,.form-control.disabled::-moz-placeholder{color:transparent}.form-control:disabled::placeholder,.form-control.disabled::placeholder{color:transparent}.form-control-plaintext{outline:0}.form-group{position:relative}.input-wrapper{display:flex;position:relative;align-items:center;flex-wrap:nowrap}.input-wrapper>.glyph{display:block;position:absolute;margin-inline-start:0.312rem;color:var(--theme-color-std-text)}.input-wrapper>input{padding-inline-start:2.2rem}select.form-control{padding:0 0.312rem}textarea.form-control{padding:0.375rem 0.5rem}input.disabled,input:disabled{color:var(--theme-input--color--disabled)}input:-moz-read-only{cursor:default}input:read-only,input.readonly{cursor:default}label{color:var(--theme-color-soft-text);padding:2px 0px}label.label-alignment-left{padding:6px 0px}input{font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;min-height:2rem;width:100%;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-moz-appearance:textfield;text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow)}input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}input:-webkit-autofill,input:autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}input::-moz-placeholder{color:var(--theme-input-hint--color)}input::placeholder{color:var(--theme-input-hint--color)}input.hover,input:hover{border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}input.focus,input:focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}input:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}input.read-only,input:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}input.read-only::-moz-placeholder,input:read-only::-moz-placeholder{color:transparent}input:-moz-read-only::placeholder{color:transparent}input.read-only::placeholder,input:read-only::placeholder{color:transparent}input:disabled{box-shadow:none;background-color:transparent;outline:none;border:none;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}input:disabled::-moz-placeholder{color:transparent}input:disabled::placeholder{color:transparent}input[type=number]{text-align:right}input[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}textarea{height:3.25rem;padding:0.375rem 1.25rem 0.375rem 0.5rem}textarea{font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;min-height:2rem;width:100%;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-moz-appearance:textfield;text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow)}textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}textarea:-webkit-autofill,textarea:autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}textarea::-moz-placeholder{color:var(--theme-input-hint--color)}textarea::placeholder{color:var(--theme-input-hint--color)}textarea.hover,textarea:hover{border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}textarea.focus,textarea:focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}textarea:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}textarea.read-only,textarea:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}textarea.read-only::-moz-placeholder,textarea:read-only::-moz-placeholder{color:transparent}textarea:-moz-read-only::placeholder{color:transparent}textarea.read-only::placeholder,textarea:read-only::placeholder{color:transparent}textarea:disabled{box-shadow:none;background-color:transparent;outline:none;border:none;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}textarea:disabled::-moz-placeholder{color:transparent}textarea:disabled::placeholder{color:transparent}textarea~.valid-feedback,textarea~.invalid-feedback,input~.valid-feedback,input~.invalid-feedback{display:none;font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}form textarea~.valid-feedback,form input~.valid-feedback{color:var(--theme-color-success)}form textarea~.invalid-feedback,form input~.invalid-feedback{color:var(--theme-color-alarm-text)}form:not([novalidate]) :invalid,form:not([novalidate]) .is-invalid,form.was-validated :invalid,form.was-validated .is-invalid{background-color:var(--theme-input-error--background);border-color:var(--theme-input-error--border-color);background-image:url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 62 (101010) - https://sketch.com --%3E%3Ctitle%3Eerror%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.75'%3E%3Cg id='error' fill='%23ff2640'%3E%3Cg id='error/error'%3E%3Cpath d='M256,42.6666667 C373.626371,42.6666667 469.333333,138.373627 469.333333,256 C469.333333,373.626371 373.626371,469.333333 256,469.333333 C138.373627,469.333333 42.6666667,373.626371 42.6666667,256 C42.6666667,138.373627 138.373627,42.6666667 256,42.6666667 Z M256,85.3333333 C161.559631,85.3333333 85.3333333,161.559631 85.3333333,256 C85.3333333,350.44037 161.559631,426.666667 256,426.666667 C350.44037,426.666667 426.666667,350.44037 426.666667,256 C426.666667,161.559631 350.44037,85.3333333 256,85.3333333 Z M326.248389,155.581722 L356.418278,185.751611 L286.168667,255.999667 L356.418278,326.248389 L326.248389,356.418278 L255.999667,286.168667 L185.751611,356.418278 L155.581722,326.248389 L225.829667,255.999667 L155.581722,185.751611 L185.751611,155.581722 L255.999667,225.829667 L326.248389,155.581722 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\") !important;background-position:left calc(0.375em + 0.1875rem) center;padding-right:0.75rem;padding-left:calc(1.5em + 0.75rem);background-size:18px;background-repeat:no-repeat}form:not([novalidate]) :invalid~.invalid-feedback,form:not([novalidate]) .is-invalid~.invalid-feedback,form.was-validated :invalid~.invalid-feedback,form.was-validated .is-invalid~.invalid-feedback{display:block}form:not([novalidate]) :valid~.valid-feedback,form:not([novalidate]) .is-valid~.valid-feedback,form.was-validated :valid~.valid-feedback,form.was-validated .is-valid~.valid-feedback{display:block}form:not(.was-validated) .invalid-feedback,form:not(.was-validated) .valid-feedback{display:none !important}:host{display:block;position:relative;height:auto}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host :host(:focus-visible:not(.disabled):not(:disabled)){border-color:var(--theme-color-primary);box-shadow:0 0 0.25rem 0 var(--theme-color-primary) !important}:host .reset-button{position:absolute;top:0.25rem;right:0.25rem}:host .reset-button.hide-reset-button{display:none}:host .input-container{display:flex;height:auto;max-height:3.75rem;padding:1px 1.5rem 1px 1.75rem !important}:host .input-container:not(.readonly):not(.disabled){font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;min-height:2rem;width:100%;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-moz-appearance:textfield;text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow)}:host .input-container:not(.readonly):not(.disabled):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}:host .input-container:not(.readonly):not(.disabled):-webkit-autofill,:host .input-container:not(.readonly):not(.disabled):autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}:host .input-container:not(.readonly):not(.disabled)::-moz-placeholder{color:var(--theme-input-hint--color)}:host .input-container:not(.readonly):not(.disabled)::placeholder{color:var(--theme-input-hint--color)}:host .input-container:not(.readonly):not(.disabled).hover,:host .input-container:not(.readonly):not(.disabled):hover{border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}:host .input-container:not(.readonly):not(.disabled).focus,:host .input-container:not(.readonly):not(.disabled):focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}:host .input-container:not(.readonly):not(.disabled):disabled{box-shadow:none;background-color:transparent;outline:none;border:none;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}:host .input-container:not(.readonly):not(.disabled):disabled::-moz-placeholder{color:transparent}:host .input-container:not(.readonly):not(.disabled):disabled::placeholder{color:transparent}:host .input-container.disabled{color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}:host .input-container.readonly{font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;min-height:2rem;width:100%;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-moz-appearance:textfield;text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow)}:host .input-container.readonly:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}:host .input-container.readonly:-webkit-autofill,:host .input-container.readonly:autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}:host .input-container.readonly::-moz-placeholder{color:var(--theme-input-hint--color)}:host .input-container.readonly::placeholder{color:var(--theme-input-hint--color)}:host .input-container.readonly.hover,:host .input-container.readonly:hover{border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}:host .input-container.readonly.focus,:host .input-container.readonly:focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}:host .input-container.readonly:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}:host .input-container.readonly.read-only,:host .input-container.readonly:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}:host .input-container.readonly.read-only::-moz-placeholder,:host .input-container.readonly:read-only::-moz-placeholder{color:transparent}:host .input-container.readonly:-moz-read-only::placeholder{color:transparent}:host .input-container.readonly.read-only::placeholder,:host .input-container.readonly:read-only::placeholder{color:transparent}:host .input-container.readonly:disabled{box-shadow:none;background-color:transparent;outline:none;border:none;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}:host .input-container.readonly:disabled::-moz-placeholder{color:transparent}:host .input-container.readonly:disabled::placeholder{color:transparent}:host .input-container.no-icon{padding-left:0.25rem}:host .token-container{flex-grow:1;overflow:hidden}:host .text-input{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);width:auto;height:1.75rem;min-height:1.5rem;background:transparent;flex-grow:1;box-shadow:none}:host .text-input,:host .text-input:hover,:host .text-input:focus-visible{border:none;outline:none}:host .text-input.hide-placeholder::-moz-placeholder{opacity:0}:host .text-input.hide-placeholder::placeholder{opacity:0}:host .list-unstyled{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:0;overflow-y:auto}:host ix-icon{position:absolute;top:0.5rem;left:0.5rem}:host ix-filter-chip{margin-right:0.25rem}:host .category-preview{display:flex;align-items:center;height:1.5rem;background-color:var(--theme-bg-3);border-top-left-radius:1rem;border-bottom-left-radius:1rem;padding:0.5rem;margin:2px 0}:host ul{height:100%}:host ul>li,:host input{padding-inline-start:0;padding-top:2px;padding-bottom:2px}:host ix-dropdown{min-width:10rem !important}:host ix-dropdown .dropdown-item-container{display:flex;flex-direction:column}:host ix-dropdown .dropdown-item-container .dropdown-item{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:2.5rem;margin:0.25rem 0.5rem;padding-inline:0.5rem;border:1px solid transparent;border-radius:100rem;width:auto;justify-content:flex-start;flex-grow:1}:host ix-dropdown .dropdown-item-container .dropdown-item:not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-color-focus-bdr)}:host ix-dropdown .dropdown-item-container .category-item{border-end-end-radius:0;border-start-end-radius:0}:host ix-dropdown .dropdown-item-container .category-item-value{border-start-start-radius:0;border-end-start-radius:0}:host ix-dropdown .btn-toggle-operator{width:2rem;height:2rem;margin-inline:0.5rem}:host .d-none{display:none}";
 const IxCategoryFilterStyle0 = categoryFilterCss;
@@ -27,7 +27,7 @@ const CategoryFilter = class {
         this.nonSelectableCategories = {};
         this.suggestions = undefined;
         this.icon = 'search';
-        this.hideIcon = undefined;
+        this.hideIcon = false;
         this.staticOperator = undefined;
         this.repeatCategories = true;
         this.tmpDisableScrollIntoView = true;
@@ -232,6 +232,10 @@ const CategoryFilter = class {
         e.stopPropagation();
         this.closeDropdown();
         this.filterTokens = [];
+        if (this.category) {
+            this.category = undefined;
+            this.categoryChanged.emit(this.category);
+        }
         this.emitFilterEvent();
     }
     filterMultiples(value) {
@@ -401,19 +405,19 @@ const CategoryFilter = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: '460d61c8d2a83d95445b5cad86e1ea2e2fbbf289' }, h("form", { key: '401290f84df0375dd2d23214e10942382dbc28de', ref: (el) => (this.formElement = el) }, h("div", { key: '06d9f1a58cd4daa32d13509142625a91cc4884f4', "read-only": this.readonly, class: {
+        return (h(Host, { key: 'b67d46f80076d8f5b9054e55e203d887337ec473' }, h("form", { key: 'bb191e83cd3f763e7e499b0755e2b1f64bf28bfc', ref: (el) => (this.formElement = el) }, h("div", { key: '8505dcfd3334b0f4f1ca6ab295c9ca92c16cdf6b', "read-only": this.readonly, class: {
                 'input-container': true,
                 disabled: this.disabled,
                 focus: this.hasFocus,
                 readonly: this.readonly,
                 'no-icon': this.hideIcon,
-            } }, h("ix-icon", { key: 'b24d1cfd93ac33cb209d2ce516537c72ea0a3010', color: this.getIconColor(), class: { 'd-none': this.hideIcon }, name: this.icon, size: "16" }), h("div", { key: '61ab21b44baf97bc8c65cf7ac65f8ee418210b6e', class: "token-container" }, h("ul", { key: 'd4e318bc1204bbf50d9894b5b735f4b2faa03d11', class: "list-unstyled" }, this.filterTokens.map((value, index) => (h("li", { key: value.toString(), class: {
+            } }, h("ix-icon", { key: '74a4adbe6ed8ad59dd4931f89a755e87f09b98a1', color: this.getIconColor(), class: { 'd-none': this.hideIcon }, name: this.icon, size: "16" }), h("div", { key: 'a9f3429de8aec546ccf5ac10bd4047ee38a9df51', class: "token-container" }, h("ul", { key: '2ac4037d9f2c8a5c7f1e224999ff6643443dd46c', class: "list-unstyled" }, this.filterTokens.map((value, index) => (h("li", { key: value.toString(), class: {
                 animate__animated: true,
                 animate__fadein: true,
             } }, h("ix-filter-chip", { disabled: this.disabled, readonly: this.readonly, onClick: (e) => e.stopPropagation(), onCloseClick: () => this.removeToken(index) }, this.getFilterChipLabel(value))))), this.categories === undefined ? ('') : (h("li", { class: {
                 'category-preview': true,
                 'd-none': this.category === undefined,
-            } }, (_a = this.categories[this.category]) === null || _a === void 0 ? void 0 : _a.label)), h("input", { key: '457dee28a04610b7299aa2939c3e1280eca2f16f', class: {
+            } }, (_a = this.categories[this.category]) === null || _a === void 0 ? void 0 : _a.label)), h("input", { key: '82f12ea3f63509e6275e1ebbea29240a734aeba6', class: {
                 'text-input': true,
                 'hide-placeholder': this.readonly ||
                     this.disabled ||

package/dist/esm/ix-category-filter.entry.js.map

@@ -1 +1 @@
-{"file":"ix-category-filter.entry.js","mappings":"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","names":[],"sources":["src/components/category-filter/category-filter.scss?tag=ix-category-filter&encapsulation=shadow","src/components/category-filter/category-filter.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 'legacy/mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/shadows';\n@import 'mixins/shadow-dom/component';\n@import 'mixins/text-truncation';\n@import '../button/button';\n@import 'legacy/components/dropdown';\n@import 'legacy/components/forms';\n@import 'components/form/input';\n\n:host {\n  @include ix-component;\n\n  display: block;\n  position: relative;\n  height: auto;\n\n  @include host-focus-visible {\n    border-color: var(--theme-color-primary);\n    box-shadow: 0 0 $tiny-space 0 var(--theme-color-primary) !important;\n  }\n\n  .reset-button {\n    position: absolute;\n    top: $tiny-space;\n    right: $tiny-space;\n  }\n\n  .reset-button.hide-reset-button {\n    display: none;\n  }\n\n  .input-container {\n    &:not(.readonly):not(.disabled) {\n      @include element-input('false');\n    }\n\n    &.disabled {\n      color: var(--theme-input--color--disabled);\n      border-bottom: var(--theme-input--border-thickness, 1px) solid\n        var(--theme-input--border-color-bottom--disabled);\n    }\n\n    &.readonly {\n      @include element-input;\n    }\n\n    display: flex;\n    height: auto;\n    max-height: 3.75rem;\n    padding: 1px $large-space 1px 1.75rem !important;\n\n    &.no-icon {\n      padding-left: $tiny-space;\n    }\n  }\n\n  .token-container {\n    flex-grow: 1;\n    overflow: hidden;\n  }\n\n  .text-input {\n    @include ellipsis;\n    @include text-default;\n    width: auto;\n    height: 1.75rem;\n    min-height: $large-space;\n    background: transparent;\n    flex-grow: 1;\n    box-shadow: none;\n\n    &,\n    &:hover,\n    &:focus-visible {\n      border: none;\n      outline: none;\n    }\n\n    &.hide-placeholder::placeholder {\n      opacity: 0;\n    }\n  }\n\n  .list-unstyled {\n    display: flex;\n    flex-wrap: wrap;\n    list-style: none;\n    padding: 0;\n    margin: 0;\n    overflow-y: auto;\n  }\n\n  ix-icon {\n    position: absolute;\n    top: $small-space;\n    left: $small-space;\n  }\n\n  ix-filter-chip {\n    margin-right: $tiny-space;\n  }\n\n  .category-preview {\n    display: flex;\n    align-items: center;\n    height: $large-space;\n    background-color: var(--theme-bg-3);\n    border-top-left-radius: $default-space;\n    border-bottom-left-radius: $default-space;\n    padding: $small-space;\n    margin: 2px 0;\n  }\n\n  ul {\n    height: 100%;\n  }\n\n  ul > li,\n  input {\n    padding-inline-start: 0;\n    padding-top: 2px;\n    padding-bottom: 2px;\n  }\n\n  ix-dropdown {\n    min-width: 10rem !important;\n\n    .dropdown-item-container {\n      display: flex;\n      flex-direction: column;\n\n      .dropdown-item {\n        @include text-default-single;\n        @include ellipsis;\n        @include focus-visible {\n          border-color: var(--theme-color-focus-bdr);\n        }\n\n        height: $large-control-height;\n        margin: $tiny-space $small-space;\n        padding-inline: $small-space;\n        border: 1px solid transparent;\n        border-radius: 100rem;\n        width: auto;\n        justify-content: flex-start;\n        flex-grow: 1;\n      }\n\n      .category-item {\n        border-end-end-radius: 0;\n        border-start-end-radius: 0;\n      }\n\n      .category-item-value {\n        border-start-start-radius: 0;\n        border-end-start-radius: 0;\n      }\n    }\n\n    .btn-toggle-operator {\n      width: 2rem;\n      height: 2rem;\n      margin-inline: $small-space;\n    }\n  }\n\n  .d-none {\n    display: none;\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  Watch,\n} from '@stencil/core';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\nimport { FilterState } from './filter-state';\nimport { InputState } from './input-state';\nimport { LogicalFilterOperator } from './logical-filter-operator';\n\n@Component({\n  tag: 'ix-category-filter',\n  styleUrl: 'category-filter.scss',\n  shadow: true,\n})\nexport class CategoryFilter {\n  private readonly ID_CUSTOM_FILTER_VALUE = 'CW_CUSTOM_FILTER_VALUE';\n\n  @State() showDropdown: boolean;\n  @State() private textInput?: HTMLInputElement;\n  private formElement?: HTMLFormElement;\n  private isScrollStateDirty: boolean;\n\n  @Element() hostElement: HTMLIxCategoryFilterElement;\n\n  @State() hasFocus: boolean;\n  @State() categoryLogicalOperator = LogicalFilterOperator.EQUAL;\n  @State() inputValue: string;\n  @State() category: string;\n  @State() filterTokens: Array<{\n    id: string;\n    value: string;\n    operator: LogicalFilterOperator;\n  }> = [];\n\n  /**\n   * If true the filter will be in disabled state\n   */\n  @Prop() disabled = false;\n\n  /**\n   * If true the filter will be in readonly mode\n   */\n  @Prop() readonly = false;\n\n  /**\n   * A set of search criteria to populate the component with.\n   */\n  @Prop() filterState: FilterState;\n\n  /**\n   * Placeholder text to be displayed in an empty input field.\n   */\n  @Prop() placeholder: string;\n\n  /**\n   * Configuration object hash used to populate the dropwdown menu for typeahead and quick selection functionality.\n   * Each ID maps to an object with a label and an array of options to select from.\n   */\n  @Prop() categories: {\n    [id: string]: {\n      label: string;\n      options: string[];\n    };\n  };\n\n  /**\n   * In certain use cases some categories may not be available for selection anymore.\n   * To allow proper display of set filters with these categories this ID to label mapping can be populated.\n   *\n   * Configuration object hash used to supply labels to the filter chips in the input field.\n   * Each ID maps to a string representing the label to display.\n   */\n  @Prop() nonSelectableCategories?: {\n    [id: string]: string;\n  } = {};\n\n  /**\n   * A list of strings that will be supplied as typeahead suggestions not tied to any categories.\n   */\n  @Prop() suggestions: string[];\n\n  /**\n   * The icon next to the actual text input\n   * Defaults to 'search'\n   */\n  @Prop() icon = 'search';\n\n  /**\n   * Allows to hide the icon inside the text input.\n   * Defaults to false\n   */\n  @Prop() hideIcon: boolean;\n\n  /**\n   * If set categories will always be filtered via the respective logical operator.\n   * Toggling of the operator will not be available to the user.\n   *\n   * @since 2.2.0\n   */\n  @Prop() staticOperator?: LogicalFilterOperator;\n\n  /**\n   * If set to true allows that a single category can be set more than once.\n   * An already set category will not appear in the category dropdown if set to false.\n   *\n   * Defaults to true\n   */\n  @Prop() repeatCategories = true;\n\n  /**\n   * @internal For debugging purposes only!\n   */\n  @Prop() tmpDisableScrollIntoView = true;\n\n  /**\n   * i18n\n   */\n  @Prop() labelCategories = 'Categories';\n\n  /**\n   * i18n\n   */\n  @Prop() i18nPlainText = 'Filter by text';\n\n  /**\n   * Event dispatched whenever the a category gets selected in the dropdown\n   */\n  @Event() categoryChanged: EventEmitter<string>;\n\n  /**\n   * Event dispatched whenever the text input changes.\n   */\n  @Event() inputChanged: EventEmitter<InputState>;\n\n  /**\n   * Event dispatched whenever the filter state changes.\n   */\n  @Event() filterChanged: EventEmitter<FilterState>;\n\n  get dropdown() {\n    return this.hostElement.shadowRoot.querySelector('ix-dropdown');\n  }\n\n  @Watch('filterState')\n  watchFilterState(newValue) {\n    this.setFilterState(newValue);\n  }\n\n  componentDidLoad() {\n    if (this.filterState !== undefined) {\n      setTimeout(() => this.setFilterState(this.filterState));\n    }\n\n    this.hostElement?.addEventListener(\n      'keydown',\n      this.handleFormElementKeyDown.bind(this)\n    );\n\n    this.formElement?.addEventListener('submit', (e) => e.preventDefault());\n\n    if (this.textInput == null) {\n      console.warn(\n        'ix-category-filter - unable to add event listeners to native input element'\n      );\n      return;\n    }\n\n    this.textInput.addEventListener('focusin', () => {\n      this.hasFocus = true;\n    });\n    this.textInput.addEventListener('focusout', () => (this.hasFocus = false));\n    this.textInput.addEventListener('input', () => {\n      this.inputValue = this.textInput.value;\n      const inputState = new InputState(this.inputValue, this.category);\n      this.inputChanged.emit(inputState);\n\n      if (!this.dropdown.show) {\n        this.openDropdown();\n      }\n    });\n    this.textInput.addEventListener(\n      'keydown',\n      this.handleInputElementKeyDown.bind(this)\n    );\n  }\n\n  private setFilterState(state: FilterState) {\n    this.filterTokens = [];\n\n    for (const token of state.tokens) {\n      this.addToken(\n        token,\n        this.ID_CUSTOM_FILTER_VALUE,\n        this.categoryLogicalOperator,\n        false\n      );\n    }\n\n    for (const category of state.categories) {\n      this.addToken(category.value, category.id, category.operator, false);\n    }\n\n    this.emitFilterEvent();\n  }\n\n  private closeDropdown() {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    this.dropdown.show = false;\n  }\n\n  private openDropdown() {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    this.dropdown.show = true;\n  }\n\n  private handleFormElementKeyDown(e: KeyboardEvent) {\n    switch (e.code) {\n      case 'Enter':\n      case 'NumpadEnter':\n        if (!document.activeElement.classList.contains('dropdown-item')) {\n          return;\n        }\n\n        const token = document.activeElement.getAttribute('data-id');\n\n        if (this.hasCategorySelection()) {\n          if (this.category !== undefined) {\n            this.addToken(token, this.category);\n          } else if (\n            document.activeElement.classList.contains('category-item-id')\n          ) {\n            this.selectCategory(token);\n          }\n        } else {\n          this.addToken(token);\n        }\n\n        e.preventDefault();\n        break;\n\n      case 'ArrowUp':\n        this.focusPreviousItem();\n        e.preventDefault();\n        break;\n\n      case 'ArrowDown':\n        this.showDropdown = true;\n        this.focusNextItem();\n        e.preventDefault();\n        break;\n\n      case 'Escape':\n        this.closeDropdown();\n        break;\n    }\n  }\n\n  private focusPreviousItem() {\n    const sibling = document.activeElement.previousSibling;\n    if (sibling instanceof HTMLElement) {\n      sibling.focus();\n    }\n  }\n\n  private focusNextItem() {\n    const sibling = document.activeElement.nextSibling;\n    if (sibling instanceof HTMLElement) {\n      sibling.focus();\n    }\n  }\n\n  private handleInputElementKeyDown(e: KeyboardEvent) {\n    switch (e.code) {\n      case 'ArrowDown':\n        const selector = `.category-item-${\n          this.category !== undefined ? 'value' : 'id'\n        }`;\n        let item = this.hostElement.shadowRoot.querySelector(selector);\n\n        if (item instanceof HTMLElement) {\n          item.focus();\n          e.stopPropagation();\n        } else if (this.suggestions?.length) {\n          item = this.hostElement.shadowRoot.querySelector('.category-item');\n          if (item instanceof HTMLElement) {\n            item.focus();\n            e.stopPropagation();\n          }\n        }\n        break;\n\n      case 'Backspace':\n        if (this.textInput.value !== '') {\n          return;\n        }\n\n        if (this.category !== undefined) {\n          this.category = undefined;\n          return;\n        }\n\n        const tokenCount = this.filterTokens.length;\n        if (tokenCount > 0) {\n          this.removeToken(tokenCount - 1);\n        }\n        break;\n\n      case 'Enter':\n      case 'NumpadEnter':\n        this.addToken(this.inputValue, this.category);\n        e.preventDefault();\n        break;\n    }\n  }\n\n  private emitFilterEvent() {\n    const tokens = this.filterTokens\n      .filter((item) => item.id === this.ID_CUSTOM_FILTER_VALUE)\n      .map((item) => item.value);\n    const categories = this.filterTokens.filter(\n      (item) => item.id !== this.ID_CUSTOM_FILTER_VALUE\n    );\n    const filterState: FilterState = {\n      tokens,\n      categories,\n    };\n\n    this.filterChanged.emit(filterState);\n  }\n\n  private addToken(\n    token: string,\n    category: string = this.ID_CUSTOM_FILTER_VALUE,\n    operator = this.categoryLogicalOperator,\n    emitEvent = true\n  ) {\n    if (token === undefined || token === null) {\n      return;\n    }\n\n    const newToken = token.trim();\n\n    if (newToken === '') {\n      return;\n    }\n\n    if (this.hasToken(newToken)) {\n      return;\n    }\n\n    const pair = { id: category, value: newToken, operator };\n    this.filterTokens = [...this.filterTokens, pair];\n    this.textInput.value = '';\n    this.inputValue = '';\n    this.categoryLogicalOperator = LogicalFilterOperator.EQUAL;\n\n    if (this.category !== undefined) {\n      this.category = undefined;\n    }\n\n    this.isScrollStateDirty = true;\n\n    this.textInput.focus();\n\n    if (emitEvent) {\n      this.emitFilterEvent();\n    }\n  }\n\n  private removeToken(index: number) {\n    this.filterTokens = this.filterTokens.filter((_, i) => i !== index);\n    this.emitFilterEvent();\n  }\n\n  private getCategoryIds() {\n    const ids = [];\n    for (const id in this.categories) {\n      if (Object.prototype.hasOwnProperty.call(this.categories, id)) {\n        ids.push(id);\n      }\n    }\n\n    return ids;\n  }\n\n  private selectCategory(category: string) {\n    this.category = category;\n    this.textInput.value = '';\n    this.inputValue = '';\n    this.textInput.focus();\n    this.categoryChanged.emit(category);\n  }\n\n  private resetFilter(e: Event) {\n    e.stopPropagation();\n    this.closeDropdown();\n    this.filterTokens = [];\n    this.emitFilterEvent();\n  }\n\n  private filterMultiples(value: string) {\n    if (this.repeatCategories) {\n      return true;\n    }\n\n    const isCategoryAlreadySet = this.filterTokens.find(\n      (token) => token.id === value\n    );\n\n    return !isCategoryAlreadySet;\n  }\n\n  private hasToken(token: string) {\n    return this.filterTokens.some((filterToken) => {\n      const hasSameValue = filterToken.value === token;\n\n      if (!hasSameValue) {\n        return false;\n      }\n\n      if (this.category !== undefined) {\n        return this.category === filterToken.id;\n      }\n\n      if (filterToken.id) {\n        return filterToken.id === this.ID_CUSTOM_FILTER_VALUE;\n      }\n\n      return hasSameValue;\n    });\n  }\n\n  private filterDuplicateTokens(value: string) {\n    return !this.hasToken(value);\n  }\n\n  private filterByInput(value: string) {\n    if (this.inputValue === undefined || this.inputValue === '') {\n      return true;\n    }\n\n    return value.toLowerCase().indexOf(this.inputValue.toLowerCase()) !== -1;\n  }\n\n  private toggleCategoryOperator() {\n    switch (this.categoryLogicalOperator) {\n      case LogicalFilterOperator.EQUAL:\n        this.categoryLogicalOperator = LogicalFilterOperator.NOT_EQUAL;\n        break;\n\n      case LogicalFilterOperator.NOT_EQUAL:\n        this.categoryLogicalOperator = LogicalFilterOperator.EQUAL;\n        break;\n    }\n  }\n\n  private getFilterChipLabel(value: {\n    id: string;\n    value: string;\n    operator: LogicalFilterOperator;\n  }): string {\n    if (value.id === this.ID_CUSTOM_FILTER_VALUE) {\n      return value.value;\n    }\n\n    const operatorString =\n      value.operator === LogicalFilterOperator.EQUAL ? '=' : '!=';\n    const label =\n      this.categories[value.id]?.label ??\n      this.nonSelectableCategories[value.id] ??\n      value.id;\n\n    return `${label} ${operatorString} ${value.value}`;\n  }\n\n  private getFilteredSuggestions() {\n    if (!this.suggestions?.length) {\n      return [];\n    }\n\n    return this.suggestions\n      ?.filter((value) => this.filterByInput(value))\n      .filter((value) => this.filterDuplicateTokens(value));\n  }\n\n  private hasCategorySelection() {\n    return this.categories !== undefined;\n  }\n\n  private renderPlainSuggestions() {\n    return (\n      <div class=\"dropdown-item-container\">\n        {this.getFilteredSuggestions().map((suggestion) => (\n          <button\n            class=\"dropdown-item\"\n            data-id={suggestion}\n            onClick={() => this.addToken(suggestion)}\n            key={suggestion}\n            title={suggestion}\n          >\n            {suggestion}\n          </button>\n        ))}\n      </div>\n    );\n  }\n\n  private renderOperatorButton() {\n    if (this.staticOperator) {\n      return '';\n    }\n\n    const params: BaseButtonProps = {\n      type: 'button',\n      variant: 'secondary',\n      outline: false,\n      ghost: true,\n      iconOnly: true,\n      iconOval: false,\n      selected: false,\n      disabled: this.disabled || this.staticOperator !== undefined,\n      loading: false,\n      icon: '',\n      onClick: (e: Event) => {\n        e.stopPropagation();\n        this.toggleCategoryOperator();\n      },\n      extraClasses: {\n        'btn-icon-32': true,\n        'btn-toggle-operator': true,\n      },\n    };\n\n    return (\n      <BaseButton {...params}>\n        {this.categoryLogicalOperator === LogicalFilterOperator.NOT_EQUAL\n          ? '='\n          : '!='}\n      </BaseButton>\n    );\n  }\n\n  private getFilterOperatorString() {\n    let operator: LogicalFilterOperator;\n    if (this.staticOperator !== undefined) {\n      operator = this.staticOperator;\n    } else {\n      operator = this.categoryLogicalOperator;\n    }\n    return `${operator === LogicalFilterOperator.EQUAL ? '=' : '!='} `;\n  }\n\n  private renderCategoryValues() {\n    return (\n      <div class=\"dropdown-item-container\">\n        {this.renderOperatorButton()}\n        <div class=\"dropdown-header\">\n          {this.categories[this.category]?.label}\n        </div>\n        {this.categories[this.category]?.options\n          .filter((value) => this.filterByInput(value))\n          .filter((value) => this.filterDuplicateTokens(value))\n          .map((id) => (\n            <button\n              class=\"dropdown-item category-item-value\"\n              data-id={id}\n              title={id}\n              key={id}\n              onClick={(e) => {\n                e.preventDefault();\n                this.addToken(id, this.category);\n              }}\n            >\n              {`${this.getFilterOperatorString()} ${id}`}\n            </button>\n          ))}\n      </div>\n    );\n  }\n\n  private renderDropdownContent() {\n    if (this.hasCategorySelection()) {\n      if (this.category !== undefined) {\n        return this.renderCategoryValues();\n      } else {\n        return this.renderCategorySelection();\n      }\n    } else return this.renderPlainSuggestions();\n  }\n\n  private renderCategorySelection() {\n    return (\n      <div class=\"dropdown-item-container\">\n        {this.getCategoryIds()\n          ?.filter((id) => this.filterByInput(this.categories[id].label))\n          .filter((id) => this.filterMultiples(id))\n          .map((id) => (\n            <button\n              class=\"dropdown-item category-item category-item-id\"\n              data-id={id}\n              title={this.categories[id].label}\n              key={id}\n              onClick={(e) => {\n                e.preventDefault();\n                this.selectCategory(id);\n              }}\n              tabindex=\"0\"\n            >\n              {this.categories[id]?.label}\n            </button>\n          ))}\n      </div>\n    );\n  }\n\n  private getDropdownHeader() {\n    if (this.categories !== undefined) {\n      if (this.category !== undefined) {\n        return null;\n      } else {\n        return this.labelCategories;\n      }\n    }\n\n    return this.i18nPlainText;\n  }\n\n  componentDidRender() {\n    if (this.isScrollStateDirty) {\n      if (!this.tmpDisableScrollIntoView) {\n        this.textInput.scrollIntoView();\n      }\n      this.isScrollStateDirty = false;\n    }\n  }\n\n  private getResetButton() {\n    return (\n      <ix-icon-button\n        onClick={(e) => this.resetFilter(e)}\n        class={{\n          'reset-button': true,\n          'hide-reset-button':\n            !this.filterTokens.length && this.category === undefined,\n        }}\n        ghost\n        oval\n        icon={'clear'}\n        size=\"16\"\n      ></ix-icon-button>\n    );\n  }\n\n  private getIconColor() {\n    if (this.disabled) {\n      return 'color-componentn-1';\n    }\n\n    if (this.readonly) {\n      return 'color-std-txt';\n    }\n\n    return 'color-primary';\n  }\n\n  render() {\n    return (\n      <Host>\n        <form ref={(el) => (this.formElement = el)}>\n          <div\n            read-only={this.readonly}\n            class={{\n              'input-container': true,\n              disabled: this.disabled,\n              focus: this.hasFocus,\n              readonly: this.readonly,\n              'no-icon': this.hideIcon,\n            }}\n          >\n            <ix-icon\n              color={this.getIconColor()}\n              class={{ 'd-none': this.hideIcon }}\n              name={this.icon}\n              size=\"16\"\n            ></ix-icon>\n            <div class=\"token-container\">\n              <ul class=\"list-unstyled\">\n                {this.filterTokens.map((value, index) => (\n                  <li\n                    key={value.toString()}\n                    class={{\n                      animate__animated: true,\n                      animate__fadein: true,\n                    }}\n                  >\n                    <ix-filter-chip\n                      disabled={this.disabled}\n                      readonly={this.readonly}\n                      onClick={(e) => e.stopPropagation()}\n                      onCloseClick={() => this.removeToken(index)}\n                    >\n                      {this.getFilterChipLabel(value)}\n                    </ix-filter-chip>\n                  </li>\n                ))}\n                {this.categories === undefined ? (\n                  ''\n                ) : (\n                  <li\n                    class={{\n                      'category-preview': true,\n                      'd-none': this.category === undefined,\n                    }}\n                  >\n                    {this.categories[this.category]?.label}\n                  </li>\n                )}\n                <input\n                  class={{\n                    'text-input': true,\n                    'hide-placeholder':\n                      this.readonly ||\n                      this.disabled ||\n                      this.category !== undefined,\n                  }}\n                  autocomplete=\"off\"\n                  name=\"category-filter-input\"\n                  disabled={this.disabled}\n                  readonly={this.readonly}\n                  ref={(el) => (this.textInput = el)}\n                  type=\"text\"\n                  placeholder={this.placeholder}\n                ></input>\n              </ul>\n            </div>\n            {!this.readonly && !this.disabled && this.getResetButton()}\n          </div>\n        </form>\n\n        {this.disabled || this.readonly ? (\n          ''\n        ) : (\n          <ix-dropdown\n            show={this.showDropdown}\n            closeBehavior=\"outside\"\n            offset={{ mainAxis: 2 }}\n            anchor={this.textInput}\n            trigger={this.hostElement}\n            header={this.getDropdownHeader()}\n          >\n            {this.renderDropdownContent()}\n          </ix-dropdown>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-category-filter.entry.js","mappings":"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","names":[],"sources":["src/components/category-filter/category-filter.scss?tag=ix-category-filter&encapsulation=shadow","src/components/category-filter/category-filter.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 'legacy/mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/shadows';\n@import 'mixins/shadow-dom/component';\n@import 'mixins/text-truncation';\n@import '../button/button';\n@import 'legacy/components/dropdown';\n@import 'legacy/components/forms';\n@import 'components/form/input';\n\n:host {\n  @include ix-component;\n\n  display: block;\n  position: relative;\n  height: auto;\n\n  @include host-focus-visible {\n    border-color: var(--theme-color-primary);\n    box-shadow: 0 0 $tiny-space 0 var(--theme-color-primary) !important;\n  }\n\n  .reset-button {\n    position: absolute;\n    top: $tiny-space;\n    right: $tiny-space;\n  }\n\n  .reset-button.hide-reset-button {\n    display: none;\n  }\n\n  .input-container {\n    &:not(.readonly):not(.disabled) {\n      @include element-input('false');\n    }\n\n    &.disabled {\n      color: var(--theme-input--color--disabled);\n      border-bottom: var(--theme-input--border-thickness, 1px) solid\n        var(--theme-input--border-color-bottom--disabled);\n    }\n\n    &.readonly {\n      @include element-input;\n    }\n\n    display: flex;\n    height: auto;\n    max-height: 3.75rem;\n    padding: 1px $large-space 1px 1.75rem !important;\n\n    &.no-icon {\n      padding-left: $tiny-space;\n    }\n  }\n\n  .token-container {\n    flex-grow: 1;\n    overflow: hidden;\n  }\n\n  .text-input {\n    @include ellipsis;\n    @include text-default;\n    width: auto;\n    height: 1.75rem;\n    min-height: $large-space;\n    background: transparent;\n    flex-grow: 1;\n    box-shadow: none;\n\n    &,\n    &:hover,\n    &:focus-visible {\n      border: none;\n      outline: none;\n    }\n\n    &.hide-placeholder::placeholder {\n      opacity: 0;\n    }\n  }\n\n  .list-unstyled {\n    display: flex;\n    flex-wrap: wrap;\n    list-style: none;\n    padding: 0;\n    margin: 0;\n    overflow-y: auto;\n  }\n\n  ix-icon {\n    position: absolute;\n    top: $small-space;\n    left: $small-space;\n  }\n\n  ix-filter-chip {\n    margin-right: $tiny-space;\n  }\n\n  .category-preview {\n    display: flex;\n    align-items: center;\n    height: $large-space;\n    background-color: var(--theme-bg-3);\n    border-top-left-radius: $default-space;\n    border-bottom-left-radius: $default-space;\n    padding: $small-space;\n    margin: 2px 0;\n  }\n\n  ul {\n    height: 100%;\n  }\n\n  ul > li,\n  input {\n    padding-inline-start: 0;\n    padding-top: 2px;\n    padding-bottom: 2px;\n  }\n\n  ix-dropdown {\n    min-width: 10rem !important;\n\n    .dropdown-item-container {\n      display: flex;\n      flex-direction: column;\n\n      .dropdown-item {\n        @include text-default-single;\n        @include ellipsis;\n        @include focus-visible {\n          border-color: var(--theme-color-focus-bdr);\n        }\n\n        height: $large-control-height;\n        margin: $tiny-space $small-space;\n        padding-inline: $small-space;\n        border: 1px solid transparent;\n        border-radius: 100rem;\n        width: auto;\n        justify-content: flex-start;\n        flex-grow: 1;\n      }\n\n      .category-item {\n        border-end-end-radius: 0;\n        border-start-end-radius: 0;\n      }\n\n      .category-item-value {\n        border-start-start-radius: 0;\n        border-end-start-radius: 0;\n      }\n    }\n\n    .btn-toggle-operator {\n      width: 2rem;\n      height: 2rem;\n      margin-inline: $small-space;\n    }\n  }\n\n  .d-none {\n    display: none;\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  Watch,\n} from '@stencil/core';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\nimport { FilterState } from './filter-state';\nimport { InputState } from './input-state';\nimport { LogicalFilterOperator } from './logical-filter-operator';\n\n@Component({\n  tag: 'ix-category-filter',\n  styleUrl: 'category-filter.scss',\n  shadow: true,\n})\nexport class CategoryFilter {\n  private readonly ID_CUSTOM_FILTER_VALUE = 'CW_CUSTOM_FILTER_VALUE';\n\n  @State() showDropdown: boolean;\n  @State() private textInput?: HTMLInputElement;\n  private formElement?: HTMLFormElement;\n  private isScrollStateDirty?: boolean;\n\n  @Element() hostElement!: HTMLIxCategoryFilterElement;\n\n  @State() hasFocus: boolean;\n  @State() categoryLogicalOperator = LogicalFilterOperator.EQUAL;\n  @State() inputValue: string;\n  @State() category: string;\n  @State() filterTokens: Array<{\n    id: string;\n    value: string;\n    operator: LogicalFilterOperator;\n  }> = [];\n\n  /**\n   * If true the filter will be in disabled state\n   */\n  @Prop() disabled = false;\n\n  /**\n   * If true the filter will be in readonly mode\n   */\n  @Prop() readonly = false;\n\n  /**\n   * A set of search criteria to populate the component with.\n   */\n  @Prop() filterState?: FilterState;\n\n  /**\n   * Placeholder text to be displayed in an empty input field.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * Configuration object hash used to populate the dropdown menu for type-ahead and quick selection functionality.\n   * Each ID maps to an object with a label and an array of options to select from.\n   */\n  @Prop() categories?: {\n    [id: string]: {\n      label: string;\n      options: string[];\n    };\n  };\n\n  /**\n   * In certain use cases some categories may not be available for selection anymore.\n   * To allow proper display of set filters with these categories this ID to label mapping can be populated.\n   *\n   * Configuration object hash used to supply labels to the filter chips in the input field.\n   * Each ID maps to a string representing the label to display.\n   */\n  @Prop() nonSelectableCategories?: {\n    [id: string]: string;\n  } = {};\n\n  /**\n   * A list of strings that will be supplied as type-ahead suggestions not tied to any categories.\n   */\n  @Prop() suggestions?: string[];\n\n  /**\n   * The icon next to the actual text input\n   * Defaults to 'search'\n   */\n  @Prop() icon = 'search';\n\n  /**\n   * Allows to hide the icon inside the text input.\n   * Defaults to false\n   */\n  @Prop() hideIcon: boolean = false;\n\n  /**\n   * If set categories will always be filtered via the respective logical operator.\n   * Toggling of the operator will not be available to the user.\n   *\n   * @since 2.2.0\n   */\n  @Prop() staticOperator?: LogicalFilterOperator;\n\n  /**\n   * If set to true, allows that a single category can be set more than once.\n   * An already set category will not appear in the category dropdown if set to false.\n   *\n   * Defaults to true\n   */\n  @Prop() repeatCategories = true;\n\n  /**\n   * @internal For debugging purposes only!\n   */\n  @Prop() tmpDisableScrollIntoView = true;\n\n  /**\n   * i18n\n   */\n  @Prop() labelCategories = 'Categories';\n\n  /**\n   * i18n\n   */\n  @Prop() i18nPlainText = 'Filter by text';\n\n  /**\n   * Event dispatched whenever a category gets selected in the dropdown\n   */\n  @Event() categoryChanged!: EventEmitter<string>;\n\n  /**\n   * Event dispatched whenever the text input changes.\n   */\n  @Event() inputChanged!: EventEmitter<InputState>;\n\n  /**\n   * Event dispatched whenever the filter state changes.\n   */\n  @Event() filterChanged!: EventEmitter<FilterState>;\n\n  get dropdown() {\n    return this.hostElement.shadowRoot.querySelector('ix-dropdown');\n  }\n\n  @Watch('filterState')\n  watchFilterState(newValue) {\n    this.setFilterState(newValue);\n  }\n\n  componentDidLoad() {\n    if (this.filterState !== undefined) {\n      setTimeout(() => this.setFilterState(this.filterState));\n    }\n\n    this.hostElement?.addEventListener(\n      'keydown',\n      this.handleFormElementKeyDown.bind(this)\n    );\n\n    this.formElement?.addEventListener('submit', (e) => e.preventDefault());\n\n    if (this.textInput == null) {\n      console.warn(\n        'ix-category-filter - unable to add event listeners to native input element'\n      );\n      return;\n    }\n\n    this.textInput.addEventListener('focusin', () => {\n      this.hasFocus = true;\n    });\n    this.textInput.addEventListener('focusout', () => (this.hasFocus = false));\n    this.textInput.addEventListener('input', () => {\n      this.inputValue = this.textInput.value;\n      const inputState = new InputState(this.inputValue, this.category);\n      this.inputChanged.emit(inputState);\n\n      if (!this.dropdown.show) {\n        this.openDropdown();\n      }\n    });\n    this.textInput.addEventListener(\n      'keydown',\n      this.handleInputElementKeyDown.bind(this)\n    );\n  }\n\n  private setFilterState(state: FilterState) {\n    this.filterTokens = [];\n\n    for (const token of state.tokens) {\n      this.addToken(\n        token,\n        this.ID_CUSTOM_FILTER_VALUE,\n        this.categoryLogicalOperator,\n        false\n      );\n    }\n\n    for (const category of state.categories) {\n      this.addToken(category.value, category.id, category.operator, false);\n    }\n\n    this.emitFilterEvent();\n  }\n\n  private closeDropdown() {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    this.dropdown.show = false;\n  }\n\n  private openDropdown() {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    this.dropdown.show = true;\n  }\n\n  private handleFormElementKeyDown(e: KeyboardEvent) {\n    switch (e.code) {\n      case 'Enter':\n      case 'NumpadEnter':\n        if (!document.activeElement.classList.contains('dropdown-item')) {\n          return;\n        }\n\n        const token = document.activeElement.getAttribute('data-id');\n\n        if (this.hasCategorySelection()) {\n          if (this.category !== undefined) {\n            this.addToken(token, this.category);\n          } else if (\n            document.activeElement.classList.contains('category-item-id')\n          ) {\n            this.selectCategory(token);\n          }\n        } else {\n          this.addToken(token);\n        }\n\n        e.preventDefault();\n        break;\n\n      case 'ArrowUp':\n        this.focusPreviousItem();\n        e.preventDefault();\n        break;\n\n      case 'ArrowDown':\n        this.showDropdown = true;\n        this.focusNextItem();\n        e.preventDefault();\n        break;\n\n      case 'Escape':\n        this.closeDropdown();\n        break;\n    }\n  }\n\n  private focusPreviousItem() {\n    const sibling = document.activeElement.previousSibling;\n    if (sibling instanceof HTMLElement) {\n      sibling.focus();\n    }\n  }\n\n  private focusNextItem() {\n    const sibling = document.activeElement.nextSibling;\n    if (sibling instanceof HTMLElement) {\n      sibling.focus();\n    }\n  }\n\n  private handleInputElementKeyDown(e: KeyboardEvent) {\n    switch (e.code) {\n      case 'ArrowDown':\n        const selector = `.category-item-${\n          this.category !== undefined ? 'value' : 'id'\n        }`;\n        let item = this.hostElement.shadowRoot.querySelector(selector);\n\n        if (item instanceof HTMLElement) {\n          item.focus();\n          e.stopPropagation();\n        } else if (this.suggestions?.length) {\n          item = this.hostElement.shadowRoot.querySelector('.category-item');\n          if (item instanceof HTMLElement) {\n            item.focus();\n            e.stopPropagation();\n          }\n        }\n        break;\n\n      case 'Backspace':\n        if (this.textInput.value !== '') {\n          return;\n        }\n\n        if (this.category !== undefined) {\n          this.category = undefined;\n          return;\n        }\n\n        const tokenCount = this.filterTokens.length;\n        if (tokenCount > 0) {\n          this.removeToken(tokenCount - 1);\n        }\n        break;\n\n      case 'Enter':\n      case 'NumpadEnter':\n        this.addToken(this.inputValue, this.category);\n        e.preventDefault();\n        break;\n    }\n  }\n\n  private emitFilterEvent() {\n    const tokens = this.filterTokens\n      .filter((item) => item.id === this.ID_CUSTOM_FILTER_VALUE)\n      .map((item) => item.value);\n    const categories = this.filterTokens.filter(\n      (item) => item.id !== this.ID_CUSTOM_FILTER_VALUE\n    );\n    const filterState: FilterState = {\n      tokens,\n      categories,\n    };\n\n    this.filterChanged.emit(filterState);\n  }\n\n  private addToken(\n    token: string,\n    category: string = this.ID_CUSTOM_FILTER_VALUE,\n    operator = this.categoryLogicalOperator,\n    emitEvent = true\n  ) {\n    if (token === undefined || token === null) {\n      return;\n    }\n\n    const newToken = token.trim();\n\n    if (newToken === '') {\n      return;\n    }\n\n    if (this.hasToken(newToken)) {\n      return;\n    }\n\n    const pair = { id: category, value: newToken, operator };\n    this.filterTokens = [...this.filterTokens, pair];\n    this.textInput.value = '';\n    this.inputValue = '';\n    this.categoryLogicalOperator = LogicalFilterOperator.EQUAL;\n\n    if (this.category !== undefined) {\n      this.category = undefined;\n    }\n\n    this.isScrollStateDirty = true;\n\n    this.textInput.focus();\n\n    if (emitEvent) {\n      this.emitFilterEvent();\n    }\n  }\n\n  private removeToken(index: number) {\n    this.filterTokens = this.filterTokens.filter((_, i) => i !== index);\n    this.emitFilterEvent();\n  }\n\n  private getCategoryIds() {\n    const ids = [];\n    for (const id in this.categories) {\n      if (Object.prototype.hasOwnProperty.call(this.categories, id)) {\n        ids.push(id);\n      }\n    }\n\n    return ids;\n  }\n\n  private selectCategory(category: string) {\n    this.category = category;\n    this.textInput.value = '';\n    this.inputValue = '';\n    this.textInput.focus();\n    this.categoryChanged.emit(category);\n  }\n\n  private resetFilter(e: Event) {\n    e.stopPropagation();\n    this.closeDropdown();\n    this.filterTokens = [];\n    if (this.category) {\n      this.category = undefined;\n      this.categoryChanged.emit(this.category);\n    }\n    this.emitFilterEvent();\n  }\n\n  private filterMultiples(value: string) {\n    if (this.repeatCategories) {\n      return true;\n    }\n\n    const isCategoryAlreadySet = this.filterTokens.find(\n      (token) => token.id === value\n    );\n\n    return !isCategoryAlreadySet;\n  }\n\n  private hasToken(token: string) {\n    return this.filterTokens.some((filterToken) => {\n      const hasSameValue = filterToken.value === token;\n\n      if (!hasSameValue) {\n        return false;\n      }\n\n      if (this.category !== undefined) {\n        return this.category === filterToken.id;\n      }\n\n      if (filterToken.id) {\n        return filterToken.id === this.ID_CUSTOM_FILTER_VALUE;\n      }\n\n      return hasSameValue;\n    });\n  }\n\n  private filterDuplicateTokens(value: string) {\n    return !this.hasToken(value);\n  }\n\n  private filterByInput(value: string) {\n    if (this.inputValue === undefined || this.inputValue === '') {\n      return true;\n    }\n\n    return value.toLowerCase().indexOf(this.inputValue.toLowerCase()) !== -1;\n  }\n\n  private toggleCategoryOperator() {\n    switch (this.categoryLogicalOperator) {\n      case LogicalFilterOperator.EQUAL:\n        this.categoryLogicalOperator = LogicalFilterOperator.NOT_EQUAL;\n        break;\n\n      case LogicalFilterOperator.NOT_EQUAL:\n        this.categoryLogicalOperator = LogicalFilterOperator.EQUAL;\n        break;\n    }\n  }\n\n  private getFilterChipLabel(value: {\n    id: string;\n    value: string;\n    operator: LogicalFilterOperator;\n  }): string {\n    if (value.id === this.ID_CUSTOM_FILTER_VALUE) {\n      return value.value;\n    }\n\n    const operatorString =\n      value.operator === LogicalFilterOperator.EQUAL ? '=' : '!=';\n    const label =\n      this.categories[value.id]?.label ??\n      this.nonSelectableCategories[value.id] ??\n      value.id;\n\n    return `${label} ${operatorString} ${value.value}`;\n  }\n\n  private getFilteredSuggestions() {\n    if (!this.suggestions?.length) {\n      return [];\n    }\n\n    return this.suggestions\n      ?.filter((value) => this.filterByInput(value))\n      .filter((value) => this.filterDuplicateTokens(value));\n  }\n\n  private hasCategorySelection() {\n    return this.categories !== undefined;\n  }\n\n  private renderPlainSuggestions() {\n    return (\n      <div class=\"dropdown-item-container\">\n        {this.getFilteredSuggestions().map((suggestion) => (\n          <button\n            class=\"dropdown-item\"\n            data-id={suggestion}\n            onClick={() => this.addToken(suggestion)}\n            key={suggestion}\n            title={suggestion}\n          >\n            {suggestion}\n          </button>\n        ))}\n      </div>\n    );\n  }\n\n  private renderOperatorButton() {\n    if (this.staticOperator) {\n      return '';\n    }\n\n    const params: BaseButtonProps = {\n      type: 'button',\n      variant: 'secondary',\n      outline: false,\n      ghost: true,\n      iconOnly: true,\n      iconOval: false,\n      selected: false,\n      disabled: this.disabled || this.staticOperator !== undefined,\n      loading: false,\n      icon: '',\n      onClick: (e: Event) => {\n        e.stopPropagation();\n        this.toggleCategoryOperator();\n      },\n      extraClasses: {\n        'btn-icon-32': true,\n        'btn-toggle-operator': true,\n      },\n    };\n\n    return (\n      <BaseButton {...params}>\n        {this.categoryLogicalOperator === LogicalFilterOperator.NOT_EQUAL\n          ? '='\n          : '!='}\n      </BaseButton>\n    );\n  }\n\n  private getFilterOperatorString() {\n    let operator: LogicalFilterOperator;\n    if (this.staticOperator !== undefined) {\n      operator = this.staticOperator;\n    } else {\n      operator = this.categoryLogicalOperator;\n    }\n    return `${operator === LogicalFilterOperator.EQUAL ? '=' : '!='} `;\n  }\n\n  private renderCategoryValues() {\n    return (\n      <div class=\"dropdown-item-container\">\n        {this.renderOperatorButton()}\n        <div class=\"dropdown-header\">\n          {this.categories[this.category]?.label}\n        </div>\n        {this.categories[this.category]?.options\n          .filter((value) => this.filterByInput(value))\n          .filter((value) => this.filterDuplicateTokens(value))\n          .map((id) => (\n            <button\n              class=\"dropdown-item category-item-value\"\n              data-id={id}\n              title={id}\n              key={id}\n              onClick={(e) => {\n                e.preventDefault();\n                this.addToken(id, this.category);\n              }}\n            >\n              {`${this.getFilterOperatorString()} ${id}`}\n            </button>\n          ))}\n      </div>\n    );\n  }\n\n  private renderDropdownContent() {\n    if (this.hasCategorySelection()) {\n      if (this.category !== undefined) {\n        return this.renderCategoryValues();\n      } else {\n        return this.renderCategorySelection();\n      }\n    } else return this.renderPlainSuggestions();\n  }\n\n  private renderCategorySelection() {\n    return (\n      <div class=\"dropdown-item-container\">\n        {this.getCategoryIds()\n          ?.filter((id) => this.filterByInput(this.categories[id].label))\n          .filter((id) => this.filterMultiples(id))\n          .map((id) => (\n            <button\n              class=\"dropdown-item category-item category-item-id\"\n              data-id={id}\n              title={this.categories[id].label}\n              key={id}\n              onClick={(e) => {\n                e.preventDefault();\n                this.selectCategory(id);\n              }}\n              tabindex=\"0\"\n            >\n              {this.categories[id]?.label}\n            </button>\n          ))}\n      </div>\n    );\n  }\n\n  private getDropdownHeader() {\n    if (this.categories !== undefined) {\n      if (this.category !== undefined) {\n        return null;\n      } else {\n        return this.labelCategories;\n      }\n    }\n\n    return this.i18nPlainText;\n  }\n\n  componentDidRender() {\n    if (this.isScrollStateDirty) {\n      if (!this.tmpDisableScrollIntoView) {\n        this.textInput.scrollIntoView();\n      }\n      this.isScrollStateDirty = false;\n    }\n  }\n\n  private getResetButton() {\n    return (\n      <ix-icon-button\n        onClick={(e) => this.resetFilter(e)}\n        class={{\n          'reset-button': true,\n          'hide-reset-button':\n            !this.filterTokens.length && this.category === undefined,\n        }}\n        ghost\n        oval\n        icon={'clear'}\n        size=\"16\"\n      ></ix-icon-button>\n    );\n  }\n\n  private getIconColor() {\n    if (this.disabled) {\n      return 'color-componentn-1';\n    }\n\n    if (this.readonly) {\n      return 'color-std-txt';\n    }\n\n    return 'color-primary';\n  }\n\n  render() {\n    return (\n      <Host>\n        <form ref={(el) => (this.formElement = el)}>\n          <div\n            read-only={this.readonly}\n            class={{\n              'input-container': true,\n              disabled: this.disabled,\n              focus: this.hasFocus,\n              readonly: this.readonly,\n              'no-icon': this.hideIcon,\n            }}\n          >\n            <ix-icon\n              color={this.getIconColor()}\n              class={{ 'd-none': this.hideIcon }}\n              name={this.icon}\n              size=\"16\"\n            ></ix-icon>\n            <div class=\"token-container\">\n              <ul class=\"list-unstyled\">\n                {this.filterTokens.map((value, index) => (\n                  <li\n                    key={value.toString()}\n                    class={{\n                      animate__animated: true,\n                      animate__fadein: true,\n                    }}\n                  >\n                    <ix-filter-chip\n                      disabled={this.disabled}\n                      readonly={this.readonly}\n                      onClick={(e) => e.stopPropagation()}\n                      onCloseClick={() => this.removeToken(index)}\n                    >\n                      {this.getFilterChipLabel(value)}\n                    </ix-filter-chip>\n                  </li>\n                ))}\n                {this.categories === undefined ? (\n                  ''\n                ) : (\n                  <li\n                    class={{\n                      'category-preview': true,\n                      'd-none': this.category === undefined,\n                    }}\n                  >\n                    {this.categories[this.category]?.label}\n                  </li>\n                )}\n                <input\n                  class={{\n                    'text-input': true,\n                    'hide-placeholder':\n                      this.readonly ||\n                      this.disabled ||\n                      this.category !== undefined,\n                  }}\n                  autocomplete=\"off\"\n                  name=\"category-filter-input\"\n                  disabled={this.disabled}\n                  readonly={this.readonly}\n                  ref={(el) => (this.textInput = el)}\n                  type=\"text\"\n                  placeholder={this.placeholder}\n                ></input>\n              </ul>\n            </div>\n            {!this.readonly && !this.disabled && this.getResetButton()}\n          </div>\n        </form>\n\n        {this.disabled || this.readonly ? (\n          ''\n        ) : (\n          <ix-dropdown\n            show={this.showDropdown}\n            closeBehavior=\"outside\"\n            offset={{ mainAxis: 2 }}\n            anchor={this.textInput}\n            trigger={this.hostElement}\n            header={this.getDropdownHeader()}\n          >\n            {this.renderDropdownContent()}\n          </ix-dropdown>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -35,11 +35,11 @@ const Chip = class {
                 [this.outline ? 'borderColor' : 'backgroundColor']: this.background,
             };
         }
-        return (h(Host, { key: '8ede968301d60515bc378c80141926ad75fab0cd', tabIndex: "-1", title: this.el.textContent, style: this.variant === 'custom'
+        return (h(Host, { key: 'bd5ac95ed2866d7781a08a1e3c6292f2104b0a85', tabIndex: "-1", title: this.el.textContent, style: this.variant === 'custom'
                 ? {
                     '--ix-icon-button-color': (_b = this.chipColor) !== null && _b !== void 0 ? _b : this.color,
                 }
-                : {} }, h("div", { key: 'ff82604fbd0ed7d74cdd753e1f1690f4bf67959f', style: Object.assign({}, customStyle), class: {
+                : {} }, h("div", { key: '3601eb2dd1f1f970ed2779bf33d7c38214e61295', style: Object.assign({}, customStyle), class: {
                 container: true,
                 outline: this.outline,
                 inactive: isInactive,
@@ -53,10 +53,10 @@ const Chip = class {
                 custom: this.variant === 'custom',
                 closable: this.closable,
                 icon: !!this.icon,
-            } }, h("ix-icon", { key: '7e033b4f17e195a9ce75e3fbea992290180feb1f', class: {
+            } }, h("ix-icon", { key: '01fb4eb0cf4c057fa074f6edc043bf71c6cb8db0', class: {
                 'with-icon': true,
                 hidden: !this.icon,
-            }, name: this.icon, size: '24' }), h("span", { key: '0d0bafd87e80596388ff1b74bcb9fa6024f6fe03', class: "slot-container" }, h("slot", { key: '057958812ca98820f4e039b7c5e2f016d27854c6' })), isInactive === false && this.closable ? this.getCloseButton() : null)));
+            }, name: this.icon, size: '24' }), h("span", { key: 'e6088fa930b598833fb2a22b9a83c9e964e99a1d', class: "slot-container" }, h("slot", { key: 'ac89d7796e7c083dc1ccb3d74018925d07e07ff5' })), isInactive === false && this.closable ? this.getCloseButton() : null)));
     }
     get el() { return getElement(this); }
 };